/* ========================================================================== FURION — Design System Territoire : 03 BADASS PIONEER Rebelle · Robuste · Audacieux · Minéral ========================================================================== */ /* ---------- 1. TOKENS -------------------------------------------------- */ :root { /* Socle commun — Mineral grey */ --void: #0A0C0D; /* fond absolu */ --deck: #1B1E20; /* fond de référence du dossier d'identité */ --mineral-900: #16181A; --mineral-800: #212426; --mineral-700: #292929; --mineral-600: #3A3D3F; --mineral-500: #525252; --mineral-300: #8A8E90; --mineral-100: #C9CDCF; --chalk: #F2F4F5; /* Accent colour / signature colour */ --yellow: #FEC206; /* #2 Radical Yellow — accent principal */ --yellow-dim: #B98D04; --violet: #4935A4; /* #1 Dark Tech */ --acid: #B6F125; /* #1 Dark Tech */ --kaki: #BDBF6B; /* #3 Stealthy kaki */ /* Rouge Furion — couleur de la Taran, du logo et du discours de marque. Pour revenir au jaune de l'étude d'identité : --accent: var(--yellow). */ --furion-red: #D6122A; --accent: var(--furion-red); --accent-soft: rgba(214, 18, 42, 0.13); --accent-line: rgba(214, 18, 42, 0.45); /* Rouge éclairci pour le PETIT texte. Le rouge de marque plafonne à 3,7:1 sur fond sombre : lisible en gros titre, insuffisant sous 18 px (AA exige 4,5:1). Celui-ci monte à 5,9:1. À utiliser dès qu'un texte rouge fait moins de 18 px. */ --accent-text: #F5545F; /* Bleu signature lumineuse — repris des feux de la Taran. Décoratif uniquement. */ --signal: #2E8DFF; /* Alias historique conservé pour les blocs de données */ --tech: var(--furion-red); --tech-soft: rgba(214, 18, 42, 0.13); --tech-line: rgba(214, 18, 42, 0.45); /* Typographie */ --f-display: 'Archivo', 'Helvetica Neue', Impact, sans-serif; --f-body: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif; --f-data: 'Space Mono', 'SFMono-Regular', Consolas, monospace; --f-serif: 'Bodoni Moda', Didot, 'Times New Roman', serif; /* Géométrie — le chanfrein est la signature formelle */ --chamfer: 14px; --chamfer-sm: 8px; --rule: 1px solid rgba(255, 255, 255, 0.09); /* Rythme */ --gut: clamp(20px, 4vw, 64px); --band: clamp(72px, 11vw, 168px); --maxw: 1440px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* Colorways alternatifs — issus de l'étude d'identité, inactifs tant qu'il n'existe qu'un seul rendu de la Taran. Poser data-colorway sur pour tester. */ [data-colorway="yellow"] { --accent: var(--yellow); --accent-soft: rgba(254,194,6,.14); --accent-line: rgba(254,194,6,.42); } [data-colorway="darktech"] { --accent: var(--acid); --accent-soft: rgba(182,241,37,.13); --accent-line: rgba(182,241,37,.40); } [data-colorway="kaki"] { --accent: var(--kaki); --accent-soft: rgba(189,191,107,.13); --accent-line: rgba(189,191,107,.40); } /* ---------- 2. RESET --------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--void); color: var(--chalk); font-family: var(--f-body); font-size: 16px; line-height: 1.62; font-weight: 300; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, video, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 0.94; letter-spacing: -0.02em; } /* Anti-débordement : aucun mot long ne doit sortir de sa colonne */ h1, h2, h3, h4, p, dd, dt, li, span, a { overflow-wrap: break-word; } p { margin: 0; } ::selection { background: var(--accent); color: #fff; } /* Confort de lecture — règles globales ------------------------------------ Le monospace en capitales très espacées est réservé aux ÉTIQUETTES de 1 à 3 mots. Toute phrase descriptive passe en typographie de labeur, en casse normale, à 0,88 rem minimum. C'est la règle qui gouverne tout le reste du fichier. */ h1, h2, h3, h4 { text-wrap: balance; } p, li, dd { text-wrap: pretty; } /* Navigation au clavier : sans cet anneau, un utilisateur qui tabule ne sait jamais où il se trouve. Il n'apparaît pas à la souris (:focus-visible). */ :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 2px; } .skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--accent); color: #fff; padding: 13px 22px; font-family: var(--f-data); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; transition: top .2s var(--ease); } .skip:focus { top: 12px; } /* ---------- 3. PRIMITIVES ---------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); } .band { padding-block: var(--band); } /* Chanfrein — coins coupés, langage formel Furion */ .chamfer { clip-path: polygon( var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer) ); } .chamfer-sm { --chamfer: var(--chamfer-sm); } /* Signature lumineuse — filet lumineux élancé */ .glow-rule { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--accent-line) 18%, var(--accent) 50%, var(--accent-line) 82%, transparent); opacity: .75; } /* Titres */ .display { font-family: var(--f-display); font-weight: 800; font-stretch: 112%; text-transform: uppercase; letter-spacing: -0.025em; /* Les capitales accentuées (É, Î) montent au-dessus de la hauteur de capitale : sans cette réserve, elles sont rognées par les line-height serrés. */ padding-top: 0.1em; } .d-xxl { font-size: clamp(2.7rem, 9.4vw, 8.6rem); line-height: 0.88; } .d-xl { font-size: clamp(2.1rem, 5.8vw, 4.9rem); line-height: 0.92; } .d-l { font-size: clamp(1.6rem, 3.1vw, 2.7rem); line-height: 1; } .d-m { font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.14; } .lede { font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.62; color: var(--mineral-100); font-weight: 300; max-width: 62ch; } .body-dim { color: var(--mineral-100); max-width: 64ch; } /* Kicker : numéro sérif + label technique — écho direct du dossier d'identité */ .kicker { display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; } .kicker__n { font-family: var(--f-serif); font-size: 2.5rem; line-height: 1; color: var(--accent); font-weight: 500; } .kicker__t { font-family: var(--f-data); font-size: .78rem; text-transform: uppercase; letter-spacing: .13em; color: var(--mineral-100); } /* Tags #hashtag du dossier */ .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; } .tag { font-family: var(--f-data); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; padding: 8px 14px; color: var(--mineral-100); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.02); } .tag::before { content: '#'; color: var(--accent-text); margin-right: 3px; } /* Boutons */ .btn { --chamfer: 10px; display: inline-flex; align-items: center; gap: 12px; padding: 17px 30px; font-family: var(--f-data); font-size: .78rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn--solid { background: var(--accent); color: #fff; } .btn--solid:hover { background: var(--chalk); color: var(--void); } .btn--ghost { border: 1px solid rgba(255,255,255,.22); color: var(--chalk); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); } .btn__arrow { transition: transform .3s var(--ease); } .btn:hover .btn__arrow { transform: translateX(4px); } /* Apparition au scroll */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease), transform .85s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } /* ---------- 4. NAVIGATION ---------------------------------------------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px var(--gut); transition: background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease); border-bottom: 1px solid transparent; } .nav.is-stuck { background: rgba(10,12,13,.86); backdrop-filter: blur(16px) saturate(140%); border-bottom-color: rgba(255,255,255,.08); } .nav__logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; } .nav__logo img { width: auto; display: block; } .nav__logo .mark { height: 30px; } .nav__logo .word { height: 15px; } .nav__links { display: flex; gap: 34px; } .nav__link { font-family: var(--f-data); font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--mineral-100); position: relative; padding-block: 4px; } .nav__link::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--accent); transition: width .35s var(--ease); } .nav__link:hover { color: var(--chalk); } .nav__link:hover::after { width: 100%; } .nav__right { display: flex; align-items: center; gap: 18px; } /* Sélecteur de langue */ .lang { display: flex; font-family: var(--f-data); font-size: .76rem; letter-spacing: .05em; border: 1px solid rgba(255,255,255,.16); } .lang button { padding: 7px 11px; color: var(--mineral-300); transition: .25s var(--ease); } .lang button[aria-pressed="true"] { background: var(--accent); color: var(--void); font-weight: 700; } .burger { display: none; width: 26px; height: 16px; position: relative; } .burger span { position: absolute; left: 0; height: 1.5px; width: 100%; background: var(--chalk); transition: .3s var(--ease); } .burger span:nth-child(1) { top: 0; } .burger span:nth-child(2) { top: 7px; } .burger span:nth-child(3) { top: 14px; } body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.menu-open .burger span:nth-child(2) { opacity: 0; } body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- 5. HERO ---------------------------------------------------- */ /* Empilement vertical explicite. Sans flex-direction, le bandeau de chiffres et le bloc de titre se partageaient la même rangée : le bandeau, comprimé, débordait vers le haut et passait sous la navigation. */ .hero { position: relative; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; } .hero__media { position: absolute; inset: 0; } .hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; } /* Voile allégé : la machine doit rester lisible. Le contraste du texte n'est plus obtenu en assombrissant toute l'image, mais par un dégradé localisé sous le bloc de titre, là où il est réellement nécessaire. */ .hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,13,.55) 0%, rgba(10,12,13,0) 26%, rgba(10,12,13,0) 42%, rgba(10,12,13,.86) 100%); } .hero__inner { position: relative; z-index: 2; width: 100%; margin-top: auto; /* Réserve haute : le contenu ne doit jamais remonter sous la navigation fixe. */ padding-top: clamp(96px, 14vh, 168px); padding-bottom: clamp(48px, 8vh, 110px); } .hero__eyebrow { font-family: var(--f-data); font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 22px; display: flex; align-items: center; gap: 14px; } .hero__eyebrow::before { content: ''; width: 46px; height: 1px; background: var(--accent); } /* Titre en filigrane : première ligne détourée, laissant voir la machine ; le mot d'accent reste plein pour ancrer la lecture. Un titre entièrement détouré deviendrait illisible en plein soleil sur mobile. */ .hero h1 { max-width: 15ch; color: transparent; -webkit-text-stroke: 1.4px rgba(242, 244, 245, .92); paint-order: stroke fill; } /* Le mot d'accent est rouge, et il se pose sur une machine rouge : sans séparation il se noie dans l'image. Un filet sombre le décolle du fond. paint-order dessine le trait AVANT le remplissage : le contour reste donc entièrement à l'extérieur et n'amaigrit pas les lettres. */ .hero h1 em { font-style: normal; color: var(--accent); -webkit-text-stroke: 0.035em var(--void); paint-order: stroke fill; } @media (max-width: 720px) { /* Un contour de 1,4 px ne tient pas à petite taille : le titre repasse en plein, mais le mot d'accent garde son filet, le problème de fond demeurant. */ .hero h1 { color: var(--chalk); -webkit-text-stroke: 0; } .hero h1 em { -webkit-text-stroke: 0.03em var(--void); } } .hero__sub { margin-top: 30px; max-width: 46ch; } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; } /* Bandeau de données technique en bas de hero */ .hero__strip { position: relative; z-index: 2; border-top: var(--rule); display: grid; grid-template-columns: repeat(4, 1fr); } .hero__stat { padding: 22px clamp(16px, 2.4vw, 32px) 26px; border-left: var(--rule); display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; } .hero__stat:first-child { border-left: 0; } .hero__stat span { text-wrap: balance; } .hero__stat b { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.3rem); letter-spacing: -.02em; } .hero__stat span { font-size: .92rem; line-height: 1.4; color: var(--mineral-100); } /* ---------- 6. TICKER -------------------------------------------------- */ .ticker { border-block: var(--rule); overflow: hidden; padding-block: 15px; background: var(--mineral-900); } .ticker__track { display: flex; gap: 46px; width: max-content; animation: slide 38s linear infinite; } .ticker span { font-family: var(--f-display); font-weight: 800; font-stretch: 115%; text-transform: uppercase; font-size: clamp(1.1rem, 2vw, 1.7rem); letter-spacing: .02em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px var(--mineral-500); } .ticker span:nth-child(even) { color: var(--accent); -webkit-text-stroke: 0; } @keyframes slide { to { transform: translateX(-50%); } } /* ---------- 7. MANIFESTE ----------------------------------------------- */ .manifesto { background: var(--deck); border-bottom: var(--rule); } .manifesto__quote { font-family: var(--f-display); font-weight: 800; font-stretch: 108%; text-transform: uppercase; font-size: clamp(1.9rem, 5.2vw, 4.4rem); line-height: .95; letter-spacing: -.028em; max-width: 20ch; } .manifesto__quote b { color: var(--accent); font-weight: 800; } .manifesto__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 90px); align-items: end; } /* Piliers Rebelle / Robuste / Audacieux / Minéral */ .pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.09); margin-top: clamp(48px, 7vw, 92px); } .pillar { background: var(--deck); padding: 34px 26px 40px; transition: background .4s var(--ease); } .pillar:hover { background: var(--mineral-800); } .pillar__i { font-family: var(--f-data); font-size: .78rem; color: var(--accent-text); letter-spacing: .1em; } .pillar h3 { font-family: var(--f-display); font-stretch: 112%; text-transform: uppercase; font-size: clamp(1rem, 1.6vw, 1.35rem); margin: 16px 0 12px; } .pillar p { font-size: .95rem; color: var(--mineral-100); line-height: 1.62; } /* ---------- 8. SECTION PRODUIT ----------------------------------------- */ .machine { position: relative; } .machine__stage { position: relative; margin-top: clamp(36px, 5vw, 64px); aspect-ratio: 16 / 9; background: radial-gradient(70% 90% at 50% 55%, var(--mineral-800), var(--void) 78%); display: grid; place-items: center; overflow: hidden; border: var(--rule); } .machine__stage img { width: 100%; height: 100%; object-fit: contain; } .machine__stage::before { content: ''; position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); width: 62%; height: 1px; background: var(--accent); filter: blur(1px); opacity: .5; } /* Sélecteur de colorway */ .cmf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; } .cmf__label { font-family: var(--f-data); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mineral-100); margin-right: 8px; } .swatch { --chamfer: 7px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 11px; border: 1px solid rgba(255,255,255,.14); transition: .3s var(--ease); font-family: var(--f-data); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mineral-100); } .swatch:hover { border-color: rgba(255,255,255,.4); } .swatch[aria-pressed="true"] { border-color: var(--accent); color: var(--chalk); background: var(--accent-soft); } .swatch__dot { width: 15px; height: 15px; border: 1px solid rgba(255,255,255,.28); } /* Tableau de specs */ .specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.09); margin-top: clamp(40px, 6vw, 76px); } .spec { background: var(--void); padding: 30px 26px 34px; } .spec dt { font-family: var(--f-data); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mineral-100); } .spec dd { margin: 12px 0 0; font-family: var(--f-display); font-weight: 800; font-stretch: 108%; font-size: clamp(1.35rem, 2.3vw, 2rem); letter-spacing: -.02em; } .spec dd small { font-family: var(--f-body); font-weight: 300; font-size: .95rem; line-height: 1.55; letter-spacing: 0; color: var(--mineral-100); display: block; margin-top: 10px; text-transform: none; } /* ---------- 9. TECHNOLOGIE (split) ------------------------------------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 76px); align-items: center; } .split--flip .split__media { order: -1; } .split__media { position: relative; aspect-ratio: 4/5; background: var(--mineral-800); overflow: hidden; border: var(--rule); } .split__media img { width: 100%; height: 100%; object-fit: cover; } .split__num { font-family: var(--f-serif); font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1; color: var(--accent); margin-bottom: 8px; } /* ---------- 10. GALERIE ------------------------------------------------- */ .gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; margin-top: clamp(36px, 5vw, 60px); } .shot { position: relative; overflow: hidden; background: var(--mineral-800); border: var(--rule); } .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } .shot:hover img { transform: scale(1.05); } .shot--wide { grid-column: span 12; aspect-ratio: 3/1; } .shot--a { grid-column: span 7; aspect-ratio: 16/10; } .shot--b { grid-column: span 5; aspect-ratio: 16/10; } .shot--half { grid-column: span 6; aspect-ratio: 4/3; } .shot--c { grid-column: span 4; aspect-ratio: 1; } .shot--d { grid-column: span 4; aspect-ratio: 1; } .shot--e { grid-column: span 4; aspect-ratio: 1; } .shot__cap { position: absolute; left: 0; bottom: 0; padding: 9px 15px; font-size: .86rem; color: var(--chalk); background: rgba(10,12,13,.82); } .shot__cap b, .plate__cap b { font-family: var(--f-data); color: var(--accent-text); font-weight: 700; margin-right: 8px; } /* ---------- 11. PRESSE / INVESTISSEURS ---------------------------------- */ .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: clamp(36px, 5vw, 56px); } .card { --chamfer: 18px; background: var(--mineral-900); border: var(--rule); padding: clamp(30px, 3.6vw, 48px); display: flex; flex-direction: column; gap: 16px; transition: background .4s var(--ease), border-color .4s var(--ease); } .card:hover { background: var(--mineral-800); border-color: var(--accent-line); } .card h3 { font-family: var(--f-display); font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.3rem, 2.1vw, 1.85rem); } .card p { color: var(--mineral-100); font-size: .98rem; line-height: 1.62; } .card__link { margin-top: auto; padding-top: 12px; font-family: var(--f-data); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); display: inline-flex; gap: 10px; align-items: center; } /* ---------- PAGES LÉGALES ------------------------------------------------ Texte long : colonne étroite, interlignage généreux, hiérarchie sobre. */ .legal { max-width: 74ch; } .legal h2 { font-family: var(--f-display); font-weight: 800; font-stretch: 108%; text-transform: uppercase; font-size: clamp(1.15rem, 1.9vw, 1.5rem); letter-spacing: -.015em; margin: clamp(38px, 5vw, 56px) 0 16px; padding-top: .08em; } .legal h2:first-of-type { margin-top: clamp(28px, 3.5vw, 40px); } .legal h3 { font-family: var(--f-data); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); font-weight: 700; margin: 28px 0 10px; } .legal p { color: var(--mineral-100); font-size: 1rem; line-height: 1.7; margin-bottom: 14px; } .legal ul { color: var(--mineral-100); font-size: 1rem; line-height: 1.7; padding-left: 20px; margin: 0 0 14px; } .legal li { margin-bottom: 8px; } .legal a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; } .legal a:hover { color: var(--chalk); } .legal dl { display: grid; grid-template-columns: minmax(0,180px) minmax(0,1fr); gap: 10px 24px; margin: 0 0 18px; } .legal dt { font-family: var(--f-data); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mineral-300); } .legal dd { margin: 0; color: var(--chalk); line-height: 1.6; } /* Champ à compléter — impossible à manquer avant publication */ .todo { display: inline-block; padding: 2px 9px; border: 1px dashed var(--accent); background: var(--accent-soft); color: var(--accent-text); font-family: var(--f-data); font-size: .82rem; letter-spacing: .04em; } .legal__warn { margin: 0 0 clamp(30px, 4vw, 44px); padding: 20px 24px; border-left: 2px solid var(--accent); background: var(--accent-soft); font-size: .95rem; line-height: 1.6; color: var(--chalk); max-width: 74ch; } @media (max-width: 720px) { .legal dl { grid-template-columns: 1fr; gap: 4px 0; } } /* ---------- SHOWROOM VR ------------------------------------------------- Bandeau d'entrée : le showroom pèse 8,6 Mo, il ne se charge que si le visiteur le demande. Rien n'est préchargé ici. */ .vr { --chamfer: 20px; position: relative; overflow: hidden; display: block; border: 1px solid rgba(255,255,255,.12); background: var(--mineral-900); margin-top: clamp(36px, 5vw, 56px); } .vr__bg { position: absolute; inset: 0; opacity: .30; transition: opacity .5s var(--ease), transform 1.2s var(--ease); } .vr:hover .vr__bg { opacity: .42; transform: scale(1.03); } .vr__bg img { width: 100%; height: 100%; object-fit: cover; } .vr__inner { position: relative; z-index: 1; padding: clamp(32px, 4.5vw, 58px); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(20px, 3vw, 48px); align-items: end; } .vr__tag { font-family: var(--f-data); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; } .vr h3 { font-family: var(--f-display); font-stretch: 114%; text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.5rem); padding-top: .08em; } .vr p { color: var(--chalk); font-size: 1rem; line-height: 1.6; margin-top: 14px; max-width: 48ch; } .vr__specs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } @media (max-width: 860px) { .vr__inner { grid-template-columns: 1fr; align-items: start; } } /* ---------- FILM DE MARQUE ---------------------------------------------- Façade cliquable : rien n'est chargé depuis YouTube tant que le visiteur n'a pas cliqué. Le site reste sans requête tierce au chargement. */ .film { position: relative; aspect-ratio: 16/9; overflow: hidden; border: var(--rule); background: var(--mineral-900); margin-top: clamp(36px, 5vw, 56px); cursor: pointer; display: block; width: 100%; } .film img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), opacity .4s var(--ease); } .film:hover img { transform: scale(1.03); opacity: .82; } .film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .film__play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .film__play span { width: clamp(64px, 8vw, 92px); aspect-ratio: 1; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 0 0 0 var(--accent-line); transition: transform .3s var(--ease); } .film:hover .film__play span { transform: scale(1.08); } .film__play svg { width: 34%; height: 34%; fill: #fff; margin-left: 12%; } .film__note { position: absolute; left: 0; bottom: 0; padding: 11px 16px; background: rgba(10,12,13,.86); color: var(--mineral-100); font-size: .84rem; line-height: 1.4; max-width: 46ch; } /* Crédit auteur — le dessin a un auteur, on le nomme */ .credit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-top: clamp(26px, 3vw, 38px); padding-top: 20px; border-top: var(--rule); } .credit__label { font-family: var(--f-data); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mineral-300); } .credit__name { font-family: var(--f-display); font-weight: 800; font-stretch: 108%; text-transform: uppercase; font-size: 1.1rem; letter-spacing: -.01em; color: var(--chalk); } .credit__note { font-size: .92rem; color: var(--mineral-300); flex-basis: 100%; max-width: 60ch; } /* Un nom crédité peut être cliquable : l'affordance reste discrète, elle n'apparaît qu'au survol pour ne pas parasiter la ligne de crédit. */ .credit__name a { border-bottom: 1px solid transparent; transition: border-color .25s var(--ease), color .25s var(--ease); } .credit__name a:hover { color: var(--accent-text); border-bottom-color: var(--accent-line); } /* Ligne de communiqué */ .release { transition: background .3s var(--ease), padding-left .3s var(--ease); } .release:hover { background: var(--mineral-900); padding-left: 14px; } /* Logos presse */ .press-logos { display: flex; flex-wrap: wrap; gap: 38px; align-items: center; margin-top: 26px; } .press-logos span { font-family: var(--f-display); font-stretch: 108%; font-weight: 800; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .04em; color: var(--mineral-300); } /* ---------- 12. WAITLIST ------------------------------------------------ */ .join { background: var(--deck); border-top: var(--rule); position: relative; overflow: hidden; } .join::before { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 70%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); } .join__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; } .form { display: flex; flex-direction: column; gap: 12px; } .form__row { display: flex; gap: 12px; } .field { --chamfer: 9px; flex: 1; padding: 17px 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); color: var(--chalk); font-family: var(--f-body); font-size: .95rem; transition: border-color .3s var(--ease), background .3s var(--ease); } .field::placeholder { color: var(--mineral-500); } .field:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,.06); } select.field { appearance: none; cursor: pointer; } select.field option { background: var(--deck); } .consent { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: var(--mineral-100); line-height: 1.6; margin-top: 6px; } .consent input { margin-top: 3px; accent-color: var(--accent); } .form__msg { font-size: .95rem; letter-spacing: 0; color: var(--accent); min-height: 1.2em; } /* ---------- 13. FOOTER -------------------------------------------------- */ .foot { border-top: var(--rule); padding-block: clamp(48px, 6vw, 80px) 34px; } .foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } .foot__word { font-family: var(--f-display); font-weight: 800; font-stretch: 122%; text-transform: uppercase; font-size: clamp(2.4rem, 11vw, 9.5rem); line-height: .9; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px var(--mineral-600); margin-top: clamp(40px, 6vw, 80px); user-select: none; white-space: nowrap; overflow: hidden; padding-top: .06em; } .foot h4 { font-family: var(--f-data); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mineral-300); font-weight: 400; margin-bottom: 18px; } .foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .foot a { font-size: .96rem; color: var(--mineral-100); transition: color .25s var(--ease); } .foot a:hover { color: var(--accent-text); } .foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 34px; padding-top: 22px; border-top: var(--rule); font-size: .88rem; color: var(--mineral-300); } /* ---------- 14. PLACEHOLDER --------------------------------------------- */ /* Visible tant que les assets réels ne sont pas déposés dans /assets/img */ .ph { width: 100%; height: 100%; min-height: 120px; background: repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 12px, transparent 12px 24px), var(--mineral-800); display: grid; place-items: center; text-align: center; padding: 20px; } .ph span { font-family: var(--f-data); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mineral-300); } .ph span b { display: block; color: var(--accent); font-weight: 700; margin-bottom: 6px; } /* ---------- 15. ZONE TECHNIQUE (EVERSOR) -------------------------------- Tout ce qui vit dans .tech-zone bascule sur le rouge : schémas, mesures, comparatifs. La marque reste jaune minéral partout ailleurs. */ .tech-zone { --accent: var(--tech); --accent-soft: var(--tech-soft); --accent-line: var(--tech-line); } /* Barres comparatives — 7 % vs 77 % Empilement horizontal : titre + valeur sur une ligne, barre pleine largeur en dessous, légende en typo de labeur. Rien n'est jamais comprimé dans une colonne étroite, quelle que soit la largeur d'écran. */ .vs__row { display: block; } .vs { display: grid; gap: clamp(26px, 3.4vw, 40px); margin-top: clamp(34px, 5vw, 56px); } .vs__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 12px; } /* L'étiquette et la valeur restent discrètes : c'est la barre qui doit porter l'information. Un display 800 à 2,5 rem écrasait le graphique. */ .vs__label { font-family: var(--f-data); font-weight: 400; text-transform: uppercase; letter-spacing: .09em; font-size: .84rem; line-height: 1.3; color: var(--mineral-300); } .vs__row--tech .vs__label { color: var(--chalk); font-weight: 700; } .vs__val { font-family: var(--f-display); font-weight: 700; font-stretch: 104%; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1; letter-spacing: -.02em; white-space: nowrap; color: var(--mineral-300); } .vs__val--tech { color: var(--accent-text); } /* Graduations tous les 25 % : donne l'échelle et empêche la barre de flotter */ .vs__track { position: relative; height: 62px; overflow: hidden; background: repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, transparent 1px 25%), rgba(255,255,255,.04); border: var(--rule); } .vs__fill { position: absolute; inset: 0 auto 0 0; width: 0; transition: width 1.4s var(--ease); transition-delay: .25s; } .is-in .vs__fill { width: var(--w); } .vs__fill--base { background: var(--mineral-600); } .vs__fill--tech { background: var(--furion-red); box-shadow: 2px 0 0 rgba(255,255,255,.35); } .vs__note { font-size: .92rem; line-height: 1.55; color: var(--mineral-300); margin-top: 12px; max-width: 62ch; } /* Planches techniques — fond clair assumé, écho au dossier d'industrialisation */ .plates { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: clamp(36px, 5vw, 60px); } .plate { position: relative; background: #E9EAEC; border: var(--rule); overflow: hidden; } .plate img { width: 100%; height: 100%; object-fit: cover; display: block; } .plate--wide { grid-column: 1 / -1; background: #fff; } .plate--wide img { object-fit: contain; height: auto; } .plate__cap { position: absolute; left: 0; bottom: 0; padding: 10px 16px; font-size: .88rem; background: var(--void); color: var(--chalk); } .plate__cap b { font-family: var(--f-data); color: var(--accent-text); font-weight: 700; margin-right: 4px; } /* Briques technologiques — liste numérotée épaisse */ .bricks { display: grid; gap: 1px; background: rgba(255,255,255,.09); margin-top: clamp(36px, 5vw, 60px); } .brick { background: var(--void); padding: clamp(26px, 3.4vw, 42px); display: grid; grid-template-columns: 92px 1fr; gap: clamp(18px, 3vw, 42px); align-items: start; transition: background .4s var(--ease); } .brick:hover { background: var(--mineral-900); } .brick__n { font-family: var(--f-serif); font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: .9; color: var(--tech); } .brick h3 { font-family: var(--f-display); font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.15rem, 1.9vw, 1.55rem); margin-bottom: 12px; } .brick p { color: var(--mineral-100); max-width: 66ch; font-size: 1.02rem; } /* Bénéfices chiffrés */ .gains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.09); margin-top: clamp(36px, 5vw, 60px); } .gain { background: var(--void); padding: clamp(28px, 3.4vw, 40px) clamp(22px, 2.6vw, 30px); } .gain b { display: block; font-family: var(--f-display); font-weight: 800; font-stretch: 108%; font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1; letter-spacing: -.03em; color: var(--tech); } .gain h4 { font-family: var(--f-display); font-stretch: 110%; text-transform: uppercase; font-size: 1.05rem; margin: 16px 0 10px; font-weight: 800; } .gain p { font-size: .98rem; color: var(--mineral-100); line-height: 1.62; } /* Deux parcours — accueil */ .paths { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: clamp(40px, 5vw, 66px); } .path { --chamfer: 20px; position: relative; overflow: hidden; min-height: 340px; border: var(--rule); background: var(--mineral-900); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px, 3.4vw, 44px); transition: border-color .4s var(--ease); } .path:hover { border-color: var(--accent-line); } .path__bg { position: absolute; inset: 0; z-index: 0; opacity: .38; transition: opacity .5s var(--ease), transform 1.2s var(--ease); } .path:hover .path__bg { opacity: .5; transform: scale(1.04); } .path__bg img { width: 100%; height: 100%; object-fit: cover; } .path > *:not(.path__bg) { position: relative; z-index: 1; } .path__tag { font-family: var(--f-data); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; } .path h3 { font-family: var(--f-display); font-stretch: 114%; text-transform: uppercase; font-size: clamp(1.6rem, 2.8vw, 2.4rem); } .path p { color: var(--chalk); font-size: 1rem; line-height: 1.6; margin-top: 14px; max-width: 42ch; } .path__go { margin-top: 22px; font-family: var(--f-data); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); display: inline-flex; gap: 10px; } /* Équipe */ .team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.09); margin-top: clamp(36px, 5vw, 56px); } .member { background: var(--void); padding: 26px 22px 30px; } /* Les portraits sont détourés en fondu vers le noir : pas de cadre, ils émergent directement du fond de la carte. */ .member__ph { aspect-ratio: 1; margin-bottom: 18px; overflow: hidden; background: var(--void); } .member__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .member:hover .member__ph img { transform: scale(1.03); } .member__ph .ph { border: var(--rule); } /* Les advisors ne sont que deux. Avec quatre colonnes, les deux cellules vides laissaient voir le fond clair de la grille : un grand rectangle gris à droite. On limite donc la grille à deux colonnes, sur la moitié de la largeur, ce qui conserve exactement l'échelle des portraits de l'équipe. */ .team--advisors { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: calc(50% - 0.5px); } .member h4 { font-family: var(--f-display); font-stretch: 110%; text-transform: uppercase; font-size: 1rem; font-weight: 800; } .member__role { font-family: var(--f-data); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); margin: 10px 0 14px; } .member p { font-size: .95rem; color: var(--mineral-100); line-height: 1.62; } /* Problème / marché */ .probs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(36px, 5vw, 60px); } .prob { --chamfer: 16px; border: 1px solid rgba(255,255,255,.12); padding: clamp(26px, 3vw, 36px); background: rgba(255,255,255,.02); } .prob__n { font-family: var(--f-data); font-size: .78rem; letter-spacing: .1em; color: var(--accent-text); } .prob h3 { font-family: var(--f-display); font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.15rem, 1.8vw, 1.45rem); margin: 14px 0 12px; } .prob p { font-size: .98rem; color: var(--mineral-100); line-height: 1.62; } /* Bandeau de citation */ .pull { border-block: var(--rule); padding-block: clamp(48px, 7vw, 92px); } /* Le style s'applique à la SEULE phrase d'accroche, jamais à tous les

de la section : sinon il écrasait les légendes des barres et l'encadré de méthode, qui se retrouvaient en display gras majuscules, illisibles. */ .pull__statement { font-family: var(--f-display); font-weight: 800; font-stretch: 106%; text-transform: uppercase; font-size: clamp(1.3rem, 2.7vw, 2.15rem); line-height: 1.06; letter-spacing: -.02em; max-width: 28ch; padding-top: .08em; } .pull__statement b { color: var(--accent); } /* Note d'avertissement méthodologique */ .caveat { margin-top: 28px; padding: 18px 22px; border-left: 2px solid var(--tech); background: var(--tech-soft); font-size: .95rem; color: var(--chalk); line-height: 1.6; max-width: 72ch; } /* ---------- 16. RESPONSIVE ---------------------------------------------- */ @media (max-width: 1024px) { .pillars, .specs, .gains, .probs, .team { grid-template-columns: repeat(2, 1fr); } .team--advisors { max-width: 100%; } .paths, .plates { grid-template-columns: 1fr; } .brick { grid-template-columns: 1fr; gap: 12px; } .brick__n { font-size: 2.2rem; } .hero__strip { grid-template-columns: repeat(2, 1fr); } .hero__stat:nth-child(3) { border-left: 0; } .hero__stat:nth-child(n+3) { border-top: var(--rule); } .manifesto__grid, .split, .join__inner, .cards { grid-template-columns: 1fr; } .split--flip .split__media { order: 0; } .split__media { aspect-ratio: 16/10; } .foot__grid { grid-template-columns: 1fr 1fr; } .shot--a, .shot--b, .shot--wide, .shot--half { grid-column: span 12; } .shot--wide { aspect-ratio: 2/1; } .shot--half { aspect-ratio: 16/10; } .shot--c, .shot--d, .shot--e { grid-column: span 12; aspect-ratio: 16/10; } } @media (max-width: 720px) { /* ------------------------------------------------------------------------ HERO MOBILE — la machine au-dessus, le texte en dessous. En plein écran portrait, une photo de moto au ratio 3:1 recadrée en « cover » ne montre qu'une tranche de carrosserie : le sujet disparaît et le titre se lit sur un fond illisible. On empile donc : bande image où la machine tient entière, puis texte sur noir franc. ------------------------------------------------------------------------ */ .hero { min-height: 0; display: block; } .hero__media { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.09); } .hero__media img, .hero__media video { object-position: center 48%; } /* Fondu vers le bas uniquement, pour souder l'image au bloc de texte */ .hero__media::after { background: linear-gradient(180deg, rgba(10,12,13,.28) 0%, rgba(10,12,13,0) 34%, rgba(10,12,13,.95) 100%); } .hero__inner { margin-top: 0; padding-top: clamp(26px, 6vw, 38px); padding-bottom: clamp(30px, 7vw, 44px); } .hero__eyebrow { margin-bottom: 16px; } .hero h1 { max-width: none; } .hero__sub { margin-top: 20px; } .hero__cta { margin-top: 28px; gap: 10px; } .hero__cta .btn { flex: 1 1 100%; justify-content: center; } /* Les quatre chiffres en 2 x 2 : quatre lignes empilées faisaient défiler un écran entier pour quatre valeurs. */ .hero__strip { grid-template-columns: 1fr 1fr; } .hero__stat { border-left: 0; border-top: var(--rule); padding: 16px 18px 18px; } .hero__stat:nth-child(2n) { border-left: var(--rule); } .hero__stat:nth-child(-n+2) { border-top: 0; } .hero__stat b { font-size: 1.5rem; } .hero__stat span { font-size: .84rem; } .burger { display: block; } .nav__links { position: fixed; inset: 0; flex-direction: column; justify-content: center; align-items: flex-start; gap: 26px; padding: 0 var(--gut); background: var(--void); transform: translateY(-100%); transition: transform .5s var(--ease); z-index: -1; } body.menu-open .nav__links { transform: none; } body.menu-open { overflow: hidden; } .nav__link { font-size: 1.5rem; font-family: var(--f-display); font-stretch: 112%; letter-spacing: .02em; } /* Le bandeau de chiffres garde ses deux colonnes, réglées plus haut : quatre lignes empilées faisaient défiler un écran entier pour quatre valeurs. Ne pas le remettre sur une colonne. */ .pillars, .specs, .gains, .probs, .team { grid-template-columns: 1fr; } .form__row { flex-direction: column; } .foot__grid { grid-template-columns: 1fr; } }