/* ═══════════════════════════════════════════════════════════════════ ENTERPRISE-LANDING.CSS — AlphaVault AI Soft Navy Blue · Lustre · Glassmorphism Ultra Pro — v3.0 ═══════════════════════════════════════════════════════════════════ */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. DESIGN TOKENS — NAVY / PLATINUM / LUSTRE PALETTE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ :root { /* ─ Navy Scale ─ */ --nv-950: #060e1f; --nv-900: #0a1628; --nv-800: #0f2554; --nv-700: #1e3a8a; --nv-600: #1d4ed8; --nv-500: #2563eb; --nv-400: #3b82f6; --nv-300: #60a5fa; --nv-200: #93c5fd; --nv-100: #dbeafe; --nv-50: #eff6ff; --nv-25: #f5f8ff; /* ─ Platinum / Silver Scale ─ */ --pt-900: #0f172a; --pt-800: #1e293b; --pt-700: #334155; --pt-600: #475569; --pt-500: #64748b; --pt-400: #94a3b8; --pt-300: #cbd5e1; --pt-200: #e2e8f0; --pt-100: #f1f5f9; --pt-50: #f8faff; /* ─ Accents ─ */ --ac-indigo: #4f46e5; --ac-violet: #7c3aed; --ac-green: #10b981; --ac-gold: #f59e0b; --ac-cyan: #06b6d4; /* ─ Glassmorphism Ultra Pro ─ */ --glass-white: rgba(255, 255, 255, 0.72); --glass-white-2: rgba(255, 255, 255, 0.88); --glass-navy: rgba(239, 246, 255, 0.65); --glass-border: rgba(148, 163, 184, 0.18); --glass-border-nv: rgba(37, 99, 235, 0.14); --glass-border-lux: rgba(255, 255, 255, 0.55); --glass-blur: blur(28px) saturate(180%); --glass-blur-light: blur(16px) saturate(150%); --glass-blur-heavy: blur(40px) saturate(200%); /* ─ Lustre / Shine ─ */ --shine-overlay: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.00) 100%); --shine-subtle: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.00) 60%); /* ─ Shadows Ultra ─ */ --sh-xs: 0 1px 4px rgba(10, 22, 40, 0.06); --sh-sm: 0 2px 12px rgba(10, 22, 40, 0.08); --sh-md: 0 8px 32px rgba(10, 22, 40, 0.10); --sh-lg: 0 20px 56px rgba(10, 22, 40, 0.13); --sh-nv: 0 8px 40px rgba(30, 58, 138, 0.13), 0 2px 8px rgba(37, 99, 235, 0.08), 0 0 0 1px rgba(37, 99, 235, 0.06); --sh-nv-lg: 0 24px 64px rgba(30, 58, 138, 0.18), 0 8px 24px rgba(37, 99, 235, 0.10), 0 0 0 1px rgba(37, 99, 235, 0.10); --sh-lux: 0 4px 24px rgba(37, 99, 235, 0.12), 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 -1px 0 rgba(37, 99, 235, 0.06) inset; --sh-glow: 0 0 32px rgba(37, 99, 235, 0.20), 0 0 8px rgba(37, 99, 235, 0.10); /* ─ Gradients Ultra Pro ─ */ --grad-navy: linear-gradient(135deg, var(--nv-500), var(--ac-indigo)); --grad-navy-deep: linear-gradient(150deg, var(--nv-800), var(--nv-600), var(--ac-indigo)); --grad-navy-soft: linear-gradient(135deg, #e0eaff 0%, #eef2ff 50%, #f0f4ff 100%); --grad-platinum: linear-gradient(135deg, var(--pt-400), var(--pt-300)); --grad-lux: linear-gradient(135deg, #e8f0fe 0%, #ede9fe 50%, #e0f2fe 100%); --grad-hero-bg: linear-gradient(160deg, #eaf1ff 0%, #e8edff 25%, #eef2ff 50%, #e6f0ff 75%, #f4f7ff 100%); /* ─ Transitions ─ */ --tr-fast: all 0.20s cubic-bezier(0.4, 0, 0.2, 1); --tr-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); --tr-spring: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 2. MODE HIDDEN ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .mode-hidden { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 3. BODY ENTERPRISE — FLEX ORDER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Ordre visuel enterprise : nav(1) › hero(2) › value(3) › features(4) › tech-infra(5) › tools(6) › pricing(7) [EN DERNIER] › cta(8) › footer(9) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ body.mode-enterprise { display: flex; flex-direction: column; min-height: 100vh; background: var(--grad-hero-bg); position: relative; } /* Bruit de fond subtil pour la profondeur */ body.mode-enterprise::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 1200px 800px at 0% 0%, rgba(37, 99, 235, 0.04) 0%, transparent 70%), radial-gradient(ellipse 900px 600px at 100% 100%, rgba(99, 102, 241, 0.04) 0%, transparent 70%), radial-gradient(ellipse 600px 400px at 50% 50%, rgba(6, 182, 212, 0.02) 0%, transparent 70%); pointer-events: none; z-index: 0; } body.mode-enterprise > * { width: 100%; flex-shrink: 0; box-sizing: border-box; position: relative; z-index: 1; } /* Éléments invisibles */ body.mode-enterprise > script, body.mode-enterprise > noscript, body.mode-enterprise > .seo-content-block { order: 0; } /* Navigation */ body.mode-enterprise > .landing-nav { order: 1; } /* Sections enterprise */ body.mode-enterprise > .enterprise-hero { order: 2; } body.mode-enterprise > .enterprise-value-section { order: 3; } body.mode-enterprise > .enterprise-features-section { order: 4; } /* Sections partagées */ body.mode-enterprise > .tech-infra-lux { order: 5; } body.mode-enterprise > .tools-section { order: 6; } /* ★ PRICING EN DERNIER avant CTA ★ */ body.mode-enterprise > .enterprise-pricing-section { order: 7; } /* Sections finales */ body.mode-enterprise > .enterprise-cta-section { order: 8; } body.mode-enterprise > .enterprise-footer { order: 9; } /* Sections cachées */ body.mode-enterprise > .mode-hidden { display: none !important; order: -1; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 4. TOGGLE — PILL CENTRÉ GLASSMORPHISM ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .hero-mode-toggle { display: flex; align-items: center; justify-content: center; gap: 4px; width: fit-content; margin: 0 auto 36px; padding: 5px; background: rgba(255, 255, 255, 0.16); backdrop-filter: var(--glass-blur-light); -webkit-backdrop-filter: var(--glass-blur-light); border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 50px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10), 0 1px 0 rgba(255, 255, 255, 0.55) inset; position: relative; z-index: 10; } body.mode-enterprise .hero-mode-toggle { background: rgba(255, 255, 255, 0.82); border: 1px solid var(--glass-border-lux); box-shadow: var(--sh-lux); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .hero-mode-toggle-btn { display: flex; align-items: center; gap: 8px; padding: 10px 22px; border: none; border-radius: 40px; font-size: 0.875rem; font-weight: 650; cursor: pointer; transition: var(--tr-smooth); white-space: nowrap; background: transparent; color: rgba(255, 255, 255, 0.65); letter-spacing: 0.2px; user-select: none; position: relative; overflow: hidden; } .hero-mode-toggle-btn::after { content: ''; position: absolute; inset: 0; background: var(--shine-subtle); opacity: 0; transition: opacity 0.3s ease; border-radius: 40px; } .hero-mode-toggle-btn:hover::after { opacity: 1; } .hero-mode-toggle-btn i { font-size: 0.8rem; } .hero-mode-toggle-btn.individual-toggle-btn.active { background: rgba(255, 255, 255, 0.97); color: var(--pt-800); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 1) inset; } .hero-mode-toggle-btn.enterprise-toggle-btn.active { background: var(--grad-navy); color: #ffffff; box-shadow: 0 4px 18px rgba(37, 99, 235, 0.44), 0 0 0 1px rgba(37, 99, 235, 0.20); } .hero-mode-toggle-btn:not(.active):hover { background: rgba(255, 255, 255, 0.20); color: rgba(255, 255, 255, 0.92); } body.mode-enterprise .hero-mode-toggle-btn { color: var(--pt-500); } body.mode-enterprise .hero-mode-toggle-btn.individual-toggle-btn.active { background: rgba(255, 255, 255, 0.98); color: var(--pt-800); box-shadow: var(--sh-sm); } body.mode-enterprise .hero-mode-toggle-btn.enterprise-toggle-btn.active { background: linear-gradient(135deg, var(--nv-500), var(--ac-indigo)); color: #fff; box-shadow: 0 4px 20px rgba(37, 99, 235, 0.40), 0 0 0 1px rgba(79, 70, 229, 0.15); } body.mode-enterprise .hero-mode-toggle-btn:not(.active):hover { background: var(--nv-50); color: var(--nv-500); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 5. NAV — OVERRIDES MODE ENTERPRISE + LINKS ENTERPRISE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ body.mode-enterprise .landing-nav { background: rgba(255, 255, 255, 0.82); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--glass-border-lux); box-shadow: 0 2px 20px rgba(30, 58, 138, 0.07), 0 1px 0 rgba(255, 255, 255, 0.9) inset; } body.mode-enterprise .landing-nav.scrolled { background: rgba(255, 255, 255, 0.96); backdrop-filter: var(--glass-blur-heavy); -webkit-backdrop-filter: var(--glass-blur-heavy); border-bottom-color: rgba(37, 99, 235, 0.18); box-shadow: 0 4px 36px rgba(30, 58, 138, 0.10), 0 1px 0 rgba(255, 255, 255, 1) inset; } /* Masquer liens individuels en mode enterprise */ body.mode-enterprise .individual-nav-link { display: none !important; } /* Masquer liens enterprise en mode individual */ .enterprise-nav-link { display: none; } /* Afficher liens enterprise en mode enterprise */ body.mode-enterprise .enterprise-nav-link { display: inline-flex; align-items: center; gap: 5px; } body.mode-enterprise .nav-link { color: var(--pt-600); font-weight: 620; position: relative; display: inline-flex; /* ✅ identique landing.css */ align-items: center; border-radius: 10px; /* ✅ --radius-md de landing.css */ } body.mode-enterprise .nav-link::after { content: ''; position: absolute; bottom: 4px; /* ✅ identique landing.css (pas -3px) */ left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--grad-navy); /* ✅ couleur enterprise conservée */ border-radius: 9999px; /* ✅ identique --radius-full landing.css */ transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* ✅ même easing */ } body.mode-enterprise .nav-link:hover { color: var(--nv-500); background: rgba(37, 99, 235, 0.06); /* ✅ même pattern rgba landing.css, couleur navy */ } body.mode-enterprise .nav-link:hover::after { width: 60%; /* ✅ identique landing.css (60%, pas 100%) */ } body.mode-enterprise .brand-name { color: var(--pt-700) !important; opacity: 0.88 !important; } body.mode-enterprise .btn-primary-nav { background: linear-gradient(135deg, var(--nv-500), var(--ac-indigo)); box-shadow: 0 4px 16px rgba(37, 99, 235, 0.28), 0 1px 0 rgba(255, 255, 255, 0.25) inset; border-radius: 10px; } body.mode-enterprise .btn-primary-nav:hover { background: linear-gradient(135deg, var(--nv-600), #4338ca); box-shadow: 0 8px 24px rgba(37, 99, 235, 0.42), 0 0 0 3px rgba(37, 99, 235, 0.12); transform: translateY(-1px); } body.mode-enterprise .btn-text { color: var(--pt-600); } body.mode-enterprise .btn-text:hover { color: var(--nv-500); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 6. ENTERPRISE HERO — GLASSMORPHISM ULTRA PRO ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .enterprise-hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #eaf2ff 0%, #e8edff 28%, #edf2ff 52%, #e5eeff 78%, #f2f5ff 100%); overflow: hidden; padding: 120px 24px 80px; } /* Couche de profondeur lumineuse */ .enterprise-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 1100px 750px at 8% 10%, rgba(37, 99, 235, 0.10) 0%, transparent 65%), radial-gradient(ellipse 800px 600px at 92% 82%, rgba(79, 70, 229, 0.09) 0%, transparent 65%), radial-gradient(ellipse 550px 400px at 48% 48%, rgba(96, 165, 250, 0.07) 0%, transparent 65%), radial-gradient(ellipse 400px 300px at 20% 80%, rgba(6, 182, 212, 0.05) 0%, transparent 65%); pointer-events: none; animation: heroAmbient 12s ease-in-out infinite alternate; } @keyframes heroAmbient { 0% { opacity: 0.8; } 100% { opacity: 1.0; } } /* Couche shine supérieure */ .enterprise-hero::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.00) 100%); pointer-events: none; } /* Grid pattern subtil */ .enterprise-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(37, 99, 235, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 99, 235, 0.04) 1px, transparent 1px); background-size: 52px 52px; pointer-events: none; mask-image: linear-gradient(180deg, transparent 0%, black 15%, black 85%, transparent 100%); } .enterprise-hero-container { position: relative; z-index: 2; max-width: 940px; margin: 0 auto; text-align: center; } /* Eyebrow */ .enterprise-hero-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 0.74rem; font-weight: 750; letter-spacing: 2.5px; text-transform: uppercase; color: var(--nv-500); background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(37, 99, 235, 0.18); padding: 9px 22px; border-radius: 50px; margin-bottom: 28px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--sh-lux), var(--sh-glow); } .enterprise-hero-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nv-500); box-shadow: 0 0 8px rgba(37, 99, 235, 0.6); animation: nvPulse 2.2s ease-in-out infinite; } @keyframes nvPulse { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px rgba(37, 99, 235, 0.6); } 50% { opacity: 0.45; transform: scale(1.55); box-shadow: 0 0 16px rgba(37, 99, 235, 0.4); } } /* Title */ .enterprise-hero-title { font-size: clamp(2rem, 5.5vw, 4.1rem); font-weight: 900; color: var(--nv-800); line-height: 1.07; margin-bottom: 22px; letter-spacing: -0.027em; } .ep-gradient { background: linear-gradient(135deg, var(--nv-500) 0%, var(--ac-indigo) 45%, var(--ac-violet) 80%, var(--ac-cyan) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% 200%; animation: gradShift 6s ease infinite; } @keyframes gradShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Sub */ .enterprise-hero-sub { font-size: clamp(1rem, 2vw, 1.18rem); color: var(--pt-500); max-width: 700px; margin: 0 auto 42px; line-height: 1.75; font-weight: 450; } /* CTAs */ .enterprise-hero-ctas { display: flex; flex-direction: row; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 60px; } /* Stats strip glassmorphism */ .enterprise-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 840px; margin: 0 auto; background: rgba(255, 255, 255, 0.78); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border-lux); border-radius: 28px; box-shadow: var(--sh-nv), 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 0 0 1px rgba(37, 99, 235, 0.05); overflow: hidden; position: relative; } .enterprise-hero-stats::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.00) 100%); pointer-events: none; border-radius: 28px 28px 0 0; } .ep-stat-item { text-align: center; padding: 34px 22px; border-right: 1px solid rgba(226, 232, 240, 0.7); transition: background 0.28s ease, transform 0.28s ease; position: relative; } .ep-stat-item:last-child { border-right: none; } .ep-stat-item:hover { background: rgba(239, 246, 255, 0.75); } .ep-stat-number { font-size: clamp(1.5rem, 2.8vw, 2.3rem); font-weight: 900; background: linear-gradient(135deg, var(--nv-500), var(--ac-indigo)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-bottom: 8px; letter-spacing: -0.025em; } .ep-stat-label { font-size: 0.77rem; color: var(--pt-400); line-height: 1.5; font-weight: 560; } /* ─── Buttons EP — Lustré ─── */ .btn-ep-primary { display: inline-flex; align-items: center; gap: 10px; padding: 13px 28px; background: linear-gradient(135deg, var(--nv-500), var(--ac-indigo)); color: #ffffff; border: none; border-radius: 12px; font-size: 0.92rem; font-weight: 700; cursor: pointer; transition: var(--tr-smooth); box-shadow: 0 6px 24px rgba(37, 99, 235, 0.34), 0 1px 0 rgba(255, 255, 255, 0.28) inset; letter-spacing: 0.2px; white-space: nowrap; position: relative; overflow: hidden; } .btn-ep-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent); transition: left 0.5s ease; } .btn-ep-primary:hover::before { left: 100%; } .btn-ep-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(37, 99, 235, 0.48), 0 0 0 3px rgba(37, 99, 235, 0.14), 0 1px 0 rgba(255, 255, 255, 0.30) inset; background: linear-gradient(135deg, var(--nv-600), #4338ca); } .btn-ep-secondary { display: inline-flex; align-items: center; gap: 10px; padding: 13px 28px; background: rgba(255, 255, 255, 0.82); color: var(--pt-800); border: 1.5px solid var(--glass-border-lux); border-radius: 12px; font-size: 0.92rem; font-weight: 700; cursor: pointer; transition: var(--tr-smooth); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); white-space: nowrap; box-shadow: var(--sh-sm), 0 1px 0 rgba(255, 255, 255, 0.9) inset; } .btn-ep-secondary:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.98); border-color: rgba(37, 99, 235, 0.32); box-shadow: var(--sh-nv), 0 1px 0 rgba(255, 255, 255, 1) inset; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 7. ENTERPRISE VALUE — GLASSMORPHISM ULTRA ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .enterprise-value-section { padding: 108px 24px; background: linear-gradient(180deg, rgba(240, 246, 255, 0.95) 0%, rgba(255, 255, 255, 0.90) 50%, rgba(242, 247, 255, 0.95) 100%); position: relative; overflow: hidden; } /* Blob décoratif */ .enterprise-value-section::after { content: ''; position: absolute; top: -80px; right: -80px; width: 450px; height: 450px; background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } /* Separator line shared */ .enterprise-value-section::before, .enterprise-features-section::before, .enterprise-pricing-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.22), rgba(99, 102, 241, 0.16), transparent); } .ev-container { max-width: 1200px; margin: 0 auto; } .ev-header { text-align: center; margin-bottom: 64px; } /* Section tags */ .ev-tag, .ef-tag, .ep-tag { display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 760; letter-spacing: 2.5px; text-transform: uppercase; color: var(--nv-500); background: rgba(255, 255, 255, 0.80); border: 1px solid rgba(37, 99, 235, 0.18); padding: 7px 20px; border-radius: 50px; margin-bottom: 18px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08), 0 1px 0 rgba(255, 255, 255, 0.9) inset; } /* Section titles */ .ev-title, .ef-title, .ep-title { font-size: clamp(1.8rem, 4vw, 3.1rem); font-weight: 900; color: var(--nv-800); line-height: 1.11; margin-bottom: 14px; letter-spacing: -0.027em; } .ev-title span { background: linear-gradient(135deg, var(--nv-500), var(--ac-violet)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ev-description, .ef-subtitle, .ep-subtitle { font-size: 1.02rem; color: var(--pt-500); max-width: 590px; margin: 0 auto; line-height: 1.75; } /* Replace grid */ .replace-grid { display: grid; grid-template-columns: 1fr 88px 1fr; gap: 28px; align-items: center; margin-bottom: 56px; } .replace-old, .replace-new { display: flex; flex-direction: column; gap: 10px; } /* Old items — glass card */ .replace-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: rgba(248, 250, 252, 0.80); border: 1px solid rgba(226, 232, 240, 0.70); border-radius: 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: var(--tr-smooth); box-shadow: 0 1px 4px rgba(10, 22, 40, 0.05); } .replace-item .r-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(239, 68, 68, 0.08); border-radius: 9px; color: #ef4444; font-size: 0.85rem; flex-shrink: 0; } .replace-item > span:nth-child(2) { flex: 1; font-size: 0.855rem; font-weight: 600; color: var(--pt-500); } .r-cost { font-size: 0.74rem; font-weight: 750; color: #ef4444; background: rgba(239, 68, 68, 0.07); padding: 3px 9px; border-radius: 7px; white-space: nowrap; } /* Arrow */ .replace-arrow-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .replace-arrow-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--grad-navy); border-radius: 50%; color: #ffffff; font-size: 1rem; box-shadow: 0 6px 22px rgba(37, 99, 235, 0.34), 0 0 0 4px rgba(37, 99, 235, 0.10), 0 1px 0 rgba(255, 255, 255, 0.30) inset; flex-shrink: 0; position: relative; overflow: hidden; } .replace-arrow-icon::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: rgba(255, 255, 255, 0.15); border-radius: 50% 50% 0 0; } .replace-arrow-label { font-size: 0.66rem; font-weight: 760; color: var(--pt-400); text-align: center; letter-spacing: 0.5px; text-transform: uppercase; line-height: 1.5; } /* New items — glass premium */ .replace-new-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: rgba(239, 246, 255, 0.70); border: 1px solid rgba(147, 197, 253, 0.35); border-radius: 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: var(--tr-smooth); box-shadow: 0 1px 6px rgba(37, 99, 235, 0.06), 0 1px 0 rgba(255, 255, 255, 0.70) inset; position: relative; overflow: hidden; } .replace-new-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.20), transparent); } .replace-new-item:hover { background: rgba(239, 246, 255, 0.92); border-color: rgba(37, 99, 235, 0.28); transform: translateX(5px); box-shadow: var(--sh-nv); } .replace-new-item .r-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(37, 99, 235, 0.09); border-radius: 9px; color: var(--nv-500); font-size: 0.85rem; flex-shrink: 0; } .replace-new-item > span:nth-child(2) { flex: 1; font-size: 0.855rem; font-weight: 650; color: var(--pt-800); } .r-check { color: var(--ac-green); font-size: 1.05rem; } /* Savings callout — glassmorphism premium */ .savings-callout { text-align: center; padding: 52px 56px; background: rgba(255, 255, 255, 0.78); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border-lux); border-radius: 28px; box-shadow: var(--sh-nv), 0 1px 0 rgba(255, 255, 255, 0.95) inset; position: relative; overflow: hidden; } .savings-callout::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--nv-400), var(--ac-indigo), var(--ac-violet), var(--ac-cyan)); border-radius: 28px 28px 0 0; } .savings-callout::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 55%; background: var(--shine-overlay); pointer-events: none; border-radius: 28px 28px 0 0; } .savings-callout h3 { font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 900; color: var(--nv-800); margin-bottom: 10px; letter-spacing: -0.022em; position: relative; z-index: 1; } .savings-highlight { background: linear-gradient(135deg, var(--nv-500), var(--ac-violet)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .savings-callout p { color: var(--pt-500); font-size: 1rem; line-height: 1.68; position: relative; z-index: 1; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 8. ENTERPRISE FEATURES — 4 PILLARS GLASSMORPHISM ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .enterprise-features-section { padding: 108px 24px; background: linear-gradient(180deg, rgba(245, 248, 255, 0.95) 0%, rgba(255, 255, 255, 0.88) 50%, rgba(240, 246, 255, 0.95) 100%); position: relative; overflow: hidden; } .enterprise-features-section::after { content: ''; position: absolute; bottom: -120px; left: -80px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(99, 102, 241, 0.05) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .ef-container { max-width: 1220px; margin: 0 auto; } .ef-header { text-align: center; margin-bottom: 60px; } /* Features 2-col grid */ .ef-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } /* Card glassmorphism ultra */ .ef-card { position: relative; background: rgba(255, 255, 255, 0.76); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border-lux); border-radius: 24px; padding: 38px; transition: var(--tr-smooth); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 24px rgba(10, 22, 40, 0.07), 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 -1px 0 rgba(37, 99, 235, 0.04) inset; } /* Gradient top border */ .ef-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--ef-gradient, var(--grad-navy)); border-radius: 24px 24px 0 0; } /* Shine overlay top */ .ef-card::after { content: attr(data-num); position: absolute; top: 18px; right: 22px; font-size: 5.5rem; font-weight: 900; color: rgba(37, 99, 235, 0.038); line-height: 1; pointer-events: none; user-select: none; font-style: italic; } .ef-card:hover { transform: translateY(-8px); box-shadow: var(--sh-nv-lg), 0 1px 0 rgba(255, 255, 255, 1) inset; border-color: rgba(147, 197, 253, 0.50); background: rgba(255, 255, 255, 0.94); } .ef-icon { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; background: var(--ef-icon-bg, rgba(37, 99, 235, 0.08)); border-radius: 15px; font-size: 1.35rem; color: var(--ef-icon-color, var(--nv-400)); margin-bottom: 20px; transition: var(--tr-spring); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08), 0 1px 0 rgba(255, 255, 255, 0.6) inset; } .ef-card:hover .ef-icon { transform: scale(1.14) rotate(-6deg); box-shadow: 0 6px 18px rgba(37, 99, 235, 0.14), 0 1px 0 rgba(255, 255, 255, 0.7) inset; } .ef-card h3 { font-size: 1.1rem; font-weight: 800; color: var(--nv-800); margin-bottom: 10px; letter-spacing: -0.012em; } .ef-card p { font-size: 0.89rem; color: var(--pt-500); line-height: 1.68; margin-bottom: 18px; } .ef-features-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; margin-top: auto; } .ef-features-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.84rem; color: var(--pt-600); font-weight: 540; line-height: 1.48; } .ef-features-list li i { color: var(--ac-green); margin-top: 2px; flex-shrink: 0; font-size: 0.76rem; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 9. ENTERPRISE PRICING — EN DERNIER, GLASSMORPHISM ULTRA ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .volume-calculator { display: none !important; } .ep-savings-badge { display: none !important; } .enterprise-pricing-section { padding: 108px 24px; background: linear-gradient(180deg, rgba(238, 245, 255, 0.96) 0%, rgba(243, 247, 255, 0.92) 50%, rgba(237, 242, 255, 0.96) 100%); position: relative; overflow: hidden; } .enterprise-pricing-section::after { content: ''; position: absolute; top: 50%; right: -100px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(79, 70, 229, 0.05) 0%, transparent 70%); border-radius: 50%; pointer-events: none; transform: translateY(-50%); } .ep-container { max-width: 1300px; margin: 0 auto; } .ep-header { text-align: center; margin-bottom: 44px; } /* Cost banner — glassmorphism */ .ep-cost-banner { background: rgba(255, 255, 255, 0.80); backdrop-filter: var(--glass-blur-light); -webkit-backdrop-filter: var(--glass-blur-light); border: 1px solid var(--glass-border-lux); border-radius: 16px; padding: 18px 32px; text-align: center; font-size: 0.9rem; color: var(--pt-500); margin: 0 auto 44px; font-weight: 520; line-height: 1.68; max-width: 720px; box-shadow: var(--sh-sm), 0 1px 0 rgba(255, 255, 255, 0.9) inset; } .ep-cost-banner strong { color: var(--nv-800); font-weight: 800; } .ep-cost-vs { display: block; margin-top: 7px; background: linear-gradient(135deg, var(--nv-500), var(--ac-violet)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 800; font-size: 1.04rem; } /* Cards grid */ .ep-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 52px; align-items: stretch; } /* Card glassmorphism */ .ep-card { position: relative; background: rgba(255, 255, 255, 0.76); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border-lux); border-radius: 22px; padding: 28px 22px; transition: var(--tr-smooth); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 4px 20px rgba(10, 22, 40, 0.07), 0 1px 0 rgba(255, 255, 255, 0.95) inset; } /* Lustre supérieur sur card */ .ep-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 45%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.00) 100%); pointer-events: none; border-radius: 22px 22px 0 0; } .ep-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--ep-accent, var(--grad-platinum)); border-radius: 22px 22px 0 0; z-index: 1; } .ep-card:hover { transform: translateY(-8px); box-shadow: var(--sh-nv-lg), 0 1px 0 rgba(255, 255, 255, 1) inset; border-color: rgba(147, 197, 253, 0.55); background: rgba(255, 255, 255, 0.96); } /* Popular card */ .ep-card.ep-popular { border-color: rgba(99, 102, 241, 0.25); background: linear-gradient(180deg, rgba(240, 243, 255, 0.92) 0%, rgba(246, 244, 255, 0.92) 100%); box-shadow: 0 8px 36px rgba(99, 102, 241, 0.13), 0 0 0 1px rgba(99, 102, 241, 0.16), 0 1px 0 rgba(255, 255, 255, 0.95) inset; } .ep-card.ep-popular:hover { transform: translateY(-10px); box-shadow: 0 28px 64px rgba(99, 102, 241, 0.22), 0 0 0 1px rgba(99, 102, 241, 0.28), 0 0 32px rgba(99, 102, 241, 0.12), 0 1px 0 rgba(255, 255, 255, 1) inset; } /* Card header */ .ep-card-header { margin-bottom: 20px; position: relative; z-index: 1; } .ep-popular-label { display: inline-flex; align-items: center; font-size: 0.66rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ac-indigo); background: rgba(99, 102, 241, 0.08); border: 1px solid rgba(99, 102, 241, 0.18); padding: 4px 10px; border-radius: 50px; margin-bottom: 10px; } .ep-card-name { font-size: 1.14rem; font-weight: 800; color: var(--nv-800); margin-bottom: 5px; letter-spacing: -0.012em; } .ep-card-desc { font-size: 0.81rem; color: var(--pt-400); line-height: 1.48; } /* Price block */ .ep-price-block { margin-bottom: 18px; position: relative; z-index: 1; } .ep-price-row { display: flex; align-items: baseline; gap: 3px; } .ep-currency { font-size: 1.1rem; font-weight: 800; color: var(--nv-800); } .ep-amount { font-size: 2.6rem; font-weight: 900; color: var(--nv-800); line-height: 1; letter-spacing: -0.04em; } .ep-unit { font-size: 0.77rem; color: var(--pt-400); font-weight: 530; margin-left: 2px; } .ep-custom { font-size: 2.1rem; font-weight: 900; background: linear-gradient(135deg, var(--ac-gold), var(--ac-violet)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 4px; } .ep-total { font-size: 0.82rem; color: var(--pt-400); margin-top: 4px; } /* Divider */ .ep-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(203, 213, 225, 0.70), transparent); margin: 16px 0; position: relative; z-index: 1; } /* Features list */ .ep-features { list-style: none; padding: 0; margin: 0 0 18px 0; flex: 1; display: flex; flex-direction: column; gap: 7px; position: relative; z-index: 1; } .ep-features li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.82rem; color: var(--pt-500); font-weight: 540; line-height: 1.45; } .ep-features li i { color: var(--ac-green); margin-top: 2px; flex-shrink: 0; font-size: 0.76rem; } .ep-features li strong { color: var(--pt-800); font-weight: 700; } /* CTA */ .ep-cta-wrapper { margin-top: auto; position: relative; z-index: 1; } .ep-cta-btn { width: 100%; padding: 13px 18px; background: rgba(255, 255, 255, 0.80); color: var(--nv-500); border: 1.5px solid rgba(37, 99, 235, 0.22); border-radius: 11px; font-size: 0.875rem; font-weight: 700; cursor: pointer; transition: var(--tr-smooth); display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 7px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 4px rgba(10, 22, 40, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9) inset; } .ep-cta-btn:hover { background: rgba(239, 246, 255, 0.90); border-color: var(--nv-500); transform: translateY(-2px); box-shadow: var(--sh-nv), 0 1px 0 rgba(255, 255, 255, 1) inset; } .ep-cta-btn.ep-cta-filled { background: linear-gradient(135deg, var(--ac-indigo), var(--ac-violet)); color: #ffffff; border: none; box-shadow: 0 6px 24px rgba(79, 70, 229, 0.34), 0 1px 0 rgba(255, 255, 255, 0.22) inset; } .ep-cta-btn.ep-cta-filled:hover { background: linear-gradient(135deg, #4338ca, #6d28d9); box-shadow: 0 12px 32px rgba(79, 70, 229, 0.46), 0 0 0 3px rgba(79, 70, 229, 0.14), 0 1px 0 rgba(255, 255, 255, 0.22) inset; transform: translateY(-2px); } .ep-cta-btn.ep-cta-enterprise { background: linear-gradient(135deg, var(--ac-gold), var(--ac-violet)); color: #ffffff; border: none; box-shadow: 0 6px 22px rgba(139, 92, 246, 0.26), 0 1px 0 rgba(255, 255, 255, 0.20) inset; } .ep-cta-btn.ep-cta-enterprise:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(139, 92, 246, 0.40), 0 0 0 3px rgba(245, 158, 11, 0.14); } .ep-cta-hint { font-size: 0.73rem; color: var(--pt-400); text-align: center; font-weight: 530; } /* Add-ons glassmorphism */ .ep-addons { background: rgba(255, 255, 255, 0.76); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border-lux); border-radius: 24px; padding: 40px 44px; margin-bottom: 36px; box-shadow: var(--sh-nv), 0 1px 0 rgba(255, 255, 255, 0.95) inset; position: relative; overflow: hidden; } .ep-addons::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--nv-300), var(--ac-indigo), var(--ac-cyan)); border-radius: 24px 24px 0 0; } .ep-addons::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: var(--shine-subtle); pointer-events: none; border-radius: 24px 24px 0 0; } .ep-addons-header { margin-bottom: 22px; } .ep-addons-title { font-size: 1.06rem; font-weight: 800; color: var(--nv-800); display: flex; align-items: center; gap: 10px; margin-bottom: 5px; } .ep-addons-title i { color: var(--nv-500); } .ep-addons-desc { font-size: 0.875rem; color: var(--pt-500); } .ep-addons-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; position: relative; z-index: 1; } .ep-addon-item { display: flex; align-items: flex-start; gap: 14px; padding: 20px; background: rgba(239, 246, 255, 0.60); border: 1px solid rgba(147, 197, 253, 0.30); border-radius: 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: var(--tr-smooth); box-shadow: 0 1px 4px rgba(10, 22, 40, 0.04), 0 1px 0 rgba(255, 255, 255, 0.70) inset; } .ep-addon-item:hover { background: rgba(239, 246, 255, 0.92); border-color: rgba(37, 99, 235, 0.24); transform: translateX(5px); box-shadow: var(--sh-nv), 0 1px 0 rgba(255, 255, 255, 1) inset; } .ep-addon-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: rgba(37, 99, 235, 0.08); border-radius: 11px; color: var(--nv-500); font-size: 1rem; flex-shrink: 0; box-shadow: 0 1px 4px rgba(37, 99, 235, 0.08), 0 1px 0 rgba(255, 255, 255, 0.6) inset; } .ep-addon-info h4 { font-size: 0.9rem; font-weight: 760; color: var(--pt-800); margin-bottom: 4px; } .ep-addon-info p { font-size: 0.79rem; color: var(--pt-500); line-height: 1.48; } /* Scale section glassmorphism */ .ep-scale-section { text-align: center; padding: 60px 48px; background: rgba(255, 255, 255, 0.78); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border-lux); border-radius: 30px; box-shadow: var(--sh-nv), 0 1px 0 rgba(255, 255, 255, 0.95) inset; position: relative; overflow: hidden; } .ep-scale-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--nv-400), var(--ac-indigo), var(--ac-violet), var(--ac-cyan)); border-radius: 30px 30px 0 0; } .ep-scale-section::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: var(--shine-subtle); pointer-events: none; border-radius: 30px 30px 0 0; } .ep-scale-section h3 { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 900; color: var(--nv-800); margin-bottom: 12px; letter-spacing: -0.027em; position: relative; z-index: 1; } .ep-scale-section h3 span { background: linear-gradient(135deg, var(--nv-500), var(--ac-violet)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ep-scale-section > p { font-size: 1rem; color: var(--pt-500); max-width: 530px; margin: 0 auto 32px; line-height: 1.75; position: relative; z-index: 1; } .ep-scale-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; position: relative; z-index: 1; } .ep-scale-pill { display: flex; align-items: center; gap: 7px; padding: 8px 18px; background: rgba(255, 255, 255, 0.84); border: 1px solid var(--glass-border-lux); border-radius: 50px; font-size: 0.82rem; font-weight: 660; color: var(--pt-700); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: var(--tr-fast); box-shadow: 0 1px 4px rgba(10, 22, 40, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9) inset; } .ep-scale-pill:hover { background: rgba(239, 246, 255, 0.96); border-color: rgba(37, 99, 235, 0.28); transform: translateY(-1px); box-shadow: var(--sh-sm), 0 1px 0 rgba(255, 255, 255, 1) inset; } .ep-scale-pill i { color: var(--ac-green); font-size: 0.79rem; } .ep-scale-ctas { display: flex; flex-direction: row; flex-wrap: wrap; gap: 14px; justify-content: center; position: relative; z-index: 1; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 10. ENTERPRISE CTA SECTION — GRADIENT PROFOND ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .enterprise-cta-section { padding: 108px 24px; background: linear-gradient(150deg, var(--nv-800) 0%, #1a3a8f 20%, var(--nv-600) 42%, var(--ac-indigo) 68%, var(--ac-violet) 100%); position: relative; overflow: hidden; } /* Lustre clair supérieur */ .enterprise-cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 800px 550px at 12% 50%, rgba(255,255,255,0.07) 0%, transparent 65%), radial-gradient(ellipse 600px 400px at 88% 20%, rgba(255,255,255,0.05) 0%, transparent 65%), radial-gradient(ellipse 400px 300px at 50% 90%, rgba(255,255,255,0.03) 0%, transparent 65%); pointer-events: none; } .enterprise-cta-section::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40%; background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.00) 100%); pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 52px 52px; } .ep-cta-container { max-width: 780px; margin: 0 auto; text-align: center; position: relative; z-index: 2; } .ep-cta-eyebrow { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 0.74rem; font-weight: 760; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.70); margin-bottom: 18px; } .ep-cta-title { font-size: clamp(1.8rem, 4.5vw, 3.3rem); font-weight: 900; color: #ffffff; margin-bottom: 16px; letter-spacing: -0.027em; line-height: 1.10; text-shadow: 0 2px 24px rgba(0,0,0,0.18); } .ep-cta-subtitle { font-size: 1.02rem; color: rgba(255,255,255,0.68); max-width: 530px; margin: 0 auto 40px; line-height: 1.75; } /* CTA buttons */ .ep-cta-buttons { display: flex; flex-direction: row; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 34px; } .ep-cta-buttons .btn-ep-primary { background: rgba(255,255,255,0.97); color: var(--nv-800); box-shadow: 0 6px 28px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,1) inset; } .ep-cta-buttons .btn-ep-primary:hover { background: #ffffff; box-shadow: 0 12px 36px rgba(0,0,0,0.24), 0 0 0 3px rgba(255,255,255,0.15); } .ep-cta-buttons .btn-ep-secondary { background: rgba(255,255,255,0.13); color: #ffffff; border-color: rgba(255,255,255,0.32); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset; } .ep-cta-buttons .btn-ep-secondary:hover { background: rgba(255,255,255,0.24); border-color: rgba(255,255,255,0.55); box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 1px 0 rgba(255,255,255,0.20) inset; } .ep-cta-guarantee { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; } .ep-guarantee-item { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 650; color: rgba(255,255,255,0.70); } .ep-guarantee-item i { color: rgba(255,255,255,0.88); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 11. ENTERPRISE FOOTER — COMPLET ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .enterprise-footer { background: linear-gradient(180deg, var(--nv-900) 0%, var(--nv-950) 100%); position: relative; overflow: hidden; } .enterprise-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.45), rgba(99, 102, 241, 0.30), transparent); } .enterprise-footer::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 35%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.000) 100%); pointer-events: none; } /* Grid principal */ .ep-footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 52px; padding: 60px 44px 48px; position: relative; z-index: 1; } /* Colonne brand */ .ep-footer-brand-col { display: flex; flex-direction: column; } .ep-footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .ep-footer-brand-text { font-size: 1.02rem; font-weight: 800; color: var(--pt-100); letter-spacing: -0.012em; } .ep-footer-tagline { font-size: 0.875rem; color: var(--pt-500); line-height: 1.68; margin-bottom: 22px; max-width: 290px; } /* Contact */ .ep-footer-contact { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; } .ep-footer-contact-item { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--pt-500); text-decoration: none; transition: color 0.22s ease; font-weight: 530; } .ep-footer-contact-item:hover { color: var(--nv-300); } .ep-footer-contact-item i { color: var(--nv-400); font-size: 0.8rem; } /* Réseaux sociaux */ .ep-footer-social { display: flex; gap: 9px; } .ep-footer-social a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.058); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 9px; color: var(--pt-400); font-size: 0.84rem; text-decoration: none; transition: var(--tr-smooth); } .ep-footer-social a:hover { background: rgba(37, 99, 235, 0.18); border-color: rgba(37, 99, 235, 0.38); color: var(--nv-300); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.20); } /* Colonnes liens */ .ep-footer-col h4 { font-size: 0.76rem; font-weight: 800; color: var(--pt-100); letter-spacing: 1.3px; text-transform: uppercase; margin-bottom: 16px; } .ep-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .ep-footer-col ul li a { font-size: 0.875rem; color: var(--pt-500); text-decoration: none; transition: color 0.22s ease; font-weight: 530; } .ep-footer-col ul li a:hover { color: var(--nv-300); } /* Barre inférieure */ .ep-footer-bottom { max-width: 1200px; margin: 0 auto; padding: 18px 44px 26px; border-top: 1px solid rgba(255, 255, 255, 0.065); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; position: relative; z-index: 1; } .ep-footer-bottom p { font-size: 0.8rem; color: var(--pt-500); } .ep-footer-bottom-links { display: flex; gap: 22px; } .ep-footer-bottom-links a { font-size: 0.8rem; color: var(--pt-500); text-decoration: none; transition: color 0.22s ease; } .ep-footer-bottom-links a:hover { color: var(--nv-300); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 12. RESPONSIVE BREAKPOINTS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ── 1200px ── */ @media (max-width: 1200px) { .ep-cards-grid { grid-template-columns: repeat(2, 1fr); max-width: 840px; margin-left: auto; margin-right: auto; } .ep-footer-grid { gap: 38px; padding: 50px 34px 42px; } } /* ── 1024px ── */ @media (max-width: 1024px) { .ef-grid { grid-template-columns: 1fr; } .replace-grid { grid-template-columns: 1fr; gap: 18px; } .replace-arrow-center { flex-direction: row; justify-content: center; padding: 10px 0; gap: 14px; } .replace-arrow-label { text-align: left; } .enterprise-hero-stats { grid-template-columns: repeat(2, 1fr); } .ep-stat-item { border-bottom: 1px solid rgba(226, 232, 240, 0.60); } .ep-stat-item:nth-child(odd) { border-right: 1px solid rgba(226, 232, 240, 0.60); } .ep-stat-item:nth-child(even) { border-right: none; } .ep-stat-item:nth-last-child(-n+2) { border-bottom: none; } .ep-footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; padding: 50px 34px 42px; } .ep-footer-brand-col { grid-column: 1 / -1; } .ep-footer-col:last-child { grid-column: 1 / -1; } } /* ── 768px — MOBILE ── */ @media (max-width: 768px) { /* Hero */ .enterprise-hero { padding: 100px 20px 56px; min-height: auto; } .enterprise-hero-sub { font-size: 0.97rem; } /* CTAs */ .enterprise-hero-ctas { gap: 10px; } .enterprise-hero-ctas .btn-ep-primary, .enterprise-hero-ctas .btn-ep-secondary, .ep-cta-buttons .btn-ep-primary, .ep-cta-buttons .btn-ep-secondary, .ep-scale-ctas .btn-ep-primary, .ep-scale-ctas .btn-ep-secondary { flex: 1 1 auto; min-width: 130px; max-width: 220px; padding: 12px 16px; font-size: 0.85rem; justify-content: center; } /* Stats */ .enterprise-hero-stats { padding: 20px; border-radius: 18px; grid-template-columns: 1fr 1fr; } .ep-stat-item { padding: 20px 14px; } /* Section paddings */ .enterprise-value-section, .enterprise-features-section, .enterprise-pricing-section, .enterprise-cta-section { padding: 64px 20px; } /* Savings callout */ .savings-callout { padding: 30px 24px; } .ep-scale-section { padding: 40px 22px; } /* PRICING CARDS — scroll horizontal mobile */ .ep-cards-grid { display: flex; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px; padding: 4px 20px 22px; margin: 0 -20px; scrollbar-width: thin; scrollbar-color: rgba(37, 99, 235, 0.22) transparent; align-items: stretch; } .ep-cards-grid::-webkit-scrollbar { height: 3px; } .ep-cards-grid::-webkit-scrollbar-track { background: transparent; } .ep-cards-grid::-webkit-scrollbar-thumb { background: rgba(37, 99, 235, 0.22); border-radius: 4px; } .ep-card { flex: 0 0 min(300px, 82vw); scroll-snap-align: center; } .ep-card:first-child { scroll-snap-align: start; } .ep-card:last-child { scroll-snap-align: end; } /* FEATURES CARDS — scroll horizontal mobile */ .ef-grid { display: flex; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px; padding: 4px 20px 22px; margin: 0 -20px; scrollbar-width: thin; scrollbar-color: rgba(37, 99, 235, 0.22) transparent; } .ef-grid::-webkit-scrollbar { height: 3px; } .ef-grid::-webkit-scrollbar-track { background: transparent; } .ef-grid::-webkit-scrollbar-thumb { background: rgba(37, 99, 235, 0.22); border-radius: 4px; } .ef-card { flex: 0 0 min(300px, 82vw); scroll-snap-align: center; } /* ADD-ONS */ .ep-addons { padding: 24px 20px; } .ep-addons-grid { grid-template-columns: 1fr; } /* SCALE */ .ep-scale-ctas { gap: 10px; } /* CTA */ .ep-cta-guarantee { gap: 14px; } /* FOOTER */ .ep-footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; padding: 42px 24px 34px; } .ep-footer-brand-col { grid-column: 1 / -1; align-items: center; text-align: center; } .ep-footer-brand { justify-content: center; } .ep-footer-tagline { text-align: center; max-width: 300px; } .ep-footer-contact { align-items: center; } .ep-footer-social { justify-content: center; } .ep-footer-col { text-align: center; } .ep-footer-col h4 { text-align: center; } .ep-footer-col ul { align-items: center; } .ep-footer-col:last-child { grid-column: 1 / -1; text-align: center; } .ep-footer-col:last-child ul { align-items: center; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px 20px; } .ep-footer-bottom { flex-direction: column; text-align: center; padding: 16px 24px 26px; } .ep-footer-bottom-links { justify-content: center; } /* REPLACE GRID */ .replace-grid { grid-template-columns: 1fr; } .replace-arrow-center { flex-direction: row; justify-content: center; padding: 8px 0; } } /* ── 480px ── */ @media (max-width: 480px) { .hero-mode-toggle-btn { padding: 9px 14px; font-size: 0.8rem; gap: 6px; } .enterprise-hero-title { font-size: 1.88rem; } .enterprise-hero-stats { border-radius: 16px; grid-template-columns: 1fr 1fr; } .ep-stat-number { font-size: 1.42rem; } .ep-stat-item { padding: 16px 10px; } .enterprise-hero-ctas .btn-ep-primary, .enterprise-hero-ctas .btn-ep-secondary, .ep-cta-buttons .btn-ep-primary, .ep-cta-buttons .btn-ep-secondary { min-width: 110px; font-size: 0.82rem; padding: 11px 12px; } .ep-scale-pills { gap: 8px; } .ep-scale-pill { font-size: 0.77rem; padding: 7px 12px; } .ep-guarantee-item { font-size: 0.76rem; } .ep-footer-grid { grid-template-columns: 1fr 1fr; gap: 18px 20px; padding: 34px 20px 28px; } .ep-footer-col h4 { font-size: 0.73rem; margin-bottom: 12px; } .ep-footer-col ul li a { font-size: 0.84rem; } .ep-footer-bottom { padding: 14px 20px 22px; gap: 8px; } .ep-footer-bottom p, .ep-footer-bottom-links a { font-size: 0.76rem; } } /* ── 360px ── */ @media (max-width: 360px) { .hero-mode-toggle-btn span { display: none; } .hero-mode-toggle-btn { padding: 10px 14px; } .hero-mode-toggle { gap: 3px; } .ep-footer-grid { grid-template-columns: 1fr; padding: 28px 16px 24px; gap: 16px; } .ep-footer-col h4 { font-size: 0.70rem; } .ep-footer-col ul li a { font-size: 0.80rem; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PATCH MOBILE FINAL v2 — FIX HAMBURGER MENU ENTERPRISE BUG IDENTIFIÉ : body.mode-enterprise > * { position: relative; z-index: 1 } écrasait position: fixed de .landing-nav, piégeant le .nav-menu derrière les sections enterprise (hero, features…) qui ont z-index: 1 et apparaissent plus tard dans le DOM. SOLUTION : ① Restaurer position: fixed sur .landing-nav (spécificité (0,2,1)) ② Donner au nav-menu un z-index supérieur à tout ③ Styles visuels hamburger + overlay navy enterprise ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ═══════════════════════════════════════════════════════════════════ FIX ① — CRITIQUE : Restaurer position: fixed sur .landing-nav Spécificité (0,2,1) > (0,1,1) du sélecteur > * ═══════════════════════════════════════════════════════════════════ */ body.mode-enterprise > .landing-nav { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 200 !important; /* --z-sticky */ height: var(--nav-height, 72px) !important; width: 100% !important; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════════ FIX ② — HAMBURGER BUTTON ═══════════════════════════════════════════════════════════════════ */ .mobile-menu-btn { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 8px; background: transparent; border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 10px; cursor: pointer; transition: all 0.20s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; position: relative; z-index: 1; } body.mode-enterprise .mobile-menu-btn { border-color: rgba(37, 99, 235, 0.22); background: rgba(255, 255, 255, 0.55); } .mobile-menu-btn:hover { background: rgba(239, 246, 255, 0.85); border-color: rgba(37, 99, 235, 0.35); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.10); } /* ── Barres ─────────────────────────────────────────────────────── */ .mobile-menu-btn span { display: block; width: 20px; height: 2px; background: var(--pt-700, #334155); border-radius: 9999px; transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center; } body.mode-enterprise .mobile-menu-btn span { background: var(--nv-700, #1e3a8a); } /* ── Animation → Croix ──────────────────────────────────────────── */ .mobile-menu-btn.active { background: transparent; border-color: transparent; } .mobile-menu-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mobile-menu-btn.active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .mobile-menu-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ═══════════════════════════════════════════════════════════════════ FIX ③ — AFFICHAGE HAMBURGER & MASQUAGE NAV DESKTOP ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .nav-menu { display: none; } .mobile-menu-btn { display: flex !important; } .nav-cta#navCtaLoggedOut, .nav-cta#navCtaLoggedIn { display: none !important; } } /* ═══════════════════════════════════════════════════════════════════ FIX ④ — MENU OVERLAY MOBILE — Z-INDEX FORCÉ AU-DESSUS DE TOUT ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ── Menu overlay : priorité absolue ────────────────────────── */ .nav-menu { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100svh !important; /* * z-index très élevé pour passer au-dessus de TOUTES * les sections enterprise (y compris hero à z-index: 1) */ z-index: 9000 !important; /* Layout */ display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; gap: 0 !important; padding: 86px 24px 100px !important; overflow: hidden !important; /* Fond light */ background: rgba(248, 250, 255, 0.98) !important; /* * PAS de backdrop-filter sur le menu lui-même : * évite les bugs de stacking context imbriqués * sur Safari / anciens Chrome */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; /* État fermé */ transform: translateX(100%) !important; opacity: 0 !important; visibility: hidden !important; transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.38s ease, visibility 0.38s ease !important; } /* Fond navy subtil en mode enterprise */ body.mode-enterprise .nav-menu { background: linear-gradient( 160deg, rgba(234, 241, 255, 0.99) 0%, rgba(240, 246, 255, 0.99) 50%, rgba(248, 251, 255, 1.00) 100% ) !important; } /* ── État ouvert ─────────────────────────────────────────────── */ .nav-menu.active { transform: translateX(0) !important; opacity: 1 !important; visibility: visible !important; } /* ── Ligne décorative top navy ───────────────────────────────── */ .nav-menu::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, var(--nv-400, #3b82f6), var(--ac-indigo, #4f46e5), var(--ac-violet, #7c3aed) ); opacity: 0.70; z-index: 1; } /* ── Radial glow bas ─────────────────────────────────────────── */ .nav-menu::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 200px; background: radial-gradient( ellipse 80% 60% at 50% 100%, rgba(37, 99, 235, 0.06) 0%, transparent 70% ); pointer-events: none; } /* ── Nav links dans le menu ──────────────────────────────────── */ .nav-menu .nav-link, .nav-menu a.nav-link { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: 18px 16px !important; font-size: 1.15rem !important; font-weight: 700 !important; color: #1e293b !important; background: transparent !important; border-radius: 12px !important; border-bottom: 1px solid rgba(203, 213, 225, 0.50) !important; text-decoration: none !important; text-align: center !important; letter-spacing: -0.01em !important; transition: all 0.15s ease !important; position: relative !important; z-index: 2 !important; } body.mode-enterprise .nav-menu .nav-link, body.mode-enterprise .nav-menu a.nav-link { color: var(--nv-800, #0f2554) !important; } .nav-menu .nav-link:last-child, .nav-menu a.nav-link:last-child { border-bottom: none !important; } /* Supprimer underline desktop */ .nav-menu .nav-link::after, .nav-menu a.nav-link::after { display: none !important; } .nav-menu .nav-link:hover, .nav-menu a.nav-link:hover { color: var(--nv-500, #2563eb) !important; background: rgba(239, 246, 255, 0.75) !important; } /* ── Scroll lock ─────────────────────────────────────────────── */ body.menu-open { overflow: hidden !important; position: fixed !important; width: 100% !important; touch-action: none; overscroll-behavior: contain; } /* ── Ajustement nav height ───────────────────────────────────── */ body.mode-enterprise > .landing-nav { height: 62px !important; } } /* ═══════════════════════════════════════════════════════════════════ FIX ⑤ — MOBILE CTA BAR (barre fixe en bas) Z-index > 9000 pour rester au-dessus du menu overlay ═══════════════════════════════════════════════════════════════════ */ .nav-menu-mobile-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9005; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-top: 1px solid rgba(226, 232, 240, 0.70); box-shadow: 0 -4px 24px rgba(30, 58, 138, 0.08); } body.mode-enterprise .nav-menu-mobile-cta { background: rgba(248, 251, 255, 0.97); border-top: 1px solid rgba(37, 99, 235, 0.12); box-shadow: 0 -4px 28px rgba(30, 58, 138, 0.10); } .nav-menu-mobile-cta .btn-text { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px; font-size: 0.875rem; font-weight: 600; color: var(--pt-600, #475569); border: 1px solid rgba(148, 163, 184, 0.30); border-radius: 9999px; background: rgba(255, 255, 255, 0.90); cursor: pointer; white-space: nowrap; transition: all 0.20s ease; } .nav-menu-mobile-cta .btn-text:hover { background: rgba(239, 246, 255, 0.95); border-color: rgba(37, 99, 235, 0.30); color: var(--nv-500, #2563eb); } .nav-menu-mobile-cta .btn-primary-nav { flex: 2; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; font-size: 0.875rem; font-weight: 700; color: #ffffff; background: linear-gradient(135deg, var(--nv-500, #2563eb), var(--ac-indigo, #4f46e5)); border: none; border-radius: 9999px; cursor: pointer; white-space: nowrap; box-shadow: 0 4px 16px rgba(37, 99, 235, 0.32), 0 1px 0 rgba(255, 255, 255, 0.22) inset; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .nav-menu-mobile-cta .btn-primary-nav:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 8px 24px rgba(37, 99, 235, 0.48); } /* Dashboard button (utilisateur connecté) */ .mobile-dashboard-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 24px; font-size: 0.875rem; font-weight: 700; color: #ffffff; background: linear-gradient(135deg, var(--nv-500, #2563eb), var(--ac-indigo, #4f46e5)); border: none; border-radius: 9999px; cursor: pointer; box-shadow: 0 4px 16px rgba(37, 99, 235, 0.32); transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .mobile-dashboard-btn:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 8px 24px rgba(37, 99, 235, 0.48); background: linear-gradient(135deg, var(--nv-600, #1d4ed8), #4338ca); } /* ═══════════════════════════════════════════════════════════════════ FIX ⑥ — SAFE AREA (notch iPhone / Dynamic Island) ═══════════════════════════════════════════════════════════════════ */ @supports (padding: max(0px)) { .nav-menu-mobile-cta { padding-bottom: max(12px, env(safe-area-inset-bottom, 12px)); } @media (max-width: 768px) { body.mode-enterprise { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } } } /* ═══════════════════════════════════════════════════════════════════ FIX ⑦ — DROPDOWN UTILISATEUR — mobile repositionné ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .user-dropdown-menu { position: fixed; top: 62px; left: 16px; right: 16px; min-width: unset; border-radius: 20px; max-height: calc(100svh - 78px); overflow-y: auto; z-index: 9010; } } /* ═══════════════════════════════════════════════════════════════════ FIX ⑧ — 480px overrides ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { .mobile-menu-btn { width: 38px; height: 38px; gap: 4px; } .nav-menu .nav-link, .nav-menu a.nav-link { font-size: 1.05rem !important; padding: 15px 12px !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FIN PATCH MOBILE FINAL v2 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ═══════════════════════════════════════════════════════════════════ FIX — HAMBURGER BUTTON TOUJOURS AU-DESSUS DU MENU OVERLAY ═══════════════════════════════════════════════════════════════════ */ /* Le bouton doit avoir z-index > 9000 (z-index du nav-menu overlay) */ .mobile-menu-btn { z-index: 9500 !important; position: relative !important; } /* ═══════════════════════════════════════════════════════════════════ FIX — CTA BAR MOBILE (Sign In / Dashboard) EN MODE ENTERPRISE CAUSE : body.mode-enterprise > * { position: relative; z-index: 1 } écrase position: fixed de .nav-menu-mobile-cta, injectée par JS dans → la barre devient un flex-item en bas du flux de page. FIX : Spécificité (0,2,1) > (0,1,1) du sélecteur > * ═══════════════════════════════════════════════════════════════════ */ body.mode-enterprise > .nav-menu-mobile-cta { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 9005 !important; width: 100% !important; } /* ── Espace bas : éviter que le footer soit masqué par la CTA bar ── */ @media (max-width: 768px) { body.mode-enterprise { padding-bottom: 80px !important; } } /* ── Safe area iPhone notch / Dynamic Island ── */ @supports (padding: max(0px)) { @media (max-width: 768px) { body.mode-enterprise { padding-bottom: max( 80px, calc(80px + env(safe-area-inset-bottom, 0px)) ) !important; } } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FIN DES PATCHES ENTERPRISE MOBILE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */