/* ═══════════════════════════════════════════════════════════ landing.css — Site vitrine Flouze (flouze.mrweb.fr). Charte alignée sur l'app (renderer/styles/app.css). Accent #5E5CE6. Thème clair/sombre via [data-theme] sur , piloté par landing.js. ═══════════════════════════════════════════════════════════ */ /* ═══ TOKENS ════════════════════════════════════════════════ */ :root { --accent: #5E5CE6; --accent-2: #818CF8; --accent-deep: #4338CA; --accent-soft: rgba(94,92,230,0.08); --green: #10B981; --red: #EF4444; --amber: #F59E0B; --blue: #3B82F6; --purple: #8B5CF6; --bg: #F5F6FB; --bg-pattern: radial-gradient(circle at 1px 1px, rgba(15,23,42,0.04) 1px, transparent 0); --surface: #FFFFFF; --surface-2: #F8F9FD; --surface-3: #F1F3F9; --surface-hover: #F0F2F9; --text: #0B1020; --text-2: #525B73; --text-3: #8B93A8; --text-4: #B8BECC; --border: rgba(15,23,42,0.07); --border-2: rgba(15,23,42,0.04); --hairline: rgba(15,23,42,0.06); --sh-1: 0 1px 2px rgba(15,23,42,0.04); --sh-card: 0 0 0 0.5px rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.05); --sh-elev: 0 0 0 0.5px rgba(15,23,42,0.05), 0 2px 4px rgba(15,23,42,0.06), 0 12px 32px rgba(15,23,42,0.10); --sh-hero: 0 30px 80px rgba(15,23,42,0.18), 0 8px 24px rgba(15,23,42,0.10); --r: 14px; --r-md: 10px; --r-sm: 8px; --r-pill: 999px; --nav-h: 64px; } [data-theme="dark"] { --bg: #06070D; --bg-pattern: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.03) 1px, transparent 0); --surface: #0F1117; --surface-2: #141823; --surface-3: #1A2030; --surface-hover: #1B2030; --text: #EEF1F8; --text-2: #8B93A8; --text-3: #5C6478; --text-4: #3C4256; --border: rgba(255,255,255,0.07); --border-2: rgba(255,255,255,0.04); --hairline: rgba(255,255,255,0.05); --accent-soft: rgba(94,92,230,0.16); --sh-card: 0 0 0 0.5px rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.25); --sh-elev: 0 0 0 0.5px rgba(255,255,255,0.06), 0 2px 4px rgba(0,0,0,0.3), 0 12px 32px rgba(0,0,0,0.4); --sh-hero: 0 30px 90px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.4); } /* ═══ RESET ════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); } body { font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; background: var(--bg); background-image: var(--bg-pattern); background-size: 24px 24px; color: var(--text); transition: background .25s, color .25s; } svg { display: block; } a { text-decoration: none; color: inherit; } button { border: none; background: none; cursor: pointer; font: inherit; color: inherit; } .tnum { font-variant-numeric: tabular-nums; } /* ═══ BRAND MARK ═══════════════════════════════════════════ */ .brand-mark { width: 30px; height: 30px; border-radius: 8px; background: #e2dff4; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(94,92,230,0.30); } .brand-mark svg { height: 18px; width: auto; } .brand-mark.sm { width: 26px; height: 26px; border-radius: 7px; } .brand-mark.sm svg { height: 15px; } /* ═══ NAV ══════════════════════════════════════════════════ */ .nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; gap: 24px; padding: 0 28px; background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--hairline); } .nav-brand { display: flex; align-items: center; gap: 10px; } .brand-name { font-size: 16px; font-weight: 800; letter-spacing: -0.4px; } .nav-links { display: flex; align-items: center; gap: 6px; margin-left: 8px; } .nav-links a { padding: 7px 12px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; color: var(--text-2); transition: background .15s, color .15s; } .nav-links a:hover { background: var(--surface-hover); color: var(--text); } .nav-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; } .theme-toggle { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-2); transition: background .15s, color .15s; } .theme-toggle:hover { background: var(--surface-hover); color: var(--text); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .i-moon { display: none; } [data-theme="dark"] .theme-toggle .i-sun { display: none; } [data-theme="dark"] .theme-toggle .i-moon { display: block; } /* ═══ BUTTONS ══════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; border: 1px solid transparent; transition: background .15s, filter .15s, transform .15s, border-color .15s; } .btn svg { width: 16px; height: 16px; } .btn-primary { background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%); color: #fff; border-color: var(--accent-deep); box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 1px 2px rgba(67,56,202,0.4), 0 6px 16px rgba(67,56,202,0.25); } .btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); } .btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text-2); } .btn-ghost:hover { background: var(--surface-hover); color: var(--text); } .btn-lg { padding: 13px 24px; font-size: 15px; border-radius: var(--r-md); } .nav-cta { padding: 8px 14px; } /* ═══ HERO ═════════════════════════════════════════════════ */ .hero { position: relative; max-width: 1000px; margin: 0 auto; padding: 88px 24px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; } .hero-glow { position: absolute; inset: -10% -20% auto; height: 560px; z-index: -1; background: radial-gradient(ellipse 620px 380px at 30% 0%, rgba(94,92,230,0.20) 0%, transparent 60%), radial-gradient(ellipse 520px 360px at 80% 30%, rgba(16,185,129,0.12) 0%, transparent 60%); pointer-events: none; } [data-theme="dark"] .hero-glow { background: radial-gradient(ellipse 620px 380px at 30% 0%, rgba(94,92,230,0.28) 0%, transparent 60%), radial-gradient(ellipse 520px 360px at 80% 30%, rgba(16,185,129,0.16) 0%, transparent 60%); } .hero-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.3px; color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(94,92,230,0.2); padding: 5px 13px; border-radius: var(--r-pill); margin-bottom: 22px; } .hero-tag svg { width: 13px; height: 13px; } .hero-title { font-size: clamp(38px, 6vw, 62px); font-weight: 850; letter-spacing: -2px; line-height: 1.04; margin-bottom: 20px; } .hero-title .grad { background: linear-gradient(120deg, var(--accent-2) 0%, var(--accent) 45%, var(--accent-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub { font-size: 16.5px; color: var(--text-2); line-height: 1.6; max-width: 580px; margin: 0 auto; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; } .hero-meta { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 12.5px; font-weight: 500; color: var(--text-3); } .hero-meta-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(16,185,129,0.18); } /* ── App preview window ──────────────────────────────────── */ .hero-shot { width: 100%; max-width: 920px; margin: 56px auto 0; } .window { border-radius: var(--r); overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-hero); } .window-bar { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: var(--surface-2); border-bottom: 1px solid var(--hairline); } .window-bar .dot { width: 11px; height: 11px; border-radius: 50%; } .window-bar .dot.red { background: #FF5F57; } .window-bar .dot.amber { background: #FEBC2E; } .window-bar .dot.green { background: #28C840; } .window-title { margin-left: 12px; font-size: 12px; font-weight: 600; color: var(--text-3); } .window-body { display: flex; min-height: 340px; } .shot-sb { width: 168px; flex-shrink: 0; background: linear-gradient(180deg, #0B0B14 0%, #08080F 100%); padding: 16px 12px; display: flex; flex-direction: column; gap: 9px; } .shot-sb-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .shot-sb-mark { width: 24px; height: 24px; border-radius: 6px; background: #e2dff4; display: flex; align-items: center; justify-content: center; } .shot-sb-mark svg { height: 14px; } .shot-sb-name { font-size: 13px; font-weight: 800; color: #fff; } .shot-sb-item { height: 30px; border-radius: var(--r-sm); background: rgba(255,255,255,0.04); } .shot-sb-item.active { background: rgba(94,92,230,0.22); box-shadow: inset 2px 0 0 var(--accent-2); } .shot-sb-item.short { width: 70%; } .shot-main { flex: 1; padding: 18px; display: flex; flex-direction: column; gap: 14px; background: var(--bg); background-image: var(--bg-pattern); background-size: 24px 24px; } .shot-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .shot-stat { background: var(--surface); border-radius: var(--r-md); padding: 12px; box-shadow: var(--sh-card); display: flex; flex-direction: column; gap: 7px; } .shot-stat-label { font-size: 10px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.4px; } .shot-stat-value { font-size: 16px; font-weight: 800; letter-spacing: -0.4px; } .shot-stat-value.red { color: var(--red); } .shot-stat-value.green { color: var(--green); } .shot-bar { height: 4px; border-radius: 3px; background: var(--surface-3); overflow: hidden; } .shot-bar-fill { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); } .shot-bar-fill.red { background: linear-gradient(90deg, #DC2626, var(--red)); } .shot-bar-fill.green { background: linear-gradient(90deg, #059669, var(--green)); } .shot-chart { flex: 1; background: var(--surface); border-radius: var(--r-md); padding: 14px; box-shadow: var(--sh-card); display: flex; flex-direction: column; gap: 12px; } .shot-chart-title { font-size: 11px; font-weight: 700; color: var(--text-2); } .shot-chart-bars { flex: 1; display: flex; align-items: flex-end; gap: 10px; min-height: 90px; } .shot-chart-bars span { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--accent-2), var(--accent)); opacity: 0.85; } .shot-chart-bars span:nth-child(7) { background: linear-gradient(180deg, #34D399, var(--green)); opacity: 1; } /* ═══ SECTIONS ═════════════════════════════════════════════ */ .section { max-width: 1080px; margin: 0 auto; padding: 72px 24px; } .section-head { text-align: center; max-width: 620px; margin: 0 auto 44px; } .kicker { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .section-title { font-size: clamp(26px, 4vw, 36px); font-weight: 820; letter-spacing: -1px; margin-bottom: 12px; } .section-sub { font-size: 15.5px; color: var(--text-2); line-height: 1.6; } /* ═══ FEATURES GRID ════════════════════════════════════════ */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .feat { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r); padding: 24px 22px; box-shadow: var(--sh-card); transition: transform .18s, box-shadow .18s, border-color .18s; } .feat:hover { transform: translateY(-3px); box-shadow: var(--sh-elev); border-color: rgba(94,92,230,0.2); } .feat-ico { width: 42px; height: 42px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .feat-ico svg { width: 20px; height: 20px; } .feat-ico.indigo { background: rgba(94,92,230,0.10); color: var(--accent); } .feat-ico.green { background: rgba(16,185,129,0.10); color: var(--green); } .feat-ico.blue { background: rgba(59,130,246,0.10); color: var(--blue); } .feat-ico.amber { background: rgba(245,158,11,0.10); color: var(--amber); } .feat-ico.purple { background: rgba(139,92,246,0.10); color: var(--purple); } .feat-ico.red { background: rgba(239,68,68,0.10); color: var(--red); } .feat-title { font-size: 16px; font-weight: 750; letter-spacing: -0.3px; margin-bottom: 7px; } .feat-text { font-size: 13.5px; color: var(--text-2); line-height: 1.6; } /* ═══ DOWNLOAD ═════════════════════════════════════════════ */ .download { padding-top: 24px; } .dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 880px; margin: 0 auto; } .dl-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 28px 22px; text-align: center; box-shadow: var(--sh-card); display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; transition: transform .18s, box-shadow .18s, border-color .18s; } .dl-card:hover { transform: translateY(-3px); box-shadow: var(--sh-elev); } .dl-card.recommended { border-color: rgba(94,92,230,0.35); box-shadow: var(--sh-elev); } .dl-card.recommended::before { content: 'Recommandé'; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, var(--accent), var(--accent-deep)); padding: 3px 10px; border-radius: var(--r-pill); box-shadow: 0 4px 12px rgba(67,56,202,0.3); } .dl-os-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text); margin-bottom: 10px; } .dl-os-ico svg { width: 26px; height: 26px; } .dl-os-name { font-size: 16px; font-weight: 750; letter-spacing: -0.3px; } .dl-os-meta { font-size: 12px; color: var(--text-3); margin-bottom: 14px; min-height: 16px; } .dl-btns { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .dl-card .btn { width: 100%; } .dl-card.disabled { opacity: 0.6; } .dl-card.disabled .btn { pointer-events: none; opacity: 0.7; } .dl-note { text-align: center; font-size: 12.5px; color: var(--text-3); margin-top: 22px; } /* ═══ FOOTER ═══════════════════════════════════════════════ */ .footer { border-top: 1px solid var(--hairline); background: var(--surface); margin-top: 32px; } .footer-inner { max-width: 1080px; margin: 0 auto; padding: 40px 24px; text-align: center; } .footer-brand { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 10px; } .footer-name { font-size: 15px; font-weight: 800; letter-spacing: -0.3px; } .footer-tag { font-size: 13.5px; color: var(--text-2); margin-bottom: 14px; } .footer-copy { font-size: 12px; color: var(--text-3); } /* ═══ RESPONSIVE ═══════════════════════════════════════════ */ @media (max-width: 860px) { .grid, .dl-grid { grid-template-columns: 1fr 1fr; } .shot-cards { grid-template-columns: 1fr; } .shot-sb { display: none; } } @media (max-width: 640px) { .nav { padding: 0 16px; gap: 12px; } .nav-links { display: none; } .grid, .dl-grid { grid-template-columns: 1fr; } .hero { padding-top: 56px; } .hero-shot { margin-top: 40px; } .window-body { min-height: 0; } }