/* ============================================================ Leviatan Paris — Boutargue de mulet ============================================================ */ @property --p { syntax: ''; initial-value: 1; inherits: false; } :root { --ink: #0a0805; /* fond principal, presque noir */ --ink-soft: #0d0b08; --panel: #12100b; /* cartes */ --panel-dark: #17110a; /* volet cire d'abeille */ --cream: #f0e8d8; /* volet cire blanche */ --cream-ink: #2a1c0e; --bronze: #8a5a2b; --gold: #c9a227; --gold-lit: #e3c565; --text: #ece4d4; --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif; --sans: 'Jost', 'Futura', 'Avenir Next', system-ui, -apple-system, sans-serif; --gutter: 48px; --shell: 1240px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--sans); font-weight: 300; /* `clip` et surtout PAS `hidden` : `overflow-x: hidden` fait de un conteneur de défilement, et `position: sticky` se cale alors sur lui — un conteneur qui ne défile jamais. Sur Safari le héros collant et la colonne « Le geste » cessent de tenir et défilent comme le reste. `clip` rogne sans créer de conteneur : le collant reste intact. */ overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } h1, h2, h3 { font-weight: 500; margin: 0; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: var(--gold); text-decoration: none; transition: color .3s ease; } a:hover { color: var(--gold-lit); } ::selection { background: var(--gold); color: var(--ink); } :focus-visible { outline: 2px solid var(--gold-lit); outline-offset: 4px; } .eyebrow { font-family: var(--serif); font-size: 18px; font-style: italic; color: var(--gold); } .eyebrow--dark { color: var(--bronze); } /* ── Bouton flottant ────────────────────────────────────────── */ .wa-float { position: fixed; right: 32px; bottom: 32px; z-index: 60; display: inline-flex; align-items: center; justify-content: center; width: 92px; height: 92px; padding: 0 8px; border-radius: 50%; background: var(--gold); color: var(--ink); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; text-align: center; line-height: 1.3; font-weight: 500; box-shadow: 0 12px 40px rgba(201, 162, 39, .35); transition: transform .35s ease, background .3s ease, opacity .4s ease, visibility .4s; } .wa-float__mark { display: none; } .wa-float:hover { background: var(--gold-lit); color: var(--ink); transform: scale(1.08); } .js .wa-float[data-hidden] { opacity: 0; visibility: hidden; transform: scale(.7); } /* ── Hero ───────────────────────────────────────────────────── */ .hero { height: 260vh; position: relative; } .hero__stage { position: sticky; top: 0; /* Le cliché est détouré sur noir pur : la scène l'est aussi, sinon son rectangle se détache du fond de page. */ background: #000; height: 100vh; height: 100dvh; overflow: hidden; display: flex; align-items: center; justify-content: center; } .hero__media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform: scale(calc(1 + (1 - var(--hp, 0)) * .16)); filter: brightness(calc(.76 + var(--hp, 0) * .24)); will-change: transform, filter; } .hero__media img { height: min(78vh, 660px); width: auto; object-fit: contain; } /* Halo doré posé par-dessus la pièce : une flamme, pas un fond. */ .hero__glow { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 34% 46% at 50% 48%, rgba(201, 162, 39, .13), rgba(201, 162, 39, .05) 42%, transparent 72%); mix-blend-mode: screen; pointer-events: none; } .hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 8, 5, .94) 4%, rgba(10, 8, 5, .55) 26%, rgba(10, 8, 5, 0) 52%), linear-gradient(to bottom, rgba(10, 8, 5, .72) 2%, rgba(10, 8, 5, .18) 20%, rgba(10, 8, 5, 0) 40%); pointer-events: none; } .hero__type, .hero__tagline { position: absolute; inset: 0; z-index: 2; padding: 0 var(--gutter); pointer-events: none; text-align: center; } .hero__type { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding-top: 7vh; padding-bottom: 9vh; opacity: calc(1 - var(--hpOut, 0)); transform: translateY(calc(var(--hpOut, 0) * -60px)) scale(calc(1 - var(--hpOut, 0) * .06)); will-change: opacity, transform; } .hero__title { display: flex; flex-direction: column; gap: 14px; } .hero__logo { width: 158px; max-width: 44vw; height: auto; } .hero__title h1 { font-family: var(--serif); font-size: clamp(56px, 10vw, 140px); font-weight: 400; letter-spacing: .08em; line-height: 1; text-transform: uppercase; text-shadow: 0 4px 40px rgba(0, 0, 0, .55); } .hero__kicker { font-size: 13px; letter-spacing: 6px; text-transform: uppercase; color: rgba(236, 228, 212, .7); } .hero__tagline { display: flex; align-items: center; justify-content: center; opacity: var(--hpIn, 0); transform: translateY(calc((1 - var(--hpIn, 0)) * 50px)); will-change: opacity, transform; } .hero__tagline::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 46% 26% at 50% 50%, rgba(10, 8, 5, .86), rgba(10, 8, 5, .5) 55%, transparent 78%); } .hero__tagline p { position: relative; font-family: var(--serif); font-size: clamp(34px, 4.5vw, 60px); font-weight: 500; font-style: italic; line-height: 1.2; max-width: 820px; text-shadow: 0 4px 40px rgba(0, 0, 0, .6); } .hero__tagline em { color: var(--gold); font-style: italic; } .hero__cue { position: absolute; z-index: 2; bottom: 22px; left: 50%; transform: translateX(-50%); width: 1px; height: 64px; background: rgba(236, 228, 212, .18); overflow: hidden; opacity: calc(1 - var(--hpOut, 0)); } .hero__cue span { position: absolute; inset: 0; background: var(--gold); animation: cue 2.6s cubic-bezier(.7, 0, .3, 1) infinite; } @keyframes cue { 0% { transform: translateY(-100%); } 60% { transform: translateY(100%); } 100% { transform: translateY(100%); } } /* ── Manifeste ──────────────────────────────────────────────── */ .manifeste { max-width: 1000px; margin: 0 auto; padding: 150px var(--gutter); display: flex; flex-direction: column; gap: 10px; } .manifeste p { font-family: var(--serif); font-size: clamp(30px, 4vw, 52px); font-weight: 500; line-height: 1.25; text-wrap: balance; } /* ── Le geste ───────────────────────────────────────────────── */ .geste { max-width: var(--shell); margin: 0 auto; padding: 40px var(--gutter) 130px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 80px; align-items: start; } .geste__intro { position: sticky; top: 15vh; display: flex; flex-direction: column; gap: 18px; } .geste__intro h2 { font-family: var(--serif); font-size: clamp(38px, 4vw, 54px); line-height: 1.05; } .geste__intro p { font-size: 15px; line-height: 1.8; color: rgba(236, 228, 212, .6); max-width: 380px; } .geste__steps { display: flex; flex-direction: column; gap: 36px; } .step { border: 1px solid rgba(201, 162, 39, .3); background: var(--panel); padding: 44px 44px 40px; display: flex; flex-direction: column; gap: 14px; } .step__n { font-family: var(--serif); font-size: 62px; color: rgba(201, 162, 39, .45); line-height: 1; } .step__t { font-family: var(--sans); font-size: 16px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; } .step__d { font-size: 15px; line-height: 1.8; color: rgba(236, 228, 212, .6); } /* ── Les cires ──────────────────────────────────────────────── */ .cires { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 92vh; overflow: hidden; } @media (max-width: 1024px) { .cires { min-height: 0; } } .cire { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 90px 6vw; } .cire h2 { font-family: var(--serif); font-size: clamp(38px, 4vw, 54px); line-height: 1.05; } .cire p { font-size: 16px; line-height: 1.8; } .cire--light { background: var(--cream); color: var(--cream-ink); } .cire--light p { color: rgba(42, 28, 14, .75); } .cire--dark { background: var(--panel-dark); color: var(--text); border-left: 1px solid rgba(201, 162, 39, .35); } .cire--dark h2 { color: var(--gold); } .cire--dark p { color: rgba(236, 228, 212, .7); } .cire__fig { margin: 12px 0 0; height: 370px; display: flex; align-items: center; justify-content: center; } .cire__fig img { height: 100%; width: auto; object-fit: contain; } .cire--light .cire__fig img { height: 86%; filter: drop-shadow(0 26px 34px rgba(42, 28, 14, .22)); } .cire--dark .cire__fig img { filter: drop-shadow(0 26px 44px rgba(201, 162, 39, .16)); } /* ── La table ───────────────────────────────────────────────── */ .table { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; } .table__media { position: absolute; inset: 0; } .table__media img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 55%; transform: scale(calc(1.14 - var(--p) * .14)); will-change: transform; } .table__panel { position: relative; z-index: 2; width: 100%; margin-top: 46vh; padding: 220px 6vw 90px; background: linear-gradient(to top, rgba(10, 8, 5, .97) 46%, rgba(10, 8, 5, .86) 62%, rgba(10, 8, 5, .45) 80%, transparent); pointer-events: none; } .table__inner { max-width: var(--shell); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 60px; align-items: end; } .table__inner h2 { font-family: var(--serif); font-size: clamp(38px, 4vw, 54px); line-height: 1.05; } .conseils { display: flex; flex-direction: column; gap: 14px; max-width: 700px; } .conseils li { display: flex; gap: 16px; align-items: baseline; font-size: 15px; line-height: 1.7; color: rgba(236, 228, 212, .85); } .conseils__mark { width: 6px; height: 6px; flex-shrink: 0; background: var(--gold); transform: rotate(45deg); position: relative; top: -2px; } /* ── FAQ ────────────────────────────────────────────────────── */ .faq { max-width: 860px; margin: 0 auto; padding: 130px var(--gutter) 90px; } .faq > h2 { font-family: var(--serif); font-size: clamp(34px, 4vw, 46px); margin-bottom: 48px; text-align: center; } .faq__list { display: flex; flex-direction: column; } .faq__item { display: flex; flex-direction: column; gap: 10px; padding: 26px 0; border-top: 1px solid rgba(201, 162, 39, .25); } .faq__item h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; } .faq__item p { font-size: 15px; line-height: 1.7; color: rgba(236, 228, 212, .6); } /* ── Commander ──────────────────────────────────────────────── */ .commander { border-top: 1px solid rgba(201, 162, 39, .3); background: radial-gradient(ellipse at 50% 130%, rgba(201, 162, 39, .2), transparent 60%), var(--ink-soft); overflow: hidden; } .commander__inner { max-width: 900px; margin: 0 auto; padding: 140px var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; } .commander h2 { font-family: var(--serif); font-size: clamp(44px, 6vw, 76px); line-height: 1.1; } .commander__inner > p { font-size: 16px; line-height: 1.7; color: rgba(236, 228, 212, .65); max-width: 520px; } .commander__tel { font-size: 14px; letter-spacing: 3px; color: rgba(236, 228, 212, .5); } .commander__tel:hover { color: var(--gold-lit); } .btn { display: inline-flex; align-items: center; padding: 20px 48px; background: var(--gold); color: var(--ink); font-size: 14px; letter-spacing: 3px; text-transform: uppercase; font-weight: 500; transition: background .3s ease, transform .3s ease; } .btn:hover { background: var(--gold-lit); color: var(--ink); transform: translateY(-2px); } /* ── Pied de page ───────────────────────────────────────────── */ .footer { background: var(--ink-soft); padding: 0 var(--gutter) 40px; } .footer__inner { max-width: 900px; margin: 0 auto; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid rgba(236, 228, 212, .1); padding-top: 24px; font-size: 12px; letter-spacing: 1px; color: rgba(236, 228, 212, .35); } /* ── Animations pilotées au défilement ──────────────────────── */ .js .a-glow { opacity: calc(.14 + var(--p) * .86); } .js .a-fade { opacity: calc(.05 + var(--p) * .95); } .js .a-rise { opacity: var(--p); transform: translateY(calc((1 - var(--p)) * 70px)); } .js .a-left { opacity: var(--p); transform: translateX(calc((1 - var(--p)) * -90px)); } .js .a-right { opacity: var(--p); transform: translateX(calc((1 - var(--p)) * 90px)); } .js .a-pop { opacity: var(--p); transform: scale(calc(.85 + var(--p) * .15)); } .js .a-rise, .js .a-left, .js .a-right, .js .a-pop { will-change: opacity, transform; } .js .a-fade { will-change: opacity; } /* ── Adaptatif ──────────────────────────────────────────────── */ @media (min-width: 1025px) { /* le bouton flottant occupe le coin : on lui réserve sa marge */ .table__panel { padding-right: calc(6vw + 120px); } } @media (max-width: 1024px) { :root { --gutter: 32px; } /* Le mot déborderait sur le texte courant : on passe au pictogramme. */ .wa-float { width: 62px; height: 62px; padding: 0; } .wa-float__word { display: none; } .wa-float__mark { display: block; } .geste { grid-template-columns: 1fr; gap: 48px; padding-bottom: 100px; } .geste__intro { position: static; } .geste__intro p { max-width: none; } .cires { grid-template-columns: 1fr; } .cire--dark { border-left: 0; border-top: 1px solid rgba(201, 162, 39, .35); } .table__inner { grid-template-columns: 1fr; gap: 28px; align-items: start; } .table__panel { margin-top: 45vh; padding-top: 160px; } } @media (max-width: 720px) { :root { --gutter: 24px; } .wa-float { right: 16px; bottom: 16px; width: 56px; height: 56px; } .hero { height: 190vh; } .hero__media img { height: min(62vh, 520px); } .hero__logo { width: 118px; } .hero__type { padding-top: 5vh; padding-bottom: 7vh; } .hero__kicker { font-size: 10px; letter-spacing: 2.6px; } .hero__title h1 { font-size: clamp(46px, 13vw, 140px); } .manifeste { padding: 96px var(--gutter); } .step { padding: 32px 28px 30px; } .step__n { font-size: 48px; } .cire { padding: 72px var(--gutter); } .cire__fig, .cire--dark .cire__fig { height: 240px; } .table__panel { margin-top: 38vh; padding: 130px var(--gutter) 56px; } .faq { padding: 96px var(--gutter) 72px; } .faq > h2 { margin-bottom: 32px; } .faq__item h3 { font-size: 21px; } .commander__inner { padding: 96px var(--gutter); gap: 22px; } .btn { padding: 18px 34px; font-size: 13px; letter-spacing: 2px; } .footer__inner { flex-direction: column; gap: 8px; } } /* ── Accessibilité : mouvement réduit ───────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .a-glow, .js .a-fade, .js .a-rise, .js .a-left, .js .a-right, .js .a-pop { opacity: 1 !important; transform: none !important; } .hero { height: auto; } .hero__stage { position: static; height: 100vh; height: 100dvh; } .hero__media { transform: none !important; filter: none !important; } .hero__type { opacity: 1 !important; transform: none !important; } .hero__tagline { display: none; } .hero__cue span { animation: none; } .table__media img { transform: none !important; } .wa-float, .btn { transition: none; } } /* ── Sans JavaScript : tout reste lisible ───────────────────── */ html:not(.js) .hero { height: 100vh; height: 100dvh; } html:not(.js) .hero__tagline { display: none; } html:not(.js) .hero__media { transform: none; filter: none; }