/* ========================================================================== FAB — Hero « offres volantes » (DA 2026-08, v4 — gabarit φ³ 2026-08-08) Carte d'ambiance fondue haut/bas + 6 QuoteCards de l'app qui flottent ; les yeux ne vivent qu'UNE fois (lockup géant). Cartes = réplique de components/dev/QuoteCard.tsx (typo système) ; seule la COMPOSITION est scénographiée, le GABARIT suit φ³ (cf. .oc). Chargée par les 10 homes uniquement. Scène role="img", intérieur aria-hidden. Espacements de la feuille : échelle φ (WEB-DESIGN-GUIDELINES.md §9). ========================================================================== */ /* ---- Scène ---- */ /* overflow-x: clip UNIQUEMENT — les cartes basses peuvent déborder en douceur dans la section suivante (plus jamais de tranche nette), les bleeds latéraux restent clippés. */ .hero-scene { position: relative; overflow-x: clip; padding: calc(var(--nav-h) + 55px) 0 68px; min-height: clamp(680px, 94vh, 900px); display: flex; align-items: center; --edge: clamp(21px, 5vw, 89px); } /* Hero CENTRÉ (fondateur 2026-08-08) : le bloc texte au milieu, les offres volent autour. */ .hero-scene .hero-grid { position: relative; z-index: 2; width: 100%; grid-template-columns: minmax(0, 1fr); justify-items: center; } .hero-scene .hero-copy { max-width: 820px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; } .hero-stage { position: absolute; inset: 0; z-index: 0; } /* La carte du hero EST le calque .jl-paris du théâtre (voyage 2026-08-10) : plus d'image propre ici — le dézoom commence dès le premier cran de molette. */ /* scrim : voile global léger + crème sous la colonne texte (AA) + fondu haut ; lui-même éteint en bas APRÈS la carte (les deux fondus se relaient). */ /* scrim RADIAL centré (hero centré → symétrique, plus besoin d'override RTL) */ .hero-stage::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 58% 60% at 50% 46%, rgba(244,237,220,.95) 0%, rgba(244,237,220,.8) 46%, rgba(244,237,220,0) 74%), linear-gradient(rgba(244,237,220,.38), rgba(244,237,220,.38)); -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 80%, transparent 100%); } .stage-ui { position: relative; z-index: 2; height: 100%; } /* ---- Bloc texte étalé (le hero respire, les offres volent autour) ---- Espacements verticaux du bloc sur la gamme φ : 13 / 21 / 34 / 55. */ /* Lockup DIALOGUE v2 (fondateur 2026-08-08 : « le petit dialogue que Fab dit, pas mal » — concept gardé, exécution refaite ; « The Finest Cab » RETIRÉ du hero, inutile ici). Les yeux disent « Un trajet, » dans une VRAIE bulle comic (grosse, queue franche vers les yeux, posée haut-droite du sticker), et « Fab. » énorme répond juste dessous. */ .hero-scene .lockup { flex-direction: column; align-items: center; gap: 5px; margin: 0; } .hero-scene .lockup-say { display: flex; align-items: flex-start; } .hero-scene .lockup .js-eyes-img .fab-eyes { width: clamp(121px, 14.5vw, 189px); } .hero-scene .lockup-bubble { position: relative; margin-inline-start: 13px; margin-top: -8px; font-family: var(--fd); font-weight: 700; color: #fff; background: var(--blue); font-size: clamp(1.625rem, 3.4vw, 3.4375rem); line-height: 1; letter-spacing: -.02em; padding: 16px 34px 19px; border-radius: 34px; transform: rotate(-2deg); box-shadow: 0 3px 6px rgba(32,29,21,.12), 0 21px 42px -16px rgba(34,68,204,.5); } .hero-scene .lockup-bubble::after { content: ''; position: absolute; bottom: -9px; inset-inline-start: 26px; width: 22px; height: 22px; background: inherit; transform: rotate(45deg) skew(6deg, 6deg); border-radius: 0 0 6px 0; } [dir="rtl"] .hero-scene .lockup-bubble { transform: rotate(2deg); } .hero-scene .lockup-line { font-size: clamp(3.4375rem, 8.6vw, 8.125rem); line-height: .95; } .hero-scene .lockup-tag { font-size: clamp(1.3125rem, 2vw, 1.625rem); } /* H1 = panneau d'arrière-plan (2026-08-09) : le dialogue yeux → « Un trajet, » → « Fab. » reste seul au premier plan ; « Le comparateur VTC. » devient le billboard pâle DERRIÈRE la scène (SEO intact, couloir central sans cartes). */ /* v4 (2026-08-09) : la bulle dit « Un trajet, Fab. » d'un bloc, et le H1 « Le comparateur VTC. » devient LA ligne géante — bleu PLEIN, en flux. */ .hero-scene .hero-h1 { position: static; width: auto; margin: 34px 0 0; text-align: center; font-family: var(--fd); font-weight: 800; font-size: min(7.4vw, 105px); line-height: 1.02; letter-spacing: -.02em; color: var(--blue); white-space: nowrap; } .hero-scene .hero-h1 .grad-text { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: currentColor; color: inherit; } .hero-scene .hero-h1--multi { white-space: normal; text-wrap: balance; max-width: 24ch; margin-inline: auto; font-size: min(4vw, 55px); line-height: 1.06; } /* 🚨 LA LIGNE GÉANTE EST EN `nowrap` : elle ne se replie jamais, elle SORT de l'écran. Le français tient (19 signes), pas l'arabe (33), ni le néerlandais (34) — mesuré à 1024, 1280 et 1440 px, la ligne était coupée des deux côtés. Chaque langue garde donc UNE ligne, à sa propre taille : c'est le rapport signes/largeur qui change, pas le dessin. Le turc, lui, ne rentrait à aucune taille lisible : son H1 reprend le terme plus court de son propre . */ html[lang="ar"] .hero-scene .hero-h1 { font-size: min(6.7vw, 98px); } html[lang="nl"] .hero-scene .hero-h1 { font-size: min(6.4vw, 92px); } html[lang="tr"] .hero-scene .hero-h1 { font-size: min(6.6vw, 96px); } /* stores grossis (fondateur 2026-08-09) */ .hero-scene .store-badge { padding: 14px 26px; border-radius: 18px; } .hero-scene .store-badge svg { width: 31px; height: 31px; } .hero-scene .store-badge .sb-t small { font-size: .72rem; } .hero-scene .store-badge .sb-t span { font-size: 1.25rem; } .hero-scene .lockup, .hero-scene .bubble-cloud, .hero-scene .hero-cta { position: relative; z-index: 1; } @media (max-width: 960px) { .hero-scene .hero-h1, .hero-scene .hero-h1--multi { position: static; width: auto; white-space: normal; text-wrap: balance; pointer-events: auto; max-width: none; font-size: clamp(1.75rem, 8.5vw, 2.5rem); line-height: 1.1; letter-spacing: -.016em; color: var(--blue); -webkit-text-stroke: 0; margin: 13px 0 0; } } .hero-scene .lead { max-width: 44ch; font-size: clamp(1.0625rem, 1.8vw, 1.625rem); margin-inline: auto; margin-bottom: 5px; } /* nuage de verbes plus large, bulles réparties (pas un tas serré) */ /* « ça fait un peu trop condensé » (Alex, 2026-08-12) : la gouttière passe de 13 à 21 px entre les pills et de 21 à 26 px entre les rangées, et le nuage s'élargit d'autant pour garder son pliage 3 + 2. */ .hero-scene .bubble-cloud { max-width: 686px; gap: 26px 21px; margin: 55px auto 55px; justify-content: center; } .hero-scene .bubble-cloud .bubble:nth-child(1) { transform: rotate(-2deg) translateY(2px); } .hero-scene .bubble-cloud .bubble:nth-child(2) { transform: rotate(1.7deg) translateY(-5px); } .hero-scene .bubble-cloud .bubble:nth-child(3) { transform: rotate(2.4deg) translateY(3px); } .hero-scene .bubble-cloud .bubble:nth-child(4) { transform: rotate(-1.8deg) translateY(-4px); } .hero-scene .bubble-cloud .bubble:nth-child(5) { transform: rotate(-1.4deg) translateY(2px); } /* 🚨 Les cinq verbes ne sont plus des liens (décision Alex 2026-08-12 : « les chemins des pills, peut-être même inutile »). Les cinq cartes qu'ils visaient sont consécutives, 700 px plus bas : le saut atterrissait au milieu d'une suite qui se lit 1 → 5, sur une carte identique à sa voisine. Les MOTS restent, ils disent ce que Fab fait. Les 8 homes localisées n'ont d'ailleurs JAMAIS eu ces liens : ce sont FR et EN qui faisaient exception. Donc plus aucune affordance de bouton : chaque pill garde son inclinaison au survol, et le curseur reste une flèche. Un objet qui ressemble à un bouton sans en être un est pire qu'un lien inutile. ↩︎ Pour rétablir la navigation : remettre <a href="#choisis"> … dans les deux homes (les cartes ont gardé leurs ancres) et supprimer ce bloc. */ .hero-scene .bubble-cloud .bubble { cursor: default; } .hero-scene .bubble-cloud .bubble:hover { box-shadow: none; } .hero-scene .bubble-cloud .bubble:nth-child(1):hover { transform: rotate(-2deg) translateY(2px); } .hero-scene .bubble-cloud .bubble:nth-child(2):hover { transform: rotate(1.7deg) translateY(-5px); } .hero-scene .bubble-cloud .bubble:nth-child(3):hover { transform: rotate(2.4deg) translateY(3px); } .hero-scene .bubble-cloud .bubble:nth-child(4):hover { transform: rotate(-1.8deg) translateY(-4px); } .hero-scene .bubble-cloud .bubble:nth-child(5):hover { transform: rotate(-1.4deg) translateY(2px); } /* stores + réassurance : une seule ligne calme */ .hero-scene .hero-cta { flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 26px; } /* ---- Base mock : typo système de l'app (PAS Baloo/Outfit) ---- */ .mock { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #17181C; -webkit-font-smoothing: antialiased; } /* ---- Carte d'offre (réplique QuoteCard.tsx — ne pas retoucher l'intérieur sans re-vérifier l'app) ---- GABARIT φ³ (fondateur 2026-08-08, fini le format trapu) : 466×110 px = ratio 4,24 ≈ φ³, Fibonacci pur (466 = 377+89 ; 110 = 89+21). Padding 13/21, gap voiture-texte 13, radius 21, interlignes compacts type app (le 1.6 hérité du body gonflait la carte — RN est ~1.2). L'INTÉRIEUR reste app-fidèle, PAS φ-isé : polices 13/15/16.5/24, couleurs, formats de prix (« 14.35€ » / « 18,93 € » / « 14–31€ »), icônes. Fond #F8F9FA (PAS blanc), badges AU-DESSUS de la voiture (Promo #EFF6FF/#1D4ED8 ; « Le moins cher » #D1FAE5/#065F46), meta sur CHAQUE carte, prix promo #2563EB + barré gris. Hauteur UNIQUE 110px avec ou sans badges (règle fondateur) : les badges s'absorbent dans le gabarit, JAMAIS ne l'agrandissent — sans badges le corps se centre dans le même gabarit. */ .oc { background: #F8F9FA; border-radius: 21px; padding: 13px 21px; min-height: 110px; display: flex; flex-direction: column; justify-content: center; line-height: 1.25; } .oc-tags { display: flex; gap: 5px; margin: 0 0 8px 2px; } .oc-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px; font-size: 13px; font-weight: 700; letter-spacing: -.1px; line-height: 1.15; } .oc-tag svg { width: 12px; height: 12px; flex-shrink: 0; } .oc-tag-cheap { color: #065F46; background: #D1FAE5; } .oc-tag-promo { color: #1D4ED8; background: #EFF6FF; } .oc-row { display: flex; align-items: center; gap: 13px; } .oc-car { width: 78px; height: 52px; flex-shrink: 0; object-fit: contain; } .oc-info { flex: 1; min-width: 0; } .oc-title { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; overflow: hidden; } .oc-prov { font-size: 15px; font-weight: 500; color: #8E8E93; letter-spacing: -.25px; } .oc-dot { font-size: 13px; color: #9CA3AF; } .oc-type { font-size: 16.5px; font-weight: 700; color: #1C1C1E; letter-spacing: -.3px; } .oc-pax { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 14px; font-weight: 500; color: #6B7280; white-space: nowrap; } .oc-pax svg { width: 15px; height: 15px; flex-shrink: 0; } .oc-sep { color: #9CA3AF; margin: 0 1px; } .oc-price { font-size: 24px; font-weight: 700; color: #000; letter-spacing: -.55px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: end; line-height: 1.15; } .oc-price--promo { color: #2563EB; } .oc-old, .oc-range { display: block; font-size: 15px; font-weight: 400; color: #8E8E93; text-align: end; letter-spacing: 0; margin-top: 1px; line-height: 1.2; } .oc-old { text-decoration: line-through; } /* ---- Offres volantes : UNE seule taille de carte (466 px, pixel-identiques). La profondeur ne vient JAMAIS de la taille : uniquement chevauchements, ombres étagées, angles ±2-3° et opacité/flou léger sur les 2 lointaines. Ombres layered teintées : contact encre chaude + ambiante bleue. Positions recomposées pour le gabarit φ³ : ancres Fibonacci (top nav+21/ 89/144, bottoms 55/178, offsets +144/+233, gaps inter-cartes 13). */ .mock-float { position: absolute; width: 466px; --rot: 0deg; --tx: 0px; transform: translateX(var(--tx)) rotate(var(--rot)); direction: ltr; } .mock-float .oc { box-shadow: 0 2px 4px rgba(32,29,21,.1), 0 26px 52px -20px rgba(25,44,134,.34); } /* vedette (Uber X — Promo + « Le moins cher ») */ /* Hero centré : 3 cartes à gauche (heetch, comin, bolt), 3 à droite (uberx, ubergreen, freenow), bleeds hors-viewport assumés. TOUTES à opacity 1 (fondateur 2026-08-08 : rien ne doit se lire à travers) — la profondeur = ombres + blur léger + z-index. */ .mock-float-uberx { top: calc(var(--nav-h) + 89px); inset-inline-end: calc(var(--edge) - 13px); --rot: -2.2deg; z-index: 6; } .mock-float-uberx .oc { box-shadow: 0 2px 5px rgba(32,29,21,.12), 0 36px 70px -24px rgba(25,44,134,.42); } /* pile de résultats : Uber Electric glisse PAR-DESSUS le coin vide de la vedette (z 7 > 6 : son prix reste entier, le coin recouvert est du padding) */ .mock-float-ubergreen { top: calc(var(--nav-h) + 293px); inset-inline-end: calc(var(--edge) - 34px); --rot: 2.2deg; z-index: 7; } .mock-float-freenow { bottom: 55px; inset-inline-end: calc(var(--edge) - 13px); --rot: -1.8deg; z-index: 4; } .mock-float-bolt { bottom: 21px; inset-inline-start: calc(var(--edge) - 13px); --rot: 2.6deg; z-index: 5; } /* plans lointains : estompe + flou léger (jamais un scale) */ .mock-float-heetch { top: calc(var(--nav-h) + 21px); inset-inline-start: calc(var(--edge) - 13px); --rot: 1.6deg; z-index: 3; filter: blur(.5px); } .mock-float-heetch .oc { box-shadow: 0 1px 3px rgba(32,29,21,.08), 0 18px 38px -16px rgba(25,44,134,.26); } .mock-float-comin { top: calc(var(--nav-h) + 233px); inset-inline-start: -34px; --rot: -2.6deg; z-index: 2; filter: blur(.9px); } .mock-float-comin .oc { box-shadow: 0 1px 3px rgba(32,29,21,.07), 0 14px 30px -14px rgba(25,44,134,.22); } /* flottement très lent, 3 cartes max, transform-only, gaté reduced-motion */ @media (prefers-reduced-motion: no-preference) { .mock-float-uberx { animation: mock-floaty 8s ease-in-out infinite; } .mock-float-bolt { animation: mock-floaty 9s ease-in-out infinite; animation-delay: -3.2s; } .mock-float-heetch { animation: mock-floaty 10s ease-in-out infinite; animation-delay: -5.4s; } } @keyframes mock-floaty { 0%, 100% { transform: translateX(var(--tx)) rotate(var(--rot)) translateY(0); } 50% { transform: translateX(var(--tx)) rotate(var(--rot)) translateY(-7px); } } /* ---- RTL (/ar/) : miroir logique de la scène ---- Les cartes sont direction:ltr (contenu app) : leurs inset-inline-* se résolvent contre ELLES-MÊMES (inline-end = droite physique). En RTL on bascule sur inline-start (= gauche physique) : offres à gauche, texte à droite. La carte de fond reste LTR (décision charte). */ /* RTL : hero centré symétrique + propriétés logiques → miroir automatique, plus d'overrides. */ /* ---- Responsive ---- */ /* <1320 (v5 2026-08-09) : plus AUCUN bleed ni chevauchement — une carte coupée « sort de l'écran » (fondateur). Pas la place pour des cartes entières SANS marcher sur le texte → scène nue (carte + billboard) ; la pile reprend ≤1019. */ @media (max-width: 1319px) { .mock-float { display: none; } .hero-scene .hero-copy { max-width: 640px; } } /* <=1019 : pile — texte aéré, puis 3 offres en éventail ; carte = ambiance */ @media (max-width: 1019px) { .hero-scene { display: block; min-height: 0; padding-bottom: 55px; } .hero-scene .hero-grid { grid-template-columns: 1fr; } .hero-scene .hero-copy { max-width: none; } .hero-stage { position: static; } .hero-stage::before, [dir="rtl"] .hero-stage::before { background: linear-gradient(rgba(244,237,220,.66), rgba(244,237,220,.66)); } .stage-ui { height: auto; padding-top: 42px; } .mock-float, [dir="rtl"] .mock-float { display: block; position: relative; top: auto; bottom: auto; inset-inline: auto; width: min(466px, calc(100% - 10px)); margin: 0 auto; opacity: 1; filter: none; } .mock-float-heetch, [dir="rtl"] .mock-float-heetch, .mock-float-freenow, [dir="rtl"] .mock-float-freenow { display: none; } .mock-float-uberx { --rot: -1.6deg; --tx: -13px; z-index: 3; } .mock-float-ubergreen { --rot: 1.9deg; --tx: 13px; margin-top: -5px; z-index: 2; } .mock-float-bolt { --rot: -1.3deg; --tx: -8px; margin-top: -5px; z-index: 1; } [dir="rtl"] .mock-float-uberx { --tx: 13px; } [dir="rtl"] .mock-float-ubergreen { --tx: -13px; } [dir="rtl"] .mock-float-bolt { --tx: 8px; } } @media (max-width: 430px) { .mock-float, [dir="rtl"] .mock-float { width: calc(100% - 8px); } /* sous ~400px, le padding-inline retombe à 13 : « Comin · Comin » + « 14,75–31,00€ » restent entiers, jamais tronqués */ .oc { padding-inline: 13px; } .mock-float-uberx { --tx: -5px; } .mock-float-ubergreen { --tx: 8px; } .mock-float-bolt { --tx: -3px; } [dir="rtl"] .mock-float-uberx { --tx: 5px; } [dir="rtl"] .mock-float-ubergreen { --tx: -8px; } [dir="rtl"] .mock-float-bolt { --tx: 3px; } } /* ---- Yeux officiels (sticker) : une seule fois, dans le lockup ---- */ .brand-eyes-img { filter: drop-shadow(0 2px 3px rgba(32,29,21,.18)); } .js-eyes-img { display: block; will-change: transform; }