/* ───────────────────────────────────────────────────────────── Flaynn · Pages de lancement (handoff design de septembre 2026) Partagée par /investisseurs/ et /fondateurs/. Charge après tokens.css, shared.css (nav, boutons), universes.css et primitives.css. L'accent de la page vient de --lp-accent / --lp-accent-ink, posés sur : violet côté Investor, orange côté Founder. Aucune valeur de marque en dur, sauf les rgba de décor. ───────────────────────────────────────────────────────────── */ body.lp { --lp-accent: var(--int-accent); --lp-accent-mid: var(--int-accent-mid); --lp-accent-ink: var(--int-accent-soft); --lp-halo: rgba(123, 45, 142, 0.24); --lp-halo-2: rgba(232, 101, 26, 0.08); --lp-ink: var(--int-ink); --lp-ink-strong: var(--int-ink-strong); --lp-ink-muted: var(--int-ink-muted); --lp-ink-faint: var(--int-ink-faint); background: var(--int-bg); color: var(--lp-ink); overflow-x: clip; } body.lp--founder { --lp-accent: var(--orange); --lp-accent-mid: var(--atl-flaynn-soft); --lp-accent-ink: #f4a06a; --lp-halo: rgba(232, 101, 26, 0.15); --lp-halo-2: rgba(123, 45, 142, 0.14); --lp-ink: #f6e9df; --lp-ink-strong: #fbf3ee; --lp-ink-muted: #c3b6ac; --lp-ink-faint: #8a8078; } .lp a { color: inherit; } .lp h1, .lp h2, .lp h3, .lp p { margin: 0; } .lp .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .lp-wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); } .lp-section { padding: clamp(40px, 8vh, 92px) 0; } .lp-section--band { border-top: 1px solid var(--int-border-strong); background: rgba(255, 255, 255, 0.014); } .lp-eyebrow { display: block; margin-bottom: var(--sp-3); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--lp-accent-ink); } .lp-h2 { font-family: var(--font-sans); font-weight: 300; font-size: clamp(28px, 3.8vw, 46px); line-height: 1.05; letter-spacing: -0.042em; color: var(--lp-ink-strong); text-wrap: balance; } .lp-lede { font-weight: 300; font-size: 16.5px; line-height: 1.55; color: var(--lp-ink-muted); text-wrap: pretty; max-width: 62ch; } .lp-head { display: flex; flex-direction: column; gap: 12px; max-width: 70ch; margin-bottom: clamp(22px, 4vh, 36px); } .lp-head--split { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; max-width: none; } .lp-head--split > div { display: flex; flex-direction: column; gap: 12px; max-width: 56ch; } .lp-aside { font-size: 12.5px; line-height: 1.5; color: var(--lp-ink-faint); max-width: 34ch; } /* ─── Nav ─── */ .lp .nav-glass { height: 68px; } .lp .nav-content { height: 68px; } .lp .nav-glass .logo-img { height: 40px; width: auto; } .lp .nav-badge { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lp-accent-ink); border: 1px solid currentColor; border-radius: var(--r-pill); padding: 3px 8px; opacity: 0.9; } .lp .nav-links { gap: 8px; } .lp .nav-link { font-size: 13.5px; color: var(--lp-ink-muted); } .lp .nav-link:hover { color: var(--lp-ink-strong); } .lp .nav-cta { font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none; height: 40px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: var(--r-pill); background: var(--lp-accent); color: #fff; box-shadow: var(--int-shadow-cta); } body.lp--founder .nav-cta { background: var(--atl-cta); box-shadow: var(--atl-shadow-cta); } .lp .nav-cta:hover { background: var(--lp-accent-mid); box-shadow: none; } body.lp--founder .nav-cta:hover { background: var(--atl-cta); filter: brightness(1.05); } @media (max-width: 800px) { .lp .nav-links { display: none; } } /* ─── Hero ─── */ .lp-hero { position: relative; overflow: hidden; background: radial-gradient(1000px 540px at 78% -14%, var(--lp-halo), transparent 62%), radial-gradient(700px 420px at 6% 104%, var(--lp-halo-2), transparent 60%), var(--int-bg); } body.lp--founder .lp-hero { background: radial-gradient(1000px 520px at 14% -12%, var(--lp-halo), transparent 62%), radial-gradient(760px 460px at 94% 106%, var(--lp-halo-2), transparent 60%), var(--int-bg); } .lp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding-block: clamp(40px, 8vh, 96px) clamp(34px, 6vh, 74px); } .lp-hero__copy { display: flex; flex-direction: column; gap: clamp(14px, 2.4vh, 22px); max-width: 60ch; } .lp-hero__tag { display: inline-flex; align-self: flex-start; align-items: center; gap: 9px; padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--lp-accent); background: color-mix(in srgb, var(--lp-accent) 12%, transparent); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lp-accent-ink); } .lp-hero__title { font-family: var(--font-sans); font-weight: 300; font-size: clamp(36px, 5.2vw, 66px); line-height: 1.01; letter-spacing: -0.048em; color: var(--lp-ink-strong); text-wrap: balance; } .lp-hero__sub { font-weight: 300; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.5; color: var(--lp-ink-muted); max-width: 50ch; text-wrap: pretty; } .lp-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 6px; } .lp-hero__note { font-size: 12.5px; line-height: 1.5; color: var(--lp-ink-faint); max-width: 34ch; } .lp-hero__link { font-size: 13.5px; color: var(--lp-ink-muted); border-bottom: 1px solid var(--lp-accent-ink); padding-bottom: 2px; text-decoration: none; } .lp-hero__link:hover { color: var(--lp-ink-strong); } .lp-hero__facts { display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 34px); margin-top: clamp(10px, 2.4vh, 20px); padding-top: clamp(14px, 2.4vh, 22px); border-top: 1px solid var(--int-border-strong); } .lp-hero__fact { display: flex; flex-direction: column; gap: 3px; flex: 1 1 150px; max-width: 24ch; } .lp-hero__fact strong { font-family: var(--font-mono); font-weight: 400; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -0.03em; color: var(--lp-ink-strong); font-variant-numeric: tabular-nums; } .lp-hero__fact span { font-size: 11.5px; line-height: 1.4; color: var(--lp-ink-faint); } .lp-hero__visual { display: flex; justify-content: center; } /* Le bouton principal de la page, même forme dans les deux univers. */ .lp-cta { display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 28px; border-radius: var(--r-pill); background: var(--lp-accent); color: #fff; font-family: var(--font-sans); font-size: 15.5px; font-weight: 500; text-decoration: none; box-shadow: var(--int-shadow-cta); transition: transform var(--dur-2) var(--ease-bounce), background var(--dur-3), filter var(--dur-3); } .lp-cta::after { content: '→'; } .lp-cta:hover { transform: translateY(-1px); background: var(--lp-accent-mid); } body.lp--founder .lp-cta { background: var(--atl-cta); box-shadow: var(--atl-shadow-cta); } body.lp--founder .lp-cta:hover { background: var(--atl-cta); filter: brightness(1.04); } .lp-cta--ghost { background: transparent; border: 1px solid var(--int-border-strong); color: var(--lp-ink); box-shadow: none; } .lp-cta--ghost::after { content: none; } .lp-cta--ghost:hover, body.lp--founder .lp-cta--ghost:hover { background: rgba(255, 255, 255, 0.06); filter: none; } .lp-cta--sm { height: 46px; padding: 0 20px; font-size: 14px; } /* ─── Visuel Investor : la pile et le dossier à lire en premier ─── */ @keyframes ivPile { 0% { transform: translateY(0); } 18% { transform: translateY(-62px); } 36% { transform: translateY(-124px); } 54%, 92% { transform: translateY(-186px); } 100% { transform: translateY(-186px); } } @keyframes ivKeep { 0%, 52% { opacity: 0; transform: translateX(14px) scale(0.98); } 62%, 92% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } } @keyframes ivThread { 0%, 60% { transform: scaleX(0); } 72%, 92% { transform: scaleX(1); } 100% { transform: scaleX(1); } } @keyframes ivPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(168, 94, 192, 0.5); } 60% { box-shadow: 0 0 0 9px rgba(168, 94, 192, 0); } } .pile { position: relative; width: min(400px, 100%); height: 420px; } .pile__stack { position: absolute; left: 0; top: 0; width: 56%; height: 100%; border-radius: var(--r-lg); border: 1px solid var(--int-border-strong); background: var(--int-surface); overflow: hidden; } .pile__head { height: 28px; display: flex; align-items: center; padding: 0 12px; border-bottom: 1px solid var(--int-border); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--lp-ink-faint); } .pile__rows { padding: 10px; animation: ivPile 7s cubic-bezier(0.3, 0.9, 0.2, 1) infinite; } .pile__row { height: 52px; margin-bottom: 10px; border-radius: var(--r-2); border: 1px solid var(--int-border); background: rgba(255, 255, 255, 0.02); padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; } .pile__row span:first-child { font-family: var(--font-mono); font-size: 8.5px; color: var(--lp-ink-faint); } .pile__row i { display: block; height: 6px; border-radius: var(--r-1); background: rgba(255, 255, 255, 0.12); } .pile__row i + i { height: 4px; width: 52%; background: rgba(255, 255, 255, 0.07); } .pile__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(to bottom, transparent, var(--int-surface) 70%); pointer-events: none; } .pile__keep { position: absolute; right: 0; top: 38px; width: 62%; border-radius: var(--r-lg); border: 1px solid rgba(168, 94, 192, 0.4); background: linear-gradient(168deg, rgba(123, 45, 142, 0.2), var(--int-surface) 58%); box-shadow: 0 60px 130px -50px rgba(123, 45, 142, 0.8); padding: 18px 20px; display: flex; flex-direction: column; gap: 13px; animation: ivKeep 7s var(--ease-soft) infinite; } .pile__keep-tag { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--lp-accent-ink); } .pile__keep-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--int-accent-mid); animation: ivPulse 2.6s ease-out infinite; } .pile__name { font-weight: 300; font-size: 24px; line-height: 1.05; letter-spacing: -0.03em; color: var(--lp-ink-strong); } .pile__meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--lp-ink-faint); } .pile__lines { display: flex; flex-direction: column; gap: 6px; padding-top: 11px; border-top: 1px solid var(--int-border-strong); } .pile__line { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 8px; align-items: center; font-size: 11.5px; color: var(--lp-ink); } .pile__line span:last-child { font-family: var(--font-mono); font-size: 9.5px; } .pile__line i { display: block; height: 1px; transform-origin: left; animation: ivThread 7s var(--ease-soft) infinite; } .pile__line--v i { background: var(--prov-verified); } .pile__line--v span:last-child { color: var(--prov-verified); } .pile__line--d i { background: linear-gradient(90deg, var(--prov-inferred), rgba(255, 255, 255, 0.2)); } .pile__line--d span:last-child { color: var(--prov-inferred); } .pile__q { display: flex; flex-direction: column; gap: 5px; padding-top: 11px; border-top: 1px solid var(--int-border-strong); } .pile__q b { font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: 0.14em; color: var(--lp-accent-ink); } .pile__q span { font-size: 12px; line-height: 1.4; color: var(--lp-ink-muted); } /* ─── Visuel Founder : le deck lu en quarante secondes ─── */ @keyframes lpScroll { 0% { transform: translateY(0); } 12% { transform: translateY(-96px); } 20% { transform: translateY(-192px); } 28% { transform: translateY(-288px); } 34%, 88% { transform: translateY(-384px); } 100% { transform: translateY(-384px); } } @keyframes lpFreeze { 0%, 32% { opacity: 0; } 40%, 88% { opacity: 1; } 100% { opacity: 1; } } @keyframes lpStamp { 0%, 44% { opacity: 0; transform: scale(0.9) rotate(-4deg); } 52%, 88% { opacity: 1; transform: scale(1) rotate(-1.5deg); } 100% { opacity: 1; transform: scale(1) rotate(-1.5deg); } } .deck { position: relative; width: min(340px, 100%); height: 440px; border-radius: var(--r-4); border: 1px solid var(--int-border-strong); background: #0a0b10; overflow: hidden; box-shadow: 0 70px 140px -60px rgba(232, 101, 26, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .deck__head { position: absolute; left: 0; right: 0; top: 0; height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border-bottom: 1px solid var(--int-border); background: rgba(10, 11, 16, 0.95); z-index: 3; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--lp-ink-faint); } .deck__pages { position: absolute; left: 0; right: 0; top: 30px; padding: 12px; animation: lpScroll 7s cubic-bezier(0.3, 0.9, 0.2, 1) infinite; } .deck__page { height: 84px; margin-bottom: 12px; border-radius: var(--r-2); border: 1px solid var(--int-border-strong); background: rgba(255, 255, 255, 0.025); padding: 11px 12px; display: flex; flex-direction: column; gap: 6px; } .deck__page span { font-family: var(--font-mono); font-size: 8.5px; color: var(--lp-ink-faint); } .deck__page i { display: block; height: 9px; border-radius: var(--r-2); background: rgba(255, 255, 255, 0.14); } .deck__page i + i { height: 5px; background: rgba(255, 255, 255, 0.08); } .deck__veil { position: absolute; left: 0; right: 0; bottom: 0; top: 30px; background: linear-gradient(to bottom, transparent 26%, rgba(3, 4, 7, 0.86) 52%, rgba(3, 4, 7, 0.97)); z-index: 2; animation: lpFreeze 7s ease-out infinite; pointer-events: none; } .deck__stop { position: absolute; left: 14px; right: 14px; top: 150px; z-index: 4; display: flex; flex-direction: column; gap: 9px; animation: lpFreeze 7s ease-out infinite; } .deck__stamp { align-self: flex-start; padding: 5px 11px; border-radius: var(--r-pill); background: rgba(3, 4, 7, 0.9); border: 1px solid var(--lp-accent); font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; color: var(--lp-accent-ink); animation: lpStamp 7s var(--ease-soft) infinite; } .deck__stop strong { font-weight: 300; font-size: 19px; line-height: 1.25; letter-spacing: -0.02em; color: var(--lp-ink-strong); max-width: 26ch; } .deck__stop span { font-size: 12px; line-height: 1.5; color: var(--lp-ink-muted); max-width: 30ch; } .deck__foot { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 4; padding: 11px 13px; border-radius: var(--r-3); border: 1px solid var(--int-border-strong); background: rgba(10, 11, 16, 0.94); display: flex; align-items: center; gap: 11px; font-size: 11px; color: var(--lp-ink-muted); animation: lpFreeze 7s ease-out infinite; } .deck__foot .ticks { height: 14px; } .deck__foot .ticks > span { background: var(--lp-accent); } /* ─── Bandeau sous le hero ─── */ .lp-band { border-top: 1px solid var(--int-border-strong); background: rgba(255, 255, 255, 0.015); } .lp-band__in { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-block: 14px; } .lp-band__k { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; color: var(--lp-ink-faint); white-space: nowrap; } .lp-band__k::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--lp-accent-mid); } .lp-band__t { font-size: 12.5px; line-height: 1.5; color: var(--lp-ink-muted); } /* ─── Grilles de cartes ─── */ .lp-grid { display: grid; gap: 14px; } .lp-grid--4 { grid-template-columns: repeat(4, 1fr); } .lp-grid--3 { grid-template-columns: repeat(3, 1fr); } .lp-grid--2 { grid-template-columns: repeat(2, 1fr); } .lp-card { display: flex; flex-direction: column; gap: 11px; padding: 22px 24px; min-height: 200px; border-radius: var(--r-4); border: 1px solid var(--int-border-strong); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)); transition: border-color var(--dur-3), transform var(--dur-3) var(--ease-soft); } .lp-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--lp-accent-mid) 45%, transparent); } .lp-card__n { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; color: var(--lp-accent-ink); } .lp-card__t { font-weight: 300; font-size: clamp(19px, 2vw, 23px); line-height: 1.15; letter-spacing: -0.022em; color: var(--lp-ink-strong); } .lp-card__b { font-size: 13px; line-height: 1.5; color: var(--lp-ink-muted); } .lp-card__m { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--int-border-strong); font-family: var(--font-mono); font-size: 11px; color: var(--lp-ink-faint); } .lp-card--step { min-height: 132px; padding: 18px 20px; gap: 8px; } .lp-card--step .lp-card__t { font-weight: 400; font-size: 15.5px; letter-spacing: 0; } .lp-card--step .lp-card__b { font-size: 11.5px; } /* Panneaux (provenance, règles). */ .lp-panels { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(16px, 2.4vw, 26px); margin-top: clamp(18px, 3vh, 28px); align-items: stretch; } .lp-panel { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2.6vw, 30px); border-radius: var(--r-4); border: 1px solid var(--int-border-strong); background: rgba(255, 255, 255, 0.022); } .lp-panel--glow { background: linear-gradient(168deg, color-mix(in srgb, var(--lp-accent) 12%, transparent), rgba(6, 5, 10, 0.95) 58%); } .lp-panel__k { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.18em; color: var(--lp-ink-faint); } .lp-panel__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--int-border-strong); font-size: 11.5px; line-height: 1.6; color: var(--lp-ink-faint); } .lp-legend { display: flex; flex-direction: column; } .lp-legend__row { display: grid; grid-template-columns: 20px 96px 1fr; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--int-border); } .lp-legend__row:last-child { border-bottom: 0; } .lp-legend__dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; background: currentColor; } .lp-legend__row--missing .lp-legend__dot { background: transparent; border: 1px dashed currentColor; } .lp-legend__row--conflict .lp-legend__dot { border-radius: var(--r-1); } .lp-legend__row--verified { color: var(--prov-verified); } .lp-legend__row--declared { color: var(--prov-declared); } .lp-legend__row--inferred { color: var(--prov-inferred); } .lp-legend__row--missing { color: var(--prov-missing); } .lp-legend__row--conflict { color: var(--prov-conflict); } .lp-legend__l { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; } .lp-legend__m { font-size: 12.5px; line-height: 1.45; color: var(--lp-ink-muted); } .lp-list { display: flex; flex-direction: column; gap: 11px; } .lp-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--lp-ink-muted); list-style: none; } .lp-list li::before { content: '·'; color: var(--lp-accent-mid); flex: none; font-weight: 700; line-height: 1.5; } .lp-list--check li::before { content: '✓'; font-size: 12px; } /* Section à deux colonnes texte + visuel. */ .lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 54px); align-items: center; } .lp-split__copy { display: flex; flex-direction: column; gap: 14px; max-width: 52ch; } .lp-split__visual { display: flex; justify-content: center; } .lp-mock { position: relative; width: min(400px, 100%); border-radius: var(--r-4); background: var(--int-bg); border: 1px solid var(--int-border-strong); overflow: hidden; box-shadow: 0 70px 150px -60px rgba(123, 45, 142, 0.75); } .lp-mock__head { padding: 18px 20px; border-bottom: 1px solid var(--int-border-strong); display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; color: var(--lp-ink); } .lp-mock__head img { height: 19px; } .lp-mock__tag { margin-left: auto; font-size: 8.5px; font-weight: 500; letter-spacing: 0.14em; color: var(--lp-accent-ink); border: 1px solid currentColor; border-radius: var(--r-pill); padding: 3px 9px; } .lp-mock__body { padding: 22px 20px; display: flex; flex-direction: column; gap: 15px; } .lp-mock__row { display: flex; align-items: flex-start; gap: 14px; } .lp-mock__k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--lp-ink-faint); } .lp-mock__name { font-weight: 300; font-size: 25px; line-height: 1.05; letter-spacing: -0.03em; color: var(--lp-ink-strong); } .lp-mock__meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--lp-ink-faint); } .lp-mock__prio { margin-left: auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; } .lp-mock__prio b { font-family: var(--font-mono); font-weight: 300; font-size: 30px; letter-spacing: -0.04em; color: var(--lp-ink-strong); font-variant-numeric: tabular-nums; } .lp-mock__prio span { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.12em; color: var(--lp-accent-mid); } .lp-mock__block { display: flex; flex-direction: column; gap: 7px; padding-top: 13px; border-top: 1px solid var(--int-border-strong); } .lp-mock__block b { font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: 0.14em; color: var(--prov-inferred); } .lp-mock__block span { font-size: 12.5px; line-height: 1.45; color: var(--lp-ink); } .lp-mock__note { display: flex; flex-direction: column; gap: 6px; padding: 13px 14px; border-radius: var(--r-3); border: 1px solid rgba(168, 94, 192, 0.3); background: rgba(123, 45, 142, 0.1); } .lp-mock__note b { font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: 0.14em; color: var(--lp-accent-ink); } .lp-mock__note span { font-size: 12.5px; line-height: 1.5; color: var(--lp-ink); } .lp-mock__foot { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--int-border-strong); font-family: var(--font-mono); font-size: 9.5px; color: var(--lp-ink-faint); } .lp-mock__foot span:last-child { margin-left: auto; } .lp-mock__caption { text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lp-ink-faint); margin-top: 12px; } /* ─── Démo affirmation → preuve (Founder), sans script ─── */ .lp-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 28px); align-items: start; } .lp-demo__claims { display: flex; flex-direction: column; gap: 8px; } .lp-demo input { position: absolute; opacity: 0; pointer-events: none; } .lp-demo__claim { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: start; padding: 16px 18px; border-radius: var(--r-4); border: 1px solid var(--int-border-strong); background: rgba(255, 255, 255, 0.02); cursor: pointer; transition: border-color var(--dur-2), background var(--dur-2), transform var(--dur-2); } .lp-demo__claim:hover { transform: translateX(5px); } .lp-demo__claim .num { grid-column: 1; grid-row: 1; font-size: 11px; line-height: 1.4; padding-top: 3px; color: var(--lp-ink-faint); } .lp-demo__claim strong { grid-column: 2; grid-row: 1; display: block; font-weight: 400; font-size: 15px; line-height: 1.4; color: var(--lp-ink); } .lp-demo__claim .prov { grid-column: 3; grid-row: 1; margin-top: 3px; white-space: nowrap; } .lp-demo__claim em { grid-column: 2 / -1; grid-row: 2; font-style: normal; font-size: 11px; color: var(--int-border-strong); } .lp-demo input:checked + .lp-demo__claim { border-color: color-mix(in srgb, var(--lp-accent) 50%, transparent); background: color-mix(in srgb, var(--lp-accent) 7%, transparent); } .lp-demo input:checked + .lp-demo__claim em { color: var(--lp-accent); } .lp-demo input:focus-visible + .lp-demo__claim { outline: 2px solid var(--lp-accent-ink); outline-offset: 2px; } .lp-demo__panel { position: sticky; top: 90px; display: none; flex-direction: column; gap: 16px; min-height: 320px; padding: clamp(20px, 2.6vw, 30px); border-radius: var(--r-4); border: 1px solid var(--int-border-strong); background: linear-gradient(168deg, rgba(232, 101, 26, 0.07), rgba(6, 7, 10, 0.95) 58%); box-shadow: 0 50px 110px -60px rgba(232, 101, 26, 0.4); } .lp-demo__panel.is-ok { background: linear-gradient(168deg, rgba(168, 94, 192, 0.09), rgba(6, 7, 10, 0.95) 58%); } .lp-demo__panel[data-for="c1"] { display: flex; } .lp-demo:has(#c1:checked) .lp-demo__panel { display: none; } .lp-demo:has(#c1:checked) .lp-demo__panel[data-for="c1"] { display: flex; } .lp-demo:has(#c2:checked) .lp-demo__panel { display: none; } .lp-demo:has(#c2:checked) .lp-demo__panel[data-for="c2"] { display: flex; } .lp-demo:has(#c3:checked) .lp-demo__panel { display: none; } .lp-demo:has(#c3:checked) .lp-demo__panel[data-for="c3"] { display: flex; } .lp-demo:has(#c4:checked) .lp-demo__panel { display: none; } .lp-demo:has(#c4:checked) .lp-demo__panel[data-for="c4"] { display: flex; } .lp-demo__verdict { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--lp-accent-ink); } .lp-demo__verdict::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--int-border-strong), transparent); } .lp-demo__verdict .num { margin-left: auto; color: var(--lp-ink-faint); } .lp-demo__title { font-weight: 300; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.2; letter-spacing: -0.025em; color: var(--lp-ink-strong); max-width: 34ch; } .lp-demo__box { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px; border-radius: var(--r-3); border: 1px solid var(--int-border-strong); background: rgba(0, 0, 0, 0.28); } .lp-demo__box b { font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: 0.14em; color: var(--lp-ink-faint); } .lp-demo__box span { font-size: 13.5px; line-height: 1.5; color: var(--lp-ink); } .lp-demo__box--proof { border-color: color-mix(in srgb, var(--prov-inferred) 30%, transparent); background: color-mix(in srgb, var(--prov-inferred) 5%, transparent); } .lp-demo__box--proof b { color: var(--prov-inferred); } .is-ok .lp-demo__box--proof { border-color: color-mix(in srgb, var(--prov-verified) 30%, transparent); background: color-mix(in srgb, var(--prov-verified) 6%, transparent); } .is-ok .lp-demo__box--proof b { color: var(--prov-verified); } .lp-demo__todo { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--int-border-strong); display: flex; flex-direction: column; gap: 5px; } .lp-demo__todo b { font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: 0.14em; color: var(--lp-accent-ink); } .lp-demo__todo span { font-size: 13.5px; line-height: 1.5; color: var(--lp-ink-muted); } /* ─── Signaux de lecture (Founder) ─── */ .lp-signal { min-height: 230px; } .lp-signal__h { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; } .lp-signal__h::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; } .lp-signal--strongyes { color: var(--strongyes); border-color: color-mix(in srgb, var(--strongyes) 32%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--strongyes) 9%, transparent), rgba(255, 255, 255, 0.012) 60%); } .lp-signal--yes { color: var(--yes); border-color: color-mix(in srgb, var(--yes) 32%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--yes) 9%, transparent), rgba(255, 255, 255, 0.012) 60%); } .lp-signal--almost { color: var(--almost); border-color: color-mix(in srgb, var(--almost) 30%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--almost) 7%, transparent), rgba(255, 255, 255, 0.012) 60%); } .lp-signal--notyet { color: var(--notyet); border-color: color-mix(in srgb, var(--notyet) 25%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--notyet) 5%, transparent), rgba(255, 255, 255, 0.012) 60%); } .lp-signal .lp-card__t, .lp-signal .lp-card__b { color: var(--lp-ink-strong); } .lp-signal .lp-card__b { color: var(--lp-ink-muted); } .lp-signal .lp-card__m { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-sans); font-size: 12px; color: var(--lp-ink-muted); } .lp-signal .lp-card__m b { font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: 0.14em; color: var(--lp-ink-faint); } /* ─── Offre (Investor) ─── */ .lp-offer { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 16px; align-items: stretch; } .lp-tier { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-4); overflow: hidden; border: 1px solid rgba(168, 94, 192, 0.35); background: linear-gradient(168deg, rgba(123, 45, 142, 0.16), rgba(6, 5, 10, 0.95) 58%); box-shadow: 0 50px 110px -50px rgba(123, 45, 142, 0.6); } .lp-tier::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 142, 221, 0.7), transparent); } .lp-tier__top { display: flex; align-items: center; gap: 10px; } .lp-tier__tag { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.18em; color: var(--lp-accent-ink); } .lp-tier__badge { margin-left: auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--lp-accent-ink); border: 1px solid rgba(201, 142, 221, 0.4); border-radius: var(--r-pill); padding: 3px 9px; } .lp-tier__name { font-weight: 300; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.1; letter-spacing: -0.03em; color: var(--lp-ink-strong); } .lp-tier__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; } .investors-tier__amount { font-family: var(--font-mono); font-weight: 300; font-size: clamp(38px, 4vw, 48px); letter-spacing: -0.04em; line-height: 1; color: var(--lp-ink-strong); font-variant-numeric: tabular-nums; } .investors-tier__period { font-family: var(--font-mono); font-size: 13px; color: var(--lp-ink-faint); } .investors-tier__save { display: block; width: 100%; font-family: var(--font-mono); font-size: 12px; color: var(--lp-ink-faint); } .lp-tier__pitch { font-size: 14px; line-height: 1.5; color: var(--lp-ink-muted); max-width: 48ch; } .lp-tier__feats { display: flex; flex-direction: column; gap: 9px; padding-top: 14px; border-top: 1px solid var(--int-border-strong); } .lp-tier__feats li { list-style: none; display: grid; grid-template-columns: 16px 1fr; gap: 11px; align-items: baseline; font-size: 13.5px; line-height: 1.45; color: var(--lp-ink-muted); } .lp-tier__feats li::before { content: '✓'; color: var(--lp-accent-mid); font-size: 12px; } .lp-tier__early { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--r-3); border: 1px solid rgba(168, 94, 192, 0.35); background: rgba(123, 45, 142, 0.1); } .lp-tier__early-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .lp-tier__early strong { font-size: 14px; font-weight: 500; color: var(--lp-ink-strong); } .lp-tier__early .num { font-size: 17px; color: var(--lp-accent-ink); } .lp-tier__early p { font-size: 12.5px; line-height: 1.5; color: var(--lp-ink-muted); } .lp-tier__early [data-early-adopter-slot] { font-size: 12.5px; font-weight: 500; color: var(--lp-accent-ink); } .lp-tier__cta { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 9px; } .lp-tier__cta .lp-cta { justify-content: center; } .lp-tier__cta small { font-family: var(--font-mono); font-size: 11px; color: var(--lp-ink-faint); text-align: center; } .lp-pilots { display: flex; flex-direction: column; gap: 14px; } .lp-pilot { display: flex; flex-direction: column; gap: 9px; padding: clamp(18px, 2vw, 24px); border-radius: var(--r-4); border: 1px solid var(--int-border-strong); background: rgba(255, 255, 255, 0.022); flex: 1; } .lp-pilot__tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; color: var(--lp-ink-faint); } .lp-pilot__name { font-weight: 300; font-size: 22px; letter-spacing: -0.025em; color: var(--lp-ink-strong); } .lp-pilot__t { font-size: 13px; line-height: 1.5; color: var(--lp-ink-muted); } .lp-pilot__link { margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--lp-accent-ink); text-decoration: underline; text-underline-offset: 3px; } .investors-period-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--int-border-strong); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.02); } .investors-period-toggle__btn { appearance: none; border: 0; background: transparent; color: var(--lp-ink-muted); font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; padding: 8px 18px; min-height: 36px; border-radius: var(--r-pill); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background var(--dur-1), color var(--dur-1); } .investors-period-toggle__btn:hover { color: var(--lp-ink-strong); } .investors-period-toggle__btn.is-active { background: var(--lp-ink-strong); color: var(--int-bg); } .investors-period-toggle__btn:focus-visible { outline: 2px solid var(--lp-accent-ink); outline-offset: 2px; } .investors-period-toggle__badge { font-family: var(--font-mono); font-size: 11px; padding: 2px 6px; border-radius: var(--r-2); background: rgba(232, 101, 26, 0.16); color: var(--lp-accent-ink); } /* ─── FAQ ─── */ .lp-faq { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(22px, 4vw, 52px); align-items: start; } .lp-faq__head { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 96px; } .lp-faq__list { display: flex; flex-direction: column; border-top: 1px solid var(--int-border-strong); } .lp-faq__item { border-bottom: 1px solid var(--int-border-strong); } .lp-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 0; cursor: pointer; list-style: none; font-size: clamp(15px, 1.5vw, 17.5px); color: var(--lp-ink-strong); min-height: 44px; } .lp-faq__q::-webkit-details-marker { display: none; } .lp-faq__q::after { content: '+'; font-weight: 300; font-size: 20px; color: var(--lp-ink-faint); flex: none; transition: transform var(--dur-1), color var(--dur-1); } .lp-faq__item[open] .lp-faq__q::after { content: '−'; color: var(--lp-accent-mid); } .lp-faq__a { padding: 0 0 20px; font-size: 14.5px; line-height: 1.6; color: var(--lp-ink-muted); max-width: 64ch; } /* ─── Appel final ─── */ .lp-final { position: relative; overflow: hidden; border-top: 1px solid var(--int-border-strong); background: radial-gradient(900px 460px at 50% 118%, var(--lp-halo), transparent 62%), var(--int-bg); } .lp-final__in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(16px, 3vh, 26px); padding-block: clamp(46px, 9vh, 104px); } .lp-final__in img { height: 44px; } .lp-final__t { font-weight: 300; font-size: clamp(30px, 4.4vw, 56px); line-height: 1.02; letter-spacing: -0.048em; color: var(--lp-ink-strong); max-width: 26ch; text-wrap: balance; } .lp-final__s { font-weight: 300; font-size: 17px; line-height: 1.5; color: var(--lp-ink-muted); max-width: 52ch; text-wrap: pretty; } .lp-final__meta { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--lp-ink-faint); } /* ─── Pied ─── */ .lp-footer { border-top: 1px solid var(--int-border-strong); background: var(--surface-0); } .lp-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); padding-block: clamp(28px, 5vh, 48px); } .lp-footer__brand { display: flex; flex-direction: column; gap: 12px; max-width: 38ch; } .lp-footer__brand img { height: 26px; width: auto; align-self: flex-start; } .lp-footer__about { font-size: 12.5px; line-height: 1.6; color: var(--lp-ink-faint); } .lp-footer__col { display: flex; flex-direction: column; gap: 9px; } .lp-footer__k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; color: var(--lp-ink-faint); } .lp-footer__col a, .lp-footer__col button { font-family: var(--font-sans); font-size: 13px; color: var(--lp-ink-muted); text-decoration: none; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; } .lp-footer__col a:hover, .lp-footer__col button:hover { color: var(--lp-ink-strong); } .lp-footer__bar { border-top: 1px solid var(--int-border); } .lp-footer__bar-in { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding-block: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--lp-ink-faint); } .lp-footer__bar-in span:last-child { margin-left: auto; } /* ─── Responsive ─── */ @media (max-width: 1100px) { /* Cinq liens, un badge et deux boutons ne tiennent pas sur une ligne a 1024 px. */ .lp .nav-links { gap: 16px; } .lp .nav-badge { display: none; } .lp .nav-link, .lp .nav-cta, .lp .btn-nav-member { white-space: nowrap; } } @media (max-width: 1080px) { .lp-hero__grid, .lp-split, .lp-demo, .lp-panels, .lp-offer, .lp-faq { grid-template-columns: 1fr; } .lp-grid--4 { grid-template-columns: repeat(2, 1fr); } .lp-faq__head { position: static; } .lp-demo__panel { position: static; } .lp-hero__visual { order: 2; } } @media (max-width: 800px) { .lp-grid--3, .lp-grid--2 { grid-template-columns: 1fr; } .lp-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .lp .nav-badge { display: none; } .lp-grid--4 { grid-template-columns: 1fr; } .lp-hero__actions { align-items: stretch; flex-direction: column; } .lp-hero__actions .lp-cta { justify-content: center; } .lp-footer__grid { grid-template-columns: 1fr; } .lp-footer__bar-in span:last-child { margin-left: 0; } .pile { height: 380px; } } /* ─── Mouvement réduit ─── */ @media (prefers-reduced-motion: reduce) { .lp-cta, .lp-card, .lp-demo__claim { transition: none; } .lp-cta:hover, .lp-card:hover, .lp-demo__claim:hover { transform: none; } .pile__rows, .pile__keep, .pile__line i, .pile__keep-tag::before, .deck__pages, .deck__veil, .deck__stop, .deck__stamp, .deck__foot { animation: none; } .pile__keep, .deck__veil, .deck__stop, .deck__stamp, .deck__foot { opacity: 1; transform: none; } .pile__line i { transform: none; } } /* ───────────────────────────────────────────────────────────────────────── Cible tactile des pages de lancement. Mesure au navigateur a 390 px : la navigation fait 36 a 40 px, les liens de section 25 a 29 px, la bascule mensuel/annuel 38 px, et les liens de pied de page 15 a 33 px. Tous sous le gabarit de 44 px, sur des pages dont le trafic est majoritairement mobile. Elargi sur pointeur grossier SEULEMENT : le rendu souris et clavier ne bouge pas d'un pixel. Le lien d'evitement garde sa taille : il n'est atteignable qu'au clavier, ou la notion de cible tactile n'a pas de sens. ───────────────────────────────────────────────────────────────────────── */ @media (pointer: coarse) { .nav-cta, .btn-nav-member, .logo-container, .nav-link, .lp-hero__link, .lp-pilot__link, .investors-period-toggle__btn, .lp-faq__q, .lp-final__meta a, .lp-footer__col a, .lp-footer__col button, .lp-footer a { min-height: 44px; /* `height: auto` parce que la hauteur fixe d'un composant bat un min-height : `.btn-nav-member` porte height 36px et restait a 36px malgre la regle. Mesure au navigateur. */ height: auto; display: inline-flex; align-items: center; } .lp-faq__q { display: flex; } /* Specificite egalee a dessein. `shared.css` pose `.nav-glass:has(.nav-cta) .btn-nav-member { min-height: 36px }`, qui bat un `.btn-nav-member` nu quel que soit l'ordre des feuilles. Le bouton restait a 36px alors que toutes les autres commandes passaient a 44. Trouve en lisant les regles appliquees dans le navigateur, pas la source. */ .nav-glass:has(.nav-cta) .btn-nav-member { min-height: 44px; height: auto; } }