/** * Thème « Neon Flux » — édition Williams : bleu nuit métallique façon Clio Williams, * accents or, effets premium (brillant / grain / halos discrets), lisibilité maximale. * * ACTIF : */ @import url("https://fonts.googleapis.com/css2?family=Syne:wght@500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap"); /* Grain « pailletté » léger (SVG fractal) */ html.theme-cyberlux.theme-neonflux { overflow-x: hidden; max-width: 100%; --wm-void: #050a10; --wm-ink: #070f18; --wm-night: #0c1826; --wm-mid: #122a42; --wm-metallic: #1a4a72; --wm-metallic-bright: #2d6aa3; --wm-sparkle: #7eb8e8; --wm-frost: #dce9f5; --wm-gold: #c9a227; --wm-gold-bright: #e8c547; --wm-gold-deep: #8a7020; --wm-silver: #b8c5d6; --wm-text: #f8fafc; --wm-text-body: #e8eef5; --wm-text-muted: #c5d0e0; --wm-text-subtle: #9fb0c8; --wm-on-gold: #1a0f00; --wm-on-primary-btn: #ffffff; --wm-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"); /* Charte → variables globales (contraste WCAG sur fond sombre) */ --color-accent: var(--wm-gold-bright); --color-accent-dark: var(--wm-gold-deep); --color-accent-light: var(--wm-sparkle); --color-accent-lighter: #f0e6c8; --color-primary: var(--wm-night); --color-primary-dark: var(--wm-void); --color-primary-light: var(--wm-metallic-bright); --color-primary-lighter: var(--wm-sparkle); --cx-accent: var(--wm-gold-bright); --cx-accent-dark: var(--wm-gold-deep); --cx-accent-light: var(--wm-sparkle); --cx-cyan: var(--wm-sparkle); --cx-bg-deep: var(--wm-void); --cx-bg-mid: var(--wm-night); --cx-panel: color-mix(in srgb, var(--wm-mid) 88%, rgba(0, 0, 0, 0.35)); --cx-panel-border: color-mix(in srgb, var(--wm-gold) 38%, transparent); --cx-neon: var(--wm-gold-bright); --cx-neon-mid: var(--wm-metallic-bright); --cx-neon-dim: color-mix(in srgb, var(--wm-gold) 22%, transparent); --cx-glow-soft: color-mix(in srgb, var(--wm-metallic-bright) 20%, transparent); --cx-grid-line: color-mix(in srgb, var(--wm-sparkle) 10%, transparent); --cx-text: var(--wm-text); --cx-body: var(--wm-text-body); --cx-muted: var(--wm-text-muted); --cx-subtle: var(--wm-text-subtle); } /* Navbar toujours épinglée (priorité sur tout override tiers) */ html.theme-cyberlux.theme-neonflux #header.header, html.theme-cyberlux.theme-neonflux header.header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 10050 !important; } html.theme-cyberlux.theme-neonflux body { overflow-x: hidden; max-width: 100%; font-family: "DM Sans", "Inter", system-ui, sans-serif !important; color: var(--wm-text-body) !important; background-color: var(--wm-void) !important; background-image: var(--wm-noise), radial-gradient(ellipse 110% 60% at 50% -20%, color-mix(in srgb, var(--wm-metallic-bright) 28%, transparent), transparent 55%), radial-gradient(ellipse 50% 45% at 100% 10%, color-mix(in srgb, var(--wm-metallic) 22%, transparent), transparent 50%), radial-gradient(ellipse 55% 50% at 0% 90%, color-mix(in srgb, var(--wm-gold) 12%, transparent), transparent 48%), radial-gradient(circle 280px at 82% 68%, color-mix(in srgb, var(--wm-sparkle) 8%, transparent), transparent 72%), radial-gradient(circle 200px at 12% 35%, color-mix(in srgb, var(--wm-metallic-bright) 10%, transparent), transparent 65%), linear-gradient(155deg, transparent 40%, color-mix(in srgb, var(--wm-frost) 4%, transparent) 48%, transparent 56%), linear-gradient(var(--cx-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--cx-grid-line) 1px, transparent 1px) !important; background-size: 256px 256px, auto, auto, auto, auto, auto, auto, 52px 52px, 52px 52px !important; background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; animation: williams-bg-drift 48s ease-in-out infinite alternate !important; } html.theme-cyberlux.theme-neonflux body.platform-leads { background-color: var(--wm-void) !important; background-image: var(--wm-noise), radial-gradient(ellipse 110% 60% at 50% -20%, color-mix(in srgb, var(--wm-metallic-bright) 28%, transparent), transparent 55%), radial-gradient(ellipse 50% 45% at 100% 10%, color-mix(in srgb, var(--wm-metallic) 22%, transparent), transparent 50%), radial-gradient(ellipse 55% 50% at 0% 90%, color-mix(in srgb, var(--wm-gold) 12%, transparent), transparent 48%), radial-gradient(circle 280px at 82% 68%, color-mix(in srgb, var(--wm-sparkle) 8%, transparent), transparent 72%), radial-gradient(circle 200px at 12% 35%, color-mix(in srgb, var(--wm-metallic-bright) 10%, transparent), transparent 65%), linear-gradient(155deg, transparent 40%, color-mix(in srgb, var(--wm-frost) 4%, transparent) 48%, transparent 56%), linear-gradient(var(--cx-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--cx-grid-line) 1px, transparent 1px) !important; background-size: 256px 256px, auto, auto, auto, auto, auto, auto, 52px 52px, 52px 52px !important; animation: williams-bg-drift 48s ease-in-out infinite alternate !important; } @keyframes williams-bg-drift { 0% { background-position: 0 0, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0 0, 0 0; } 100% { background-position: 40px 20px, 3% 2%, -2% 1%, 1% -3%, -5% 4%, 2% -2%, 8% 5%, 14px 10px, -10px 14px; } } html.theme-cyberlux.theme-neonflux body.platform-leads::before, html.theme-cyberlux.theme-neonflux body.platform-leads::after { background: radial-gradient(circle at 28% 25%, color-mix(in srgb, var(--wm-metallic-bright) 26%, transparent), transparent 55%), radial-gradient(circle at 72% 65%, color-mix(in srgb, var(--wm-gold) 14%, transparent), transparent 52%) !important; filter: blur(96px) saturate(1.08) !important; } /* Titres sur blocs sombres (pas de h1/h2 globaux : cassaient modales & cartes claires) */ html.theme-cyberlux.theme-neonflux .hero h1, html.theme-cyberlux.theme-neonflux .page-hero h1, html.theme-cyberlux.theme-neonflux .pricing-hero h1, html.theme-cyberlux.theme-neonflux .method-hero h1, html.theme-cyberlux.theme-neonflux .blog-hero h1, html.theme-cyberlux.theme-neonflux .about-hero h1, html.theme-cyberlux.theme-neonflux .sectors-hero h1, html.theme-cyberlux.theme-neonflux .contact-hero h1, html.theme-cyberlux.theme-neonflux .portfolio-hero h1, html.theme-cyberlux.theme-neonflux .hero-title, html.theme-cyberlux.theme-neonflux .gav-title, /* Titres de section sur fond sombre uniquement (pas section-alt = fond clair) */ html.theme-cyberlux.theme-neonflux .section:not(.section-alt) .section-header .section-title, html.theme-cyberlux.theme-neonflux .section:not(.section-alt) .section-header h2, html.theme-cyberlux.theme-neonflux .cta-card .cta-title, html.theme-cyberlux.theme-neonflux .cta-card h2 { font-family: "Syne", "DM Sans", system-ui, sans-serif !important; font-weight: 700 !important; color: var(--wm-text) !important; letter-spacing: -0.02em !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 24px color-mix(in srgb, var(--wm-gold) 25%, transparent), 0 0 48px color-mix(in srgb, var(--wm-metallic-bright) 15%, transparent) !important; } /* En-têtes de section sur fond clair (section-alt) */ html.theme-cyberlux.theme-neonflux .section.section-alt .section-header .section-title, html.theme-cyberlux.theme-neonflux .section.section-alt .section-header h2 { font-family: "Syne", "DM Sans", system-ui, sans-serif !important; font-weight: 700 !important; color: #0f172a !important; letter-spacing: -0.02em !important; text-shadow: none !important; } html.theme-cyberlux.theme-neonflux .section.section-alt .section-header .section-subtitle { color: #475569 !important; } html.theme-cyberlux.theme-neonflux .section.section-alt .section-header .section-badge { color: #0b1730 !important; background: color-mix(in srgb, var(--wm-gold) 22%, #f8fafc) !important; border: 1px solid color-mix(in srgb, var(--wm-gold) 35%, transparent) !important; } html.theme-cyberlux.theme-neonflux .hero-title, html.theme-cyberlux.theme-neonflux .hero-content-card .hero-title { letter-spacing: -0.03em !important; } html.theme-cyberlux.theme-neonflux .section-subtitle, html.theme-cyberlux.theme-neonflux .hero-subtitle, html.theme-cyberlux.theme-neonflux .gav-description, html.theme-cyberlux.theme-neonflux .lead, html.theme-cyberlux.theme-neonflux .subtitle { color: var(--wm-text-body) !important; } html.theme-cyberlux.theme-neonflux .section-subtitle, html.theme-cyberlux.theme-neonflux .hero-subtitle, html.theme-cyberlux.theme-neonflux .gav-description, html.theme-cyberlux.theme-neonflux .stat-description, html.theme-cyberlux.theme-neonflux label, html.theme-cyberlux.theme-neonflux .form-group label { color: var(--wm-text-muted) !important; } html.theme-cyberlux.theme-neonflux a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-cta):not(.btn-large):not(.nav-link):not(.logo):not(.footer-link):not(.social-link):not(.gmb-btn):not(.micro-cta-btn):not(.contact-link):not(.blog-modal-close) { color: color-mix(in srgb, var(--wm-sparkle) 92%, white) !important; text-decoration-color: color-mix(in srgb, var(--wm-gold) 55%, transparent); } html.theme-cyberlux.theme-neonflux a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-cta):not(.btn-large):hover { color: var(--wm-gold-bright) !important; } /* Hero */ html.theme-cyberlux.theme-neonflux .hero.hero-image-only { position: relative; isolation: isolate; background: var(--wm-void) !important; } html.theme-cyberlux.theme-neonflux .hero.hero-image-only::before { content: ""; position: absolute; inset: -5%; z-index: 0; pointer-events: none; background: repeating-linear-gradient( 108deg, transparent 0, transparent 20px, color-mix(in srgb, var(--wm-metallic-bright) 14%, transparent) 20px, color-mix(in srgb, var(--wm-metallic-bright) 14%, transparent) 21px ), repeating-linear-gradient( -18deg, transparent 0, transparent 28px, color-mix(in srgb, var(--wm-gold) 7%, transparent) 28px, color-mix(in srgb, var(--wm-gold) 7%, transparent) 29px ); opacity: 0.28; mix-blend-mode: soft-light; mask-image: linear-gradient(to bottom, black 0%, black 48%, transparent 100%); animation: williams-ribbon-shift 32s linear infinite; } @keyframes williams-ribbon-shift { 0% { transform: translateY(0) skewY(-1.5deg); } 100% { transform: translateY(-1.5%) skewY(1deg); } } html.theme-cyberlux.theme-neonflux .hero.hero-image-only::after { content: ""; position: absolute; left: 50%; top: 42%; width: min(40vw, 300px); height: min(40vw, 300px); transform: translate(-50%, -50%); z-index: 1; pointer-events: none; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.5), transparent 38%), radial-gradient(circle at 65% 70%, color-mix(in srgb, var(--wm-metallic-bright) 50%, transparent), transparent 52%), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--wm-gold) 18%, transparent), color-mix(in srgb, var(--wm-void) 90%, transparent) 70%); box-shadow: 0 0 60px color-mix(in srgb, var(--wm-metallic-bright) 35%, transparent), 0 0 120px color-mix(in srgb, var(--wm-gold) 12%, transparent), inset 0 0 50px color-mix(in srgb, var(--wm-frost) 8%, transparent); opacity: 0.38; mix-blend-mode: soft-light; animation: williams-orb-pulse 8s ease-in-out infinite alternate; } @keyframes williams-orb-pulse { 0% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.97); } 100% { opacity: 0.46; transform: translate(-50%, -50%) scale(1.03); } } html.theme-cyberlux.theme-neonflux .hero-overlay { background: linear-gradient( 180deg, color-mix(in srgb, var(--wm-void) 62%, transparent) 0%, color-mix(in srgb, var(--wm-mid) 35%, transparent) 42%, color-mix(in srgb, var(--wm-void) 90%, transparent) 100% ) !important; } /* Header & cartes hero — verre premium */ html.theme-cyberlux.theme-neonflux .hero-content-card, html.theme-cyberlux.theme-neonflux .header { background: color-mix(in srgb, var(--wm-night) 75%, transparent) !important; backdrop-filter: blur(16px) saturate(1.2) !important; -webkit-backdrop-filter: blur(16px) saturate(1.2) !important; border: 1px solid color-mix(in srgb, var(--wm-gold) 22%, transparent) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--wm-sparkle) 12%, transparent), 0 16px 56px rgba(0, 0, 0, 0.55), inset 0 1px 0 color-mix(in srgb, var(--wm-frost) 12%, transparent) !important; transition: box-shadow 0.45s ease, border-color 0.35s ease, transform 0.45s ease !important; } html.theme-cyberlux.theme-neonflux .hero-content-card:hover { border-color: color-mix(in srgb, var(--wm-gold-bright) 45%, transparent) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--wm-gold) 35%, transparent), 0 20px 64px rgba(0, 0, 0, 0.6), 0 0 80px color-mix(in srgb, var(--wm-metallic-bright) 15%, transparent), inset 0 1px 0 color-mix(in srgb, var(--wm-frost) 18%, transparent) !important; } html.theme-cyberlux.theme-neonflux .header.scrolled { box-shadow: 0 0 0 1px color-mix(in srgb, var(--wm-gold) 28%, transparent), 0 10px 40px rgba(0, 0, 0, 0.55) !important; } /* Boutons — contraste élevé + reflet animé */ html.theme-cyberlux.theme-neonflux .btn-primary, html.theme-cyberlux.theme-neonflux body.platform-leads .btn-primary { color: var(--wm-on-primary-btn) !important; background: linear-gradient( 135deg, var(--wm-metallic) 0%, var(--wm-metallic-bright) 45%, color-mix(in srgb, var(--wm-gold) 35%, var(--wm-metallic-bright)) 100% ) !important; border: 1px solid color-mix(in srgb, var(--wm-gold-bright) 55%, transparent) !important; border-radius: 999px !important; font-weight: 700 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; box-shadow: 0 2px 0 color-mix(in srgb, var(--wm-gold-deep) 40%, transparent), 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 28px color-mix(in srgb, var(--wm-metallic-bright) 35%, transparent) !important; position: relative; overflow: hidden; } html.theme-cyberlux.theme-neonflux .btn-primary:hover, html.theme-cyberlux.theme-neonflux body.platform-leads .btn-primary:hover { filter: brightness(1.08) !important; box-shadow: 0 2px 0 var(--wm-gold-deep), 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 40px color-mix(in srgb, var(--wm-gold-bright) 28%, transparent) !important; } html.theme-cyberlux.theme-neonflux .btn-secondary, html.theme-cyberlux.theme-neonflux body.platform-leads .btn-secondary { color: var(--wm-text) !important; background: color-mix(in srgb, var(--wm-mid) 65%, transparent) !important; border: 2px solid color-mix(in srgb, var(--wm-gold-bright) 65%, transparent) !important; border-radius: 999px !important; font-weight: 700 !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 1px 0 color-mix(in srgb, var(--wm-frost) 10%, transparent) !important; } html.theme-cyberlux.theme-neonflux .btn-secondary:hover, html.theme-cyberlux.theme-neonflux body.platform-leads .btn-secondary:hover { background: color-mix(in srgb, var(--wm-metallic) 55%, transparent) !important; color: #ffffff !important; border-color: var(--wm-gold-bright) !important; } html.theme-cyberlux.theme-neonflux .btn-cta { color: var(--wm-on-gold) !important; background: linear-gradient(135deg, var(--wm-gold-bright), var(--wm-gold)) !important; border: 1px solid var(--wm-gold-deep) !important; border-radius: 999px !important; font-weight: 800 !important; box-shadow: 0 2px 0 var(--wm-gold-deep), 0 8px 28px color-mix(in srgb, var(--wm-gold) 45%, transparent) !important; } html.theme-cyberlux.theme-neonflux .btn-cta:hover { filter: brightness(1.06) !important; color: var(--wm-on-gold) !important; } /* CTA finale : bouton principal or + texte très sombre (lisible) */ html.theme-cyberlux.theme-neonflux .cta-card .btn-primary { background: linear-gradient(135deg, var(--wm-gold-bright), var(--wm-gold)) !important; color: var(--wm-on-gold) !important; border: 2px solid var(--wm-gold-deep) !important; text-shadow: none !important; box-shadow: 0 2px 0 var(--wm-gold-deep), 0 8px 28px color-mix(in srgb, var(--wm-gold) 40%, transparent) !important; } html.theme-cyberlux.theme-neonflux .cta-card .btn-primary:hover { color: var(--wm-on-gold) !important; filter: brightness(1.05) !important; } html.theme-cyberlux.theme-neonflux .cta-card .btn-secondary { color: #f8fbff !important; background: rgba(248, 251, 255, 0.1) !important; border: 2px solid rgba(248, 251, 255, 0.82) !important; box-shadow: none !important; } html.theme-cyberlux.theme-neonflux .cta-card .btn-secondary:hover { color: var(--wm-ink) !important; background: #ffffff !important; border-color: #ffffff !important; filter: none !important; } html.theme-cyberlux.theme-neonflux .hero-badge, html.theme-cyberlux.theme-neonflux .section-badge { color: var(--wm-text) !important; background: color-mix(in srgb, var(--wm-mid) 88%, transparent) !important; border: 1px solid color-mix(in srgb, var(--wm-gold) 40%, transparent) !important; border-radius: 999px !important; box-shadow: 0 0 20px color-mix(in srgb, var(--wm-gold) 15%, transparent) !important; } html.theme-cyberlux.theme-neonflux .typewriter-cursor { color: var(--wm-gold-bright) !important; text-shadow: 0 0 10px color-mix(in srgb, var(--wm-gold-bright) 50%, transparent) !important; } html.theme-cyberlux.theme-neonflux .nav-link { color: var(--wm-text-muted) !important; } html.theme-cyberlux.theme-neonflux .nav-link.active, html.theme-cyberlux.theme-neonflux .nav-link:hover { color: var(--wm-text) !important; text-shadow: 0 0 12px color-mix(in srgb, var(--wm-gold) 35%, transparent) !important; } /* Cartes sections (Cyberlux) — bordure or + texte clair */ html.theme-cyberlux.theme-neonflux body.platform-leads .service-card, html.theme-cyberlux.theme-neonflux body.platform-leads .sector-card, html.theme-cyberlux.theme-neonflux body.platform-leads .why-card, html.theme-cyberlux.theme-neonflux body.platform-leads .faq-item, html.theme-cyberlux.theme-neonflux body.platform-leads .contact-card, html.theme-cyberlux.theme-neonflux body.platform-leads .blog-card, html.theme-cyberlux.theme-neonflux body.platform-leads .method-card, html.theme-cyberlux.theme-neonflux body.platform-leads .value-card, html.theme-cyberlux.theme-neonflux body.platform-leads .expertise-card, html.theme-cyberlux.theme-neonflux body.platform-leads .zone-card, html.theme-cyberlux.theme-neonflux body.platform-leads .guarantee-card, html.theme-cyberlux.theme-neonflux body.platform-leads .process-item, html.theme-cyberlux.theme-neonflux body.platform-leads .process-detailed, html.theme-cyberlux.theme-neonflux body.platform-leads .advantage-card, html.theme-cyberlux.theme-neonflux body.platform-leads .portfolio-card, html.theme-cyberlux.theme-neonflux body.platform-leads .pricing-card, html.theme-cyberlux.theme-neonflux .countdown-timer-card, html.theme-cyberlux.theme-neonflux .countdown-card { border: 1px solid color-mix(in srgb, var(--wm-gold) 22%, transparent) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 color-mix(in srgb, var(--wm-frost) 8%, transparent) !important; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important; } html.theme-cyberlux.theme-neonflux body.platform-leads .service-card:hover, html.theme-cyberlux.theme-neonflux body.platform-leads .sector-card:hover, html.theme-cyberlux.theme-neonflux body.platform-leads .faq-item:hover, html.theme-cyberlux.theme-neonflux body.platform-leads .pricing-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--wm-gold-bright) 50%, transparent) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--wm-gold) 25%, transparent), 0 20px 48px rgba(0, 0, 0, 0.45), 0 0 60px color-mix(in srgb, var(--wm-metallic-bright) 12%, transparent) !important; } html.theme-cyberlux.theme-neonflux body.platform-leads .faq-question { color: var(--wm-text) !important; } html.theme-cyberlux.theme-neonflux body.platform-leads .faq-answer { color: var(--wm-text-muted) !important; } html.theme-cyberlux.theme-neonflux .countdown-card-title, html.theme-cyberlux.theme-neonflux .countdown-number, html.theme-cyberlux.theme-neonflux .countdown-card-text, html.theme-cyberlux.theme-neonflux .countdown-label { color: var(--wm-text) !important; } html.theme-cyberlux.theme-neonflux .countdown-label { color: var(--wm-text-muted) !important; } html.theme-cyberlux.theme-neonflux .countdown-number { color: var(--wm-gold-bright) !important; text-shadow: 0 0 20px color-mix(in srgb, var(--wm-gold) 35%, transparent) !important; } /* Stats : cartes claires = texte très sombre (lisibilité max) */ html.theme-cyberlux.theme-neonflux .stats-section { background: linear-gradient(180deg, #f0f4fa 0%, #ffffff 55%, #e8eef6 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important; } html.theme-cyberlux.theme-neonflux .stat-card { background: #ffffff !important; border: 1px solid color-mix(in srgb, var(--wm-metallic) 22%, transparent) !important; box-shadow: 0 10px 36px rgba(7, 15, 24, 0.12) !important; } html.theme-cyberlux.theme-neonflux .stat-number { color: var(--wm-metallic) !important; text-shadow: none !important; } html.theme-cyberlux.theme-neonflux .stat-label { color: var(--wm-ink) !important; } html.theme-cyberlux.theme-neonflux .stat-description { color: #334155 !important; } /* Micro-conversions : fond sombre premium + texte clair + CTA or */ html.theme-cyberlux.theme-neonflux .micro-conversion-block { background: linear-gradient( 145deg, color-mix(in srgb, var(--wm-night) 92%, transparent), color-mix(in srgb, var(--wm-mid) 88%, transparent) ) !important; border: 1px solid color-mix(in srgb, var(--wm-gold) 38%, transparent) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 16px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 color-mix(in srgb, var(--wm-frost) 10%, transparent) !important; } html.theme-cyberlux.theme-neonflux .micro-heading { color: var(--wm-text) !important; } html.theme-cyberlux.theme-neonflux .micro-subheading { color: var(--wm-text-muted) !important; } html.theme-cyberlux.theme-neonflux .micro-cta-btn { background: linear-gradient(135deg, var(--wm-gold-bright), var(--wm-gold)) !important; color: var(--wm-on-gold) !important; font-weight: 800 !important; border: 2px solid var(--wm-gold-deep) !important; box-shadow: 0 4px 24px color-mix(in srgb, var(--wm-gold) 40%, transparent) !important; } html.theme-cyberlux.theme-neonflux .micro-cta-btn:hover { filter: brightness(1.07) !important; color: var(--wm-on-gold) !important; } html.theme-cyberlux.theme-neonflux .micro-block-urgent .micro-heading, html.theme-cyberlux.theme-neonflux .micro-block-limit .micro-heading { color: #fecdd3 !important; } html.theme-cyberlux.theme-neonflux .micro-block-urgent .micro-cta-btn, html.theme-cyberlux.theme-neonflux .micro-block-limit .micro-cta-btn { background: linear-gradient(135deg, #f87171, #dc2626) !important; color: #ffffff !important; border-color: #7f1d1d !important; } html.theme-cyberlux.theme-neonflux .micro-block-testimonial .micro-heading { color: var(--wm-sparkle) !important; } html.theme-cyberlux.theme-neonflux .micro-block-testimonial .micro-cta-btn { background: linear-gradient(135deg, var(--wm-metallic-bright), var(--wm-metallic)) !important; color: #ffffff !important; border: 1px solid color-mix(in srgb, var(--wm-sparkle) 40%, transparent) !important; } html.theme-cyberlux.theme-neonflux .micro-block-secondary .micro-heading { color: var(--wm-text) !important; } html.theme-cyberlux.theme-neonflux .micro-block-secondary .micro-cta-btn { background: linear-gradient(135deg, var(--wm-metallic), var(--wm-night)) !important; color: #ffffff !important; } html.theme-cyberlux.theme-neonflux .micro-block-cta-primary { background: linear-gradient(145deg, color-mix(in srgb, var(--wm-void) 96%, transparent), color-mix(in srgb, var(--wm-mid) 94%, transparent)) !important; border-color: color-mix(in srgb, var(--wm-gold) 42%, transparent) !important; } html.theme-cyberlux.theme-neonflux .micro-block-cta-primary .micro-heading, html.theme-cyberlux.theme-neonflux .micro-block-cta-primary .micro-subheading { color: var(--wm-text) !important; } html.theme-cyberlux.theme-neonflux .micro-block-cta-primary .micro-cta-btn { background: linear-gradient(135deg, var(--wm-gold-bright), var(--wm-gold)) !important; color: var(--wm-on-gold) !important; border: 2px solid var(--wm-gold-deep) !important; } /* Formulaires */ html.theme-cyberlux.theme-neonflux input, html.theme-cyberlux.theme-neonflux textarea, html.theme-cyberlux.theme-neonflux select { color: var(--wm-text) !important; background: color-mix(in srgb, var(--wm-night) 92%, transparent) !important; border: 1px solid color-mix(in srgb, var(--wm-gold) 28%, transparent) !important; } html.theme-cyberlux.theme-neonflux input::placeholder, html.theme-cyberlux.theme-neonflux textarea::placeholder { color: var(--wm-text-subtle) !important; opacity: 1 !important; } /* Footer */ html.theme-cyberlux.theme-neonflux .footer { border-top: 1px solid color-mix(in srgb, var(--wm-gold) 18%, transparent) !important; } html.theme-cyberlux.theme-neonflux .footer-title { color: var(--wm-text) !important; } html.theme-cyberlux.theme-neonflux .footer-description, html.theme-cyberlux.theme-neonflux .footer-link { color: var(--wm-text-muted) !important; } html.theme-cyberlux.theme-neonflux .footer-link:hover { color: var(--wm-gold-bright) !important; } html.theme-cyberlux.theme-neonflux .mobile-menu-panel .nav-link { color: var(--wm-text) !important; } html.theme-cyberlux.theme-neonflux .mobile-menu-panel .nav-link:hover { color: var(--wm-gold-bright) !important; } html.theme-cyberlux.theme-neonflux main table td, html.theme-cyberlux.theme-neonflux main table th { color: var(--wm-text-body) !important; border-color: color-mix(in srgb, var(--wm-gold) 22%, transparent) !important; } /* Erreurs champs (fond clair section contact) — ne pas cibler [role="alert"] : le bloc #formMessage serait illisible */ html.theme-cyberlux.theme-neonflux .form-error { color: #b91c1c !important; } /* Retours formulaire : contraste fort (fond + texte foncé) */ html.theme-cyberlux.theme-neonflux .form-message { font-size: 1rem !important; font-weight: 600 !important; line-height: 1.5 !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14) !important; } html.theme-cyberlux.theme-neonflux .form-message-success { background: #ecfdf5 !important; color: #065f46 !important; border: 2px solid #059669 !important; text-shadow: none !important; } html.theme-cyberlux.theme-neonflux .form-message-error { background: #fef2f2 !important; color: #991b1b !important; border: 2px solid #dc2626 !important; text-shadow: none !important; } html.theme-cyberlux.theme-neonflux .form-help { color: var(--wm-text-subtle) !important; opacity: 1 !important; } html.theme-cyberlux.theme-neonflux .contact-section .form-help { color: var(--wm-text-muted) !important; } /* Surfaces claires (encarts sur fond sombre) : texte toujours foncé */ html.theme-cyberlux.theme-neonflux .cw-surface-light { background: #f1f5f9 !important; border: 1px solid rgba(15, 23, 42, 0.12) !important; color: #0f172a !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); } html.theme-cyberlux.theme-neonflux .cw-surface-light__title, html.theme-cyberlux.theme-neonflux .cw-surface-light h3 { color: #0b1730 !important; text-shadow: none !important; } html.theme-cyberlux.theme-neonflux .cw-surface-light__list, html.theme-cyberlux.theme-neonflux .cw-surface-light li, html.theme-cyberlux.theme-neonflux .cw-surface-light p { color: #1e293b !important; text-shadow: none !important; } html.theme-cyberlux.theme-neonflux .footer h3, html.theme-cyberlux.theme-neonflux .footer h4 { color: var(--wm-text) !important; text-shadow: none !important; } html.theme-cyberlux.theme-neonflux .faq-item li, html.theme-cyberlux.theme-neonflux .blog-card li { color: var(--wm-text-body) !important; } /* --- Surfaces claires : texte & liens foncés (priorité lisibilité) --- */ html.theme-cyberlux.theme-neonflux .blog-modal, html.theme-cyberlux.theme-neonflux .blog-modal .blog-modal-header { color: #0f172a !important; } html.theme-cyberlux.theme-neonflux .blog-modal h2, html.theme-cyberlux.theme-neonflux .blog-modal .blog-modal-title { color: #0b1730 !important; text-shadow: none !important; } html.theme-cyberlux.theme-neonflux .blog-modal .blog-modal-description, html.theme-cyberlux.theme-neonflux .blog-modal .blog-modal-content, html.theme-cyberlux.theme-neonflux .blog-modal .blog-modal-content p, html.theme-cyberlux.theme-neonflux .blog-modal .blog-modal-content li { color: #334155 !important; text-shadow: none !important; } html.theme-cyberlux.theme-neonflux .blog-modal .blog-modal-content strong { color: #0b1730 !important; } html.theme-cyberlux.theme-neonflux .blog-modal a:not(.btn):not(.blog-modal-close) { color: #0c4a6e !important; text-decoration-color: color-mix(in srgb, var(--wm-gold) 50%, transparent) !important; } html.theme-cyberlux.theme-neonflux .blog-modal-close { color: #334155 !important; } html.theme-cyberlux.theme-neonflux .blog-modal-close-primary { background: linear-gradient(180deg, var(--cx-accent) 0%, var(--cx-accent-dark) 100%) !important; color: var(--cx-ink) !important; text-shadow: none !important; } html.theme-cyberlux.theme-neonflux .contact-item, html.theme-cyberlux.theme-neonflux .contact-item p, html.theme-cyberlux.theme-neonflux .contact-item strong { color: #1e293b !important; text-shadow: none !important; } html.theme-cyberlux.theme-neonflux .contact-item a.contact-link { color: #0369a1 !important; } html.theme-cyberlux.theme-neonflux .pricing-note, html.theme-cyberlux.theme-neonflux .pricing-note-content, html.theme-cyberlux.theme-neonflux .pricing-note-content p, html.theme-cyberlux.theme-neonflux .pricing-note-content li { color: #334155 !important; text-shadow: none !important; } html.theme-cyberlux.theme-neonflux .pricing-note-content strong { color: #0b1730 !important; } html.theme-cyberlux.theme-neonflux .project-dev-card, html.theme-cyberlux.theme-neonflux .project-dev-card .project-dev-title, html.theme-cyberlux.theme-neonflux .project-dev-card .project-dev-description, html.theme-cyberlux.theme-neonflux .project-dev-card .project-dev-list li { color: #1e293b !important; text-shadow: none !important; } html.theme-cyberlux.theme-neonflux .project-dev-card .tag { background: #e2e8f0 !important; color: #0f172a !important; border: 1px solid #94a3b8 !important; } html.theme-cyberlux.theme-neonflux body.platform-leads main .portfolio-card .tag, html.theme-cyberlux.theme-neonflux .portfolio-delivered-section .tag { background: color-mix(in srgb, var(--wm-void) 55%, transparent) !important; color: #f8fafc !important; border: 1px solid color-mix(in srgb, var(--wm-gold) 42%, transparent) !important; } html.theme-cyberlux.theme-neonflux .founder-presentation .founder-name, html.theme-cyberlux.theme-neonflux .founder-presentation .founder-role, html.theme-cyberlux.theme-neonflux .founder-presentation .founder-description, html.theme-cyberlux.theme-neonflux .founder-presentation .founder-description p { color: #1e293b !important; text-shadow: none !important; } html.theme-cyberlux.theme-neonflux .founder-presentation .founder-social-link { color: #0f172a !important; background: #f1f5f9 !important; } html.theme-cyberlux.theme-neonflux .about-intro-text, html.theme-cyberlux.theme-neonflux .about-intro-text p, html.theme-cyberlux.theme-neonflux .about-intro-description { color: rgba(248, 250, 252, 0.94) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } html.theme-cyberlux.theme-neonflux .about-intro-description strong { color: #ffffff !important; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } html.theme-cyberlux.theme-neonflux .calendly-cta-card, html.theme-cyberlux.theme-neonflux .calendly-cta-card p, html.theme-cyberlux.theme-neonflux .calendly-cta-card .calendly-cta-title { color: #1b2f53 !important; text-shadow: none !important; } /* Configurateur de prix : fond clair — annule les h2/h3/p « mode sombre » de theme-cyberlux */ html.theme-cyberlux.theme-neonflux .configurateur-section { color: #1e293b !important; } html.theme-cyberlux.theme-neonflux .configurateur-section h1, html.theme-cyberlux.theme-neonflux .configurateur-section h2, html.theme-cyberlux.theme-neonflux .configurateur-section h3, html.theme-cyberlux.theme-neonflux .configurateur-section h4 { color: #0f172a !important; text-shadow: none !important; } html.theme-cyberlux.theme-neonflux .configurateur-section p, html.theme-cyberlux.theme-neonflux .configurateur-section li, html.theme-cyberlux.theme-neonflux .configurateur-section label { color: #334155 !important; text-shadow: none !important; } html.theme-cyberlux.theme-neonflux .configurateur-section .step-subtitle, html.theme-cyberlux.theme-neonflux .configurateur-section .secteur-desc, html.theme-cyberlux.theme-neonflux .configurateur-section .option-desc, html.theme-cyberlux.theme-neonflux .configurateur-section .pages-note, html.theme-cyberlux.theme-neonflux .configurateur-section .summary-label, html.theme-cyberlux.theme-neonflux .configurateur-section .summary-subtitle, html.theme-cyberlux.theme-neonflux .configurateur-section .total-label, html.theme-cyberlux.theme-neonflux .configurateur-section .total-note, html.theme-cyberlux.theme-neonflux .configurateur-section .trust-item, html.theme-cyberlux.theme-neonflux .configurateur-section .pages-labels, html.theme-cyberlux.theme-neonflux .configurateur-section .pages-text, html.theme-cyberlux.theme-neonflux .configurateur-section .saas-section-subtitle, html.theme-cyberlux.theme-neonflux .configurateur-section .saas-hint, html.theme-cyberlux.theme-neonflux .configurateur-section .bonus-text { color: #475569 !important; } html.theme-cyberlux.theme-neonflux .configurateur-section .secteur-name, html.theme-cyberlux.theme-neonflux .configurateur-section .option-name, html.theme-cyberlux.theme-neonflux .configurateur-section .summary-value, html.theme-cyberlux.theme-neonflux .configurateur-section .summary-title { color: #0f172a !important; } html.theme-cyberlux.theme-neonflux .configurateur-section .secteur-prix, html.theme-cyberlux.theme-neonflux .configurateur-section .option-prix, html.theme-cyberlux.theme-neonflux .configurateur-section .pages-value, html.theme-cyberlux.theme-neonflux .configurateur-section .total-price, html.theme-cyberlux.theme-neonflux .configurateur-section .summary-saas-price { color: #0b3d5c !important; } html.theme-cyberlux.theme-neonflux .configurateur-section .progress-step { background: #e2e8f0 !important; color: #475569 !important; text-shadow: none !important; } html.theme-cyberlux.theme-neonflux .configurateur-section .progress-step.active { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%) !important; color: #ffffff !important; } html.theme-cyberlux.theme-neonflux .configurateur-section .progress-step.completed { background: linear-gradient(135deg, #b8860b 0%, #e8c547 100%) !important; color: #1a0f00 !important; } html.theme-cyberlux.theme-neonflux .configurateur-section .secteur-icon { color: #0b3d5c !important; } html.theme-cyberlux.theme-neonflux .configurateur-section input[type="text"], html.theme-cyberlux.theme-neonflux .configurateur-section input[type="email"], html.theme-cyberlux.theme-neonflux .configurateur-section input[type="tel"], html.theme-cyberlux.theme-neonflux .configurateur-section textarea, html.theme-cyberlux.theme-neonflux .configurateur-section select, html.theme-cyberlux.theme-neonflux .configurateur-section .saas-select { color: #0f172a !important; background: #ffffff !important; border-color: rgba(15, 23, 42, 0.2) !important; } html.theme-cyberlux.theme-neonflux .configurateur-section #saasNeeds, html.theme-cyberlux.theme-neonflux .configurateur-section #saasIntegrationsOther, html.theme-cyberlux.theme-neonflux .configurateur-section #saasContraintes { color: #0f172a !important; background: #ffffff !important; } html.theme-cyberlux.theme-neonflux .configurateur-section input::placeholder, html.theme-cyberlux.theme-neonflux .configurateur-section textarea::placeholder { color: #64748b !important; opacity: 1 !important; } html.theme-cyberlux.theme-neonflux .section-configurateur-banner .configurateur-banner, html.theme-cyberlux.theme-neonflux .section-configurateur-banner .configurateur-banner h2, html.theme-cyberlux.theme-neonflux .section-configurateur-banner .configurateur-banner p, html.theme-cyberlux.theme-neonflux .section-configurateur-banner .banner-title { color: #f8fafc !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important; } /* --- Notre Méthode : cartes blanches (pas de
sur cette page → sans préfixe main) --- */ html.theme-cyberlux.theme-neonflux .process-detailed-card, html.theme-cyberlux.theme-neonflux .process-detailed-card h3, html.theme-cyberlux.theme-neonflux .process-detailed-card p, html.theme-cyberlux.theme-neonflux .process-detailed-card li { color: #334155 !important; text-shadow: none !important; } html.theme-cyberlux.theme-neonflux .process-detailed-card .process-detailed-title { color: #0f172a !important; } html.theme-cyberlux.theme-neonflux .process-detailed-card .process-detailed-description, html.theme-cyberlux.theme-neonflux .process-detailed-card .process-detailed-list li { color: #475569 !important; } html.theme-cyberlux.theme-neonflux .process-detailed-card .process-detailed-number { color: #b45309 !important; opacity: 0.5 !important; } html.theme-cyberlux.theme-neonflux .process-detailed-card .process-detailed-list li::before { color: #0b3d5c !important; } html.theme-cyberlux.theme-neonflux .advantage-card h3, html.theme-cyberlux.theme-neonflux .advantage-card .advantage-title { color: #0f172a !important; text-shadow: none !important; } html.theme-cyberlux.theme-neonflux .advantage-card p, html.theme-cyberlux.theme-neonflux .advantage-card .advantage-description { color: #475569 !important; text-shadow: none !important; } html.theme-cyberlux.theme-neonflux .process-detailed-grid { gap: 0.65rem !important; } html.theme-cyberlux.theme-neonflux .process-detailed-separator-horizontal { margin: 0.45rem 0 !important; opacity: 0.3 !important; } html.theme-cyberlux.theme-neonflux .timeline-content, html.theme-cyberlux.theme-neonflux .timeline-content h3, html.theme-cyberlux.theme-neonflux .timeline-content p, html.theme-cyberlux.theme-neonflux .timeline-content li { color: #334155 !important; text-shadow: none !important; } html.theme-cyberlux.theme-neonflux .timeline-content h3 { color: #0f172a !important; } /* Canvas host */ #neonflux-canvas-host { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.42; } #williams-sparkle-host { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.85; } html.theme-cyberlux.theme-neonflux .header, html.theme-cyberlux.theme-neonflux main, html.theme-cyberlux.theme-neonflux .footer, html.theme-cyberlux.theme-neonflux .mobile-menu-panel { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { html.theme-cyberlux.theme-neonflux body, html.theme-cyberlux.theme-neonflux body.platform-leads { animation: none !important; } html.theme-cyberlux.theme-neonflux .hero.hero-image-only::before, html.theme-cyberlux.theme-neonflux .hero.hero-image-only::after { animation: none !important; } #neonflux-canvas-host, #williams-sparkle-host { display: none !important; } }