/* ========================================================= ELYD Design System V2 — Dark-tech premium, accent néon Scope : body.elyd-v2 Utilisation : ajouter la classe "elyd-v2" au de la page ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=Inconsolata:wght@600&display=swap'); /* Variables globales (inoffensif sur pages non opt-in) */ :root { --elyd-neon: #faff69; --elyd-neon-pale: #f4f692; --elyd-green: #166534; --elyd-green-dark: #14572f; --elyd-olive: #4f5100; --elyd-black: #000000; --elyd-near-black: #141414; --elyd-card-bg: #0d0d0d; --elyd-charcoal: rgba(65, 65, 65, 0.8); --elyd-border: #292929; --elyd-hover-gray: #3a3a3a; --elyd-white: #ffffff; --elyd-silver: #a0a0a0; /* Alias utilisés dans les composants */ --neon: #faff69; --neon-pale: #f4f692; --border: #292929; --card-bg: #0d0d0d; --near-black: #141414; --silver: #a0a0a0; --black: #000000; --white: #ffffff; --olive: #4f5100; --green: #166534; --green-dark: #14572f; } /* ============ BASE ============ */ body.elyd-v2 { font-family: 'Inter', Arial, sans-serif !important; background-color: var(--elyd-black) !important; color: var(--elyd-white) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.55; padding-top: 100px !important; margin: 0; } /* Fallback SVG sizing — évite qu'un SVG sans width/height HTML explose */ body.elyd-v2 svg { max-width: 100%; height: auto; } body.elyd-v2 .icon-box svg, body.elyd-v2 .icon-box-sm svg, body.elyd-v2 .icon-box-dark svg, body.elyd-v2 .pain-icon svg, body.elyd-v2 .usecase-icon svg, body.elyd-v2 .error-category-icon svg, body.elyd-v2 .method-column-icon svg, body.elyd-v2 .method-step-icon svg, body.elyd-v2 .why-card-icon svg, body.elyd-v2 .seo-featured-stat-icon svg, body.elyd-v2 .seo-type-icon svg, body.elyd-v2 .expertise-card-icon svg, body.elyd-v2 .deliverables-card-title-icon svg { height: auto; max-height: 100%; max-width: 100%; } body.elyd-v2 *, body.elyd-v2 *::before, body.elyd-v2 *::after { box-sizing: border-box; } body.elyd-v2 h1, body.elyd-v2 h2, body.elyd-v2 h3, body.elyd-v2 h4 { color: var(--elyd-white); font-family: 'Inter', Arial, sans-serif; margin: 0; } body.elyd-v2 p { margin: 0; } body.elyd-v2 a { color: inherit; } /* ============ CONTENEUR ============ */ body.elyd-v2 .pitch-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; display: block; height: auto; } /* ============ SECTION ============ */ body.elyd-v2 .section { padding: 96px 0; border-bottom: 1px solid var(--elyd-border); background: var(--elyd-black); position: relative; overflow: hidden; } body.elyd-v2 .section:last-of-type { border-bottom: none; } /* ============ HEADER STICKY COMPAT ============ */ body.elyd-v2 .header-area { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 99999 !important; background-color: var(--elyd-black) !important; border-bottom: 1px solid var(--elyd-border); } body.elyd-v2 .action-area, body.elyd-v2 .rts-offcanvas-wrapper, body.elyd-v2 .rts-offcanvas-wrapper .action-menu, body.elyd-v2 .rts-offcanvas-wrapper .burger, body.elyd-v2 .rts-offcanvas-wrapper .open-event, body.elyd-v2 .close-event { position: relative; z-index: 99999 !important; pointer-events: auto !important; cursor: pointer; } body.elyd-v2 .icon-close { opacity: 0; pointer-events: none; } body.elyd-v2 .icon-burger { opacity: 1; pointer-events: auto; } body.elyd-v2 .burger { position: relative; width: 24px !important; height: 24px !important; min-height: 24px !important; display: inline-block !important; } body.elyd-v2 .icon-close, body.elyd-v2 .icon-burger { position: absolute; top: 0; left: 0; width: 24px !important; height: 24px !important; } body.elyd-v2 .icon-burger line { stroke: var(--elyd-white); } body.elyd-v2 .icon-close line { stroke: var(--elyd-neon) !important; stroke-width: 2px; } body.elyd-v2 .rts-fs-menu { z-index: 9999 !important; background-color: var(--elyd-black) !important; pointer-events: auto !important; padding-top: 120px !important; top: 0 !important; } body.elyd-v2 .rts-fs-menu.visible { background-color: var(--elyd-black) !important; pointer-events: auto !important; } body.elyd-v2 .header-area.header--sticky { background-color: var(--elyd-black) !important; } body.elyd-v2 .menu-close-button { position: fixed; top: 30px; right: 30px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 100000; transition: transform .3s ease; } body.elyd-v2 .menu-close-button:hover { transform: scale(1.2); } body.elyd-v2 .menu-close-button svg { width: 30px; height: 30px; } body.elyd-v2 .rts-fs-menu a, body.elyd-v2 .rts-fs-menu .menu-item, body.elyd-v2 .rts-fs-menu .rts-fs--nav, body.elyd-v2 .rts-fs-menu .navbar-nav-button { pointer-events: auto !important; } html.fsm-opened { overflow: hidden !important; } /* ============ TYPOGRAPHIE ============ */ body.elyd-v2 .eyebrow { display: inline-block; font-size: 12px; font-weight: 600; color: var(--elyd-neon); text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 18px; } body.elyd-v2 h1.hero-h1 { font-size: clamp(38px, 5.5vw, 64px); font-weight: 900; letter-spacing: -2px; line-height: 1.1; color: var(--elyd-white); text-wrap: balance; } body.elyd-v2 h1.hero-h1 .neon { color: var(--elyd-neon); } body.elyd-v2 h1.hero-h1 .cursor { display: inline-block; width: 6px; height: 0.85em; background: var(--elyd-neon); vertical-align: -0.08em; margin-left: 6px; animation: elyd-blink 1.1s step-end infinite; } body.elyd-v2 h2.section-h2 { font-size: clamp(36px, 5vw, 60px); font-weight: 900; letter-spacing: -2px; line-height: 1.0; color: var(--elyd-white); } body.elyd-v2 h2.section-h2 .neon { color: var(--elyd-neon); } body.elyd-v2 h2.section-h2-sm { font-size: clamp(32px, 4vw, 52px); font-weight: 900; letter-spacing: -1.5px; line-height: 1.0; color: var(--elyd-white); } body.elyd-v2 .lead { font-size: 18px; font-weight: 400; color: var(--elyd-silver); line-height: 1.65; max-width: 640px; } body.elyd-v2 .lead.center { margin-left: auto; margin-right: auto; text-align: center; } body.elyd-v2 .lead strong { color: var(--elyd-white); font-weight: 600; } /* ============ PILLS & BADGES ============ */ body.elyd-v2 .pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 9999px; background: rgba(250, 255, 105, 0.08); border: 1px solid rgba(250, 255, 105, 0.25); color: var(--elyd-neon); font-size: 13px; font-weight: 600; letter-spacing: 0.3px; } body.elyd-v2 .pulse { width: 8px; height: 8px; background: var(--elyd-neon); border-radius: 50%; box-shadow: 0 0 0 0 rgba(250, 255, 105, 0.6); animation: elyd-pulse-dot 2s infinite; } @keyframes elyd-pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(250,255,105,.6); } 70% { box-shadow: 0 0 0 10px rgba(250,255,105,0); } 100% { box-shadow: 0 0 0 0 rgba(250,255,105,0); } } /* ============ BOUTONS ============ */ body.elyd-v2 .btn { display: inline-flex !important; align-items: center; gap: 8px; padding: 13px 28px !important; font-size: 14px; font-weight: 600; border-radius: 6px; text-decoration: none; cursor: pointer; border: 1px solid transparent; font-family: inherit; transition: all .25s cubic-bezier(.16,1,.3,1); white-space: nowrap; line-height: 1; width: auto !important; min-height: auto; height: auto; } body.elyd-v2 .btn-lg { font-size: 16px !important; padding: 15px 30px !important; } body.elyd-v2 .btn svg { width: 14px; height: 14px; flex-shrink: 0; } body.elyd-v2 .btn-neon { background: var(--elyd-neon); color: #111; border-color: var(--elyd-neon); } body.elyd-v2 .btn-neon:hover { background: #1d1d1d; color: var(--elyd-neon); border-color: var(--elyd-neon); box-shadow: 0 0 20px rgba(250, 255, 105, 0.25); } body.elyd-v2 .btn-ghost { background: transparent; color: var(--elyd-white); border-color: var(--elyd-olive); } body.elyd-v2 .btn-ghost:hover { background: var(--elyd-near-black); border-color: var(--elyd-neon); color: var(--elyd-neon); } body.elyd-v2 .btn-dark { background: var(--elyd-near-black); color: var(--elyd-white); border-color: var(--elyd-border); } body.elyd-v2 .btn-dark:hover { background: var(--elyd-hover-gray); } body.elyd-v2 .btn-black { background: var(--elyd-black); color: var(--elyd-neon); border-color: var(--elyd-black); } body.elyd-v2 .btn-black:hover { background: #1d1d1d; } body.elyd-v2 .btn-outline-black { background: transparent; color: var(--elyd-black); border-color: rgba(0,0,0,0.4); } body.elyd-v2 .btn-outline-black:hover { background: rgba(0,0,0,0.08); border-color: var(--elyd-black); } body.elyd-v2 .btn-green { background: var(--elyd-green); color: var(--elyd-white); border-color: var(--elyd-green-dark); } /* ============ ICON BOXES ============ */ body.elyd-v2 .icon-box { width: 52px; height: 52px; background: var(--elyd-card-bg); border: 1px solid rgba(250, 255, 105, 0.3); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .icon-box svg { width: 24px; height: 24px; stroke: var(--elyd-neon); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } body.elyd-v2 .icon-box-sm { width: 40px; height: 40px; background: var(--elyd-near-black); border: 1px solid rgba(250, 255, 105, 0.2); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } body.elyd-v2 .icon-box-sm svg { width: 18px; height: 18px; stroke: var(--elyd-neon); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } body.elyd-v2 .icon-box-dark { width: 40px; height: 40px; background: rgba(0,0,0,0.12); border: 1px solid rgba(0,0,0,0.2); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } body.elyd-v2 .icon-box-dark svg { width: 18px; height: 18px; stroke: var(--elyd-black); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ============ HERO ============ */ body.elyd-v2 .hero { padding: 88px 0 72px; border-bottom: 1px solid var(--elyd-border); position: relative; overflow: hidden; } body.elyd-v2 .hero::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 900px; height: 500px; background: radial-gradient(circle, rgba(250,255,105,0.05) 0%, transparent 70%); filter: blur(80px); pointer-events: none; z-index: 0; } body.elyd-v2 .hero-inner { position: relative; z-index: 1; text-align: center; } body.elyd-v2 .hero-badge { animation: elyd-slideDown .6s cubic-bezier(.16,1,.3,1) .1s backwards; } @keyframes elyd-slideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } body.elyd-v2 .hero-h1 { margin: 22px auto 18px; max-width: 1000px; animation: elyd-fadeInUp .7s cubic-bezier(.16,1,.3,1) .25s backwards; } body.elyd-v2 .hero-sub { font-size: 18px; color: var(--elyd-silver); line-height: 1.65; max-width: 640px; margin: 0 auto; animation: elyd-fadeInUp .7s cubic-bezier(.16,1,.3,1) .4s backwards; } body.elyd-v2 .hero-actions { display: flex; gap: 12px; justify-content: center; margin: 32px 0 40px; flex-wrap: wrap; animation: elyd-fadeInUp .7s cubic-bezier(.16,1,.3,1) .52s backwards; } body.elyd-v2 .hero-proof { margin-top: 18px; font-size: 13px; color: var(--elyd-silver); animation: elyd-fadeInUp .7s cubic-bezier(.16,1,.3,1) .6s backwards; } body.elyd-v2 .hero-proof strong { color: var(--elyd-neon); font-weight: 600; } /* ============ HERO STRIP ============ */ body.elyd-v2 .hero-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 56px; border: 1px solid var(--elyd-border); border-radius: 8px; overflow: hidden; animation: elyd-fadeInUp .7s cubic-bezier(.16,1,.3,1) .65s backwards; } body.elyd-v2 .hstrip-cell { padding: 24px 22px; border-right: 1px solid var(--elyd-border); background: var(--elyd-card-bg); display: flex; align-items: flex-start; gap: 14px; transition: background .25s ease; text-align: left; } body.elyd-v2 .hstrip-cell:last-child { border-right: none; } body.elyd-v2 .hstrip-cell:hover { background: #060606; } body.elyd-v2 .hstrip-cell .hstrip-text h4 { font-size: 14px; font-weight: 700; color: var(--elyd-white); margin-bottom: 4px; line-height: 1.3; } body.elyd-v2 .hstrip-cell .hstrip-text p { font-size: 13px; color: var(--elyd-silver); line-height: 1.5; } /* ============ FEATURE CARDS 3-COL ============ */ body.elyd-v2 .feat-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; } body.elyd-v2 .feat-card { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 28px 24px; transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease, box-shadow .25s ease; } body.elyd-v2 .feat-card:hover { transform: translateY(-4px); border-color: rgba(250, 255, 105, 0.25); box-shadow: 0 18px 40px rgba(0,0,0,0.5); } body.elyd-v2 .feat-card:hover .icon-box { border-color: rgba(250, 255, 105, 0.6); box-shadow: 0 0 18px rgba(250, 255, 105, 0.15); } body.elyd-v2 .feat-card h3 { font-size: 18px; font-weight: 700; color: var(--elyd-white); line-height: 1.3; margin: 18px 0 10px; } body.elyd-v2 .feat-card p { font-size: 14px; color: var(--elyd-silver); line-height: 1.6; } body.elyd-v2 .feat-card p b, body.elyd-v2 .feat-card p strong { color: var(--elyd-white); font-weight: 600; } body.elyd-v2 .feat-card.highlighted { border-color: var(--elyd-neon); animation: elyd-neon-glow 3s ease-in-out infinite; } @keyframes elyd-neon-glow { 0%, 100% { box-shadow: 0 0 0 rgba(250,255,105,0); } 50% { box-shadow: 0 0 30px rgba(250,255,105,0.2); } } /* ============ GAME WARNING BLOCK ============ */ body.elyd-v2 .game-warning { max-width: 760px; margin: 32px auto 56px; padding: 22px 28px; background: rgba(250, 255, 105, 0.04); border: 1px solid rgba(250, 255, 105, 0.25); border-left: 3px solid var(--elyd-neon); border-radius: 8px; text-align: left; display: flex; gap: 16px; align-items: flex-start; } body.elyd-v2 .game-warning p { font-size: 16px; color: var(--elyd-white); font-weight: 500; line-height: 1.55; } /* ============ STAT BADGE PILL ============ */ body.elyd-v2 .stat-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid var(--elyd-border); border-radius: 9999px; background: var(--elyd-card-bg); font-size: 13px; color: var(--elyd-silver); margin-top: 40px; } body.elyd-v2 .stat-badge strong { color: var(--elyd-neon); font-weight: 700; font-size: 14px; } body.elyd-v2 .stat-badge svg { width: 16px; height: 16px; stroke: var(--elyd-neon); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ============ QUOTE BLOCK ============ */ body.elyd-v2 .quote-block { margin: 64px auto 0; max-width: 820px; padding: 32px 32px; border-left: 2px solid var(--elyd-neon); background: rgba(250, 255, 105, 0.03); border-radius: 6px; } body.elyd-v2 .quote-block p.q-text { font-size: 22px; font-weight: 600; color: var(--elyd-white); line-height: 1.5; margin-bottom: 12px; } body.elyd-v2 .quote-block p.q-author { font-size: 13px; color: var(--elyd-neon); font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; } /* ============ CTA CENTER ============ */ body.elyd-v2 .section-cta-center { text-align: center; margin-top: 48px; } /* ============ METHOD CARDS ============ */ body.elyd-v2 .method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; } body.elyd-v2 .method-card { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 32px 28px; position: relative; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .method-card:hover { transform: translateY(-4px); border-color: rgba(250, 255, 105, 0.25); } body.elyd-v2 .method-card .method-step { position: absolute; top: 18px; right: 22px; font-family: 'Inconsolata', monospace; font-size: 13px; color: var(--elyd-silver); letter-spacing: 0.5px; } body.elyd-v2 .method-card h3 { font-size: 20px; font-weight: 700; color: var(--elyd-white); line-height: 1.3; margin: 20px 0 10px; } body.elyd-v2 .method-card p { font-size: 14px; color: var(--elyd-silver); line-height: 1.6; } body.elyd-v2 .method-card p strong { color: var(--elyd-white); font-weight: 600; } body.elyd-v2 .method-card .method-obj { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--elyd-border); font-size: 13px; color: var(--elyd-white); font-weight: 600; line-height: 1.5; } body.elyd-v2 .method-card .method-obj .label { display: block; font-size: 11px; color: var(--elyd-neon); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 6px; } body.elyd-v2 .credentials { text-align: center; margin-top: 32px; font-size: 14px; color: var(--elyd-silver); line-height: 1.6; } body.elyd-v2 .credentials strong { color: var(--elyd-neon); font-weight: 600; } /* ============ STATS BAR (4 COLS) ============ */ body.elyd-v2 .sbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--elyd-border); border-radius: 8px; overflow: hidden; background: var(--elyd-card-bg); margin-top: 24px; } body.elyd-v2 .sbar-item { padding: 36px 24px; border-right: 1px solid var(--elyd-border); text-align: center; } body.elyd-v2 .sbar-item:last-child { border-right: none; } body.elyd-v2 .sbar-num { font-size: clamp(36px, 4vw, 64px); font-weight: 900; letter-spacing: -2px; color: var(--elyd-white); line-height: 1; display: block; margin-bottom: 10px; } body.elyd-v2 .sbar-num.accent { color: var(--elyd-neon); } body.elyd-v2 .sbar-label { font-size: 13px; color: var(--elyd-silver); line-height: 1.5; } /* ============ CASE CARDS ============ */ body.elyd-v2 .cases-intro { text-align: center; font-size: 15px; color: var(--elyd-silver); margin: 64px 0 20px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; } body.elyd-v2 .cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } body.elyd-v2 .case-card { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 28px 24px; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .case-card:hover { transform: translateY(-4px); border-color: rgba(250, 255, 105, 0.25); } body.elyd-v2 .case-card .case-cat { font-family: 'Inconsolata', monospace; font-size: 12px; color: var(--elyd-silver); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; } body.elyd-v2 .case-card h3 { font-size: 26px; font-weight: 900; color: var(--elyd-neon); letter-spacing: -1px; line-height: 1.1; margin-bottom: 12px; } body.elyd-v2 .case-card p { font-size: 14px; color: var(--elyd-silver); line-height: 1.6; } /* ============ WHY GRID (asymétrique) ============ */ body.elyd-v2 .why-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; grid-template-areas: "big small1 small2"; margin-top: 24px; } body.elyd-v2 .why-card { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 32px 28px; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .why-card:hover { transform: translateY(-3px); border-color: rgba(250, 255, 105, 0.2); } body.elyd-v2 .why-card.big { grid-area: big; grid-column: span 1; } body.elyd-v2 .why-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 9999px; background: rgba(250, 255, 105, 0.1); border: 1px solid rgba(250, 255, 105, 0.25); color: var(--elyd-neon); font-size: 11px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 16px; } body.elyd-v2 .why-stat-num { font-size: 56px; font-weight: 900; letter-spacing: -2px; color: var(--elyd-neon); line-height: 1; } /* ============ CHECK LIST ============ */ body.elyd-v2 .check-list { list-style: none; padding: 0; margin: 0 0 30px; } body.elyd-v2 .check-list li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; font-size: 15px; color: #e0e0e0; line-height: 1.55; } body.elyd-v2 .check-list li::before { content: '✓'; color: var(--elyd-neon); font-weight: 700; font-size: 15px; line-height: 1.55; flex-shrink: 0; } /* ============ ASSURANCE ROW ============ */ body.elyd-v2 .assurance { margin-top: 20px; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--elyd-silver); } body.elyd-v2 .assurance svg { width: 14px; height: 14px; stroke: var(--elyd-neon); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* ============ FINAL SECTION (2 cols) ============ */ body.elyd-v2 .final-section { padding: 96px 0; background: var(--elyd-black); border-bottom: 1px solid var(--elyd-border); position: relative; overflow: hidden; } body.elyd-v2 .final-section::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1000px; height: 800px; background: radial-gradient(circle, rgba(250,255,105,0.04) 0%, transparent 70%); filter: blur(120px); pointer-events: none; } body.elyd-v2 .final-cols { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; } body.elyd-v2 .final-left .eyebrow { margin-bottom: 14px; } body.elyd-v2 .final-left h2 { margin-bottom: 18px; } body.elyd-v2 .final-left .lead { margin-bottom: 24px; } /* ============ CTA BAND (fond néon) ============ */ body.elyd-v2 .cta-band { padding: 80px 0; background: var(--elyd-neon); color: var(--elyd-black); border-bottom: 1px solid var(--elyd-border); } body.elyd-v2 .cta-band .eyebrow { color: var(--elyd-black); } body.elyd-v2 .cta-band h2 { color: var(--elyd-black); } body.elyd-v2 .cta-band .lead { color: rgba(0,0,0,0.75); } body.elyd-v2 .cta-band .cta-band-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; } body.elyd-v2 .cta-band-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 6px; transition: transform .25s cubic-bezier(.16,1,.3,1), background .25s ease; color: var(--elyd-black); } body.elyd-v2 .cta-band-item:hover { background: rgba(0,0,0,0.06); transform: translateX(4px); } body.elyd-v2 .cta-band-item h4 { color: var(--elyd-black); font-size: 15px; font-weight: 700; margin-bottom: 2px; } body.elyd-v2 .cta-band-item p { color: rgba(0,0,0,0.75); font-size: 13px; line-height: 1.5; } /* ============ SIMULATOR (UI PANEL) ============ */ body.elyd-v2 .simulator { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; overflow: hidden; } body.elyd-v2 .sim-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--elyd-border); background: var(--elyd-near-black); } body.elyd-v2 .sim-bar .dot { width: 10px; height: 10px; border-radius: 50%; } body.elyd-v2 .sim-bar .dot.r { background: #ff5f56; } body.elyd-v2 .sim-bar .dot.o { background: #ffbd2e; } body.elyd-v2 .sim-bar .dot.g { background: #27c93f; } body.elyd-v2 .sim-bar .sim-label { margin-left: 10px; font-family: 'Inconsolata', monospace; font-size: 12px; color: var(--elyd-silver); } body.elyd-v2 .sim-body { padding: 28px; } body.elyd-v2 .sim-title { font-size: 20px; font-weight: 700; color: var(--elyd-white); margin-bottom: 8px; letter-spacing: -0.3px; } body.elyd-v2 .sim-desc { font-size: 13px; color: var(--elyd-silver); line-height: 1.55; margin-bottom: 24px; } body.elyd-v2 .sim-slider-label { display: block; font-size: 12px; color: var(--elyd-silver); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 12px; } body.elyd-v2 .sim-slider-wrap { position: relative; padding-bottom: 40px; margin-bottom: 24px; } body.elyd-v2 .simulator-slider { width: 100%; height: 6px; background: var(--elyd-border); border-radius: 4px; outline: none; -webkit-appearance: none; appearance: none; cursor: pointer; position: relative; z-index: 2; } body.elyd-v2 .simulator-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: var(--elyd-neon); border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 3px rgba(250,255,105,0.2); transition: transform .2s ease; } body.elyd-v2 .simulator-slider::-webkit-slider-thumb:hover { transform: scale(1.15); } body.elyd-v2 .simulator-slider::-moz-range-thumb { width: 18px; height: 18px; background: var(--elyd-neon); border-radius: 50%; cursor: pointer; border: none; box-shadow: 0 0 0 3px rgba(250,255,105,0.2); } body.elyd-v2 .simulator-slider::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--elyd-neon) 0%, var(--elyd-neon) var(--slider-progress, 6%), var(--elyd-border) var(--slider-progress, 6%), var(--elyd-border) 100%); height: 6px; border-radius: 4px; } body.elyd-v2 .simulator-ticks { display: flex; justify-content: space-between; position: absolute; width: calc(100% - 18px); left: 9px; top: 18px; pointer-events: none; } body.elyd-v2 .simulator-tick { display: flex; flex-direction: column; align-items: center; } body.elyd-v2 .simulator-tick-mark { width: 1px; height: 6px; background: var(--elyd-border); margin-bottom: 6px; } body.elyd-v2 .simulator-tick-label { font-size: 10px; color: var(--elyd-silver); font-family: 'Inconsolata', monospace; white-space: nowrap; } body.elyd-v2 .simulator-tick.major .simulator-tick-mark { height: 10px; background: rgba(250,255,105,0.4); } body.elyd-v2 .simulator-tick.major .simulator-tick-label { color: var(--elyd-neon); font-weight: 600; font-size: 11px; } body.elyd-v2 .sim-result { padding: 24px; background: var(--elyd-near-black); border: 1px solid var(--elyd-border); border-radius: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; } body.elyd-v2 .sim-result-block { text-align: left; } body.elyd-v2 .sim-result-label { font-size: 11px; color: var(--elyd-silver); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 6px; } body.elyd-v2 .sim-result-value { font-size: 28px; font-weight: 900; color: var(--elyd-white); letter-spacing: -1px; line-height: 1; } body.elyd-v2 .sim-result-value.accent { color: var(--elyd-neon); } body.elyd-v2 .sim-result-info { grid-column: 1 / -1; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--elyd-border); font-size: 12px; color: var(--elyd-silver); line-height: 1.5; text-align: center; } body.elyd-v2 .sim-included { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--elyd-border); } body.elyd-v2 .sim-included-title { font-size: 12px; color: var(--elyd-neon); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; margin-bottom: 18px; } body.elyd-v2 .sim-included-list { display: flex; flex-direction: column; gap: 14px; } body.elyd-v2 .sim-inc-item { display: flex; gap: 14px; align-items: flex-start; } body.elyd-v2 .sim-inc-item .icon-box-sm { margin-top: 2px; } body.elyd-v2 .sim-inc-item h5 { font-size: 14px; font-weight: 700; color: var(--elyd-white); margin: 0 0 4px; line-height: 1.3; } body.elyd-v2 .sim-inc-item p { font-size: 13px; color: var(--elyd-silver); line-height: 1.5; } /* ============ CONTACT FORM (card) ============ */ body.elyd-v2 .cform { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 32px; } body.elyd-v2 .cform .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } body.elyd-v2 .cform .form-group { margin-bottom: 14px; } body.elyd-v2 .cform label { display: block; font-size: 12px; font-weight: 600; color: var(--elyd-silver); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px; } body.elyd-v2 .cform input[type=text], body.elyd-v2 .cform input[type=email], body.elyd-v2 .cform input[type=tel], body.elyd-v2 .cform textarea, body.elyd-v2 .cform select { padding: 12px 14px !important; background: var(--elyd-black) !important; border: 1px solid var(--elyd-border) !important; border-radius: 4px !important; color: var(--elyd-white) !important; font-size: 14px; font-family: 'Inter', Arial, sans-serif !important; width: 100% !important; transition: border-color .2s ease; outline: none; } body.elyd-v2 .cform input::placeholder, body.elyd-v2 .cform textarea::placeholder { color: rgba(160,160,160,0.4); } body.elyd-v2 .cform input:focus, body.elyd-v2 .cform textarea:focus, body.elyd-v2 .cform select:focus { border-color: var(--elyd-neon) !important; background: var(--elyd-near-black) !important; } body.elyd-v2 .cform textarea { resize: vertical; min-height: 100px; } body.elyd-v2 .cform h3, body.elyd-v2 .cform .form-title { font-size: 22px; font-weight: 700; color: var(--elyd-white); letter-spacing: -0.5px; margin: 0 0 8px; } body.elyd-v2 .cform .form-desc, body.elyd-v2 .cform .form-subtitle { font-size: 13px; color: var(--elyd-silver); line-height: 1.55; margin: 0 0 24px; } body.elyd-v2 .cform .required { color: var(--elyd-neon); margin-left: 2px; } body.elyd-v2 .cform .form-submit { width: 100% !important; padding: 14px 28px !important; background: var(--elyd-neon) !important; color: #111 !important; font-size: 15px; font-weight: 700; border: 1px solid var(--elyd-neon) !important; border-radius: 6px; cursor: pointer; transition: all .25s cubic-bezier(.16,1,.3,1); margin-top: 10px; font-family: 'Inter', Arial, sans-serif !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } body.elyd-v2 .cform .form-submit:hover { background: #1d1d1d !important; color: var(--elyd-neon) !important; box-shadow: 0 0 20px rgba(250,255,105,0.25); } body.elyd-v2 .cform .form-privacy { margin-top: 14px; font-size: 12px; color: var(--elyd-silver); text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.5; } body.elyd-v2 .cform .form-privacy i, body.elyd-v2 .cform .form-privacy svg { color: var(--elyd-neon); stroke: var(--elyd-neon); font-size: 12px; width: 12px; height: 12px; } /* ============ INFO ROWS (liste adresse/tel/email) ============ */ body.elyd-v2 .info-rows { display: flex; flex-direction: column; gap: 18px; margin: 32px 0; } body.elyd-v2 .info-row { display: flex; gap: 14px; align-items: flex-start; } body.elyd-v2 .info-row .icon-box-sm { margin-top: 2px; } body.elyd-v2 .info-row .info-label { font-size: 11px; color: var(--elyd-silver); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; margin: 0 0 3px; } body.elyd-v2 .info-row .info-value { font-size: 15px; color: var(--elyd-white); line-height: 1.5; margin: 0; } body.elyd-v2 .info-row .info-value a { color: var(--elyd-white); text-decoration: none; transition: color .2s ease; } body.elyd-v2 .info-row .info-value a:hover { color: var(--elyd-neon); } /* ============ PAIN / FEAT CARD HORIZONTALE ============ */ body.elyd-v2 .feat-grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; } body.elyd-v2 .feat-card.horizontal { display: flex; gap: 18px; align-items: flex-start; } body.elyd-v2 .feat-card.horizontal .icon-box { flex-shrink: 0; margin: 0; } body.elyd-v2 .feat-card.horizontal h3 { margin-top: 0; } /* ============ FAN CARDS (solution section) ============ */ body.elyd-v2 .solution-fan-wrapper { display: flex; justify-content: center; padding: 60px 0; position: relative; } body.elyd-v2 .solution-fan { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%; max-width: 1100px; } body.elyd-v2 .sfan-card { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 32px 24px; position: relative; transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .25s ease; will-change: transform; } body.elyd-v2 .sfan-card:hover { transform: translateY(-6px); border-color: rgba(250, 255, 105, 0.35); box-shadow: 0 18px 40px rgba(0,0,0,0.5); z-index: 2; } body.elyd-v2 .sfan-number { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--elyd-neon); border-radius: 6px; background: rgba(250, 255, 105, 0.08); color: var(--elyd-neon); font-family: 'Inconsolata', monospace; font-weight: 700; font-size: 16px; margin-bottom: 16px; } body.elyd-v2 .sfan-title { font-size: 18px; font-weight: 700; color: var(--elyd-white); line-height: 1.3; margin-bottom: 10px; } body.elyd-v2 .sfan-text { font-size: 14px; color: var(--elyd-silver); line-height: 1.55; } /* ============ USECASE CARDS (3 étapes) ============ */ body.elyd-v2 .usecase-card { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 32px 28px; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .usecase-card:hover { transform: translateY(-4px); border-color: rgba(250, 255, 105, 0.25); } body.elyd-v2 .usecase-card .icon-box { margin-bottom: 18px; } body.elyd-v2 .usecase-card h3 { font-size: 18px; font-weight: 700; color: var(--elyd-white); line-height: 1.3; margin-bottom: 10px; } body.elyd-v2 .usecase-card p { font-size: 14px; color: var(--elyd-silver); line-height: 1.6; margin-bottom: 14px; } body.elyd-v2 .usecase-card p strong { color: var(--elyd-white); font-weight: 600; } body.elyd-v2 .usecase-card p a { color: var(--elyd-neon); text-decoration: none; border-bottom: 1px solid rgba(250,255,105,0.3); } body.elyd-v2 .usecase-card p a:hover { border-bottom-color: var(--elyd-neon); } body.elyd-v2 .usecase-card .usecase-result { margin-top: 16px; padding: 10px 14px; border: 1px solid rgba(250, 255, 105, 0.25); border-radius: 6px; background: rgba(250, 255, 105, 0.05); font-size: 13px; color: var(--elyd-neon); font-weight: 600; font-family: 'Inconsolata', monospace; } /* ============ FAQ ACCORDION ============ */ body.elyd-v2 .faq-list { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; max-width: 920px; margin-left: auto; margin-right: auto; } body.elyd-v2 .faq-item { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; overflow: hidden; transition: border-color .25s ease; } body.elyd-v2 .faq-item.open { border-color: rgba(250, 255, 105, 0.25); } body.elyd-v2 .faq-question { width: 100% !important; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px !important; background: transparent !important; border: none !important; color: var(--elyd-white) !important; font-size: 15px !important; font-weight: 600; text-align: left; cursor: pointer; font-family: 'Inter', Arial, sans-serif !important; line-height: 1.5; transition: color .2s ease; } body.elyd-v2 .faq-question:hover { color: var(--elyd-neon) !important; } body.elyd-v2 .faq-question i, body.elyd-v2 .faq-question svg { color: var(--elyd-silver); stroke: var(--elyd-silver); font-size: 13px; flex-shrink: 0; transition: transform .3s ease, color .2s ease; } body.elyd-v2 .faq-item.open .faq-question i, body.elyd-v2 .faq-item.open .faq-question svg { transform: rotate(180deg); color: var(--elyd-neon); stroke: var(--elyd-neon); } body.elyd-v2 .faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .faq-item.open .faq-answer { max-height: 400px; } body.elyd-v2 .faq-answer p { padding: 0 24px 20px; font-size: 14px; color: var(--elyd-silver); line-height: 1.7; } body.elyd-v2 .faq-answer p a { color: var(--elyd-neon); text-decoration: none; border-bottom: 1px solid rgba(250,255,105,0.3); } /* ============ STICKY CTA MOBILE ============ */ body.elyd-v2 .sticky-cta-mobile { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--elyd-near-black); border-top: 1px solid var(--elyd-border); padding: 12px 16px; z-index: 9998; box-shadow: 0 -4px 24px rgba(0,0,0,0.4); } body.elyd-v2 .sticky-cta-mobile a, body.elyd-v2 .sticky-cta-mobile button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100% !important; padding: 14px 20px !important; background: var(--elyd-neon) !important; color: #111 !important; font-size: 14px; font-weight: 700; border: none; border-radius: 6px; text-decoration: none; transition: all .25s ease; cursor: pointer; } body.elyd-v2 .sticky-cta-mobile a:hover, body.elyd-v2 .sticky-cta-mobile button:hover { background: #1d1d1d !important; color: var(--elyd-neon) !important; box-shadow: 0 0 20px rgba(250,255,105,0.25); } body.elyd-v2 .sticky-cta-mobile svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 768px) { body.elyd-v2 .sticky-cta-mobile { display: block; } } /* ============ SELECT DANS POPUP ============ */ body.elyd-v2 .popup-form select, body.elyd-v2 .popup-form-select { padding: 12px 14px !important; background: var(--elyd-black) !important; border: 1px solid var(--elyd-border) !important; border-radius: 4px !important; color: var(--elyd-white) !important; font-size: 14px; font-family: 'Inter', Arial, sans-serif !important; width: 100% !important; cursor: pointer; outline: none; transition: border-color .2s ease; } body.elyd-v2 .popup-form select:focus { border-color: var(--elyd-neon) !important; background: var(--elyd-near-black) !important; } body.elyd-v2 .popup-form select option { background: var(--elyd-card-bg); color: var(--elyd-white); } /* ============ HERO STATS (3 cols par défaut, adaptatif) ============ */ body.elyd-v2 .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 48px; border: 1px solid var(--elyd-border); border-radius: 8px; overflow: hidden; animation: elyd-fadeInUp .7s cubic-bezier(.16,1,.3,1) .65s backwards; } body.elyd-v2 .hero-stats:has(.hero-stat:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); } body.elyd-v2 .hero-stats:has(.hero-stat:nth-child(4)) { grid-template-columns: repeat(4, 1fr); } body.elyd-v2 .hero-stat { padding: 24px 22px; border-right: 1px solid var(--elyd-border); background: var(--elyd-card-bg); text-align: center; transition: background .25s ease; } body.elyd-v2 .hero-stat:last-child { border-right: none; } body.elyd-v2 .hero-stat:hover { background: #060606; } body.elyd-v2 .hero-stat .hero-stat-number { display: block; font-size: clamp(24px, 3vw, 32px); font-weight: 900; color: var(--elyd-neon); letter-spacing: -0.5px; line-height: 1; margin-bottom: 6px; } body.elyd-v2 .hero-stat .hero-stat-label { font-size: 12px; color: var(--elyd-silver); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } @media (max-width: 768px) { body.elyd-v2 .hero-stats { grid-template-columns: 1fr; } body.elyd-v2 .hero-stat { border-right: none; border-bottom: 1px solid var(--elyd-border); } body.elyd-v2 .hero-stat:last-child { border-bottom: none; } body.elyd-v2 .feat-grid-4 { grid-template-columns: 1fr; } body.elyd-v2 .solution-fan { grid-template-columns: 1fr; } } /* ============ HERO canvas tubes (bg) ============ */ body.elyd-v2 .hero #tubes-canvas, body.elyd-v2 .hero canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.7; } /* ============ ALIASES rétro-compat (pages legacy) ============ */ body.elyd-v2 .hero-section { /* alias pour .hero */ padding: 88px 0 72px; border-bottom: 1px solid var(--elyd-border); position: relative; overflow: hidden; } body.elyd-v2 .hero-section .container, body.elyd-v2 .hero-section .pitch-wrap { position: relative; z-index: 1; } body.elyd-v2 .hero-section .hero-content { text-align: center; position: relative; z-index: 1; } body.elyd-v2 .hero-eyebrow, body.elyd-v2 .section-eyebrow { display: block; font-size: 12px; font-weight: 600; color: var(--elyd-neon); text-transform: uppercase; letter-spacing: 1.4px; margin: 0 auto 18px; text-align: center; } body.elyd-v2 .hero-title { font-size: clamp(38px, 5.5vw, 64px); font-weight: 900; letter-spacing: -2px; line-height: 1.1; color: var(--elyd-white); margin: 0 0 18px; max-width: 960px; margin-left: auto; margin-right: auto; text-wrap: balance; } body.elyd-v2 .hero-title .highlight, body.elyd-v2 .hero-title .neon { color: var(--elyd-neon); } body.elyd-v2 .hero-subtitle { font-size: 18px; font-weight: 400; color: var(--elyd-silver); line-height: 1.65; max-width: 700px; margin: 0 auto; } body.elyd-v2 .hero-subtitle strong { color: var(--elyd-white); font-weight: 600; } body.elyd-v2 .section-headline { font-size: clamp(32px, 4vw, 52px); font-weight: 900; letter-spacing: -1.5px; line-height: 1.05; color: var(--elyd-white); text-align: center; margin-bottom: 22px; } body.elyd-v2 .section-headline .highlight { color: var(--elyd-neon); } body.elyd-v2 .section-subheadline { font-size: 18px; font-weight: 400; color: var(--elyd-silver); line-height: 1.65; max-width: 820px; margin: 0 auto 40px; text-align: center; } body.elyd-v2 .section-subheadline strong { color: var(--elyd-white); font-weight: 600; } body.elyd-v2 .rts-section-gap { padding: 96px 0 !important; background: var(--elyd-black); border-bottom: 1px solid var(--elyd-border); } body.elyd-v2 .rts-section-gap:last-of-type { border-bottom: none; } body.elyd-v2 .cta-button { display: inline-flex; align-items: center; gap: 8px; padding: 15px 30px !important; background: var(--elyd-neon) !important; color: #111 !important; font-size: 16px; font-weight: 700; border: 1px solid var(--elyd-neon) !important; border-radius: 6px; text-decoration: none; cursor: pointer; width: auto !important; transition: all .25s cubic-bezier(.16,1,.3,1); font-family: 'Inter', Arial, sans-serif !important; } body.elyd-v2 .cta-button:hover { background: #1d1d1d !important; color: var(--elyd-neon) !important; box-shadow: 0 0 20px rgba(250,255,105,0.25); } body.elyd-v2 .final-cta-section { padding: 96px 0 !important; background: var(--elyd-black); border-bottom: 1px solid var(--elyd-border); } body.elyd-v2 .final-cta-content { text-align: center; max-width: 900px; margin: 0 auto; position: relative; z-index: 1; } body.elyd-v2 .final-cta-eyebrow { display: inline-block; font-size: 12px; font-weight: 600; color: var(--elyd-neon); text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 18px; } body.elyd-v2 .final-cta-headline { font-size: clamp(32px, 4vw, 52px); font-weight: 900; letter-spacing: -1.5px; line-height: 1.05; color: var(--elyd-white); margin-bottom: 22px; } body.elyd-v2 .final-cta-subheadline { font-size: 18px; color: var(--elyd-silver); line-height: 1.65; max-width: 720px; margin: 0 auto 32px; } body.elyd-v2 .final-cta-benefits { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin: 0 auto 32px; text-align: left; } body.elyd-v2 .final-cta-benefit { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 6px; font-size: 14px; color: #e0e0e0; line-height: 1.5; } body.elyd-v2 .final-cta-benefit i { color: var(--elyd-neon); flex-shrink: 0; margin-top: 2px; } body.elyd-v2 .final-cta-button { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; padding: 0 28px !important; background: var(--elyd-neon) !important; color: #111 !important; font-size: 15px; font-weight: 700; line-height: 1 !important; border: 1px solid var(--elyd-neon) !important; border-radius: 6px; text-decoration: none; transition: all .25s cubic-bezier(.16,1,.3,1); width: auto !important; height: 50px !important; min-height: 50px !important; cursor: pointer; font-family: 'Inter', Arial, sans-serif !important; box-sizing: border-box; } body.elyd-v2 .final-cta-button:hover { background: #1d1d1d !important; color: var(--elyd-neon) !important; box-shadow: 0 0 20px rgba(250,255,105,0.25); } body.elyd-v2 .final-cta-assurance { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; font-size: 13px; color: var(--elyd-silver); text-align: center; flex-wrap: wrap; } body.elyd-v2 .final-cta-assurance i { color: var(--elyd-neon); } /* ============ PAIN / USECASE / SECTEUR GRIDS (alias legacy) ============ */ body.elyd-v2 .pain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; } body.elyd-v2 .pain-card { display: flex; gap: 18px; align-items: flex-start; background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 24px 22px; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .pain-card:hover { transform: translateY(-4px); border-color: rgba(250, 255, 105, 0.25); box-shadow: 0 18px 40px rgba(0,0,0,0.5); } body.elyd-v2 .pain-icon { flex-shrink: 0; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: var(--elyd-card-bg); border: 1px solid rgba(250, 255, 105, 0.3); border-radius: 10px; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .pain-icon svg { width: 24px; height: 24px; stroke: var(--elyd-neon); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } body.elyd-v2 .pain-card:hover .pain-icon { border-color: rgba(250, 255, 105, 0.6); box-shadow: 0 0 18px rgba(250, 255, 105, 0.15); } body.elyd-v2 .pain-card-content { flex: 1; } body.elyd-v2 .pain-card-title { font-size: 17px; font-weight: 700; color: var(--elyd-white); line-height: 1.3; margin: 2px 0 8px; } body.elyd-v2 .pain-card-text { font-size: 14px; color: var(--elyd-silver); line-height: 1.6; } body.elyd-v2 .usecases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; } body.elyd-v2 .usecase-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: var(--elyd-card-bg); border: 1px solid rgba(250, 255, 105, 0.3); border-radius: 10px; margin-bottom: 18px; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .usecase-icon svg { width: 24px; height: 24px; stroke: var(--elyd-neon); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } body.elyd-v2 .usecase-card:hover .usecase-icon { border-color: rgba(250, 255, 105, 0.6); box-shadow: 0 0 18px rgba(250, 255, 105, 0.15); } body.elyd-v2 .usecase-title { font-size: 18px; font-weight: 700; color: var(--elyd-white); line-height: 1.3; margin-bottom: 10px; } body.elyd-v2 .usecase-text { font-size: 14px; color: var(--elyd-silver); line-height: 1.6; margin-bottom: 14px; } /* ============ SOLUTION CTA ============ */ body.elyd-v2 .solution-cta { text-align: center; margin-top: 40px; } @media (max-width: 1024px) { body.elyd-v2 .usecases-grid { grid-template-columns: 1fr; } body.elyd-v2 .pain-grid { grid-template-columns: 1fr; } body.elyd-v2 .solution-fan { grid-template-columns: repeat(2, 1fr); } } /* Pain conclusion (quote-like) */ body.elyd-v2 .pain-conclusion { margin: 48px auto 0; max-width: 820px; padding: 28px 32px; border-left: 2px solid var(--elyd-neon); background: rgba(250, 255, 105, 0.03); border-radius: 6px; } body.elyd-v2 .pain-conclusion-text { font-size: 18px; color: var(--elyd-white); line-height: 1.55; font-weight: 500; } body.elyd-v2 .pain-conclusion-text .highlight { color: var(--elyd-neon); } /* ========================================================= SITE V2 — lp.php (Landing Site vitrine 450€) ========================================================= */ body.elyd-v2 .v2-section-tag { display: block; font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--elyd-neon); margin: 0 auto 18px; text-align: center; } body.elyd-v2 .v2-section-title { font-size: clamp(32px, 4vw, 52px); font-weight: 900; letter-spacing: -1.5px; line-height: 1.05; color: var(--elyd-white); margin-bottom: 20px; text-align: center; } body.elyd-v2 .v2-section-title .highlight { color: var(--elyd-neon); } body.elyd-v2 .v2-section-subtitle { font-size: 16px; color: var(--elyd-silver); line-height: 1.65; max-width: 820px; margin: 0 auto 40px; text-align: center; } /* ===== HERO V2 ===== */ body.elyd-v2 .v2-hero { min-height: 70vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 88px 0 72px !important; background: var(--elyd-black) !important; border-bottom: 1px solid var(--elyd-border); } body.elyd-v2 .v2-hero::before { content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 700px; height: 350px; background: radial-gradient(circle, rgba(250,255,105,0.025) 0%, transparent 70%); filter: blur(100px); z-index: 0; pointer-events: none; } body.elyd-v2 .v2-hero-content { text-align: center; max-width: 960px; margin: 0 auto; position: relative; z-index: 1; animation: elyd-fadeInUp .7s cubic-bezier(.16,1,.3,1) .1s backwards; } body.elyd-v2 .v2-hero-title { font-size: clamp(38px, 5.5vw, 64px); font-weight: 900; color: var(--elyd-white); line-height: 1.1; letter-spacing: -2px; margin-bottom: 24px; text-wrap: balance; animation: elyd-fadeInUp .7s cubic-bezier(.16,1,.3,1) .2s backwards; } body.elyd-v2 .v2-hero-title .highlight { color: var(--elyd-neon); background: none; text-decoration: none; } body.elyd-v2 .v2-hero-desc { font-size: 18px; color: var(--elyd-silver); margin-bottom: 16px; line-height: 1.65; max-width: 700px; margin-left: auto; margin-right: auto; animation: elyd-fadeInUp .7s cubic-bezier(.16,1,.3,1) .3s backwards; } body.elyd-v2 .v2-hero-desc strong { color: var(--elyd-white); font-weight: 600; } body.elyd-v2 .v2-hero-price { display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; animation: elyd-fadeInUp .7s cubic-bezier(.16,1,.3,1) .25s backwards; } body.elyd-v2 .v2-hero-price-old { font-size: 16px; color: #666 !important; text-decoration: line-through; font-weight: 400; } body.elyd-v2 .v2-hero-price-new { font-size: 34px; font-weight: 900; color: var(--elyd-neon) !important; letter-spacing: -1px; line-height: 1; font-family: 'Inconsolata', monospace; } body.elyd-v2 .v2-hero-price-ht { font-size: 14px; color: rgba(250, 255, 105, 0.7) !important; font-weight: 500; font-family: 'Inconsolata', monospace; } body.elyd-v2 .v2-hero-price-sep { width: 1px; height: 20px; background: var(--elyd-border); margin: 0 8px; align-self: center; } body.elyd-v2 .v2-hero-price-details { font-size: 13px; color: var(--elyd-silver) !important; font-weight: 500; letter-spacing: 0.3px; } body.elyd-v2 .v2-hero-buttons { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; animation: elyd-fadeInUp .7s cubic-bezier(.16,1,.3,1) .5s backwards; } body.elyd-v2 .v2-hero-cta { display: inline-flex; align-items: center; gap: 8px; padding: 15px 32px; background: var(--elyd-neon); color: #111 !important; font-size: 16px; font-weight: 700; border: 1px solid var(--elyd-neon); border-radius: 6px; text-decoration: none; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .v2-hero-cta:hover { background: #1d1d1d; color: var(--elyd-neon) !important; box-shadow: 0 0 20px rgba(250, 255, 105, 0.25); text-decoration: none; } body.elyd-v2 .v2-hero-secondary-cta { display: inline-flex; align-items: center; gap: 6px; padding: 15px 28px; background: transparent; color: var(--elyd-white) !important; font-size: 15px; font-weight: 600; border: 1px solid var(--elyd-olive); border-radius: 6px; text-decoration: none; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .v2-hero-secondary-cta:hover { background: var(--elyd-near-black); border-color: var(--elyd-neon); color: var(--elyd-neon) !important; text-decoration: none; } body.elyd-v2 .v2-hero-secondary-cta i { font-size: 12px; transition: transform .2s ease; } body.elyd-v2 .v2-hero-secondary-cta:hover i { transform: translateX(3px); } body.elyd-v2 .v2-hero-trust { margin-top: 22px; font-size: 13px; color: var(--elyd-silver) !important; animation: elyd-fadeInUp .7s cubic-bezier(.16,1,.3,1) .6s backwards; } body.elyd-v2 .v2-hero-trust i { color: var(--elyd-neon); margin-right: 6px; } body.elyd-v2 .v2-portfolio-link { color: var(--elyd-neon) !important; text-decoration: none; font-weight: 600; font-size: 15px; transition: opacity .2s ease; border-bottom: 1px solid rgba(250, 255, 105, 0.3); padding-bottom: 2px; } body.elyd-v2 .v2-portfolio-link:hover { color: var(--elyd-white) !important; border-bottom-color: var(--elyd-white); text-decoration: none; } body.elyd-v2 .v2-portfolio-link i { margin-left: 6px; font-size: 11px; } /* ===== PROOF BAR (3 stats) ===== */ body.elyd-v2 .v2-proof-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 640px; margin: 48px auto 0; border: 1px solid var(--elyd-border); border-radius: 8px; overflow: hidden; background: var(--elyd-card-bg); animation: elyd-fadeInUp .7s cubic-bezier(.16,1,.3,1) .65s backwards; } body.elyd-v2 .v2-proof-item { padding: 22px 20px; border-right: 1px solid var(--elyd-border); text-align: center; transition: background .25s ease; } body.elyd-v2 .v2-proof-item:last-child { border-right: none; } body.elyd-v2 .v2-proof-item:hover { background: #060606; } body.elyd-v2 .v2-proof-number { font-size: 26px; font-weight: 900; color: var(--elyd-neon) !important; display: block; line-height: 1.1; letter-spacing: -0.5px; } body.elyd-v2 .v2-proof-label { font-size: 11px; color: var(--elyd-silver) !important; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } /* ===== AUDIENCE CARDS (pour/pas pour) ===== */ body.elyd-v2 .v2-audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 860px; margin: 0 auto; } body.elyd-v2 .v2-audience-card { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 32px 28px; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .v2-audience-card.v2-for:hover { transform: translateY(-4px); border-color: rgba(34, 197, 94, 0.4); box-shadow: 0 18px 40px rgba(0,0,0,0.5); } body.elyd-v2 .v2-audience-card.v2-not-for:hover { transform: translateY(-4px); border-color: rgba(255, 107, 107, 0.4); box-shadow: 0 18px 40px rgba(0,0,0,0.5); } body.elyd-v2 .v2-audience-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 20px; color: var(--elyd-white); } body.elyd-v2 .v2-audience-card.v2-for h3 { color: #22c55e; } body.elyd-v2 .v2-audience-card.v2-not-for h3 { color: #ff6b6b; } body.elyd-v2 .v2-audience-card ul { list-style: none; padding: 0; margin: 0; } body.elyd-v2 .v2-audience-card li { padding: 12px 0 12px 28px; position: relative; font-size: 14px; border-bottom: 1px solid var(--elyd-border); color: var(--elyd-silver) !important; line-height: 1.6; } body.elyd-v2 .v2-audience-card li:last-child { border-bottom: none; } body.elyd-v2 .v2-audience-card li::before { position: absolute; left: 0; font-weight: 700; font-size: 14px; } body.elyd-v2 .v2-audience-card.v2-for li::before { content: "✓"; color: #22c55e; } body.elyd-v2 .v2-audience-card.v2-not-for li::before { content: "✕"; color: #ff6b6b; } /* ===== PROBLEM LIST ===== */ body.elyd-v2 .v2-problem-list { max-width: 720px; margin: 0 auto; list-style: none; padding: 0; } body.elyd-v2 .v2-problem-list li { display: flex; align-items: flex-start; gap: 16px; padding: 18px 22px; margin-bottom: 10px; font-size: 15px; background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; transition: all .25s cubic-bezier(.16,1,.3,1); color: var(--elyd-silver) !important; line-height: 1.6; } body.elyd-v2 .v2-problem-list li:hover { border-color: rgba(250, 255, 105, 0.25); transform: translateX(4px); } body.elyd-v2 .v2-problem-list li:last-child { margin-bottom: 0; } body.elyd-v2 .v2-problem-list li strong { color: var(--elyd-white) !important; font-weight: 600; } body.elyd-v2 .v2-problem-icon { font-size: 20px; line-height: 1; flex-shrink: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--elyd-near-black); border: 1px solid rgba(250, 255, 105, 0.2); border-radius: 6px; } /* ===== DELIVERABLES ===== */ body.elyd-v2 .v2-deliverables-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 820px; margin: 0 auto; } body.elyd-v2 .v2-deliverable { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 22px; display: flex; align-items: flex-start; gap: 14px; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .v2-deliverable:hover { border-color: rgba(250, 255, 105, 0.25); transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.5); } body.elyd-v2 .v2-deliverable-icon { color: var(--elyd-neon); font-size: 18px; flex-shrink: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--elyd-near-black); border: 1px solid rgba(250, 255, 105, 0.25); border-radius: 6px; margin-top: 2px; } body.elyd-v2 .v2-deliverable-text { font-size: 14px; color: var(--elyd-white) !important; margin: 0; line-height: 1.5; } body.elyd-v2 .v2-deliverable-text strong { display: block; margin-bottom: 4px; color: var(--elyd-white); font-weight: 700; font-size: 15px; } body.elyd-v2 .v2-deliverable-text span { color: var(--elyd-silver) !important; font-size: 13px; line-height: 1.55; } /* ===== PROCESS STEPS — flexbox centre dernier ligne ===== */ body.elyd-v2 .v2-process-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 28px; max-width: 1100px; margin: 0 auto; } body.elyd-v2 .v2-step { flex: 0 1 calc(25% - 21px); min-width: 200px; text-align: center; position: relative; } body.elyd-v2 .v2-process-steps:has(.v2-step:nth-child(3):last-child) .v2-step { flex: 0 1 calc(33.333% - 19px); } body.elyd-v2 .v2-step-number { width: 52px; height: 52px; border-radius: 8px; background: rgba(250, 255, 105, 0.08); border: 1px solid var(--elyd-neon); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; color: var(--elyd-neon); margin: 0 auto 18px; transition: all .25s ease; font-family: 'Inconsolata', monospace; } body.elyd-v2 .v2-step:hover .v2-step-number { background: var(--elyd-neon); color: #111; box-shadow: 0 0 20px rgba(250, 255, 105, 0.3); } body.elyd-v2 .v2-step h4 { font-size: 17px; font-weight: 700; color: var(--elyd-white); margin-bottom: 10px; } body.elyd-v2 .v2-step p { font-size: 14px; color: var(--elyd-silver) !important; margin: 0; line-height: 1.6; } body.elyd-v2 .v2-step-connector { position: absolute; top: 26px; right: -22px; width: 24px; height: 1px; background: linear-gradient(90deg, rgba(250, 255, 105, 0.4), transparent); } /* ===== TESTIMONIALS ===== */ body.elyd-v2 .v2-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1000px; margin: 0 auto; } body.elyd-v2 .v2-testimonial { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 28px 26px; transition: all .25s cubic-bezier(.16,1,.3,1); position: relative; } body.elyd-v2 .v2-testimonial:hover { transform: translateY(-4px); border-color: rgba(250, 255, 105, 0.25); box-shadow: 0 18px 40px rgba(0,0,0,0.5); } body.elyd-v2 .v2-testimonial-result { display: inline-block; background: rgba(34, 197, 94, 0.12); color: #22c55e !important; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 4px; margin-bottom: 14px; letter-spacing: 0.8px; text-transform: uppercase; font-family: 'Inconsolata', monospace; } body.elyd-v2 .v2-testimonial-text { font-size: 14px; font-style: italic; color: var(--elyd-silver) !important; margin-bottom: 18px; line-height: 1.7; } body.elyd-v2 .v2-testimonial-author { display: flex; align-items: center; gap: 12px; } body.elyd-v2 .v2-testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--elyd-border); } body.elyd-v2 .v2-testimonial-name { font-size: 13px; font-weight: 700; color: var(--elyd-white) !important; margin: 0; } body.elyd-v2 .v2-testimonial-role { font-size: 12px; color: var(--elyd-silver) !important; margin: 0; } /* ===== OFFER CARD ===== */ body.elyd-v2 .v2-offer-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1100px; margin: 0 auto; align-items: start; } body.elyd-v2 .v2-offer-card { background: var(--elyd-card-bg); border: 1px solid rgba(250, 255, 105, 0.4); border-radius: 8px; padding: 36px 32px; text-align: center; position: relative; overflow: hidden; transition: border-color .25s ease; } body.elyd-v2 .v2-offer-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--elyd-neon), transparent); } body.elyd-v2 .v2-offer-card:hover { border-color: rgba(250, 255, 105, 0.6); } body.elyd-v2 .v2-offer-badge { display: inline-block; background: rgba(250, 255, 105, 0.1); color: var(--elyd-neon) !important; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 5px 14px; border-radius: 9999px; margin-bottom: 18px; border: 1px solid rgba(250, 255, 105, 0.3); } body.elyd-v2 .v2-offer-name { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--elyd-silver) !important; margin-bottom: 12px; } body.elyd-v2 .v2-offer-price { font-size: 48px; font-weight: 900; color: var(--elyd-white); margin-bottom: 6px; letter-spacing: -2px; line-height: 1; } body.elyd-v2 .v2-offer-price span { font-size: 18px; font-weight: 500; color: var(--elyd-silver) !important; letter-spacing: 0; } body.elyd-v2 .v2-price-anchor { font-size: 16px; color: #666 !important; text-decoration: line-through; margin-right: 8px; font-weight: 400; } body.elyd-v2 .v2-offer-terms { font-size: 13px; color: var(--elyd-silver) !important; margin-bottom: 26px; } body.elyd-v2 .v2-offer-includes { text-align: left; list-style: none; padding: 0; margin: 0 0 26px; } body.elyd-v2 .v2-offer-includes li { padding: 10px 0 10px 24px; position: relative; font-size: 14px; border-bottom: 1px solid var(--elyd-border); color: #e0e0e0 !important; line-height: 1.55; } body.elyd-v2 .v2-offer-includes li:last-child { border-bottom: none; } body.elyd-v2 .v2-offer-includes li::before { content: "✓"; position: absolute; left: 0; color: var(--elyd-neon); font-weight: 700; } body.elyd-v2 .v2-offer-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 20px; background: var(--elyd-neon); color: #111 !important; font-size: 15px; font-weight: 700; border: 1px solid var(--elyd-neon); border-radius: 6px; cursor: pointer; transition: all .25s cubic-bezier(.16,1,.3,1); text-decoration: none; } body.elyd-v2 .v2-offer-cta .v2-cta-arrow { width: 18px; height: 18px; flex-shrink: 0; transition: transform .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .v2-offer-cta:hover { background: #1d1d1d; color: var(--elyd-neon) !important; box-shadow: 0 0 20px rgba(250, 255, 105, 0.25); text-decoration: none; } body.elyd-v2 .v2-offer-cta:hover .v2-cta-arrow { transform: translateX(4px); } /* Desktop : offre et form côte à côte → on remplace le CTA texte par une flèche pure */ @media (min-width: 1025px) { body.elyd-v2 .v2-offer-cta { display: inline-flex; width: auto; padding: 12px 24px; min-width: 64px; } body.elyd-v2 .v2-offer-cta .v2-cta-label { display: none; } body.elyd-v2 .v2-offer-cta .v2-cta-arrow { width: 22px; height: 22px; } } /* ===== FORM CARD V2 ===== */ body.elyd-v2 .v2-form-card { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 32px 28px; } body.elyd-v2 .v2-form-title { font-size: 20px; font-weight: 700; color: var(--elyd-white); margin-bottom: 8px; text-align: center; letter-spacing: -0.3px; } body.elyd-v2 .v2-form-subtitle { font-size: 13px; color: var(--elyd-silver) !important; margin-bottom: 24px; text-align: center; line-height: 1.55; } body.elyd-v2 .v2-form-group { margin-bottom: 14px; } body.elyd-v2 .v2-form-label { display: block; font-size: 12px; font-weight: 600; color: var(--elyd-silver); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.8px; } body.elyd-v2 .v2-form-label .required { color: var(--elyd-neon); } body.elyd-v2 .v2-form-input, body.elyd-v2 .v2-form-textarea { width: 100% !important; padding: 12px 14px !important; background: var(--elyd-black) !important; border: 1px solid var(--elyd-border) !important; border-radius: 4px !important; color: var(--elyd-white) !important; font-size: 14px; font-family: 'Inter', Arial, sans-serif !important; transition: border-color .2s ease; outline: none; } body.elyd-v2 .v2-form-input:focus, body.elyd-v2 .v2-form-textarea:focus { border-color: var(--elyd-neon) !important; background: var(--elyd-near-black) !important; } body.elyd-v2 .v2-form-input::placeholder, body.elyd-v2 .v2-form-textarea::placeholder { color: rgba(160, 160, 160, 0.4); font-size: 13px; } body.elyd-v2 .v2-form-textarea { resize: vertical; min-height: 90px; } body.elyd-v2 .v2-form-submit { width: 100% !important; padding: 14px 28px !important; background: var(--elyd-neon) !important; color: #111 !important; font-size: 15px; font-weight: 700; border: 1px solid var(--elyd-neon) !important; border-radius: 6px; cursor: pointer; transition: all .25s cubic-bezier(.16,1,.3,1); margin-top: 8px; font-family: 'Inter', Arial, sans-serif !important; } body.elyd-v2 .v2-form-submit:hover { background: #1d1d1d !important; color: var(--elyd-neon) !important; box-shadow: 0 0 20px rgba(250, 255, 105, 0.25); } body.elyd-v2 .v2-form-submit:disabled { opacity: .6; cursor: not-allowed; } body.elyd-v2 .v2-form-submit.success { background: var(--elyd-green) !important; color: var(--elyd-white) !important; border-color: var(--elyd-green-dark) !important; } body.elyd-v2 .v2-form-note { text-align: center; font-size: 12px; color: var(--elyd-silver) !important; margin-top: 14px; line-height: 1.5; } body.elyd-v2 .v2-form-note i { color: var(--elyd-neon); margin-right: 4px; } body.elyd-v2 .v2-form-message { margin-top: 14px; padding: 12px 14px; border-radius: 6px; text-align: center; font-weight: 600; display: none; font-size: 13px; } body.elyd-v2 .v2-form-message.success { background: rgba(34, 197, 94, 0.12); border: 1px solid #22c55e; color: #22c55e !important; display: block; } body.elyd-v2 .v2-form-message.error { background: rgba(255, 107, 107, 0.12); border: 1px solid #ff6b6b; color: #ff6b6b !important; display: block; } /* ===== FAQ V2 (alias v2-faq-*) ===== */ body.elyd-v2 .v2-faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 820px; margin: 0 auto; } body.elyd-v2 .v2-faq-item { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; overflow: hidden; transition: border-color .25s ease; } body.elyd-v2 .v2-faq-item.open { border-color: rgba(250, 255, 105, 0.25); } body.elyd-v2 .v2-faq-question { width: 100% !important; background: transparent !important; border: none !important; padding: 20px 24px !important; display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; text-align: left; font-family: 'Inter', Arial, sans-serif !important; } body.elyd-v2 .v2-faq-question span { font-size: 15px; font-weight: 600; color: var(--elyd-white) !important; line-height: 1.5; } body.elyd-v2 .v2-faq-question i { color: var(--elyd-silver); transition: transform .3s ease, color .2s ease; font-size: 13px; flex-shrink: 0; } body.elyd-v2 .v2-faq-item.open .v2-faq-question i { transform: rotate(180deg); color: var(--elyd-neon); } body.elyd-v2 .v2-faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .v2-faq-item.open .v2-faq-answer { max-height: 400px; } body.elyd-v2 .v2-faq-answer p { padding: 0 24px 20px; font-size: 14px; color: var(--elyd-silver) !important; line-height: 1.7; margin: 0; } /* ========================================================= OPTI-SITE (opti-site.php) — composants additionnels ========================================================= */ /* Backgrounds décoratifs (wrapper sections) */ body.elyd-v2 .v2-bg-gradient-down, body.elyd-v2 .v2-bg-gradient-up { background: var(--elyd-black) !important; padding: 96px 0 !important; border-bottom: 1px solid var(--elyd-border); position: relative; overflow: hidden; } body.elyd-v2 .v2-bg-gradient-down::before, body.elyd-v2 .v2-bg-gradient-up::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 900px; height: 400px; background: radial-gradient(circle, rgba(250,255,105,0.04) 0%, transparent 70%); filter: blur(120px); pointer-events: none; z-index: 0; } body.elyd-v2 .v2-bg-gradient-down::before { top: 0; } body.elyd-v2 .v2-bg-gradient-up::before { bottom: 0; } body.elyd-v2 .v2-bg-gradient-down .container, body.elyd-v2 .v2-bg-gradient-up .container { position: relative; z-index: 1; } /* Hero badge (pill) */ body.elyd-v2 .v2-hero-badge { display: inline-block; padding: 6px 14px; background: rgba(250, 255, 105, 0.08); border: 1px solid rgba(250, 255, 105, 0.25); color: var(--elyd-neon); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; border-radius: 9999px; margin-bottom: 22px; } /* Variante red pour section tag "Tu reconnais ça ?" */ body.elyd-v2 .v2-section-tag.v2-tag-red { color: #ff6b6b !important; } /* Before/After cards */ body.elyd-v2 .v2-ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 900px; margin: 0 auto; } body.elyd-v2 .v2-ba-card { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 32px 28px; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .v2-ba-card.v2-before { border-left: 3px solid #ff6b6b; } body.elyd-v2 .v2-ba-card.v2-after { border-left: 3px solid var(--elyd-neon); } body.elyd-v2 .v2-ba-card h3 { font-size: 16px; font-weight: 700; color: var(--elyd-white); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 18px; } body.elyd-v2 .v2-ba-card.v2-before h3 { color: #ff6b6b; } body.elyd-v2 .v2-ba-card.v2-after h3 { color: var(--elyd-neon); } body.elyd-v2 .v2-ba-card ul { list-style: none; padding: 0; margin: 0; } body.elyd-v2 .v2-ba-card li { padding: 10px 0 10px 26px; position: relative; font-size: 14px; color: var(--elyd-silver); line-height: 1.55; border-bottom: 1px solid var(--elyd-border); } body.elyd-v2 .v2-ba-card li:last-child { border-bottom: none; } body.elyd-v2 .v2-ba-card li::before { position: absolute; left: 0; font-weight: 700; } body.elyd-v2 .v2-ba-card.v2-before li::before { content: "✕"; color: #ff6b6b; } body.elyd-v2 .v2-ba-card.v2-after li::before { content: "✓"; color: var(--elyd-neon); } /* Action cards (2 col: description | example) */ body.elyd-v2 .v2-action-card { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 32px 28px; margin-bottom: 20px; transition: border-color .25s ease; } body.elyd-v2 .v2-action-card:hover { border-color: rgba(250, 255, 105, 0.25); } body.elyd-v2 .v2-action-tag { display: inline-block; padding: 4px 12px; background: rgba(250, 255, 105, 0.1); border: 1px solid rgba(250, 255, 105, 0.3); color: var(--elyd-neon); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; border-radius: 9999px; margin-bottom: 14px; } body.elyd-v2 .v2-action-card h3 { font-size: 19px; font-weight: 700; color: var(--elyd-white); line-height: 1.3; margin-bottom: 12px; } body.elyd-v2 .v2-action-desc { font-size: 14px; color: var(--elyd-silver); line-height: 1.65; margin: 0; } /* Example box (right side of action) */ body.elyd-v2 .v2-example-box { padding: 20px 22px; background: var(--elyd-near-black); border: 1px solid var(--elyd-border); border-radius: 6px; } body.elyd-v2 .v2-example-box h4 { font-size: 11px; font-weight: 700; color: var(--elyd-silver); text-transform: uppercase; letter-spacing: 1.2px; margin: 0 0 14px; } body.elyd-v2 .v2-ex-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin: 14px 0 6px; } body.elyd-v2 .v2-ex-label.red { color: #ff6b6b; } body.elyd-v2 .v2-ex-label.green { color: var(--elyd-neon); } body.elyd-v2 .v2-ex-label:first-of-type { margin-top: 0; } body.elyd-v2 .v2-ex-before { padding: 10px 14px; background: rgba(255, 107, 107, 0.06); border: 1px solid rgba(255, 107, 107, 0.2); border-radius: 4px; font-size: 13px; color: #e0e0e0; line-height: 1.55; font-family: 'Inconsolata', monospace; } body.elyd-v2 .v2-ex-after { padding: 10px 14px; background: rgba(250, 255, 105, 0.05); border: 1px solid rgba(250, 255, 105, 0.25); border-radius: 4px; font-size: 13px; color: #e0e0e0; line-height: 1.55; font-family: 'Inconsolata', monospace; } body.elyd-v2 .v2-ex-note { font-size: 12px; color: var(--elyd-silver); margin: 12px 0 0; font-style: italic; line-height: 1.5; } /* Process steps avec step-time */ body.elyd-v2 .v2-step-time { display: inline-block; margin-top: 12px; padding: 4px 10px; background: rgba(250, 255, 105, 0.08); border: 1px solid rgba(250, 255, 105, 0.25); color: var(--elyd-neon); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; border-radius: 9999px; font-family: 'Inconsolata', monospace; } /* Stats grid (4 stats) */ body.elyd-v2 .v2-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: 900px; margin: 0 auto 30px; border: 1px solid var(--elyd-border); border-radius: 8px; overflow: hidden; background: var(--elyd-card-bg); } body.elyd-v2 .v2-stat-card { padding: 30px 22px; border-right: 1px solid var(--elyd-border); text-align: center; transition: background .25s ease; } body.elyd-v2 .v2-stat-card:last-child { border-right: none; } body.elyd-v2 .v2-stat-card:hover { background: #060606; } body.elyd-v2 .v2-stat-num { display: block; font-size: clamp(32px, 3.5vw, 44px); font-weight: 900; color: var(--elyd-neon); line-height: 1; letter-spacing: -1px; margin-bottom: 8px; font-family: 'Inconsolata', monospace; } body.elyd-v2 .v2-stat-label { font-size: 12px; color: var(--elyd-silver); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; } /* Pricing grid (opti-site : 2 cards côte à côte) */ body.elyd-v2 .v2-pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 960px; margin: 0 auto; align-items: stretch; padding-top: 18px; } body.elyd-v2 .v2-pricing-grid .v2-offer-card { display: flex; flex-direction: column; padding: 40px 32px; margin: 0; } body.elyd-v2 .v2-pricing-grid .v2-offer-card.v2-featured { border-color: var(--elyd-neon); background: linear-gradient(180deg, rgba(250, 255, 105, 0.04), var(--elyd-card-bg)); } body.elyd-v2 .v2-pricing-grid .v2-offer-includes { flex-grow: 1; } body.elyd-v2 .v2-offer-roi { margin: 20px 0; padding: 14px 16px; background: rgba(250, 255, 105, 0.04); border: 1px solid rgba(250, 255, 105, 0.2); border-radius: 6px; text-align: left; } body.elyd-v2 .v2-offer-roi .roi-label { font-size: 11px; font-weight: 700; color: var(--elyd-neon); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 4px; } body.elyd-v2 .v2-offer-roi p { font-size: 13px; color: #e0e0e0; line-height: 1.55; margin: 0; } /* v2-featured variant */ body.elyd-v2 .v2-offer-card.v2-featured .v2-offer-badge { background: var(--elyd-neon) !important; color: #111 !important; border-color: var(--elyd-neon) !important; box-shadow: 0 4px 20px rgba(250, 255, 105, 0.25); font-weight: 800; } /* CTA Final (opti-site) */ body.elyd-v2 .v2-cta-final { padding: 100px 0 !important; background: var(--elyd-black); border-bottom: 1px solid var(--elyd-border); position: relative; overflow: hidden; text-align: center; } body.elyd-v2 .v2-cta-final::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 900px; height: 600px; background: radial-gradient(circle, rgba(250,255,105,0.06) 0%, transparent 70%); filter: blur(120px); pointer-events: none; } body.elyd-v2 .v2-cta-final .container { position: relative; z-index: 1; } body.elyd-v2 .v2-cta-final-title { font-size: clamp(32px, 4vw, 52px); font-weight: 900; letter-spacing: -1.5px; line-height: 1.1; color: var(--elyd-white); margin-bottom: 18px; text-align: center; } body.elyd-v2 .v2-cta-final-title .highlight { color: var(--elyd-neon); } body.elyd-v2 .v2-cta-final-desc { font-size: 17px; color: var(--elyd-silver); line-height: 1.65; max-width: 720px; margin: 0 auto 28px; } body.elyd-v2 .v2-cta-final-note { margin-top: 18px; font-size: 13px; color: var(--elyd-silver); } body.elyd-v2 .v2-cta-final-note i { color: var(--elyd-neon); margin-right: 4px; } /* Icon-boxing pour v2-problem-icon quand SVG */ body.elyd-v2 .v2-problem-icon svg { width: 20px; height: 20px; stroke: var(--elyd-neon); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* Responsive opti-site */ @media (max-width: 1024px) { body.elyd-v2 .v2-action-card { grid-template-columns: 1fr; } body.elyd-v2 .v2-ba-grid { grid-template-columns: 1fr; } body.elyd-v2 .v2-stats-grid { grid-template-columns: repeat(2, 1fr); } body.elyd-v2 .v2-stat-card { border-right: none; border-bottom: 1px solid var(--elyd-border); } body.elyd-v2 .v2-stat-card:nth-child(odd) { border-right: 1px solid var(--elyd-border); } body.elyd-v2 .v2-stat-card:nth-last-child(-n+2) { border-bottom: none; } body.elyd-v2 .v2-pricing-grid { grid-template-columns: 1fr; max-width: 500px; } } /* ========================================================= FB-GROUPES (fb-groupes.php) ========================================================= */ /* Hero badge Facebook */ body.elyd-v2 .hero-badge-fb { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; background: rgba(250, 255, 105, 0.08); border: 1px solid rgba(250, 255, 105, 0.25); color: var(--elyd-neon); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; border-radius: 9999px; margin-bottom: 22px; } body.elyd-v2 .hero-badge-fb i { font-size: 14px; } /* How steps (4 étapes avec numéro + icône) */ body.elyd-v2 .how-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; } body.elyd-v2 .how-step { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 32px 26px; position: relative; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .how-step:hover { transform: translateY(-4px); border-color: rgba(250, 255, 105, 0.25); } body.elyd-v2 .how-step-number { position: absolute; top: 18px; right: 22px; font-family: 'Inconsolata', monospace; font-size: 13px; color: var(--elyd-silver); letter-spacing: 0.5px; } body.elyd-v2 .how-step-icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: var(--elyd-card-bg); border: 1px solid rgba(250, 255, 105, 0.3); border-radius: 10px; margin-bottom: 18px; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .how-step-icon svg { width: 24px; height: 24px; stroke: var(--elyd-neon); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } body.elyd-v2 .how-step:hover .how-step-icon { border-color: rgba(250, 255, 105, 0.6); box-shadow: 0 0 18px rgba(250, 255, 105, 0.15); } body.elyd-v2 .how-step-title { font-size: 17px; font-weight: 700; color: var(--elyd-white); line-height: 1.3; margin-bottom: 10px; } body.elyd-v2 .how-step-text { font-size: 13px; color: var(--elyd-silver); line-height: 1.6; } /* Content grid (4 formats) */ body.elyd-v2 .content-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; } body.elyd-v2 .content-card { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 28px 24px; text-align: center; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .content-card:hover { transform: translateY(-4px); border-color: rgba(250, 255, 105, 0.25); } body.elyd-v2 .content-card-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--elyd-card-bg); border: 1px solid rgba(250, 255, 105, 0.3); border-radius: 10px; margin-bottom: 14px; } body.elyd-v2 .content-card-icon svg { width: 22px; height: 22px; stroke: var(--elyd-neon); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } body.elyd-v2 .content-card-title { font-size: 16px; font-weight: 700; color: var(--elyd-white); margin-bottom: 8px; } body.elyd-v2 .content-card-desc { font-size: 13px; color: var(--elyd-silver); line-height: 1.5; } /* Pricing section (simulator fb-groupes) */ body.elyd-v2 .pricing-section { padding: 96px 0 !important; background: var(--elyd-black); border-bottom: 1px solid var(--elyd-border); position: relative; overflow: hidden; } body.elyd-v2 .pricing-section::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1000px; height: 800px; background: radial-gradient(circle, rgba(250,255,105,0.04) 0%, transparent 70%); filter: blur(120px); pointer-events: none; } body.elyd-v2 .pricing-container { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; } /* Pricing tiers (6 cards grid avec selection) */ body.elyd-v2 .pricing-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 32px 0; } body.elyd-v2 .pricing-tier { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 28px 24px; text-align: center; cursor: pointer; position: relative; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .pricing-tier:hover { transform: translateY(-4px); border-color: rgba(250, 255, 105, 0.3); } body.elyd-v2 .pricing-tier.selected { border-color: var(--elyd-neon); background: linear-gradient(180deg, rgba(250, 255, 105, 0.06), var(--elyd-card-bg)); box-shadow: 0 0 0 1px var(--elyd-neon), 0 12px 40px rgba(250, 255, 105, 0.12); } body.elyd-v2 .pricing-tier-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 14px; background: var(--elyd-neon); color: #111; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; border-radius: 9999px; white-space: nowrap; box-shadow: 0 4px 20px rgba(250, 255, 105, 0.25); z-index: 3; } body.elyd-v2 .pricing-tier-volume { font-size: 32px; font-weight: 900; color: var(--elyd-white); line-height: 1; letter-spacing: -1px; font-family: 'Inconsolata', monospace; margin-bottom: 4px; } body.elyd-v2 .pricing-tier.selected .pricing-tier-volume { color: var(--elyd-neon); } body.elyd-v2 .pricing-tier-unit { font-size: 11px; color: var(--elyd-silver); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; margin-bottom: 16px; } body.elyd-v2 .pricing-tier-price { font-size: 36px; font-weight: 900; color: var(--elyd-neon); line-height: 1; letter-spacing: -1px; font-family: 'Inconsolata', monospace; margin-bottom: 4px; } body.elyd-v2 .pricing-tier-currency { font-size: 20px; font-weight: 700; margin-left: 2px; } body.elyd-v2 .pricing-tier-ht { font-size: 11px; color: var(--elyd-silver); font-family: 'Inconsolata', monospace; margin-bottom: 14px; } body.elyd-v2 .pricing-tier-ppu { font-size: 12px; color: var(--elyd-silver); padding-top: 12px; border-top: 1px solid var(--elyd-border); font-style: italic; } /* Pricing result box */ body.elyd-v2 .pricing-result { margin-top: 28px; padding: 32px; background: var(--elyd-card-bg); border: 1px solid rgba(250, 255, 105, 0.25); border-radius: 8px; } body.elyd-v2 .pricing-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; } body.elyd-v2 .pricing-result-label { font-size: 11px; color: var(--elyd-silver); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; margin: 0 0 8px; } body.elyd-v2 .pricing-result-value { font-size: 28px; font-weight: 900; color: var(--elyd-neon); line-height: 1; letter-spacing: -1px; font-family: 'Inconsolata', monospace; margin: 0; } body.elyd-v2 .pricing-result-value.secondary { color: var(--elyd-white); } body.elyd-v2 .pricing-result-separator { width: 80px; height: 1px; background: var(--elyd-border); margin: 24px auto; } body.elyd-v2 .pricing-result-cta-wrapper { text-align: center; } body.elyd-v2 .pricing-result-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 32px; background: var(--elyd-neon) !important; color: #111 !important; font-size: 15px; font-weight: 700; border: 1px solid var(--elyd-neon) !important; border-radius: 6px; cursor: pointer; transition: all .25s cubic-bezier(.16,1,.3,1); font-family: 'Inter', Arial, sans-serif !important; width: auto !important; height: 50px; line-height: 1; } body.elyd-v2 .pricing-result-cta:hover { background: #1d1d1d !important; color: var(--elyd-neon) !important; box-shadow: 0 0 20px rgba(250, 255, 105, 0.25); } body.elyd-v2 .pricing-result-note { text-align: center; margin-top: 18px; font-size: 12px; color: var(--elyd-silver); } body.elyd-v2 .pricing-hint { text-align: center; margin-top: 20px; padding: 14px 18px; background: var(--elyd-near-black); border: 1px solid var(--elyd-border); border-radius: 6px; font-size: 13px; color: var(--elyd-silver); font-style: italic; } /* Benefits grid (6 cards) */ body.elyd-v2 .benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; } body.elyd-v2 .benefit-card { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 28px 24px; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .benefit-card:hover { transform: translateY(-4px); border-color: rgba(250, 255, 105, 0.25); } body.elyd-v2 .benefit-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--elyd-card-bg); border: 1px solid rgba(250, 255, 105, 0.3); border-radius: 10px; margin-bottom: 16px; } body.elyd-v2 .benefit-icon svg { width: 22px; height: 22px; stroke: var(--elyd-neon); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } body.elyd-v2 .benefit-title { font-size: 17px; font-weight: 700; color: var(--elyd-white); line-height: 1.3; margin-bottom: 10px; } body.elyd-v2 .benefit-text { font-size: 14px; color: var(--elyd-silver); line-height: 1.6; margin: 0; } body.elyd-v2 .benefit-text strong { color: var(--elyd-white); font-weight: 600; } /* Benefits stat banner */ body.elyd-v2 .benefits-stat-banner { margin: 56px auto 0; max-width: 860px; padding: 28px 32px; border-left: 2px solid var(--elyd-neon); background: rgba(250, 255, 105, 0.03); border-radius: 6px; text-align: center; } body.elyd-v2 .benefits-stat-banner p { font-size: 17px; color: var(--elyd-white); line-height: 1.6; margin: 0; } body.elyd-v2 .benefits-stat-banner .highlight { color: var(--elyd-neon); font-weight: 800; } body.elyd-v2 .benefits-stat-banner strong { color: var(--elyd-neon); font-weight: 600; } /* Popup summary box */ body.elyd-v2 .popup-summary-box { padding: 14px 18px; background: rgba(250, 255, 105, 0.05); border: 1px solid rgba(250, 255, 105, 0.2); border-radius: 6px; font-size: 13px; color: #e0e0e0; line-height: 1.55; margin-bottom: 18px; } body.elyd-v2 .popup-summary-box strong { color: var(--elyd-neon); } /* Responsive fb-groupes */ @media (max-width: 1024px) { body.elyd-v2 .how-steps { grid-template-columns: repeat(2, 1fr); } body.elyd-v2 .content-grid { grid-template-columns: repeat(2, 1fr); } body.elyd-v2 .pricing-tiers { grid-template-columns: repeat(2, 1fr); } body.elyd-v2 .benefits-grid { grid-template-columns: repeat(2, 1fr); } body.elyd-v2 .pricing-result-grid { grid-template-columns: 1fr; gap: 14px; } } @media (max-width: 768px) { body.elyd-v2 .how-steps, body.elyd-v2 .content-grid, body.elyd-v2 .pricing-tiers, body.elyd-v2 .benefits-grid { grid-template-columns: 1fr; } body.elyd-v2 .pricing-result { padding: 24px 20px; } } /* ========================================================= DATA (data.php) ========================================================= */ /* Hero promo banner */ body.elyd-v2 .hero-promo-banner { display: inline-block; padding: 10px 20px; background: rgba(250, 255, 105, 0.08); border: 1px solid rgba(250, 255, 105, 0.35); color: #e0e0e0; font-size: 13px; border-radius: 9999px; margin-bottom: 22px; line-height: 1.4; } body.elyd-v2 .hero-promo-banner strong { color: var(--elyd-neon); font-weight: 700; } /* Solution steps (4 étapes) */ body.elyd-v2 .solution-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; } body.elyd-v2 .solution-step { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 32px 26px; position: relative; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .solution-step:hover { transform: translateY(-4px); border-color: rgba(250, 255, 105, 0.25); } body.elyd-v2 .solution-step-number { position: absolute; top: 18px; right: 22px; font-family: 'Inconsolata', monospace; font-size: 13px; color: var(--elyd-silver); letter-spacing: 0.5px; } body.elyd-v2 .solution-step-icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: var(--elyd-card-bg); border: 1px solid rgba(250, 255, 105, 0.3); border-radius: 10px; margin-bottom: 18px; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .solution-step-icon svg { width: 24px; height: 24px; stroke: var(--elyd-neon); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } body.elyd-v2 .solution-step:hover .solution-step-icon { border-color: rgba(250, 255, 105, 0.6); box-shadow: 0 0 18px rgba(250, 255, 105, 0.15); } body.elyd-v2 .solution-step-title { font-size: 17px; font-weight: 700; color: var(--elyd-white); line-height: 1.3; margin-bottom: 10px; } body.elyd-v2 .solution-step-text { font-size: 13px; color: var(--elyd-silver); line-height: 1.6; } /* Act dropdown (activity selector) */ body.elyd-v2 .act-dropdown { position: relative; width: 100%; max-width: 520px; margin: 0 auto; } body.elyd-v2 .act-trigger { width: 100% !important; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px !important; background: var(--elyd-near-black) !important; border: 1px solid var(--elyd-border) !important; border-radius: 6px; color: var(--elyd-white) !important; font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color .25s ease; font-family: 'Inter', Arial, sans-serif !important; text-align: left; } body.elyd-v2 .act-trigger:hover { border-color: rgba(250, 255, 105, 0.3) !important; } body.elyd-v2 .act-dropdown.open .act-trigger { border-color: var(--elyd-neon) !important; } body.elyd-v2 .act-chevron { color: var(--elyd-silver); transition: transform .2s ease; flex-shrink: 0; } body.elyd-v2 .act-dropdown.open .act-chevron { transform: rotate(180deg); color: var(--elyd-neon); } body.elyd-v2 .act-panel { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 6px; overflow: hidden; z-index: 10; box-shadow: 0 12px 40px rgba(0,0,0,0.6); } body.elyd-v2 .act-dropdown.open .act-panel { display: block; } body.elyd-v2 .act-search-wrap { padding: 12px; border-bottom: 1px solid var(--elyd-border); } body.elyd-v2 .act-search-input { width: 100% !important; padding: 10px 14px !important; background: var(--elyd-black) !important; border: 1px solid var(--elyd-border) !important; border-radius: 4px !important; color: var(--elyd-white) !important; font-size: 13px; outline: none; font-family: 'Inter', Arial, sans-serif !important; } body.elyd-v2 .act-search-input:focus { border-color: var(--elyd-neon) !important; } body.elyd-v2 .act-list { max-height: 280px; overflow-y: auto; padding: 4px 0; } body.elyd-v2 .act-list .act-item { padding: 10px 16px; font-size: 13px; color: #e0e0e0; cursor: pointer; transition: background .15s ease, color .15s ease; } body.elyd-v2 .act-list .act-item:hover { background: rgba(250, 255, 105, 0.08); color: var(--elyd-neon); } /* Zone choice (4 buttons) */ body.elyd-v2 .zone-choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 8px; } body.elyd-v2 .zone-choice-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px !important; background: var(--elyd-near-black) !important; border: 1px solid var(--elyd-border) !important; border-radius: 6px; color: var(--elyd-white) !important; cursor: pointer; transition: all .2s ease; text-align: left; font-family: 'Inter', Arial, sans-serif !important; width: 100% !important; } body.elyd-v2 .zone-choice-card:hover { border-color: rgba(250, 255, 105, 0.3) !important; } body.elyd-v2 .zone-choice-card.active { border-color: var(--elyd-neon) !important; background: rgba(250, 255, 105, 0.06) !important; } body.elyd-v2 .zone-card-icon { font-size: 26px; line-height: 1; flex-shrink: 0; } body.elyd-v2 .zone-card-label { display: block; font-size: 14px; font-weight: 600; color: var(--elyd-white); margin-bottom: 3px; } body.elyd-v2 .zone-choice-card.active .zone-card-label { color: var(--elyd-neon); } body.elyd-v2 .zone-card-desc { display: block; font-size: 12px; color: var(--elyd-silver); line-height: 1.4; } /* Zone detail panels (régions / dept / villes) */ body.elyd-v2 .zone-detail-panel { display: none; margin-top: 16px; padding: 20px; background: var(--elyd-near-black); border: 1px solid var(--elyd-border); border-radius: 6px; } body.elyd-v2 .zone-detail-panel.visible { display: block; } body.elyd-v2 .zone-regions-grid, body.elyd-v2 .zone-depts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; } body.elyd-v2 .zone-region-item, body.elyd-v2 .zone-dept-item { padding: 10px 12px; background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 4px; color: #e0e0e0; font-size: 13px; cursor: pointer; transition: all .15s ease; text-align: left; } body.elyd-v2 .zone-region-item:hover, body.elyd-v2 .zone-dept-item:hover { border-color: rgba(250, 255, 105, 0.3); } body.elyd-v2 .zone-region-item.selected, body.elyd-v2 .zone-dept-item.selected { background: rgba(250, 255, 105, 0.08); border-color: var(--elyd-neon); color: var(--elyd-neon); } body.elyd-v2 .zone-dept-search { width: 100% !important; padding: 12px 16px !important; background: var(--elyd-black) !important; border: 1px solid var(--elyd-border) !important; border-radius: 4px !important; color: var(--elyd-white) !important; font-size: 13px; margin-bottom: 14px; outline: none; font-family: 'Inter', Arial, sans-serif !important; } body.elyd-v2 .zone-dept-search:focus { border-color: var(--elyd-neon) !important; } body.elyd-v2 .zone-villes-input { width: 100% !important; padding: 14px 18px !important; background: var(--elyd-black) !important; border: 1px solid var(--elyd-border) !important; border-radius: 4px !important; color: var(--elyd-white) !important; font-size: 13px; min-height: 100px; resize: vertical; outline: none; font-family: 'Inter', Arial, sans-serif !important; } body.elyd-v2 .zone-villes-input:focus { border-color: var(--elyd-neon) !important; } body.elyd-v2 .zone-villes-hint { margin-top: 8px; font-size: 12px; color: var(--elyd-silver); line-height: 1.5; font-style: italic; } body.elyd-v2 .zone-selection-count { margin-top: 12px; font-size: 12px; color: var(--elyd-neon); font-weight: 600; font-family: 'Inconsolata', monospace; } /* Slider volume bubble */ body.elyd-v2 .simulator-slider-wrapper { position: relative; padding: 30px 0 0; } body.elyd-v2 .slider-bubble { position: absolute; top: 0; left: 0; padding: 4px 12px; background: var(--elyd-neon); color: #111; font-size: 12px; font-weight: 800; border-radius: 6px; letter-spacing: 0.4px; transform: translateX(-50%); transition: left .2s ease; font-family: 'Inconsolata', monospace; white-space: nowrap; } body.elyd-v2 .simulator-price-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 28px; } body.elyd-v2 .sim-tier { background: var(--elyd-near-black); border: 1px solid var(--elyd-border); border-radius: 6px; padding: 14px 12px; text-align: center; transition: all .2s ease; } body.elyd-v2 .sim-tier.active { border-color: var(--elyd-neon); background: rgba(250, 255, 105, 0.06); } body.elyd-v2 .sim-tier-label { display: block; font-size: 12px; color: var(--elyd-silver); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.6px; } body.elyd-v2 .sim-tier-price { display: block; font-size: 22px; font-weight: 900; color: var(--elyd-neon); font-family: 'Inconsolata', monospace; letter-spacing: -0.5px; line-height: 1; margin-bottom: 4px; } body.elyd-v2 .sim-tier-ppl { display: block; font-size: 11px; color: var(--elyd-silver); font-style: italic; } /* Simulator result data (promo) */ body.elyd-v2 .promo-banner { padding: 10px 14px; background: rgba(250, 255, 105, 0.1); border: 1px solid rgba(250, 255, 105, 0.35); border-radius: 6px; font-size: 13px; color: #e0e0e0; margin-bottom: 18px; line-height: 1.5; } body.elyd-v2 .promo-banner strong { color: var(--elyd-neon); font-weight: 700; } body.elyd-v2 .result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; } body.elyd-v2 .result-stat-label { font-size: 11px; color: var(--elyd-silver); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; margin: 0 0 6px; } body.elyd-v2 .result-stat-value { font-size: 26px; font-weight: 900; color: var(--elyd-neon); line-height: 1; letter-spacing: -1px; font-family: 'Inconsolata', monospace; margin: 0; } body.elyd-v2 .result-stat-value.secondary { color: var(--elyd-white); } body.elyd-v2 .result-promo-price { margin: 6px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: 'Inconsolata', monospace; font-size: 13px; } body.elyd-v2 .result-promo-original { color: var(--elyd-silver); text-decoration: line-through; } body.elyd-v2 .result-promo-discounted { color: var(--elyd-neon); font-weight: 700; } body.elyd-v2 .result-promo-badge { padding: 2px 8px; background: var(--elyd-neon); color: #111; font-size: 11px; font-weight: 800; border-radius: 9999px; letter-spacing: 0.5px; } body.elyd-v2 .result-separator { height: 1px; background: var(--elyd-border); margin: 22px 0; } body.elyd-v2 .result-cta-wrapper { text-align: center; } body.elyd-v2 .result-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; background: var(--elyd-neon) !important; color: #111 !important; font-size: 14px; font-weight: 700; border: 1px solid var(--elyd-neon) !important; border-radius: 6px; cursor: pointer; transition: all .25s cubic-bezier(.16,1,.3,1); font-family: 'Inter', Arial, sans-serif !important; width: auto !important; line-height: 1; } body.elyd-v2 .result-cta-btn:hover { background: #1d1d1d !important; color: var(--elyd-neon) !important; box-shadow: 0 0 20px rgba(250, 255, 105, 0.25); } body.elyd-v2 .result-note { text-align: center; margin-top: 14px; font-size: 12px; color: var(--elyd-silver); } body.elyd-v2 .result-availability-note { text-align: center; margin-top: 10px; padding: 10px 14px; background: rgba(255, 180, 0, 0.04); border: 1px solid rgba(255, 180, 0, 0.2); border-radius: 4px; font-size: 11px; color: var(--elyd-silver); line-height: 1.5; } /* Deliverables stat banner (data) */ body.elyd-v2 .deliverables-stat-banner { margin: 56px auto 0; max-width: 860px; padding: 28px 32px; border-left: 2px solid var(--elyd-neon); background: rgba(250, 255, 105, 0.03); border-radius: 6px; text-align: center; } body.elyd-v2 .deliverables-stat-banner p { font-size: 17px; color: var(--elyd-white); line-height: 1.6; margin: 0; } body.elyd-v2 .deliverables-stat-banner .highlight { color: var(--elyd-neon); font-weight: 800; } body.elyd-v2 .deliverables-stat-banner strong { color: var(--elyd-neon); font-weight: 600; } /* Responsive data */ @media (max-width: 1024px) { body.elyd-v2 .solution-steps { grid-template-columns: repeat(2, 1fr); } body.elyd-v2 .zone-choice-grid { grid-template-columns: 1fr; } body.elyd-v2 .simulator-price-tiers { grid-template-columns: repeat(2, 1fr); } body.elyd-v2 .result-grid { grid-template-columns: 1fr; gap: 16px; } } @media (max-width: 768px) { body.elyd-v2 .solution-steps { grid-template-columns: 1fr; } } /* ========================================================= AUTOMATISATION (automatisation.php) ========================================================= */ /* Solution intro & reassurance blocks */ body.elyd-v2 .solution-intro { margin: 24px auto 36px; max-width: 860px; padding: 22px 28px; background: rgba(250, 255, 105, 0.04); border: 1px solid rgba(250, 255, 105, 0.2); border-radius: 8px; text-align: center; } body.elyd-v2 .solution-intro-text { font-size: 16px; color: var(--elyd-white); line-height: 1.6; margin: 0; } body.elyd-v2 .solution-intro-text strong { color: var(--elyd-neon); font-weight: 700; } body.elyd-v2 .solution-reassurance { margin: 48px auto 0; max-width: 860px; padding: 18px 26px; background: var(--elyd-near-black); border: 1px solid var(--elyd-border); border-radius: 8px; text-align: center; } body.elyd-v2 .solution-reassurance-text { font-size: 14px; color: var(--elyd-silver); line-height: 1.6; margin: 0; font-style: italic; } /* AI visibility block (chat bubbles + screenshot) */ body.elyd-v2 .ai-visibility-block { margin: 60px auto 0; max-width: 960px; padding: 40px 36px; background: var(--elyd-card-bg); border: 1px solid rgba(250, 255, 105, 0.25); border-radius: 12px; } body.elyd-v2 .ai-visibility-block h3 { font-size: 22px; font-weight: 700; color: var(--elyd-white); line-height: 1.3; margin-bottom: 14px; } body.elyd-v2 .ai-visibility-block > p { font-size: 15px; color: var(--elyd-silver); line-height: 1.65; margin-bottom: 22px; } body.elyd-v2 .ai-chat-examples { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; } body.elyd-v2 .ai-chat-bubble { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--elyd-near-black); border: 1px solid var(--elyd-border); border-radius: 8px; } body.elyd-v2 .ai-chat-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: rgba(250, 255, 105, 0.08); border: 1px solid rgba(250, 255, 105, 0.25); border-radius: 6px; color: var(--elyd-neon); font-size: 14px; flex-shrink: 0; } body.elyd-v2 .ai-chat-text { font-size: 14px; color: #e0e0e0; line-height: 1.5; font-style: italic; } body.elyd-v2 .ai-explanation { font-size: 15px; color: var(--elyd-silver); line-height: 1.7; margin: 0 0 22px; } body.elyd-v2 .ai-explanation strong { color: var(--elyd-neon); font-weight: 700; } body.elyd-v2 .ai-visibility-screenshot { padding: 16px; background: var(--elyd-near-black); border: 1px solid var(--elyd-border); border-radius: 8px; text-align: center; } body.elyd-v2 .ai-visibility-screenshot img { max-width: 100%; height: auto; border-radius: 4px; margin-bottom: 10px; } /* AI mock (no-image fallback) */ body.elyd-v2 .ai-visibility-mock { background: var(--elyd-near-black); border: 1px solid var(--elyd-border); border-radius: 10px; padding: 18px 20px 16px; text-align: left; } body.elyd-v2 .ai-mock-header { display: flex; align-items: center; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--elyd-border); margin-bottom: 16px; } body.elyd-v2 .ai-mock-dot { width: 10px; height: 10px; border-radius: 50%; background: #2a2a2a; } body.elyd-v2 .ai-mock-dot:nth-child(1) { background: #3a3a3a; } body.elyd-v2 .ai-mock-dot:nth-child(2) { background: #3a3a3a; } body.elyd-v2 .ai-mock-dot:nth-child(3) { background: #3a3a3a; } body.elyd-v2 .ai-mock-title { margin-left: 10px; font-family: 'Inconsolata', monospace; font-size: 12px; color: var(--elyd-silver); letter-spacing: 0.4px; } body.elyd-v2 .ai-mock-question, body.elyd-v2 .ai-mock-answer { font-size: 14px; line-height: 1.65; color: #e0e0e0; padding: 12px 14px; border-radius: 6px; margin-bottom: 12px; background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); } body.elyd-v2 .ai-mock-answer { border-left: 2px solid var(--elyd-neon); } body.elyd-v2 .ai-mock-label { display: block; font-family: 'Inconsolata', monospace; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--elyd-silver); margin-bottom: 6px; } body.elyd-v2 .ai-mock-answer .ai-mock-label { color: var(--elyd-neon); } body.elyd-v2 .ai-mock-highlight { color: var(--elyd-neon); font-weight: 700; background: rgba(250, 255, 105, 0.08); padding: 1px 6px; border-radius: 3px; } body.elyd-v2 .ai-visibility-mock .evidence-caption { text-align: center; margin-top: 10px; } /* Chart mock (no-image fallback) */ body.elyd-v2 .chart-mock { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 6px; padding: 16px; margin-bottom: 10px; } body.elyd-v2 .chart-mock-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; } body.elyd-v2 .chart-mock-title { font-family: 'Inconsolata', monospace; font-size: 12px; color: var(--elyd-silver); letter-spacing: 0.4px; } body.elyd-v2 .chart-mock-growth { font-family: 'Inconsolata', monospace; font-size: 18px; font-weight: 800; color: var(--elyd-neon); } body.elyd-v2 .chart-mock-svg { width: 100%; height: 120px; display: block; } body.elyd-v2 .chart-mock-legend { display: flex; justify-content: space-between; font-family: 'Inconsolata', monospace; font-size: 10px; color: var(--elyd-silver); margin-top: 8px; letter-spacing: 0.5px; } body.elyd-v2 .evidence-caption { font-size: 12px; color: var(--elyd-silver); font-style: italic; line-height: 1.5; margin: 0; } /* Comparison table */ body.elyd-v2 .comparison-table { margin-top: 32px; border: 1px solid var(--elyd-border); border-radius: 8px; overflow: hidden; background: var(--elyd-card-bg); } body.elyd-v2 .comparison-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; align-items: stretch; border-bottom: 1px solid var(--elyd-border); } body.elyd-v2 .comparison-row:last-child { border-bottom: none; } body.elyd-v2 .comparison-row > div { padding: 18px 22px; font-size: 14px; color: #e0e0e0; line-height: 1.55; } body.elyd-v2 .comparison-row .col-criteria { background: var(--elyd-near-black); font-weight: 700; color: var(--elyd-white); border-right: 1px solid var(--elyd-border); } body.elyd-v2 .comparison-row .col-classic { color: var(--elyd-silver); border-right: 1px solid var(--elyd-border); } body.elyd-v2 .comparison-row .col-elyd { background: rgba(250, 255, 105, 0.04); color: var(--elyd-white); } body.elyd-v2 .comparison-row.header > div { background: #060606; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--elyd-silver); } body.elyd-v2 .comparison-row.header .col-criteria { background: #060606; background-image: linear-gradient(135deg, rgba(250, 255, 105, 0.04) 0%, transparent 50%), repeating-linear-gradient(135deg, transparent 0, transparent 8px, rgba(255, 255, 255, 0.015) 8px, rgba(255, 255, 255, 0.015) 9px); color: var(--elyd-silver); } body.elyd-v2 .comparison-row.header .col-criteria::before { content: "Critère"; } body.elyd-v2 .comparison-row.header .col-elyd { color: var(--elyd-neon); } /* Case study card */ body.elyd-v2 .casestudy-card { margin-top: 32px; padding: 48px 44px; background: var(--elyd-card-bg); border: 1px solid rgba(250, 255, 105, 0.25); border-radius: 12px; position: relative; } body.elyd-v2 .casestudy-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--elyd-neon), transparent); } body.elyd-v2 .casestudy-badge { display: inline-block; padding: 5px 14px; background: rgba(250, 255, 105, 0.1); border: 1px solid rgba(250, 255, 105, 0.3); color: var(--elyd-neon); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; border-radius: 9999px; margin-bottom: 20px; } body.elyd-v2 .casestudy-title { font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; letter-spacing: -0.5px; color: var(--elyd-white); line-height: 1.25; margin-bottom: 18px; } body.elyd-v2 .casestudy-text { font-size: 15px; color: var(--elyd-silver); line-height: 1.7; margin-bottom: 28px; } body.elyd-v2 .casestudy-text strong { color: var(--elyd-white); font-weight: 700; } body.elyd-v2 .casestudy-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 32px 0; border: 1px solid var(--elyd-border); border-radius: 8px; overflow: hidden; background: var(--elyd-near-black); } body.elyd-v2 .casestudy-stat { padding: 26px 20px; border-right: 1px solid var(--elyd-border); text-align: center; } body.elyd-v2 .casestudy-stat:last-child { border-right: none; } body.elyd-v2 .casestudy-stat-number { display: block; font-size: clamp(28px, 3vw, 40px); font-weight: 900; color: var(--elyd-neon); line-height: 1; letter-spacing: -1px; margin-bottom: 8px; font-family: 'Inconsolata', monospace; } body.elyd-v2 .casestudy-stat-label { font-size: 12px; color: var(--elyd-silver); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; } /* Proof evidence */ body.elyd-v2 .proof-evidence { margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--elyd-border); } body.elyd-v2 .proof-evidence h3 { font-size: 18px; font-weight: 700; color: var(--elyd-white); text-align: center; margin-bottom: 24px; } body.elyd-v2 .evidence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } body.elyd-v2 .evidence-item { padding: 20px; background: var(--elyd-near-black); border: 1px solid var(--elyd-border); border-radius: 8px; } body.elyd-v2 .evidence-item img { width: 100%; height: auto; border-radius: 4px; margin-bottom: 10px; border: 1px solid var(--elyd-border); } body.elyd-v2 .evidence-item.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } body.elyd-v2 .evidence-item .before, body.elyd-v2 .evidence-item .after { padding: 14px 16px; background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 6px; } body.elyd-v2 .evidence-item .before { border-left: 2px solid #ff6b6b; } body.elyd-v2 .evidence-item .after { border-left: 2px solid var(--elyd-neon); } body.elyd-v2 .evidence-item .label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px; } body.elyd-v2 .evidence-item .before .label { color: #ff6b6b; } body.elyd-v2 .evidence-item .after .label { color: var(--elyd-neon); } body.elyd-v2 .evidence-item ul { list-style: none; padding: 0; margin: 0; } body.elyd-v2 .evidence-item li { padding: 4px 0 4px 16px; position: relative; font-size: 13px; color: #e0e0e0; line-height: 1.5; } body.elyd-v2 .evidence-item .before li::before { content: "−"; position: absolute; left: 0; color: #ff6b6b; font-weight: 700; } body.elyd-v2 .evidence-item .after li::before { content: "+"; position: absolute; left: 0; color: var(--elyd-neon); font-weight: 700; } body.elyd-v2 .evidence-example { margin-top: 24px; padding: 20px 24px; background: var(--elyd-near-black); border: 1px solid var(--elyd-border); border-radius: 8px; } body.elyd-v2 .evidence-example > p { font-size: 13px; color: var(--elyd-silver); margin: 0 0 12px; } body.elyd-v2 .example-article-link { display: block; padding: 18px 22px; background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 6px; text-decoration: none; transition: all .25s ease; } body.elyd-v2 .example-article-link:hover { border-color: rgba(250, 255, 105, 0.3); transform: translateX(4px); } body.elyd-v2 .example-article-link strong { display: block; font-size: 15px; color: var(--elyd-white); margin-bottom: 6px; } body.elyd-v2 .example-article-link span:not(.cta-inline) { display: block; font-size: 13px; color: var(--elyd-silver); line-height: 1.55; margin-bottom: 10px; } body.elyd-v2 .example-article-link .cta-inline { display: inline-block; font-size: 13px; color: var(--elyd-neon); font-weight: 600; } body.elyd-v2 .casestudy-quote { margin: 32px 0 0; padding: 26px 32px; border-left: 2px solid var(--elyd-neon); background: rgba(250, 255, 105, 0.03); border-radius: 6px; } body.elyd-v2 .casestudy-quote-text { font-size: 17px; color: var(--elyd-white); line-height: 1.6; margin: 0; font-style: italic; font-weight: 500; } /* Packs grid (3 cards pricing) */ body.elyd-v2 .packs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; padding-top: 20px; align-items: stretch; } body.elyd-v2 .pack-card { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 36px 32px; position: relative; transition: all .25s cubic-bezier(.16,1,.3,1); display: flex; flex-direction: column; } body.elyd-v2 .pack-card:hover { transform: translateY(-4px); border-color: rgba(250, 255, 105, 0.25); } body.elyd-v2 .pack-card.featured { border-color: var(--elyd-neon); background: linear-gradient(180deg, rgba(250, 255, 105, 0.04), var(--elyd-card-bg)); } body.elyd-v2 .pack-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 6px 18px; background: var(--elyd-neon); color: #111; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; border-radius: 9999px; white-space: nowrap; box-shadow: 0 4px 20px rgba(250, 255, 105, 0.25); z-index: 3; } body.elyd-v2 .pack-icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: var(--elyd-card-bg); border: 1px solid rgba(250, 255, 105, 0.3); border-radius: 10px; margin-bottom: 18px; } body.elyd-v2 .pack-icon svg { width: 24px; height: 24px; stroke: var(--elyd-neon); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } body.elyd-v2 .pack-name { font-size: 22px; font-weight: 900; color: var(--elyd-white); letter-spacing: -0.5px; margin-bottom: 10px; } body.elyd-v2 .pack-card.featured .pack-name { color: var(--elyd-neon); } body.elyd-v2 .pack-description { font-size: 14px; color: var(--elyd-silver); line-height: 1.6; margin-bottom: 20px; } body.elyd-v2 .pack-features { list-style: none; padding: 20px 0; margin: 0 0 20px; border-top: 1px solid var(--elyd-border); border-bottom: 1px solid var(--elyd-border); flex-grow: 1; } body.elyd-v2 .pack-features li { padding: 8px 0 8px 24px; position: relative; font-size: 13px; color: #e0e0e0; line-height: 1.55; } body.elyd-v2 .pack-features li::before { content: "✓"; position: absolute; left: 0; color: var(--elyd-neon); font-weight: 700; } body.elyd-v2 .pack-ideal { font-size: 12px; color: var(--elyd-silver); font-style: italic; margin-bottom: 18px; line-height: 1.5; } body.elyd-v2 .pack-cta { width: 100% !important; padding: 14px 20px !important; background: transparent !important; color: var(--elyd-white) !important; font-size: 14px; font-weight: 700; border: 1px solid var(--elyd-olive) !important; border-radius: 6px; cursor: pointer; transition: all .25s cubic-bezier(.16,1,.3,1); font-family: 'Inter', Arial, sans-serif !important; } body.elyd-v2 .pack-cta:hover { background: var(--elyd-near-black) !important; border-color: var(--elyd-neon) !important; color: var(--elyd-neon) !important; } body.elyd-v2 .pack-card.featured .pack-cta { background: var(--elyd-neon) !important; color: #111 !important; border-color: var(--elyd-neon) !important; } body.elyd-v2 .pack-card.featured .pack-cta:hover { background: #1d1d1d !important; color: var(--elyd-neon) !important; box-shadow: 0 0 20px rgba(250, 255, 105, 0.25); } /* Pack pricing (automatisation-taches) */ body.elyd-v2 .pack-tagline { font-size: 13px; color: var(--elyd-neon); font-family: 'Inconsolata', monospace; letter-spacing: 0.5px; margin: 0 0 16px; } body.elyd-v2 .pack-pricing { padding: 14px 16px; background: var(--elyd-near-black); border: 1px solid var(--elyd-border); border-radius: 8px; margin-bottom: 18px; } body.elyd-v2 .pack-price-setup, body.elyd-v2 .pack-price-monthly { margin: 0; font-size: 13px; color: var(--elyd-silver); line-height: 1.6; } body.elyd-v2 .pack-price-setup strong, body.elyd-v2 .pack-price-monthly strong { color: var(--elyd-white); font-size: 16px; font-weight: 800; font-family: 'Inconsolata', monospace; } body.elyd-v2 .pack-card.featured .pack-price-setup strong, body.elyd-v2 .pack-card.featured .pack-price-monthly strong { color: var(--elyd-neon); } body.elyd-v2 .pack-guarantee { display: flex; align-items: flex-start; gap: 10px; background: rgba(250, 255, 105, 0.04); border: 1px solid rgba(250, 255, 105, 0.2); border-radius: 8px; padding: 12px 14px; margin-bottom: 18px; } body.elyd-v2 .pack-guarantee svg { width: 18px; height: 18px; stroke: var(--elyd-neon); fill: none; stroke-width: 1.5; flex-shrink: 0; margin-top: 2px; } body.elyd-v2 .pack-guarantee-text { font-size: 12px; color: var(--elyd-silver); line-height: 1.5; margin: 0; } body.elyd-v2 .pack-guarantee-text strong { color: var(--elyd-neon); font-weight: 700; } /* ROI stats (automatisation-taches) */ body.elyd-v2 .roi-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; } body.elyd-v2 .roi-stat { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 28px 22px; text-align: center; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .roi-stat:hover { transform: translateY(-4px); border-color: rgba(250, 255, 105, 0.3); background: rgba(250, 255, 105, 0.02); } body.elyd-v2 .roi-stat-number { display: block; font-family: 'Inconsolata', monospace; font-size: clamp(28px, 3.6vw, 40px); font-weight: 900; color: var(--elyd-neon); line-height: 1; letter-spacing: -1px; margin-bottom: 12px; } body.elyd-v2 .roi-stat-label { display: block; font-size: 13px; color: var(--elyd-silver); line-height: 1.55; } body.elyd-v2 .roi-disclaimer { text-align: center; font-size: 12px; color: var(--elyd-silver); font-style: italic; margin: 24px auto 0; max-width: 720px; } /* Transparence grid (2 cards : avantages / inconvenients) */ body.elyd-v2 .transparence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; } body.elyd-v2 .transparence-card { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 32px 28px; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .transparence-card.avantages { border-left: 2px solid var(--elyd-neon); } body.elyd-v2 .transparence-card.inconvenients { border-left: 2px solid #ff9c4f; } body.elyd-v2 .transparence-card-title { font-size: 18px; font-weight: 800; color: var(--elyd-white); margin-bottom: 18px; line-height: 1.3; display: flex; align-items: center; gap: 10px; } body.elyd-v2 .transparence-card.avantages .transparence-card-title svg { stroke: var(--elyd-neon); } body.elyd-v2 .transparence-card.inconvenients .transparence-card-title svg { stroke: #ff9c4f; } body.elyd-v2 .transparence-card-title svg { width: 22px; height: 22px; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } body.elyd-v2 .transparence-list { list-style: none; padding: 0; margin: 0; } body.elyd-v2 .transparence-list li { padding: 8px 0 8px 24px; position: relative; font-size: 14px; color: #e0e0e0; line-height: 1.6; border-bottom: 1px solid var(--elyd-border); } body.elyd-v2 .transparence-list li:last-child { border-bottom: none; } body.elyd-v2 .transparence-card.avantages .transparence-list li::before { content: "+"; position: absolute; left: 0; top: 7px; color: var(--elyd-neon); font-weight: 800; font-family: 'Inconsolata', monospace; } body.elyd-v2 .transparence-card.inconvenients .transparence-list li::before { content: "!"; position: absolute; left: 0; top: 7px; color: #ff9c4f; font-weight: 800; font-family: 'Inconsolata', monospace; } body.elyd-v2 .transparence-note { margin-top: 28px; padding: 20px 24px; background: var(--elyd-near-black); border: 1px solid rgba(250, 255, 105, 0.2); border-radius: 8px; font-size: 14px; color: var(--elyd-silver); line-height: 1.65; text-align: center; } body.elyd-v2 .transparence-note strong { color: var(--elyd-neon); font-weight: 700; } /* Case client avant/après (automatisation-taches) */ body.elyd-v2 .caseclient-section { position: relative; overflow: hidden; } body.elyd-v2 .caseclient-card { max-width: 860px; margin: 40px auto 0; background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-top: 2px solid var(--elyd-neon); border-radius: 10px; overflow: hidden; } body.elyd-v2 .caseclient-body { padding: 40px 36px; } body.elyd-v2 .caseclient-badge { display: inline-block; background: rgba(250, 255, 105, 0.08); color: var(--elyd-neon); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; padding: 5px 14px; border: 1px solid rgba(250, 255, 105, 0.25); border-radius: 9999px; margin-bottom: 24px; } body.elyd-v2 .caseclient-intro { font-size: 15px; color: var(--elyd-silver); line-height: 1.75; margin-bottom: 30px; } body.elyd-v2 .caseclient-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; } body.elyd-v2 .caseclient-col { padding: 22px 22px; border-radius: 8px; background: var(--elyd-near-black); border: 1px solid var(--elyd-border); } body.elyd-v2 .caseclient-col.before { border-left: 2px solid #ff6b6b; } body.elyd-v2 .caseclient-col.after { border-left: 2px solid var(--elyd-neon); } body.elyd-v2 .caseclient-col-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; } body.elyd-v2 .caseclient-col.before .caseclient-col-label { color: #ff6b6b; } body.elyd-v2 .caseclient-col.after .caseclient-col-label { color: var(--elyd-neon); } body.elyd-v2 .caseclient-col ul { list-style: none; padding: 0; margin: 0; } body.elyd-v2 .caseclient-col li { padding: 8px 0 8px 22px; position: relative; font-size: 13px; line-height: 1.55; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } body.elyd-v2 .caseclient-col li:last-child { border-bottom: none; } body.elyd-v2 .caseclient-col.before li { color: var(--elyd-silver); } body.elyd-v2 .caseclient-col.after li { color: #e0e0e0; font-weight: 500; } body.elyd-v2 .caseclient-col.before li::before { content: "−"; position: absolute; left: 0; color: #ff6b6b; font-weight: 700; } body.elyd-v2 .caseclient-col.after li::before { content: "+"; position: absolute; left: 0; color: var(--elyd-neon); font-weight: 700; } body.elyd-v2 .caseclient-keystat { text-align: center; padding: 28px 24px; background: rgba(250, 255, 105, 0.04); border: 1px solid rgba(250, 255, 105, 0.2); border-radius: 10px; } body.elyd-v2 .caseclient-keystat-number { display: block; font-family: 'Inconsolata', monospace; font-size: 42px; font-weight: 900; color: var(--elyd-neon); line-height: 1; letter-spacing: -1px; } body.elyd-v2 .caseclient-keystat-label { display: block; font-size: 14px; color: #c0c0c0; margin-top: 10px; } body.elyd-v2 .caseclient-keystat-sub { display: block; font-size: 13px; color: var(--elyd-silver); margin-top: 6px; font-style: italic; } body.elyd-v2 .caseclient-keystat-note { display: block; font-size: 11px; color: #666; margin-top: 10px; } @media (max-width: 1024px) { body.elyd-v2 .roi-stats { grid-template-columns: repeat(2, 1fr); } body.elyd-v2 .transparence-grid { grid-template-columns: 1fr; } body.elyd-v2 .caseclient-grid { grid-template-columns: 1fr; } body.elyd-v2 .caseclient-body { padding: 32px 24px; } } @media (max-width: 768px) { body.elyd-v2 .roi-stats { grid-template-columns: 1fr; } } /* ============ HEBERGEMENT PAGE ============ */ /* Hero stats — variante num/lbl */ body.elyd-v2 .hero-stat .num { display: block; font-family: 'Inconsolata', monospace; font-size: clamp(24px, 3vw, 32px); font-weight: 900; color: var(--elyd-neon); letter-spacing: -0.5px; line-height: 1; margin-bottom: 6px; } body.elyd-v2 .hero-stat .lbl { display: block; font-size: 12px; color: var(--elyd-silver); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } /* Dual CTA cards (VPS + OpenClaw / VPS seul) */ body.elyd-v2 .cta-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 700px; margin: 24px auto 0; } body.elyd-v2 .cta-choice-card { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px; border-radius: 10px; text-decoration: none !important; transition: all .25s cubic-bezier(.16,1,.3,1); text-align: left; position: relative; } body.elyd-v2 .cta-choice-card.primary { background: var(--elyd-neon); color: #111 !important; border: 1px solid var(--elyd-neon); box-shadow: 0 4px 24px rgba(250, 255, 105, 0.18); } body.elyd-v2 .cta-choice-card.primary:hover { background: #1d1d1d; color: var(--elyd-neon) !important; transform: translateY(-3px); box-shadow: 0 8px 32px rgba(250, 255, 105, 0.25); } body.elyd-v2 .cta-choice-card.secondary { background: var(--elyd-card-bg); color: var(--elyd-white) !important; border: 1px solid var(--elyd-border); } body.elyd-v2 .cta-choice-card.secondary:hover { border-color: var(--elyd-neon); transform: translateY(-3px); background: var(--elyd-near-black); } body.elyd-v2 .cta-choice-label { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inconsolata', monospace; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; opacity: 0.85; } body.elyd-v2 .cta-choice-card.primary .cta-choice-label { color: #111; } body.elyd-v2 .cta-choice-card.secondary .cta-choice-label { color: var(--elyd-neon); opacity: 1; } body.elyd-v2 .cta-choice-card.primary:hover .cta-choice-label { color: var(--elyd-neon); } body.elyd-v2 .cta-choice-label svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } body.elyd-v2 .cta-choice-title { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.2; } body.elyd-v2 .cta-choice-desc { font-size: 13px; opacity: 0.85; line-height: 1.4; } body.elyd-v2 .cta-choice-card.secondary .cta-choice-desc { color: var(--elyd-silver); } /* Offer box (bloc promo -20% hébergement) */ body.elyd-v2 .offer-box { max-width: 860px; margin: 0 auto; padding: 48px 40px; background: linear-gradient(180deg, rgba(250, 255, 105, 0.06), var(--elyd-card-bg)); border: 1px solid rgba(250, 255, 105, 0.3); border-radius: 14px; text-align: center; position: relative; overflow: hidden; } body.elyd-v2 .offer-box::before { content: ""; position: absolute; top: -80px; right: -80px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(250, 255, 105, 0.08), transparent 70%); pointer-events: none; } body.elyd-v2 .offer-chip { display: inline-block; background: rgba(250, 255, 105, 0.1); color: var(--elyd-neon); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; padding: 5px 14px; border: 1px solid rgba(250, 255, 105, 0.3); border-radius: 9999px; margin-bottom: 18px; } body.elyd-v2 .offer-box .section-headline { margin-bottom: 12px; } body.elyd-v2 .offer-box .section-headline span { color: var(--elyd-neon) !important; } /* Installation steps (4 étapes hébergement) */ body.elyd-v2 .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; counter-reset: step-counter; } body.elyd-v2 .steps .step { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 28px 24px; position: relative; counter-increment: step-counter; font-size: 13px; color: var(--elyd-silver); line-height: 1.6; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .steps .step:hover { transform: translateY(-4px); border-color: rgba(250, 255, 105, 0.25); } body.elyd-v2 .steps .step::before { content: counter(step-counter); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(250, 255, 105, 0.08); border: 1px solid var(--elyd-neon); border-radius: 8px; color: var(--elyd-neon); font-family: 'Inconsolata', monospace; font-size: 16px; font-weight: 800; margin-bottom: 14px; } body.elyd-v2 .steps .step strong { display: block; color: var(--elyd-white); font-size: 15px; font-weight: 700; margin-bottom: 8px; line-height: 1.3; } /* FAQ grid variant (2 cols cards) */ body.elyd-v2 .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; } body.elyd-v2 .faq-card { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-left: 2px solid var(--elyd-neon); border-radius: 8px; padding: 22px 24px; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .faq-card:hover { transform: translateY(-2px); border-color: rgba(250, 255, 105, 0.4); border-left-color: var(--elyd-neon); } body.elyd-v2 .faq-card-q { font-size: 15px; font-weight: 700; color: var(--elyd-white); margin: 0 0 10px; line-height: 1.4; } body.elyd-v2 .faq-card-a { font-size: 14px; color: var(--elyd-silver); line-height: 1.65; margin: 0; } @media (max-width: 1024px) { body.elyd-v2 .steps { grid-template-columns: repeat(2, 1fr); } body.elyd-v2 .faq-grid { grid-template-columns: 1fr; } body.elyd-v2 .offer-box { padding: 36px 28px; } } @media (max-width: 640px) { body.elyd-v2 .cta-choice { grid-template-columns: 1fr; } body.elyd-v2 .steps { grid-template-columns: 1fr; } } /* Process steps (automatisation — 4 étapes) */ body.elyd-v2 .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; } body.elyd-v2 .process-step { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 28px 24px; position: relative; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .process-step:hover { transform: translateY(-4px); border-color: rgba(250, 255, 105, 0.25); } body.elyd-v2 .process-step-number { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: rgba(250, 255, 105, 0.1); border: 1px solid var(--elyd-neon); border-radius: 8px; color: var(--elyd-neon); font-family: 'Inconsolata', monospace; font-size: 18px; font-weight: 800; margin-bottom: 14px; } body.elyd-v2 .process-step-title { font-size: 16px; font-weight: 700; color: var(--elyd-white); line-height: 1.3; margin-bottom: 10px; } body.elyd-v2 .process-step-text { font-size: 13px; color: var(--elyd-silver); line-height: 1.6; margin: 0; } body.elyd-v2 .process-step-connector { display: none; } /* Responsive automatisation */ @media (max-width: 1024px) { body.elyd-v2 .comparison-row { grid-template-columns: 1fr; } body.elyd-v2 .comparison-row .col-criteria, body.elyd-v2 .comparison-row .col-classic, body.elyd-v2 .comparison-row .col-elyd { border-right: none; border-bottom: 1px solid var(--elyd-border); } body.elyd-v2 .comparison-row.header { display: none; } body.elyd-v2 .casestudy-stats { grid-template-columns: 1fr; } body.elyd-v2 .casestudy-stat { border-right: none; border-bottom: 1px solid var(--elyd-border); } body.elyd-v2 .casestudy-stat:last-child { border-bottom: none; } body.elyd-v2 .evidence-grid { grid-template-columns: 1fr; } body.elyd-v2 .evidence-item.before-after { grid-template-columns: 1fr; } body.elyd-v2 .packs-grid { grid-template-columns: 1fr; max-width: 500px; margin-left: auto; margin-right: auto; } body.elyd-v2 .process-steps { grid-template-columns: repeat(2, 1fr); } body.elyd-v2 .casestudy-card { padding: 36px 28px; } } @media (max-width: 768px) { body.elyd-v2 .process-steps { grid-template-columns: 1fr; } body.elyd-v2 .ai-visibility-block { padding: 28px 22px; } } /* Sections backgrounds V2 (normalisés) */ body.elyd-v2 #pour-qui, body.elyd-v2 #livrables, body.elyd-v2 #contact, body.elyd-v2 #faq { background: var(--elyd-black) !important; border-bottom: 1px solid var(--elyd-border); padding: 96px 0 !important; position: relative; overflow: hidden; } body.elyd-v2 body.site-v2 section, body.elyd-v2.site-v2 section { padding: 96px 0 !important; background: var(--elyd-black) !important; border-bottom: 1px solid var(--elyd-border); } body.elyd-v2 #contact::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1000px; height: 800px; background: radial-gradient(circle, rgba(250, 255, 105, 0.04) 0%, transparent 70%); filter: blur(120px); pointer-events: none; z-index: 0; } body.elyd-v2 #contact .container { position: relative; z-index: 1; } /* ========================================================= E-COMMERCE (e-commerce.php) ========================================================= */ /* Hero badges (3 pills) */ body.elyd-v2 .hero-badges { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 36px; } body.elyd-v2 .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 9999px; font-size: 13px; color: var(--elyd-silver); } body.elyd-v2 .hero-badge i { color: var(--elyd-neon); font-size: 12px; } /* Rotating words (h1 span) */ body.elyd-v2 .rotating-words { display: inline-block; color: var(--elyd-neon); font-weight: 900; position: relative; vertical-align: baseline; min-width: 280px; height: 1em; line-height: 1; text-align: left; } body.elyd-v2 .rotating-words span { position: absolute; left: 0; top: 0; opacity: 0; animation: elyd-rotateWord 36s linear infinite; white-space: nowrap; line-height: 1; } body.elyd-v2 .rotating-words span:nth-child(1) { animation-delay: 0s; } body.elyd-v2 .rotating-words span:nth-child(2) { animation-delay: 2s; } body.elyd-v2 .rotating-words span:nth-child(3) { animation-delay: 4s; } body.elyd-v2 .rotating-words span:nth-child(4) { animation-delay: 6s; } body.elyd-v2 .rotating-words span:nth-child(5) { animation-delay: 8s; } body.elyd-v2 .rotating-words span:nth-child(6) { animation-delay: 10s; } body.elyd-v2 .rotating-words span:nth-child(7) { animation-delay: 12s; } body.elyd-v2 .rotating-words span:nth-child(8) { animation-delay: 14s; } body.elyd-v2 .rotating-words span:nth-child(9) { animation-delay: 16s; } body.elyd-v2 .rotating-words span:nth-child(10) { animation-delay: 18s; } body.elyd-v2 .rotating-words span:nth-child(11) { animation-delay: 20s; } body.elyd-v2 .rotating-words span:nth-child(12) { animation-delay: 22s; } body.elyd-v2 .rotating-words span:nth-child(13) { animation-delay: 24s; } body.elyd-v2 .rotating-words span:nth-child(14) { animation-delay: 26s; } body.elyd-v2 .rotating-words span:nth-child(15) { animation-delay: 28s; } body.elyd-v2 .rotating-words span:nth-child(16) { animation-delay: 30s; } body.elyd-v2 .rotating-words span:nth-child(17) { animation-delay: 32s; } body.elyd-v2 .rotating-words span:nth-child(18) { animation-delay: 34s; } @keyframes elyd-rotateWord { 0%, 5.55% { opacity: 0; transform: translateY(6px); } 0.5%, 5% { opacity: 1; transform: translateY(0); } 5.2%, 100% { opacity: 0; transform: translateY(-6px); } } /* Errors section (3 cards catégories) */ body.elyd-v2 .errors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; } body.elyd-v2 .error-category { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 32px 28px; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .error-category:hover { transform: translateY(-4px); border-color: rgba(250, 255, 105, 0.25); box-shadow: 0 18px 40px rgba(0,0,0,0.5); } body.elyd-v2 .error-category-icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: var(--elyd-card-bg); border: 1px solid rgba(250, 255, 105, 0.3); border-radius: 10px; margin-bottom: 18px; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .error-category-icon svg { width: 24px; height: 24px; stroke: var(--elyd-neon); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } body.elyd-v2 .error-category:hover .error-category-icon { border-color: rgba(250, 255, 105, 0.6); box-shadow: 0 0 18px rgba(250, 255, 105, 0.15); } body.elyd-v2 .error-category-title { font-size: 18px; font-weight: 700; color: var(--elyd-white); line-height: 1.3; margin-bottom: 14px; } body.elyd-v2 .error-list { list-style: none; padding: 0; margin: 0; } body.elyd-v2 .error-list li { padding: 10px 0 10px 24px; position: relative; font-size: 14px; color: var(--elyd-silver); line-height: 1.55; border-bottom: 1px solid var(--elyd-border); } body.elyd-v2 .error-list li:last-child { border-bottom: none; } body.elyd-v2 .error-list li::before { content: "✕"; position: absolute; left: 0; color: #ff6b6b; font-weight: 700; font-size: 13px; } body.elyd-v2 .errors-stat { margin: 56px auto 0; max-width: 820px; padding: 28px 32px; border-left: 2px solid var(--elyd-neon); background: rgba(250, 255, 105, 0.03); border-radius: 6px; } body.elyd-v2 .errors-stat-text { font-size: 17px; color: var(--elyd-white); line-height: 1.6; margin: 0; } body.elyd-v2 .errors-stat-text .highlight { color: var(--elyd-neon); font-weight: 800; } body.elyd-v2 .errors-stat-text strong { color: var(--elyd-neon); font-weight: 600; } /* Method columns (3 étapes avec numéro) */ body.elyd-v2 .method-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; } body.elyd-v2 .method-column-number { position: absolute; top: 18px; right: 22px; font-family: 'Inconsolata', monospace; font-size: 13px; color: var(--elyd-silver); letter-spacing: 0.5px; } body.elyd-v2 .method-column-icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: var(--elyd-card-bg); border: 1px solid rgba(250, 255, 105, 0.3); border-radius: 10px; margin-bottom: 18px; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .method-column-icon svg { width: 24px; height: 24px; stroke: var(--elyd-neon); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } body.elyd-v2 .method-column:hover .method-column-icon { border-color: rgba(250, 255, 105, 0.6); box-shadow: 0 0 18px rgba(250, 255, 105, 0.15); } body.elyd-v2 .method-column-title { font-size: 18px; font-weight: 700; color: var(--elyd-white); line-height: 1.3; margin-bottom: 12px; } body.elyd-v2 .method-column-text { font-size: 14px; color: var(--elyd-silver); line-height: 1.65; } body.elyd-v2 .method-column-text strong { color: var(--elyd-white); font-weight: 600; } /* Simulator Quiz (e-commerce) */ body.elyd-v2 .simulator-section { padding: 96px 0 !important; background: var(--elyd-black); border-bottom: 1px solid var(--elyd-border); position: relative; overflow: hidden; } body.elyd-v2 .simulator-section::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1000px; height: 800px; background: radial-gradient(circle, rgba(250,255,105,0.04) 0%, transparent 70%); filter: blur(120px); pointer-events: none; } body.elyd-v2 .simulator-container { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; } body.elyd-v2 .simulator-card { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 48px 40px; overflow: visible; } body.elyd-v2 .simulator-title { font-size: clamp(24px, 3vw, 32px); font-weight: 900; letter-spacing: -1px; color: var(--elyd-white); line-height: 1.2; margin-bottom: 14px; text-align: center; } body.elyd-v2 .simulator-subtitle { font-size: 15px; color: var(--elyd-silver); line-height: 1.6; text-align: center; margin-bottom: 40px; } body.elyd-v2 .simulator-step { margin-bottom: 32px; } body.elyd-v2 .simulator-step-title { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; color: var(--elyd-white); margin-bottom: 16px; } body.elyd-v2 .simulator-step-number { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: rgba(250, 255, 105, 0.1); border: 1px solid var(--elyd-neon); border-radius: 6px; color: var(--elyd-neon); font-family: 'Inconsolata', monospace; font-size: 14px; font-weight: 700; flex-shrink: 0; } body.elyd-v2 .simulator-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } body.elyd-v2 .simulator-option { background: var(--elyd-near-black); border: 1px solid var(--elyd-border); border-radius: 6px; padding: 14px 18px; cursor: pointer; transition: all .2s ease; } body.elyd-v2 .simulator-option:hover { border-color: rgba(250, 255, 105, 0.3); background: #1a1a1a; } body.elyd-v2 .simulator-option.selected { border-color: var(--elyd-neon); background: rgba(250, 255, 105, 0.08); } body.elyd-v2 .simulator-option-text { font-size: 14px; color: var(--elyd-white); margin: 0; text-align: center; font-weight: 600; } body.elyd-v2 .simulator-option.selected .simulator-option-text { color: var(--elyd-neon); } body.elyd-v2 .simulator-checkboxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } body.elyd-v2 .simulator-checkbox-wrapper { display: flex; align-items: center; gap: 12px; background: var(--elyd-near-black); border: 1px solid var(--elyd-border); border-radius: 6px; padding: 12px 16px; cursor: pointer; transition: all .2s ease; } body.elyd-v2 .simulator-checkbox-wrapper:hover { border-color: rgba(250, 255, 105, 0.3); } body.elyd-v2 .simulator-checkbox-wrapper.checked { border-color: var(--elyd-neon); background: rgba(250, 255, 105, 0.08); } body.elyd-v2 .simulator-checkbox { width: 18px; height: 18px; border: 1px solid var(--elyd-border); border-radius: 4px; flex-shrink: 0; position: relative; transition: all .2s ease; } body.elyd-v2 .simulator-checkbox-wrapper.checked .simulator-checkbox { background: var(--elyd-neon); border-color: var(--elyd-neon); } body.elyd-v2 .simulator-checkbox-wrapper.checked .simulator-checkbox::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #111; font-size: 12px; font-weight: 900; } body.elyd-v2 .simulator-checkbox-label { font-size: 14px; color: var(--elyd-white); margin: 0; font-weight: 500; } body.elyd-v2 .simulator-checkbox-wrapper.checked .simulator-checkbox-label { color: var(--elyd-neon); } body.elyd-v2 .simulator-result { margin-top: 36px; padding: 32px; background: var(--elyd-near-black); border: 1px solid rgba(250, 255, 105, 0.25); border-radius: 8px; text-align: center; display: grid; grid-template-columns: 1fr; gap: 12px; } body.elyd-v2 .simulator-result-label { font-size: 12px; color: var(--elyd-silver) !important; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; margin: 0; } body.elyd-v2 .simulator-result-price { font-size: clamp(36px, 4vw, 52px); font-weight: 900; color: var(--elyd-neon); letter-spacing: -1.5px; line-height: 1; font-family: 'Inconsolata', monospace; } body.elyd-v2 .simulator-result-description { font-size: 13px; color: var(--elyd-silver); line-height: 1.55; max-width: 620px; margin: 0 auto; } body.elyd-v2 .simulator-result-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 18px auto 0; padding: 14px 28px; background: var(--elyd-neon); color: #111 !important; font-size: 15px; font-weight: 700; border: 1px solid var(--elyd-neon); border-radius: 6px; cursor: pointer; transition: all .25s cubic-bezier(.16,1,.3,1); font-family: 'Inter', Arial, sans-serif; width: auto !important; } body.elyd-v2 .simulator-result-cta:hover { background: #1d1d1d; color: var(--elyd-neon) !important; box-shadow: 0 0 20px rgba(250, 255, 105, 0.25); } body.elyd-v2 .simulator-result-note { font-size: 12px; color: var(--elyd-silver); margin: 0; } /* Why cards (4 cols grid) */ body.elyd-v2 .why-section .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-areas: none; gap: 16px; margin-top: 24px; } body.elyd-v2 .why-section .why-card { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 24px 22px; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .why-section .why-card:hover { transform: translateY(-4px); border-color: rgba(250, 255, 105, 0.25); } body.elyd-v2 .why-card-title { font-size: 16px; font-weight: 700; color: var(--elyd-white); margin-bottom: 10px; line-height: 1.3; } body.elyd-v2 .why-card-benefit { font-size: 13px; color: var(--elyd-silver); line-height: 1.6; margin: 0; } /* (ancien override margin supprimé — gênait alignement vertical avec .cta-secondary) */ body.elyd-v2 .final-cta-headline { text-align: center; max-width: 900px; margin: 0 auto 20px; } body.elyd-v2 .final-cta-subheadline { max-width: 720px; margin: 0 auto 24px; } body.elyd-v2 .final-cta-subheadline strong { color: var(--elyd-neon); font-weight: 600; } /* ========================================================= CONFIGURATEUR (configurateur.php) ========================================================= */ /* Hero features (3 lignes avec icônes) */ body.elyd-v2 .hero-features { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin: 32px auto; text-align: left; } body.elyd-v2 .hero-feature-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 6px; font-size: 14px; color: #e0e0e0; line-height: 1.5; } body.elyd-v2 .hero-feature-item i { color: var(--elyd-neon); font-size: 14px; flex-shrink: 0; } /* Usecases row 2 (2 cards) */ body.elyd-v2 .usecases-row-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; max-width: 800px; margin-left: auto; margin-right: auto; } body.elyd-v2 .usecase-examples { list-style: none; padding: 14px 0 0; margin: 14px 0 0; border-top: 1px solid var(--elyd-border); } body.elyd-v2 .usecase-examples li { padding: 6px 0 6px 16px; position: relative; font-size: 13px; color: var(--elyd-silver); line-height: 1.55; } body.elyd-v2 .usecase-examples li::before { content: "—"; position: absolute; left: 0; color: var(--elyd-neon); } /* Catalog link card */ body.elyd-v2 .catalog-link-section { padding: 50px 0 !important; background: var(--elyd-black); border-bottom: 1px solid var(--elyd-border); } body.elyd-v2 .catalog-link-card { background: var(--elyd-card-bg); border: 1px solid rgba(250, 255, 105, 0.25); border-radius: 8px; padding: 32px 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; position: relative; overflow: hidden; } body.elyd-v2 .catalog-link-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--elyd-neon), transparent); } body.elyd-v2 .catalog-link-label { font-size: 11px; font-weight: 700; color: var(--elyd-neon); text-transform: uppercase; letter-spacing: 1.4px; margin: 0 0 8px; } body.elyd-v2 .catalog-link-title { font-size: 20px; font-weight: 700; color: var(--elyd-white); margin: 0 0 6px; line-height: 1.3; } body.elyd-v2 .catalog-link-desc { font-size: 14px; color: var(--elyd-silver); margin: 0; line-height: 1.55; } body.elyd-v2 .catalog-link-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; background: var(--elyd-neon); color: #111; font-size: 14px; font-weight: 700; border-radius: 6px; text-decoration: none; white-space: nowrap; transition: all .25s ease; flex-shrink: 0; } body.elyd-v2 .catalog-link-btn:hover { background: #1d1d1d; color: var(--elyd-neon); box-shadow: 0 0 20px rgba(250, 255, 105, 0.25); } /* Method steps (4 étapes grid) */ body.elyd-v2 .method-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; } body.elyd-v2 .method-step { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 28px 22px; position: relative; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .method-step:hover { transform: translateY(-4px); border-color: rgba(250, 255, 105, 0.25); } body.elyd-v2 .method-step-number { position: absolute; top: 18px; right: 22px; font-family: 'Inconsolata', monospace; font-size: 13px; color: var(--elyd-silver); letter-spacing: 0.5px; } body.elyd-v2 .method-step-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--elyd-card-bg); border: 1px solid rgba(250, 255, 105, 0.3); border-radius: 10px; margin-bottom: 16px; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .method-step-icon svg { width: 22px; height: 22px; stroke: var(--elyd-neon); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } body.elyd-v2 .method-step:hover .method-step-icon { border-color: rgba(250, 255, 105, 0.6); box-shadow: 0 0 18px rgba(250, 255, 105, 0.15); } body.elyd-v2 .method-step-title { font-size: 16px; font-weight: 700; color: var(--elyd-white); line-height: 1.3; margin-bottom: 10px; } body.elyd-v2 .method-step-text { font-size: 13px; color: var(--elyd-silver); line-height: 1.6; } /* Simulator config (quiz options + form) */ body.elyd-v2 .simulator-step-number-badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: rgba(250, 255, 105, 0.1); border: 1px solid var(--elyd-neon); border-radius: 6px; color: var(--elyd-neon); font-family: 'Inconsolata', monospace; font-size: 14px; font-weight: 700; flex-shrink: 0; margin-right: 12px; } body.elyd-v2 .sim-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } body.elyd-v2 .sim-option { background: var(--elyd-near-black); border: 1px solid var(--elyd-border); border-radius: 6px; padding: 18px 16px; cursor: pointer; transition: all .2s ease; text-align: center; } body.elyd-v2 .sim-option:hover { border-color: rgba(250, 255, 105, 0.3); background: #1a1a1a; } body.elyd-v2 .sim-option.selected { border-color: var(--elyd-neon); background: rgba(250, 255, 105, 0.08); } body.elyd-v2 .sim-option-icon { font-size: 24px; display: block; margin-bottom: 8px; } body.elyd-v2 .sim-option-label { font-size: 13px; color: var(--elyd-white); font-weight: 600; margin: 0; } body.elyd-v2 .sim-option.selected .sim-option-label { color: var(--elyd-neon); } body.elyd-v2 .sim-checkboxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } body.elyd-v2 .sim-checkbox-wrapper { display: flex; align-items: center; gap: 12px; background: var(--elyd-near-black); border: 1px solid var(--elyd-border); border-radius: 6px; padding: 12px 16px; cursor: pointer; transition: all .2s ease; } body.elyd-v2 .sim-checkbox-wrapper:hover { border-color: rgba(250, 255, 105, 0.3); } body.elyd-v2 .sim-checkbox-wrapper.checked { border-color: var(--elyd-neon); background: rgba(250, 255, 105, 0.08); } body.elyd-v2 .sim-checkbox { width: 18px; height: 18px; border: 1px solid var(--elyd-border); border-radius: 4px; flex-shrink: 0; position: relative; transition: all .2s ease; } body.elyd-v2 .sim-checkbox-wrapper.checked .sim-checkbox { background: var(--elyd-neon); border-color: var(--elyd-neon); } body.elyd-v2 .sim-checkbox-wrapper.checked .sim-checkbox::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #111; font-size: 12px; font-weight: 900; } body.elyd-v2 .sim-checkbox-label { font-size: 13px; color: var(--elyd-white); font-weight: 500; } body.elyd-v2 .sim-checkbox-wrapper.checked .sim-checkbox-label { color: var(--elyd-neon); } body.elyd-v2 .sim-contact-step { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--elyd-border); opacity: 0.4; pointer-events: none; transition: opacity .3s ease; } body.elyd-v2 .sim-contact-step.visible { opacity: 1; pointer-events: auto; } body.elyd-v2 .sim-contact-headline { font-size: 18px; font-weight: 700; color: var(--elyd-white); display: flex; align-items: center; margin-bottom: 8px; } body.elyd-v2 .sim-contact-sub { font-size: 14px; color: var(--elyd-silver); line-height: 1.55; margin-bottom: 20px; } body.elyd-v2 .sim-recap-box { padding: 16px 20px; background: rgba(250, 255, 105, 0.04); border: 1px solid rgba(250, 255, 105, 0.2); border-radius: 6px; margin-bottom: 20px; font-size: 13px; color: #e0e0e0; line-height: 1.7; } body.elyd-v2 .sim-recap-box strong { color: var(--elyd-white); font-weight: 600; } body.elyd-v2 .sim-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } body.elyd-v2 .sim-form-group { margin-bottom: 14px; } body.elyd-v2 .sim-form-label { display: block; font-size: 12px; font-weight: 600; color: var(--elyd-silver); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.8px; } body.elyd-v2 .sim-form-label .required { color: var(--elyd-neon); } body.elyd-v2 .sim-form-input, body.elyd-v2 .sim-form-textarea { width: 100% !important; padding: 12px 14px !important; background: var(--elyd-black) !important; border: 1px solid var(--elyd-border) !important; border-radius: 4px !important; color: var(--elyd-white) !important; font-size: 14px; font-family: 'Inter', Arial, sans-serif !important; transition: border-color .2s ease; outline: none; } body.elyd-v2 .sim-form-input:focus, body.elyd-v2 .sim-form-textarea:focus { border-color: var(--elyd-neon) !important; background: var(--elyd-near-black) !important; } body.elyd-v2 .sim-form-input::placeholder, body.elyd-v2 .sim-form-textarea::placeholder { color: rgba(160, 160, 160, 0.4); font-size: 13px; } body.elyd-v2 .sim-form-textarea { resize: vertical; min-height: 100px; } body.elyd-v2 .sim-form-submit { width: 100% !important; padding: 14px 28px !important; background: var(--elyd-neon) !important; color: #111 !important; font-size: 15px; font-weight: 700; border: 1px solid var(--elyd-neon) !important; border-radius: 6px; cursor: pointer; transition: all .25s cubic-bezier(.16,1,.3,1); margin-top: 8px; font-family: 'Inter', Arial, sans-serif !important; } body.elyd-v2 .sim-form-submit:hover { background: #1d1d1d !important; color: var(--elyd-neon) !important; box-shadow: 0 0 20px rgba(250, 255, 105, 0.25); } body.elyd-v2 .sim-form-submit:disabled { opacity: .6; cursor: not-allowed; } body.elyd-v2 .sim-form-privacy { margin-top: 14px; font-size: 12px; color: var(--elyd-silver); text-align: center; } body.elyd-v2 .sim-success { display: none; margin-top: 32px; padding: 40px 32px; background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.4); border-radius: 8px; text-align: center; } body.elyd-v2 .sim-success.visible { display: block; } body.elyd-v2 .sim-success-icon { font-size: 48px; display: block; margin-bottom: 16px; } body.elyd-v2 .sim-success-title { font-size: 22px; font-weight: 700; color: #22c55e; margin-bottom: 10px; } body.elyd-v2 .sim-success-text { font-size: 14px; color: #e0e0e0; line-height: 1.65; } body.elyd-v2 .simulator-incomplete-notice { margin-top: 24px; padding: 14px 18px; background: var(--elyd-near-black); border: 1px solid var(--elyd-border); border-radius: 6px; text-align: center; font-size: 13px; color: var(--elyd-silver); font-style: italic; } /* Why cards with icon (configurateur) */ body.elyd-v2 .why-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--elyd-card-bg); border: 1px solid rgba(250, 255, 105, 0.3); border-radius: 10px; margin-bottom: 16px; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .why-card-icon svg { width: 22px; height: 22px; stroke: var(--elyd-neon); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } body.elyd-v2 .why-card:hover .why-card-icon { border-color: rgba(250, 255, 105, 0.6); box-shadow: 0 0 18px rgba(250, 255, 105, 0.15); } body.elyd-v2 .why-card-text { font-size: 13px; color: var(--elyd-silver); line-height: 1.65; margin: 0; } /* ========================================================= SEO (seo.php) ========================================================= */ /* CTA secondaire ghost */ body.elyd-v2 .cta-secondary { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; padding: 0 28px !important; background: transparent !important; color: var(--elyd-white) !important; font-size: 15px; font-weight: 600; line-height: 1 !important; border: 1px solid var(--elyd-olive) !important; border-radius: 6px; text-decoration: none; transition: all .25s cubic-bezier(.16,1,.3,1); width: auto !important; height: 50px !important; min-height: 50px !important; font-family: 'Inter', Arial, sans-serif !important; cursor: pointer; box-sizing: border-box; } body.elyd-v2 .cta-secondary:hover { background: var(--elyd-near-black) !important; border-color: var(--elyd-neon) !important; color: var(--elyd-neon) !important; text-decoration: none; } body.elyd-v2 .hero-cta-wrapper { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; margin-bottom: 16px; } /* SEO Featured Card (PME/Artisans) */ body.elyd-v2 .seo-featured-section { padding: 96px 0 !important; } body.elyd-v2 .seo-featured-card { background: var(--elyd-card-bg); border: 1px solid rgba(250, 255, 105, 0.3); border-radius: 12px; padding: 56px 48px; position: relative; overflow: hidden; } body.elyd-v2 .seo-featured-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--elyd-neon), transparent); } body.elyd-v2 .seo-featured-badge { display: inline-block; padding: 6px 14px; background: rgba(250, 255, 105, 0.1); border: 1px solid rgba(250, 255, 105, 0.3); color: var(--elyd-neon); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; border-radius: 9999px; margin-bottom: 24px; } body.elyd-v2 .seo-featured-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; } body.elyd-v2 .seo-featured-title { font-size: clamp(28px, 3.5vw, 42px); font-weight: 900; letter-spacing: -1.5px; line-height: 1.1; color: var(--elyd-white); margin-bottom: 20px; } body.elyd-v2 .seo-featured-title .highlight { color: var(--elyd-neon); } body.elyd-v2 .seo-featured-text { font-size: 16px; color: var(--elyd-silver); line-height: 1.65; margin-bottom: 24px; } body.elyd-v2 .seo-featured-text strong { color: var(--elyd-white); font-weight: 600; } body.elyd-v2 .seo-featured-list { list-style: none; padding: 0; margin: 0; } body.elyd-v2 .seo-featured-list li { padding: 10px 0 10px 26px; position: relative; font-size: 14px; color: var(--elyd-silver); line-height: 1.55; border-bottom: 1px solid var(--elyd-border); } body.elyd-v2 .seo-featured-list li:last-child { border-bottom: none; } body.elyd-v2 .seo-featured-list li::before { content: "✓"; position: absolute; left: 0; color: var(--elyd-neon); font-weight: 700; } body.elyd-v2 .seo-featured-stats { display: flex; flex-direction: column; gap: 14px; } body.elyd-v2 .seo-featured-stat { display: flex; gap: 14px; padding: 18px 20px; background: var(--elyd-near-black); border: 1px solid var(--elyd-border); border-radius: 8px; transition: border-color .25s ease; } body.elyd-v2 .seo-featured-stat:hover { border-color: rgba(250, 255, 105, 0.3); } body.elyd-v2 .seo-featured-stat-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--elyd-card-bg); border: 1px solid rgba(250, 255, 105, 0.25); border-radius: 8px; flex-shrink: 0; } body.elyd-v2 .seo-featured-stat-icon svg { width: 20px; height: 20px; stroke: var(--elyd-neon); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } body.elyd-v2 .seo-featured-stat-title { font-size: 14px; font-weight: 700; color: var(--elyd-white); margin: 0 0 4px; } body.elyd-v2 .seo-featured-stat-text { font-size: 13px; color: var(--elyd-silver); line-height: 1.5; margin: 0; } /* SEO Types Grid — flexbox wrap centre la derniere ligne (evite orphelin) */ body.elyd-v2 .seo-types-grid { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 24px; } body.elyd-v2 .seo-types-grid > .seo-type-card { flex: 0 1 calc(33.333% - 11px); min-width: 280px; box-sizing: border-box; } body.elyd-v2 .seo-type-card { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 32px 28px; position: relative; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .seo-type-card:hover { transform: translateY(-4px); border-color: rgba(250, 255, 105, 0.25); box-shadow: 0 18px 40px rgba(0,0,0,0.5); } body.elyd-v2 .seo-type-number { position: absolute; top: 18px; right: 22px; font-family: 'Inconsolata', monospace; font-size: 13px; color: var(--elyd-silver); letter-spacing: 0.5px; } body.elyd-v2 .seo-type-icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: var(--elyd-card-bg); border: 1px solid rgba(250, 255, 105, 0.3); border-radius: 10px; margin-bottom: 18px; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .seo-type-icon svg { width: 24px; height: 24px; stroke: var(--elyd-neon); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } body.elyd-v2 .seo-type-card:hover .seo-type-icon { border-color: rgba(250, 255, 105, 0.6); box-shadow: 0 0 18px rgba(250, 255, 105, 0.15); } body.elyd-v2 .seo-type-title { font-size: 18px; font-weight: 700; color: var(--elyd-white); line-height: 1.3; margin-bottom: 10px; } body.elyd-v2 .seo-type-text { font-size: 14px; color: var(--elyd-silver); line-height: 1.6; } /* Expertise Cards — flexbox wrap centre la derniere ligne */ body.elyd-v2 .expertise-grid { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 24px; } body.elyd-v2 .expertise-grid > .expertise-card { flex: 0 1 calc(33.333% - 11px); min-width: 280px; box-sizing: border-box; } body.elyd-v2 .expertise-card { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 32px 28px; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .expertise-card:hover { transform: translateY(-4px); border-color: rgba(250, 255, 105, 0.25); box-shadow: 0 18px 40px rgba(0,0,0,0.5); } body.elyd-v2 .expertise-card-icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: var(--elyd-card-bg); border: 1px solid rgba(250, 255, 105, 0.3); border-radius: 10px; margin-bottom: 18px; transition: all .25s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .expertise-card-icon svg { width: 24px; height: 24px; stroke: var(--elyd-neon); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } body.elyd-v2 .expertise-card:hover .expertise-card-icon { border-color: rgba(250, 255, 105, 0.6); box-shadow: 0 0 18px rgba(250, 255, 105, 0.15); } body.elyd-v2 .expertise-card-title { font-size: 18px; font-weight: 700; color: var(--elyd-white); margin-bottom: 10px; } body.elyd-v2 .expertise-card-text { font-size: 14px; color: var(--elyd-silver); line-height: 1.6; margin-bottom: 18px; } body.elyd-v2 .expertise-list { list-style: none; padding: 18px 0 0; margin: 0; border-top: 1px solid var(--elyd-border); } body.elyd-v2 .expertise-list li { padding: 8px 0 8px 22px; position: relative; font-size: 13px; color: var(--elyd-silver); line-height: 1.55; } body.elyd-v2 .expertise-list li::before { content: "—"; position: absolute; left: 0; color: var(--elyd-neon); } /* Deliverables (2 cards) */ body.elyd-v2 .deliverables-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; } body.elyd-v2 .deliverables-card { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 36px 32px; transition: border-color .25s ease; } body.elyd-v2 .deliverables-card:hover { border-color: rgba(250, 255, 105, 0.25); } body.elyd-v2 .deliverables-card-title { display: flex; align-items: center; gap: 14px; font-size: 20px; font-weight: 700; color: var(--elyd-white); margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--elyd-border); } body.elyd-v2 .deliverables-card-title-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--elyd-card-bg); border: 1px solid rgba(250, 255, 105, 0.3); border-radius: 8px; flex-shrink: 0; } body.elyd-v2 .deliverables-card-title-icon svg { width: 18px; height: 18px; stroke: var(--elyd-neon); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } body.elyd-v2 .deliverables-list { list-style: none; padding: 0; margin: 0; } body.elyd-v2 .deliverables-list li { padding: 10px 0 10px 26px; position: relative; font-size: 14px; color: var(--elyd-silver); line-height: 1.55; border-bottom: 1px solid var(--elyd-border); } body.elyd-v2 .deliverables-list li:last-child { border-bottom: none; } body.elyd-v2 .deliverables-list li::before { content: "✓"; position: absolute; left: 0; color: var(--elyd-neon); font-weight: 700; } body.elyd-v2 .deliverables-list li strong { color: var(--elyd-white); font-weight: 600; } /* Pricing cards (3 cols) */ body.elyd-v2 .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; padding-top: 0; align-items: start; overflow: visible !important; } body.elyd-v2 .pricing-card { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 36px 32px; position: relative; transition: all .25s cubic-bezier(.16,1,.3,1); display: flex; flex-direction: column; overflow: visible !important; } body.elyd-v2 .pricing-section, body.elyd-v2 #pricing { overflow: visible !important; } body.elyd-v2 .pricing-card:hover { transform: translateY(-4px); border-color: rgba(250, 255, 105, 0.25); } body.elyd-v2 .pricing-card--featured { border-color: var(--elyd-neon); background: linear-gradient(180deg, rgba(250, 255, 105, 0.04), var(--elyd-card-bg)); margin-top: 18px; } body.elyd-v2 .pricing-grid { padding-top: 18px; } body.elyd-v2 .pricing-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 6px 18px; background: var(--elyd-neon); color: #111; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; border-radius: 9999px; white-space: nowrap; z-index: 5; box-shadow: 0 4px 20px rgba(250, 255, 105, 0.25); line-height: 1; } body.elyd-v2 .pricing-name { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--elyd-silver); margin: 0 0 8px; } body.elyd-v2 .pricing-desc { font-size: 13px; color: var(--elyd-silver); line-height: 1.5; margin: 0 0 20px; min-height: 40px; } body.elyd-v2 .pricing-price { font-size: 42px; font-weight: 900; color: var(--elyd-white); letter-spacing: -1.5px; line-height: 1; margin: 0 0 8px; font-family: 'Inconsolata', monospace; } body.elyd-v2 .pricing-price span { font-size: 14px; font-weight: 500; color: var(--elyd-silver); letter-spacing: 0; font-family: 'Inter', Arial, sans-serif; } body.elyd-v2 .pricing-commitment { font-size: 12px; color: var(--elyd-silver); margin: 0 0 24px; line-height: 1.5; } body.elyd-v2 .pricing-features { list-style: none; padding: 20px 0; margin: 0 0 24px; border-top: 1px solid var(--elyd-border); border-bottom: 1px solid var(--elyd-border); flex-grow: 1; } body.elyd-v2 .pricing-features li { padding: 8px 0 8px 24px; position: relative; font-size: 13px; color: #e0e0e0; line-height: 1.5; } body.elyd-v2 .pricing-features li::before { content: "✓"; position: absolute; left: 0; color: var(--elyd-neon); font-weight: 700; } body.elyd-v2 .pricing-cta { width: 100% !important; padding: 14px 20px !important; background: var(--elyd-neon) !important; color: #111 !important; font-size: 14px; font-weight: 700; border: 1px solid var(--elyd-neon) !important; border-radius: 6px; cursor: pointer; transition: all .25s cubic-bezier(.16,1,.3,1); font-family: 'Inter', Arial, sans-serif !important; } body.elyd-v2 .pricing-cta:hover { background: #1d1d1d !important; color: var(--elyd-neon) !important; box-shadow: 0 0 20px rgba(250, 255, 105, 0.25); } body.elyd-v2 .pricing-card:not(.pricing-card--featured) .pricing-cta { background: transparent !important; color: var(--elyd-white) !important; border-color: var(--elyd-olive) !important; } body.elyd-v2 .pricing-card:not(.pricing-card--featured) .pricing-cta:hover { background: var(--elyd-near-black) !important; border-color: var(--elyd-neon) !important; color: var(--elyd-neon) !important; } body.elyd-v2 .pricing-note { text-align: center; margin-top: 36px; font-size: 13px; color: var(--elyd-silver); font-style: italic; } /* Stats grid (4 stats) */ body.elyd-v2 .stats-section .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 24px; border: 1px solid var(--elyd-border); border-radius: 8px; overflow: hidden; background: var(--elyd-card-bg); } body.elyd-v2 .stats-section .stat-card { padding: 36px 24px; border-right: 1px solid var(--elyd-border); text-align: center; transition: background .25s ease; } body.elyd-v2 .stats-section .stat-card:last-child { border-right: none; } body.elyd-v2 .stats-section .stat-card:hover { background: #060606; } body.elyd-v2 .stats-section .stat-number { display: block; font-size: clamp(36px, 4vw, 56px); font-weight: 900; letter-spacing: -2px; color: var(--elyd-neon); line-height: 1; margin-bottom: 12px; font-family: 'Inconsolata', monospace; } body.elyd-v2 .stats-section .stat-label { font-size: 13px; color: var(--elyd-silver); line-height: 1.55; } /* Final CTA buttons (2) — même largeur garantie */ body.elyd-v2 .final-cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 28px 0 0; } body.elyd-v2 .final-cta-buttons > .final-cta-button, body.elyd-v2 .final-cta-buttons > .cta-secondary, body.elyd-v2 .hero-cta-wrapper > .cta-button, body.elyd-v2 .hero-cta-wrapper > .cta-secondary { width: 300px !important; min-width: 300px !important; max-width: 300px !important; } @media (max-width: 540px) { body.elyd-v2 .final-cta-buttons > .final-cta-button, body.elyd-v2 .final-cta-buttons > .cta-secondary, body.elyd-v2 .hero-cta-wrapper > .cta-button, body.elyd-v2 .hero-cta-wrapper > .cta-secondary { width: 100% !important; min-width: 100% !important; max-width: 100% !important; } } /* Responsive SEO */ @media (max-width: 1024px) { body.elyd-v2 .seo-featured-grid { grid-template-columns: 1fr; gap: 36px; } body.elyd-v2 .seo-featured-card { padding: 40px 32px; } body.elyd-v2 .deliverables-grid { grid-template-columns: 1fr; } body.elyd-v2 .pricing-grid { grid-template-columns: 1fr; max-width: 500px; margin-left: auto; margin-right: auto; } body.elyd-v2 .stats-section .stats-grid { grid-template-columns: repeat(2, 1fr); } body.elyd-v2 .stats-section .stat-card { border-right: none; border-bottom: 1px solid var(--elyd-border); } body.elyd-v2 .stats-section .stat-card:nth-child(odd) { border-right: 1px solid var(--elyd-border); } body.elyd-v2 .stats-section .stat-card:nth-last-child(-n+2) { border-bottom: none; } } @media (max-width: 768px) { body.elyd-v2 .seo-featured-card { padding: 32px 24px; } body.elyd-v2 .hero-cta-wrapper { flex-direction: column; } body.elyd-v2 .hero-cta-wrapper .cta-button, body.elyd-v2 .hero-cta-wrapper .cta-secondary { width: 100%; justify-content: center; } body.elyd-v2 .final-cta-buttons { flex-direction: column; } } /* Responsive configurateur */ @media (max-width: 1024px) { body.elyd-v2 .method-steps { grid-template-columns: repeat(2, 1fr); } body.elyd-v2 .usecases-row-2 { grid-template-columns: 1fr; } body.elyd-v2 .catalog-link-card { flex-direction: column; text-align: center; } } @media (max-width: 768px) { body.elyd-v2 .method-steps { grid-template-columns: 1fr; } body.elyd-v2 .sim-form-row { grid-template-columns: 1fr; } body.elyd-v2 .hero-features { max-width: 100%; } } /* Responsive e-commerce */ @media (max-width: 1024px) { body.elyd-v2 .errors-grid { grid-template-columns: 1fr; } body.elyd-v2 .method-columns { grid-template-columns: 1fr; } body.elyd-v2 .why-section .why-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { body.elyd-v2 .why-section .why-grid { grid-template-columns: 1fr; } body.elyd-v2 .simulator-card { padding: 32px 24px; } body.elyd-v2 .simulator-options { grid-template-columns: 1fr 1fr; } body.elyd-v2 .simulator-checkboxes { grid-template-columns: 1fr; } body.elyd-v2 .hero-badges { gap: 8px; } body.elyd-v2 .hero-badge { font-size: 12px; padding: 6px 12px; } body.elyd-v2 .rotating-words { min-width: auto; display: block; margin-top: 4px; } } /* Responsive V2 */ @media (max-width: 1024px) { body.elyd-v2 .v2-offer-wrapper { grid-template-columns: 1fr; } } @media (max-width: 768px) { body.elyd-v2 .v2-hero { padding: 64px 0 !important; } body.elyd-v2 .v2-hero-title { font-size: clamp(32px, 7vw, 42px); letter-spacing: -1.5px; } body.elyd-v2 .v2-hero-desc { font-size: 16px; } body.elyd-v2 .v2-hero-price-new { font-size: 28px; } body.elyd-v2 .v2-hero-buttons { flex-direction: column; } body.elyd-v2 .v2-hero-secondary-cta, body.elyd-v2 .v2-hero-cta { width: 100%; justify-content: center; } body.elyd-v2 .v2-section-title { font-size: 30px; letter-spacing: -1px; } body.elyd-v2 .v2-audience-grid { grid-template-columns: 1fr; } body.elyd-v2 .v2-deliverables-grid { grid-template-columns: 1fr; } body.elyd-v2 .v2-process-steps { grid-template-columns: 1fr; gap: 30px; } body.elyd-v2 .v2-step-connector { display: none; } body.elyd-v2 .v2-testimonials-grid { grid-template-columns: 1fr; } body.elyd-v2 .v2-offer-card { padding: 28px 22px; } body.elyd-v2 .v2-offer-price { font-size: 38px; } body.elyd-v2 .v2-form-card { padding: 24px 20px; } body.elyd-v2 .v2-proof-bar { grid-template-columns: 1fr; } body.elyd-v2 .v2-proof-item { border-right: none; border-bottom: 1px solid var(--elyd-border); } body.elyd-v2 .v2-proof-item:last-child { border-bottom: none; } } /* ============ REVEAL ANIMATIONS ============ */ body.elyd-v2 .reveal { opacity: 0; transform: translateY(28px); transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s); } body.elyd-v2 .reveal.visible { opacity: 1; transform: translateY(0); } @keyframes elyd-fadeInUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes elyd-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* ============ POPUP FORM ============ */ body.elyd-v2 .popup-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(10px); z-index: 999999; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s ease; overflow-y: auto; padding: 20px; } body.elyd-v2 .popup-overlay.active { display: flex; opacity: 1; } body.elyd-v2 .popup-content { background: var(--elyd-card-bg); border: 1px solid var(--elyd-border); border-radius: 8px; padding: 40px 32px; max-width: 560px; width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; position: relative; transform: scale(0.95); transition: transform .3s cubic-bezier(.16,1,.3,1); } body.elyd-v2 .popup-overlay.active .popup-content { transform: scale(1); } body.elyd-v2 .popup-close { position: absolute; top: 16px; right: 16px; background: transparent; border: none; color: var(--elyd-silver); font-size: 28px; cursor: pointer; line-height: 1; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: all .25s ease; } body.elyd-v2 .popup-close:hover { color: var(--elyd-neon); background: var(--elyd-near-black); transform: rotate(90deg); } body.elyd-v2 .popup-eyebrow { font-size: 11px; color: var(--elyd-neon); text-transform: uppercase; letter-spacing: 1.4px; font-weight: 600; margin-bottom: 12px; } body.elyd-v2 .popup-title { font-size: 26px; font-weight: 900; color: var(--elyd-white); letter-spacing: -1px; line-height: 1.1; margin-bottom: 10px; } body.elyd-v2 .popup-subtitle { font-size: 14px; color: var(--elyd-silver); line-height: 1.55; margin-bottom: 28px; } body.elyd-v2 .popup-form { display: flex; flex-direction: column; gap: 16px; } body.elyd-v2 .popup-form-group { display: flex; flex-direction: column; gap: 6px; } body.elyd-v2 .popup-form-label { font-size: 12px; font-weight: 600; color: var(--elyd-silver); text-transform: uppercase; letter-spacing: 0.8px; } body.elyd-v2 .popup-form-label .required { color: var(--elyd-neon); } body.elyd-v2 .popup-form input[type=text], body.elyd-v2 .popup-form input[type=email], body.elyd-v2 .popup-form input[type=tel], body.elyd-v2 .popup-form textarea, body.elyd-v2 .popup-form-input, body.elyd-v2 .popup-form-textarea { padding: 12px 14px !important; background: var(--elyd-black) !important; border: 1px solid var(--elyd-border) !important; border-radius: 4px !important; color: var(--elyd-white) !important; font-size: 14px; font-family: 'Inter', Arial, sans-serif !important; transition: border-color .2s ease; outline: none; width: 100% !important; } body.elyd-v2 .popup-form input::placeholder, body.elyd-v2 .popup-form textarea::placeholder { color: rgba(160,160,160,0.4); } body.elyd-v2 .popup-form-input:focus, body.elyd-v2 .popup-form-textarea:focus, body.elyd-v2 .popup-form input:focus, body.elyd-v2 .popup-form textarea:focus { border-color: var(--elyd-neon) !important; background: var(--elyd-near-black) !important; } body.elyd-v2 .popup-form-textarea { resize: vertical; min-height: 90px; } body.elyd-v2 .popup-form-submit { padding: 14px 28px; background: var(--elyd-neon); color: #111; font-size: 15px; font-weight: 700; border: 1px solid var(--elyd-neon); border-radius: 6px; cursor: pointer; transition: all .25s cubic-bezier(.16,1,.3,1); margin-top: 8px; font-family: inherit; width: auto !important; } body.elyd-v2 .popup-form-submit:hover { background: #1d1d1d; color: var(--elyd-neon); box-shadow: 0 0 20px rgba(250,255,105,0.25); } /* ============ FOOTER OVERRIDE ============ */ body.elyd-v2 .rts-footer-area-one { background-color: var(--elyd-black) !important; border-top: 1px solid var(--elyd-border) !important; } body.elyd-v2 .rts-footer-area-one .logo-footer img { filter: invert(1) brightness(2); } body.elyd-v2 .rts-footer-area-one .disc { color: var(--elyd-silver) !important; } body.elyd-v2 .rts-footer-area-one .rts-social-area-one ul li a { color: var(--elyd-silver) !important; border-color: var(--elyd-border) !important; } body.elyd-v2 .rts-footer-area-one .rts-social-area-one ul li a:hover { color: var(--elyd-neon) !important; border-color: var(--elyd-neon) !important; } body.elyd-v2 .rts-footer-area-one .footer-blog-link a { color: var(--elyd-silver) !important; } body.elyd-v2 .rts-footer-area-one .footer-blog-link a:hover { color: var(--elyd-neon) !important; } body.elyd-v2 .rts-footer-area-one .copyright-area { border-top-color: var(--elyd-border) !important; } body.elyd-v2 .rts-footer-area-one .copyright-area p, body.elyd-v2 .rts-footer-area-one .copyright-area a { color: var(--elyd-silver) !important; } body.elyd-v2 .rts-footer-area-one .copyright-area a:hover { color: var(--elyd-neon) !important; } /* ============ RESPONSIVE ============ */ @media (max-width: 1024px) { body.elyd-v2 .hero-strip { grid-template-columns: repeat(3, 1fr); } body.elyd-v2 .feat-grid-3 { grid-template-columns: repeat(2, 1fr); } body.elyd-v2 .method-grid { grid-template-columns: 1fr; } body.elyd-v2 .why-grid { grid-template-columns: 1fr; grid-template-areas: "big" "small1" "small2"; } body.elyd-v2 .sbar { grid-template-columns: repeat(2, 1fr); } body.elyd-v2 .sbar-item { border-right: none; border-bottom: 1px solid var(--elyd-border); } body.elyd-v2 .sbar-item:nth-child(odd) { border-right: 1px solid var(--elyd-border); } body.elyd-v2 .sbar-item:nth-last-child(-n+2) { border-bottom: none; } body.elyd-v2 .cases-grid { grid-template-columns: 1fr; } body.elyd-v2 .final-cols { grid-template-columns: 1fr; gap: 40px; } body.elyd-v2 .cta-band .cta-band-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { body.elyd-v2 { padding-top: 80px !important; } body.elyd-v2 .pitch-wrap { padding: 0 20px; } body.elyd-v2 .section { padding: 64px 0; } body.elyd-v2 .hero { padding: 48px 0 56px; } body.elyd-v2 .hero-strip { grid-template-columns: 1fr; } body.elyd-v2 .hstrip-cell { border-right: none; border-bottom: 1px solid var(--elyd-border); } body.elyd-v2 .hstrip-cell:last-child { border-bottom: none; } body.elyd-v2 .feat-grid-3 { grid-template-columns: 1fr; } body.elyd-v2 .simulator-ticks { display: none; } body.elyd-v2 .sim-result { grid-template-columns: 1fr; } body.elyd-v2 .quote-block p.q-text { font-size: 18px; } body.elyd-v2 .popup-content { padding: 32px 24px; } body.elyd-v2 .cform .form-row { grid-template-columns: 1fr; } } @media (max-width: 540px) { body.elyd-v2 .sbar { grid-template-columns: repeat(2, 1fr); } body.elyd-v2 .hero-actions { flex-direction: column; } body.elyd-v2 .hero-actions .btn { width: 100% !important; justify-content: center; } }