/** * Thème « Cyberlux » — dark premium + accents charte Créatif-Web * (cuivré --color-accent + bleu --color-primary, plus de vert néon) * * ACTIF : * DÉSACT : THEME-CYBERLUX-REVERT.txt */ html.theme-cyberlux { /* Reprise des variables globales déjà définies dans style.css :root */ --cx-accent: var(--color-accent); --cx-accent-dark: var(--color-accent-dark); --cx-accent-light: var(--color-accent-light); --cx-primary: var(--color-primary); --cx-primary-light: var(--color-primary-light); --cx-bg-deep: #050a14; --cx-bg-mid: #0a1424; --cx-panel: color-mix(in srgb, var(--color-primary) 78%, transparent); --cx-panel-border: color-mix(in srgb, var(--color-accent) 32%, transparent); --cx-neon: var(--color-accent); --cx-neon-mid: var(--color-accent-dark); --cx-cyan: var(--color-accent-light); --cx-neon-dim: color-mix(in srgb, var(--color-accent) 18%, transparent); /* Lisibilité : texte clair sur fond sombre (évite le #304466 de platform-premium) */ --cx-text: #f7f9ff; --cx-body: #e2e9f6; --cx-muted: #b6c3d9; --cx-subtle: #94a5be; --cx-ink: var(--color-primary-dark); --cx-glow-soft: color-mix(in srgb, var(--color-accent) 14%, transparent); --cx-grid-line: color-mix(in srgb, var(--color-accent) 7%, transparent); } /* --- Page : fond sombre (tinté bleu marine) + grille --- */ html.theme-cyberlux body { background-color: var(--cx-bg-deep) !important; background-image: radial-gradient(ellipse 120% 70% at 50% -30%, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 55%), radial-gradient(ellipse 60% 45% at 100% 20%, color-mix(in srgb, var(--color-primary-light) 12%, transparent), transparent 50%), radial-gradient(ellipse 50% 40% at 0% 80%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 45%), linear-gradient(var(--cx-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--cx-grid-line) 1px, transparent 1px) !important; background-size: auto, auto, auto, 52px 52px, 52px 52px !important; color: var(--cx-text) !important; } html.theme-cyberlux body.platform-leads { background-color: var(--cx-bg-deep) !important; background-image: radial-gradient(ellipse 120% 70% at 50% -30%, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 55%), radial-gradient(ellipse 60% 45% at 100% 20%, color-mix(in srgb, var(--color-primary-light) 12%, transparent), transparent 50%), radial-gradient(ellipse 50% 40% at 0% 80%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 45%), linear-gradient(var(--cx-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--cx-grid-line) 1px, transparent 1px) !important; background-size: auto, auto, auto, 52px 52px, 52px 52px !important; color: var(--cx-text) !important; } html.theme-cyberlux body.platform-leads::before, html.theme-cyberlux body.platform-leads::after { background: color-mix(in srgb, var(--color-accent) 14%, transparent) !important; filter: blur(72px) !important; } html.theme-cyberlux body { font-family: "Inter", system-ui, -apple-system, sans-serif; } html.theme-cyberlux h1, html.theme-cyberlux h2, html.theme-cyberlux h3, html.theme-cyberlux .hero-title, html.theme-cyberlux .section-title, html.theme-cyberlux .page-hero h1, html.theme-cyberlux .gav-title { color: var(--cx-text) !important; letter-spacing: -0.03em; } html.theme-cyberlux body.platform-leads h1, html.theme-cyberlux body.platform-leads h2, html.theme-cyberlux body.platform-leads h3 { color: var(--cx-text) !important; } html.theme-cyberlux p, html.theme-cyberlux li, html.theme-cyberlux .section-subtitle, html.theme-cyberlux .hero-subtitle, html.theme-cyberlux .gav-description, html.theme-cyberlux .gav-feature-item, html.theme-cyberlux body.platform-leads p, html.theme-cyberlux body.platform-leads li, html.theme-cyberlux body.platform-leads .lead, html.theme-cyberlux body.platform-leads .subtitle { color: var(--cx-body) !important; } html.theme-cyberlux .section-subtitle, html.theme-cyberlux body.platform-leads .subtitle { color: var(--cx-muted) !important; } html.theme-cyberlux 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) { color: var(--cx-accent-light); } html.theme-cyberlux a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-cta):not(.btn-large):hover { color: var(--color-accent-lighter); } html.theme-cyberlux main p { color: var(--cx-body) !important; } /* --- Header --- */ html.theme-cyberlux .header { background: color-mix(in srgb, var(--color-primary) 82%, transparent) !important; backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid var(--cx-panel-border) !important; box-shadow: 0 0 32px color-mix(in srgb, var(--color-accent) 12%, transparent), 0 8px 28px rgba(0, 0, 0, 0.45) !important; } html.theme-cyberlux .header.scrolled { background: color-mix(in srgb, var(--color-primary) 92%, transparent) !important; } html.theme-cyberlux body.platform-leads .header { background: color-mix(in srgb, var(--color-primary) 88%, transparent) !important; border-bottom: 1px solid var(--cx-panel-border) !important; box-shadow: 0 0 28px color-mix(in srgb, var(--color-accent) 14%, transparent) !important; } html.theme-cyberlux .nav-link { color: rgba(255, 255, 255, 0.92) !important; } html.theme-cyberlux .nav-link:hover, html.theme-cyberlux .nav-link.active { color: var(--cx-neon) !important; } html.theme-cyberlux .header-phone-link { color: var(--cx-body) !important; } html.theme-cyberlux .header-phone-link:hover { color: var(--cx-neon) !important; } html.theme-cyberlux .btn-cta { background: linear-gradient(180deg, var(--cx-accent) 0%, var(--cx-accent-dark) 100%) !important; color: var(--cx-ink) !important; border: 1px solid color-mix(in srgb, var(--color-accent) 55%, #ffffff 20%) !important; border-radius: 9999px !important; font-weight: 800 !important; letter-spacing: 0.04em; box-shadow: 0 0 22px color-mix(in srgb, var(--color-accent) 38%, transparent), 0 6px 20px rgba(0, 0, 0, 0.35) !important; } html.theme-cyberlux .btn-cta:hover { filter: brightness(1.08); box-shadow: 0 0 30px color-mix(in srgb, var(--color-accent) 50%, transparent) !important; } html.theme-cyberlux .mobile-menu-toggle span { background-color: var(--cx-text) !important; } /* --- Hero image --- */ html.theme-cyberlux .hero-overlay { background: linear-gradient( 145deg, color-mix(in srgb, var(--color-primary) 92%, transparent) 0%, color-mix(in srgb, var(--color-primary-light) 45%, transparent) 45%, color-mix(in srgb, var(--color-primary) 88%, transparent) 100% ) !important; } html.theme-cyberlux body.platform-leads .hero::after, html.theme-cyberlux body.platform-leads .page-hero::after, html.theme-cyberlux body.platform-leads .contact-hero::after, html.theme-cyberlux body.platform-leads .about-hero::after, html.theme-cyberlux body.platform-leads .method-hero::after, html.theme-cyberlux body.platform-leads .blog-hero::after, html.theme-cyberlux body.platform-leads .sectors-hero::after, html.theme-cyberlux body.platform-leads .pricing-hero::after { background: linear-gradient( 130deg, color-mix(in srgb, var(--color-primary) 85%, transparent) 0%, color-mix(in srgb, var(--color-primary-light) 38%, transparent) 50%, color-mix(in srgb, var(--color-primary) 78%, transparent) 100% ) !important; } /* --- Carte hero --- */ html.theme-cyberlux .hero-content-card { background: var(--cx-panel) !important; border: 1px solid var(--cx-panel-border) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 48px color-mix(in srgb, var(--color-accent) 14%, transparent), 0 24px 64px rgba(0, 0, 0, 0.5) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } html.theme-cyberlux .hero-title, html.theme-cyberlux .hero-content-card .hero-title { color: var(--cx-text) !important; text-shadow: 0 0 40px color-mix(in srgb, var(--color-accent) 18%, transparent); } html.theme-cyberlux .hero-subtitle, html.theme-cyberlux .hero-content-card .hero-subtitle { color: var(--cx-body) !important; } html.theme-cyberlux .hero-subtitle strong, html.theme-cyberlux .hero-content-card .hero-subtitle strong { color: var(--cx-text) !important; } html.theme-cyberlux .hero-content-card strong { color: var(--cx-text) !important; } html.theme-cyberlux .typewriter-cursor { color: var(--cx-neon) !important; } html.theme-cyberlux .hero-badge { background: color-mix(in srgb, var(--color-accent) 16%, transparent) !important; color: var(--cx-neon) !important; border: 1px solid var(--cx-panel-border) !important; } html.theme-cyberlux .hero-lead-strip { background: rgba(4, 12, 24, 0.78) !important; color: var(--cx-body) !important; border: 1px solid var(--cx-panel-border) !important; } html.theme-cyberlux .hero-lead-strip strong { color: var(--cx-text) !important; } html.theme-cyberlux .hero-trust-text { color: rgba(255, 255, 255, 0.96) !important; } /* Pastilles confiance : fond sombre + texte clair (évite blanc sur gris / bleu pastel) */ html.theme-cyberlux .hero-trust-item { background: rgba(8, 16, 32, 0.92) !important; border: 1px solid var(--cx-panel-border) !important; color: var(--cx-body) !important; } html.theme-cyberlux .hero-trust-item svg, html.theme-cyberlux .hero-content-card svg { color: var(--cx-neon) !important; } html.theme-cyberlux .trust-badges { border-top-color: var(--cx-panel-border) !important; } html.theme-cyberlux .trust-badge-item { background: rgba(8, 16, 32, 0.92) !important; color: var(--cx-body) !important; border: 1px solid var(--cx-panel-border) !important; } html.theme-cyberlux .trust-badge-item span { color: var(--cx-body) !important; } html.theme-cyberlux .trust-badge-item svg { color: var(--cx-neon) !important; } html.theme-cyberlux .benefit-item { background: rgba(8, 16, 32, 0.88) !important; border: 1px solid var(--cx-panel-border) !important; } html.theme-cyberlux .benefit-text { color: rgba(255, 255, 255, 0.92) !important; } /* --- Boutons --- */ html.theme-cyberlux .btn, html.theme-cyberlux .btn-large { border-radius: 9999px !important; font-weight: 700 !important; letter-spacing: 0.02em; } html.theme-cyberlux .btn-primary, html.theme-cyberlux body.platform-leads .btn-primary { background: linear-gradient(180deg, var(--cx-accent) 0%, var(--cx-accent-dark) 100%) !important; color: var(--cx-ink) !important; border: 1px solid color-mix(in srgb, var(--color-accent) 50%, #ffffff 25%) !important; box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 35%, transparent), 0 8px 24px rgba(0, 0, 0, 0.35) !important; } html.theme-cyberlux .btn-primary:hover, html.theme-cyberlux body.platform-leads .btn-primary:hover { background: linear-gradient(180deg, var(--cx-accent-light) 0%, var(--cx-accent) 100%) !important; color: var(--cx-ink) !important; transform: translateY(-2px); box-shadow: 0 0 36px color-mix(in srgb, var(--color-accent) 45%, transparent) !important; } html.theme-cyberlux .btn-secondary, html.theme-cyberlux .hero-content-card .btn-secondary, html.theme-cyberlux body.platform-leads .btn-secondary { background: transparent !important; color: var(--cx-neon) !important; border: 2px solid var(--cx-neon) !important; backdrop-filter: none !important; box-shadow: 0 0 20px color-mix(in srgb, var(--color-accent) 12%, transparent) inset, 0 0 24px color-mix(in srgb, var(--color-accent) 10%, transparent) !important; } html.theme-cyberlux .btn-secondary:hover, html.theme-cyberlux .hero-content-card .btn-secondary:hover, html.theme-cyberlux body.platform-leads .btn-secondary:hover { background: color-mix(in srgb, var(--color-accent) 14%, transparent) !important; color: var(--color-accent-lighter) !important; border-color: var(--color-accent-light) !important; } html.theme-cyberlux .cta-card .btn-primary { background: linear-gradient(180deg, var(--cx-accent) 0%, var(--cx-accent-dark) 100%) !important; color: var(--cx-ink) !important; } html.theme-cyberlux .hero-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; } html.theme-cyberlux .hero-cta .btn-large { flex: 1 1 220px; justify-content: center; min-height: 3.1rem; } @media (max-width: 767px) { html.theme-cyberlux .hero-cta { flex-direction: column; align-items: center; gap: 0.55rem; } html.theme-cyberlux .hero-cta .btn-large { flex: 0 0 auto; width: auto; max-width: min(100%, 17.5rem); min-height: 2.55rem; padding-left: 1rem; padding-right: 1rem; font-size: 0.875rem; } html.theme-cyberlux .cta-buttons { flex-direction: column; align-items: center; gap: 0.45rem; } html.theme-cyberlux .cta-buttons .btn-large { flex: 0 0 auto; width: auto; max-width: min(100%, 17.5rem); min-height: 2.55rem; padding-left: 1rem; padding-right: 1rem; font-size: 0.875rem; } /* Tous les .btn-large (hors pleine largeur) — aligné hero / CTA */ html.theme-cyberlux .btn-large:not(.btn-block) { flex: 0 1 auto !important; width: auto !important; max-width: min(100%, 17.5rem) !important; min-width: 0; } html.theme-cyberlux .contact-form .btn-large { max-width: 100% !important; width: 100% !important; } } /* --- Sections platform --- */ /* Exclure .section-alt : fond clair + titres foncés (sinon illisible avec thème néon) */ html.theme-cyberlux body.platform-leads section:not(.hero):not(.section-alt), html.theme-cyberlux body.platform-leads .section:not(.section-alt), html.theme-cyberlux body.platform-leads .content-section, html.theme-cyberlux body.platform-leads .services, html.theme-cyberlux body.platform-leads .why-us, html.theme-cyberlux body.platform-leads .process, html.theme-cyberlux body.platform-leads .faq, html.theme-cyberlux body.platform-leads .testimonials, html.theme-cyberlux body.platform-leads .contact-section, html.theme-cyberlux body.platform-leads .method-section, html.theme-cyberlux body.platform-leads .pricing-section, html.theme-cyberlux body.platform-leads .legal-content, html.theme-cyberlux body.platform-leads .blog-section { background: linear-gradient( 180deg, color-mix(in srgb, var(--color-primary) 72%, transparent) 0%, color-mix(in srgb, var(--color-primary-dark) 88%, transparent) 100% ) !important; border: 1px solid var(--cx-panel-border) !important; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 0 40px color-mix(in srgb, var(--color-accent) 6%, transparent) !important; } html.theme-cyberlux body.platform-leads .service-card, html.theme-cyberlux body.platform-leads .sector-card, html.theme-cyberlux body.platform-leads .why-card, html.theme-cyberlux body.platform-leads .faq-item, html.theme-cyberlux body.platform-leads .contact-card, html.theme-cyberlux body.platform-leads .blog-card, html.theme-cyberlux body.platform-leads .method-card, html.theme-cyberlux body.platform-leads .value-card, html.theme-cyberlux body.platform-leads .expertise-card, html.theme-cyberlux body.platform-leads .zone-card, html.theme-cyberlux body.platform-leads .guarantee-card, html.theme-cyberlux body.platform-leads .process-item, html.theme-cyberlux body.platform-leads .process-detailed, html.theme-cyberlux body.platform-leads .advantage-card, html.theme-cyberlux body.platform-leads .portfolio-card, html.theme-cyberlux body.platform-leads .pricing-card { background: color-mix(in srgb, var(--color-primary) 85%, transparent) !important; border: 1px solid var(--cx-panel-border) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important; } html.theme-cyberlux body.platform-leads .faq-question { color: var(--cx-text) !important; } html.theme-cyberlux body.platform-leads .faq-answer { color: var(--cx-body) !important; } html.theme-cyberlux .section-badge { background: color-mix(in srgb, var(--color-accent) 18%, transparent) !important; color: var(--cx-neon) !important; border: 1px solid var(--cx-panel-border); } html.theme-cyberlux .gav-section { background: transparent !important; } html.theme-cyberlux .gav-description, html.theme-cyberlux .gav-feature-item { color: var(--cx-body) !important; } html.theme-cyberlux .gav-title { color: var(--cx-text) !important; } html.theme-cyberlux .gav-card { background: linear-gradient( 180deg, color-mix(in srgb, var(--color-primary) 68%, transparent) 0%, color-mix(in srgb, var(--color-primary-dark) 82%, transparent) 100% ) !important; border: 1px solid var(--cx-panel-border); border-radius: var(--border-radius-2xl, 1.5rem); padding: clamp(0.75rem, 1.4vw, 1.15rem); box-shadow: 0 0 40px color-mix(in srgb, var(--color-accent) 8%, transparent); } html.theme-cyberlux .gav-badge { background: color-mix(in srgb, var(--color-accent) 18%, transparent) !important; color: var(--cx-neon) !important; } html.theme-cyberlux .gav-feature-item::before { color: var(--cx-neon) !important; } html.theme-cyberlux .gav-image-wrapper { box-shadow: 0 0 32px color-mix(in srgb, var(--color-accent) 18%, transparent), 0 20px 50px rgba(0, 0, 0, 0.5); } html.theme-cyberlux .section-divider { background: linear-gradient(90deg, transparent, var(--cx-panel-border), transparent) !important; } html.theme-cyberlux .footer { background: linear-gradient(180deg, var(--color-primary-dark) 0%, #020509 100%) !important; border-top: 1px solid var(--cx-panel-border) !important; color: var(--cx-muted) !important; } html.theme-cyberlux .footer-title { color: var(--cx-text) !important; } html.theme-cyberlux .footer-link { color: var(--cx-body) !important; } html.theme-cyberlux .footer-link:hover { color: var(--cx-neon) !important; } html.theme-cyberlux .footer-description { color: var(--cx-body) !important; } html.theme-cyberlux .lead-scroll-progress { background: linear-gradient( 90deg, var(--cx-accent) 0%, var(--cx-cyan) 70%, var(--cx-accent-dark) 100% ) !important; box-shadow: 0 0 14px color-mix(in srgb, var(--color-accent) 45%, transparent) !important; } html.theme-cyberlux .skip-link:focus { outline: 2px solid var(--cx-neon); outline-offset: 2px; } html.theme-cyberlux input, html.theme-cyberlux textarea, html.theme-cyberlux select { background: color-mix(in srgb, var(--color-primary) 90%, transparent) !important; border: 1px solid var(--cx-panel-border) !important; color: var(--cx-text) !important; } html.theme-cyberlux input::placeholder, html.theme-cyberlux textarea::placeholder { color: color-mix(in srgb, var(--cx-muted) 65%, transparent); } @media (prefers-reduced-motion: reduce) { html.theme-cyberlux .btn-primary:hover, html.theme-cyberlux .btn-secondary:hover, html.theme-cyberlux .btn-cta:hover { transform: none; } } html.theme-cyberlux .countdown-card { background: linear-gradient( 135deg, color-mix(in srgb, var(--color-primary) 88%, transparent) 0%, color-mix(in srgb, var(--color-primary-dark) 94%, transparent) 100% ) !important; border: 1px solid var(--cx-panel-border) !important; box-shadow: 0 0 36px color-mix(in srgb, var(--color-accent) 12%, transparent) !important; } html.theme-cyberlux .countdown-card-title, html.theme-cyberlux .countdown-number { color: var(--cx-text) !important; } html.theme-cyberlux .countdown-card-text, html.theme-cyberlux .countdown-label { color: var(--cx-body) !important; } html.theme-cyberlux .countdown-timer-card { background: color-mix(in srgb, var(--color-accent) 8%, transparent) !important; border: 1px solid var(--cx-panel-border) !important; } @media (max-width: 1024px) { html.theme-cyberlux .mobile-menu-panel { background: color-mix(in srgb, var(--color-primary) 94%, transparent) !important; border-bottom: 1px solid var(--cx-panel-border) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55) !important; } html.theme-cyberlux .mobile-menu-panel .nav-link { color: var(--cx-text) !important; border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 10%, transparent); } } /* --- Lisibilité globale dans les cartes / contenus longs --- */ html.theme-cyberlux body.platform-leads main .pricing-card-description, html.theme-cyberlux body.platform-leads main .pricing-card-list li, html.theme-cyberlux body.platform-leads main .process-description, html.theme-cyberlux body.platform-leads main .method-intro-content p, html.theme-cyberlux body.platform-leads main .method-intro-content li, html.theme-cyberlux body.platform-leads main .legal-content p, html.theme-cyberlux body.platform-leads main .legal-content li, html.theme-cyberlux body.platform-leads main .blog-card .blog-excerpt, html.theme-cyberlux body.platform-leads main .blog-card p, html.theme-cyberlux body.platform-leads main .service-card p, html.theme-cyberlux body.platform-leads main .sector-card p, html.theme-cyberlux body.platform-leads main .why-card p, html.theme-cyberlux body.platform-leads main .contact-card p, html.theme-cyberlux body.platform-leads main .portfolio-card p { color: var(--cx-body) !important; } html.theme-cyberlux body.platform-leads main label, html.theme-cyberlux body.platform-leads main .form-group label, html.theme-cyberlux body.platform-leads main td, html.theme-cyberlux body.platform-leads main th { color: var(--cx-body) !important; } html.theme-cyberlux .cta-guarantee { background: color-mix(in srgb, var(--color-accent) 14%, transparent) !important; color: var(--cx-body) !important; border: 1px solid var(--cx-panel-border) !important; } html.theme-cyberlux .cta-guarantee svg { color: var(--cx-neon) !important; }