/* ===== CD54 BILLARD - PAGE DE CONNEXION PREMIUM ===== */
/* Version: 3.1.0 - Aurora + Glassmorphism + Premium Typography */
/* FIX: Sélecteurs renforcés avec !important pour override WordPress */

/* ============================================================
   1. TYPOGRAPHIES (Google Fonts - Playfair Display + Inter)
   ============================================================ */

/* Polices préchargées via functions.php (cd54_login_preload_fonts)
   pour éviter le @import bloquant et améliorer le LCP */

/* ============================================================
   2. FOND DE PAGE - EFFET AURORA (renforcé)
   ============================================================ */

body.login {
    background: #0a0a1a !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    overflow-x: hidden !important;
}

/* Aurora Effect - Couche de base - RENFORCÉ */
body.login::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(221, 24, 59, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(37, 99, 235, 0.20) 0%, transparent 50%),
        radial-gradient(ellipse 50% 30% at 50% 80%, rgba(245, 158, 11, 0.15) 0%, transparent 50%) !important;
    animation: aurora 15s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Aurora Animation - PLUS VISIBLE */
@keyframes aurora {
    0%, 100% {
        background:
            radial-gradient(ellipse 80% 50% at 20% 40%, rgba(221, 24, 59, 0.25) 0%, transparent 50%),
            radial-gradient(ellipse 60% 40% at 80% 60%, rgba(37, 99, 235, 0.20) 0%, transparent 50%),
            radial-gradient(ellipse 50% 30% at 50% 80%, rgba(245, 158, 11, 0.15) 0%, transparent 50%);
    }
    33% {
        background:
            radial-gradient(ellipse 70% 60% at 30% 30%, rgba(221, 24, 59, 0.30) 0%, transparent 50%),
            radial-gradient(ellipse 50% 50% at 70% 70%, rgba(37, 99, 235, 0.25) 0%, transparent 50%),
            radial-gradient(ellipse 60% 40% at 40% 90%, rgba(245, 158, 11, 0.18) 0%, transparent 50%);
    }
    66% {
        background:
            radial-gradient(ellipse 60% 40% at 40% 50%, rgba(221, 24, 59, 0.20) 0%, transparent 50%),
            radial-gradient(ellipse 70% 60% at 60% 40%, rgba(37, 99, 235, 0.30) 0%, transparent 50%),
            radial-gradient(ellipse 40% 50% at 70% 70%, rgba(245, 158, 11, 0.22) 0%, transparent 50%);
    }
}

/* Particules subtiles */
body.login::after {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(255,255,255,0.03) 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, rgba(255,255,255,0.03) 1px, transparent 1px) !important;
    background-size: 80px 80px !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* ============================================================
   3. CONTENEUR PRINCIPAL
   ============================================================ */

#login {
    width: 100% !important;
    max-width: 460px !important;
    padding: 40px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ============================================================
   4. LOGO CD54 - Animation pulsation subtile
   ============================================================ */

#login h1 {
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    animation: logoPulse 4s ease-in-out infinite, fadeInUp 0.6s ease forwards !important;
}

@keyframes logoPulse {
    0%, 100% {
        filter: drop-shadow(0 4px 20px rgba(221, 24, 59, 0.3));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 6px 30px rgba(221, 24, 59, 0.5));
        transform: scale(1.02);
    }
}

#login h1 a,
.login h1 a {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 280px !important;
    height: 195px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: block !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    transition: transform 0.3s ease !important;
}

#login h1 a:hover {
    transform: scale(1.05) !important;
}

/* ============================================================
   5. MESSAGE D'ACCUEIL - SANS FOND + Dégradé doré
   ============================================================ */

/* Reset complet du message WordPress */
.login .message,
.login #login .message,
body.login .message,
body.login #login .message,
.login .cd54-welcome-message,
body.login .cd54-welcome-message,
#login .cd54-welcome-message,
body.login #login .cd54-welcome-message,
div.cd54-welcome-message,
.login div.message {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 0 36px 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-left: none !important;
    box-shadow: none !important;
    letter-spacing: 0.3px !important;
    animation: fadeInUp 0.6s ease 0.1s forwards !important;
    opacity: 0;
    width: auto !important;
    max-width: 400px !important;
}

/* Titre "Espace membres" avec dégradé doré */
.login .cd54-welcome-message strong,
body.login .cd54-welcome-message strong,
#login .cd54-welcome-message strong,
.login .message strong,
body.login .message strong {
    display: block !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    color: transparent !important;
    background: linear-gradient(135deg, #ffffff 0%, #f5a623 40%, #DD183B 100%) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin-bottom: 12px !important;
    letter-spacing: 1px !important;
    animation: gradientShift 5s ease infinite !important;
    text-shadow: none !important;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ============================================================
   6. FORMULAIRE - Glassmorphism + Bordure Glow
   ============================================================ */

#loginform,
.login form,
body.login form,
body.login #loginform {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 24px !important;
    padding: 44px 40px !important;
    max-width: 400px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    animation: fadeInUp 0.6s ease 0.2s forwards !important;
    opacity: 0;
    border: 2px solid transparent !important;
    box-shadow:
        0 0 0 2px rgba(221, 24, 59, 0.3),
        0 0 30px rgba(221, 24, 59, 0.15),
        0 0 60px rgba(37, 99, 235, 0.1),
        0 8px 40px rgba(0, 0, 0, 0.4) !important;
}

/* Animation glow sur le formulaire */
#loginform,
body.login #loginform {
    animation: fadeInUp 0.6s ease 0.2s forwards, formGlow 8s ease-in-out infinite !important;
}

@keyframes formGlow {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(221, 24, 59, 0.4),
            0 0 30px rgba(221, 24, 59, 0.2),
            0 0 60px rgba(37, 99, 235, 0.1),
            0 8px 40px rgba(0, 0, 0, 0.4);
    }
    33% {
        box-shadow:
            0 0 0 2px rgba(37, 99, 235, 0.4),
            0 0 30px rgba(37, 99, 235, 0.2),
            0 0 60px rgba(245, 158, 11, 0.15),
            0 8px 40px rgba(0, 0, 0, 0.4);
    }
    66% {
        box-shadow:
            0 0 0 2px rgba(245, 158, 11, 0.4),
            0 0 30px rgba(245, 158, 11, 0.2),
            0 0 60px rgba(221, 24, 59, 0.15),
            0 8px 40px rgba(0, 0, 0, 0.4);
    }
}

/* ============================================================
   7. FLOATING LABELS - Effet moderne
   ============================================================ */

/* Container du champ username - WordPress n'a PAS de classe sur ce <p> */
body.login #loginform > p:first-of-type,
#loginform > p:first-of-type,
body.login #loginform p.login-username,
#loginform p.login-username {
    position: relative !important;
    margin-bottom: 32px !important;
}

/* Container du champ password - structure WordPress spéciale */
body.login #loginform .user-pass-wrap,
body.login .user-pass-wrap,
#loginform .user-pass-wrap {
    position: relative !important;
    margin-bottom: 32px !important;
}

/* ===== LABEL IDENTIFIANT - État normal (dans l'input) ===== */
body.login #loginform p.login-username label[for="user_login"],
body.login #loginform label[for="user_login"],
#loginform p.login-username label[for="user_login"],
#loginform label[for="user_login"] {
    font-family: 'Outfit', -apple-system, sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    position: absolute !important;
    left: 20px !important;
    top: 18px !important;
    transform: none !important;
    pointer-events: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 2 !important;
    background: transparent !important;
    padding: 0 4px !important;
    margin: 0 !important;
    letter-spacing: 0.3px !important;
    line-height: 1.4 !important;
}

/* ===== LABEL MOT DE PASSE - État normal (dans l'input) ===== */
body.login #loginform .user-pass-wrap label[for="user_pass"],
body.login .user-pass-wrap label[for="user_pass"],
#loginform .user-pass-wrap label[for="user_pass"],
.user-pass-wrap > label[for="user_pass"] {
    font-family: 'Outfit', -apple-system, sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    position: absolute !important;
    left: 20px !important;
    top: 18px !important;
    transform: none !important;
    pointer-events: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 2 !important;
    background: transparent !important;
    padding: 0 4px !important;
    margin: 0 !important;
    letter-spacing: 0.3px !important;
    display: block !important;
    line-height: 1.4 !important;
}

/* ===== LABEL IDENTIFIANT - État flottant (focus/valeur) ===== */
body.login #loginform > p:first-of-type.focused label[for="user_login"],
body.login #loginform > p:first-of-type.has-value label[for="user_login"],
#loginform > p:first-of-type.focused label[for="user_login"],
#loginform > p:first-of-type.has-value label[for="user_login"],
body.login #loginform p.login-username.focused label[for="user_login"],
body.login #loginform p.login-username.has-value label[for="user_login"],
#loginform p.focused label[for="user_login"],
#loginform p.has-value label[for="user_login"] {
    top: -12px !important;
    transform: none !important;
    font-size: 13px !important;
    color: #f5a623 !important;
    background: #0a0a1a !important;
    padding: 4px 12px !important;
    left: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(245, 166, 35, 0.3) !important;
}

/* ===== LABEL MOT DE PASSE - État flottant (focus/valeur) ===== */
body.login #loginform .user-pass-wrap.focused label[for="user_pass"],
body.login #loginform .user-pass-wrap.has-value label[for="user_pass"],
body.login .user-pass-wrap.focused label[for="user_pass"],
body.login .user-pass-wrap.has-value label[for="user_pass"],
#loginform .user-pass-wrap.focused label[for="user_pass"],
#loginform .user-pass-wrap.has-value label[for="user_pass"] {
    top: -12px !important;
    transform: none !important;
    font-size: 13px !important;
    color: #DD183B !important;
    background: #0a0a1a !important;
    padding: 4px 12px !important;
    left: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(221, 24, 59, 0.3) !important;
}

/* ===== LABEL "SE SOUVENIR DE MOI" - Position normale ===== */
body.login #loginform .forgetmenot label,
body.login .forgetmenot label,
#loginform .forgetmenot label,
.forgetmenot label {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    pointer-events: auto !important;
    z-index: auto !important;
    display: inline !important;
    cursor: pointer !important;
}

/* ============================================================
   8. CHAMPS DE SAISIE
   ============================================================ */

#loginform input[type="text"],
#loginform input[type="password"],
.login form input[type="text"],
.login form input[type="password"],
body.login #loginform input[type="text"],
body.login #loginform input[type="password"],
#user_login,
#user_pass {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 16px !important;
    padding: 18px 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    margin-top: 0 !important;
    line-height: 1.4 !important;
}

#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus,
#user_login:focus,
#user_pass:focus {
    border-color: rgba(245, 158, 11, 0.6) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        0 0 0 4px rgba(245, 158, 11, 0.15),
        0 0 20px rgba(245, 158, 11, 0.15) !important;
    outline: none !important;
}

/* Pas de placeholder quand on a le floating label */
#loginform input::placeholder,
.login form input::placeholder {
    color: transparent !important;
}

/* ============================================================
   9. BOUTON DE CONNEXION
   ============================================================ */

#wp-submit,
.login form .button-primary,
body.login #wp-submit,
body.login .button-primary {
    font-family: 'Outfit', -apple-system, sans-serif !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    letter-spacing: 0.5px !important;
    background: linear-gradient(135deg, #DD183B 0%, #b81432 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 18px 32px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 24px rgba(221, 24, 59, 0.5) !important;
    width: 100% !important;
    margin-top: 16px !important;
    text-shadow: none !important;
    position: relative !important;
    overflow: hidden !important;
    line-height: 1.2 !important;
    height: auto !important;
}

#wp-submit:hover,
.login form .button-primary:hover,
body.login #wp-submit:hover {
    background: linear-gradient(135deg, #e8204a 0%, #c91a3a 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 35px rgba(221, 24, 59, 0.6) !important;
}

#wp-submit:active,
body.login #wp-submit:active {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 20px rgba(221, 24, 59, 0.5) !important;
}

/* ============================================================
   10. CHECKBOX "SE SOUVENIR DE MOI"
   ============================================================ */

.login .forgetmenot,
body.login .forgetmenot {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 24px !important;
    margin-bottom: 20px !important;
}

.login .forgetmenot label,
body.login .forgetmenot label {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.login .forgetmenot input[type="checkbox"],
body.login input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    accent-color: #f5a623 !important;
    cursor: pointer !important;
    border-radius: 4px !important;
}

/* ============================================================
   11. LIENS (Mot de passe oublié, Retour au site)
   ============================================================ */

#nav,
#backtoblog,
.login #nav,
.login #backtoblog,
body.login #nav,
body.login #backtoblog {
    text-align: center !important;
    margin-top: 16px !important;
    width: 400px !important;
    max-width: 100% !important;
    animation: fadeInUp 0.6s ease 0.3s forwards !important;
    opacity: 0;
    padding: 0 !important;
    background: transparent !important;
}

#backtoblog,
body.login #backtoblog {
    animation-delay: 0.35s !important;
}

#nav a,
#backtoblog a,
.login #nav a,
.login #backtoblog a,
body.login #nav a,
body.login #backtoblog a {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    display: inline-block !important;
}

#nav a:hover,
#backtoblog a:hover,
body.login #nav a:hover,
body.login #backtoblog a:hover {
    color: #f5a623 !important;
    background: rgba(245, 158, 11, 0.15) !important;
}

/* Séparateur */
#nav,
body.login #nav {
    padding-top: 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Cacher le sélecteur de langue */
.language-switcher,
#language-switcher,
.login .language-switcher {
    display: none !important;
}

/* ============================================================
   12. MESSAGES D'ERREUR / SUCCÈS
   ============================================================ */

#login_error,
body.login #login_error {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    margin-bottom: 20px !important;
    border: none !important;
    backdrop-filter: blur(10px) !important;
    width: 400px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(239, 68, 68, 0.2) !important;
    border-left: 4px solid #EF4444 !important;
    color: #FCA5A5 !important;
}

#login_error a {
    color: #FCA5A5 !important;
    font-weight: 600 !important;
}

/* Message succès (pas le welcome) */
.login .message.success,
body.login .message:not(.cd54-welcome-message) {
    background: rgba(34, 197, 94, 0.2) !important;
    border-left: 4px solid #22C55E !important;
    color: #86EFAC !important;
}

/* ============================================================
   13. FOOTER
   ============================================================ */

.privacy-policy-page-link,
.login .privacy-policy-link {
    text-align: center !important;
    margin-top: 28px !important;
}

.privacy-policy-page-link a,
.login .privacy-policy-link a {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.25) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.privacy-policy-page-link a:hover {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ============================================================
   14. ANIMATIONS D'ENTRÉE
   ============================================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   15. RESPONSIVE
   ============================================================ */

@media (max-width: 600px) {
    body.login {
        padding: 20px 16px !important;
    }

    #login {
        padding: 20px 16px !important;
        max-width: 100% !important;
    }

    #login h1 a,
    .login h1 a {
        width: 220px !important;
        height: 155px !important;
    }

    .login .cd54-welcome-message strong,
    body.login .cd54-welcome-message strong {
        font-size: 26px !important;
    }

    #loginform,
    .login form,
    body.login #loginform {
        padding: 32px 24px !important;
        border-radius: 20px !important;
    }

    #nav,
    #backtoblog {
        width: 100% !important;
    }

    /* Labels plus petits sur mobile */
    #loginform label[for="user_login"],
    #loginform label[for="user_pass"] {
        font-size: 14px !important;
        top: 16px !important;
        left: 16px !important;
    }

    /* Labels flottants sur mobile */
    #loginform p.focused label[for="user_login"],
    #loginform p.has-value label[for="user_login"],
    #loginform .user-pass-wrap.focused label[for="user_pass"],
    #loginform .user-pass-wrap.has-value label[for="user_pass"] {
        font-size: 11px !important;
        top: -10px !important;
        left: 10px !important;
        padding: 3px 10px !important;
    }

    /* Inputs plus compacts sur mobile */
    #loginform input[type="text"],
    #loginform input[type="password"] {
        padding: 16px !important;
        font-size: 16px !important;
    }
}

/* ============================================================
   16. ACCESSIBILITÉ
   ============================================================ */

#loginform input:focus-visible,
#wp-submit:focus-visible,
#nav a:focus-visible,
#backtoblog a:focus-visible {
    outline: 2px solid rgba(245, 158, 11, 0.6) !important;
    outline-offset: 2px !important;
}

/* ============================================================
   17. ICÔNE AFFICHER MOT DE PASSE
   ============================================================ */

.wp-pwd,
body.login .wp-pwd,
#loginform .wp-pwd {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

.wp-pwd .dashicons,
body.login .wp-pwd .dashicons {
    color: rgba(255, 255, 255, 0.5) !important;
    transition: color 0.3s ease !important;
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

/* Correction position icône œil (visibility / hidden) */
.wp-pwd .dashicons-visibility:before,
body.login .dashicons-visibility:before {
    content: "\f177";
    position: relative;
    top: -5px;
}

.wp-pwd .dashicons-hidden:before,
body.login .dashicons-hidden:before {
    content: "\f530";
    position: relative;
    top: -5px;
}

.wp-pwd .dashicons:hover,
body.login .wp-pwd .dashicons:hover {
    color: #f5a623 !important;
}

.wp-pwd button.wp-hide-pw,
body.login .wp-pwd button.wp-hide-pw,
#loginform .wp-pwd button.wp-hide-pw {
    background: transparent !important;
    border: none !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 8px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: auto !important;
    z-index: 5 !important;
}

.wp-pwd button.wp-hide-pw:hover,
body.login .wp-pwd button.wp-hide-pw:hover {
    background: transparent !important;
}

/* S'assurer que l'input password n'est pas coupé par le bouton */
#loginform .wp-pwd input[type="password"],
#loginform .wp-pwd input[type="text"] {
    padding-right: 50px !important;
}

/* ============================================================
   18. SUPPRESSION CERCLE BLANC LOGO
   ============================================================ */

/* Pas de fond blanc sur le logo */
#login h1,
body.login #login h1,
.login h1 {
    background: transparent !important;
    border-radius: 0 !important;
}

#login h1 a,
body.login h1 a {
    background-color: transparent !important;
    border-radius: 0 !important;
}