/**
 * ============================================================================
 * BLACKDOG MY ACCOUNT PAGE - VERSION 3.0 DÉFINITIVE
 * ============================================================================
 * 
 * CE FICHIER DOIT ÊTRE CHARGÉ EN DERNIER (après tous les autres CSS)
 * 
 * PROBLÈMES CORRIGÉS :
 * 1. blackdog-footer-and-forms.css met display: block sur .u-column2
 * 2. woocommerce-blackdog.css met width: 100% sur les colonnes
 * 3. Conflits de spécificité entre multiples fichiers CSS
 * 
 * SOLUTION : Spécificité maximale + reset des styles problématiques
 * ============================================================================
 */

/* ============================================================================
   0. RESET CRITIQUE - ANNULER LES STYLES QUI CASSENT LE LAYOUT
   ============================================================================ */

/* 
 * PROBLÈME #1 : WooCommerce utilise des pseudo-éléments ::before et ::after
 * pour le "clearfix" des floats. Ces pseudo-éléments deviennent des enfants
 * du grid et cassent le layout 2 colonnes.
 * 
 * Source : woocommerce.css (natif WooCommerce)
 * .col2-set::before { content: " "; display: table; }
 * .col2-set::after { clear: both; }
 */

/* DÉSACTIVER les pseudo-éléments clearfix sur #customer_login */
#customer_login::before,
#customer_login::after,
.woocommerce #customer_login::before,
.woocommerce #customer_login::after,
body.woocommerce-account #customer_login::before,
body.woocommerce-account #customer_login::after,
.col2-set#customer_login::before,
.col2-set#customer_login::after,
.u-columns.col2-set#customer_login::before,
.u-columns.col2-set#customer_login::after {
    display: none !important;
    content: none !important;
}

/* PROBLÈME #2 : blackdog-footer-and-forms.css met display: block sur .u-column2 */
/* ANNULER le display: block de blackdog-footer-and-forms.css ligne 515 */
body.woocommerce-account .u-column2.col-2,
body.woocommerce-account #customer_login .u-column2,
body.woocommerce-account .woocommerce-form-register,
body.woocommerce-account .woocommerce-form-register.register {
    display: unset !important;
    /* On laisse le grid parent gérer le display */
}

/* ============================================================================
   1. CONTAINER GRID - FORCER 2 COLONNES
   ============================================================================ */

/* Spécificité maximale pour #customer_login */
html body.woocommerce-account .woocommerce #customer_login,
html body.woocommerce-account #customer_login,
html body #customer_login.u-columns.col2-set,
body.woocommerce-account div#customer_login,
#customer_login {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    align-items: start !important;
}

/* ============================================================================
   2. COLONNES ENFANTS - RESET WIDTH ET STYLING
   ============================================================================ */

/* 
 * CLÉ DU FIX : Les colonnes dans un grid ne doivent PAS avoir width: 100%
 * car cela les force à prendre toute la largeur et à s'empiler
 */

/* Colonne 1 - Connexion */
html body.woocommerce-account #customer_login > .u-column1.col-1,
html body #customer_login > .u-column1.col-1,
body.woocommerce-account #customer_login .u-column1,
body.woocommerce-account #customer_login .col-1,
#customer_login > .u-column1.col-1,
#customer_login .u-column1 {
    /* RESET des propriétés qui cassent le grid */
    width: auto !important;
    max-width: none !important;
    float: none !important;
    
    /* Styling de la card */
    background: #1a1816 !important;
    border: 1px solid #3d3a38 !important;
    border-radius: 10px !important;
    padding: 30px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Colonne 2 - Inscription */
html body.woocommerce-account #customer_login > .u-column2.col-2,
html body #customer_login > .u-column2.col-2,
body.woocommerce-account #customer_login .u-column2,
body.woocommerce-account #customer_login .col-2,
#customer_login > .u-column2.col-2,
#customer_login .u-column2 {
    /* RESET des propriétés qui cassent le grid */
    width: auto !important;
    max-width: none !important;
    float: none !important;
    display: block !important; /* Block dans le contexte du grid item, pas du parent */
    
    /* Styling de la card */
    background: #1a1816 !important;
    border: 1px solid #3d3a38 !important;
    border-radius: 10px !important;
    padding: 30px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    
    /* Visibilité forcée */
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

/* ============================================================================
   3. RESET DES FORMULAIRES INTERNES
   ============================================================================ */

/* Retirer les margins/paddings des forms qui interfèrent */
body.woocommerce-account #customer_login form.login,
body.woocommerce-account #customer_login form.register,
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* ============================================================================
   4. RESPONSIVE MOBILE
   ============================================================================ */

@media screen and (max-width: 768px) {
    html body.woocommerce-account .woocommerce #customer_login,
    html body.woocommerce-account #customer_login,
    body.woocommerce-account div#customer_login,
    #customer_login {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 15px !important;
    }
    
    /* En mobile, width: auto marche toujours */
    html body.woocommerce-account #customer_login > .u-column1.col-1,
    html body.woocommerce-account #customer_login > .u-column2.col-2,
    #customer_login .u-column1,
    #customer_login .u-column2 {
        width: auto !important;
        padding: 25px !important;
    }
}

/* ============================================================================
   5. TITRES H2
   ============================================================================ */

body.woocommerce-account #customer_login h2,
#customer_login h2 {
    color: #f5f3f0 !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    margin: 0 0 25px 0 !important;
    padding: 0 0 15px 0 !important;
    border-bottom: 1px solid #3d3a38 !important;
}

/* ============================================================================
   6. LABELS ET INPUTS
   ============================================================================ */

body.woocommerce-account #customer_login label {
    color: #f5f3f0 !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    display: block !important;
    margin-bottom: 8px !important;
}

body.woocommerce-account #customer_login .required {
    color: #9B1B30 !important;
}

body.woocommerce-account #customer_login input[type="text"],
body.woocommerce-account #customer_login input[type="email"],
body.woocommerce-account #customer_login input[type="password"] {
    width: 100% !important;
    background: #2a2725 !important;
    border: 1px solid #3d3a38 !important;
    border-radius: 6px !important;
    padding: 14px !important;
    color: #f5f3f0 !important;
    font-size: 1rem !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
}

body.woocommerce-account #customer_login input:focus {
    outline: none !important;
    border-color: #9B1B30 !important;
    box-shadow: 0 0 0 2px rgba(155, 27, 48, 0.1) !important;
}

/* Password wrapper */
body.woocommerce-account #customer_login .password-input {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 20px !important;
}

body.woocommerce-account #customer_login .password-input input {
    margin-bottom: 0 !important;
    padding-right: 50px !important;
}

body.woocommerce-account #customer_login .show-password-input {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    color: #8a8583 !important;
    cursor: pointer !important;
}

/* ============================================================================
   7. CHECKBOX "Se souvenir de moi"
   ============================================================================ */

body.woocommerce-account #customer_login .woocommerce-form-login__rememberme {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    color: #f5f3f0 !important;
}

body.woocommerce-account #customer_login input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #9B1B30 !important;
    margin: 0 !important;
}

/* ============================================================================
   8. BOUTONS SUBMIT
   ============================================================================ */

body.woocommerce-account #customer_login button[type="submit"],
body.woocommerce-account #customer_login .woocommerce-Button {
    background: #9B1B30 !important;
    border: none !important;
    color: white !important;
    padding: 14px 30px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    width: 100% !important;
    transition: all 0.2s !important;
    margin-top: 10px !important;
}

body.woocommerce-account #customer_login button[type="submit"]:hover {
    background: #7a1526 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(155, 27, 48, 0.3) !important;
}

/* ============================================================================
   9. LIENS
   ============================================================================ */

body.woocommerce-account #customer_login .woocommerce-LostPassword a {
    color: #9B1B30 !important;
    text-decoration: none !important;
}

body.woocommerce-account #customer_login .woocommerce-LostPassword a:hover {
    text-decoration: underline !important;
}

body.woocommerce-account #customer_login .woocommerce-privacy-policy-text {
    color: #8a8583 !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
}

body.woocommerce-account #customer_login .woocommerce-privacy-policy-text a {
    color: #9B1B30 !important;
}

/* ============================================================================
   10. MESSAGES
   ============================================================================ */

body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error {
    background: #1a1816 !important;
    border: 1px solid #3d3a38 !important;
    border-left: 4px solid #9B1B30 !important;
    color: #f5f3f0 !important;
    padding: 15px 20px !important;
    margin-bottom: 25px !important;
    border-radius: 6px !important;
    list-style: none !important;
}

body.woocommerce-account .woocommerce-error {
    border-left-color: #F87171 !important;
}

body.woocommerce-account .woocommerce-error li {
    color: #F87171 !important;
}

/* ============================================================================
   11. FIX HEADER - Liens navigation
   ============================================================================ */

body.woocommerce-account .header .nav a,
body.woocommerce-account header .nav a {
    color: #8a8583 !important;
}

body.woocommerce-account .header .nav a:hover,
body.woocommerce-account header .nav a:hover {
    color: #f5f3f0 !important;
}

body.woocommerce-account .header .nav-cta,
body.woocommerce-account .header-actions .nav-cta {
    color: #9B1B30 !important;
}

/* ============================================================================
   12. FIX FOOTER - Liens
   ============================================================================ */

body.woocommerce-account .footer a,
body.woocommerce-account footer a,
body.woocommerce-account .footer-section a {
    color: #f5f3f0 !important;
}

body.woocommerce-account .footer a:hover,
body.woocommerce-account footer a:hover,
body.woocommerce-account .footer-section a:hover {
    color: #9B1B30 !important;
}

body.woocommerce-account .footer-section.disabled a {
    color: #5c5856 !important;
}

body.woocommerce-account .footer-section h4 {
    color: #8a8583 !important;
}

body.woocommerce-account .social-link {
    background: #2a2725 !important;
    color: #8a8583 !important;
}

body.woocommerce-account .social-link:hover {
    background: #9B1B30 !important;
    color: white !important;
}

body.woocommerce-account .footer-bottom {
    color: #5c5856 !important;
}

/* ============================================================================
   13. CONTAINER PAGE
   ============================================================================ */

body.woocommerce-account .woocommerce {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 20px !important;
}

/* ============================================================================
   14. NOTICE PERSONNALISÉE - MESSAGE CONNEXION/INSCRIPTION
   ============================================================================ */

/* Container de la notice */
body.woocommerce-account .woocommerce-notices-wrapper .woocommerce-info,
body.woocommerce-account .woocommerce-notices-wrapper .woocommerce-message,
body.woocommerce-account .woocommerce-info {
    background: linear-gradient(135deg, rgba(155, 27, 48, 0.15) 0%, rgba(155, 27, 48, 0.05) 100%) !important;
    border: 1px solid rgba(155, 27, 48, 0.3) !important;
    border-left: 4px solid #9B1B30 !important;
    border-radius: 10px !important;
    padding: 20px 25px !important;
    margin-bottom: 30px !important;
    color: #f5f3f0 !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    position: relative !important;
}

/* Supprimer l'icône carrée rouge (pseudo-élément ::before) */
body.woocommerce-account .woocommerce-info::before,
body.woocommerce-account .woocommerce-message::before,
body.woocommerce-account .woocommerce-notices-wrapper .woocommerce-info::before {
    display: none !important;
    content: none !important;
}

/* Style du texte en gras */
body.woocommerce-account .woocommerce-info strong,
body.woocommerce-account .woocommerce-message strong {
    color: #9B1B30 !important;
    font-weight: 600 !important;
}

/* Lien dans la notice (si présent) */
body.woocommerce-account .woocommerce-info a,
body.woocommerce-account .woocommerce-message a {
    color: #9B1B30 !important;
    text-decoration: underline !important;
}

body.woocommerce-account .woocommerce-info a:hover,
body.woocommerce-account .woocommerce-message a:hover {
    color: #f5f3f0 !important;
}

/* ============================================================================
   FIN DU FICHIER - v3.0
   ============================================================================ */