/* css/shop-home.css — the homepage (index.html, the site root), in the client's charter. One DOM, two layouts:
default · html.xpp-flat the flat page (no JS, ?tier=off, reduced motion, no WebGL, any 3D failure): stills in the
cards, sage bands where the film would play, no canvas.
html.xpp-3d the film layout: transparent stages ([data-xp-frame]) where the canvas (the sage studio)
frames the subject, the cards beside them (wide screens) or stacked under them (phones),
opaque blanc cassé bands where the film rests (data-xp-hold). Text always sits on an opaque
surface, never on the canvas.
html.xpp-on the canvas has drawn a first frame and fades in.
html.xp-live-crea / xp-live-cof that scene is built: its stage drops its still.
The hero is the client's artwork, flat in every mode: a blanc cassé wall, a recessed arch lit from the top right, a
palm's shadow swaying on the wall, the brand's sage hearts; in the niche the logo, the baseline, the title, the price
and the two actions. The page closes on a sage band that runs into the sage footer.
Markup: v2/_dev/blocks/home.mjs. Linked after (overrides css/shop.css). Questrial 400 only. */
html.home {
--gut: clamp(16px, 4vw, 64px);
--wrap: 1360px;
--top-space: calc(var(--top-h, 78px) + 12px);
--obar-space: calc(84px + env(safe-area-inset-bottom));
background: var(--field);
color: var(--ink);
scroll-padding-top: var(--top-space);
}
html.home body { margin: 0; background: var(--field); font: 400 17px/1.6 var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.home-main { position: relative; z-index: 1; display: block; }
.home-main img { max-width: 100%; }
.home-main :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.home-main [hidden] { display: none !important; }
/* ───────── shared type and surfaces ───────── */
.h2 { margin: 0; font: 400 var(--t-h2)/1.08 var(--font-sans); letter-spacing: var(--tr-h2); text-wrap: balance; }
.label + .h2, .dots + .h2 { margin-top: 18px; }
.dots--start { justify-content: flex-start; }
.lead { margin: 16px 0 0; max-width: 54ch; font-size: var(--t-lead); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.arrow-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 10px; color: var(--ink); font: 400 12.5px/1.2 var(--font-sans);
letter-spacing: var(--tr-caps); text-transform: uppercase; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.arrow-link .ico { width: 18px; height: 18px; transition: transform .3s var(--ease-out); }
.arrow-link:hover .ico { transform: translateX(4px); }
.panel { position: relative; z-index: 1; background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
/* ───────── the film layer: the canvas behind the page ───────── */
.xp-canvas, .xp-mark, .xs__start { display: none; }
html.xpp-3d .xp-canvas { display: block; position: fixed; inset: 0; z-index: 0; width: 100vw; height: 100vh; height: 100lvh; pointer-events: none;
opacity: 0; transition: opacity .9s var(--ease-out-soft); }
html.xpp-on .xp-canvas { opacity: 1; }
html.xp-grab .sig-stage { cursor: grab; }
html.xp-dragging, html.xp-dragging .sig-stage { cursor: grabbing; user-select: none; -webkit-user-select: none; }
/* stages: where the canvas shows the subject (3D), or a picture (flat); a still covers a stage until its scene is live */
.stage { position: relative; z-index: 0; }
.stage__still { display: block; isolation: isolate; }
.stage__still img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stage__hint { display: none; }
html.xpp-3d .stage__still { position: absolute; inset: 0; margin: auto; transition: opacity .6s ease-out, visibility 0s 0s; }
html.xpp-3d img.stage__still { width: min(82%, 560px); height: auto; max-height: 88%; object-fit: contain; }
html.xpp-3d img.stage__still--photo { width: min(88%, 620px); border-radius: var(--r-niche); }
html.xpp-3d picture.stage__still { overflow: hidden; }
html.xp-live-crea .sig-stage .stage__still, html.xp-live-cof .cof-stage .stage__still,
html.xp-live-geste .xgeste__stage .stage__still /* parked */ { opacity: 0; visibility: hidden; transition: opacity .6s ease-out, visibility 0s .6s; }
@media (pointer: fine) {
html.xpp-3d.xp-grab .stage__hint { display: inline-flex; position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); align-items: center; gap: 8px;
padding: 10px 18px; border-radius: var(--r-ctl); background: var(--paper); color: var(--ink); font: 400 11.5px/1.2 var(--font-sans);
letter-spacing: var(--tr-caps); text-transform: uppercase; white-space: nowrap; pointer-events: none; }
html.xp-dragging .stage__hint { opacity: 0; }
}
/* ═════════ 1 · the hero: the client's artwork (flat, every mode) ═════════ */
.ha {
--ha-wall: var(--blanc-casse);
--ha-niche: #FFFDF8; /* inside the arch, a breath lighter than the wall */
--ha-shade: 86 78 64; /* warm stone grey of the shadows (rgb) */
--ha-top: clamp(84px, 11.5vh, 112px);
position: relative; isolation: isolate; overflow: hidden;
min-height: 100vh; min-height: 100svh; box-sizing: border-box; padding-top: var(--ha-top);
background: var(--ha-wall); color: var(--ink);
}
/* the wall: two palm shadows (blur baked in the SVG; the page only sways them), four sage hearts cropped at the edges */
.ha__wall { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.ha__palm { position: absolute; display: block; max-width: none; height: auto; opacity: .15; will-change: transform; }
.ha__palm--a { top: -9%; right: -7%; width: min(1080px, 78vw); transform-origin: 96% 2%; animation: ha-sway 12s var(--ease-sine) infinite alternate; }
.ha__palm--b { bottom: -16%; left: -12%; width: min(760px, 52vw); opacity: .11; transform: rotate(168deg); transform-origin: 50% 50%;
animation: ha-sway-b 15s var(--ease-sine) infinite alternate; }
@keyframes ha-sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.6deg) translate3d(-10px, 6px, 0); } }
@keyframes ha-sway-b { from { transform: rotate(168deg); } to { transform: rotate(170.5deg) translate3d(8px, -4px, 0); } }
.ha__heart { color: var(--sauge); }
.ha__heart--1 { --hs: clamp(84px, 8.5vw, 132px); top: -32px; left: 9%; transform: rotate(-10deg); }
.ha__heart--2 { --hs: clamp(130px, 13vw, 210px); top: 13%; right: -46px; transform: rotate(12deg); }
.ha__heart--3 { --hs: clamp(120px, 11vw, 176px); top: 58%; left: -50px; transform: rotate(-6deg); }
.ha__heart--4 { --hs: clamp(160px, 15vw, 250px); bottom: -64px; right: 7%; transform: rotate(8deg); }
/* the arch: a niche cut into the wall, the light from the top right (shade on its left wall and under its top) */
.ha__arch { position: relative; width: clamp(380px, 58vw, 840px); min-height: calc(100vh - var(--ha-top)); min-height: calc(100svh - var(--ha-top));
margin: 0 auto; border-radius: var(--r-niche); background: var(--ha-niche);
box-shadow:
inset 30px 34px 46px -18px rgb(var(--ha-shade) / .30), /* the soffit and the left wall, in shade */
inset 8px 0 14px -6px rgb(var(--ha-shade) / .16), /* the left edge, closer */
inset -2px 0 0 rgb(255 255 255 / .9); } /* the right lip catches the light */
.ha__arch::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: linear-gradient(90deg, rgb(var(--ha-shade) / .13) 0, rgb(var(--ha-shade) / .05) 9%, transparent 20%, transparent 86%, rgb(255 255 255 / .35)); }
.ha__inner { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center;
padding: clamp(96px, 15vh, 150px) clamp(22px, 3.2vw, 52px) clamp(32px, 6vh, 64px); }
.ha__brand { display: grid; justify-items: center; gap: clamp(12px, 1.6vh, 18px); margin: 0; }
.ha__logo { display: block; width: clamp(240px, 23vw, 330px); height: auto; color: var(--sauge); fill: currentColor; }
.ha__baseline { display: block; padding-left: .34em; font: 400 clamp(10.5px, .82vw, 12.5px)/1.3 var(--font-sans); letter-spacing: .34em; text-transform: uppercase; color: var(--ink); }
.ha__title { max-width: 19ch; margin: clamp(30px, 5vh, 52px) 0 0; font: 400 var(--t-hero)/1.14 var(--font-sans); letter-spacing: -.012em; text-wrap: balance; }
.ha__offer { margin-top: clamp(16px, 2.4vh, 22px); }
.ha__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(20px, 3.2vh, 30px); }
.ha__service { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 20px; margin: clamp(18px, 2.8vh, 26px) 0 0; padding: 0; list-style: none;
font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.ha__service li { display: inline-flex; align-items: center; gap: 7px; }
.ha__service .ico { width: 17px; height: 17px; }
.ha__service .open-status { font-size: 14px; }
@media (max-width: 759.98px) {
.ha { --ha-top: 82px; }
.ha__arch { width: calc(100% - 16px); }
.ha__inner { padding: clamp(84px, 11.5vh, 104px) 18px 28px; }
.ha__logo { width: min(236px, 62vw); }
.ha__baseline { font-size: 10px; letter-spacing: .26em; padding-left: .26em; }
.ha__title { margin-top: 24px; font-size: clamp(24px, 6.8vw, 28px); }
.ha__cta { display: grid; width: 100%; max-width: 340px; }
.ha__service { gap: 4px 14px; font-size: 13.5px; }
.ha__palm--a { width: 150vw; top: -5%; right: -62%; }
.ha__palm--b { width: 110vw; left: -48%; bottom: -12%; }
.ha__heart--1 { --hs: 70px; top: -26px; left: 4%; }
.ha__heart--2 { --hs: 104px; top: 21%; right: -52px; }
.ha__heart--3 { --hs: 96px; top: 64%; left: -52px; }
.ha__heart--4 { --hs: 128px; bottom: -48px; right: -18px; }
}
@media (max-height: 760px) and (min-width: 760px) {
.ha__inner { padding-top: clamp(76px, 12vh, 96px); }
.ha__title { margin-top: 26px; }
}
/* ───────── cards (signatures, la coupe, coffrets): a square frame, the fruit in its niche ───────── */
.xcard { position: relative; z-index: 1; display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: 4px 16px; box-sizing: border-box;
padding: 14px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.xcard__media { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; isolation: isolate; }
.xcard__media::before { content: ""; position: absolute; z-index: -1; inset: 8% 10% 0; border-radius: var(--r-niche); background: var(--field-hi); }
.xcard__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.xcard__media--photo::before { display: none; }
.xcard__media--photo img { object-fit: cover; }
.xcard__body { display: grid; gap: 5px; align-content: start; min-width: 0; }
.xcard__kicker { margin: 0; font: 400 11px/1.3 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-2); }
.xcard__name { margin: 0; font: 400 clamp(22px, 1.8vw, 28px)/1.12 var(--font-sans); letter-spacing: -.008em; text-wrap: balance; }
.xcard__name a { color: inherit; text-decoration: none; }
.xcard__name a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.xcard__name--says { font-size: clamp(21px, 1.6vw, 25px); }
.xcard__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 2px 0 0; }
.xcard__price { font: 400 20px/1.15 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.xcard__w { font-size: 14.5px; color: var(--ink-2); }
.xcard__line { margin: 2px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.xcard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 12px; }
.xcard__more, .xcard__wa { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); font: 400 14.5px/1.2 var(--font-sans);
text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.xcard__wa .ico { width: 18px; height: 18px; }
.xcard__alt { min-height: 46px; padding: 0 20px; border: 1px solid var(--ink); border-radius: var(--r-ctl); background: transparent; color: var(--ink);
font: 400 13px/1 var(--font-sans); letter-spacing: var(--tr-btn); text-transform: uppercase; cursor: pointer; transition: background .2s ease-out, color .2s ease-out; }
.xcard__alt:hover { background: var(--ink); color: var(--cta-ink); }
.xcard__alt:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.xcard__alt[data-in-basket]::after { content: " · dans la commande"; text-transform: none; letter-spacing: 0; }
@media (min-width: 600px) {
.xcard { grid-template-columns: minmax(0, 1fr); padding: 0; overflow: hidden; }
.xcard__media { aspect-ratio: 5 / 4; border-bottom: 1px solid var(--line); }
.xcard__media::before { inset: 9% 24% 0; }
.xcard__body { padding: 18px 22px 22px; }
}
/* ───────── 2 · signatures · 5 · coffrets (flat: a sage band holding a grid of cards; the signatures: the citron and
« La coupe », then the figue, the kiwi and « Voir tous nos fruits ») ───────── */
.xs { padding: clamp(64px, 9vw, 120px) var(--gut); background: var(--sauge); }
.xs + .xs, .xgeste + .xs { margin-top: 0; }
.xs__grid { max-width: var(--wrap); margin: 0 auto; }
.xs__head { max-width: 760px; box-sizing: border-box; padding: clamp(26px, 3.4vw, 46px); }
.xs__range { margin: 12px 0 0; font-size: 18px; color: var(--ink); }
.xs__stage { display: none; }
.xstack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 18px; }
@media (min-width: 600px) { .xstack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1000px) { .xstack { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.xcard--all { grid-template-columns: minmax(0, 1fr); align-content: center; }
.xcard--all .xcard__actions { margin-top: 16px; }
@media (min-width: 600px) and (max-width: 999.98px) { .xcard--all { grid-column: 1 / -1; } }
@media (min-width: 1000px) {
.xcard--coupe { grid-column: span 2; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; }
.xcard--coupe .xcard__media { aspect-ratio: auto; height: 100%; min-height: 220px; border-bottom: 0; border-right: 1px solid var(--line); }
}
.xs__end { display: grid; gap: 6px; justify-items: start; max-width: 760px; box-sizing: border-box; margin-top: 18px; padding: 24px clamp(22px, 3vw, 34px); }
.xs__end-t { margin: 0; font: 400 clamp(21px, 1.6vw, 25px)/1.2 var(--font-sans); }
.xs__end-x { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.xs__end-list { display: grid; width: 100%; margin: 8px 0 4px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.xs__end-list .xcafe__i { padding: 14px 0 15px; }
/* film layout: the section is transparent (the canvas IS the sage band); wide screens — the cards in the left column,
the subject in the sticky stage on the right */
html.xpp-3d .ha { border-bottom: 1px solid var(--line); } /* the wall ends: the frost the creations reveal from is just as pale */
html.xpp-3d .xs { padding: 0 var(--gut); background: transparent; }
/* the film's first anchor: the top of the signatures, reached as the hero starts to leave (scroll-map: data-xp-at="1") */
html.xpp-3d .xs__start { display: block; height: 0; }
html.xpp-3d .xs__stage { display: block; position: sticky; top: var(--top-space); height: calc(100svh - var(--top-space) - 16px); }
html.xpp-3d .sig-stage { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
html.xpp-3d .xs .xcard__media { display: none; }
html.xpp-3d .xs .xcard { grid-template-columns: minmax(0, 1fr); padding: 0; overflow: visible; }
html.xpp-3d .xs .xcard__body { padding: 22px 24px 20px; }
html.xpp-3d .xstack { display: block; }
@media (min-width: 900px) {
html.xpp-3d .xs__grid { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 72px); }
html.xpp-3d .xs__col { grid-column: 1; grid-row: 1; padding: 16svh 0 36svh; }
html.xpp-3d .xs__stage { grid-column: 2; grid-row: 1; }
html.xpp-3d .xstack { margin-top: 32svh; }
html.xpp-3d .xstack > .xcard + .xcard { margin-top: 44svh; }
html.xpp-3d .xs--cof .xs__end { margin-top: 30svh; }
html.xpp-3d .xs .xcard__body { gap: 7px; padding: 28px 30px 26px; }
html.xpp-3d .xs .xcard__name { font-size: clamp(30px, 2.4vw, 38px); }
html.xpp-3d .xs .xcard__name--says { font-size: clamp(24px, 1.9vw, 29px); }
html.xpp-3d .xs .xcard__price { font-size: 23px; }
html.xpp-3d .xs .xcard__line { font-size: 16.5px; }
}
/* film layout: phones — the subject on top, the cards stacked at the bottom (each new card slides over the last one) */
@media (max-width: 899.98px) {
html.xpp-3d .xs { --stage-h: calc(100svh - var(--top-space) - var(--stack-h, 230px) - var(--obar-space) - 22px); }
html.xpp-3d .xs__grid { display: flex; flex-direction: column; }
html.xpp-3d .xs__stage { order: -1; height: var(--stage-h); margin-bottom: calc(-1 * var(--stage-h)); }
html.xpp-3d .xs__col { padding: 10svh 0 22svh; }
html.xpp-3d .xstack { margin-top: calc(var(--stage-h) + 24px); }
html.xpp-3d .xstack > .xcard { position: sticky; top: calc(100svh - var(--obar-space) - var(--stack-h, 230px) - 8px); min-height: var(--stack-h, 0px); }
html.xpp-3d .xstack > .xcard + .xcard { margin-top: 30svh; }
html.xpp-3d .xs .xcard__body { padding: 16px 18px 14px; }
html.xpp-3d .xs .xcard__kicker { display: none; }
html.xpp-3d .xs .xcard__actions { margin-top: 8px; }
html.xpp-3d .xs--cof .xs__end { margin-top: 24svh; }
html.xpp-3d .xcard--coupe .xcard__line { font-size: 15px; }
}
/* ───────── bands where the film rests (blanc cassé, opaque): comment commander, café, offre, questions ───────── */
.xband { position: relative; z-index: 1; padding: clamp(64px, 9vw, 120px) var(--gut); background: var(--field); }
.xband + .xband { padding-top: 0; }
.xband__in { max-width: var(--wrap); margin: 0 auto; }
.xband__head { max-width: 720px; }
.xband__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 30px; }
/* the three steps: a real sequence, on sage panels (the brand's « panneaux ») */
.osteps { display: grid; gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; counter-reset: ostep; }
@media (min-width: 800px) { .osteps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.osteps__i { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 6px 18px; padding: 24px 24px 26px; background: var(--sauge); }
.osteps__ico { grid-row: span 2; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--blanc-casse); color: var(--ink); }
.osteps__ico .ico { width: 22px; height: 22px; }
.osteps__t { margin: 4px 0 0; font: 400 19px/1.3 var(--font-sans); }
.osteps__x { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--band-ink-2); }
/* the welcome offer: a fogged pane of sage mist (js/shop/offer.js draws the breath on it) */
.offre { display: grid; gap: 26px; align-items: center; }
@media (min-width: 900px) { .offre { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: clamp(32px, 5vw, 80px); } }
.offre__glass { position: relative; display: grid; place-items: center; min-height: clamp(330px, 30vw, 420px); overflow: hidden; isolation: isolate; border-radius: var(--r-niche); text-align: center;
background: radial-gradient(120% 90% at 70% 8%, #F4F6F0 0%, #DCE4DD 55%, var(--sauge) 100%); }
.offre__under { padding: 64px 24px 84px; }
.offre__pct { margin: 0; font: 400 clamp(60px, 7vw, 92px)/.95 var(--font-sans); letter-spacing: -.03em; }
.offre__what { margin: 8px 0 0; font: 400 12.5px/1.3 var(--font-sans); letter-spacing: var(--tr-label); text-transform: uppercase; }
.offre__code { margin: 12px 0 0; font-size: 15.5px; color: var(--ink-2); }
.offre__code strong { color: var(--ink); font-weight: 400; letter-spacing: .12em; }
.offre__btn { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--paper); white-space: nowrap; }
html.js .offre__glass:not(.is-revealed) .offre__under { opacity: 0; visibility: hidden; }
html.js .offre__glass.is-revealed .offre__under { opacity: 1; visibility: visible; transition: opacity .7s ease-out .15s; }
.offre__glass.is-revealed .offre__under { padding-bottom: 36px; }
html:not(.js) .offre__under { padding-bottom: 36px; }
.faq { display: grid; gap: 24px; }
@media (min-width: 900px) { .faq { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; } }
/* ───────── 6 · café & boissons: the menu's own layout (name in capitals, price, one line) ───────── */
.xcafe__in { display: grid; gap: 30px; }
@media (min-width: 900px) { .xcafe__in { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: start; } }
.xcafe__list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .xcafe__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); } }
.xcafe__i { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; align-content: start; gap: 6px 16px; padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.xcafe__name { margin: 0; font: 400 14px/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }
.xcafe__price { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xcafe__line { grid-column: 1 / -1; margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
/* ───────── 4 · le geste — PARKED: not on the home any more (README « Le geste (parked) »); kept for its return ───────── */
.xgeste { position: relative; padding: clamp(64px, 9vw, 120px) var(--gut); background: var(--sauge); }
.xgeste__pin { display: grid; gap: 14px; max-width: var(--wrap); margin: 0 auto; }
.xgeste__panel { box-sizing: border-box; padding: clamp(26px, 3.4vw, 46px); }
.xgeste__stage { min-height: 240px; overflow: hidden; }
.xgeste__stage .stage__still { height: 100%; background: var(--sauge); }
.gsteps { display: grid; margin: 20px 0 0; padding: 0; list-style: none; }
.gsteps__i { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; padding: 14px 0; border-top: 1px solid var(--line);
font: 400 clamp(21px, 1.9vw, 27px)/1.2 var(--font-sans); color: var(--ink); transition: color .35s ease-out; }
.gsteps__sub { flex-basis: 100%; margin-top: 6px; font: 400 15.5px/1.45 var(--font-sans); color: var(--ink-2); }
@media (min-width: 900px) { .xgeste__pin { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 72px); align-items: stretch; } }
/* film layout: pinned for --geste-run of scroll; the markers (.xp-mark) tie the four steps to the film; the step on
screen is black, the others stone grey, a small black dot marks it */
html.xpp-3d .xgeste { --geste-run: 220svh; height: calc(100svh + var(--geste-run)); padding: 0 var(--gut); box-sizing: border-box; background: transparent; }
html.xpp-3d .xgeste__pin { position: sticky; top: 0; height: 100svh; box-sizing: border-box; padding: var(--top-space) 0 20px; align-items: center; }
html.xpp-3d .xgeste__stage { align-self: stretch; overflow: visible; }
html.xpp-3d .xp-mark { display: block; position: absolute; left: 0; top: calc(var(--m) * var(--geste-run)); width: 1px; height: 0; }
html.xpp-3d .gsteps__i { color: var(--ink-2); padding-left: 22px; }
html.xpp-3d .gsteps__i::before { content: ""; position: absolute; left: 0; top: calc(14px + .5em); width: 7px; height: 7px; margin-top: -3px; border-radius: 50%;
background: var(--ink); transform: scale(0); transition: transform .35s var(--ease-out); }
html.xpp-3d .gsteps__i.is-on { color: var(--ink); }
html.xpp-3d .gsteps__i.is-on::before { transform: none; }
@media (max-width: 899.98px) {
html.xpp-3d .xgeste { --geste-run: 200svh; }
html.xpp-3d .xgeste__pin { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding-bottom: var(--obar-space); }
html.xpp-3d .xgeste__stage { order: -1; flex: 1 1 auto; min-height: 0; }
html.xpp-3d .xgeste__panel { padding: 18px 20px 12px; }
html.xpp-3d .xgeste__panel .h2 { font-size: 25px; }
html.xpp-3d .gsteps { margin-top: 8px; }
html.xpp-3d .gsteps__i { padding-block: 9px; font-size: 19px; }
html.xpp-3d .gsteps__i::before { top: calc(9px + .5em); }
html.xpp-3d .gsteps__sub { font-size: 14px; margin-top: 2px; }
}
@media (max-width: 899.98px) and (max-height: 700px) { html.xpp-3d .gsteps__sub { display: none; } }
/* ───────── 9 · infos pratiques: the closing sage band, centred (it runs into the sage footer and its facts) ───────── */
.xinfos { position: relative; z-index: 1; overflow: hidden; padding: clamp(80px, 11vw, 150px) var(--gut) clamp(64px, 8vw, 112px); background: var(--band); color: var(--band-ink);
text-align: center; border-bottom: 1px solid rgb(0 0 0 / .14); }
.xinfos__heart { color: var(--blanc-casse); opacity: .62; }
.xinfos__heart--a { --hs: clamp(130px, 14vw, 230px); top: -54px; left: -36px; transform: rotate(-14deg); }
.xinfos__heart--b { --hs: clamp(90px, 8vw, 140px); bottom: -34px; right: 8%; transform: rotate(10deg); opacity: .5; }
.xinfos__in { position: relative; z-index: 1; display: grid; justify-items: center; max-width: 760px; margin: 0 auto; }
.xinfos .h2 { margin-top: 20px; }
.xinfos .lead { max-width: 52ch; color: var(--band-ink-2); }
.xinfos .open-status { margin-top: 20px; font-size: 14.5px; }
.xinfos__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
@media (max-width: 559.98px) { .xinfos__cta { display: grid; width: 100%; max-width: 340px; } }
/* ───────── reduced motion: the palm stays still, nothing slides ───────── */
@media (prefers-reduced-motion: reduce) {
.ha__palm { animation: none !important; }
.arrow-link .ico, .gsteps__i, .gsteps__i::before, .xp-canvas, .stage__still, .xcard__alt, .offre__under { transition: none !important; }
}