/* ============================================================================ YUSU.PRO — le site des pros (yusu.pro). La vraie page qui remplace la page d'attente de YUSU.PRO/landing. LA DA EST CELLE DE LA LANDING DE YUSU.IO, À L'IDENTIQUE : la nuit brune #1A130E, le papier #F4F1EA, la crème, et UN SEUL ORANGE (oklch 0.58 0.14 45) pour ce qui appelle. Schibsted Grotesk 900 en capitales pour signer, Manrope pour tout le reste. Les boutons sont des capsules, comme ceux de yusu.io : les deux sites se reconnaissent sans porter le même logo. LES ÉCRANS SONT LES VRAIS : YUSU.PRO, YUSU.POS et YUSU Entry photographiés en maquette (données de démonstration), jamais redessinés. Ce qui bouge autour d'eux (la lumière, les notifications, le viseur de la porte) est la scène, pas l'app. LE MOUVEMENT INFORME AVANT DE DÉCORER : une arrivée par bloc, des séquences qui rejouent les vrais gestes (trois appuis à la caisse, un scan à la porte), et tout s'arrête net sous prefers-reduced-motion. ============================================================================ */ @font-face { font-family: 'Schibsted Grotesk'; src: url(../fonts/schibsted-grotesk-latin-wght-normal.woff2) format('woff2'); font-weight: 400 900; font-display: swap; } @font-face { font-family: 'Manrope'; src: url(../fonts/manrope-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Manrope'; src: url(../fonts/manrope-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Manrope'; src: url(../fonts/manrope-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Manrope'; src: url(../fonts/manrope-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Manrope'; src: url(../fonts/manrope-latin-800-normal.woff2) format('woff2'); font-weight: 800; font-display: swap; } :root { /* ── La matière (landing de yusu.io) ── */ --night: #1A130E; --night-deep: #120D0A; /* la salle : caisse et porte, là où les écrans de l'app vivent */ --app-night: #0E0B09; /* le fond de l'app de nuit, pour cadrer ses écrans */ --paper: #F4F1EA; --surface: #FFFFFF; --ink: #1A130E; --ink-2: rgba(26, 19, 14, .64); --ink-3: rgba(26, 19, 14, .46); --line: rgba(26, 19, 14, .10); --cream: #FBF7F1; --cream-2: rgba(251, 247, 241, .70); --cream-3: rgba(251, 247, 241, .50); --cream-line: rgba(251, 247, 241, .13); --cream-fill: rgba(251, 247, 241, .07); /* UN SEUL ORANGE. Ses teintes transparentes font les halos ; jamais un dégradé de bouton. */ --orange: oklch(0.58 0.14 45); --acc: var(--orange); --on-acc: #fff; /* Les deux verdicts de la porte, repris de YUSU Entry : ils ne servent qu'à ce qu'Entry dit. */ --ok: oklch(0.76 0.13 152); --no: oklch(0.66 0.16 30); --display: 'Schibsted Grotesk', system-ui, sans-serif; --body: 'Manrope', system-ui, sans-serif; --system: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif; --r-btn: 999px; --r-card: 18px; --r-big: 28px; --gutter: clamp(16px, 4vw, 40px); --max: 1240px; --hdr: 72px; --sec-y: clamp(88px, 13vw, 168px); /* Les temps et les courbes de l'app */ --curve: cubic-bezier(.32, .72, 0, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); --out: cubic-bezier(.16, 1, .3, 1); --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } @media (max-width: 760px) { :root { --hdr: 62px; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: var(--night); } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } body { margin: 0; background: var(--night); color: var(--cream); font: 500 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } img, picture, video, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } h1, h2, h3, h4, p, ul, ol, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 8px; } ::selection { background: var(--acc); color: #fff; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: fixed; z-index: 200; top: 10px; left: 10px; padding: 10px 16px; border-radius: var(--r-btn); background: var(--cream); color: var(--ink); font-weight: 700; transform: translateY(-160%); transition: transform .3s var(--curve); } .skip:focus { transform: none; } /* ── Les briques ─────────────────────────────────────────────────────────── */ .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } .sec { position: relative; padding: var(--sec-y) 0; } /* Rien ne déborde sur le côté : une carte qui entre en glissant ne doit pas élargir la page au téléphone. « clip » et non « hidden » : aucun conteneur de défilement n'est créé, les éléments collants tiennent. */ main > section, main > div, .foot { overflow-x: clip; } .s-night { background: var(--night); color: var(--cream); } .s-deep { background: var(--night-deep); color: var(--cream); } .s-paper { background: var(--paper); color: var(--ink); } .grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); opacity: .07; mix-blend-mode: overlay; z-index: 1; } .grain > * { position: relative; z-index: 2; } .display { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -.035em; line-height: .9; } .h2 { font-size: clamp(38px, 6.4vw, 92px); } /* Les masques des titres qui montent (SplitText) coupent en « overflow: clip » : sans cet air au-dessus, ils rognent les accents des capitales (PREMIÈRE, S'ARRÊTE). L'air est rendu par une marge négative : la ligne ne bouge pas d'un pixel. */ .display div[style*="overflow: clip"] { padding: .16em .05em 0; margin: -.16em -.05em 0; } .lead, .ch-body p, .feat p, .three p, .stop p, .seg-panel p, .price p { text-wrap: pretty; } .hero .lead, .sec-head.center .lead, .demo .lead { text-wrap: balance; } .h2-sm { font-size: clamp(32px, 4.6vw, 64px); } .acc { color: var(--acc); } .lead { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.6; max-width: 36em; } .s-night .lead, .s-deep .lead { color: var(--cream-2); } .s-paper .lead { color: var(--ink-2); } .lead strong { font-weight: 700; } .s-night .lead strong, .s-deep .lead strong { color: var(--cream); } .s-paper .lead strong { color: var(--ink); } .kicker { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 22px; } .kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 4px color-mix(in oklch, var(--acc) 22%, transparent); } .s-night .kicker, .s-deep .kicker { color: var(--cream-2); } .s-paper .kicker { color: var(--ink-2); } .sec-head { margin-bottom: clamp(44px, 6vw, 80px); } .sec-head .h2 { margin-bottom: clamp(18px, 2.4vw, 28px); } .sec-head.center { text-align: center; display: grid; justify-items: center; } .sec-head.center .lead { margin: 0 auto; } /* Les étiquettes d'app : un nom, une couleur de point, jamais une autre teinte */ .tag { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: var(--r-btn); font: 800 11.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; } .tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .s-night .tag, .s-deep .tag { background: var(--cream-fill); box-shadow: inset 0 0 0 1px var(--cream-line); color: var(--cream); } .s-paper .tag { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); } .tag.t-pro::before { background: var(--acc); } .tag.t-pos::before { background: #dba63f; } .tag.t-entry::before { background: var(--ok); } .tag.t-io::before { background: var(--cream-3); } .s-paper .tag.t-io::before { background: var(--ink-3); } /* ── Les boutons : des capsules, comme sur yusu.io ── */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px; border: 0; border-radius: var(--r-btn); font: 700 16px/1 var(--body); white-space: nowrap; cursor: pointer; transition: transform .35s var(--curve), background .25s, box-shadow .35s var(--curve); will-change: transform; } .btn:active { transform: scale(.97); } .btn svg { width: 18px; height: 18px; flex: none; transition: transform .35s var(--curve); } .btn:hover svg { transform: translateX(3px); } .btn-accent { background: var(--acc); color: var(--on-acc); box-shadow: 0 14px 34px -16px color-mix(in oklch, var(--acc) 85%, transparent); } .btn-accent:hover { box-shadow: 0 18px 44px -14px color-mix(in oklch, var(--acc) 95%, transparent); } .btn-light { background: var(--cream); color: var(--ink); } .btn-ghost { background: var(--cream-fill); color: var(--cream); box-shadow: inset 0 0 0 1px var(--cream-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .btn-ghost:hover { background: rgba(251, 247, 241, .12); } .btn-ink { background: var(--ink); color: var(--cream); } .btn-sm { height: 42px; padding: 0 18px; font-size: 15px; } .ctas { display: flex; flex-wrap: wrap; gap: 12px; } .link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; } .link svg { width: 16px; height: 16px; transition: transform .35s var(--curve); } .link:hover svg { transform: translateX(4px); } .ico { width: 20px; height: 20px; flex: none; } /* Les arrivées : une par bloc, jamais deux qui se croisent */ .js [data-rv] { opacity: 0; transform: translateY(28px); } .js .no-motion [data-rv], .reduced [data-rv] { opacity: 1 !important; transform: none !important; } /* ── La barre (reprise du premier site) ───────────────────────────────────── Au repos : transparente, pleine largeur, posée sur la nuit du héros. Posée (au premier défilement) : elle se détache du bord de 12 px, grandit de 16 px vers l'extérieur — le contenu ne bouge pas d'un pixel —, prend un verre fumé, un filet et une lueur orange dessous ; un faisceau parcourt son arête basse UNE fois. La lumière marque un évènement, elle ne meuble pas. */ .logo { display: inline-flex; align-items: baseline; font: 800 26px/1 var(--body); letter-spacing: -.035em; color: var(--cream); flex: none; } .logo small { font: 800 12.5px/1 var(--display); letter-spacing: .1em; color: var(--acc); margin-left: 5px; } .hdr { position: fixed; inset: 0 0 auto 0; z-index: 90; pointer-events: none; } .bar-track { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } .bar { position: relative; pointer-events: auto; display: flex; align-items: center; gap: 24px; height: var(--hdr); margin-top: 0; padding: 0; border: 1px solid transparent; border-radius: 0; transition: height .3s var(--out), margin .3s var(--out), padding .3s var(--out), border-radius .3s var(--out), background-color .3s var(--out), border-color .3s var(--out), box-shadow .3s var(--out); } .hdr.posed .bar { height: 60px; margin: 12px -16px 0; padding: 0 12px 0 16px; border-radius: 16px; border-color: var(--cream-line); background-color: rgba(26, 19, 14, .78); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 44px -20px color-mix(in oklch, var(--orange) 55%, transparent); } .hdr.open .bar { background-color: rgba(26, 19, 14, .94); } /* l'arête basse de la vitre, et le faisceau qui la parcourt à chaque fois qu'elle se pose */ .bar-edge { position: absolute; left: 16px; right: 16px; bottom: -1px; height: 1px; overflow: hidden; opacity: 0; background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--orange) 55%, transparent), transparent); transition: opacity .3s; pointer-events: none; } .hdr.posed .bar-edge { opacity: 1; } .bar-edge i { position: absolute; top: 0; left: 0; width: 25%; height: 1px; background: linear-gradient(90deg, transparent, #fff, transparent); opacity: 0; } .hdr.posed .bar-edge i { animation: beam .9s var(--out) 1 both; } @keyframes beam { from { transform: translateX(-130%); opacity: 0; } 25% { opacity: 1; } to { transform: translateX(430%); opacity: 0; } } /* Le logo : le « y » néon dans sa plaque, et le mot */ .brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; flex: none; border-radius: 10px; } .brand-plate { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--cream-fill); box-shadow: inset 0 0 0 1px var(--cream-line), 0 1px 2px rgba(0, 0, 0, .3); overflow: hidden; } .brand-plate::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 118%, color-mix(in oklch, var(--orange) 55%, transparent), transparent 72%); opacity: .6; transition: opacity .25s; } .brand:hover .brand-plate::before { opacity: 1; } .brand-y { position: relative; width: 16px; height: 22px; color: var(--cream); overflow: visible; } .brand-y .y-glow { filter: blur(4px); opacity: .55; stroke: color-mix(in oklch, var(--orange) 70%, #fff); } .brand-word { display: inline-flex; align-items: baseline; font: 700 17px/1 var(--display); letter-spacing: .06em; color: var(--cream); } .brand-word small { margin-left: 6px; font: 800 10.5px/1 var(--display); letter-spacing: .14em; color: var(--acc); } /* Les menus : un curseur de survol qui glisse (UN bloc, pas quatre fonds), et le filet de la section en cours */ .nav { position: relative; margin: 0 auto; } .nav-list { position: relative; display: flex; align-items: center; } .nav-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 13px; border: 0; border-radius: 10px; background: none; color: var(--cream-2); font: 600 14.5px/1 var(--body); cursor: pointer; transition: color .15s; } .nav-btn:hover, .nav-btn[aria-expanded="true"], .nav-btn.is-current { color: var(--cream); } .nav-btn .chev { width: 14px; height: 14px; transition: transform .25s var(--out); } .nav-btn[aria-expanded="true"] .chev { transform: rotate(180deg); } .nav-cursor { position: absolute; z-index: 0; top: 0; left: 0; height: 44px; border-radius: 10px; background: var(--cream-fill); opacity: 0; pointer-events: none; transition: transform .25s var(--curve), width .25s var(--curve), opacity .2s; } .nav-line { position: absolute; z-index: 2; left: 0; bottom: -2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--acc), transparent); box-shadow: 0 0 12px color-mix(in oklch, var(--orange) 70%, transparent); opacity: 0; pointer-events: none; transition: transform .35s var(--curve), width .35s var(--curve), opacity .3s; } /* Les actions : Connexion reste muette, une seule a du volume */ .bar-actions { display: flex; align-items: center; gap: 8px; flex: none; } .bar-login { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; font: 600 14.5px/1 var(--body); color: var(--cream-2); transition: background .15s, color .15s; } .bar-login:hover { background: var(--cream-fill); color: var(--cream); } .bar-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; background: var(--cream); color: var(--ink); font: 700 14.5px/1 var(--body); box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 20px -10px rgba(0, 0, 0, .5); transition: transform .09s var(--curve), box-shadow .2s; } .bar-cta:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -10px color-mix(in oklch, var(--orange) 80%, transparent); } .bar-cta:active { transform: scale(.97); } .burger { display: none; position: relative; width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; cursor: pointer; flex: none; } .burger:hover { background: var(--cream-fill); } .burger span { position: absolute; left: 12px; width: 20px; height: 2px; border-radius: 2px; background: var(--cream); transition: transform .4s var(--curve), top .4s var(--curve); } .burger span:first-child { top: 17px; } .burger span:last-child { top: 25px; } .burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); } .burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); } /* ── Les panneaux : ancrés sous la rangée de menus, pas sous la barre (elle change de hauteur) ── */ .mp { position: absolute; z-index: 5; top: calc(100% + 16px); left: 50%; width: min(60rem, calc(100vw - 2rem)); padding: 24px; border-radius: 22px; background: #221A14; color: var(--cream); box-shadow: inset 0 0 0 1px var(--cream-line), 0 30px 80px -24px rgba(0, 0, 0, .85); transform: translateX(-50%); } .mp[hidden] { display: none; } .mp.mp-wide { width: min(76rem, calc(100vw - 2rem)); } .mp.mp-narrow { width: min(26rem, calc(100vw - 2rem)); } .mp.enter { animation: mp-in .28s var(--out) both; } @keyframes mp-in { from { opacity: 0; transform: translate(-50%, -8px); } } .mp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.12fr); gap: 8px 22px; } .mp-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 700 11.5px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--cream-3); } .mp-h span { color: var(--acc); } .mp-col ul { display: grid; } .mp-col a, .mp-res a { display: grid; gap: 3px; margin: 0 -10px; padding: 9px 10px; border-radius: 12px; transition: background .15s; } .mp-col a:hover, .mp-res a:hover, .mp-col a:focus-visible, .mp-res a:focus-visible { background: var(--cream-fill); } .mp-col b, .mp-res b { font: 700 14.5px/1.25 var(--body); color: var(--cream); } .mp-col small, .mp-res small { font: 500 12.5px/1.35 var(--body); color: var(--cream-2); } .mp-apps { margin: -8px -8px -8px 0; padding: 16px; border-radius: 16px; background: rgba(251, 247, 241, .045); box-shadow: inset 0 0 0 1px var(--cream-line); } .mp-apps ul { gap: 4px; } .mp-apps a { gap: 7px; } .mp-apps .tag { justify-self: start; height: 24px; font-size: 10.5px; background: var(--cream-fill); box-shadow: inset 0 0 0 1px var(--cream-line); color: var(--cream); } .mp-foot { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cream-line); font-size: 14.5px; } .mp-foot .link { color: var(--cream); } .mp-sects { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .mp-sect { display: grid; gap: 4px; align-content: start; padding: 8px; border-radius: 16px; transition: background .15s; } .mp-sect:hover, .mp-sect:focus-visible { background: var(--cream-fill); } .mp-thumb { display: block; aspect-ratio: 4 / 3; margin-bottom: 8px; border-radius: 12px; overflow: hidden; background: #120D0A; } .mp-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--out); } .mp-sect:hover .mp-thumb img { transform: scale(1.06); } .mp-sect b { font: 700 14.5px/1.25 var(--body); } .mp-sect small { font: 500 12.5px/1.35 var(--body); color: var(--cream-2); } .mp-res { display: grid; } /* Ressources : une icône, puis le titre sur sa légende. Ici et pas dans pages.css, que l’accueil ne charge pas. */ .mp-res a { display: flex; gap: 12px; align-items: flex-start; } .mp-res .mp-ico { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--acc); } .mp-res span { display: grid; gap: 3px; } @media (max-width: 1080px) { .nav { display: none; } .bar-actions { margin-left: auto; } .burger { display: block; } } @media (max-width: 760px) { .hdr.posed .bar { height: 56px; margin: 8px -6px 0; padding: 0 6px 0 10px; border-radius: 14px; } } @media (max-width: 560px) { .bar-login { display: none; } } @media (max-width: 360px) { .bar-cta { display: none; } } /* Le menu au doigt : les trois menus en onglets, comme sur le premier site */ .menu { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; gap: 14px; padding: calc(var(--hdr) + 22px) var(--gutter) calc(18px + env(safe-area-inset-bottom)); background: var(--night); clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--curve); visibility: hidden; } .menu.open { clip-path: inset(0); visibility: visible; } /* Les onglets du menu, comme la barre de l'ordinateur : des mots, une pastille translucide qui glisse sous celui qu'on a choisi, et le trait orange lumineux dessous (core.js les place) */ .menu-tabs { position: relative; display: flex; gap: 2px; padding-bottom: 6px; box-shadow: inset 0 -1px 0 var(--cream-line); } .menu-tabs button { position: relative; z-index: 1; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: var(--cream-2); font: 600 15px/1 var(--body); cursor: pointer; transition: color .2s; } .menu-tabs button[aria-selected="true"] { color: var(--cream); } .mt-cursor { position: absolute; z-index: 0; top: 0; left: 0; width: 0; height: 44px; border-radius: 10px; background: var(--cream-fill); pointer-events: none; transition: transform .35s var(--curve), width .35s var(--curve); } .mt-line { position: absolute; z-index: 2; left: 0; bottom: -1px; width: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--acc), transparent); box-shadow: 0 0 12px color-mix(in oklch, var(--orange) 70%, transparent); pointer-events: none; transition: transform .35s var(--curve), width .35s var(--curve); } .menu-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); } .menu-panel[hidden] { display: none; } .mm-h { display: flex; gap: 8px; margin: 18px 0 4px; font: 700 11.5px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--cream-3); } .mm-h span { color: var(--acc); } .mm-list a { display: grid; gap: 2px; padding: 11px 0; border-bottom: 1px solid var(--cream-line); } .mm-list b { font: 700 17px/1.25 var(--body); } .mm-list small { font: 500 14px/1.35 var(--body); color: var(--cream-2); } .menu.open .menu-panel:not([hidden]) { animation: mm-in .45s var(--out) both; } @keyframes mm-in { from { opacity: 0; transform: translateY(10px); } } .menu .ctas { display: grid; gap: 8px; } .menu .ctas .btn { width: 100%; } html.locked, html.locked body { overflow: hidden; } /* ── Le héros ────────────────────────────────────────────────────────────── */ .hero { position: relative; overflow: clip; isolation: isolate; padding: calc(var(--hdr) + clamp(48px, 9vh, 104px)) 0 0; background: radial-gradient(60% 50% at 50% 0%, color-mix(in oklch, var(--orange) 18%, transparent), transparent 70%), var(--night); } .hero-fx { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; } .hero-fx.on { opacity: 1; } .hero-in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .vcards-wrap { min-width: 0; } /* LE TITRE DIT À QUI : « Le logiciel des » + le métier, qui tourne. Les cinq mots sont empilés dans la même case de grille : la ligne prend la largeur du plus long, rien ne saute quand ils changent. Sans script, le premier reste — et la rangée « Pensé pour » nomme les cinq. */ .hero h1 { font-size: clamp(34px, min(7.4vw, 10.6vh), 112px); margin-bottom: clamp(22px, 3.4vh, 32px); } .rot { display: grid !important; justify-items: center; } /* Au téléphone, le titre prend toute la largeur : « ORGANISATEURS. » est le mot qui la fixe. */ @media (max-width: 560px) { .hero h1 { font-size: min(9.7vw, 46px); } } .rot-w { grid-area: 1 / 1; white-space: nowrap; opacity: 0; } .rot-w.is-on { opacity: 1; } .hero .lead strong { color: var(--cream); font-weight: 700; } /* LES SECTEURS, EN CARTES FILMÉES (comme sur le premier site, components/yusu/publics.tsx) : les cinq publics côte à côte, tous lisibles sans commande. Celle qu'on regarde joue son film ; elle suit le mot du titre, et le survol la choisit. Le repli est TOUJOURS dessous (l'image), la vidéo se pose par-dessus quand elle est prête : une vidéo absente ou refusée laisse une carte finie, jamais un rectangle noir. Un clic ouvre la page du secteur, qui s'ouvre sur ce film. */ .vcards-wrap { width: 100%; margin-top: clamp(48px, 8vh, 88px); } .vcards-l { margin-bottom: 12px; font: 700 12px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--cream-3); text-align: left; } .vcards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; text-align: left; } .vcard { position: relative; display: block; aspect-ratio: 1 / 1.08; max-height: 30vh; width: 100%; border-radius: 20px; overflow: hidden; isolation: isolate; background: #120D0A; box-shadow: inset 0 0 0 1px rgba(251, 247, 241, .1), 0 24px 50px -28px rgba(0, 0, 0, .9); transform: translateZ(0); transition: transform .6s var(--curve), box-shadow .5s var(--curve); } .vcard .vc-poster, .vcard video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .vcard .vc-poster { filter: saturate(.75) brightness(.62); transform: scale(1.04); transition: filter .6s var(--curve), transform 1.2s var(--out); } .vcard video { opacity: 0; filter: saturate(.75) brightness(.62); transition: opacity .6s var(--curve), filter .6s var(--curve); } .vcard.is-on video { filter: none; } .vcard video.ready { opacity: 1; } .vcard::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(14, 11, 9, .92) 6%, rgba(14, 11, 9, .25) 55%, rgba(14, 11, 9, .05)); pointer-events: none; } .vc-body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; gap: 3px; padding: 14px 44px 16px 15px; } .vc-body b { font: 800 16.5px/1.2 var(--body); color: var(--cream); } .vc-body small { font: 600 12.5px/1.35 var(--body); color: var(--cream-2); } .vc-go { position: absolute; z-index: 2; right: 12px; bottom: 16px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(251, 247, 241, .12); color: var(--cream); transition: background .3s, transform .4s var(--curve); } .vc-go svg { width: 14px; height: 14px; } .vc-time { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 3px; background: rgba(251, 247, 241, .08); opacity: 0; transition: opacity .3s; } .vc-time i { display: block; height: 100%; width: 100%; background: var(--acc); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 12px color-mix(in oklch, var(--orange) 80%, transparent); } .vcard.is-on { box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--orange) 80%, transparent), 0 26px 60px -24px color-mix(in oklch, var(--orange) 70%, transparent); } .vcard.is-on .vc-poster { filter: none; transform: scale(1); } .vcard.is-on .vc-time { opacity: 1; } .vcard.is-on .vc-go, .vcard:hover .vc-go { background: var(--acc); transform: translateX(2px); } .vcard:hover { transform: translateY(-4px); } @media (max-width: 900px) { .vcards-wrap { width: auto; justify-self: stretch; margin: 0 calc(var(--gutter) * -1); } .vcards-l { padding: 0 var(--gutter); } .vcards { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px var(--gutter) 8px; scroll-padding: 0 var(--gutter); scrollbar-width: none; } .vcards::-webkit-scrollbar { display: none; } .vcards li { flex: none; width: min(46vw, 230px); scroll-snap-align: start; } .vcard { max-height: none; } } @media (max-width: 520px) { .vcards li { width: 58vw; } } .hero h1 .line { display: block; } .hero .lead { margin: 0 auto clamp(30px, 4.6vh, 44px); text-align: center; max-width: 40em; } .hero .ctas { justify-content: center; } .hero-apps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(22px, 3.4vh, 30px); } /* L'écran du héros : la vraie page d'accueil de YUSU.PRO, qui se redresse au défilement */ .hero-stage { position: relative; z-index: 2; margin-top: clamp(36px, 5.5vh, 72px); perspective: 2200px; perspective-origin: 50% 0%; } .hero-screen { position: relative; width: min(1180px, 92vw); margin: 0 auto; transform-origin: 50% 0%; transform: rotateX(26deg) scale(.9); will-change: transform; } .hero-glow { position: absolute; inset: -6% -10% auto; height: 70%; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, color-mix(in oklch, var(--orange) 42%, transparent), transparent 70%); filter: blur(30px); opacity: .55; pointer-events: none; } .hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: 4; background: linear-gradient(to bottom, transparent, var(--night)); pointer-events: none; } /* Au téléphone, le même écran PC : toute la largeur, et les notifications plus petites autour */ @media (max-width: 760px) { .hero { padding-bottom: 0; } .vcards-wrap { margin-top: 44px; } /* la fenêtre entière, dans les marges ; la loupe l'ouvre en grand */ .hero-stage { margin-top: 30px; padding: 66px 0 96px; } .hero-screen { width: calc(100vw - var(--gutter) * 2); } .hero-fade { height: 36px; } } /* Les notifications : ce que les trois apps disent pendant la nuit */ .notif { position: absolute; z-index: 5; display: flex; align-items: center; gap: 12px; width: max-content; max-width: 330px; padding: 12px 16px 12px 12px; border-radius: 20px; background: rgba(34, 26, 20, .72); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); box-shadow: inset 0 0 0 1px rgba(251, 247, 241, .12), 0 30px 60px -24px rgba(0, 0, 0, .8); color: var(--cream); opacity: 0; } .notif-ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--acc); color: #fff; } .notif-ico svg { width: 20px; height: 20px; } .notif-ico.entry { background: var(--ok); color: #0E0B09; } .notif-ico.pos { background: #dba63f; color: #0E0B09; } .notif-ico.io { background: var(--cream); color: var(--ink); } .notif-txt { display: grid; gap: 1px; min-width: 0; } .notif-txt b { font-size: 14.5px; font-weight: 800; line-height: 1.3; } .notif-txt small { font-size: 13px; font-weight: 600; color: var(--cream-2); line-height: 1.3; } .notif time { align-self: flex-start; margin-left: 6px; white-space: nowrap; font-size: 12px; font-weight: 700; color: var(--cream-3); font-variant-numeric: tabular-nums; } .hero .notif.n1 { top: 14%; left: -4%; } .hero .notif.n2 { top: 38%; right: -5%; } .hero .notif.n3 { top: 64%; left: 3%; } .hero .notif.n4 { top: 6%; right: 6%; } @media (max-width: 1100px) { .hero .notif { max-width: 236px; gap: 8px; padding: 7px 10px 7px 7px; border-radius: 14px; } .hero .notif-ico { width: 30px; height: 30px; border-radius: 9px; } .hero .notif-ico svg { width: 15px; height: 15px; } .hero .notif-txt b { font-size: 12.5px; } .hero .notif-txt small { font-size: 11px; } .hero .notif time { margin-left: 2px; font-size: 10px; } } /* sous 1100 px, les notifications restent DANS l'écran : ancrées aux bords de la fenêtre, jamais au-delà */ @media (max-width: 1100px) { .hero .notif.n1 { left: -1%; } .hero .notif.n2 { right: -1%; } } /* au téléphone : deux notifications au-dessus de la fenêtre, deux dessous, à cheval sur son bord — le tableau de bord reste visible entre elles */ @media (max-width: 760px) { .hero .notif { width: calc(50% - 4px); max-width: none; align-items: flex-start; } .hero .notif time { position: absolute; top: 8px; right: 9px; margin: 0; white-space: nowrap; font-size: 9.5px; } .hero .notif-txt b { padding-right: 36px; } .hero .notif.n1 { top: -50px; left: 0; } .hero .notif.n4 { top: -50px; right: 0; left: auto; } .hero .notif.n3 { top: auto; bottom: -50px; left: 0; } .hero .notif.n2 { top: auto; bottom: -50px; right: 0; left: auto; } } /* ── Les cadres d'écran ────────────────────────────────────────────────────── Une fenêtre (YUSU.PRO, au bureau), une tablette (YUSU.POS, au bar), un téléphone (Entry, la porte ; yusu.io, le public). Le cadre ne porte que ce qu'un vrai appareil porterait. */ .win { position: relative; border-radius: 16px; background: #0B0807; padding: 0; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(251, 247, 241, .10), 0 2px 0 rgba(251, 247, 241, .05), 0 60px 120px -40px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .6); } .win-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #15100C; box-shadow: inset 0 -1px 0 rgba(251, 247, 241, .07); } .win-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(251, 247, 241, .16); } .win-bar span { position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 12px; border-radius: 7px; background: rgba(251, 247, 241, .06); font-size: 12px; font-weight: 600; color: var(--cream-3); } .win-bar span svg { width: 11px; height: 11px; } .win-body { position: relative; aspect-ratio: 1440 / 900; background: var(--app-night); overflow: hidden; } .win-body picture, .win-body img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; } .win.light { background: #fff; box-shadow: 0 0 0 1px var(--line), 0 50px 100px -40px rgba(26, 19, 14, .45); } .win.light .win-bar { background: #F7F7F7; box-shadow: inset 0 -1px 0 var(--line); } .win.light .win-bar i { background: rgba(26, 19, 14, .14); } .win.light .win-bar span { background: rgba(26, 19, 14, .05); color: var(--ink-2); } .win.light .win-body { background: #F7F7F7; } @media (max-width: 600px) { .win-bar { height: 24px; padding: 0 10px; gap: 5px; } .win-bar i { width: 7px; height: 7px; } .win-bar span { height: 16px; font-size: 9.5px; padding: 0 8px; } } .tablet { --tw: 100%; position: relative; width: var(--tw); padding: clamp(8px, 1.3vw, 16px); border-radius: clamp(18px, 2.6vw, 34px); background: #0A0806; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12), inset 0 0 0 5px #000, 0 70px 120px -40px rgba(0, 0, 0, .9); } .tablet-screen { position: relative; aspect-ratio: 1280 / 800; overflow: hidden; border-radius: clamp(8px, 1.2vw, 16px); background: var(--app-night); isolation: isolate; } .tablet-screen picture, .tablet-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .tablet::after { content: ''; position: absolute; top: 50%; right: clamp(3px, .5vw, 6px); width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #1d1a17; } /* Le téléphone (la landing de yusu.io) : l'écran est un conteneur, --u vaut un point d'iPhone */ .phone { --pw: 280px; position: relative; flex: none; width: var(--pw); padding: calc(var(--pw) * .034); border-radius: calc(var(--pw) * .165); background: #0B0806; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), inset 0 0 0 4px #000, 0 50px 100px -30px rgba(0, 0, 0, .7); } .s-paper .phone { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), inset 0 0 0 4px #000, 0 50px 90px -34px rgba(26, 19, 14, .55); } .screen { position: relative; aspect-ratio: 390 / 844; overflow: hidden; isolation: isolate; border-radius: 12.1% / 5.6%; background: #F5F5F7; container-type: inline-size; } .screen.dark { background: var(--app-night); } .screen > * { --u: calc(100cqw / 390); } .screen > picture, .screen > img, .screen picture img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; } .screen .ly { position: absolute; inset: 0; } .island { position: absolute; z-index: 41; top: calc(var(--u) * 11); left: 50%; width: calc(var(--u) * 122); height: calc(var(--u) * 35); transform: translateX(-50%); border-radius: 99px; background: #000; } .homebar { position: absolute; z-index: 40; bottom: calc(var(--u) * 8); left: 50%; width: calc(var(--u) * 134); height: calc(var(--u) * 5); transform: translateX(-50%); border-radius: 9px; background: rgba(255, 255, 255, .85); } .screen.lightbar .homebar { background: #000; } /* Les écrans de l'app de nuit sont pris sans barre d'état : on la pose, comme sur un iPhone */ .notch-pad { position: absolute; inset: 0 0 auto 0; z-index: 39; height: calc(var(--u) * 47); background: var(--app-night); } .sbar { position: absolute; z-index: 40; left: 0; right: 0; top: 0; height: calc(var(--u) * 47); display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u) * 4) calc(var(--u) * 26) 0 calc(var(--u) * 46); font: 600 calc(var(--u) * 16.5) / 1 var(--system); letter-spacing: -.01em; color: #fff; pointer-events: none; } .sbar.dark { color: #000; } .sbar svg { height: calc(var(--u) * 12); width: auto; margin-left: calc(var(--u) * 6); fill: currentColor; } .sbar .icons { display: flex; align-items: center; } .shift { position: absolute; inset: calc(var(--u) * 47) 0 0 0; } .shift > picture, .shift > img, .shift picture img { position: absolute; left: 0; top: 0; width: 100%; height: auto; } /* Le terminal de la caisse : un appareil Android, sans encoche ; YUSU.POS y tient tout l'écran */ .phone.term { border-radius: calc(var(--pw) * .1); padding: calc(var(--pw) * .06) calc(var(--pw) * .045) calc(var(--pw) * .1); background: #17130F; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1), inset 0 0 0 5px #0b0907, 0 50px 100px -30px rgba(0, 0, 0, .75); } .phone.term::before { content: ''; position: absolute; top: calc(var(--pw) * .024); left: 50%; width: calc(var(--pw) * .025); height: calc(var(--pw) * .025); margin-left: calc(var(--pw) * -.0125); border-radius: 50%; background: #050403; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } .phone.term .screen { border-radius: calc(var(--pw) * .03); } /* Le doigt : là où l'on touche (landing de yusu.io) */ .tap { position: absolute; z-index: 45; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(251, 247, 241, .26); box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .95), 0 6px 22px rgba(0, 0, 0, .35); pointer-events: none; opacity: 0; } .tap::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); opacity: 0; } .tap.ping::after { animation: ping .6s var(--out); } @keyframes ping { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(2.2); } } /* ── Le bandeau des nuits ────────────────────────────────────────────────── */ .band { position: relative; padding: clamp(36px, 6vw, 72px) 0; overflow: hidden; background: var(--night); border-top: 1px solid var(--cream-line); border-bottom: 1px solid var(--cream-line); } .band-row { display: flex; width: max-content; } .band-row + .band-row { margin-top: 6px; } .band-track { display: flex; flex: none; } .band-track span { display: inline-flex; align-items: center; font: 900 clamp(46px, 8vw, 120px)/1 var(--display); text-transform: uppercase; letter-spacing: -.035em; padding-right: .3em; white-space: nowrap; } .band-row:first-child .band-track span:nth-child(odd), .band-row:last-child .band-track span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px rgba(251, 247, 241, .28); } .band-track span i { display: inline-block; width: .16em; height: .16em; margin-left: .3em; border-radius: 50%; background: var(--acc); } /* ── Le manifeste ────────────────────────────────────────────────────────── */ .manif { padding-bottom: clamp(60px, 9vw, 120px); } .manif-text { font: 700 clamp(26px, 3.6vw, 52px)/1.18 var(--display); letter-spacing: -.02em; max-width: 22em; } .manif-text .w { opacity: .16; transition: none; } .no-js .manif-text .w, .reduced .manif-text .w { opacity: 1; } .manif-punch { margin-top: clamp(48px, 7vw, 96px); font-size: clamp(40px, 7vw, 108px); } /* ── La suite : trois apps ───────────────────────────────────────────────── */ .trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); } .app-card { --mx: 50%; --my: 50%; position: relative; display: flex; flex-direction: column; border-radius: var(--r-big); background: var(--surface); box-shadow: 0 1px 0 var(--line), 0 30px 60px -40px rgba(26, 19, 14, .35); overflow: hidden; transform-style: preserve-3d; transition: box-shadow .5s var(--curve); will-change: transform; } .app-card:hover { box-shadow: 0 1px 0 var(--line), 0 40px 80px -36px rgba(26, 19, 14, .5); } .app-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .22), transparent 45%); opacity: 0; transition: opacity .4s; pointer-events: none; z-index: 3; } .app-card:hover::after { opacity: 1; } .app-media { position: relative; height: clamp(250px, 24vw, 330px); overflow: hidden; background: radial-gradient(70% 70% at 50% 100%, color-mix(in oklch, var(--orange) 26%, transparent), transparent 70%), var(--night); } .app-media .win { position: absolute; left: 9%; top: 14%; width: 132%; border-radius: 12px; } .app-media .tablet { position: absolute; left: 10%; top: 15%; width: 120%; padding: 9px; border-radius: 22px; } .app-media .phone { position: absolute; left: 50%; top: 11%; --pw: 58%; transform: translateX(-50%); } .app-media > * { transition: transform .8s var(--curve); } .app-card:hover .app-media .win, .app-card:hover .app-media .tablet { transform: translate(-3%, -3%); } .app-card:hover .app-media .phone { transform: translate(-50%, -4%); } .app-body { display: grid; gap: 12px; padding: clamp(22px, 2.2vw, 30px); flex: 1; align-content: start; } .app-body h3 { font: 900 clamp(24px, 2.2vw, 32px)/1 var(--display); text-transform: uppercase; letter-spacing: -.03em; margin-top: 4px; } .app-body p { color: var(--ink-2); font-size: 16px; line-height: 1.55; } .app-body .link { margin-top: 6px; color: var(--ink); } /* Quatre apps : quatre colonnes, puis deux ; au téléphone, une carte par ligne — l'appareil entier à gauche, le texte à droite. Plus de rangée qui sort de l'écran. */ .trio.trio-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .trio-4 .app-media { height: clamp(220px, 19vw, 290px); } .trio-4 .app-body h3 { font-size: clamp(22px, 1.9vw, 28px); } .trio-4 .app-body p { font-size: 15px; } @media (max-width: 1100px) { .trio.trio-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .trio, .trio.trio-2, .trio.trio-3, .trio.trio-4 { grid-template-columns: minmax(0, 1fr); gap: 10px; } .app-card { flex-direction: row; min-height: 172px; border-radius: 18px; } .app-media, .trio-4 .app-media { flex: none; width: 42%; height: auto; display: grid; place-items: center; padding: 14px 0; } .app-media > *, .app-media .win, .app-media .tablet, .app-media .phone { position: relative; left: auto; top: auto; transform: none; } .app-media .win { width: 88%; border-radius: 8px; } .app-media .win .win-bar { height: 14px; gap: 3px; padding: 0 6px; } .app-media .win .win-bar i { width: 4px; height: 4px; } .app-media .tablet { width: 86%; padding: 4px; border-radius: 10px; } .app-media .phone { --pw: min(72px, 46%); } .app-card:hover .app-media .win, .app-card:hover .app-media .tablet, .app-card:hover .app-media .phone { transform: none; } .app-body { gap: 7px; padding: 14px 14px 16px 12px; } .app-body .tag { justify-self: start; } .app-body h3, .trio-4 .app-body h3 { margin-top: 2px; font-size: 18px; } .app-body p, .trio-4 .app-body p { font-size: 13.5px; line-height: 1.45; } .app-body .link { margin-top: 2px; font-size: 14px; } } /* ── L'OS : préparez, vendez, ouvrez, comptez ───────────────────────────── */ .os { overflow: clip; } .chapters { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 64px); align-items: center; } .ch-steps { position: relative; display: grid; gap: 6px; padding-left: 22px; } .ch-rail { position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--cream-line); overflow: hidden; } .ch-rail i { position: absolute; inset: 0; background: var(--acc); transform-origin: 0 0; transform: scaleY(0); } .ch-step { position: relative; padding: 14px 0; cursor: default; } .ch-step .ch-n { display: block; font: 800 13px/1 var(--display); letter-spacing: .14em; color: var(--cream-3); margin-bottom: 10px; transition: color .4s; } .ch-step h3 { font: 900 clamp(30px, 3.4vw, 50px)/.95 var(--display); text-transform: uppercase; letter-spacing: -.03em; color: var(--cream-3); transition: color .5s var(--curve); } .ch-step.is-on h3 { color: var(--cream); } .ch-step.is-on .ch-n { color: var(--acc); } .ch-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--curve), opacity .5s; opacity: 0; } .ch-body > div { overflow: hidden; } .ch-step.is-on .ch-body { grid-template-rows: 1fr; opacity: 1; } .ch-body p { padding-top: 16px; color: var(--cream-2); font-size: 17px; line-height: 1.6; max-width: 30em; } .ticks { display: grid; gap: 9px; padding-top: 16px; } .ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; font-weight: 600; line-height: 1.45; } .s-night .ticks li, .s-deep .ticks li { color: var(--cream); } .ticks li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--acc); } .ch-stage { position: relative; } /* Seize écrans empilés : celui qu'on regarde est dessus ; le précédent reste visible dessous le temps que le nouveau monte (.was), puis s'efface. */ .ch-stage .win-body picture { clip-path: inset(100% 0 0 0); z-index: 0; } .ch-stage .win-body picture.was { clip-path: inset(0); z-index: 1; } .ch-stage .win-body picture.is-on { clip-path: inset(0); z-index: 2; } /* Les fonctionnalités d'un temps : un nom par ligne, la description de celle qu'on regarde */ .fns { display: grid; gap: 2px; padding-top: 16px; } .fn { position: relative; display: grid; width: 100%; padding: 10px 14px 10px 18px; border: 0; border-radius: 12px; background: none; text-align: left; cursor: pointer; transition: background .25s var(--curve); } .fn::before { content: ''; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--acc); transform: scaleY(0); transition: transform .4s var(--out); } .fn b { font: 700 16px/1.3 var(--body); color: var(--cream-2); transition: color .2s; } .fn span { max-height: 0; opacity: 0; overflow: hidden; font: 500 14.5px/1.5 var(--body); color: var(--cream-2); transition: max-height .5s var(--out), opacity .3s, margin .5s var(--out); } .fn:hover b { color: var(--cream); } .fn.is-on { background: var(--cream-fill); } .fn.is-on::before { transform: scaleY(1); } .fn.is-on b { color: var(--cream); } .fn.is-on span { max-height: 6em; opacity: 1; margin-top: 4px; } .fn-more { margin: 14px 0 0 18px; color: var(--cream); font-size: 15px; } .fn-more b { font-weight: 800; } .seg-go { margin-top: 18px; align-self: flex-start; } .ch-shot-m .win-body picture { opacity: 0; transition: opacity .45s var(--curve); } .ch-shot-m .win-body picture.is-on { opacity: 1; } .ch-glow { position: absolute; inset: 10% 0 -12% 10%; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, color-mix(in oklch, var(--orange) 34%, transparent), transparent 70%); filter: blur(40px); opacity: .6; } .ch-shot-m { display: none; } @media (min-width: 1025px) { .chapters { min-height: calc(100vh - var(--hdr) - 40px); } } @media (max-width: 1024px) { .chapters { grid-template-columns: 1fr; } .ch-stage { display: none; } .ch-steps { padding-left: 0; gap: clamp(40px, 7vw, 64px); } .ch-rail { display: none; } .ch-step h3 { color: var(--cream); } .ch-step .ch-n { color: var(--acc); } .ch-body { grid-template-rows: 1fr; opacity: 1; } .ch-shot-m { display: block; margin-top: 24px; } } /* ── Le plan ─────────────────────────────────────────────────────────────── */ .plan-stage { position: relative; padding-right: clamp(0px, 9vw, 130px); } .plan-win .win-body { overflow: hidden; } .plan-win .win-body picture { transform-origin: 62% 52%; will-change: transform; } .plan-phone { position: absolute; right: 0; bottom: -6%; z-index: 3; --pw: clamp(170px, 19vw, 270px); } .plan-cap { position: absolute; z-index: 4; right: clamp(150px, 18vw, 250px); bottom: 8%; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--ink); color: var(--cream); font-size: 14px; font-weight: 700; box-shadow: 0 20px 40px -18px rgba(26, 19, 14, .6); white-space: nowrap; } .plan-cap svg { width: 16px; height: 16px; color: var(--acc); } .legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(28px, 4vw, 44px); } .legend span { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--r-btn); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 700; } .legend b { font-family: var(--display); font-variant-numeric: tabular-nums; } .legend i { width: 10px; height: 10px; border-radius: 50%; } .three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); margin-top: clamp(56px, 8vw, 104px); } .three h3 { display: flex; align-items: center; gap: 10px; font: 800 19px/1.25 var(--body); margin-bottom: 10px; } .three h3 .num { font: 900 13px/1 var(--display); color: var(--acc); letter-spacing: .1em; } .three p { color: var(--ink-2); font-size: 16px; line-height: 1.6; } .s-night .three p, .s-deep .three p { color: var(--cream-2); } @media (max-width: 820px) { .plan-stage { padding-right: 0; padding-bottom: 120px; } .plan-phone { --pw: 44vw; bottom: 0; right: 4%; } .three { grid-template-columns: 1fr; } } /* ── Jane ────────────────────────────────────────────────────────────────── */ .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; } .jane-stage { position: relative; } .jane-shot { position: relative; border-radius: 22px; overflow: hidden; background: var(--app-night); box-shadow: inset 0 0 0 1px rgba(251, 247, 241, .1), 0 60px 120px -40px rgba(0, 0, 0, .9); aspect-ratio: 1014 / 1300; max-width: 520px; margin: 0 auto; } .jane-shot picture, .jane-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .jane-shot .scan { position: absolute; left: 0; right: 0; height: 30%; top: -30%; background: linear-gradient(to bottom, transparent, color-mix(in oklch, var(--orange) 18%, transparent), transparent); mix-blend-mode: screen; pointer-events: none; } .asks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; } .asks li { padding: 10px 14px; border-radius: 14px; background: var(--cream-fill); box-shadow: inset 0 0 0 1px var(--cream-line); font-size: 14.5px; font-weight: 600; color: var(--cream-2); } .jane-orb { position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; left: 15%; top: 10%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklch, var(--orange) 40%, transparent), transparent); filter: blur(30px); } @media (max-width: 900px) { .split { grid-template-columns: 1fr; } } /* ── La caisse ───────────────────────────────────────────────────────────── */ .pos-stage { position: relative; display: grid; gap: clamp(20px, 3vw, 32px); } .pos-device { position: relative; max-width: 1040px; width: 100%; margin: 0 auto; } .pos-device .tablet-screen picture { opacity: 0; } .pos-device .tablet-screen picture.is-on { opacity: 1; } .pos-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 1040px; width: 100%; margin: 0 auto; } .pos-steps button { position: relative; display: grid; gap: 6px; padding: 16px 16px 18px; border: 0; border-radius: 16px; background: var(--cream-fill); box-shadow: inset 0 0 0 1px var(--cream-line); text-align: left; cursor: pointer; overflow: hidden; transition: background .3s; } .pos-steps button:hover { background: rgba(251, 247, 241, .1); } .pos-steps b { font: 800 12px/1 var(--display); letter-spacing: .14em; color: var(--cream-3); text-transform: uppercase; } .pos-steps span { font-weight: 700; font-size: 15px; color: var(--cream-2); line-height: 1.35; } .pos-steps button[aria-selected="true"] b { color: var(--acc); } .pos-steps button[aria-selected="true"] span { color: var(--cream); } .pos-steps i { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--acc); transform-origin: 0 50%; transform: scaleX(0); } .feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(56px, 8vw, 104px); border-radius: var(--r-big); overflow: hidden; background: var(--cream-line); box-shadow: inset 0 0 0 1px var(--cream-line); } .feat { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 2.6vw, 34px); background: var(--night-deep); } .feat .f-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--cream-fill); box-shadow: inset 0 0 0 1px var(--cream-line); color: var(--acc); margin-bottom: 6px; } .feat .f-ico svg { width: 21px; height: 21px; } .feat h3 { font: 800 18px/1.3 var(--body); } .feat p { color: var(--cream-2); font-size: 15.5px; line-height: 1.6; } .s-night .feat { background: var(--night); } .pos-plan { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(72px, 10vw, 140px); } .pos-plan .tablet { transform: rotate(-2deg); } @media (max-width: 1024px) { .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .pos-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .pos-steps button { gap: 4px; padding: 10px 12px 12px; border-radius: 12px; } .pos-steps b { font-size: 10.5px; } .pos-steps span { font-size: 14px; line-height: 1.3; } .pos-plan { grid-template-columns: 1fr; } .pos-plan .tablet { transform: none; } } @media (max-width: 560px) { .feat-grid { grid-template-columns: 1fr; } } /* ── La porte ────────────────────────────────────────────────────────────── */ .porte { overflow: clip; } .porte-stage { position: relative; display: flex; justify-content: center; align-items: center; min-height: 640px; } .porte-stage .phone.main { --pw: clamp(250px, 23vw, 310px); z-index: 3; } .porte-stage .phone.side { position: absolute; --pw: clamp(180px, 16vw, 230px); opacity: .9; } .porte-stage .phone.side.l { left: 0; top: 12%; transform: rotate(-7deg); } .porte-stage .phone.side.r { right: 0; top: 20%; transform: rotate(6deg); } .porte-stage .halo { position: absolute; z-index: 0; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklch, var(--ok) 22%, transparent), transparent); filter: blur(20px); transition: background .5s; } .porte-stage .halo.no { background: radial-gradient(closest-side, color-mix(in oklch, var(--no) 26%, transparent), transparent); } /* La caméra d'Entry : la zone entre l'en-tête de verre et « Le QR se lit tout seul » (mesurée en points sur la capture, 182 → 572). Ce qu'on y voit est le monde — un billet qu'on présente —, pas l'app : l'app, elle, reste la capture. */ .cam { position: absolute; z-index: 10; left: 0; right: 0; top: calc(var(--u) * 182); height: calc(var(--u) * 390); overflow: hidden; background: radial-gradient(60% 55% at 50% 42%, #2c2219, rgba(14, 11, 9, 0) 75%); -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); } .cam .ticket { position: absolute; left: 50%; top: calc(var(--u) * 34); width: calc(var(--u) * 150); aspect-ratio: .64; margin-left: calc(var(--u) * -75); border-radius: calc(var(--u) * 14); background: #f7f3ec; box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 40) rgba(0, 0, 0, .6); padding: calc(var(--u) * 14); display: grid; grid-template-rows: auto 1fr auto; gap: calc(var(--u) * 8); align-items: center; transform: translateY(130%) rotate(-10deg); } .cam .ticket b { font: 900 calc(var(--u) * 12) / 1 var(--display); color: var(--ink); text-transform: uppercase; letter-spacing: -.01em; } .cam .ticket svg { width: 100%; height: auto; } .cam .ticket small { font: 700 calc(var(--u) * 8) / 1 ui-monospace, monospace; color: var(--ink-2); letter-spacing: .04em; } .vf { position: absolute; z-index: 20; left: 50%; top: calc(var(--u) * 200); width: calc(var(--u) * 230); height: calc(var(--u) * 270); margin-left: calc(var(--u) * -115); pointer-events: none; } .vf .c { position: absolute; width: 24%; height: 20%; border: calc(var(--u) * 3) solid rgba(255, 255, 255, .92); } .vf .c:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: calc(var(--u) * 16) 0 0 0; } .vf .c:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 calc(var(--u) * 16) 0 0; } .vf .c:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 calc(var(--u) * 16); } .vf .c:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 calc(var(--u) * 16) 0; } .vf .line { position: absolute; left: 8%; right: 8%; top: 8%; height: 2px; border-radius: 2px; background: var(--ok); box-shadow: 0 0 18px 2px color-mix(in oklch, var(--ok) 70%, transparent); opacity: .9; } .verdict-img { opacity: 0; z-index: 30; } .flash { position: absolute; inset: 0; z-index: 35; background: #fff; opacity: 0; pointer-events: none; } .door-count { position: absolute; z-index: 6; left: -3%; bottom: 3%; display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-radius: 18px; background: rgba(34, 26, 20, .75); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px var(--cream-line), 0 30px 60px -20px rgba(0, 0, 0, .8); white-space: nowrap; } .door-count .num { font: 900 30px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .door-count small { display: block; font-size: 13px; font-weight: 600; color: var(--cream-2); } .door-count .dc-bar { width: 110px; height: 6px; border-radius: 6px; background: var(--cream-fill); overflow: hidden; } .door-count .dc-bar i { display: block; height: 100%; width: 88.5%; border-radius: inherit; background: var(--ok); transition: width .6s var(--curve); } .door-count .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in oklch, var(--ok) 25%, transparent); } @media (min-width: 901px) { .porte-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } } @media (max-width: 900px) { .porte-stage { min-height: 0; padding-bottom: 90px; } .porte-split .porte-stage { order: -1; } .door-count { left: 50%; bottom: 0; transform: translateX(-50%); } } /* ── Le fil : un billet, toute une nuit ─────────────────────────────────── */ .fil { overflow: clip; } .fil-track { position: relative; } .fil-move { position: relative; } .fil-line { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 96px; overflow: visible; pointer-events: none; } .fil-line path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; } .fil-line .base { stroke: var(--cream-line); stroke-dasharray: 4 7; } .fil-line .draw { stroke: var(--acc); filter: drop-shadow(0 0 8px color-mix(in oklch, var(--acc) 70%, transparent)); } .fil-dot { position: absolute; z-index: 3; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px color-mix(in oklch, var(--acc) 45%, transparent), 0 0 30px 8px color-mix(in oklch, var(--acc) 60%, transparent); } .stops { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); padding-top: 112px; } .stop { position: relative; display: grid; gap: 12px; align-content: start; opacity: .35; transition: opacity .6s var(--curve); } .stop.is-on { opacity: 1; } .stop time { font: 900 clamp(28px, 2.6vw, 40px)/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .stop h3 { font: 800 19px/1.3 var(--body); } .stop p { color: var(--cream-2); font-size: 15.5px; line-height: 1.55; } .stop .phone { --pw: min(clamp(140px, 22vh, 190px), 100%); margin-top: 8px; transform: translateY(20px); transition: transform .8s var(--curve); } .stop.is-on .phone { transform: none; } /* La caisse et le bureau ne se montrent pas sur un téléphone : la tablette de YUSU.POS, la fenêtre de YUSU.PRO */ .stop .stop-dev { margin-top: 8px; transform: translateY(20px); transition: transform .8s var(--curve); } .stop.is-on .stop-dev { transform: none; } .stop .tablet { padding: 7px; border-radius: 16px; } .stop .tablet-screen { border-radius: 9px; } .stop .win { border-radius: 10px; } .stop .win-bar { height: 22px; gap: 5px; padding: 0 9px; } .stop .win-bar i { width: 7px; height: 7px; } .stop .win-bar span { height: 15px; padding: 0 8px; gap: 4px; font-size: 9px; border-radius: 5px; } .stop .win-bar span svg { width: 8px; height: 8px; } @media (max-width: 1024px) { .fil-line, .fil-dot { display: none; } .stops { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 10px; margin: 0 calc(var(--gutter) * -1); scrollbar-width: none; } .stops::-webkit-scrollbar { display: none; } .stop { opacity: 1; scroll-snap-align: start; } .stop .phone { transform: none; } } /* ── Le public ───────────────────────────────────────────────────────────── */ .public { overflow: clip; } /* Les affiches de la semaine : une bande sous le texte, jamais derrière lui. Les affiches entières (carrées, celles de yusu.io), et une bande assez haute pour que leur ombre ne soit jamais coupée. */ .posters { position: relative; margin-top: clamp(48px, 7vw, 96px); margin-bottom: calc(var(--sec-y) * -.6); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .posters-row { display: flex; gap: clamp(12px, 1.4vw, 20px); width: max-content; padding: 12px 0 56px; } .posters-row img { width: clamp(150px, 15vw, 216px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: clamp(12px, 1.2vw, 16px); box-shadow: 0 1px 2px rgba(26, 19, 14, .1), 0 22px 40px -22px rgba(26, 19, 14, .5); } .public .wrap { position: relative; z-index: 2; } .fan { position: relative; height: clamp(480px, 46vw, 640px); } .fan .phone { position: absolute; top: 0; left: 50%; --pw: clamp(190px, 17vw, 250px); } .fan .phone:nth-child(1) { transform: translate(-128%, 12%) rotate(-9deg); } .fan .phone:nth-child(2) { transform: translate(-50%, 0); z-index: 2; } .fan .phone:nth-child(3) { transform: translate(28%, 12%) rotate(9deg); } .points { display: grid; gap: 18px; margin-top: 32px; } .points li { display: flex; gap: 16px; align-items: flex-start; } .points .p-ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--surface); box-shadow: 0 1px 0 var(--line), 0 10px 20px -14px rgba(26, 19, 14, .4); color: var(--acc); } .points .p-ico svg { width: 20px; height: 20px; } .points b { display: block; font-size: 17px; font-weight: 800; margin-bottom: 2px; } .points li > div span { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; } @media (max-width: 900px) { .fan { order: -1; height: clamp(380px, 100vw, 520px); } .fan .phone { --pw: min(46vw, 230px); } } /* au téléphone, les trois écrans de yusu.io tiennent dans la largeur : plus serrés, jamais coupés */ @media (max-width: 560px) { .fan { height: clamp(360px, 96vw, 420px); } .fan .phone { --pw: min(38vw, 160px); } .fan .phone:nth-child(1) { transform: translate(-108%, 12%) rotate(-8deg); } .fan .phone:nth-child(3) { transform: translate(8%, 12%) rotate(8deg); } } /* ── Pour qui ────────────────────────────────────────────────────────────── */ .seg-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .seg-tabs button { height: 46px; padding: 0 20px; border: 0; border-radius: var(--r-btn); background: var(--cream-fill); box-shadow: inset 0 0 0 1px var(--cream-line); color: var(--cream-2); font-weight: 700; font-size: 15px; cursor: pointer; transition: background .3s, color .3s; } .seg-tabs button:hover { color: var(--cream); } .seg-tabs button[aria-selected="true"] { background: var(--cream); color: var(--ink); box-shadow: none; } .seg-view { position: relative; border-radius: var(--r-big); overflow: hidden; min-height: clamp(460px, 44vw, 600px); background: #000; isolation: isolate; } .seg-view video, .seg-view .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--curve), transform 6s linear; transform: scale(1.06); } .seg-view video.is-on, .seg-view .poster.is-on { opacity: 1; transform: scale(1); } .seg-view::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(14, 11, 9, .92) 0%, rgba(14, 11, 9, .7) 40%, rgba(14, 11, 9, .1) 75%), linear-gradient(to top, rgba(14, 11, 9, .6), transparent 50%); } .seg-panel { position: absolute; z-index: 2; left: 0; bottom: 0; top: 0; display: flex; flex-direction: column; justify-content: flex-end; width: min(560px, 100%); padding: clamp(24px, 4vw, 56px); } .seg-panel[hidden] { display: none; } .seg-panel h3 { font: 900 clamp(34px, 4.4vw, 64px)/.92 var(--display); text-transform: uppercase; letter-spacing: -.035em; margin-bottom: 16px; } .seg-panel p { color: var(--cream-2); font-size: 17px; line-height: 1.6; margin-bottom: 6px; } @media (max-width: 640px) { .seg-view::after { background: linear-gradient(to top, rgba(14, 11, 9, .95) 30%, rgba(14, 11, 9, .35)); } .seg-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1) 18px; padding: 0 var(--gutter); scrollbar-width: none; } .seg-tabs::-webkit-scrollbar { display: none; } .seg-tabs button { flex: none; } .seg-view { min-height: 560px; } } /* ── Tarifs ──────────────────────────────────────────────────────────────── */ .prices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); } .price { position: relative; display: grid; gap: 10px; align-content: start; padding: clamp(24px, 2.4vw, 32px); border-radius: var(--r-big); background: var(--surface); box-shadow: 0 1px 0 var(--line), 0 30px 60px -44px rgba(26, 19, 14, .4); } .price.hl { background: var(--ink); color: var(--cream); } .price .tag { justify-self: start; } .price.hl .tag { background: var(--cream-fill); box-shadow: inset 0 0 0 1px var(--cream-line); color: var(--cream); } .price .amt { margin-top: 14px; font: 900 clamp(38px, 3.6vw, 54px)/.9 var(--display); letter-spacing: -.03em; white-space: nowrap; } .price .amt small { font-size: .4em; font-weight: 800; letter-spacing: 0; margin-left: .14em; } .price .unit { font-size: 15px; font-weight: 700; color: var(--ink-2); } .price.hl .unit { color: var(--cream-2); } .price p { font-size: 15px; line-height: 1.55; color: var(--ink-2); padding-top: 12px; border-top: 1px solid var(--line); margin-top: 6px; } .price.hl p { color: var(--cream-2); border-color: var(--cream-line); } .price-note { margin-top: 22px; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; max-width: 62em; } @media (max-width: 1024px) { .prices { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .prices { grid-template-columns: 1fr; } } /* ── FAQ ─────────────────────────────────────────────────────────────────── */ .faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .faq-list { display: grid; gap: 10px; } .faq details { border-radius: var(--r-card); background: var(--surface); box-shadow: 0 1px 0 var(--line); overflow: hidden; } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; font: 700 17px/1.35 var(--body); } .faq summary::-webkit-details-marker { display: none; } .faq summary .plus { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); transition: transform .4s var(--curve), background .25s, color .25s; } .faq summary .plus svg { width: 14px; height: 14px; } .faq details[open] summary .plus { transform: rotate(45deg); background: var(--ink); color: var(--cream); } .faq .ans { overflow: hidden; } .faq .ans p { padding: 0 22px 22px; color: var(--ink-2); font-size: 16px; line-height: 1.65; max-width: 44em; } .faq-side .lead a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } } /* ── La demande ──────────────────────────────────────────────────────────── */ .demo { overflow: clip; text-align: center; padding-bottom: clamp(100px, 14vw, 180px); } .demo .orb { position: absolute; z-index: 0; left: 50%; bottom: -55%; width: min(1300px, 140vw); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklch, var(--orange) 46%, transparent), color-mix(in oklch, var(--orange) 10%, transparent) 60%, transparent); pointer-events: none; } .demo .wrap { display: grid; justify-items: center; } .demo h2 { font-size: clamp(46px, 9.4vw, 150px); margin-bottom: clamp(18px, 3vw, 30px); } .demo .lead { margin: 0 auto clamp(26px, 4vw, 40px); } .demo .ctas { justify-content: center; } .demo-mail { margin-top: 22px; font-size: 15px; color: var(--cream-2); } .demo-mail a { color: var(--cream); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* ── Le pied ─────────────────────────────────────────────────────────────── */ .foot { position: relative; padding: clamp(56px, 8vw, 96px) 0 28px; background: var(--night); color: var(--cream-2); font-size: 14.5px; border-top: 1px solid var(--cream-line); overflow: clip; } .foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; } .foot .logo { margin-bottom: 14px; } .foot h4 { font: 700 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--cream-3); margin-bottom: 16px; } .foot ul { display: grid; gap: 10px; font-weight: 600; } .foot a:hover { color: var(--cream); } .giant { display: flex; justify-content: center; margin-top: clamp(32px, 6vw, 72px); font: 900 clamp(90px, 25vw, 380px)/.78 var(--display); letter-spacing: -.06em; color: var(--acc); user-select: none; overflow: hidden; padding-bottom: .04em; } .giant span { display: inline-block; } .foot-bottom { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--cream-line); font-size: 13px; color: var(--cream-3); font-weight: 600; } @media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } } /* Le pied, à cinq colonnes (sur toutes les pages, l’accueil compris) */ .foot-grid-5 { grid-template-columns: 1.4fr repeat(4, 1fr); } @media (max-width: 900px) { .foot-grid-5 { grid-template-columns: 1fr 1fr; } } .foot-grid-5 > div:first-child p { max-width: 24em; margin-top: 4px; } /* D'une page à l'autre : un fondu, et la carte d'un secteur qui s'agrandit jusqu'au haut de sa page (view transitions entre documents, là où le navigateur sait le faire). */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; } ::view-transition-group(*) { animation-duration: .7s; animation-timing-function: cubic-bezier(.32, .72, 0, 1); } /* ── Mouvement réduit : tout est posé, rien ne bouge ─────────────────────── */ /* Sans mise en scène (mouvement réduit, ou GSAP absent) : les chapitres de l'OS se lisent comme sur un téléphone — tout déplié, chaque écran sous son texte — et le fil montre ses quatre arrêts. */ .reduced .chapters { grid-template-columns: 1fr; } .reduced .ch-stage, .reduced .ch-rail { display: none; } .reduced .ch-steps { padding-left: 0; gap: clamp(40px, 6vw, 64px); } .reduced .ch-step h3 { color: var(--cream); } .reduced .ch-step .ch-n { color: var(--acc); } .reduced .ch-body { grid-template-rows: 1fr; opacity: 1; } .reduced .ch-shot-m { display: block; margin-top: 24px; max-width: 980px; } .reduced .stop { opacity: 1; } .reduced .stop .phone { transform: none; } .reduced .fil-dot { display: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .hero-screen { transform: none !important; } .notif { opacity: 1 !important; } } /* ── Connect, mis en avant dans le panneau Produit ── */ .mp-connect { position: relative; display: flex; gap: 12px; align-items: center; margin-top: 12px; padding: 10px; border-radius: 14px; background: radial-gradient(90% 120% at 0% 0%, color-mix(in oklch, var(--orange) 34%, transparent), transparent 70%), rgba(251, 247, 241, .06); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--orange) 45%, transparent); transition: background .25s, transform .35s var(--curve); } .mp-connect:hover { transform: translateY(-2px); background-color: rgba(251, 247, 241, .1); } .mp-connect-shot { flex: none; width: 44px; height: 64px; border-radius: 9px; overflow: hidden; background: #000; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .7); } .mp-connect-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .mp-connect-txt { display: grid; gap: 2px; } .mp-connect-txt i { font: 800 10px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: var(--acc); } .mp-connect-txt b { font: 900 17px/1.1 var(--display); text-transform: uppercase; letter-spacing: -.01em; color: var(--cream); } .mp-connect-txt small { font: 500 12.5px/1.35 var(--body); color: var(--cream-2); } /* Connect : le téléphone qui rejoue l’app (la page connect/ et l’accueil) */ .only { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: var(--r-btn); background: var(--acc); color: #fff; font: 800 11px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; } .cx-stage { position: relative; display: grid; justify-items: center; } .cx-stage .phone { --pw: clamp(250px, 23vw, 320px); z-index: 2; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), inset 0 0 0 4px #000, 0 50px 100px -30px rgba(0, 0, 0, .7), 0 0 140px -30px color-mix(in oklch, var(--orange) 50%, transparent); } .cx-stage .screen { background: #F5F5F7; } .cx-l { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; } .cx-l.is-base { opacity: 1; } .cx-tall { position: absolute; inset: 0; overflow: hidden; opacity: 0; } .cx-tall img { width: 100%; height: auto; } .cx-chip { position: absolute; z-index: 4; } .cx-c1 { left: -14%; top: 16%; } .cx-c2 { right: -16%; top: 44%; } .cx-c3 { left: -10%; top: 70%; } .js .cx-chip { opacity: 0; } .reduced .cx-chip { opacity: 1; } .cx-home .points { margin-bottom: 34px; } .cx-home .points .p-ico { background: color-mix(in oklch, var(--orange) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--orange) 36%, transparent); } .cx-home .points li > div span { display: block; color: var(--cream-2); } .cx-home .kicker .only { margin-right: 10px; } .cx-home .cx-stage { margin-top: 12px; } /* ══ Jane, partout : la marque ✦ des modules où elle travaille, sa ligne dans le panneau ══ */ .ai-mark { display: inline-block; margin-left: 6px; font-style: normal; font-size: .82em; color: var(--acc); transform: translateY(-1px); } .mp-jane { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; padding: 6px 14px 6px 6px; border-radius: var(--r-btn); background: color-mix(in oklch, var(--orange) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--orange) 34%, transparent); color: var(--cream-2); font-size: 13.5px; transition: background .2s; } .mp-jane:hover { background: color-mix(in oklch, var(--orange) 22%, transparent); } .mp-jane img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--night), 0 0 0 3.5px var(--acc); animation: jane-breathe 3.2s ease-in-out infinite; } .mp-jane b { color: var(--cream); margin-right: 4px; } @keyframes jane-breathe { 0%, 100% { box-shadow: 0 0 0 2px var(--night), 0 0 0 3.5px color-mix(in oklch, var(--orange) 70%, transparent); } 50% { box-shadow: 0 0 0 2px var(--night), 0 0 0 6px color-mix(in oklch, var(--orange) 25%, transparent); } } @media (prefers-reduced-motion: reduce) { .mp-jane img { animation: none; } } .tag.t-jane { background: color-mix(in oklch, var(--orange) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--orange) 40%, transparent); color: var(--cream); letter-spacing: .06em; } .tag.t-jane::before { display: none; } .s-paper .tag.t-jane { color: var(--ink); } /* ══ « Propulsé par Jane » : le bloc de chaque module où elle agit ══════════════ */ .jh-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; } .jh-kick { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; } .jh-face { position: relative; width: 52px; height: 52px; flex: none; } .jh-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--night); } .jh-face::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--acc); animation: jh-ring 2.8s ease-in-out infinite; } @keyframes jh-ring { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .35; } } .jh-kick b { display: block; font: 900 13px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--acc); } .jh-kick small { display: block; font-size: 14px; color: var(--cream-2); } .jh-copy .lead { margin-bottom: 22px; } .jh-does { list-style: none; display: grid; gap: 12px; margin-bottom: 22px; } .jh-does li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 16.5px; line-height: 1.5; color: var(--cream); } .jh-does svg { width: 18px; height: 18px; margin-top: 3px; color: var(--acc); } .jh-rule { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--cream-fill); color: var(--cream-2); font-size: 14.5px; line-height: 1.5; } .jh-rule svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--cream); } .jh-vis { position: relative; padding-bottom: 40px; } .jh-halo { position: absolute; inset: 10% 5% 0; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklch, var(--orange) 34%, transparent), transparent); filter: blur(34px); pointer-events: none; } .jh-shot { position: relative; z-index: 1; border-radius: 20px; overflow: hidden; background: var(--app-night); box-shadow: inset 0 0 0 1px rgba(251, 247, 241, .1), 0 50px 100px -40px rgba(0, 0, 0, .9); } .jh-shot .crop { width: 100%; background-repeat: no-repeat; } .jh-shot .scan { position: absolute; left: 0; right: 0; top: -40%; height: 40%; background: linear-gradient(to bottom, transparent, color-mix(in oklch, var(--orange) 16%, transparent), transparent); mix-blend-mode: screen; pointer-events: none; } .jh-chat { position: absolute; z-index: 2; left: -6%; bottom: 0; width: min(420px, 92%); display: grid; gap: 10px; } .jh-ask { justify-self: end; max-width: 80%; padding: 11px 16px; border-radius: 18px 18px 4px 18px; background: var(--cream); color: var(--ink); font-weight: 700; font-size: 15px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .7); } .jh-say { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: end; } .jh-av img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--night), 0 0 0 3.5px var(--acc); } .jh-say > span:last-child { display: grid; gap: 4px; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: rgba(34, 26, 20, .86); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(251, 247, 241, .14), 0 30px 60px -24px rgba(0, 0, 0, .85); } .jh-say small { font: 800 11px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--acc); } .jh-txt { font-size: 15px; line-height: 1.5; color: var(--cream); } .jh-txt .c { opacity: 0; } .jh-txt .c.on { opacity: 1; } @media (max-width: 900px) { .jh-grid { grid-template-columns: 1fr; } .jh-vis { padding-bottom: 0; } .jh-chat { position: relative; left: auto; bottom: auto; width: 100%; margin-top: -28px; padding: 0 10px; } } @media (prefers-reduced-motion: reduce) { .jh-face::after { animation: none; } } /* ══ L'accueil : Jane, module par module ══════════════════════════════════════ */ .jx-head { display: grid; justify-items: center; text-align: center; } .jx-head .lead { margin: 0 auto; max-width: 44em; } .jx { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center; } .jx-mods { list-style: none; display: grid; gap: 4px; } .jx-mod { position: relative; display: grid; gap: 3px; width: 100%; padding: 13px 18px 15px; border: 0; border-radius: 16px; background: transparent; color: var(--cream-2); text-align: left; font: inherit; cursor: pointer; overflow: hidden; transition: background .25s; } .jx-mod b { font: 800 17px/1.25 var(--body); color: var(--cream); opacity: .55; transition: opacity .25s; } .jx-mod small { font-size: 14px; line-height: 1.4; } .jx-mod:hover b, .jx-mod.is-on b { opacity: 1; } .jx-mod.is-on { background: var(--cream-fill); box-shadow: inset 0 0 0 1px var(--cream-line); } .jx-mod:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } .jx-bar { position: absolute; left: 18px; right: 18px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--acc); transform: scaleX(0); transform-origin: left; } .jx-stage { position: relative; padding-bottom: 64px; } .jx-screen { position: relative; z-index: 1; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; background: var(--app-night); box-shadow: inset 0 0 0 1px rgba(251, 247, 241, .1), 0 60px 120px -40px rgba(0, 0, 0, .9); } .jx-shot { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(1.03); transition: opacity .7s var(--curve), transform 1.2s var(--curve); } .jx-shot.is-on { opacity: 1; transform: none; } /* un écran éteint ne prend pas le doigt : le toucher va à celui qu'on voit (et la loupe l'ouvre, lui) */ .jx-shot:not(.is-on) { pointer-events: none; } .jx-shot .crop { border-radius: 0; box-shadow: none; max-height: none; background-repeat: no-repeat; } .jx-shot.fit-w .crop { width: 100%; height: auto; } .jx-shot.fit-h .crop { height: 100%; width: auto; } .jx-screen .scan { position: absolute; z-index: 2; left: 0; right: 0; top: -40%; height: 40%; background: linear-gradient(to bottom, transparent, color-mix(in oklch, var(--orange) 14%, transparent), transparent); mix-blend-mode: screen; pointer-events: none; } .jx-chats { position: absolute; z-index: 3; left: -6%; bottom: 0; width: min(440px, 92%); } .jx-chat { display: none; gap: 10px; } .jx-chat.is-on { display: grid; } .jx-go { justify-self: start; margin-top: 2px; font-size: 14.5px; color: var(--cream); } .jx-rule { max-width: 760px; margin: clamp(28px, 4vw, 48px) auto 0; } @media (max-width: 900px) { .jx { grid-template-columns: 1fr; } .jx-mods { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scrollbar-width: none; scroll-snap-type: x proximity; } .jx-mods::-webkit-scrollbar { display: none; } .jx-mod { padding: 10px 16px 12px; scroll-snap-align: start; } .jx-mod small { display: block; font-size: 12px; white-space: nowrap; } .jx-mod b { font-size: 15px; } .jx-bar { left: 16px; right: 16px; bottom: 4px; } .jx-stage { padding-bottom: 0; } .jx-chats { position: relative; left: auto; bottom: auto; width: 100%; margin-top: -26px; padding: 0 10px; } } /* Le héros : Jane, d'entrée */ /* « Propulsé par Jane », au-dessus du titre : Jane, son étiquette orange, la phrase en retrait, la flèche dans un rond. Un faisceau de lumière fait lentement le tour du liseré — l'IA est là, en direct, sans rien qui clignote. */ @property --hj-a { syntax: ''; inherits: false; initial-value: 0deg; } .hero-jane { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 12px; max-width: 100%; margin-bottom: clamp(28px, 4.6vh, 44px); padding: 6px 7px 6px 6px; border-radius: var(--r-btn); background: linear-gradient(180deg, rgba(44, 32, 24, .82), rgba(26, 19, 14, .82)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(251, 247, 241, .07), 0 12px 32px -14px rgba(0, 0, 0, .75), 0 0 46px -20px color-mix(in oklch, var(--orange) 80%, transparent); color: var(--cream-2); font: 500 14px/1.35 var(--body); text-align: left; transition: box-shadow .3s var(--curve), translate .3s var(--curve); } .hero-jane::before { content: ''; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; background: conic-gradient(from var(--hj-a), rgba(251, 247, 241, .13) 0deg, rgba(251, 247, 241, .13) 240deg, color-mix(in oklch, var(--orange) 85%, transparent) 300deg, #FFE7CF 326deg, rgba(251, 247, 241, .13) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: hj-orbit 6s linear infinite; pointer-events: none; } @keyframes hj-orbit { to { --hj-a: 360deg; } } /* le soulèvement passe par « translate », pas « transform » : l'arrivée du héros (GSAP) anime transform, une transition dessus le figeait à mi-course, collé au titre */ .hero-jane:hover { translate: 0 -1px; box-shadow: inset 0 1px 0 rgba(251, 247, 241, .09), 0 16px 36px -14px rgba(0, 0, 0, .8), 0 0 56px -16px color-mix(in oklch, var(--orange) 90%, transparent); } .hero-jane img { width: 32px; height: 32px; flex: none; border-radius: 50%; object-fit: cover; animation: jane-breathe 3.2s ease-in-out infinite; } .hj-tag { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 28px; padding: 0 13px 0 11px; border-radius: var(--r-btn); background: color-mix(in oklch, var(--orange) 17%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--orange) 40%, transparent); color: var(--cream); font: 700 13px/1 var(--body); white-space: nowrap; } .hj-tag i { font-style: normal; font-size: 11px; color: var(--acc); } .hj-txt { min-width: 0; } .hj-go { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin-left: 6px; border-radius: 50%; background: var(--cream-fill); color: var(--cream); transition: background .25s, color .25s, transform .35s var(--curve); } .hj-go svg { width: 14px; height: 14px; } .hero-jane:hover .hj-go { background: var(--acc); color: #fff; transform: translateX(2px); } /* au téléphone : une carte nette — Jane à gauche, l'étiquette en haut, la phrase dessous, la flèche à droite */ @media (max-width: 640px) { .hero-jane { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 6px; align-items: center; width: 100%; padding: 11px 12px 11px 11px; border-radius: 18px; font-size: 12.5px; line-height: 1.4; } .hero-jane img { grid-row: 1 / 3; width: 38px; height: 38px; } .hj-tag { justify-self: start; height: 22px; padding: 0 9px 0 8px; font-size: 11.5px; } .hj-txt { grid-column: 2; grid-row: 2; } .hj-go { grid-column: 3; grid-row: 1 / 3; margin-left: 0; } } @media (prefers-reduced-motion: reduce) { .hero-jane img, .hero-jane::before { animation: none; } } .seg-view .seg-shot { display: block; } .seg-view .seg-shot img { position: absolute; top: 8%; right: -6%; width: 78%; height: auto; border-radius: 18px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(251, 247, 241, .1); } .crop.crop-l { background-color: #F6F5F2; } /* ══ Au doigt (24 octobre 2026) : l'accueil se lit plus vite ══════════════════ Les fonctionnalités d'un temps deviennent des pastilles qui défilent de côté ; l'écran de celle qu'on touche est juste dessous, avec sa phrase et le lien vers sa page. Les sections respirent un peu moins. */ .fn-desc { display: none; } @media (max-width: 760px) { :root { --sec-y: clamp(64px, 16vw, 88px); } .ch-body > div { display: flex; flex-direction: column; } .ch-body p { order: 1; } .fns { order: 2; display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 16px var(--gutter) 4px; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-mask: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%); } .fns::-webkit-scrollbar { display: none; } .fns li { flex: none; scroll-snap-align: start; } .fn { width: auto; min-height: 44px; padding: 0 16px; border-radius: 14px; background: var(--cream-fill); box-shadow: inset 0 0 0 1px var(--cream-line); white-space: nowrap; display: inline-flex; align-items: center; } .fn::before { display: none; } .fn span { display: none; } .fn b { font-size: 15px; } .fn.is-on { background: var(--cream); box-shadow: none; } .fn.is-on b { color: var(--ink); } .ch-shot-m { order: 3; margin-top: 18px !important; } .ch-body .fn-desc { order: 4; display: block; margin-top: 14px; padding: 0 !important; color: var(--cream-2); font-size: 15.5px; line-height: 1.55; } .fn-more { order: 5; margin: 10px 0 0 !important; } .chapters:not(.ch-m) .ch-steps { gap: 48px !important; } } /* Les rangées qui défilent de côté s'arrêtent sur la gouttière, jamais contre le bord */ @media (max-width: 1024px) { .sibs, .pains, .trio, .stops, .jx-mods, .phones, .verdicts, .cx-steps, .seg-tabs { scroll-padding-inline: var(--gutter); } } /* Au doigt, chaque lien se touche sans viser : 44 px de haut, même dans le pied et le fil d'Ariane */ @media (pointer: coarse), (max-width: 760px) { .link { min-height: 44px; display: inline-flex; align-items: center; } .foot li a { display: inline-flex; align-items: center; min-height: 44px; } .foot ul { gap: 0 !important; } .foot .logo { min-height: 44px; display: inline-flex; align-items: center; } .crumbs a { display: inline-flex; align-items: center; min-height: 44px; } } /* Le poste de pilotage : la carte d'un groupe (ses pages, une phrase, un lien) sous l'écran */ .px .jx-stage { padding-bottom: 0; } .px .jx-chats { position: relative; left: auto; bottom: auto; width: 100%; margin-top: 16px; } .px-card { gap: 12px; padding: 18px 20px; border-radius: 20px; background: rgba(34, 26, 20, .82); box-shadow: inset 0 0 0 1px rgba(251, 247, 241, .12); } .px-p { color: var(--cream-2); font-size: 15.5px; line-height: 1.55; } .px-items { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; } .px-items li { padding: 7px 12px; border-radius: 10px; background: color-mix(in oklch, var(--orange) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--orange) 30%, transparent); color: var(--cream); font: 700 13.5px/1.2 var(--body); } .px .jx-mods { gap: 2px; } .px .jx-mod { padding: 11px 18px 13px; } @media (max-width: 900px) { .px .jx-chats { margin-top: 12px; padding: 0; } } /* ══ Le poste de pilotage : tout converge vers l'événement ═════════════════════ */ .px-hub { grid-template-columns: minmax(0, 12fr) minmax(0, 11fr); gap: clamp(24px, 3.4vw, 56px); } .hub { position: relative; aspect-ratio: 1; width: 100%; max-width: 640px; justify-self: center; } .hub-glow { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklch, var(--orange) 30%, transparent), transparent); filter: blur(30px); pointer-events: none; } .hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .hub-lines .hl { fill: none; stroke: rgba(251, 247, 241, .14); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .5s var(--curve), stroke-width .5s var(--curve); } .hub-lines .hl.is-on { stroke: var(--acc); stroke-width: 2.4; filter: drop-shadow(0 0 6px color-mix(in oklch, var(--orange) 70%, transparent)); } .hub-lines .hd { fill: rgba(251, 247, 241, .4); transition: fill .4s; } .hub-lines .hd.is-on { fill: #fff; filter: drop-shadow(0 0 3px var(--acc)); } .hub-core { position: absolute; left: 50%; top: 50%; z-index: 2; width: 38%; transform: translate(-50%, -50%); display: grid; gap: 8px; padding: 8px 8px 12px; border-radius: 20px; background: #201813; box-shadow: inset 0 0 0 1px rgba(251, 247, 241, .12), 0 30px 60px -24px rgba(0, 0, 0, .9), 0 0 0 0 color-mix(in oklch, var(--orange) 0%, transparent); } .hub-core.pulse { animation: hub-pulse 1.1s var(--out); } @keyframes hub-pulse { 0% { box-shadow: inset 0 0 0 1px rgba(251, 247, 241, .12), 0 30px 60px -24px rgba(0, 0, 0, .9), 0 0 0 0 color-mix(in oklch, var(--orange) 55%, transparent); } 100% { box-shadow: inset 0 0 0 1px rgba(251, 247, 241, .12), 0 30px 60px -24px rgba(0, 0, 0, .9), 0 0 0 26px color-mix(in oklch, var(--orange) 0%, transparent); } } .hc-poster { display: block; border-radius: 13px; overflow: hidden; aspect-ratio: 1100 / 508; } .hc-poster img { width: 100%; height: 100%; object-fit: cover; display: block; } .hc-body { display: grid; gap: 3px; padding: 0 4px; } .hc-state { display: inline-flex; align-items: center; gap: 6px; font: 800 10.5px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ok); } .hc-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); } .hc-body > b { font: 900 clamp(14px, 1.3vw, 18px)/1.1 var(--display); text-transform: uppercase; letter-spacing: -.01em; color: var(--cream); } .hc-body > small { font-size: 11.5px; line-height: 1.35; color: var(--cream-2); } .hc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--cream-line); } .hc-stats b { display: block; font: 800 12px/1.1 var(--display); color: var(--cream); font-variant-numeric: tabular-nums; white-space: nowrap; } .hc-stats small { display: block; font-size: 10px; line-height: 1.25; color: var(--cream-3); } .hub-nodes { position: absolute; inset: 0; list-style: none; display: block !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .hub-nodes li { display: contents; } .hub .hub-node { position: absolute; z-index: 3; width: 108px; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; padding: 6px; border-radius: 16px; background: none; box-shadow: none; text-align: center; } .hub .hub-node.is-on { background: none; box-shadow: none; } .hn-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #241B15; box-shadow: inset 0 0 0 1px rgba(251, 247, 241, .16), 0 12px 24px -12px rgba(0, 0, 0, .8); color: var(--cream-2); transition: background .4s var(--curve), color .4s, box-shadow .4s, transform .5s var(--spring); } .hn-ico svg { width: 20px; height: 20px; } .hub .hub-node b { font: 800 13.5px/1.15 var(--body); color: var(--cream); opacity: .62; transition: opacity .3s; } .hub .hub-node small { display: none; } .hub .hub-node:hover .hn-ico { transform: scale(1.08); } .hub .hub-node.is-on .hn-ico { background: var(--acc); color: #fff; transform: scale(1.14); box-shadow: 0 0 0 6px color-mix(in oklch, var(--orange) 22%, transparent), 0 0 34px 4px color-mix(in oklch, var(--orange) 55%, transparent); } .hub .hub-node.is-on b { opacity: 1; } .hub .hub-node .jx-bar { position: static; display: block; width: 34px; height: 2px; margin-top: -2px; } .px .jx-screen { aspect-ratio: 1.87; } .px-name { display: flex; align-items: center; gap: 10px; font: 900 16px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--cream); } .px-name .hn-ico { width: 30px; height: 30px; background: var(--acc); color: #fff; box-shadow: none; } .px-name .hn-ico svg { width: 15px; height: 15px; } @media (prefers-reduced-motion: reduce) { .hub-lines .hd { display: none; } .hub-core.pulse { animation: none; } } @media (max-width: 1100px) and (min-width: 901px) { .hub .hub-node { width: 92px; } .hub .hub-node b { font-size: 12px; } .hn-ico { width: 40px; height: 40px; } } @media (max-width: 900px) { /* au téléphone aussi, le cercle : l'événement au centre, les neuf modules autour, les lignes qui convergent — en plus petit, sans rien en retirer */ .px-hub { grid-template-columns: minmax(0, 1fr); } .hub { max-width: 440px; min-width: 0; } .px .jx-stage { min-width: 0; } .hub-core { width: 44%; gap: 5px; padding: 6px 6px 8px; border-radius: 14px; } .hc-poster { border-radius: 9px; } .hc-body { gap: 2px; padding: 0 2px; } .hc-state { font-size: 8.5px; gap: 4px; } .hc-state i { width: 5px; height: 5px; } .hc-body > b { font-size: 12.5px; } .hc-body > small { font-size: 9.5px; } .hc-stats { gap: 3px; margin-top: 4px; padding-top: 5px; } .hc-stats b { font-size: 10.5px; } .hc-stats small { font-size: 8.5px; } .hub .hub-node { width: 88px; gap: 4px; padding: 2px; } .hn-ico { width: 36px; height: 36px; } .hn-ico svg { width: 16px; height: 16px; } .hub .hub-node b { font-size: 10.5px; } .hub .hub-node.is-on .hn-ico { transform: scale(1.1); box-shadow: 0 0 0 4px color-mix(in oklch, var(--orange) 22%, transparent), 0 0 22px 2px color-mix(in oklch, var(--orange) 55%, transparent); } .hub .hub-node .jx-bar { width: 26px; } } /* ══ TOUT TIENT DANS L'ÉCRAN (24 octobre 2026, Clément : « que les animations avec leur texte tiennent en une page ») ═════════════════════════════════════════════════════ Un écran de portable n'a que 620 à 670 px sous la barre. Chaque scène est donc bornée par la HAUTEUR disponible, pas seulement par la largeur : un téléphone mesure ~2,08 fois sa largeur, une fenêtre ou une tablette 1/1,6. Les grands titres suivent aussi la hauteur. */ :root { --avail: calc(100svh - var(--hdr) - 32px); } .h2 { font-size: clamp(36px, min(5.6vw, 10vh), 88px); } .h2-sm { font-size: clamp(30px, min(4.2vw, 7.6vh), 60px); } .sec-head { margin-bottom: clamp(28px, min(4.4vw, 6.5vh), 60px); } /* deux sections du même fond qui se suivent : leurs marges ne s'additionnent plus */ .s-night + .s-night, .s-paper + .s-paper, .s-deep + .s-deep { padding-top: calc(var(--sec-y) * .3); } /* le héros : ses cartes restent dans le premier écran */ .hero-h1 { font-size: clamp(44px, min(8.4vw, 13.5vh), 150px); } /* les fonctionnalités, épinglées : le temps ouvert tient sous la barre */ @media (min-width: 1025px) { .ch-step { padding: 8px 0; } .ch-step .ch-n { margin-bottom: 6px; } .ch-step h3 { font-size: clamp(24px, min(2.7vw, 4.8vh), 46px); } .ch-body p { padding-top: 10px; font-size: 16px; } .fns { padding-top: 10px; gap: 0; } .fn { padding: 7px 14px 7px 18px; } .fn b { font-size: 15.5px; } .fn-more { margin-top: 8px; } .ch-stage .win { max-width: calc((var(--avail) - 40px) * 1.6); margin-left: auto; } } @media (min-width: 1025px) and (max-height: 820px) { .ch-body p { display: none; } } /* le plan, la caisse, la porte, les métiers : bornés par la hauteur */ .plan-win { max-width: calc((var(--avail) - 70px) * 1.6); } .plan-phone { --pw: min(clamp(170px, 19vw, 270px), calc((var(--avail) - 40px) / 2.3)); } @media (min-width: 761px) { .pos-device { max-width: min(1040px, calc((var(--avail) - 130px) * 1.6)); } .pos-steps { max-width: min(1040px, max(720px, calc((var(--avail) - 130px) * 1.6))); } } .porte-stage { min-height: min(640px, var(--avail)); } .porte-stage .phone.main { --pw: min(clamp(250px, 23vw, 310px), calc((var(--avail) - 40px) / 2.08)); } .porte-stage .phone.side { --pw: min(clamp(180px, 16vw, 230px), calc((var(--avail) - 120px) / 2.08)); } .seg-view { min-height: min(clamp(460px, 44vw, 600px), calc(var(--avail) - 70px)); } @media (max-width: 640px) { .seg-view { min-height: 560px; } } /* le fil d'une nuit, épinglé */ @media (min-width: 1025px) { .stops { padding-top: 100px; } .stop .phone { --pw: min(clamp(120px, 18vh, 180px), 100%); } } /* Connect sur l'accueil : le texte et le téléphone dans le même écran */ .cx-home .split { align-items: center; } .cx-home h2 { font-size: clamp(30px, min(3.6vw, 6.6vh), 56px); } .cx-home .points { gap: 12px; margin-top: 22px; margin-bottom: 26px; } .cx-stage .phone { --pw: min(clamp(250px, 23vw, 320px), calc((var(--avail) - 30px) / 2.08)); } .cx-home .cx-c1 { left: -10%; } .cx-home .cx-c2 { right: -6%; } .cx-home .cx-c3 { left: -8%; } @media (min-width: 761px) and (max-height: 800px) { .vcard { max-height: 25vh; } .hero-jane { margin-bottom: 24px; } .hero .lead { margin-bottom: 28px; } .vcards-wrap { margin-top: 44px; } } /* ══════════════════════════════════════════════════════════════════════════════════════════ LE TÉLÉPHONE, À PARITÉ AVEC L'ORDINATEUR (Clément, 29 octobre 2026) Ce qu'il y a sur l'ordinateur reste sur le téléphone : on réarrange, on ne retire pas. Les apps se montrent toujours en format PC (jamais le tableau de bord sur téléphone), et les boutons gardent une taille normale : 44 px de cible, pas plus. ══════════════════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 760px) { /* La barre : la même que sur l'ordinateur, en plus serré — « PRO » compris */ .brand { gap: 8px; } .brand-plate { width: 34px; height: 34px; } .brand-word { font-size: 16px; } .brand-word small { margin-left: 5px; font-size: 9.5px; } .bar-actions { gap: 4px; } .bar-cta { position: relative; min-height: 36px; padding: 0 12px; border-radius: 9px; font-size: 13px; } .bar-cta::after { content: ''; position: absolute; inset: -4px 0; } .burger { width: 40px; height: 40px; } .burger span { left: 10px; } .burger span:first-child { top: 15px; } .burger span:last-child { top: 23px; } .burger[aria-expanded="true"] span:first-child, .burger[aria-expanded="true"] span:last-child { top: 19px; } /* Les boutons : une taille normale */ .btn { height: 48px; padding: 0 18px; gap: 8px; font-size: 15px; } .btn svg { width: 16px; height: 16px; } .btn-sm { height: 40px; padding: 0 14px; font-size: 14px; } .ctas { gap: 8px; } /* Le menu : ce que montrent les panneaux de l'ordinateur — Jane, les apps, Connect, les secteurs en images, les ressources avec leur icône */ .menu { gap: 12px; padding-top: calc(var(--hdr) + 12px); } .mm-jane { display: flex; align-items: center; gap: 10px; margin: 14px 0 2px; padding: 8px 12px 8px 8px; border-radius: 12px; background: color-mix(in oklch, var(--orange) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--orange) 30%, transparent); font: 500 13px/1.35 var(--body); color: var(--cream-2); } .mm-jane img { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--night), 0 0 0 3.5px var(--acc); animation: jane-breathe 3.2s ease-in-out infinite; } .mm-jane b { color: var(--cream); margin-right: 4px; } .mm-list a { padding: 10px 0; } .mm-list b { font-size: 16px; } .mm-list small { font-size: 13.5px; } .mm-apps { display: grid; gap: 6px; margin-top: 8px; } .mm-apps a { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: var(--cream-fill); box-shadow: inset 0 0 0 1px var(--cream-line); } .mm-apps .tag { justify-self: start; height: 24px; font-size: 10.5px; background: var(--cream-fill); box-shadow: inset 0 0 0 1px var(--cream-line); color: var(--cream); } .mm-apps small { font: 500 13.5px/1.35 var(--body); color: var(--cream-2); } .mm-connect { margin: 8px 0 6px; } .mm-sects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; padding: 14px 0 6px; } .mm-sects .mp-sect { padding: 0; } .mm-sects .mp-thumb { aspect-ratio: 16 / 10; margin-bottom: 4px; } .mm-res { padding-top: 6px; } .mm-res a { margin: 0; padding: 12px 0; border-radius: 0; border-bottom: 1px solid var(--cream-line); } .mm-res a:hover { background: none; } .mm-ctas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mm-ctas .btn { height: 46px; padding: 0 10px; font-size: 14.5px; } } @media (prefers-reduced-motion: reduce) { .mm-jane img { animation: none; } } /* L'OS au téléphone, épinglé comme sur l'ordinateur (.ch-m, posé par le script) : la fenêtre en haut, puis le rail et les quatre temps ; celui qu'on traverse s'ouvre, avec ses fonctionnalités. */ @media (max-width: 1024px) { .chapters.ch-m { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; } .chapters.ch-m .ch-stage { display: block; order: -1; } .chapters.ch-m .ch-steps { padding-left: 18px; gap: 0; } .chapters.ch-m .ch-rail { display: block; top: 6px; bottom: 6px; } .chapters.ch-m .ch-step { padding: 7px 0; } .chapters.ch-m .ch-step .ch-n { margin-bottom: 5px; font-size: 11.5px; color: var(--cream-3); } .chapters.ch-m .ch-step h3 { font-size: clamp(24px, 6.6vw, 34px); color: var(--cream-3); } .chapters.ch-m .ch-step.is-on .ch-n { color: var(--acc); } .chapters.ch-m .ch-step.is-on h3 { color: var(--cream); } .chapters.ch-m .ch-body { grid-template-rows: 0fr; opacity: 0; } .chapters.ch-m .ch-step.is-on .ch-body { grid-template-rows: 1fr; opacity: 1; } .chapters.ch-m .ch-body p { padding-top: 8px; font-size: 15px; line-height: 1.5; } .chapters.ch-m .ch-shot-m { display: none !important; } .chapters.ch-m .fns { padding-top: 10px; } .chapters.ch-m .ch-body .fn-desc { margin-top: 10px; font-size: 14.5px; line-height: 1.5; } .chapters.ch-m .fn-more { margin-top: 6px !important; } } /* Le fil au téléphone, comme sur l'ordinateur (.fil-m, posé par le script) : la section s'épingle, les quatre arrêts passent de côté, la ligne se dessine et le point la suit. */ @media (max-width: 1024px) { .fil-m .fil-move { width: max-content; will-change: transform; } .fil-m .fil-line, .fil-m .fil-dot { display: block; } .fil-m .fil-line { height: 76px; } .fil-m .stops { display: flex; width: max-content; overflow: visible; margin: 0; padding: 84px 0 0; gap: 18px; scroll-snap-type: none; } .fil-m .stop { flex: none; width: min(74vw, 340px); opacity: .35; } .fil-m .stop.is-on { opacity: 1; } .fil-m .stop .phone { --pw: min(150px, 19vh); transform: translateY(20px); } .fil-m .stop.is-on .phone { transform: none; } .fil-m .stop p { font-size: 14.5px; line-height: 1.5; } .fil-m .stop h3 { font-size: 17px; } .fil-m .stop time { font-size: 28px; } } /* Ce que le téléphone avait perdu, rendu : les bulles de Connect, la légende du plan, les deux téléphones de côté à la porte, l'écran PC des métiers. Plus petits, aux mêmes places. */ @media (max-width: 1100px) { .cx-chip { max-width: 220px; gap: 8px; padding: 7px 10px 7px 7px; border-radius: 14px; } .cx-chip .notif-ico { width: 30px; height: 30px; border-radius: 9px; } .cx-chip .notif-ico svg { width: 15px; height: 15px; } .cx-chip .notif-txt b { font-size: 12.5px; } .cx-chip .notif-txt small { font-size: 11px; } .cx-stage .cx-c1, .cx-home .cx-c1, .cx-hero .cx-c1 { left: -3%; top: 14%; } .cx-stage .cx-c2, .cx-home .cx-c2, .cx-hero .cx-c2 { left: auto; right: -3%; top: 46%; } .cx-stage .cx-c3, .cx-home .cx-c3, .cx-hero .cx-c3 { left: -1%; top: 74%; } } /* au téléphone, les bulles de Connect restent dans l'écran : contre ses bords, jamais au-delà */ @media (max-width: 760px) { .cx-chip { max-width: 196px; } .cx-stage .cx-c1, .cx-home .cx-c1, .cx-hero .cx-c1 { left: 0; } .cx-stage .cx-c2, .cx-home .cx-c2, .cx-hero .cx-c2 { right: 0; } .cx-stage .cx-c3, .cx-home .cx-c3, .cx-hero .cx-c3 { left: 0; } } @media (max-width: 820px) { .plan-cap { right: auto; left: 0; bottom: 22px; padding: 8px 12px; font-size: 13px; } } @media (max-width: 1100px) { .porte-stage { min-height: 0; padding: 24px 0; } .porte-stage .phone.side { --pw: clamp(130px, 38vw, 200px); opacity: .5; } .porte-stage .phone.side.l { left: 6px; top: 10%; } .porte-stage .phone.side.r { right: 6px; top: 18%; } } @media (max-width: 760px) { .porte-stage .phone.main { --pw: min(232px, 60vw); } } @media (max-width: 640px) { .seg-view .seg-shot img { top: 16px; right: -14%; width: 96%; border-radius: 12px; } .seg-view::after { background: linear-gradient(to top, rgba(14, 11, 9, .96) 38%, rgba(14, 11, 9, .55) 62%, rgba(14, 11, 9, .1)); } } /* La loupe (core.js) : l'écran PC en grand, à la hauteur du téléphone, qu'on parcourt du doigt */ .zoom-tag { display: none; } @media (max-width: 900px), (hover: none) { [data-zoom] { cursor: zoom-in; -webkit-tap-highlight-color: transparent; } [data-zoom] .zoom-tag, .crop[data-zoom] .zoom-tag { position: absolute; z-index: 6; right: 8px; top: 8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(20, 15, 11, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(251, 247, 241, .2), 0 6px 16px -6px rgba(0, 0, 0, .7); pointer-events: none; } .zoom-tag svg { width: 15px; height: 15px; fill: none; stroke: var(--cream); stroke-width: 2; stroke-linecap: round; } .crop[data-zoom] { position: relative; } /* en haut à droite : le bas des écrans porte souvent une bulle, un téléphone, une notification */ .win[data-zoom] .zoom-tag { top: 42px; } } .loupe { position: fixed; inset: 0; z-index: 200; background: rgba(12, 9, 7, .96); opacity: 0; transition: opacity .25s var(--curve); } .loupe.on { opacity: 1; } .loupe[hidden] { display: none; } .loupe-scroll { position: absolute; inset: 0; display: flex; align-items: center; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: calc(env(safe-area-inset-top) + 64px) 0 calc(env(safe-area-inset-bottom) + 56px); } .loupe-scroll img { flex: none; display: block; height: 100%; width: auto; max-width: none; margin: 0 16px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(251, 247, 241, .12); } .loupe-x { position: absolute; z-index: 2; top: calc(env(safe-area-inset-top) + 12px); right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(251, 247, 241, .12); color: var(--cream); cursor: pointer; } .loupe-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } .loupe-hint { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 18px); text-align: center; font: 600 13px/1 var(--body); color: var(--cream-3); pointer-events: none; } /* dans le héros, la loupe se pose en haut de la fenêtre : le bas est sous les notifications */ /* sur le plan, le téléphone du client couvre la droite de la fenêtre : la loupe passe à gauche */ @media (max-width: 900px), (hover: none) { .plan-win .zoom-tag { left: 8px; right: auto; } } /* Les secteurs du héros, au téléphone et à la tablette : une grille où les six cartes se voient en entier (trois colonnes, puis deux), au lieu d'une rangée qu'on coupe au bord de l'écran */ @media (max-width: 900px) { .vcards-wrap { width: 100%; margin-left: 0; margin-right: 0; } .vcards-l { padding: 0; } .vcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; overflow: visible; padding: 0; scroll-snap-type: none; } .vcards li { width: auto; } .vcard { aspect-ratio: 4 / 3; border-radius: 16px; } } @media (max-width: 560px) { .vcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .vcard { aspect-ratio: 5 / 4; border-radius: 14px; } .vc-body { gap: 2px; padding: 10px 34px 10px 11px; } .vc-body b { font-size: 14.5px; } .vc-body small { font-size: 11.5px; line-height: 1.3; } .vc-go { right: 9px; bottom: 10px; width: 24px; height: 24px; } .vc-go svg { width: 12px; height: 12px; } } /* Les secteurs au téléphone : la rangée courbe (home.js). Les cartes sont coupées en bandes, chacune une facette du cylindre ; les bouts se fondent dans la page. La liste des liens reste dans la page, invisible, pour les lecteurs d'écran (elle réapparaît si le clavier y entre). */ .bend { display: none; } @media (max-width: 760px) { .vcards-wrap.has-bend .vcards:not(:focus-within) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .bend { display: block; position: relative; height: clamp(206px, 56vw, 260px); margin: 0 calc(var(--gutter) * -1); text-align: left; opacity: 0; transition: opacity .6s var(--curve); } .bend.ready { opacity: 1; } .bend-stage { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } .bend-tile { position: absolute; transform-style: preserve-3d; pointer-events: auto; cursor: pointer; will-change: transform; -webkit-tap-highlight-color: transparent; } .bend-slice { position: absolute; top: 0; overflow: hidden; background: #120D0A; } .bend-slice:first-child { border-radius: 16px 0 0 16px; } .bend-slice:last-child { border-radius: 0 16px 16px 0; } .bend-card { position: absolute; top: 0; display: block; } .bend-card img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } .bend-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 11, 9, .92) 6%, rgba(14, 11, 9, .25) 52%, rgba(14, 11, 9, .05)); } .bend-txt { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 10px 10px 12px 11px; } .bend-txt b { font: 800 14px/1.2 var(--body); color: var(--cream); } .bend-txt small { font: 600 11px/1.3 var(--body); color: var(--cream-2); } .bend-card .vc-go { z-index: 1; top: 9px; right: 9px; bottom: auto; width: 24px; height: 24px; background: rgba(251, 247, 241, .16); } .bend-card .vc-go svg { width: 12px; height: 12px; } } @media (max-width: 760px) and (prefers-reduced-motion: reduce) { .bend-tile { animation-play-state: paused !important; } } /* Au téléphone, les deux boutons d'un appel tiennent sur UNE ligne, un peu plus petits ; si un libellé est long, il passe à la ligne DANS son bouton, jamais le bouton sous l'autre. */ @media (max-width: 560px) { .ctas { flex-wrap: nowrap; gap: 8px; } .ctas .btn { flex: 0 1 auto; min-width: 0; height: auto; min-height: 44px; padding: 10px 16px; font-size: 14px; line-height: 1.2; white-space: normal; text-align: center; } .ctas .btn svg { width: 14px; height: 14px; } .menu .ctas .btn, .mm-ctas .btn { flex: 1 1 0; } } /* Le haut de l'accueil au téléphone : de l'air entre chaque bloc, un texte qui se lit */ @media (max-width: 560px) { .hero { padding-top: calc(var(--hdr) + 34px); } .hero-jane { margin-bottom: 30px; padding: 10px 12px 10px 10px; background: linear-gradient(180deg, rgba(44, 32, 24, .62), rgba(26, 19, 14, .62)); } .hero-jane img { width: 34px; height: 34px; } .hero-jane .hj-txt { color: var(--cream-2); } .hero h1 { margin-bottom: 20px; } .hero .lead { max-width: 30em; margin-bottom: 28px; font-size: 15.5px; line-height: 1.6; } .vcards-wrap { margin-top: 48px; } } /* Le pied : yusu.io et Connect sur une ligne — Connect vit dans yusu.io */ .foot-with { color: var(--cream-3); } .foot-with a { color: inherit; } .foot-with a:hover { color: var(--cream); }