, but the accent has to be resolved at the root: the cursor blob is appended to , outside .vo3-page, and would otherwise stay terracotta on the plum and slate pages. Matching upwards with :has() is what lets one class on

colour the whole document. */ :root:has(.vo3-page--evenement) { --vo3-accent: var(--vo-color-evenement); } :root:has(.vo3-page--entreprise) { --vo3-accent: var(--vo-color-entreprise); } .vo3-page { position: relative; background: var(--vo3-paper); overflow-x: clip; } /* ========================================================================== Section entrance vocabulary — three gestures, and no more. The pages already carry a lot of motion (the highlight list, the strips, the full-frame gallery), so arriving on a section always draws from the same small set, which turns the scroll into a rhythm rather than a parade of tricks: fade — lifts and fades in (the default for copy and cards) rise — the line lifts out from behind its own edge (titles) settle — the photograph eases out of a slight zoom (images) The `is-primed` / `is-in` classes are only ever applied by the enter controller: with no JS, or under reduced motion, nothing here applies and every section is plainly visible. ========================================================================== */ /* --- fade ---------------------------------------------------------------- */ [data-enter="fade"].is-primed { opacity: 0; transform: translateY(30px); transition: none; } [data-enter="fade"].is-in { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.22, .61, .36, 1) var(--enter-delay, 0ms), transform .9s cubic-bezier(.22, .61, .36, 1) var(--enter-delay, 0ms); } /* --- rise ---------------------------------------------------------------- */ [data-enter="rise"] { /* The edge the line hides behind. Not `overflow: clip` + `overflow-clip-margin`: Safari ships the former but not the latter, so there the clip would land on the box edge and shave the accents and descenders (É, ç, j overflow it by 5-9px at these sizes) off every title on the page. clip-path takes negative insets — the clip region grows past the box to let that ink paint — and, unlike padding, it costs the layout nothing, so no title's margins have to be re-tuned around it. */ clip-path: inset(-.25em -.35em); } [data-enter="rise"] > span { display: block; } /* Far enough down that no ascender pokes back into the widened clip region. */ [data-enter="rise"].is-primed > span { transform: translateY(140%); transition: none; } [data-enter="rise"].is-in > span { transform: none; transition: transform 1s cubic-bezier(.22, .61, .36, 1) var(--enter-delay, 0ms); } /* --- settle -------------------------------------------------------------- */ [data-enter="settle"].is-primed img { transform: scale(1.08); transition: none; } [data-enter="settle"].is-in img { transform: none; transition: transform 1.5s cubic-bezier(.22, .61, .36, 1) var(--enter-delay, 0ms); } /* ========================================================================== Shared type ========================================================================== */ .vo3-script { font-family: var(--vo3-script); font-size: clamp(30px, 3.2vw, 42px); font-weight: 500; line-height: 1; color: var(--vo3-accent); margin: 0 0 6px; } /* On the accent band and over the video, coloured ink would sink into the background: the handwriting switches to cream there. */ .vo3-script--cream { color: var(--vo-cream); opacity: .85; } .vo3-display { font-family: var(--vo-font-serif); font-weight: 500; font-size: clamp(34px, 4.6vw, 62px); line-height: 1.05; letter-spacing: -0.5px; margin: 0; } .vo3-lead { max-width: 620px; margin: 26px auto 0; font-size: 17px; line-height: 1.7; color: var(--vo-muted); } .vo3-lead--left { margin-inline: 0; } .vo3-hint { font-family: var(--vo3-script); font-size: 26px; color: var(--vo-muted-light); } /* Section header: the title block on the left, the "Faites glisser →" hint on the right. Shared by the gallery and the offers. */ .vo3-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 10px; } /* ========================================================================== Drag-to-browse strip — the gallery, the offers and the collage are the same component, driven by the same drag-carousel controller. ========================================================================== */ .vo3-track { overflow-x: auto; scrollbar-width: none; cursor: grab; } .vo3-track::-webkit-scrollbar { display: none; } .vo3-track.is-dragging { user-select: none; } /* Every openable photograph, wherever it sits. Keyed on [data-openable] and not on [data-cursor="Voir"]: that attribute's value is the French label the blob prints, and a stylesheet must not break when the wording changes. It cannot be a class either — the partial that stamps it is spliced into a tag that already has one. */ [data-openable] { cursor: pointer; } /* The custom cursor replaces the arrow, but only where the blob actually exists (never on touch, never under reduced motion), which the controller settles by inserting it or not. Left out, the native arrow would ride alongside the blob. */ body:has(.vo3-cursor) [data-cursor] { cursor: none; } /* Decorative frond watermark. Its placement is authored per page. */ .vo3-frond { position: absolute; z-index: 0; width: 300px; color: var(--vo3-accent); opacity: .09; pointer-events: none; } /* ========================================================================== Torn paper edges ========================================================================== */ .vo3-tear { position: absolute; left: -1px; right: -1px; bottom: -1px; z-index: 4; width: calc(100% + 2px); height: clamp(34px, 4.4vw, 66px); pointer-events: none; /* The tear casts a hair of shadow on what it covers, so the paper reads as lying on top of the photograph instead of being cut out of it. */ filter: drop-shadow(0 -3px 6px rgba(33, 28, 23, .16)); } .vo3-tear--flip { top: -1px; bottom: auto; transform: scaleY(-1); } .vo3-tear path { fill: var(--vo3-paper); } /* ========================================================================== Hero ========================================================================== */ .vo3-hero { /* Room for the tear to bite in without eating what sits at the bottom. */ padding-bottom: clamp(70px, 8vw, 110px); } /* The showcase heroes are photographs, not the homepage's video: a full viewport of still image is a wall to scroll past, so they open shorter and hand over to the paper sooner. */ .vo3-hero--inner { min-height: 70vh; min-height: 70svh; } .vo3-hero__title { font-family: var(--vo-font-serif); font-weight: 500; font-size: clamp(52px, 9vw, 130px); line-height: .95; margin: 4px 0 0; letter-spacing: -1px; text-shadow: 0 4px 40px rgba(0, 0, 0, .35); } .vo3-hero__title em { display: block; font-family: var(--vo3-script); font-style: normal; font-size: 1.05em; color: var(--vo-gold); margin-top: -.06em; } /* ========================================================================== Intro ========================================================================== */ .vo3-intro { position: relative; padding-block: clamp(70px, 8vw, 120px) clamp(50px, 6vw, 90px); } .vo3-intro__inner { position: relative; z-index: 1; text-align: center; } .vo3-counters { display: flex; justify-content: center; gap: clamp(30px, 6vw, 90px); margin-top: 58px; flex-wrap: wrap; } .vo3-counter { display: flex; flex-direction: column; gap: 4px; } .vo3-counter__value { font-family: var(--vo-font-serif); font-size: clamp(38px, 4vw, 54px); line-height: 1; } .vo3-counter__label { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; /* --vo-muted-light would be ~3.1:1 on the paper: below AA at this size. */ color: var(--vo-muted); } /* ========================================================================== Full-frame gallery — one landscape photograph at a time, edge to edge, with round arrows over the photo, a counter and caption underneath, and a thumbnail row. Shared by the homepage and the séjour page. Arrows, the counter/caption and the thumbnails all require fullframe-gallery_controller.js: without it every slide simply stays in the normal document flow, see the default (non-:has) rules below. ========================================================================== */ .vo3-fullframe { padding-block: clamp(40px, 5vw, 70px) clamp(60px, 7vw, 100px); } .vo3-fullframe__inner { margin-top: 44px; } .vo3-fullframe__stage { position: relative; } /* Capped well inside the 1180px container from the desktop breakpoint up. At full container width the photograph stood 712px tall on a 13" laptop, taller than the usable viewport, and 1.7x the site's 620px reading measure: the section read as a full-page interruption rather than one block among others. 860px keeps it the strongest image on the page at ~1.4x that measure. Below the breakpoint the stage stays full width, where the proportion was never the problem. */ @media (min-width: 901px) { .vo3-fullframe__stage { max-width: 860px; margin-inline: auto; } } .vo3-fullframe__viewport { position: relative; } /* Only the slide pile itself opens the lightbox (see the template's comment on data-openable's scope) — the pointer cursor follows it rather than the whole stage, which also covers the arrows, the counter/caption and the thumbnail row. */ .vo3-fullframe__slides { cursor: pointer; } /* Default / no-JS: every slide stays in the normal flow, fully visible — the controller is the only thing that ever marks a slide .is-active, which is what switches the slide pile into the single-photo stage below. */ .vo3-fullframe__slide { margin: 0 0 16px; } .vo3-fullframe__slide:last-child { margin-bottom: 0; } .vo3-fullframe__slide img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--vo-radius-md); } /* The slide pile is its own grid container (rather than the viewport, which also holds the arrows) so that the arrows and the thumbnail row can stay outside the openable region without breaking the grid-area stacking below: grid-area only places direct grid children. */ .vo3-fullframe__slides:has(.is-active) { display: grid; } .vo3-fullframe__slides:has(.is-active) .vo3-fullframe__slide { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .3s cubic-bezier(.22, .61, .36, 1), transform .3s cubic-bezier(.22, .61, .36, 1); } .vo3-fullframe__slides:has(.is-active) .vo3-fullframe__slide.is-active { position: relative; z-index: 1; opacity: 1; transform: none; pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .vo3-fullframe__slides:has(.is-active) .vo3-fullframe__slide { transition: none; } } /* --- Arrows: solid accent discs sat over the photograph --------------------- */ .vo3-fullframe__arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; align-items: center; justify-content: center; width: 44px; height: 44px; border: none; border-radius: 999px; background: var(--vo3-accent); color: #FFFFFF; font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 10px 22px -10px rgba(33, 28, 23, .55); transition: background .2s ease, transform .2s ease; } .vo3-fullframe__viewport:has(.is-active) .vo3-fullframe__arrow { display: flex; } .vo3-fullframe__arrow:hover { background: var(--vo-ink); } .vo3-fullframe__arrow:active { transform: translateY(-50%) scale(.94); } .vo3-fullframe__arrow:focus-visible { outline: 2px solid var(--vo-ink); outline-offset: 2px; } .vo3-fullframe__arrow--prev { left: 16px; } .vo3-fullframe__arrow--next { right: 16px; } /* --- Counter + caption, one line under the stage ---------------------------- */ .vo3-fullframe__meta { display: none; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; font-family: var(--vo-font-serif); font-style: italic; font-size: 17px; color: var(--vo-ink); } .vo3-fullframe__stage:has(.is-active) .vo3-fullframe__meta { display: flex; } .vo3-fullframe__count { font-family: var(--vo-font-sans); font-style: normal; font-size: 13px; font-weight: 600; color: var(--vo-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } /* --- Thumbnails ------------------------------------------------------------ */ .vo3-fullframe__thumbs { display: none; gap: 10px; margin-top: 16px; padding-bottom: 4px; overflow-x: auto; } .vo3-fullframe__stage:has(.is-active) .vo3-fullframe__thumbs { display: flex; } .vo3-fullframe__thumb { flex: 0 0 auto; width: 72px; height: 48px; padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; overflow: hidden; cursor: pointer; opacity: .55; transition: opacity .2s ease, border-color .2s ease; } .vo3-fullframe__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .vo3-fullframe__thumb[aria-current="true"], .vo3-fullframe__thumb:hover, .vo3-fullframe__thumb:focus-visible { opacity: 1; border-color: var(--vo3-accent); } /* --- Screen-reader-only live region ---------------------------------------- */ .vo3-fullframe__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- Polaroid: the figure swings as one piece around the rope; the paper card inside carries the hover so it never touches the animation. The taped variant (no rope) is the only one left in use — see .vo3-polaroid--taped. -------------------------------------------------------------------------- */ .vo3-polaroid { position: relative; z-index: 2; flex: 0 0 auto; width: clamp(200px, 22vw, 250px); margin: 0; transform: translateY(var(--drop, 0)) rotate(var(--rot, 0deg)); /* Pivot at rope height: that is what makes the swing a pendulum. */ transform-origin: 50% -6px; animation: vo3Sway 6s ease-in-out infinite alternate; } /* The idle sway is eight permanently composited layers. Behind the open lightbox they would dirty its full-viewport backdrop-filter on every frame, forcing a continuous re-blur — so the line holds still while a photo is enlarged. */ .vo3-page:has(.vo3-lightbox[open]) .vo3-polaroid { animation-play-state: paused; } /* Freeze (not cancel) the swing under the pointer: pausing keeps the current frame, so leaving never replays the entrance — that replay was a visible blink (the entrance starts at opacity 0). */ .vo3-polaroid:hover { animation-play-state: paused; z-index: 3; } .vo3-polaroid__card { padding: 12px 12px 0; background: #FFFDF8; border-radius: 3px; box-shadow: 0 18px 32px -18px rgba(33, 28, 23, .55), 0 1px 0 rgba(33, 28, 23, .08); transform-origin: 50% 0; transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease; } /* The card straightens most of the way and lifts slightly, as if picked off the line — while staying under its pegs. */ .vo3-polaroid:hover .vo3-polaroid__card { transform: translateY(-8px) rotate(calc(var(--rot, 0deg) * -.65)) scale(1.04); box-shadow: 0 30px 46px -20px rgba(33, 28, 23, .6); } /* Press feedback: the paper gives in under the finger before the lightbox opens. */ .vo3-polaroid__card[role="button"]:active { transform: translateY(-5px) rotate(calc(var(--rot, 0deg) * -.65)) scale(.97); transition-duration: .12s; } .vo3-polaroid__card img { width: 100%; /* The width/height attributes on the (there to reserve the space and avoid a layout shift) also act as presentational hints: without this, a mismatched intrinsic height would win over the aspect ratio below. */ height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1px; } .vo3-polaroid__card figcaption { font-family: var(--vo3-script); font-size: 27px; line-height: 1; color: var(--vo3-accent); text-align: center; padding: 13px 4px 16px; } /* Idle pendulum: ±0.55° around the rope, nothing more. */ @keyframes vo3Sway { from { transform: translateY(var(--drop, 0)) rotate(calc(var(--rot, 0deg) - .55deg)); } to { transform: translateY(var(--drop, 0)) rotate(calc(var(--rot, 0deg) + .55deg)); } } /* -------------------------------------------------------------------------- Lightbox: the clicked photo re-printed large on the same paper, over a blurred page.