/* Start custom CSS for text-editor, class: .elementor-element-57ce938 *//* ========================================================
   DESIGN PREMIUM - PAGE "ESPACE PRO"
   ======================================================== */

/* 1. FOND SOMBRE GLOBAL (S'active uniquement si la page contient notre bloc) */
#wrapper:has(#espace-pro-premium) {
    background: #0f131a !important;
    background-image: radial-gradient(circle at top, #1a2233 0%, #0a0d12 100%) !important;
    margin-top: 25px !important; /* Marge sous le menu */
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    min-height: calc(100vh - 100px) !important;
}

/* 2. DESTRUCTEUR DE BOÎTES BLANCHES */
#wrapper:has(#espace-pro-premium) .container, 
#wrapper:has(#espace-pro-premium) #content-wrapper, 
#wrapper:has(#espace-pro-premium) #main, 
#wrapper:has(#espace-pro-premium) #content,
#wrapper:has(#espace-pro-premium) .page-content, 
#wrapper:has(#espace-pro-premium) .card, 
#wrapper:has(#espace-pro-premium) .card-block,
#wrapper:has(#espace-pro-premium) .page-cms {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. CACHER LE TITRE NATIF DE PRESTASHOP (Optionnel, s'il y en a un) */
#wrapper:has(#espace-pro-premium) .page-header {
    display: none !important;
}

/* 4. DESIGN DU PANNEAU DE VERRE DÉPOLI (Le conteneur) */
#espace-pro-premium {
    max-width: 600px !important;
    margin: 0 auto !important;
    padding: 60px 40px !important; /* Force la hauteur */
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 24px !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.1) !important;
    text-align: center !important;
}

/* 5. TYPOGRAPHIE PREMIUM */
/* L'icône (Matérial Icon) */
#espace-pro-premium i.material-icons {
    color: #4da6ff !important;
    font-size: 70px !important;
    margin-bottom: 30px !important;
    
    /* ⭐️ CORRECTION : "inline-block" permet le centrage ⭐️ */
    display: inline-block !important; 
    
    text-shadow: 0 0 15px rgba(77, 166, 245, 0.5) !important;
}

/* Le Titre */
#espace-pro-premium h2 {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 2.2rem !important;
    border: none !important;
    margin-bottom: 20px !important;
}

/* Le texte descriptif */
#espace-pro-premium p {
    color: #cfd6e0 !important;
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    max-width: 450px !important;
    margin: 0 auto 50px !important;
}

/* 6. LE GROS BOUTON "SE CONNECTER" */
#espace-pro-premium a {
    display: inline-block !important;
    padding: 16px 45px !important;
    border-radius: 50px !important;
    background: linear-gradient(135deg, #F36523 0%, #d54c0e 100%) !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    box-shadow: 0 10px 20px rgba(243, 101, 35, 0.3) !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

#espace-pro-premium a:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 30px rgba(243, 101, 35, 0.5) !important;
    background: linear-gradient(135deg, #F36523 0%, #e65c19 100%) !important;
}



/* ========================================================
   7. CORRECTION SPÉCIALE MOBILE (Écrase tous les espaces)
   ======================================================== */
@media (max-width: 768px) {
    /* 1. On écrase le vide noir au-dessus (qui était de 80px) */
    #wrapper:has(#espace-pro-premium) {
        margin-top: 0 !important;
        padding-top: 20px !important; 
        padding-bottom: 20px !important;
        min-height: auto !important;
    }

    /* 2. On écrase le vide à l'intérieur de la carte (qui était de 60px) */
    #espace-pro-premium {
        padding: 30px 20px !important; 
        margin: 0 15px !important; /* Laisse un petit bord noir sur les côtés */
        border-radius: 16px !important;
    }

    /* 3. On rapproche les textes et l'icône */
    #espace-pro-premium i.material-icons {
        font-size: 50px !important; /* Un peu plus petit sur mobile */
        margin-bottom: 15px !important;
    }

    #espace-pro-premium h2 {
        font-size: 1.8rem !important;
        margin-bottom: 10px !important;
    }

    #espace-pro-premium p {
        font-size: 0.95rem !important;
        margin-bottom: 25px !important;
    }

    /* 4. On étire le bouton pour qu'il soit plus facile à cliquer avec le pouce */
    #espace-pro-premium a {
        padding: 14px 20px !important;
        font-size: 0.9rem !important;
        width: 100% !important; 
        box-sizing: border-box !important;
        display: block !important;
    }
}/* End custom CSS */