/* VanGuard marketing homepage — implements "VanGuard Home v4" (Claude Design). Plain CSS, no build step. Theme via custom properties on . */ /* ── self-hosted fonts (GDPR: no Google Fonts CDN) ── */ @font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/schibsted-grotesk-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/schibsted-grotesk-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/source-serif-4-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/source-serif-4-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── theme ── */ :root { --bg: #FAF9F5; --bg2: #F0EEE6; --card: #FFFFFF; --ink: #191919; --sec: #63615A; --ter: #918F86; --line: #E4E1D7; --accent: #1B4B8F; --btn: #191919; --btnfg: #FAF9F5; --navbg: rgba(250, 249, 245, .85); --barmute: #CFCCC2; --shadow: rgba(30, 35, 45, .18); --mapf: grayscale(.8) sepia(.12) brightness(1.03) contrast(.92); --phframe: linear-gradient(180deg, #F4F5F7, #E2E4E9); --phedge: #D0D4DB; --phhead: #FFFFFF; --phline: #ECEDEF; --phink: #1A1D22; --phink2: #232E3D; --phsec: #65758B; --phsec2: #8A9099; --phmap: #EAECEF; --phmapf: none; --phcard: rgba(255, 255, 255, .94); --phcard2: rgba(255, 255, 255, .97); --phbar: rgba(20, 30, 50, .3); --serif: "Source Serif 4", Georgia, serif; --sans: "Schibsted Grotesk", "Helvetica Neue", system-ui, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, monospace; } [data-theme="dark"] { --bg: #141413; --bg2: #1E1D1A; --card: #191917; --ink: #F0EEE6; --sec: #A6A39A; --ter: #757168; --line: #33312C; --accent: #6FB0F7; --btn: #F0EEE6; --btnfg: #141413; --navbg: rgba(20, 20, 19, .82); --barmute: #3E3B35; --shadow: rgba(0, 0, 0, .5); --mapf: invert(.92) hue-rotate(190deg) brightness(.82) contrast(1.02) saturate(.35); --phframe: linear-gradient(180deg, #26282D, #17181C); --phedge: #3A3D44; --phhead: #1B1D22; --phline: #2A2D33; --phink: #E8EAF0; --phink2: #E8EAF0; --phsec: #98A2B5; --phsec2: #8A93A5; --phmap: #14161A; --phmapf: invert(.92) hue-rotate(190deg) brightness(.82) contrast(1.02) saturate(.35); --phcard: rgba(28, 30, 36, .94); --phcard2: rgba(28, 30, 36, .97); --phbar: rgba(255, 255, 255, .35); } /* ── base ── */ html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Schibsted Grotesk", "Helvetica Neue", system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; transition: background .4s ease, color .4s ease; } ::selection { background: rgba(63, 160, 255, .28); } button { font-family: inherit; } .accent { color: var(--accent); } .logo-shield { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; } .logo-dot { fill: var(--accent); } /* ── keyframes ── */ @keyframes vgRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes vgViewIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes vgBlink { 0%, 44% { opacity: 1; } 50%, 94% { opacity: .15; } 100% { opacity: 1; } } @keyframes vgPing { 0%, 10% { opacity: 1; transform: scale(1.4); } 45%, 100% { opacity: .2; transform: scale(1); } } @keyframes vgPulse { 0% { opacity: .9; transform: scale(.7); } 70% { opacity: 0; transform: scale(2.9); } 100% { opacity: 0; transform: scale(2.9); } } @keyframes vgMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes vgRingWave { 0% { opacity: .8; transform: scale(.6); } 80% { opacity: 0; transform: scale(2.2); } 100% { opacity: 0; transform: scale(2.2); } } @keyframes vgWiggle { 0%, 88%, 100% { transform: rotate(0); } 90% { transform: rotate(-4deg); } 92% { transform: rotate(4deg); } 94% { transform: rotate(-3deg); } 96% { transform: rotate(3deg); } 98% { transform: rotate(-1deg); } } @keyframes vgFlow { to { stroke-dashoffset: -36; } } @keyframes vgScanX { 0% { left: -16%; opacity: 0; } 10% { opacity: 1; } 62% { left: 96%; opacity: 1; } 76%, 100% { left: 108%; opacity: 0; } } @keyframes vgSeqA { 0%, 4% { opacity: 0; transform: translateY(10px); } 11%, 84% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: translateY(-4px); } } @keyframes vgSeqB { 0%, 21% { opacity: 0; transform: translateY(10px); } 28%, 84% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: translateY(-4px); } } @keyframes vgSeqC { 0%, 42% { opacity: 0; transform: translateY(10px); } 49%, 84% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: translateY(-4px); } } @keyframes vgPhA { 0%, 13% { opacity: 1; transform: none; } 18%, 100% { opacity: 0; transform: translateY(8px); } } @keyframes vgPhAfill { 0%, 3% { width: 0; } 13%, 100% { width: 100%; } } @keyframes vgPhB { 0%, 16% { opacity: 0; transform: translateY(8px); } 21%, 100% { opacity: 1; transform: none; } } @keyframes vgPhCirc { 0%, 17% { opacity: 0; transform: scale(.85); } 23%, 100% { opacity: 1; transform: scale(1); } } @keyframes vgPhAlarm { 0%, 50% { opacity: 0; transform: translateY(-12px); } 53%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } } @keyframes vgPhVig { 0%, 50% { opacity: 0; } 53%, 97% { opacity: 1; } 100% { opacity: 0; } } @keyframes vgPhLive { 0%, 49% { opacity: 1; transform: none; } 52%, 96% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; } } [data-motion="reduced"] * { animation: none !important; transition: none !important; } /* ── views ── */ main[data-view] { display: none; } main[data-view].active { display: block; animation: vgViewIn .5s cubic-bezier(.16, .7, .2, 1) both; } /* ── nav ── */ .site-nav { position: sticky; top: 0; z-index: 60; background: var(--navbg); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--line); } .nav-inner { max-width: 1240px; margin: 0 auto; padding: 8px 32px; min-height: 58px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; row-gap: 2px; } .brand { display: flex; align-items: center; gap: 9px; background: none; border: none; cursor: pointer; padding: 0; flex: none; } .brand svg { display: block; } .brand-name { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); } .nav-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; } .nav-tab { border: none; background: none; cursor: pointer; padding: 5px 10px; font-size: 13.5px; font-weight: 500; color: var(--sec); border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; white-space: nowrap; } .nav-tab.active { font-weight: 700; color: var(--ink); border-bottom-color: var(--accent); } .nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; } .lang-pills { display: flex; gap: 2px; padding: 3px; background: var(--bg2); border-radius: 999px; } .lang-pill { border: none; cursor: pointer; border-radius: 999px; padding: 5px 10px; font-size: 11px; font-weight: 700; letter-spacing: .05em; background: transparent; color: var(--sec); transition: background .2s, color .2s; } .lang-pill.active { background: var(--btn); color: var(--btnfg); } .theme-toggle { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--sec); transition: border-color .2s; } .theme-toggle:hover { border-color: var(--accent); } [data-theme="light"] .icon-moon { display: none; } [data-theme="dark"] .icon-sun { display: none; } .btn-nav { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--btnfg); background: var(--btn); padding: 9px 19px; border-radius: 999px; text-decoration: none; white-space: nowrap; transition: opacity .2s, transform .2s; } .btn-nav:hover { opacity: .88; transform: translateY(-1px); } .btn-nav .arrow { font-size: 14px; } /* ── shared type ── */ .eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ter); } .page-title { margin: 18px 0 0; font-family: var(--sans); font-size: clamp(36px, 4vw, 58px); line-height: 1.07; letter-spacing: -0.023em; font-weight: 600; color: var(--ink); text-wrap: balance; } .lead { margin: 22px 0 0; font-family: var(--serif); font-size: 17.5px; line-height: 1.68; color: var(--sec); text-wrap: pretty; } .note { margin: 14px 0 0; font-size: 12.5px; color: var(--ter); } /* ── buttons / links ── */ .btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--btn); color: var(--btnfg); font-size: 15px; font-weight: 600; padding: 14px 28px; border-radius: 999px; text-decoration: none; transition: opacity .2s, transform .2s; } .btn-primary:hover { opacity: .88; transform: translateY(-1px); } .link-arrow { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 0 0 2px; font-size: 15px; font-weight: 600; color: var(--ink); border-bottom: 1.5px solid var(--ink); transition: color .2s, border-color .2s, gap .2s; } .link-arrow:hover { color: var(--accent); border-color: var(--accent); gap: 13px; } .link-more { background: none; border: none; cursor: pointer; padding: 0 0 2px; font-size: 14.5px; font-weight: 600; color: var(--accent); border-bottom: 1.5px solid var(--accent); white-space: nowrap; } .btn-ghost { display: inline-flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 10px 19px; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .2s, transform .2s; } .btn-ghost:hover { border-color: var(--accent); transform: translateY(-1px); } /* ── hero ── */ .hero { max-width: 1240px; margin: 0 auto; padding: 76px 32px 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 64px; align-items: center; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sec); border: 1px solid var(--line); padding: 7px 13px; border-radius: 999px; white-space: nowrap; animation: vgRise .6s cubic-bezier(.16, .7, .2, 1) both; } .dot-live { width: 6px; height: 6px; border-radius: 999px; background: #49B8A5; animation: vgBlink 2s infinite; } .hero-title { margin: 26px 0 0; font-family: var(--sans); font-size: clamp(44px, 4.9vw, 74px); line-height: 1.05; letter-spacing: -0.024em; font-weight: 600; color: var(--ink); text-wrap: balance; } .hero-title .t1 { display: block; animation: vgRise .7s cubic-bezier(.16, .7, .2, 1) .08s both; } .hero-title .t2 { display: block; color: var(--accent); animation: vgRise .7s cubic-bezier(.16, .7, .2, 1) .18s both; } .hero-sub { margin: 24px 0 0; max-width: 520px; font-family: var(--serif); font-size: 18px; line-height: 1.65; color: var(--sec); text-wrap: pretty; animation: vgRise .7s cubic-bezier(.16, .7, .2, 1) .28s both; } .hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 34px; animation: vgRise .7s cubic-bezier(.16, .7, .2, 1) .38s both; } .hero-chips { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 36px; animation: vgRise .7s cubic-bezier(.16, .7, .2, 1) .48s both; } .chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sec); } .chip-dot { width: 4px; height: 4px; border-radius: 999px; background: var(--accent); flex: none; } /* ── hero map demo ── */ .hero-demo { animation: vgRise .8s cubic-bezier(.16, .7, .2, 1) .25s both; } .map-card { --ph: #64748B; position: relative; border-radius: 24px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 24px 60px -28px var(--shadow); overflow: hidden; } .map-card[data-phase="1"], .map-card[data-phase="2"] { --ph: #2FA893; } .map-card[data-phase="3"], .map-card[data-phase="4"] { --ph: #E05B4F; } .map-head { position: relative; z-index: 6; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--card); } .map-status-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--ph); flex: none; animation: vgBlink 2s infinite; transition: background .4s; } .map-card[data-phase="3"] .map-status-dot { animation: vgBlink .7s infinite; } .map-status-text { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--ph); transition: color .4s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .map-time { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--ter); } .map-body { position: relative; overflow: hidden; } /* fenêtre recadrée : l'action (zone + poursuite) est centrée dans la carte — fenêtre [0,99]→740×555 de la grille 1024×768, zoom 1.3838 */ .map-tiles { display: grid; grid-template-columns: repeat(4, 1fr); filter: var(--mapf); transition: filter .4s; transform-origin: 0 0; transform: scale(1.3838) translate(0%, -12.89%); } .map-tiles img, .ph-tiles img { display: block; width: 100%; aspect-ratio: 1; } .map-overlay { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 0 0; transform: scale(1.3838) translate(0%, -12.89%); } .map-zone { opacity: 0; transition: opacity .8s ease; } .map-zone-pulse { animation: vgPulse 3s ease-out infinite; transform-origin: 250px 230px; transform-box: view-box; } .map-route-wrap { opacity: 0; transition: opacity .6s ease; } .map-card:not([data-phase="0"]) .map-zone { opacity: 1; } .map-card[data-phase="3"] .map-route-wrap, .map-card[data-phase="4"] .map-route-wrap { opacity: 1; } .van-glow { fill: rgba(47, 168, 147, .16); transition: fill .5s; } .map-card[data-phase="3"] .van-glow, .map-card[data-phase="4"] .van-glow { fill: rgba(224, 91, 79, .22); } .van-ring { fill: none; stroke: var(--ph); stroke-width: 2; transition: stroke .5s; } .van-core { fill: #FFFFFF; stroke: var(--ph); stroke-width: 4; transition: stroke .5s; } .map-zone-label { position: absolute; left: 23.6%; top: 39.5%; transform: translateX(-50%); font-family: var(--mono); font-size: 10.5px; color: #1E6B5C; background: rgba(255, 255, 255, .82); border: 1px solid rgba(73, 184, 165, .5); border-radius: 999px; padding: 3px 10px; white-space: nowrap; opacity: 0; transition: opacity .8s ease; } .map-card:not([data-phase="0"]) .map-zone-label { opacity: 1; } .map-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 110px rgba(224, 91, 79, .45); opacity: 0; transition: opacity .6s ease; } .map-card[data-phase="3"] .map-vignette, .map-card[data-phase="4"] .map-vignette { opacity: 1; } .map-call-toast { position: absolute; top: 14px; right: 14px; z-index: 5; pointer-events: none; display: flex; gap: 11px; align-items: center; background: rgba(40, 14, 15, .93); border: 1px solid rgba(230, 103, 92, .5); border-radius: 13px; padding: 10px 13px; box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(-12px); transition: opacity .45s ease, transform .45s ease; } .map-card[data-phase="3"] .map-call-toast { opacity: 1; transform: none; } .toast-icon { width: 32px; height: 32px; border-radius: 999px; background: rgba(255, 107, 94, .16); display: flex; align-items: center; justify-content: center; flex: none; animation: vgWiggle 2.2s ease infinite; } .toast-text { min-width: 0; } .toast-title { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; color: #FFB4AC; } .toast-sub { display: block; margin-top: 2px; font-size: 11px; color: #E8C9C5; } .map-burst { position: absolute; top: 14px; left: 14px; z-index: 5; pointer-events: none; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: #FFB4AC; background: rgba(40, 14, 15, .93); border: 1px solid rgba(230, 103, 92, .5); border-radius: 999px; padding: 7px 12px; opacity: 0; transform: translateY(-10px); transition: opacity .45s ease, transform .45s ease; } .map-card[data-phase="4"] .map-burst { opacity: 1; transform: none; } .burst-dot { width: 6px; height: 6px; border-radius: 999px; background: #FF6B5E; animation: vgBlink .9s infinite; } .map-attrib { position: absolute; right: 8px; bottom: 6px; font-size: 9.5px; color: rgba(60, 66, 76, .55); background: rgba(255, 255, 255, .55); border-radius: 4px; padding: 1px 5px; } .map-foot { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--card); } .map-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: #2FA893; font-weight: 600; } .live-dot { width: 6px; height: 6px; border-radius: 999px; background: #2FA893; animation: vgBlink 1.6s infinite; } .map-mono { font-family: var(--mono); font-size: 11.5px; color: var(--ter); } .map-ago { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ter); white-space: nowrap; } .demo-cta { display: flex; justify-content: flex-end; margin-top: 16px; } /* ── event log ticker ── */ .ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg2); overflow: hidden; padding: 10px 0; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .ticker-track { display: flex; gap: 64px; width: max-content; animation: vgMarquee 34s linear infinite; font-family: var(--mono); font-size: 11.5px; color: var(--ter); white-space: nowrap; } .tick-alarm { color: #C25048; } .tick-ok { color: #2FA893; } /* ── stats band ── */ .stats { max-width: 1240px; margin: 0 auto; padding: 72px 32px 8px; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 0; } .stat { padding: 8px 28px 28px; border-left: 1px solid var(--line); } .stat-num { font-family: var(--sans); font-size: clamp(38px, 3.6vw, 54px); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; } .stat-label { margin-top: 8px; font-family: var(--serif); font-size: 14px; line-height: 1.5; color: var(--sec); text-wrap: pretty; } /* ── pillars ── */ .pillars { max-width: 1240px; margin: 0 auto; padding: 64px 32px 84px; } .section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); padding-bottom: 26px; } .section-title { margin: 0; font-family: var(--sans); font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); max-width: 640px; text-wrap: balance; } .pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; margin-top: 44px; } .pillar { background: var(--bg2); border-radius: 24px; padding: 28px 26px; } .pillar-num { font-size: 12px; font-weight: 600; color: var(--ter); letter-spacing: .1em; } .pillar-title { margin: 14px 0 0; font-family: var(--sans); font-size: 22px; font-weight: 600; letter-spacing: -0.016em; color: var(--ink); } .pillar-text { margin: 12px 0 0; font-family: var(--serif); font-size: 15.5px; line-height: 1.66; color: var(--sec); text-wrap: pretty; } /* ── CTA band ── */ .cta-band { border-top: 1px solid var(--line); background: var(--bg2); } .cta-inner { max-width: 1240px; margin: 0 auto; padding: 76px 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; } .cta-copy { max-width: 560px; } .cta-title { margin: 0; font-family: var(--sans); font-size: clamp(28px, 3.2vw, 42px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; } .cta-sub { margin: 14px 0 0; font-family: var(--serif); font-size: 16px; line-height: 1.65; color: var(--sec); } .cta-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } /* ── how it works ── */ .how-wrap { max-width: 1240px; margin: 0 auto; padding: 76px 32px 0; } .page-head { max-width: 780px; } .step-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 52px; align-items: center; margin-top: 72px; } .step-row:first-of-type { margin-top: 76px; } .step-num { font-size: 12.5px; font-weight: 600; color: var(--accent); letter-spacing: .12em; } .step-title { margin: 12px 0 0; font-family: var(--sans); font-size: clamp(24px, 2.3vw, 31px); font-weight: 600; letter-spacing: -0.018em; color: var(--ink); } .step-text { margin: 14px 0 0; max-width: 460px; font-family: var(--serif); font-size: 16px; line-height: 1.68; color: var(--sec); text-wrap: pretty; } .diagram-card { position: relative; border-radius: 24px; border: 1px solid var(--line); background: var(--card); overflow: hidden; min-height: 250px; display: flex; flex-direction: column; } .diagram-head { display: flex; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--ter); } .obd-pill { margin-left: auto; text-decoration: line-through; text-decoration-color: #C25048; text-decoration-thickness: 1.5px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; } .head-right { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--accent); } .mini-dot { width: 5px; height: 5px; border-radius: 999px; } .mini-dot.red { background: #C25048; animation: vgBlink 1.1s infinite; } .mini-dot.accent { background: var(--accent); animation: vgBlink .9s infinite; } .diagram-body { position: relative; flex: 1; } /* install schematic */ .diagram-install { display: flex; align-items: center; justify-content: center; padding: 26px 22px 6px; overflow: hidden; } .diagram-install svg { display: block; width: 100%; max-width: 400px; height: auto; margin-bottom: 10px; } .diagram-install .ln { stroke: var(--line); stroke-width: 1.5; } .diagram-install .ln.thin { stroke-width: 1.4; } .diagram-install .van-body { fill: none; stroke: var(--sec); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .diagram-install .van-win { fill: none; stroke: var(--ter); stroke-width: 1.4; stroke-linejoin: round; } .diagram-install .wheel { fill: var(--card); stroke: var(--sec); stroke-width: 2; } .diagram-install .hub { fill: none; stroke: var(--ter); stroke-width: 1.4; } .diagram-install .wire { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 3 6; animation: vgFlow 1.6s linear infinite; } .diagram-install .wire.thin { stroke-width: 1.5; } .diagram-install .unit { fill: var(--accent); } .diagram-install .unit-pulse { fill: none; stroke: var(--accent); stroke-width: 1.2; animation: vgPulse 2.4s ease-out infinite; transform-origin: 243px 103px; transform-box: view-box; } .diagram-install .sat-wing { fill: none; stroke: var(--sec); stroke-width: 1.4; } .diagram-install .sat-line { stroke: var(--sec); stroke-width: .8; opacity: .55; } .diagram-install .sat-arm { stroke: var(--sec); stroke-width: 1.4; } .diagram-install .sat-body { fill: var(--card); stroke: var(--sec); stroke-width: 1.6; } .diagram-install .sat-label { fill: var(--ter); font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; } .scan-x { position: absolute; top: 8%; bottom: 14%; left: -16%; width: 48px; background: linear-gradient(90deg, transparent, rgba(107, 160, 235, .22), transparent); animation: vgScanX 4.4s ease-in-out infinite; } /* alert sequence */ .diagram-seq { display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 20px 18px; } .seq-row { display: flex; align-items: center; gap: 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; } .seq-row.seq-a { animation: vgSeqA 8s ease-in-out infinite; } .seq-row.seq-b { animation: vgSeqB 8s ease-in-out infinite; } .seq-row.seq-c { animation: vgSeqC 8s ease-in-out infinite; border: 1.5px solid var(--accent); } .seq-icon { width: 30px; height: 30px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex: none; } .seq-dot { width: 8px; height: 8px; border-radius: 999px; background: #C25048; } .tg-plane { fill: var(--accent); } .seq-label { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--ink); } .seq-label.strong { font-weight: 700; } .seq-time { font-family: var(--mono); font-size: 11px; color: var(--ter); } .seq-time.accent { color: var(--accent); } .seq-icon-wave { position: relative; width: 30px; height: 30px; flex: none; } .wave-ring { position: absolute; inset: 0; border-radius: 999px; border: 1px solid var(--accent); animation: vgRingWave 1.9s ease-out infinite; } .seq-icon-wave .seq-icon { position: absolute; inset: 0; animation: vgWiggle 2.6s ease infinite; } .ph-icon { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; } /* pursuit curve */ .diagram-curve { display: flex; align-items: center; justify-content: center; padding: 18px 18px 4px; } .diagram-curve svg { display: block; width: 100%; max-width: 400px; height: auto; } .curve-base { fill: none; stroke: var(--line); stroke-width: 5; stroke-linecap: round; } /* trait animé en SMIL dans le SVG — même horloge que animateMotion du point */ .curve-draw { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; } .curve-pt { fill: var(--accent); stroke: var(--card); stroke-width: 1.5; opacity: 0; } .curve-ring { fill: none; stroke: var(--accent); stroke-width: 1.2; } .curve-head { fill: var(--card); stroke: var(--accent); stroke-width: 2.5; } .curve-t0 { fill: var(--ter); font-family: var(--mono); font-size: 10px; } .curve-t1 { fill: var(--accent); font-family: var(--mono); font-size: 10px; } /* ── precision / comparison ── */ .prec { max-width: 1240px; margin: 88px auto 0; padding: 0 32px 96px; } .prec-head { display: flex; flex-wrap: wrap; gap: 40px; align-items: end; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 64px; } .prec-copy { max-width: 620px; } .prec-title { margin: 16px 0 0; font-family: var(--sans); font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; color: var(--ink); text-wrap: balance; } .prec-big { text-align: right; } .prec-num { font-family: var(--sans); font-size: clamp(48px, 4.6vw, 68px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; } .prec-num-label { margin: 6px 0 0 auto; font-family: var(--serif); font-size: 13.5px; color: var(--sec); max-width: 210px; } .comp-list { display: flex; flex-direction: column; gap: 12px; margin-top: 48px; } .comp-row { display: grid; grid-template-columns: 215px 1fr 110px; gap: 20px; align-items: center; padding: 16px 20px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); } .comp-row.is-hero { border: 1.5px solid var(--accent); } .comp-id { min-width: 0; } .comp-name { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; } .comp-row.is-hero .comp-name { font-weight: 700; } .comp-note { margin-top: 3px; font-size: 12px; color: var(--ter); } .comp-bar { position: relative; height: 8px; border-radius: 999px; background: var(--bg2); overflow: hidden; } .comp-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--barmute); transition: width 1.3s cubic-bezier(.2, .7, .2, 1) .15s; } .comp-row.is-hero .comp-fill { background: linear-gradient(90deg, #49B8A5, #2D6FD2); } .comp-freq-wrap { display: flex; align-items: center; gap: 10px; justify-content: flex-end; } .comp-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ter); flex: none; animation: vgPing 6s infinite; } .comp-row.is-hero .comp-dot { background: #2D6FD2; animation-duration: 1.1s; } .comp-row:nth-child(3) .comp-dot { animation-duration: 15s; } .comp-row:nth-child(4) .comp-dot { animation-duration: 20s; } .comp-freq { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--sec); white-space: nowrap; } .comp-row.is-hero .comp-freq { color: var(--accent); } .prec-foot { margin: 22px 0 0; font-family: var(--serif); font-size: 13px; line-height: 1.6; color: var(--ter); max-width: 640px; } @media (max-width: 640px) { .comp-row { grid-template-columns: 110px 1fr 84px; gap: 12px; padding: 14px 16px; } } @media (max-width: 400px) { /* At 320-400px the three-column row starves the bar (~50px of track) and long ro/fr notes cramp the 110px name column — stack instead: name+note across the top, bar + frequency on their own line below. */ .comp-row { grid-template-columns: 1fr 84px; row-gap: 10px; } .comp-id { grid-column: 1 / -1; } } /* ── app view ── */ .app-wrap { max-width: 1240px; margin: 0 auto; padding: 76px 32px 96px; } .app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 64px; align-items: center; } .app-wrap .page-title { font-size: clamp(36px, 4vw, 56px); } .app-lead { margin-top: 18px; font-size: 16px; line-height: 1.68; max-width: 480px; } .feat-list { display: flex; flex-direction: column; margin-top: 34px; border-top: 1px solid var(--line); } .feat { display: flex; gap: 18px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); } .feat-num { font-size: 12px; font-weight: 600; color: var(--ter); flex: none; } .feat > div { min-width: 0; } .feat-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } .feat-text { margin-top: 4px; font-family: var(--serif); font-size: 15px; line-height: 1.62; color: var(--sec); text-wrap: pretty; } /* phone mockup */ .phone-col { display: flex; justify-content: center; } .phone { width: 346px; padding: 11px; border-radius: 52px; background: var(--phframe); border: 1px solid var(--phedge); box-shadow: 0 40px 90px -34px var(--shadow); } .phone-screen { position: relative; border-radius: 42px; overflow: hidden; aspect-ratio: 9 / 18.6; background: #EAECEF; display: flex; flex-direction: column; } .ph-status { display: flex; align-items: center; justify-content: space-between; padding: 10px 22px 5px; background: var(--phhead); font-size: 11px; font-weight: 700; color: var(--phink); flex: none; font-variant-numeric: tabular-nums; } .ph-status-icons { display: inline-flex; gap: 5px; align-items: center; } .ph-fill { fill: var(--phink); } .ph-batt-case { fill: none; stroke: var(--phink); stroke-opacity: .4; } .ph-batt-tip { stroke: var(--phink); stroke-opacity: .4; stroke-width: 1.6; stroke-linecap: round; } .ph-tghead { display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px; background: var(--phhead); border-bottom: 1px solid var(--phline); flex: none; } .ph-tghead svg { flex: none; } .ph-tgname { min-width: 0; flex: 1; text-align: center; } .ph-tgtitle { display: block; font-size: 13px; font-weight: 700; color: var(--phink); line-height: 1.15; } .ph-tgsub { display: block; font-size: 9.5px; color: var(--phsec2); } .ph-dots { fill: var(--phsec2); } .ph-map { position: relative; flex: 1; overflow: hidden; background: var(--phmap); } .ph-tiles { position: absolute; top: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(2, 1fr); filter: var(--phmapf); transition: filter .4s; } .ph-overlay { position: absolute; top: 0; left: 0; width: 100%; height: auto; pointer-events: none; } .ph-zone { animation: vgPhCirc 16s linear infinite; transform-box: view-box; transform-origin: 264px 209px; } .ph-live-card { position: absolute; top: 10px; left: 10px; right: 10px; animation: vgPhLive 16s linear infinite; } .ph-card-inner { display: flex; align-items: center; gap: 8px; background: var(--phcard); border-radius: 12px; padding: 7px 10px; box-shadow: 0 4px 14px -4px rgba(20, 30, 50, .15), 0 0 0 1px rgba(20, 30, 50, .06); } .ph-live-icon { width: 24px; height: 24px; border-radius: 7px; background: rgba(13, 116, 148, .12); display: flex; align-items: center; justify-content: center; flex: none; } .ph-live-dot { width: 7px; height: 7px; border-radius: 999px; background: #0D7494; animation: vgBlink 1.8s infinite; } .ph-card-text { min-width: 0; flex: 1; } .ph-card-title { display: block; font-size: 10.5px; font-weight: 700; color: var(--phink2); } .ph-card-sub { display: block; font-size: 8.5px; color: var(--phsec); font-variant-numeric: tabular-nums; } .ph-refresh { fill: none; stroke: var(--phsec); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ph-alarm-card { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 7; animation: vgPhAlarm 16s linear infinite; } .ph-alarm-inner { display: flex; align-items: center; gap: 8px; background: #FFCC00; border-radius: 12px; padding: 7px 10px; box-shadow: 0 14px 36px -10px rgba(255, 204, 0, .55); } .ph-alarm-icon { width: 24px; height: 24px; border-radius: 7px; background: rgba(77, 59, 0, .18); display: flex; align-items: center; justify-content: center; flex: none; } .ph-alarm-title { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .03em; color: #4D3B00; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ph-alarm-sub { display: block; font-size: 8.5px; color: rgba(77, 59, 0, .78); } .ph-alarm-dot { width: 7px; height: 7px; border-radius: 999px; background: #4D3B00; animation: vgBlink .8s infinite; flex: none; } .ph-chip { position: absolute; top: 64px; left: 10px; max-width: 78%; } .ph-chip-inner { display: inline-flex; align-items: center; gap: 8px; background: var(--phcard); border-radius: 12px; padding: 6px 9px 6px 6px; box-shadow: 0 4px 14px -4px rgba(20, 30, 50, .12), 0 0 0 1px rgba(20, 30, 50, .06); } .ph-chip-inner svg { flex: none; } .ph-chip-badge { width: 26px; height: 26px; border-radius: 7px; background: #1B4B8F; color: #DCE8F7; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; letter-spacing: .04em; flex: none; } .ph-chip-title { display: block; font-size: 11px; font-weight: 600; color: var(--phink2); white-space: nowrap; } .ph-chip-sub { display: block; font-size: 8.5px; color: var(--phsec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ph-vignette { position: absolute; inset: 0; box-shadow: inset 0 0 70px rgba(163, 48, 41, .32); animation: vgPhVig 16s linear infinite; pointer-events: none; } .ph-gps { position: absolute; left: 12px; bottom: 14px; width: 34px; height: 34px; border-radius: 999px; background: var(--phcard); box-shadow: 0 4px 14px -4px rgba(20, 30, 50, .18), 0 0 0 1px rgba(20, 30, 50, .06); display: flex; align-items: center; justify-content: center; } .ph-gps-icon { fill: none; stroke: var(--phink2); stroke-width: 1.8; } .ph-gps-rays { stroke: var(--phink2); stroke-width: 1.8; stroke-linecap: round; } .ph-hold { position: absolute; left: 56px; right: 10px; bottom: 12px; animation: vgPhA 16s linear infinite; } .ph-hold-btn { position: relative; overflow: hidden; text-align: center; background: #1B4B8F; border-radius: 999px; padding: 9px 10px; box-shadow: 0 12px 26px -8px rgba(16, 44, 85, .5); } .ph-hold-fill { position: absolute; inset: 0 auto 0 0; background: rgba(255, 255, 255, .2); animation: vgPhAfill 16s linear infinite; } .ph-hold-label { position: relative; display: block; font-size: 11px; font-weight: 700; color: #FFFFFF; } .ph-hold-sub { position: relative; display: block; margin-top: 1px; font-size: 7.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .72); } .ph-locked { position: absolute; left: 56px; right: 10px; bottom: 12px; animation: vgPhB 16s linear infinite; } .ph-locked-pill { display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--phcard2); border-radius: 999px; padding: 11px 10px; box-shadow: 0 12px 26px -8px rgba(20, 30, 50, .3), 0 0 0 1px rgba(20, 30, 50, .08); } .ph-locked-label { font-size: 11px; font-weight: 700; color: var(--phink2); } .ph-locked-dot { width: 6px; height: 6px; border-radius: 999px; background: #2FA893; } .ph-homebar { position: absolute; left: 50%; bottom: 3px; width: 84px; height: 4px; margin-left: -42px; border-radius: 999px; background: var(--phbar); } .ph-attrib { position: absolute; right: 8px; bottom: 3px; font-size: 8px; color: rgba(60, 66, 76, .55); background: rgba(255, 255, 255, .55); border-radius: 3px; padding: 0 4px; } /* video */ .video-sec { margin-top: 96px; border-top: 1px solid var(--line); padding-top: 72px; text-align: center; } .video-title { margin: 14px auto 0; font-family: var(--sans); font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; color: var(--ink); max-width: 640px; text-wrap: balance; } .video-sub { margin: 12px auto 0; max-width: 520px; font-family: var(--serif); font-size: 15.5px; line-height: 1.65; color: var(--sec); text-wrap: pretty; } .video-frame { max-width: 920px; margin: 36px auto 0; padding: 10px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 24px 60px -32px var(--shadow); } .video-box { border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; } .video-box video { display: block; width: 100%; height: 100%; object-fit: cover; } /* ── FAQ ── */ .faq-wrap { max-width: 860px; margin: 0 auto; padding: 76px 32px 96px; } .faq-wrap .page-title { font-size: clamp(36px, 4vw, 54px); } .faq-list { display: flex; flex-direction: column; margin-top: 44px; border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-q { width: 100%; background: none; border: none; cursor: pointer; text-align: left; display: flex; align-items: baseline; gap: 20px; padding: 24px 4px; color: inherit; } .faq-num { font-size: 12px; font-weight: 600; color: var(--ter); flex: none; } .faq-question { flex: 1; font-family: var(--sans); font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); } .faq-chev { flex: none; color: var(--ter); transition: transform .35s, color .35s; } .faq-item.open .faq-chev { color: var(--accent); transform: rotate(45deg); } .faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1); } .faq-item.open .faq-panel { grid-template-rows: 1fr; } .faq-panel-inner { min-height: 0; overflow: hidden; } .faq-panel p { margin: 0; padding: 0 4px 26px 44px; font-family: var(--serif); font-size: 16px; line-height: 1.7; color: var(--sec); max-width: 640px; text-wrap: pretty; } /* ── contact ── */ .contact-wrap { max-width: 1240px; margin: 0 auto; padding: 76px 32px 96px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 64px; align-items: start; } .contact-wrap .page-title { font-size: clamp(36px, 4vw, 56px); } .contact-lead { margin-top: 20px; font-size: 16px; line-height: 1.68; max-width: 460px; } .ct-list { display: flex; flex-direction: column; gap: 10px; margin-top: 32px; } .ct-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--sec); } .ct-cards { display: flex; flex-direction: column; gap: 14px; } .ct-card { display: flex; align-items: center; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px; text-decoration: none; transition: border-color .2s, transform .2s, opacity .2s; } .ct-card:hover { border-color: var(--accent); transform: translateY(-2px); } .ct-card-tg { background: linear-gradient(135deg, #2AABEE, #1E96D1); border: none; box-shadow: 0 18px 44px -18px rgba(42, 171, 238, .55); } .ct-card-tg:hover { opacity: .9; transform: translateY(-2px); border: none; } .ct-icon { width: 42px; height: 42px; border-radius: 999px; background: var(--bg2); display: flex; align-items: center; justify-content: center; flex: none; } .ct-icon-tg { background: rgba(255, 255, 255, .24); } .ct-card-text { min-width: 0; flex: 1; } .ct-card-title { display: block; font-size: 16px; font-weight: 700; color: #FFFFFF; letter-spacing: -0.01em; } .ct-card-title.dark { font-size: 15.5px; color: var(--ink); } .ct-card-title.num { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } .ct-card-title.email { font-size: 15px; font-weight: 600; word-break: break-all; } .ct-card-sub { display: block; margin-top: 3px; font-size: 13px; color: #FFFFFF; opacity: .78; } .ct-card-sub.muted { color: var(--sec); opacity: 1; } .ct-arrow { font-size: 18px; color: #FFFFFF; } .ct-arrow.muted { color: var(--ter); } /* ── footer ── */ .site-foot { border-top: 1px solid var(--line); background: var(--bg); } .foot-inner { max-width: 1240px; margin: 0 auto; padding: 36px 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; } .foot-brand { display: flex; align-items: center; gap: 9px; } .foot-name { font-size: 14px; font-weight: 700; color: var(--ink); } .foot-tag { font-size: 12.5px; color: var(--ter); margin-left: 6px; } .foot-right { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font-size: 12.5px; color: var(--ter); } /* ── mobile nav: burger (3 traits, signature Anthropic : trait bas raccourci) + menu plein écran ── */ .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 6px; width: 42px; height: 42px; padding: 0 6px; flex: none; background: none; border: none; cursor: pointer; } .burger-line { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s cubic-bezier(.2, .7, .2, 1), opacity .2s, width .3s; } .burger-line:nth-child(3) { width: 62%; } .site-nav.menu-open .burger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); } .site-nav.menu-open .burger-line:nth-child(2) { opacity: 0; } .site-nav.menu-open .burger-line:nth-child(3) { width: 100%; transform: translateY(-8px) rotate(-45deg); } .nav-menu { display: none; } /* ── mobile pass (≤760px): nav monoligne, menu plein écran, corps serif plus grand (échelle type anthropic.com) ── */ @media (max-width: 760px) { .nav-inner { padding: 8px 20px; min-height: 56px; gap: 12px; flex-wrap: nowrap; } .nav-tabs { display: none; } .nav-right { gap: 8px; margin-left: auto; } .nav-right .lang-pills, .nav-right .btn-nav { display: none; } .nav-burger { display: flex; margin-right: -6px; } /* menu = prise de contrôle plein écran (hauteur animée 0 → 100dvh-nav) */ .nav-menu { display: flex; flex-direction: column; height: 0; overflow: hidden; transition: height .45s cubic-bezier(.2, .7, .2, 1); } .site-nav.menu-open .nav-menu { height: calc(100vh - 57px); height: calc(100dvh - 57px); overflow-y: auto; border-top: 1px solid var(--line); } .nav-menu-links { display: flex; flex-direction: column; padding: 10px 20px 0; } .nav-menu-link { text-align: left; background: none; border: none; border-bottom: 1px solid var(--line); cursor: pointer; padding: 19px 2px; font-family: var(--sans); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); } .nav-menu-link:last-child { border-bottom: none; } .nav-menu-link.active { color: var(--accent); } .nav-menu-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px 30px; } .nav-menu-foot .lang-pill { padding: 8px 13px; font-size: 11.5px; } .nav-menu-cta { padding: 13px 24px; font-size: 14.5px; } /* hero */ .hero { padding: 48px 24px 64px; gap: 44px; } .hero-title { margin-top: 22px; } .hero-sub { font-size: 19px; line-height: 1.6; } .hero-ctas { gap: 18px; margin-top: 30px; } .hero-chips { gap: 12px 18px; margin-top: 30px; } .demo-cta { justify-content: center; margin-top: 14px; } .map-foot { gap: 10px; padding: 11px 14px; } .map-mono { font-size: 10.5px; } .map-live { font-size: 10px; } .map-ago { display: none; } /* échelle de corps serif ≈ anthropic mobile (19px lead, 17px texte) */ .lead { font-size: 19px; line-height: 1.62; } .section-title { font-size: 31px; } .cta-title { font-size: 31px; } .video-title { font-size: 30px; } .pillar-title { font-size: 24px; } .pillar-text { font-size: 17px; line-height: 1.62; } .step-text { font-size: 17px; line-height: 1.64; } .cta-sub { font-size: 17px; } .video-sub { font-size: 16px; } .stat-label { font-size: 15px; } .feat-text { font-size: 16px; } .faq-question { font-size: 20px; } .faq-panel p { font-size: 17px; line-height: 1.66; } /* rythme vertical plus aéré */ .stats { padding: 64px 24px 8px; } .stat { padding: 6px 0 26px 20px; } .pillars { padding: 64px 24px 72px; } .pillar-grid { margin-top: 36px; gap: 16px; } .pillar { padding: 30px 26px; } .cta-inner { padding: 72px 24px; } .how-wrap { padding: 64px 24px 0; } .step-row { gap: 36px; margin-top: 64px; } .step-row:first-of-type { margin-top: 60px; } /* en colonne : toujours le texte de l'étape avant son schéma (l'étape 02 alterne l'ordre DOM pour le zigzag desktop) */ .step-row > .diagram-card { order: 1; } .prec { margin-top: 72px; padding: 0 24px 80px; } .prec-head { padding-top: 52px; gap: 28px; } .prec-big { text-align: left; } .prec-num-label { margin-left: 0; } .app-wrap { padding: 64px 24px 80px; } .app-grid { gap: 48px; } .phone { width: min(346px, 100%); } .video-sec { margin-top: 72px; padding-top: 64px; } .faq-wrap { padding: 64px 24px 80px; } .faq-q { padding: 22px 2px; gap: 14px; } .faq-panel p { padding-left: 34px; } .contact-wrap { padding: 64px 24px 80px; gap: 44px; } .foot-inner { flex-direction: column; align-items: flex-start; gap: 14px; padding: 36px 24px; } .foot-right { margin-left: 0; flex-direction: column; align-items: flex-start; gap: 8px; } }