/* ===================================================================================

* Theme Name: Future Child
* Theme URI: https://themexriver.com/wp/future
* Author: ThemeXriver
* Author URI: https://themeforest.net/user/themexriver
* Description: Future AI Agency & Technology WordPress Theme
* Version: 1.0.3
* Template: future
* Text Domain: future-child
* License: GNU General Public License version 3.0
* License URI: http://www.gnu.org/licenses/gpl-3.0.html
* Tags: one-column, right-sidebar, left-sidebar, custom-menu, featured-images, post-formats, sticky-post, translation-ready

====================================================================================== */

/* ==========================================================================
   SILVERE IA - COHÉRENCE GLOBALE DU FOND & DESIGN SYSTEM PREMIUM
   ========================================================================== */

/* 1. FOND DE BASE DU SITE */
html, body, .page-wrapper, .elementor-page, .site-content, main, .elementor, .page-area {
    background-color: #100C18 !important;
    background-image: url('https://silvereia.com/wp-content/uploads/2023/12/body-wrapper-bg-scaled.webp') !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    color: #cbd5e1 !important;
}

/* ==========================================================================
   2. HERO SECTIONS ULTRA-MODERNES & IMPACTANTES (DIFFÉRENCE DE COULEUR VISIBLE)
   ========================================================================== */

/* CONTENEUR PRINCIPAL DU HERO (Sur toutes les pages de services & pages clés) */
.silvere-hero-blueprint,
#sec_real_head, .elementor-element-sec_real_head,
.page-hero-modern,
.page-id-44 .elementor-top-section:first-child,
.page-id-42 .elementor-top-section:first-child,
.page-id-48 .elementor-top-section:first-child,
.page-id-31 .elementor-top-section:first-child,
.page-id-33 .elementor-top-section:first-child,
.page-id-35 .elementor-top-section:first-child,
.page-id-37 .elementor-top-section:first-child,
.page-id-40 .elementor-top-section:first-child,
.page-id-610 .elementor-top-section:first-child {
    position: relative !important;
    overflow: hidden !important;
    padding: 130px 20px 105px 20px !important;
    background: radial-gradient(circle at 50% -15%, rgba(139, 92, 246, 0.48) 0%, rgba(59, 130, 246, 0.26) 35%, rgba(24, 18, 44, 0.96) 72%, rgba(14, 11, 22, 0.99) 100%) !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.35) !important;
    box-shadow: inset 0 25px 60px -15px rgba(139, 92, 246, 0.25), 0 25px 60px -10px rgba(0, 0, 0, 0.8) !important;
}

/* Ligne supérieure néon laser sur le hero */
.silvere-hero-blueprint::before,
#sec_real_head, .elementor-element-sec_real_head::before,
.page-hero-modern::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent 0%, #38bdf8 25%, #a855f7 50%, #ec4899 75%, transparent 100%) !important;
    opacity: 0.95 !important;
    z-index: 5 !important;
}

/* Grille cyber matrix & aura lumineuse centrée */
.silvere-hero-blueprint::after,
#sec_real_head, .elementor-element-sec_real_head::after,
.page-hero-modern::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-image: 
        radial-gradient(ellipse 75% 55% at 50% 0%, rgba(147, 70, 245, 0.38), transparent 70%),
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) !important;
    background-size: 100% 100%, 45px 45px, 45px 45px !important;
    background-position: 0 0, center center, center center !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 0.9 !important;
}

/* Z-Index du contenu pour passer au-dessus des effets de lumière */
.silvere-hero-blueprint .elementor-container,
#sec_real_head, .elementor-element-sec_real_head .elementor-container,
.page-hero-modern .elementor-container {
    position: relative !important;
    z-index: 4 !important;
}

/* BADGE / TAG CATÉGORIE DU HERO (Pill néon lumineux) */
.silvere-hero-blueprint h5,
.silvere-hero-blueprint .elementor-widget-heading h5.elementor-heading-title,
#sec_real_head, .elementor-element-sec_real_head .tx-heading .sub-title,
.silvere-hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: rgba(139, 92, 246, 0.18) !important;
    border: 1px solid rgba(139, 92, 246, 0.5) !important;
    border-radius: 50px !important;
    padding: 8px 24px !important;
    color: #c4b5fd !important;
    font-family: 'Titillium Web', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3), inset 0 0 12px rgba(139, 92, 246, 0.2) !important;
    margin: 0 auto 24px auto !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

/* Point lumineux pulsant sur le badge hero */
.silvere-hero-blueprint h5::before,
#sec_real_head, .elementor-element-sec_real_head .tx-heading .sub-title::before {
    content: "" !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #38bdf8 !important;
    box-shadow: 0 0 10px #38bdf8, 0 0 20px #38bdf8 !important;
}

/* TITRE H1 PRINCIPAL DU HERO (Typographie impactante avec dégradé métal & rose) */
.silvere-hero-blueprint h1,
.silvere-hero-blueprint h1.elementor-heading-title,
#sec_real_head, .elementor-element-sec_real_head .tx-heading .title,
.page-hero-modern h1 {
    font-family: 'Titillium Web', sans-serif !important;
    font-size: clamp(32px, 4.8vw, 54px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 20px !important;
    text-transform: uppercase !important;
    background: linear-gradient(135deg, #FFFFFF 25%, #E2E8F0 50%, #C4B5FD 75%, #F43F5E 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.6)) !important;
}

/* SOUS-TITRE H3 DU HERO (Accents bleu cyan lumineux) */
.silvere-hero-blueprint h3,
.silvere-hero-blueprint h3.elementor-heading-title {
    font-family: 'Titillium Web', sans-serif !important;
    font-size: clamp(18px, 2.3vw, 24px) !important;
    font-weight: 600 !important;
    color: #38bdf8 !important;
    margin-bottom: 22px !important;
    letter-spacing: 0.2px !important;
    text-shadow: 0 0 25px rgba(56, 189, 248, 0.35) !important;
}

/* DESCRIPTION PARAGRAPHE DU HERO */
.silvere-hero-blueprint .elementor-widget-text-editor p,
#sec_real_head, .elementor-element-sec_real_head .tx-heading .description {
    color: #cbd5e1 !important;
    font-size: 16.5px !important;
    line-height: 1.8 !important;
    max-width: 840px !important;
    margin: 0 auto 36px auto !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

/* CONTENEUR BOUTONS HERO */
.silvere-hero-blueprint .hero-buttons-row {
    margin-top: 20px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* BOUTON SECONDAIRE HERO (Frosted Glass Pill moderne) */
.hero-btn-secondary .elementor-button {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding: 16px 34px !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

.hero-btn-secondary .elementor-button:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(56, 189, 248, 0.6) !important;
    color: #38bdf8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(56, 189, 248, 0.35) !important;
}

.hero-btn-secondary .elementor-button * {
    color: inherit !important;
}


/* ==========================================================================
   3. CARTES DE SERVICES & COMPOSANTS (GLASSMORPHISM & GLOW)
   ========================================================================== */
.tx-info-box, 
.service-card-premium, 
.elementor-widget-tx_info_box .info-box-wrap, 
.elementor-widget-tx_info_box .tx-info-box-item,
.service-feature-card {
    background: linear-gradient(135deg, rgba(22, 25, 44, 0.85) 0%, rgba(16, 12, 24, 0.95) 100%) !important;
    border: 1px solid rgba(147, 70, 245, 0.25) !important;
    border-radius: 20px !important;
    padding: 35px 30px !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    position: relative !important;
    overflow: hidden !important;
}

.tx-info-box:hover, 
.service-card-premium:hover, 
.elementor-widget-tx_info_box .info-box-wrap:hover, 
.elementor-widget-tx_info_box .tx-info-box-item:hover,
.service-feature-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(58, 134, 245, 0.65) !important;
    box-shadow: 0 20px 45px rgba(147, 70, 245, 0.3), 0 0 25px rgba(58, 134, 245, 0.2) !important;
}

/* Ligne supérieure brillante en dégradé */
.tx-info-box::before, 
.service-card-premium::before,
.service-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #9346f5, #3a86f5, #ea3592);
    opacity: 0.85;
}

/* Icônes illuminées */
.elementor-widget-tx_info_box .icon, 
.service-card-premium .icon-box,
.service-feature-card .icon-box {
    width: 65px !important;
    height: 65px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(147, 70, 245, 0.25) 0%, rgba(58, 134, 245, 0.25) 100%) !important;
    border: 1px solid rgba(147, 70, 245, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #38bdf8 !important;
    font-size: 26px !important;
    margin-bottom: 22px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 20px rgba(147, 70, 245, 0.25) !important;
}

.tx-info-box:hover .icon,
.service-card-premium:hover .icon-box {
    transform: scale(1.1) rotate(4deg) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 10px 28px rgba(56, 189, 248, 0.45) !important;
}

/* Typographie soignée */
.tx-info-box h3, .tx-info-box .title, .service-card-premium h3, .service-feature-card h3 {
    color: #ffffff !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    margin-bottom: 14px !important;
    letter-spacing: -0.2px !important;
}

.tx-info-box p, .tx-info-box .description, .service-card-premium p, .service-feature-card p {
    color: #94a3b8 !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    margin-bottom: 20px !important;
}


/* ==========================================================================
   4. BOUTONS OFFICIELS DU THÈME (PILL GRADIENT & NEON GLOW)
   ========================================================================== */

/* TOUS LES BOUTONS DU SITE (THEME BUTTONS, ELEMENTOR BUTTONS, CTA, WOOCOMMERCE, FORMS) */
.theme-btn,
.btn-style-one,
.btn-style-two,
.btn-style-three,
.tx-btn-glow,
.elementor-button,
.elementor-button-link,
.elementor-widget-button .elementor-button,
.elementor-widget-tx_button .theme-btn,
.hero-btn-primary .elementor-button,
.silvere-showcase-col .showcase-btn .elementor-button,
.wpcf7-submit,
.default-form .submit-btn,
button.theme-btn,
a.theme-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .checkout-button,
input[type="submit"].btn-style-one,
button[type="submit"].btn-style-one {
    background: #8DE7E5 !important;
    background: linear-gradient(90deg, #8DE7E5 0%, #F7D98F 28%, #F497CF 65%, #9190f6 100%) !important;
    color: #100C18 !important;
    border-radius: 50px !important;
    padding: 16px 36px !important;
    font-family: 'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(58, 134, 245, 0.35), 0 0 15px rgba(202, 161, 247, 0.25) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    line-height: 1.2 !important;
}

/* Texte & éléments internes des boutons */
.theme-btn *,
.btn-style-one *,
.btn-style-two *,
.tx-btn-glow *,
.elementor-button *,
.elementor-button-text,
.elementor-button-content-wrapper,
.btn-wrap,
.btn-wrap .text-one,
.btn-wrap .text-two {
    color: #100C18 !important;
    font-family: 'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 700 !important;
}

/* Flèches et icônes dans les boutons */
.theme-btn i,
.theme-btn svg,
.elementor-button i,
.elementor-button svg,
.btn-style-one i,
.elementor-button-icon {
    color: #100C18 !important;
    fill: #100C18 !important;
    font-size: 15px !important;
    display: inline-block !important;
    transition: transform 0.3s ease !important;
}

/* Survol (Hover State) */
.theme-btn:hover,
.btn-style-one:hover,
.btn-style-two:hover,
.btn-style-three:hover,
.tx-btn-glow:hover,
.elementor-button:hover,
.elementor-widget-button .elementor-button:hover,
.elementor-widget-tx_button .theme-btn:hover,
.hero-btn-primary .elementor-button:hover,
.silvere-showcase-col .showcase-btn .elementor-button:hover,
.wpcf7-submit:hover,
.default-form .submit-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .checkout-button:hover {
    transform: translateY(-3px) scale(1.01) !important;
    box-shadow: 0 8px 30px rgba(147, 70, 245, 0.55), 0 0 25px rgba(58, 134, 245, 0.45) !important;
    color: #100C18 !important;
    border: none !important;
    filter: brightness(1.04) !important;
}

.theme-btn:hover i,
.theme-btn:hover svg,
.elementor-button:hover i,
.elementor-button:hover svg,
.btn-style-one:hover i,
.elementor-button:hover .elementor-button-icon {
    transform: translateX(4px) !important;
}

/* Boutons de taille compacte (cartes de projets, etc.) */
.silvere-showcase-col .showcase-btn .elementor-button,
.elementor-size-xs,
.elementor-size-sm {
    padding: 10px 22px !important;
    font-size: 12.5px !important;
    border-radius: 50px !important;
}

/* Boutons de grande taille (Hero, CTA) */
.elementor-size-lg,
.elementor-size-xl,
.hero-btn-primary .elementor-button {
    padding: 18px 42px !important;
    font-size: 15px !important;
}

/* Neutraliser les anciens pseudo-éléments */
.btn-style-one::before,
.btn-style-two::before {
    display: none !important;
}


/* ==========================================================================
   5. ACCORDÉONS FAQ SOMBRES & ÉLÉGANTS
   ========================================================================== */
.elementor-widget-tx_faq .accordion-item, 
.tx-faq .accordion-item, 
.accordion-box .block {
    background: rgba(22, 25, 44, 0.75) !important;
    border: 1px solid rgba(147, 70, 245, 0.22) !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.elementor-widget-tx_faq .accordion-item:hover, 
.accordion-box .block:hover {
    border-color: rgba(58, 134, 245, 0.5) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

.elementor-widget-tx_faq .acc-btn, 
.accordion-box .acc-btn {
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    padding: 22px 26px !important;
}

.elementor-widget-tx_faq .content, 
.accordion-box .content {
    color: #94a3b8 !important;
    font-size: 15.5px !important;
    line-height: 1.8 !important;
    padding: 0 26px 24px !important;
}

/* Dégradé texte principal */
.gradient-text, 
.tx-heading .title span {
    background: linear-gradient(90deg, #3a86f5, #9346f5, #ea3592) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Badges d'expertise */
.silvere-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(147, 70, 245, 0.15);
    border: 1px solid rgba(147, 70, 245, 0.35);
    border-radius: 30px;
    color: #c084fc;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

/* Cartes de bénéfices & étapes */
.silvere-step-card {
    background: rgba(22, 25, 44, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 26px 22px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.silvere-step-card:hover {
    background: rgba(22, 25, 44, 0.95);
    border-color: rgba(58, 134, 245, 0.45);
    transform: translateX(5px);
}


/* ==========================================================================
   6. SHOWCASE PORTFOLIO 3 COLONNES
   ========================================================================== */
.modern-section-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.35);
    color: #c4b5fd;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.2);
    margin-bottom: 14px;
}

.modern-gradient-text {
    background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 50%, #f43f5e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: italic;
    font-family: inherit;
    font-weight: 800;
}

.silvere-showcase-section {
    position: relative;
    z-index: 2;
}

@media (min-width: 992px) {
    .elementor-section.silvere-showcase-section > .elementor-container,
    .elementor-section.silvere-showcase-section > .elementor-container > .elementor-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 28px !important;
    }
    .elementor-column.silvere-showcase-col {
        width: 33.333% !important;
        max-width: 33.333% !important;
        flex: 0 0 33.333% !important;
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .elementor-column.silvere-showcase-col {
        width: 50% !important;
        flex: 0 0 50% !important;
        margin-bottom: 24px !important;
    }
}

@media (max-width: 767px) {
    .elementor-column.silvere-showcase-col {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 24px !important;
    }
}

.silvere-showcase-col > .elementor-column-wrap,
.silvere-showcase-col > .elementor-widget-wrap {
    background: linear-gradient(180deg, rgba(24, 20, 36, 0.75) 0%, rgba(14, 11, 22, 0.95) 100%) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: 14px 14px 20px 14px !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 12px 35px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
}

.silvere-showcase-col > .elementor-column-wrap::before,
.silvere-showcase-col > .elementor-widget-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #8b5cf6, #ec4899, transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.silvere-showcase-col:hover > .elementor-column-wrap,
.silvere-showcase-col:hover > .elementor-widget-wrap {
    transform: translateY(-10px) !important;
    border-color: rgba(139, 92, 246, 0.45) !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 35px -5px rgba(139, 92, 246, 0.3), 0 0 15px rgba(244, 63, 94, 0.2) !important;
}

.silvere-showcase-col:hover > .elementor-column-wrap::before,
.silvere-showcase-col:hover > .elementor-widget-wrap::before {
    opacity: 1;
}

.silvere-browser-bar {
    display: flex;
    align-items: center;
    padding: 11px 16px;
    background: rgba(16, 13, 25, 0.95);
    border-radius: 14px 14px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    margin-bottom: 0 !important;
}

.silvere-browser-bar .browser-dots {
    display: flex;
    gap: 7px;
    align-items: center;
    position: absolute;
    left: 16px;
}

.silvere-browser-bar .browser-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    transition: all 0.3s ease;
}

.silvere-browser-bar .browser-dot.dot-red {
    background: #ff5f56;
    box-shadow: 0 0 6px rgba(255, 95, 86, 0.4);
}
.silvere-browser-bar .browser-dot.dot-yellow {
    background: #ffbd2e;
    box-shadow: 0 0 6px rgba(255, 189, 46, 0.4);
}
.silvere-browser-bar .browser-dot.dot-green {
    background: #27c93f;
    box-shadow: 0 0 6px rgba(39, 201, 63, 0.4);
}

.silvere-browser-bar .browser-url {
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.05);
    color: #a19db5;
    padding: 3px 18px;
    border-radius: 30px;
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
    letter-spacing: 0.4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.silvere-browser-bar .browser-url svg {
    width: 10px;
    height: 10px;
    fill: #10b981;
    opacity: 0.9;
}

.silvere-showcase-col .elementor-widget-image {
    margin-bottom: 0 !important;
    overflow: hidden;
    background: #090710;
    border-radius: 0 0 14px 14px;
    position: relative;
}

.silvere-showcase-col .elementor-widget-image .elementor-image,
.silvere-showcase-col .elementor-widget-image .elementor-image a {
    height: 240px !important;
    display: block !important;
    overflow: hidden !important;
    position: relative !important;
}

.silvere-showcase-col .elementor-widget-image .elementor-image::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(180deg, transparent 0%, rgba(14, 11, 22, 0.7) 100%);
    pointer-events: none;
}

.silvere-showcase-col .elementor-widget-image img {
    width: 100% !important;
    height: 240px !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease !important;
}

.silvere-showcase-col:hover .elementor-widget-image img {
    transform: scale(1.06) !important;
    filter: brightness(1.04) !important;
}

.silvere-showcase-col .showcase-footer-section {
    margin-top: 18px !important;
    margin-bottom: 0 !important;
    align-items: center !important;
}

.silvere-showcase-col .showcase-footer-section .elementor-column-wrap,
.silvere-showcase-col .showcase-footer-section .elementor-widget-wrap {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.silvere-showcase-col .showcase-category .elementor-heading-title {
    color: #c4b5fd !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    background: rgba(139, 92, 246, 0.12) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    display: inline-block !important;
    margin: 0 0 6px 0 !important;
}

.silvere-showcase-col .showcase-title .elementor-heading-title {
    color: #FFFFFF !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    transition: color 0.3s ease !important;
}

.silvere-showcase-col:hover .showcase-title .elementor-heading-title {
    color: #f1f5f9 !important;
}

/* MASQUER DÉFINITIVEMENT LE BANDEAU ASTRONAUTE DU THÈME */
.page-title-area, 
.page-title-area-two, 
.tx-breadcrumb, 
.breadcrumb-area, 
.page-header-banner,
.page-title-section {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
}

/* Alignement parfait sur mobile */
@media (max-width: 767px) {
    .hero-buttons-row .elementor-column {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 12px !important;
    }
    .hero-btn-primary .elementor-button,
    .hero-btn-secondary .elementor-button {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ==========================================================================
   7. APPLICATION GLOBALE DE TITILLIUM WEB SUR TOUS LES TEXTES
   ========================================================================== */
html, body, 
p, span, a, li, ul, ol, 
input, textarea, select, button, label, 
h1, h2, h3, h4, h5, h6, 
div, section, main, article, aside, 
.elementor, 
.elementor *,
.elementor-widget,
.elementor-widget *,
.elementor-widget-text-editor,
.elementor-widget-text-editor *,
.elementor-widget-heading,
.elementor-widget-heading *,
.elementor-heading-title,
.elementor-button,
.elementor-button *,
.main-menu, 
.main-menu *,
.tx-heading, 
.tx-heading *,
.service-card-premium, 
.service-card-premium *,
.silvere-browser-card, 
.silvere-browser-card *,
.silvere-hero-blueprint, 
.silvere-hero-blueprint * {
    font-family: 'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ==========================================================================
   8. ULTRA-PREMIUM STYLING FOR COST CALCULATOR (SILVERE IA)
   ========================================================================== */
.ccb-main-widget,
#ccb_app_1137,
.calc-container-wrapper,
.ccb-preview-container {
    font-family: "Titillium Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: #e2e8f0 !important;
}

.calc-container-wrapper,
.ccb-preview-container__body,
.ccb-layout-container {
    background: rgba(16, 12, 28, 0.85) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(139, 92, 246, 0.12) !important;
    border-radius: 24px !important;
    padding: 35px !important;
    backdrop-filter: blur(16px) !important;
}

/* Titres de sections et labels */
.ccb-field__title,
.ccb-heading-5,
.ccb-default-title,
.ccb-calculator-title {
    color: #ffffff !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Descriptions sous les questions */
.ccb-field__description,
.ccb-default-description {
    color: #94a3b8 !important;
    font-size: 0.92rem !important;
    margin-top: -6px !important;
    margin-bottom: 14px !important;
}

/* Cartes Radio et Tuiles de Choix */
.ccb-radio-label,
.ccb-checkboxes-label,
.ccb-default-radio,
.ccb-checkbox {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    color: #e2e8f0 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
}

.ccb-radio-label:hover,
.ccb-checkboxes-label:hover,
.ccb-default-radio:hover,
.ccb-checkbox:hover {
    background: rgba(139, 92, 246, 0.08) !important;
    border-color: rgba(139, 92, 246, 0.45) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15) !important;
}

/* État Actif / Sélectionné */
.ccb-radio-label.ccb-active,
.ccb-checkboxes-label.ccb-active,
.ccb-default-radio.active,
.ccb-checkbox.active,
.ccb-selected {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.18) 0%, rgba(59, 130, 246, 0.12) 100%) !important;
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3), inset 0 0 12px rgba(139, 92, 246, 0.1) !important;
    color: #ffffff !important;
}

/* Sliders de quantité / Range */
.ccb-range-slider,
.vue-slider-rail {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    height: 8px !important;
}

.vue-slider-process {
    background: linear-gradient(90deg, #8b5cf6 0%, #3b82f6 100%) !important;
    border-radius: 10px !important;
}

.vue-slider-dot-handle {
    background: #ffffff !important;
    border: 3px solid #8b5cf6 !important;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.6) !important;
    cursor: grab !important;
}

/* Bloc Total & Estimation */
.ccb-preview-container__sidebar,
.ccb-total-summary,
.ccb-total-row__item {
    background: linear-gradient(145deg, rgba(26, 20, 48, 0.95) 0%, rgba(13, 10, 24, 0.95) 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.35) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(139, 92, 246, 0.2) !important;
}

.ccb-total-summary .ccb-heading-4,
.ccb-total-summary .ccb-heading-3,
.ccb-total-row__item .ccb-total-value {
    color: #38bdf8 !important;
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    text-shadow: 0 0 25px rgba(56, 189, 248, 0.4) !important;
}

/* Bouton Soumettre / Devis */
.ccb-button,
.calc-btn-action,
.ccb-preview-container__sidebar button {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 16px 36px !important;
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4), 0 0 20px rgba(99, 102, 241, 0.3) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
}

.ccb-button:hover,
.calc-btn-action:hover,
.ccb-preview-container__sidebar button:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 15px 40px rgba(139, 92, 246, 0.6), 0 0 30px rgba(59, 130, 246, 0.4) !important;
}

/* Modale de Contact / Devis */
.modal-content,
.ccb-modal-content {
    background: #110d1e !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.8) !important;
    color: #e2e8f0 !important;
}

.modal-content input,
.modal-content textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 12px 16px !important;
}


/* ==========================================================================
   8b. COMPLÉMENT CCB V4 VUE 3 - DARK GLASSMORPHISM & NEON DESIGN
   ========================================================================== */
.ccb-app-container,
.ccb-page-breaker,
.ccb-layout-container {
    color: #e2e8f0 !important;
}

.ccb-page-breaker .ccb-fields-block {
    background: rgba(20, 16, 36, 0.75) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    border-radius: 20px !important;
    padding: 30px !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
}

.ccb-page-breaker .ccb-subtotals-block-summary,
.ccb-subtotals-block {
    background: linear-gradient(145deg, rgba(26, 20, 48, 0.9) 0%, rgba(14, 11, 25, 0.95) 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.35) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(139, 92, 246, 0.15) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* Radio & Checkbox Items in Vue 3 CCB */
.ccb-field-item,
.ccb-radio,
.ccb-checkbox {
    margin-bottom: 12px !important;
}

.ccb-radio__item,
.ccb-checkbox__item,
.ccb-field-item .ccb-radio-label,
.ccb-field-item .ccb-checkboxes-label {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    color: #e2e8f0 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
}

.ccb-radio__item:hover,
.ccb-checkbox__item:hover {
    background: rgba(139, 92, 246, 0.1) !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
    transform: translateY(-2px) !important;
}

.ccb-radio__item.is-active,
.ccb-radio__item.active,
.ccb-checkbox__item.is-active,
.ccb-checkbox__item.active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.22) 0%, rgba(59, 130, 246, 0.15) 100%) !important;
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.25) !important;
    color: #ffffff !important;
}

/* Labels and Texts */
.ccb-field__label,
.ccb-radio__label,
.ccb-checkbox__label,
.ccb-range__label {
    color: #ffffff !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
}

.ccb-total-summary__header,
.ccb-total-summary .ccb-header-title {
    color: #ffffff !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
}

.ccb-total-item__value,
.ccb-total-value,
.ccb-grand-total {
    color: #38bdf8 !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    text-shadow: 0 0 25px rgba(56, 189, 248, 0.4) !important;
}