/*
Theme Name: Expenza Dark Tech (Child)
Theme URI: https://expenza2000.be
Author: Antigravity WebOps
Author URI: https://expenza2000.be
Description: Design Niveau Ultraviolet — Aurora, Glassmorphism, Scroll Reveal, Elementor Native
Template: blocksy
Version: 3.0.0
*/

/* ============================================================
   GOOGLE FONTS — Chargement prioritaire
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter+Tight:wght@300;400;500;600&display=swap');

/* ============================================================
   DESIGN TOKENS — "Ultraviolet Expenza" by Antigravity
   ============================================================ */
:root {
    /* Fond */
    --bg-space:         #04061A;
    --bg-card:          rgba(255, 255, 255, 0.05);
    --bg-card-hover:    rgba(255, 255, 255, 0.09);

    /* Bordures */
    --border-glass:     rgba(59, 110, 255, 0.18);
    --border-hover:     rgba(59, 110, 255, 0.65);

    /* Textes */
    --text-main:        #F8FAFC;
    --text-muted:       #94A3B8;
    --text-cobalt:      #7BA4FF;

    /* Couleurs signature */
    --cobalt:           #3B6EFF;
    --cobalt-light:     #6B96FF;
    --cyan-accent:      #00D4FF;
    --violet-accent:    #8B5CF6;
    --gold-accent:      #F59E0B;

    /* Layout */
    --max-width:        1200px;
    --radius-card:      18px;
    --transition:       all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    background-color: var(--bg-space);
    color: var(--text-main);
    font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   KEYFRAMES ANIMATIONS
   ============================================================ */
@keyframes aurora1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.85; }
    33%       { transform: translate(8%, 12%) scale(1.18); opacity: 1; }
    66%       { transform: translate(-5%, 5%) scale(0.95); opacity: 0.7; }
}
@keyframes aurora2 {
    0%, 100% { transform: translate(0, 0) scale(0.9); opacity: 0.7; }
    40%       { transform: translate(-10%, -8%) scale(1.12); opacity: 1; }
    70%       { transform: translate(6%, -4%) scale(1.05); opacity: 0.8; }
}
@keyframes aurora3 {
    0%, 100% { transform: translate(0, 0) scale(1.1); opacity: 0.6; }
    50%       { transform: translate(12%, -10%) scale(0.88); opacity: 0.9; }
}
@keyframes gridDrift {
    0%   { transform: translateY(0px) translateX(0px); }
    100% { transform: translateY(60px) translateX(20px); }
}
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 25px rgba(59, 110, 255, 0.5), 0 0 60px rgba(59, 110, 255, 0.3); }
    50%       { box-shadow: 0 0 45px rgba(59, 110, 255, 0.9), 0 0 100px rgba(59, 110, 255, 0.5), 0 0 180px rgba(139, 92, 246, 0.25); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes floatBadge {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-5px); }
}
@keyframes rotateBorder {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes textShimmer {
    0%, 100% { background-position: 0% center; }
    50%       { background-position: 100% center; }
}

/* ============================================================
   FOND ATMOSPHÉRIQUE — Aurora Boréale VISIBLE
   ============================================================ */
body::before {
    content: '';
    position: fixed;
    inset: -80px 0 0 0;
    height: calc(100% + 80px);
    background-image:
        linear-gradient(to right, rgba(59, 110, 255, 0.12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(59, 110, 255, 0.12) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 0;
    animation: gridDrift 8s linear infinite;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 70%);
}

/* Orbe 1 — Cobalt (haut gauche) — RENFORCÉ */
.mesh-aura::before {
    content: '';
    position: absolute;
    top: -25%; left: -20%;
    width: 90vw; height: 90vw;
    background: radial-gradient(circle, rgba(59, 110, 255, 0.55) 0%, rgba(59, 110, 255, 0.25) 35%, rgba(59, 110, 255, 0.08) 55%, transparent 70%);
    filter: blur(45px);
    animation: aurora1 12s ease-in-out infinite;
    border-radius: 50%;
}
/* Orbe 2 — Violet (bas droite) — RENFORCÉ */
.mesh-aura::after {
    content: '';
    position: absolute;
    bottom: -20%; right: -15%;
    width: 80vw; height: 80vw;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.50) 0%, rgba(139, 92, 246, 0.20) 35%, rgba(139, 92, 246, 0.06) 55%, transparent 70%);
    filter: blur(55px);
    animation: aurora2 16s ease-in-out infinite;
    border-radius: 50%;
}
/* Orbe 3 — Cyan (milieu droite) — RENFORCÉ */
body::after {
    content: '';
    position: fixed;
    top: 25%; right: -5%;
    width: 65vw; height: 65vw;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.35) 0%, rgba(0, 212, 255, 0.12) 35%, rgba(0, 212, 255, 0.03) 55%, transparent 70%);
    filter: blur(65px);
    z-index: 0;
    pointer-events: none;
    animation: aurora3 20s ease-in-out infinite;
    border-radius: 50%;
}

.mesh-aura {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* S'assurer que le contenu passe au dessus du fond */
.ct-header,
.elementor,
.site-main,
#content,
.ct-container,
footer {
    position: relative;
    z-index: 1;
}

/* ============================================================
   TYPOGRAPHIE
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
    color: var(--text-main) !important;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
}
h1 { font-size: clamp(2.8rem, 6vw, 5.5rem); font-weight: 900; }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.75rem); font-weight: 600; }

p {
    color: var(--text-muted) !important;
    font-size: 1.05rem;
    line-height: 1.85;
    font-weight: 400;
}
a { color: inherit; }

/* ============================================================
   LOGO TEXTUEL — Gradient Animé (Force Blocksy)
   ============================================================ */
.site-title a,
.site-title a:visited,
.ct-site-title a,
.ct-site-title a:visited,
a.ct-site-title,
.ct-header .site-title a,
.header-inner .site-title a,
[class*="site-title"] a,
.ct-logo-container .site-title a {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 900 !important;
    font-size: 1.6rem !important;
    text-decoration: none !important;
    color: transparent !important;
    background: linear-gradient(90deg, #6B96FF, #00D4FF, #8B5CF6, #6B96FF) !important;
    background-size: 300% 100% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: textShimmer 4s ease-in-out infinite !important;
    letter-spacing: -0.02em !important;
    filter: none !important;
    display: inline-block !important;
}

/* ============================================================
   HEADER GLASSMORPHISM — Tous sélecteurs Blocksy
   ============================================================ */

/* Sélecteurs larges pour couvrir toutes les variantes Blocksy */
.ct-header,
header.ct-header,
#header,
header,
[data-id="header"],
.site-header,
.header-wrapper,
.ct-header-inner,
.header-sticky-outer {
    background: rgba(4, 6, 26, 0.82) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-bottom: 1px solid rgba(59, 110, 255, 0.2) !important;
    box-shadow: 0 1px 0 0 rgba(59, 110, 255, 0.1), 0 4px 40px rgba(0,0,0,0.4) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

/* Sous-éléments du header — forcer fond transparent */
.ct-header > *,
.ct-header-inner > *,
[data-id="header"] > * {
    background: transparent !important;
}

/* Navigation links — forcer blanc */
.ct-menu > li > a,
.ct-header a,
nav a,
.main-navigation a,
[data-id="header"] a {
    color: rgba(248, 250, 252, 0.85) !important;
    font-weight: 500 !important;
}
.ct-menu > li > a:hover,
.ct-header a:hover {
    color: #6B96FF !important;
}

/* Footer sombre */
footer,
.ct-footer,
.footer-widgets,
[data-id="footer"] {
    background: rgba(4, 6, 26, 0.95) !important;
    border-top: 1px solid rgba(59, 110, 255, 0.15) !important;
    color: rgba(148, 163, 184, 0.8) !important;
}

.ct-menu a,
.ct-header a,
.header-menu a {
    color: var(--text-muted) !important;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    transition: color 0.3s ease;
}
.ct-menu a:hover,
.ct-header a:hover {
    color: var(--text-main) !important;
}

/* ============================================================
   LAYOUT CENTRAGE — Système Expenza
   Principe : sections (fond) = pleine largeur
              contenu interne = max 1200px centré
   ============================================================ */

/* Container générique */
.container, .expenza-container {
    max-width: var(--max-width);
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 2rem;
    padding-right: 2rem;
    width: 100%;
}

/* ── Elementor Sections (ancien système) ── */
.elementor-section-boxed > .elementor-container {
    max-width: var(--max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(1rem, 4vw, 2rem) !important;
    padding-right: clamp(1rem, 4vw, 2rem) !important;
    width: 100% !important;
}

/* ── Elementor Flexbox Containers (nouveau système .e-con) ── */
/* Le container racine (section) peut rester pleine largeur pour le fond */
.e-con {
    width: 100% !important;
}

/* L'inner est celui qu'on contraint */
.e-con > .e-con-inner {
    max-width: var(--max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(1rem, 4vw, 2rem) !important;
    padding-right: clamp(1rem, 4vw, 2rem) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Exception : containers enfants (colonnes/cards) ne se contraignent pas */
.e-con .e-con > .e-con-inner {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Colonnes Elementor legacy */
.elementor-col-100,
.elementor-col-66,
.elementor-col-50,
.elementor-col-33,
.elementor-col-25 {
    padding: 0 !important;
}

/* Centrage de la section entière quand Elementor la met en boxed */
.elementor-section.elementor-section-boxed {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Body et page ne débordent jamais */
body, html {
    overflow-x: hidden !important;
}

/* ============================================================
   ELEMENTOR — SECTIONS & CONTAINERS
   ============================================================ */

/* Fond de chaque section Elementor */
.e-con:not([style*="background"]) {
    background: transparent !important;
}

/* Séparateur lumineux entre sections majeures */
.elementor > .elementor-inner > .elementor-section:not(:last-child)::after,
.e-con[data-id]:not(:last-child)::after {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59, 110, 255, 0.35), rgba(0, 212, 255, 0.25), transparent);
    margin: 0 auto;
    max-width: 800px;
}

/* ============================================================
   ELEMENTOR — WIDGETS GLASSMORPHISM
   Cible les boîtes de contenu (cards de service, FAQ, etc.)
   ============================================================ */
.elementor-widget-container {
    color: var(--text-muted);
}

/* Cards / boîtes avec fond dans Elementor */
.e-con .e-con:not(.e-parent),
.elementor-col-33 .elementor-widget-container,
.elementor-col-25 .elementor-widget-container {
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.e-con .e-con:not(.e-parent)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(59, 110, 255, 0.06) 0%, transparent 60%);
    pointer-events: none;
    border-radius: inherit;
}
.e-con .e-con:not(.e-parent):hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
    transform: translateY(-5px);
    box-shadow: 0 0 40px rgba(59, 110, 255, 0.18), 0 20px 40px rgba(0,0,0,0.3);
}

/* Boîtes Blocksy/Elementor avec background blanc/gris → override */
[class*="elementor-widget-wrap"],
[class*="elementor-element"] {
    background-color: transparent !important;
}

/* Forcer les titres et paragraphes dans Elementor */
.elementor h1, .elementor h2, .elementor h3,
.elementor h4, .elementor h5, .elementor h6 {
    color: var(--text-main) !important;
    font-family: 'Outfit', sans-serif !important;
}
.elementor p,
.elementor .elementor-text-editor,
.elementor li,
.elementor span:not([class*="icon"]) {
    color: var(--text-muted) !important;
}

/* Force le fond de page */
body,
.elementor-page,
body.elementor-template-canvas,
.ct-main-content-area {
    background-color: var(--bg-space) !important;
}

/* ============================================================
   PILL BADGE
   ============================================================ */
.pill-badge, .badge-vibrant,
.elementor-widget-text-editor > .elementor-widget-container > p:first-child:has(em) {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.2rem;
    border-radius: 50px;
    background: rgba(59, 110, 255, 0.12) !important;
    border: 1px solid rgba(59, 110, 255, 0.35) !important;
    color: var(--cobalt-light) !important;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    animation: floatBadge 3s ease-in-out infinite;
}

/* ============================================================
   BOUTONS — CTA Animés
   ============================================================ */
.btn,
.elementor-button,
a.elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 2.2rem;
    border-radius: 100px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    border: none;
    letter-spacing: 0.02em;
}

/* Bouton principal — shimmer + pulse */
.btn-primary,
.btn-vibrant,
.elementor-button.elementor-button-link,
.elementor-button-wrapper .elementor-button {
    background: linear-gradient(90deg, var(--cobalt), var(--cobalt-light), var(--cyan-accent), var(--cobalt)) !important;
    background-size: 300% 100% !important;
    color: #fff !important;
    animation: shimmer 3s linear infinite, pulseGlow 3s ease-in-out infinite;
}
.btn-primary:hover,
.btn-vibrant:hover,
.elementor-button-wrapper .elementor-button:hover {
    transform: translateY(-4px) scale(1.03);
    filter: brightness(1.15);
}

/* Bouton ghost */
.btn-ghost {
    background: transparent;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-glass) !important;
    backdrop-filter: blur(10px);
}
.btn-ghost:hover {
    color: var(--text-main) !important;
    border-color: rgba(59, 110, 255, 0.5) !important;
    background: rgba(59, 110, 255, 0.08);
    transform: translateY(-3px);
}

/* ============================================================
   CARDS Elementor — Glassmorphism Natif
   (Sections enfant imbriquées dans les grilles)
   ============================================================ */
.card,
.expenza-card {
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    padding: 2.5rem 2rem;
    border-radius: var(--radius-card);
    transition: var(--transition);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: relative;
    overflow: hidden;
}
.card::before, .expenza-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(59, 110, 255, 0.07) 0%, transparent 55%);
    pointer-events: none;
    border-radius: inherit;
}
.card:hover, .expenza-card:hover {
    transform: translateY(-6px);
    border-color: var(--border-hover);
    box-shadow: 0 0 50px rgba(59, 110, 255, 0.2), 0 20px 40px rgba(0,0,0,0.35);
    background: var(--bg-card-hover);
}
.card h3, .card h4, .expenza-card h3, .expenza-card h4 { color: var(--text-main) !important; margin-bottom: 0.8rem; }
.card p, .expenza-card p { color: var(--text-muted) !important; font-size: 0.97rem; }

/* ============================================================
   SCROLL REVEAL — Éléments Elementor 
   (définition initiale — JS ajoute la classe .ex-revealed)
   ============================================================ */
.ex-hidden {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1) !important;
}
.ex-hidden.ex-revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
/* Délais en cascade pour les grilles */
.ex-hidden:nth-child(2) { transition-delay: 0.1s !important; }
.ex-hidden:nth-child(3) { transition-delay: 0.2s !important; }
.ex-hidden:nth-child(4) { transition-delay: 0.3s !important; }
.ex-hidden:nth-child(5) { transition-delay: 0.4s !important; }
.ex-hidden:nth-child(6) { transition-delay: 0.5s !important; }

/* ============================================================
   PROTECTION LOGO IMAGE
   ============================================================ */
.ct-header img,
.site-logo img,
.custom-logo,
.ct-site-icon img {
    filter: none !important;
    opacity: 1 !important;
}

/* ============================================================
   UTILITY
   ============================================================ */
.text-muted  { color: var(--text-muted) !important; }
.text-main   { color: var(--text-main) !important; }
.text-cobalt { color: var(--cobalt-light) !important; }
.text-cyan   { color: var(--cyan-accent) !important; }
.text-violet { color: var(--violet-accent) !important; }

section { padding: 7rem 0; }

.seo-text {
    max-width: 680px;
    margin: 0 auto;
    color: var(--text-muted) !important;
    font-size: 1.05rem;
    line-height: 1.85;
    text-align: center;
}

/* Accent ligne sous les h2 */
.elementor h2::after,
h2.accent-line::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--cobalt), var(--cyan-accent));
    border-radius: 2px;
    margin: 1rem auto 0;
}
.elementor .elementor-text-align-left h2::after {
    margin-left: 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer,
.ct-footer {
    background: rgba(4, 6, 26, 0.95) !important;
    border-top: 1px solid var(--border-glass) !important;
    backdrop-filter: blur(20px) !important;
}
footer p, .ct-footer p { color: var(--text-muted) !important; }
footer a, .ct-footer a { color: var(--text-muted) !important; transition: color 0.3s; }
footer a:hover, .ct-footer a:hover { color: var(--cobalt-light) !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .container, .expenza-container { padding: 0 1.25rem; }
    h1 { font-size: clamp(2rem, 7vw, 2.8rem); }
    h2 { font-size: clamp(1.6rem, 5vw, 2.2rem); }
    section { padding: 5rem 0; }
    .card, .expenza-card { padding: 1.8rem 1.4rem; }
    .site-title a { font-size: 1.3rem !important; }
}

/* ============================================================
   CORRECTIONS BLOCKSY v4.1
   ============================================================ */

/* Masquer le post-header Blocksy (date + titre "Accueil") sur les pages Elementor */
.elementor-page .entry-header,
.elementor-page .page-header,
.elementor-page .post-header,
.elementor-page .ct-post-header,
.elementor-page header.entry-header,
.single-page .entry-header {
    display: none !important;
}

/* Supprimer le meta (date / auteur) injecte par Blocksy */
.elementor-page .entry-meta,
.elementor-page .ct-entry-meta,
.elementor-page .posted-on {
    display: none !important;
}

/* Corriger le fond blanc derriere le logo dans le header */
.ct-header .site-branding,
.ct-header .site-logo,
.ct-header .custom-logo-link,
.ct-header img.custom-logo,
.ct-header .site-title,
.ct-header-inner [class*="logo"],
.ct-header-inner .ct-image-container {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Menu navigation */
.ct-main-navigation a,
.ct-header nav a {
    color: rgba(248, 250, 252, 0.9) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 500 !important;
}
.ct-main-navigation a:hover {
    color: #6B96FF !important;
}