/* Polices servies par le site : aucun appel à Google, donc aucune IP transmise (RGPD). Sous-ensemble latin. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(fonts/inter.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: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/jetbrains-mono.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: 'Manrope'; font-style: normal; font-weight: 500 600; font-display: swap; src: url(fonts/manrope.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; } /* Jetons sombres sur :root ; assets/theme.js pose data-theme sur avant le premier rendu, clair par défaut. */ :root { --bg: #06152D; --bg2: #0A1E3A; --bg-foot: #041127; --accent: #6EA8E8; --accent-hi: #9FC8F5; --text-1: #F4F7FB; --text-2: #8FA6C2; --text-3: #5E7695; --border: rgba(150, 190, 230, 0.12); --border-hi: rgba(159, 200, 245, 0.30); --plane: #F4F7FB; --band: #0A1E3A; --halo: rgba(110, 168, 232, .09); --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.78 0 0 0 0 0.96 1 0 0 0 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E"); --hero-glow: #0B2144; --header-bg: rgba(6, 21, 45, .82); --net-line: rgba(159, 200, 245, .11); --net-node: rgba(159, 200, 245, .30); --net-hub: rgba(159, 200, 245, .5); --tint: rgba(110, 168, 232, .1); --link-line: rgba(159, 200, 245, .3); --selection: rgba(110, 168, 232, .35); --tile-bg: linear-gradient(165deg, rgba(14, 36, 68, .6), rgba(10, 30, 58, .3)); --legal-bg: linear-gradient(165deg, rgba(14, 36, 68, .5), rgba(10, 30, 58, .25)); --sans: 'Inter', system-ui, -apple-system, sans-serif; --brand: 'Manrope', 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --ease: cubic-bezier(.22, .61, .36, 1); --gutter: clamp(16px, 5vw, 64px); color-scheme: dark; } :root[data-theme="light"] { --bg: #F3F6FA; --bg2: #E9EFF6; --bg-foot: #E6ECF4; --accent: #2A67AE; --accent-hi: #1B4F8F; --text-1: #0B1F3A; --text-2: #465C78; --text-3: #5B6F8C; --border: rgba(16, 46, 88, 0.12); --border-hi: rgba(27, 79, 143, 0.30); --plane: #0E2A52; --band: #FFFFFF; --halo: rgba(42, 103, 174, .07); --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.04 0 0 0 0 0.12 0 0 0 0 0.23 1 0 0 0 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E"); --hero-glow: #FFFFFF; --header-bg: rgba(243, 246, 250, .85); --net-line: rgba(27, 79, 143, .16); --net-node: rgba(27, 79, 143, .32); --net-hub: rgba(27, 79, 143, .55); --tint: rgba(42, 103, 174, .09); --link-line: rgba(27, 79, 143, .3); --selection: rgba(42, 103, 174, .2); --tile-bg: linear-gradient(165deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .55)); --legal-bg: linear-gradient(165deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .6)); color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--grain), var(--bg); color: var(--text-1); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } ::selection { background: var(--selection); } .mono { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); } .aero { color: var(--accent-hi); } /* ── Header ─────────────────────────────────────────── */ .header { position: fixed; inset: 0 0 auto 0; z-index: 20; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); border-bottom: 1px solid transparent; transition: background .6s var(--ease), border-color .6s var(--ease), backdrop-filter .6s; } .header.scrolled { background: var(--header-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--border); } .brand { display: flex; align-items: center; gap: 12px; } /* Le PNG sert de masque : l'avion prend la couleur du thème. */ .plane { display: block; aspect-ratio: 604 / 249; background: var(--plane); -webkit-mask: url(plane.png) center / contain no-repeat; mask: url(plane.png) center / contain no-repeat; } .brand .plane { width: 36px; } .brand span { font-family: var(--brand); font-size: 12.5px; font-weight: 600; letter-spacing: .16em; white-space: nowrap; } .nav { display: flex; gap: clamp(18px, 3vw, 40px); margin-left: auto; } .theme-toggle { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; margin-left: clamp(16px, 2.4vw, 32px); padding: 0; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; transition: color .4s var(--ease), border-color .4s var(--ease); } .theme-toggle:hover, .theme-toggle:focus-visible { color: var(--text-1); border-color: var(--border-hi); } .theme-toggle svg { width: 16px; height: 16px; } /* l'icône montre le thème vers lequel on bascule */ :root[data-theme="light"] .theme-toggle .sun, :root:not([data-theme="light"]) .theme-toggle .moon { display: none; } .nav a { font-size: 13px; color: var(--text-2); letter-spacing: .04em; transition: color .4s var(--ease); } .nav a:hover, .nav a:focus-visible { color: var(--text-1); } /* ── Hero ───────────────────────────────────────────── */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 96px var(--gutter); overflow: hidden; background: radial-gradient(ellipse 70% 55% at 50% 42%, var(--hero-glow) 0%, var(--bg) 70%); animation: fade 1.6s var(--ease) both; } .network { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .network path { fill: none; stroke: var(--net-line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 3.2s var(--ease) .5s forwards; } .network path:nth-child(2) { animation-delay: .8s; } .network path:nth-child(3) { animation-delay: 1.1s; } .network path:nth-child(4) { animation-delay: 1.4s; } .network path:nth-child(5) { animation-delay: 1.7s; } .network circle { fill: var(--net-node); opacity: 0; animation: fade 1.8s var(--ease) 1.6s forwards; } .network circle.hub { fill: var(--net-hub); } .hero-inner { position: relative; text-align: center; } .hero-plane { display: block; width: clamp(220px, 30vw, 400px); margin: 0 auto; transform: translateX(4%); /* le nez déporte la masse à droite, comme sur le logo */ opacity: 0; animation: rise 1.8s var(--ease) 1.3s forwards; } .wordmark { margin: clamp(20px, 3vh, 32px) -.12em 0 0; /* compense le tracking du dernier caractère */ font-family: var(--brand); font-size: clamp(28px, 5vw, 64px); font-weight: 500; letter-spacing: .12em; line-height: 1.1; opacity: 0; animation: rise 1.8s var(--ease) 2s forwards; } .tagline { margin: 22px 0 0; font-size: clamp(14px, 1.5vw, 19px); font-weight: 400; letter-spacing: .26em; color: var(--accent); opacity: 0; animation: rise 1.8s var(--ease) 2.6s forwards; } .hero-meta { position: absolute; bottom: 32px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; align-items: flex-end; opacity: 0; animation: fade 2s var(--ease) 3.4s forwards; } .status { display: inline-flex; align-items: center; gap: 10px; } .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--tint); } .scroll-cue { position: absolute; left: 50%; bottom: 0; width: 1px; height: 56px; transform: translateX(-50%); background: var(--border); overflow: hidden; } .scroll-cue::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--accent-hi); animation: cue 3.2s var(--ease) infinite; } /* ── Sections ───────────────────────────────────────── */ .section { max-width: 1200px; margin: 0 auto; padding: clamp(96px, 16vh, 168px) var(--gutter); } .section-head { display: flex; align-items: baseline; gap: 24px; margin-bottom: clamp(48px, 8vh, 80px); } .section-head .rule { flex: 1; height: 1px; background: var(--border); align-self: center; } .section-title { margin: 0; font-size: clamp(26px, 3vw, 38px); font-weight: 500; letter-spacing: .02em; } /* ── Products : un chapitre par produit, en bandes alternées ── */ .chapters-head { padding-bottom: 0; } .chapters-head .section-head { margin-bottom: clamp(40px, 6vh, 64px); } .chapters { border-top: 1px solid var(--border); } .chapter { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--border); } .chapter:nth-child(even) { background: var(--grain), var(--band); } /* halo derrière le nom du produit, alterné gauche / droite d'un chapitre à l'autre */ .chapter::before { content: ''; position: absolute; z-index: -1; top: 50%; left: 18%; width: min(900px, 90vw); aspect-ratio: 1; translate: -50% -50%; background: radial-gradient(closest-side, var(--halo), transparent); pointer-events: none; } .chapter:nth-child(even)::before { left: 82%; } .chapter-inner { max-width: 1200px; margin: 0 auto; padding: clamp(80px, 13vh, 144px) var(--gutter); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: end; } .product { margin: 0; font-family: var(--brand); font-size: clamp(44px, 7vw, 96px); font-weight: 500; letter-spacing: .08em; line-height: 1; } .product-kind { margin: 22px 0 0; font-size: 19px; color: var(--accent-hi); } .product-desc { margin: 16px 0 0; color: var(--text-2); font-size: 16.5px; max-width: 46ch; } .chapter-link { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; margin-top: 44px; } .open { display: inline-flex; align-items: center; gap: 14px; font-size: 14px; color: var(--text-1); } .go-btn { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--border-hi); border-radius: 50%; transition: background .7s var(--ease), color .7s var(--ease), border-color .7s var(--ease); } .go-btn svg { width: 16px; height: 10px; transition: transform .7s var(--ease); } .open:hover .go-btn, .open:focus-visible .go-btn { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--bg); } .open:hover svg, .open:focus-visible svg { transform: translateX(2px); } .specs { margin: 0; display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); } .specs dt, .specs dd { padding: 18px 0; border-top: 1px solid var(--border); } .specs dt:last-of-type, .specs dd:last-of-type { border-bottom: 1px solid var(--border); } .specs dt { padding-top: 22px; padding-right: 32px; } .specs dd { margin: 0; font-size: 15.5px; } /* ── About ──────────────────────────────────────────── */ .about-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .about-intro .lead { margin: 0; font-size: clamp(24px, 2.6vw, 34px); color: var(--text-1); font-weight: 400; line-height: 1.3; } .about-intro div p { margin: 0 0 18px; color: var(--text-2); font-size: 16.5px; } .about-intro .mono { display: block; } .sub-label { display: flex; align-items: center; gap: 16px; margin: clamp(64px, 10vh, 104px) 0 24px; } .sub-label::after { content: ''; flex: 1; height: 1px; background: var(--border); } .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .tile { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--border); border-radius: 20px; background: var(--tile-bg); } .tile h3 { margin: 0; font-family: var(--brand); font-size: clamp(20px, 2vw, 24px); font-weight: 500; } .tile p { margin: 0; color: var(--text-2); font-size: 15px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; } .chips li { padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; color: var(--text-2); } .tile-link { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 12px; width: fit-content; font-size: 14px; color: var(--accent-hi); } .tile-link svg { width: 22px; height: 10px; transition: transform .7s var(--ease); } .tile-link:hover svg, .tile-link:focus-visible svg { transform: translateX(4px); } .person { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 22px; align-items: start; } .avatar { width: 64px; height: 64px; border: 1px solid var(--border-hi); border-radius: 50%; object-fit: cover; } .person h3 { font-size: 20px; } .person .role { margin: 4px 0 12px; color: var(--accent-hi); font-size: 14px; } .person .chips { margin-top: 14px; } /* ── Footer ─────────────────────────────────────────── */ .footer { background: var(--grain), var(--bg-foot); border-top: 1px solid var(--border); } .footer-inner { max-width: 1200px; margin: 0 auto; padding: clamp(64px, 10vh, 104px) var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 48px; } .footer .brand span { font-size: 12.5px; } .footer-tag { margin: 14px 0 0; color: var(--text-2); font-size: 14px; letter-spacing: .06em; } .footer-col { display: grid; gap: 12px; align-content: start; } .footer-col .mono { margin-bottom: 6px; } .footer-col a { font-size: 14px; color: var(--text-2); transition: color .4s var(--ease); width: fit-content; } .footer-col a:hover, .footer-col a:focus-visible { color: var(--text-1); } .footer-base { max-width: 1200px; margin: 0 auto; padding: 24px var(--gutter) 32px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--border); } /* ── Apparitions ────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 1.4s var(--ease), transform 1.4s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal:nth-child(2) { transition-delay: .15s; } .duo .reveal:nth-child(2) { transition-delay: .3s; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes rise { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes cue { 0% { top: -40%; } 60%, 100% { top: 100%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .hero-plane, .wordmark, .tagline, .hero-meta, .network circle { opacity: 1; } .network path { stroke-dashoffset: 0; } .reveal { opacity: 1; transform: none; } html { scroll-behavior: auto; } } /* ── Petits écrans ──────────────────────────────────── */ @media (max-width: 860px) { .chapter-inner, .about-intro, .duo { grid-template-columns: 1fr; } .chapter-inner { align-items: start; } .footer-inner { grid-template-columns: 1fr 1fr; } .footer-inner > :first-child { grid-column: 1 / -1; } } @media (max-width: 560px) { .header .brand .long { display: none; } .nav { gap: 14px; } .theme-toggle { margin-left: 14px; } .hero-meta .hide-sm { display: none; } .hero-meta { justify-content: center; } } @media (min-width: 561px) { .brand .short { display: none; } } /* 320 px : le logo seul laisse la place à la navigation et au bouton de thème */ @media (max-width: 374px) { .header .brand .short { display: none; } .nav { gap: 12px; } .theme-toggle { margin-left: 12px; } } /* ── Page légale ────────────────────────────────────── */ .legal { max-width: 820px; margin: 0 auto; padding: 152px var(--gutter) clamp(96px, 14vh, 144px); } .legal h1 { margin: 14px 0 0; font-family: var(--brand); font-size: clamp(32px, 4vw, 48px); font-weight: 500; letter-spacing: .01em; } .legal-intro { margin: 22px 0 0; color: var(--text-2); font-size: 16.5px; max-width: 620px; } .legal-block { margin-top: 28px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--border); border-radius: 20px; background: var(--legal-bg); } .legal-block:first-of-type { margin-top: 56px; } .legal-block h2 { margin: 0 0 20px; font-family: var(--brand); font-size: 20px; font-weight: 500; } .legal-block p { margin: 0 0 14px; color: var(--text-2); font-size: 15px; } .legal-block p:last-child { margin-bottom: 0; } .legal-intro a, .legal-block a { color: var(--accent-hi); border-bottom: 1px solid var(--link-line); transition: border-color .4s var(--ease); } .legal-intro a:hover, .legal-block a:hover, .legal-block a:focus-visible { border-bottom-color: var(--accent-hi); } .facts { margin: 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); } .facts dt, .facts dd { padding: 12px 0; border-top: 1px solid var(--border); } .facts dt:first-of-type, .facts dt:first-of-type + dd { border-top: 0; padding-top: 0; } .facts dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); padding-top: 15px; } .facts dt:first-of-type { padding-top: 3px; } .facts dd { margin: 0; font-size: 15px; } @media (max-width: 560px) { .facts { grid-template-columns: 1fr; } .facts dd { border-top: 0; padding-top: 2px; } .facts dt:first-of-type + dd { padding-top: 2px; } }