/* ========================================================================== OnlyScript Landing : IMPERA design tokens + landing components. Static page, no framework. Served by Caddy from /srv/landing. ========================================================================== */ /* Fonts : chargees via dans le (parallele, pas de chaine @import bloquante). Voir les pages HTML. */ :root { /* Ink */ --ink-950: #06080D; --ink-900: #0A0C12; --ink-850: #0F121A; --ink-800: #14171F; --ink-700: #1B1F29; --ink-600: #252A36; /* Navy */ --navy-900: #0A1230; --navy-800: #0E1A3A; --navy-700: #15224A; --navy-600: #1E2E5E; /* Marble */ --marble-50: #FBF9F5; --marble-100: #F4F1EC; --marble-200: #E8E4DC; --marble-300: #D6D0C4; /* Stone */ --stone-100: #E5E7EC; --stone-200: #C5C8D1; --stone-300: #9BA0AD; --stone-400: #6B7184; --stone-500: #494F60; /* Gold */ --gold-300: #E5CC92; --gold-400: #D9BC82; --gold-500: #C9A96A; --gold-600: #AC8E52; --success: #6B8E5A; /* Roles */ --bg-canvas: var(--ink-900); --bg-surface: var(--ink-850); --bg-raised: var(--ink-800); --bg-hover: var(--ink-700); --bg-brand: var(--navy-800); --fg-primary: var(--marble-100); --fg-secondary: var(--stone-200); --fg-tertiary: var(--stone-300); --fg-muted: var(--stone-400); --fg-accent: var(--gold-500); --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.14); --sculpt-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04); --font-display: 'Cormorant Garamond', 'Garamond', 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; --tracking-tightest: -0.03em; --tracking-tight: -0.015em; --tracking-widest: 0.14em; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55); --shadow-focus-gold: 0 0 0 1px rgba(201, 169, 106, 0.55), 0 0 0 4px rgba(201, 169, 106, 0.12); --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 120ms; --dur-medium: 240ms; --dur-slow: 320ms; --dur-reveal: 560ms; --content-max: 1180px; } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { margin: 0; background: var(--bg-canvas); color: var(--fg-primary); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: var(--fg-accent); text-decoration: none; } a:hover { color: var(--gold-400); } a:focus-visible, button:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--shadow-focus-gold); border-radius: 6px; } ::selection { background: rgba(201, 169, 106, 0.25); color: var(--marble-50); } .skip-link { position: absolute; top: -48px; left: 16px; z-index: 200; padding: 10px 16px; background: var(--bg-raised); color: var(--fg-primary); border: 1px solid var(--border-strong); border-radius: 6px; transition: top var(--dur-fast) var(--ease-out); } .skip-link:focus { top: 12px; } .container { max-width: var(--content-max); margin: 0 auto; padding: 0 28px; } /* ========================================================================== Typography ========================================================================== */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 500; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--fg-tertiary); margin: 0 0 18px; } .eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--gold-500); } h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(42px, 6.2vw, 76px); line-height: 1.04; letter-spacing: var(--tracking-tightest); margin: 0 0 24px; color: var(--marble-50); } h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.08; letter-spacing: var(--tracking-tight); margin: 0 0 16px; color: var(--marble-50); } h3 { font-family: var(--font-sans); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: var(--tracking-tight); margin: 0 0 10px; color: var(--fg-primary); } .lead { font-size: 18px; line-height: 1.65; color: var(--fg-secondary); max-width: 560px; margin: 0 0 36px; } .section-intro { max-width: 640px; margin-bottom: 56px; } .section-intro p { font-size: 17px; color: var(--fg-tertiary); margin: 0; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; border-radius: 6px; font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; border: 1px solid transparent; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); white-space: nowrap; } .btn-gold { background: var(--gold-500); color: var(--ink-950); } .btn-gold:hover { background: var(--gold-400); color: var(--ink-950); box-shadow: 0 0 24px rgba(201, 169, 106, 0.28); } .btn-ghost { background: transparent; color: var(--fg-secondary); border-color: var(--border-strong); } .btn-ghost:hover { color: var(--fg-primary); border-color: var(--gold-600); background: rgba(255, 255, 255, 0.03); } .btn-lg { padding: 17px 36px; font-size: 16px; border-radius: 8px; } .btn .arrow { transition: transform var(--dur-fast) var(--ease-out); } .btn:hover .arrow { transform: translateX(3px); } .cta-note { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13.5px; color: var(--fg-muted); } /* ========================================================================== Nav ========================================================================== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background var(--dur-medium) var(--ease-out), border-color var(--dur-medium) var(--ease-out), backdrop-filter var(--dur-medium) var(--ease-out); border-bottom: 1px solid transparent; } .nav.is-scrolled { background: rgba(10, 12, 18, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--border-subtle); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; } .brand { display: inline-flex; align-items: center; gap: 11px; color: var(--marble-50); font-family: var(--font-display); font-size: 24px; letter-spacing: var(--tracking-tight); line-height: 1; } .brand:hover { color: var(--marble-50); } .brand svg { width: 26px; height: 26px; flex: none; } /* Wordmark identique a l'app (.imp-logo) : Only en italique marbre leger, Script en dore semibold droit, soudes sur la baseline. */ .brand .brand-word { display: inline-flex; align-items: baseline; gap: 1px; } .brand .brand-main { color: var(--marble-100); font-weight: 300; font-style: italic; } .brand .brand-accent { color: var(--gold-500); font-weight: 600; font-style: normal; letter-spacing: -0.01em; } .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; } .nav-links a { font-size: 14px; font-weight: 500; color: var(--fg-tertiary); padding-bottom: 3px; background: linear-gradient(var(--gold-500), var(--gold-500)) left bottom / 0 1.5px no-repeat; transition: color var(--dur-fast) var(--ease-out), background-size var(--dur-medium) var(--ease-out); } .nav-links a:hover { color: var(--fg-primary); } /* Scroll-spy : la section visible est soulignee d'un trait d'or. */ .nav-links a.active { color: var(--fg-primary); background-size: 100% 1.5px; } .nav-actions { display: flex; align-items: center; gap: 18px; } /* Selecteur de langue : pill a drapeaux SVG. */ .lang-pill { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--border-default); border-radius: 999px; background: rgba(255, 255, 255, 0.02); } .lang-pill a, .lang-pill .lang-current { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; color: var(--fg-muted); transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .lang-pill .lang-current { background: var(--ink-700); color: var(--fg-primary); } .lang-pill a:hover { color: var(--fg-primary); background: rgba(255, 255, 255, 0.05); } .lang-pill svg.flag { width: 17px; height: 12px; border-radius: 2.5px; display: block; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); } .nav .btn { padding: 10px 20px; font-size: 14px; } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; overflow: hidden; background: radial-gradient(ellipse 90% 70% at 24% 12%, rgba(30, 46, 94, 0.50), transparent 62%), radial-gradient(ellipse 60% 50% at 86% 88%, rgba(21, 34, 74, 0.35), transparent 60%), linear-gradient(180deg, var(--navy-900) 0%, var(--ink-950) 86%, var(--ink-900) 100%); padding: 176px 0 120px; } .hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 169, 106, 0.28), transparent); } .hero-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 72px; align-items: center; } .hero h1 em { font-style: italic; color: var(--gold-400); } .hero .lead { font-size: 19px; } .hero-ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } /* ========================================================================== Sections ========================================================================== */ .section { padding: 116px 0; } .section-alt { background: var(--ink-850); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } /* ========================================================================== Feature cards ========================================================================== */ .features-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .feature-card { position: relative; display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 34px 34px 0; overflow: hidden; box-shadow: var(--sculpt-highlight); transition: border-color var(--dur-medium) var(--ease-out), background var(--dur-medium) var(--ease-out), transform var(--dur-medium) var(--ease-out), box-shadow var(--dur-medium) var(--ease-out); } .feature-card:hover { border-color: var(--border-strong); background: var(--ink-800); transform: translateY(-3px); box-shadow: var(--shadow-md), var(--sculpt-highlight); } .section-alt .feature-card { background: var(--ink-900); } .section-alt .feature-card:hover { background: var(--ink-850); } .feature-badge { display: inline-block; align-self: flex-start; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-500); border: 1px solid rgba(201, 169, 106, 0.32); border-radius: 999px; padding: 5px 12px; margin-bottom: 20px; } .feature-card h3 { font-size: 21px; } .feature-card p { font-size: 15px; color: var(--fg-tertiary); margin: 0 0 26px; max-width: 46ch; } .feature-visual { margin-top: auto; border: 1px solid var(--border-subtle); border-bottom: none; border-radius: 8px 8px 0 0; background: var(--ink-950); overflow: hidden; } .feature-visual svg { width: 100%; height: auto; } /* ========================================================================== Workflow ========================================================================== */ .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: step; } /* Workflow en deux temps : setup (une fois) puis routine (chaque set). */ .steps-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .workflow-sub { margin: 0 0 18px; } .workflow-sub + .steps { margin-bottom: 44px; } .steps:last-child { margin-bottom: 0; } .step .step-alt { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--fg-muted); } .step .step-alt strong { color: var(--gold-400); font-weight: 600; } .step { position: relative; padding: 30px 24px 26px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 10px; box-shadow: var(--sculpt-highlight); } .step-num { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--gold-500); letter-spacing: 0.08em; display: block; margin-bottom: 16px; } .step h3 { font-size: 17px; } .step p { font-size: 14px; color: var(--fg-tertiary); margin: 0; } .step::after { content: '\2192'; position: absolute; top: 28px; right: -19px; z-index: 2; color: var(--stone-500); font-size: 15px; } .step:last-child::after { content: none; } /* ========================================================================== Pricing ========================================================================== */ .pricing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; } .price-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 40px; box-shadow: var(--sculpt-highlight); } .price-card.featured { background: radial-gradient(ellipse 110% 90% at 18% 0%, rgba(30, 46, 94, 0.5), transparent 64%), var(--navy-900); border-color: rgba(201, 169, 106, 0.22); } .price-figure { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 6px; } .price-figure .big { font-family: var(--font-mono); font-size: 64px; font-weight: 600; line-height: 1; color: var(--marble-50); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .price-figure .unit { font-size: 16px; color: var(--fg-secondary); font-weight: 500; } .price-sub { color: var(--fg-tertiary); font-size: 15px; margin: 0 0 26px; } .price-list { list-style: none; margin: 0 0 32px; padding: 0; } .price-list li { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; font-size: 14.5px; color: var(--fg-secondary); } .price-list li svg { flex: none; margin-top: 4px; } .rate-table { width: 100%; border-collapse: collapse; margin: 18px 0 8px; } .rate-table th { text-align: left; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); padding: 0 0 12px; border-bottom: 1px solid var(--border-default); } .rate-table th:last-child, .rate-table td:last-child { text-align: right; } .rate-table td { padding: 13px 0; border-bottom: 1px solid var(--border-subtle); font-size: 15px; color: var(--fg-secondary); } .rate-table tr:last-child td { border-bottom: none; } .rate-table .credits { font-family: var(--font-mono); font-weight: 600; color: var(--marble-50); font-variant-numeric: tabular-nums; } .rate-table .credits span { color: var(--fg-muted); font-weight: 400; font-size: 12.5px; margin-left: 6px; } .price-example { margin-top: 22px; padding: 16px 18px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border-subtle); border-radius: 8px; font-size: 13.5px; color: var(--fg-tertiary); } .price-example .mono { color: var(--gold-400); } /* ========================================================================== FAQ ========================================================================== */ .faq-list { max-width: 760px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--border-subtle); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; padding: 24px 4px; font-size: 17px; font-weight: 500; color: var(--fg-primary); transition: color var(--dur-fast) var(--ease-out); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--gold-400); } .faq-item summary .indicator { flex: none; width: 22px; height: 22px; position: relative; opacity: 0.65; } .faq-item summary .indicator::before, .faq-item summary .indicator::after { content: ''; position: absolute; background: currentColor; transition: transform var(--dur-medium) var(--ease-out); } .faq-item summary .indicator::before { top: 10px; left: 4px; width: 14px; height: 1.5px; } .faq-item summary .indicator::after { top: 4px; left: 10px; width: 1.5px; height: 14px; } .faq-item[open] summary .indicator::after { transform: scaleY(0); } .faq-item .faq-body { padding: 0 40px 26px 4px; font-size: 15.5px; line-height: 1.7; color: var(--fg-tertiary); } .faq-item[open] .faq-body { animation: fade-up var(--dur-slow) var(--ease-out); } .faq-item .faq-body p { margin: 0 0 12px; } .faq-item .faq-body p:last-child { margin-bottom: 0; } /* ========================================================================== Final CTA ========================================================================== */ .final-cta { position: relative; overflow: hidden; text-align: center; padding: 140px 0; background: radial-gradient(ellipse 70% 90% at 50% 110%, rgba(30, 46, 94, 0.55), transparent 65%), var(--ink-950); border-top: 1px solid var(--border-subtle); } .final-cta::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 420px; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 169, 106, 0.45), transparent); } .final-cta h2 { margin-bottom: 14px; } .final-cta .lead { margin: 0 auto 40px; } /* ========================================================================== Footer ========================================================================== */ .footer { border-top: 1px solid var(--border-subtle); padding: 56px 0 44px; background: var(--ink-950); } .footer-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; } .footer .brand { font-size: 20px; } .footer .brand svg { width: 22px; height: 22px; } .footer-tagline { margin: 14px 0 0; font-size: 13.5px; color: var(--fg-muted); max-width: 320px; } .footer-col h4 { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); margin: 0 0 16px; } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { margin-bottom: 10px; } .footer-col a { font-size: 14px; color: var(--fg-tertiary); } .footer-col a:hover { color: var(--fg-primary); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border-subtle); font-size: 12.5px; color: var(--fg-muted); } /* ========================================================================== Mockup SVG animations ========================================================================== */ .hero-visual { position: relative; border-radius: 12px; border: 1px solid var(--border-default); background: var(--ink-950); box-shadow: var(--shadow-lg), var(--sculpt-highlight); overflow: hidden; } .hero-visual svg { width: 100%; height: auto; } @keyframes draw-line { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } } @keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse-dot { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } @keyframes type-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes float-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .anim-fade { opacity: 0; animation: fade-up 0.7s var(--ease-out) forwards; } .anim-bar { transform-origin: left center; transform: scaleX(0); animation: type-bar 0.9s var(--ease-out) forwards; } .anim-dot { animation: pulse-dot 2.4s ease-in-out infinite; } .anim-float { animation: float-slow 7s ease-in-out infinite; } /* Mini ligne de scan qui balaie le media (vignette Analyse rapide). */ @keyframes mini-scan { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 0.85; } 88% { opacity: 0.85; } 100% { transform: translateY(104px); opacity: 0; } } .mini-scan { animation: mini-scan 3.4s var(--ease-in-out) infinite; } .d-1 { animation-delay: 0.25s; } .d-2 { animation-delay: 0.55s; } .d-3 { animation-delay: 0.85s; } .d-4 { animation-delay: 1.15s; } .d-5 { animation-delay: 1.45s; } .d-6 { animation-delay: 1.75s; } .d-7 { animation-delay: 2.05s; } .d-8 { animation-delay: 2.35s; } /* ========================================================================== Scroll reveal ========================================================================== */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); } .reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); } .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.1s; } .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.2s; } .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.3s; } .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.4s; } /* ========================================================================== Blog ========================================================================== */ .blog-index { max-width: 820px; margin: 0 auto; padding: 150px 28px 100px; } .blog-index > h1 { font-size: clamp(36px, 5vw, 52px); margin-bottom: 10px; } .blog-index .blog-sub { color: var(--fg-tertiary); font-size: 16px; margin: 0 0 48px; max-width: 560px; } .post-card { display: block; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 28px 30px; margin-bottom: 18px; box-shadow: var(--sculpt-highlight); transition: border-color var(--dur-medium) var(--ease-out), background var(--dur-medium) var(--ease-out); } .post-card:hover { border-color: var(--border-strong); background: var(--ink-800); } .post-card .post-meta { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); display: block; margin-bottom: 10px; } .post-card h2 { font-family: var(--font-sans); font-weight: 600; font-size: 20px; margin: 0 0 8px; color: var(--fg-primary); } .post-card p { font-size: 14.5px; color: var(--fg-tertiary); margin: 0; } .post-card .read-more { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--gold-500); } .article-page { max-width: 720px; margin: 0 auto; padding: 150px 28px 80px; } .article-page h1 { font-size: clamp(32px, 4.6vw, 46px); margin-bottom: 14px; } .article-page .article-meta { color: var(--fg-muted); font-size: 13px; margin-bottom: 40px; } .article-page h2 { font-family: var(--font-sans); font-weight: 600; font-size: 22px; margin: 44px 0 14px; } .article-page p, .article-page li { font-size: 15.5px; line-height: 1.75; color: var(--fg-secondary); } .article-page ul, .article-page ol { padding-left: 22px; } .article-page li { margin-bottom: 8px; } .article-page strong { color: var(--fg-primary); } .article-page blockquote { margin: 28px 0; padding: 18px 22px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border-subtle); border-radius: 8px; font-size: 15px; color: var(--stone-100); } .article-page blockquote p { margin: 0; } .article-cta { margin: 52px 0 0; padding: 30px 32px; border-radius: 12px; background: radial-gradient(ellipse 110% 100% at 12% 0%, rgba(30, 46, 94, 0.5), transparent 65%), var(--navy-900); border: 1px solid rgba(201, 169, 106, 0.22); } .article-cta h2 { margin: 0 0 8px; font-size: 20px; } .article-cta p { margin: 0 0 20px; font-size: 14.5px; color: var(--fg-secondary); } /* ========================================================================== Legal pages ========================================================================== */ .legal-page { max-width: 720px; margin: 0 auto; padding: 150px 28px 100px; } .legal-page h1 { font-size: clamp(34px, 5vw, 48px); } .legal-page h2 { font-family: var(--font-sans); font-weight: 600; font-size: 21px; margin: 44px 0 12px; } .legal-page p, .legal-page li { font-size: 15px; line-height: 1.75; color: var(--fg-secondary); } .legal-page .updated { color: var(--fg-muted); font-size: 13.5px; margin-bottom: 40px; } /* ========================================================================== 404 ========================================================================== */ .error-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 28px; background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(30, 46, 94, 0.4), transparent 65%), var(--ink-950); } .error-page .code { font-family: var(--font-display); font-size: clamp(90px, 16vw, 160px); line-height: 1; color: var(--stone-500); margin-bottom: 8px; } /* ========================================================================== Burger menu (mobile) ========================================================================== */ .nav-burger { display: none; background: none; border: 1px solid var(--border-strong); border-radius: 6px; width: 40px; height: 40px; padding: 0; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .nav-burger span { display: block; width: 16px; height: 1.5px; background: var(--fg-secondary); transition: transform var(--dur-medium) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .nav.menu-open .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav.menu-open .nav-burger span:nth-child(2) { opacity: 0; } .nav.menu-open .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ========================================================================== Formule : persona + medias = sextos ========================================================================== */ .formula { display: grid; grid-template-columns: 1fr auto 1fr auto 1.2fr; gap: 18px; align-items: stretch; } .formula-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 28px 26px; box-shadow: var(--sculpt-highlight); } .formula-card.result { background: radial-gradient(ellipse 120% 100% at 50% 0%, rgba(30, 46, 94, 0.5), transparent 70%), var(--navy-900); border-color: rgba(201, 169, 106, 0.3); } .formula-card .eyebrow { margin-bottom: 12px; } .formula-card h3 { font-size: 18px; margin-bottom: 8px; } .formula-card p { font-size: 14px; color: var(--fg-tertiary); margin: 0; } .formula-op { align-self: center; font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--gold-500); padding: 0 4px; } .formula-kicker { margin: 36px auto 0; max-width: 720px; text-align: center; font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2.6vw, 27px); line-height: 1.45; color: var(--marble-200); } .formula-kicker strong { color: var(--gold-400); font-weight: 500; } /* ========================================================================== Douleurs : avant / avec OnlyScript ========================================================================== */ .pain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .pain-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 30px 28px; box-shadow: var(--sculpt-highlight); transition: border-color var(--dur-medium) var(--ease-out), transform var(--dur-medium) var(--ease-out), box-shadow var(--dur-medium) var(--ease-out); } .pain-card:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: var(--shadow-md), var(--sculpt-highlight); } .section-alt .pain-card { background: var(--ink-900); } .pain-card h3 { font-size: 18px; margin-bottom: 14px; } .pain-card .pain { font-size: 14px; color: var(--fg-muted); margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle); } .pain-card .gain { font-size: 14.5px; color: var(--fg-secondary); margin: 0; } .pain-card .gain strong { color: var(--gold-400); font-weight: 600; } /* ========================================================================== Preuve : panneaux UI avec textes generes ========================================================================== */ .proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; } .panel { background: var(--ink-950); border: 1px solid var(--border-default); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-md), var(--sculpt-highlight); } .panel-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--ink-850); border-bottom: 1px solid var(--border-subtle); } .panel-bar .dots { display: flex; gap: 5px; } .panel-bar .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-600); } .panel-bar .panel-label { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); } .panel-bar .voice-chip { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-400); border: 1px solid rgba(201, 169, 106, 0.35); border-radius: 999px; padding: 3px 10px; } .panel-body { padding: 20px 18px; } /* Selecteurs interactifs de la demo (curseurs voix + langage de l'app) */ .voice-toggle { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; } .voice-toggle:last-of-type { margin-bottom: 16px; } .voice-toggle .toggle-label { font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); min-width: 62px; } .voice-toggle button { font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; background: transparent; border: 1px solid var(--border-default); color: var(--fg-muted); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .voice-toggle button:hover { color: var(--fg-primary); } .voice-toggle button.active { color: var(--gold-400); border-color: rgba(201, 169, 106, 0.45); background: rgba(201, 169, 106, 0.08); } .bubble-set[hidden] { display: none; } .bubble-set.swap-in { animation: fade-up var(--dur-slow) var(--ease-out); } /* Bulles sexting */ .bubble { position: relative; background: var(--ink-800); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 13px 15px; font-size: 13.5px; line-height: 1.55; color: var(--stone-100); margin-bottom: 12px; } .bubble.gold { background: rgba(201, 169, 106, 0.10); border-color: rgba(201, 169, 106, 0.3); } .bubble .bubble-tag { display: block; font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 6px; } .bubble.gold .bubble-tag { color: var(--gold-600); } .bubble:last-child { margin-bottom: 0; } /* Description media */ .desc-row { margin-bottom: 14px; } .desc-row:last-child { margin-bottom: 0; } .desc-row .desc-label { display: block; font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-600); margin-bottom: 5px; } .desc-row p { font-size: 13px; line-height: 1.55; color: var(--stone-200); margin: 0; } /* Extrait fiche persona */ .persona-pre { font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--stone-200); white-space: pre-wrap; margin: 0; } .persona-pre .k { color: var(--gold-500); font-weight: 600; } .panel-caption { margin: 12px 4px 0; font-size: 12.5px; line-height: 1.5; color: var(--fg-muted); } /* Demo "analyse live" : media stylise scanne + texte qui se tape seul */ .media-scan { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-subtle); margin-bottom: 18px; background: var(--ink-800); } .media-scan svg { width: 100%; height: auto; display: block; } .media-scan img { width: 100%; height: auto; display: block; } /* Habillage video de la vignette : bouton play + duree. */ .media-scan .play-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(6, 8, 13, 0.55); border: 1px solid rgba(244, 241, 236, 0.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; color: var(--marble-100); pointer-events: none; } .media-scan .play-badge svg { width: 20px; height: 20px; margin-left: 3px; } .media-scan .duration-chip { position: absolute; left: 10px; bottom: 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; padding: 4px 9px; border-radius: 999px; background: rgba(6, 8, 13, 0.72); color: var(--stone-100); border: 1px solid var(--border-default); pointer-events: none; } .scan-beam { position: absolute; left: 0; right: 0; top: -8%; height: 34%; background: linear-gradient(180deg, transparent, rgba(201, 169, 106, 0.16) 45%, rgba(201, 169, 106, 0.55) 50%, rgba(201, 169, 106, 0.16) 55%, transparent); opacity: 0; pointer-events: none; } .media-scan.is-scanning .scan-beam { opacity: 1; animation: scan-sweep 1.3s var(--ease-in-out) 2; } @keyframes scan-sweep { from { transform: translateY(-40%); } to { transform: translateY(320%); } } .type-line.typing::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -2px; background: var(--gold-400); animation: caret-blink 0.9s steps(1) infinite; } @keyframes caret-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } } .proof-note { margin: 36px auto 0; text-align: center; font-size: 13px; color: var(--fg-muted); } /* ========================================================================== Ecosysteme : chatbots + Telegram ========================================================================== */ .eco-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .eco-card { display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 34px; box-shadow: var(--sculpt-highlight); transition: border-color var(--dur-medium) var(--ease-out), transform var(--dur-medium) var(--ease-out), box-shadow var(--dur-medium) var(--ease-out); } .eco-card:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: var(--shadow-md), var(--sculpt-highlight); } .section-alt .eco-card { background: var(--ink-900); } .eco-card .feature-badge { margin-bottom: 18px; } .eco-card h3 { font-size: 20px; } .eco-card p { font-size: 15px; color: var(--fg-tertiary); margin: 0 0 12px; } .eco-card p:last-child { margin-bottom: 0; } .eco-card .eco-list { list-style: none; margin: 6px 0 0; padding: 0; } .eco-card .eco-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--fg-secondary); padding: 6px 0; } .eco-card .eco-list li::before { content: '\2192'; color: var(--gold-500); flex: none; } /* ========================================================================== Bloc solo ========================================================================== */ .solo-banner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; background: radial-gradient(ellipse 90% 130% at 8% 50%, rgba(30, 46, 94, 0.55), transparent 65%), var(--navy-900); border: 1px solid rgba(201, 169, 106, 0.22); border-radius: 12px; padding: 36px 40px; box-shadow: var(--sculpt-highlight); } .solo-banner h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 3vw, 32px); margin: 0 0 8px; color: var(--marble-50); } .solo-banner p { font-size: 15px; color: var(--fg-secondary); margin: 0; max-width: 560px; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1023px) { .hero { padding: 150px 0 90px; } .hero-grid { grid-template-columns: 1fr; gap: 56px; } .hero .lead { max-width: 640px; } .hero-visual { max-width: 620px; } .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .step::after { content: none; } .pricing-grid { grid-template-columns: 1fr; } .formula { grid-template-columns: 1fr; } .formula-op { justify-self: center; padding: 2px 0; } .proof-grid, .pain-grid { grid-template-columns: 1fr; max-width: 620px; margin-left: auto; margin-right: auto; } /* Burger des la tablette : 5 ancres + switch + CTA ne tiennent pas. */ .nav-burger { display: flex; } .nav.menu-open { background: rgba(10, 12, 18, 0.97); border-bottom-color: var(--border-subtle); } .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(10, 12, 18, 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); padding: 6px 28px 14px; } .nav.menu-open .nav-links { display: flex; } .nav-links a { display: block; padding: 13px 0; font-size: 15px; } } @media (max-width: 767px) { .section { padding: 84px 0; } .features-grid { grid-template-columns: 1fr; } .feature-card { padding: 28px 24px 0; } .price-card { padding: 30px 24px; } .price-figure .big { font-size: 52px; } .final-cta { padding: 100px 0; } .footer-grid { flex-direction: column; gap: 32px; } .eco-grid { grid-template-columns: 1fr; } .eco-card { padding: 28px 24px; } .solo-banner { padding: 30px 24px; } } @media (max-width: 479px) { .container { padding: 0 20px; } /* Nav compacte : le switch de langue reste accessible dans le footer. */ .nav .lang-pill { display: none; } .nav-inner { gap: 12px; } .nav-actions { gap: 8px; } .nav .btn { padding: 8px 10px; font-size: 12px; } .nav-burger { width: 34px; height: 34px; } .brand { font-size: 19px; gap: 8px; } .brand svg { width: 20px; height: 20px; } .hero { padding: 128px 0 72px; } /* Les gros CTA passent pleine largeur et acceptent le retour a la ligne. */ .btn-lg { width: 100%; white-space: normal; } .steps { grid-template-columns: 1fr; } .facts { gap: 14px 24px; margin-top: 40px; } .faq-item summary { font-size: 15.5px; } .faq-item .faq-body { padding-right: 8px; } } /* ========================================================================== Reduced motion : neutralize everything ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal, .reveal-stagger > * { opacity: 1; transform: none; } .anim-fade, .anim-bar { opacity: 1; transform: none; animation: none; } }