/* ================================================ GIALLO — Luxury Design System Inspired by Villa d'Este ================================================ */ /* ================================================ SPLASH / LOADING LAYER (Villa d'Este exact behaviour) ================================================ */ /* Container — full-screen, clip-path collapses upward on exit */ .loading-layer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; pointer-events: all; clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%); transition: clip-path 0.35s cubic-bezier(0.625, 0.05, 0, 1); } .loading-layer.exit { clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0); pointer-events: none; } /* Logo — centred, z-index above layers */ .loading-layer_logo { position: relative; z-index: 1; width: 200px; transition: opacity 0.25s ease, transform 0.25s ease; } @media (min-width: 1250px) { .loading-layer_logo { width: 260px; } } .loading-layer_logo img { width: 100%; display: block; } .loading-layer_logo.exit { opacity: 0; transform: translateY(-100px); } /* Three stacked layers — each wipes upward in sequence */ .loading-layer .layers { position: absolute; inset: 0; } .loading-layer .layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%); transition: clip-path 0.55s cubic-bezier(0.625, 0.05, 0, 1); } .loading-layer .layer.exit { clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0); } /* Giallo brand palette — layer-2 peeks through as the accent colour */ .loading-layer .layer-1 { background: #ffffff; } .loading-layer .layer-2 { background: #E2DCCB; } .loading-layer .layer-3 { background: #ffffff; } /* Lock scroll while loading */ body.splash-open { overflow: hidden; } @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Raleway:wght@300;400;500;600&display=swap'); /* ––– Design Tokens ––– */ :root { --gold: #E2DCCB; --brown: #665747; --brown-dark: #4a3e33; --cream: #F8F5EF; --dark: #1a1711; --muted: #6b6561; --white: #ffffff; --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Raleway', sans-serif; --ease: cubic-bezier(.4,0,.2,1); --trans: all 0.45s var(--ease); } /* ––– Reset ––– */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } /* Le débordement horizontal doit être coupé sur et pas seulement sur : seul l'élément racine propage son overflow à la fenêtre. Coupé uniquement sur , le document continuait de s'élargir, et l'en-tête en position:fixed s'étirait à la largeur du document — ce qui poussait le logo centré hors de l'écran. `clip` plutôt que `hidden` pour ne pas créer de conteneur de défilement (position:sticky et l'ancrage restent intacts). `hidden` d'abord comme repli pour les navigateurs sans support de `clip` (Safari < 16) : sans lui, la règle entière serait ignorée. */ html { overflow-x: hidden; overflow-x: clip; } /* ================================================ CUSTOM CURSOR ================================================ */ body { cursor: none; } a, button, [role="tab"], input, select, textarea, label { cursor: none; } .cursor-dot { position: fixed; top: 0; left: 0; width: 6px; height: 6px; background: var(--brown); border-radius: 50%; pointer-events: none; z-index: 99999; margin-left: -3px; margin-top: -3px; transition: opacity 0.3s ease; will-change: transform; } .cursor-ring { position: fixed; top: 0; left: 0; width: 32px; height: 32px; border: 1px solid rgba(102, 87, 71, 0.5); border-radius: 50%; pointer-events: none; z-index: 99998; margin-left: -16px; margin-top: -16px; transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, border-color 0.3s ease, opacity 0.3s ease; will-change: transform; } .cursor-ring--hover { width: 52px; height: 52px; margin-left: -26px; margin-top: -26px; border-color: var(--brown); } .cursor-dot.cursor--light { background: var(--cream); } .cursor-ring.cursor--light { border-color: rgba(248, 245, 239, 0.6); } .cursor-ring.cursor--light.cursor-ring--hover { border-color: var(--cream); } @media (hover: none) { .cursor-dot, .cursor-ring { display: none; } body, a, button { cursor: auto; } } body { font-family: var(--sans); font-weight: 300; color: var(--dark); background: var(--white); overflow-x: hidden; overflow-x: clip; line-height: 1.8; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; transition: var(--trans); } ul { list-style: none; } /* ================================================ SITE HEADER & NAV (Villa d'Este pattern) ================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 900; transition: background 0.5s cubic-bezier(.625,.05,0,1), box-shadow 0.5s ease; } /* Solid state after scroll */ .site-header.is-colorized { background: #ffffff; box-shadow: 0 1px 0 #e6e6e2; } .site-nav { position: relative; width: 100%; min-height: 72px; padding: 1.25rem 2.5rem; display: flex; align-items: center; justify-content: space-between; transition: padding 0.5s cubic-bezier(.625,.05,0,1), min-height 0.5s cubic-bezier(.625,.05,0,1); } @media (min-width: 1250px) { .site-nav { padding: 2.5rem 2.5rem; min-height: 104px; } /* Scrolled: still shrinks from the top state, but keeps room to breathe */ .site-header.is-colorized .site-nav { padding: 1.9rem 2.5rem; min-height: 88px; } } /* ── Nav left (hamburger + lang) ── */ .nav-left { display: flex; align-items: center; gap: 1.5rem; position: relative; z-index: 10; } /* ── Hamburger ── */ .menu-opener { background: none; border: none; cursor: pointer; padding: 2px; display: flex; align-items: center; gap: 12px; position: relative; z-index: 10; } .hamburger { width: 22px; height: 14px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .hamburger .line { position: absolute; left: 0; display: block; width: 100%; height: 1px; background: #fff; transform-origin: center; transition: transform 0.5s cubic-bezier(.625,.05,0,1), background 0.4s ease; } .hamburger .line-top { top: 0; } .hamburger .line-bottom { bottom: 0; } /* Colorized state — dark lines */ .site-header.is-colorized .hamburger .line { background: #696863; } /* Open (X) state */ .site-header.menu-open .hamburger .line { background: #42413d; } .site-header.menu-open .hamburger .line-top { transform: translateY(7px) rotate(45deg); } .site-header.menu-open .hamburger .line-bottom { transform: translateY(-7px) rotate(-45deg); } .hamburger-label { display: none; } /* ── Logo (centred, absolutely positioned) ── */ .header-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; display: flex; align-items: center; } .header-logo img { height: 99px; transition: height 0.5s cubic-bezier(.625,.05,0,1); } .site-header.is-colorized .header-logo img { height: 81px; } /* ── En-tête mobile ── Le logo était collé — et rogné — contre le bord haut de l'écran : 99px de haut centrés dans une barre de 72px le faisaient déborder par le haut. On lui donne de l'air (padding haut) et on réduit légèrement sa hauteur pour qu'il tienne dans le bandeau une fois celui-ci coloré au défilement. */ @media (max-width: 900px) { .site-nav { padding: 1.25rem 1.5rem; min-height: 92px; } .site-header.is-colorized .site-nav { min-height: 84px; } .header-logo { padding-top: 0.75rem; } .header-logo img { height: 84px; } .site-header.is-colorized .header-logo img { height: 68px; } } /* Écrans étroits : le logo doit laisser la place au menu et au sélecteur de langue */ @media (max-width: 400px) { .site-nav { padding: 1.25rem 1.1rem; } .header-logo img { height: 72px; } .site-header.is-colorized .header-logo img { height: 60px; } } /* ── Right CTA (Book now + lang) ── */ .header-cta { display: flex; align-items: center; gap: 1rem; position: relative; z-index: 10; } .book-btn { font-family: var(--sans); font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500; color: #42413d; background: #fff; border: 1px solid transparent; border-radius: 4px; padding: 0.6rem 1.2rem; cursor: pointer; transition: all 0.4s ease; white-space: nowrap; } .book-btn:hover { background: #f9f8f5; border-color: #42413d; } /* Transparent state — ghost button */ .site-header:not(.is-colorized):not(.menu-open) .book-btn { background: transparent; border-color: rgba(255,255,255,0.6); color: #fff; } .site-header:not(.is-colorized):not(.menu-open) .book-btn:hover { background: rgba(255,255,255,0.15); } /* Language dropdown (header right slot) */ .lang-switch { position: relative; } .lang-switch__btn { display: flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.8rem; /* Scrim: the hero image behind the header can be light or dark, so the pill carries its own contrast rather than trusting the photo underneath. */ background: rgba(28,26,24,0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.5); border-radius: 999px; cursor: none; font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; white-space: nowrap; color: #fff; transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease; } .lang-switch__btn:hover { border-color: #fff; background: rgba(28,26,24,0.72); } /* Caret */ .lang-switch__caret { width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translate(-1px,-1px); transition: transform 0.3s ease; } .lang-switch.is-open .lang-switch__caret { transform: rotate(-135deg) translate(-2px,-2px); } /* Over the light/colorized header and the open overlay menu */ .site-header.is-colorized .lang-switch__btn, .site-header.menu-open .lang-switch__btn { color: #42413d; background: rgba(66,65,61,0.06); border-color: rgba(66,65,61,0.4); } .site-header.is-colorized .lang-switch__btn:hover, .site-header.menu-open .lang-switch__btn:hover { color: #fffdf9; background: #42413d; border-color: #42413d; } /* Menu */ .lang-switch__menu { position: absolute; top: calc(100% + 0.5rem); right: 0; min-width: 148px; margin: 0; padding: 0.4rem; list-style: none; background: #fffdf9; border: 1px solid rgba(66,65,61,0.12); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.16); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; z-index: 60; } .lang-switch.is-open .lang-switch__menu { opacity: 1; visibility: visible; transform: translateY(0); } .lang-opt { padding: 0.6rem 0.8rem; border-radius: 6px; cursor: none; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.04em; color: #6b6561; transition: background 0.2s ease, color 0.2s ease; } .lang-opt:hover { background: rgba(66,65,61,0.07); color: #42413d; } .lang-opt.is-active { background: #42413d; color: #fffdf9; } /* ================================================ FULLSCREEN MENU CONTENT (Villa d'Este clip-path) ================================================ */ .menu-content { position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; z-index: 800; background: #ffffff; display: grid; grid-template-columns: 1fr; clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0); /* hidden — collapses to top */ transition: clip-path 0.6s cubic-bezier(.625,.05,0,1); overflow: hidden; } @media (min-width: 900px) { .menu-content { grid-template-columns: 55% 45%; } } /* Open state */ .menu-content.is-open { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } /* Close button inside expanded menu */ .menu-logo-overlay { position: absolute; top: 2rem; left: 50%; transform: translateX(-50%); z-index: 9; display: block; opacity: 0; transition: opacity 0.5s ease 0.4s; } .menu-content.is-open .menu-logo-overlay { opacity: 1; } .menu-logo-overlay img { height: 70px; width: auto; display: block; } @media (max-width: 900px) { .menu-logo-overlay { top: 1.4rem; } .menu-logo-overlay img { height: 54px; } } .menu-close { position: absolute; top: 2rem; right: 2.5rem; display: flex; align-items: center; gap: 0.6rem; background: none; border: none; cursor: pointer; padding: 0; z-index: 10; } .menu-close__icon { font-size: 1.1rem; color: var(--muted); line-height: 1; transition: color 0.3s ease; } .menu-close__label { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: var(--muted); transition: color 0.3s ease; } .menu-close:hover .menu-close__icon, .menu-close:hover .menu-close__label { color: var(--brown); } /* Left column: nav links */ .menu-content__left { display: flex; flex-direction: column; justify-content: space-between; padding: 6rem 2.5rem 2.5rem; overflow-y: auto; position: relative; z-index: 2; } @media (min-width: 1250px) { .menu-content__left { padding: 7rem 4rem 3rem; } } /* Small top links row */ .menu-top-links { display: flex; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.5rem; } .menu-top-link { font-family: var(--sans); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); font-weight: 500; transition: color 0.3s ease; } .menu-top-link:hover { color: var(--brown); } /* Divider */ .menu-divider { width: 100%; height: 0.5px; background: #9b9a95; margin: 1.5rem 0; transform-origin: left; transform: scaleX(0); transition: transform 0.5s cubic-bezier(.625,.05,0,1) 0.3s; } .menu-content.is-open .menu-divider { transform: scaleX(1); } /* Main large nav links */ .menu-main-links { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0.2rem; padding: 1rem 0; } .menu-main-link { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.1; color: var(--dark); display: block; position: relative; overflow: hidden; transition: color 0.3s ease; } .menu-main-link span { display: inline-block; transition: transform 0.45s cubic-bezier(.625,.05,0,1); } .menu-main-link:hover { color: var(--brown); } .menu-main-link:hover span { transform: translateX(12px); } /* Bottom contact row */ .menu-bottom-links { display: flex; gap: 2rem; flex-wrap: wrap; padding-top: 2rem; border-top: 0.5px solid #9b9a95; margin-top: 2rem; } .menu-bottom-link { font-size: 0.8rem; color: var(--muted); transition: color 0.3s ease; } .menu-bottom-link:hover { color: var(--brown); } /* Right column: hover images */ .menu-content__right { position: relative; display: none; } @media (min-width: 900px) { .menu-content__right { display: block; } } /* ── Menu plein écran sur mobile ── La colonne répartissait ses blocs avec space-between : les sept liens, centrés dans un conteneur en flex:1, laissaient deux vides d'environ 160px au-dessus et en dessous. On empile depuis le haut et on épingle les coordonnées en bas. */ @media (max-width: 900px) { .menu-content__left { /* Le retrait haut suit la hauteur du logo agrandi ci-dessous */ padding: 7rem 1.5rem 2rem; justify-content: flex-start; } /* Logo calé à gauche, aligné sur la gouttière des liens plutôt que centré, et agrandi — la place libérée à droite laisse repasser « Fermer ». */ .menu-logo-overlay { top: 1.5rem; left: 1.5rem; transform: none; } .menu-logo-overlay img { height: 72px; } /* Ces raccourcis répètent déjà le menu principal (Expériences, Groupes) et le téléphone du bloc de contact ; sur mobile ils ne produisaient que des lignes en escalier. */ .menu-top-links { display: none; } .menu-divider { margin: 0 0 1.25rem; } /* La liste occupe l'espace libre et s'y centre : le vide se répartit au-dessus et en dessous plutôt que de s'accumuler en bas, et les liens tombent sous le pouce sur les grands écrans. */ .menu-main-links { flex: 1; justify-content: center; gap: 0; padding: 0; } /* clamp() retombait sur 2rem : « Groupes & Évènements » passait alors sur deux lignes et cassait le rythme de la liste. */ .menu-main-link { font-size: 1.6rem; line-height: 1.55; } /* Épinglé en bas quelle que soit la hauteur de la liste */ .menu-bottom-links { flex-direction: column; gap: 0.55rem; margin-top: auto; padding-top: 1.5rem; } .menu-bottom-link { font-size: 0.85rem; } } /* Le widget de réservation Zenchef est en position fixed avec un z-index supérieur au menu : il recouvrait l'adresse en bas du menu ouvert. Ses classes sont générées avec un suffixe aléatoire, d'où le sélecteur sur préfixe. */ body.menu-is-open [class*="ZC_sdk__zc-iframe"] { opacity: 0; pointer-events: none; } [class*="ZC_sdk__zc-iframe"] { transition: opacity 0.3s ease; } @media (max-width: 420px) { .menu-close { right: 1.5rem; } .menu-content__left { padding-top: 6.5rem; } .menu-logo-overlay img { height: 64px; } } /* « Groupes & Évènements » ne passait plus qu'à 7px près sur les plus petits écrans : une marge trop mince pour un rendu de serif italique. */ @media (max-width: 360px) { .menu-main-link { font-size: 1.45rem; } } .menu-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; } .menu-bg-img.active { opacity: 1; } /* ================================================ HERO — Homepage ================================================ */ .hero { position: relative; height: 100vh; min-height: 640px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; } .hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.08); will-change: transform; } .hero.loaded .hero__bg { animation: kenBurns 28s ease-in-out infinite alternate; } @keyframes kenBurns { 0% { transform: scale(1.08) translate3d(0%, 0%, 0); transform-origin: 50% 50%; } 100% { transform: scale(1.22) translate3d(-2.5%, -1.8%, 0); transform-origin: 50% 50%; } } @media (prefers-reduced-motion: reduce) { .hero.loaded .hero__bg { animation: none; transform: scale(1.08); } } .hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(10,8,6,0.42) 0%, rgba(10,8,6,0.32) 45%, rgba(10,8,6,0.72) 100% ); } .hero__content { position: relative; z-index: 2; text-align: center; color: var(--white); padding: 0 1.5rem; } .hero__eyebrow { font-size: 0.65rem; letter-spacing: 0.35em; text-transform: uppercase; font-weight: 400; color: var(--gold); margin-bottom: 1.5rem; } .hero__logo { height: 90px; margin: 0 auto 2.5rem; filter: brightness(0) invert(1); } .hero__tagline { font-family: var(--serif); font-size: clamp(1.4rem, 2.5vw, 2.2rem); font-weight: 300; font-style: italic; color: rgba(255,255,255,0.92); margin-bottom: 3rem; line-height: 1.3; } .hero__anniversary { font-family: var(--serif); font-weight: 300; font-size: clamp(3rem, 7vw, 6rem); line-height: 1.05; color: #fff; letter-spacing: 0.01em; margin: 0 auto 1.8rem; text-shadow: 0 2px 40px rgba(0,0,0,0.35); display: flex; align-items: baseline; justify-content: center; gap: 0.4em; flex-wrap: wrap; } .hero__anniversary em { font-style: italic; color: var(--gold); } .hero__anniversary-num { font-size: 1.35em; font-weight: 300; line-height: 0.9; color: var(--gold); font-feature-settings: "lnum" 1; } .hero__anniversary::before, .hero__anniversary::after { content: ''; display: none; } /* Gold thin rule under the title */ .hero__content > .hero__anniversary + .hero__tagline { position: relative; padding-top: 2rem; } .hero__content > .hero__anniversary + .hero__tagline::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 40px; background: var(--gold); } @media (max-width: 640px) { .hero__anniversary { font-size: clamp(2.5rem, 12vw, 4rem); gap: 0.3em; } .hero__anniversary-num { font-size: 1.2em; } } .hero__actions { display: flex; gap: 1.5rem; justify-content: center; align-items: center; } .btn-ghost { font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; padding: 0.85rem 2.2rem; border: 1px solid rgba(255,255,255,0.65); color: var(--white); transition: var(--trans); } .btn-ghost:hover { background: var(--white); color: var(--dark); border-color: var(--white); } .btn-primary-g { font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; padding: 0.85rem 2.2rem; background: var(--brown); color: var(--white); border: 1px solid var(--brown); transition: var(--trans); } .btn-primary-g:hover { background: var(--white); color: var(--brown); } .hero__scroll { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.6rem; font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.65); background: none; border: none; padding: 0; cursor: pointer; z-index: 3; } .hero__scroll::after { content: ''; display: block; width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 100%); animation: scrollDrop 1.8s ease-in-out infinite; transform-origin: top center; } @keyframes scrollDrop { 0% { opacity: 0; transform: scaleY(0); } 40% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: translateY(12px) scaleY(0.5); } } /* ================================================ PAGE HERO — Sub-pages ================================================ */ .page-hero { position: relative; height: 100vh; min-height: 600px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding-top: 6rem; text-align: center; } .page-hero--full { height: 100vh; min-height: 600px; } .page-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .page-hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,8,6,0.3) 0%, rgba(10,8,6,0.55) 100%); } .page-hero__carousel { position: absolute; inset: 0; } .page-hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease; } .page-hero__slide.is-active { opacity: 1; } .page-hero__bg-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,8,6,0.3) 0%, rgba(10,8,6,0.55) 100%); z-index: 1; } .page-hero__content { position: relative; z-index: 2; text-align: center; color: var(--white); padding: 0 2rem; } .page-hero__breadcrumb { font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 0.75rem; } .page-hero__breadcrumb::before, .page-hero__breadcrumb::after { content: ''; display: block; width: 30px; height: 1px; background: var(--gold); } .page-hero__title { font-family: var(--serif); font-size: clamp(3.25rem, 7vw, 6rem); font-weight: 300; line-height: 1.05; text-align: center; } .page-hero__title em { font-style: italic; } .page-hero__subtitle { margin-top: 1.5rem; font-size: 1rem; color: rgba(255,255,255,0.75); font-style: italic; font-family: var(--serif); } /* ================================================ GLOBAL SECTION COMPONENTS ================================================ */ section { padding: 10rem 0; } section.tight { padding: 5rem 0; } section.no-top { padding-top: 0; } .container { width: 100%; max-width: 1260px; margin: 0 auto; padding: 0 2.5rem; } .container--narrow { max-width: 820px; margin: 0 auto; padding: 0 2.5rem; } /* Utilitaire employé dans tout le site (46 usages) mais jamais défini : les blocs concernés s'affichaient en fait alignés à gauche. */ .text-center { text-align: center; } /* Labels */ .label { display: block; font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 500; color: var(--brown); margin-bottom: 1.5rem; } .label--light { color: var(--gold); } /* Titles */ .title { font-family: var(--serif); font-size: clamp(2.2rem, 4.5vw, 3.8rem); font-weight: 300; line-height: 1.12; color: var(--dark); } .title--light { color: var(--white); } .title em { font-style: italic; } .title-xl { font-family: var(--serif); font-size: clamp(2.8rem, 5.5vw, 5rem); font-weight: 300; line-height: 1.08; } /* Body text */ .body-text { color: var(--muted); font-size: 0.95rem; line-height: 1.95; } .body-text--light { color: rgba(255,255,255,0.72); } .body-text p + p { margin-top: 1.25em; } /* Coherent spacing between a title and the body text that follows it. Inline margins (e.g. centered blocks) override this and stay at 1.5rem too. */ .title + .body-text, .title-xl + .body-text { margin-top: 1.5rem; } /* CTA link */ .cta-link { display: inline-flex; align-items: center; gap: 1.2rem; font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: var(--brown); margin-top: 2.5rem; transition: var(--trans); } .cta-link::after { content: ''; display: block; width: 36px; height: 1px; background: var(--brown); transition: width 0.4s var(--ease); } .cta-link:hover { color: var(--brown-dark); } .cta-link:hover::after { width: 60px; } .cta-link--light { color: var(--gold); } .cta-link--light::after { background: var(--gold); } /* Ornament divider */ .ornament { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin: 3rem 0; color: var(--gold); font-size: 1rem; } .ornament::before, .ornament::after { content: ''; flex: 1; max-width: 80px; height: 1px; background: var(--gold); } /* ================================================ INTRO / QUOTE ================================================ */ .intro-section { padding: 6rem 0; background: var(--cream); text-align: center; } .intro-section blockquote { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.6rem); font-style: italic; font-weight: 300; color: var(--dark); line-height: 1.55; max-width: 760px; margin: 0 auto; } .intro-section cite { display: block; margin-top: 2rem; font-family: var(--sans); font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase; font-style: normal; color: var(--brown); } /* ================================================ SPLIT LAYOUTS ================================================ */ .split { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; } .split--reverse { direction: rtl; } .split--reverse > * { direction: ltr; } .split__image { position: relative; overflow: hidden; } .split__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); } .split:hover .split__image img { transform: scale(1.04); } .split__content { display: flex; flex-direction: column; justify-content: center; padding: 6rem 5.5rem; background: var(--white); } .split__content--cream { background: var(--cream); } /* ================================================ FULL-WIDTH PARALLAX ================================================ */ .parallax-section { position: relative; min-height: 70vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .parallax-section__bg { position: absolute; inset: -15%; background-size: cover; background-position: center; background-attachment: fixed; } .parallax-section__bg::after { content: ''; position: absolute; inset: 0; background: rgba(10,8,6,0.45); } .parallax-section__content { position: relative; z-index: 2; text-align: center; color: var(--white); padding: 0 2rem; max-width: 800px; } /* ================================================ HIGHLIGHTS / CARDS GRID ================================================ */ .highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .highlight-card { position: relative; overflow: hidden; aspect-ratio: 2/3; cursor: pointer; } .highlight-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); } .highlight-card:hover .highlight-card__img { transform: scale(1.06); } .highlight-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,8,6,0.78) 0%, transparent 55%); display: flex; flex-direction: column; justify-content: flex-end; padding: 2.5rem; color: var(--white); transition: var(--trans); } .highlight-card__label { font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; } .highlight-card__title { font-family: var(--serif); font-size: 1.7rem; font-weight: 300; line-height: 1.25; margin-bottom: 0.75rem; } .highlight-card__text { font-size: 0.82rem; color: rgba(255,255,255,0.75); line-height: 1.7; max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease), opacity 0.4s ease; opacity: 0; } .highlight-card:hover .highlight-card__text { max-height: 100px; opacity: 1; } /* ================================================ EXPERIENCES GRID ================================================ */ .experiences-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--gold); } .experience-item { background: var(--white); padding: 3.5rem; display: flex; gap: 2rem; align-items: flex-start; transition: background 0.3s ease; } .experience-item:hover { background: var(--cream); } .experience-item__number { font-family: var(--serif); font-size: 3rem; font-weight: 300; color: var(--gold); line-height: 1; flex-shrink: 0; } .experience-item__title { font-family: var(--serif); font-size: 1.4rem; font-weight: 300; margin-bottom: 0.75rem; color: var(--dark); } .experience-item__text { font-size: 0.9rem; color: var(--muted); line-height: 1.85; } /* ================================================ CHEFS ================================================ */ .chefs-section { background: var(--cream); } .chefs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5rem 4rem; margin-top: 5rem; } .chef-card { display: grid; grid-template-columns: 180px 1fr; gap: 2.5rem; align-items: start; } .chef-card__portrait { position: relative; overflow: hidden; aspect-ratio: 3/4; } .chef-card__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: grayscale(15%); transition: filter 0.6s ease, transform 0.6s ease; } .chef-card:hover .chef-card__portrait img { filter: grayscale(0%); transform: scale(1.03); } .chef-card__portrait::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--brown); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); } .chef-card:hover .chef-card__portrait::after { transform: scaleX(1); } .chef-card__name { font-family: var(--serif); font-size: 1.9rem; font-weight: 300; margin-bottom: 0.25rem; line-height: 1.1; } .chef-card__role { font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--brown); font-weight: 500; display: block; margin-bottom: 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--gold); } .chef-card__bio { color: var(--muted); font-size: 0.9rem; line-height: 1.9; } /* ================================================ GALLERY ================================================ */ .gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 3px; } .gallery__item { overflow: hidden; cursor: pointer; position: relative; } .gallery__item:nth-child(1) { grid-column: span 2; grid-row: span 2; } .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); } .gallery__item:hover img { transform: scale(1.06); } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(10,8,6,0.95); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .lightbox.open { opacity: 1; pointer-events: all; } .lightbox__img { max-width: 90vw; max-height: 90vh; object-fit: contain; } .lightbox__close { position: absolute; top: 2rem; right: 2.5rem; font-size: 2rem; color: rgba(255,255,255,0.6); cursor: pointer; background: none; border: none; line-height: 1; transition: color 0.3s ease; } .lightbox__close:hover { color: var(--white); } /* ================================================ MENU TABS ================================================ */ .menu-tabs-section { padding: 5rem 0 10rem; background: var(--white); } .menu-tabs__nav { display: flex; justify-content: center; gap: 0; border-bottom: 1px solid rgba(139, 109, 56, 0.2); margin-bottom: 5rem; flex-wrap: wrap; } .menu-tab-btn { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); background: none; border: none; border-bottom: 2px solid transparent; padding: 1rem 2.2rem; margin-bottom: -1px; cursor: pointer; transition: color 0.25s ease, border-color 0.25s ease; opacity: 0.5; } .menu-tab-btn:hover { opacity: 1; color: var(--brown); } .menu-tab-btn.is-active { opacity: 1; color: var(--brown); border-bottom-color: var(--gold); } .menu-tab-panel { display: none; max-width: 780px; margin: 0 auto; } .menu-tab-panel.is-active { display: block; } .menu-list { list-style: none; padding: 0; margin: 0; } .menu-list__item { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; padding: 1.8rem 0; border-bottom: 1px solid rgba(0,0,0,0.07); } .menu-list__item:last-child { border-bottom: none; } .menu-list__left { flex: 1; } .menu-list__name { display: block; font-family: var(--serif); font-size: 1.05rem; font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--brown); line-height: 1.5; } .menu-list__name em { font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0.02em; } .menu-list__desc { display: block; font-family: var(--serif); font-size: 0.95rem; font-style: italic; color: var(--text); opacity: 0.65; margin-top: 0.3rem; line-height: 1.5; } .menu-list__price { font-family: var(--serif); font-size: 1.05rem; font-style: italic; color: var(--brown); white-space: nowrap; flex-shrink: 0; padding-top: 0.1rem; } .menu-list__price::before { content: '€'; font-size: 0.75em; vertical-align: super; margin-right: 1px; } /* Plats proposés en deux formats : le € automatique ne vaudrait que pour le premier prix, on l'écrit donc explicitement des deux côtés. */ .menu-list__price--dual::before { content: none; } .menu-list__price--dual .menu-list__price-sep { color: var(--gold); margin: 0 0.15em; } .menu-business__intro { text-align: center; margin-bottom: 3.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(139, 109, 56, 0.2); } .menu-business__label { display: block; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; } .menu-business__desc { font-family: var(--serif); font-size: 1rem; font-style: italic; color: var(--text); opacity: 0.75; max-width: 460px; margin: 0 auto 1.4rem; line-height: 1.6; } .menu-business__price { display: inline-block; font-family: var(--serif); font-size: 1.6rem; color: var(--brown); letter-spacing: 0.02em; } @media (max-width: 600px) { .menu-tab-btn { padding: 0.8rem 1.2rem; font-size: 0.65rem; } } /* ================================================ CANTINA ================================================ */ .cantina { background: #665747 !important; padding: 8rem 0 9rem; } .cantina__header { text-align: center; margin-bottom: 5rem; } .cantina__tabs-nav { border-bottom-color: rgba(255, 255, 255, 0.15); margin-bottom: 3rem; } .cantina__tabs-nav .menu-tab-btn { color: rgba(255, 255, 255, 0.5); } .cantina__tabs-nav .menu-tab-btn:hover { color: white; opacity: 1; } .cantina__tabs-nav .menu-tab-btn.is-active { color: white; border-bottom-color: rgba(255, 255, 255, 0.6); opacity: 1; } .cantina__panel { max-width: 100%; } .cantina__rule { width: 1px; height: 48px; background: rgba(210, 220, 185, 0.4); margin: 0 auto 2.5rem; } .cantina__intro { font-family: var(--serif); font-size: 1rem; font-style: italic; color: white; margin-top: 1.2rem; letter-spacing: 0.02em; } .cantina .label--light { color: white; } .cantina .title--light { color: rgba(240, 242, 228, 0.92); } .cantina__regions { max-width: 700px; margin: 0 auto; } .cantina__region { margin-bottom: 4rem; } .cantina__region:last-child { margin-bottom: 0; } .cantina__region-title { font-family: var(--sans); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: white; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .cantina__list { list-style: none; padding: 0; margin: 0; } .cantina__item { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; padding: 1.25rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .cantina__item:last-child { border-bottom: none; } .cantina__item-left { flex: 1; } .cantina__wine { display: block; font-family: var(--serif); font-size: 1.05rem; font-weight: 400; color: rgba(240, 242, 228, 0.88); line-height: 1.5; letter-spacing: 0.01em; } .cantina__wine em { font-style: italic; } .cantina__producer { display: block; font-family: var(--serif); font-size: 0.88rem; font-style: italic; color: rgba(255, 255, 255, 0.5); margin-top: 0.2rem; } .cantina__qty { font-family: var(--sans); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.55); white-space: nowrap; flex-shrink: 0; } @media (max-width: 600px) { .cantina { padding: 6rem 0 7rem; } .cantina__wine { font-size: 0.95rem; } } /* ================================================ NEWSLETTER ================================================ */ .newsletter { background: var(--brown); padding: 6rem 0; text-align: center; } .newsletter__form { max-width: 520px; margin: 2.5rem auto 0; } .newsletter__row { display: flex; } /* Anti-bot honeypot: off-screen rather than display:none, so bots that skip hidden fields still fill it. Never shown to, or focusable by, real users. */ .newsletter__hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; } .newsletter__consent { display: flex; align-items: flex-start; gap: 0.7rem; margin-top: 1.1rem; text-align: left; cursor: none; font-family: var(--sans); font-size: 0.72rem; line-height: 1.7; font-weight: 300; color: rgba(255,255,255,0.62); } .newsletter__consent input[type="checkbox"] { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 0.28rem; cursor: none; accent-color: var(--gold); } .newsletter__consent a { color: rgba(255,255,255,0.85); text-decoration: underline; text-underline-offset: 2px; } .newsletter__consent a:hover { color: var(--gold); } .newsletter__status { margin-top: 1rem; min-height: 1.2em; font-family: var(--sans); font-size: 0.75rem; font-weight: 300; line-height: 1.6; text-align: left; opacity: 0; transition: opacity 0.3s ease; } .newsletter__status.is-visible { opacity: 1; } .newsletter__status.is-ok { color: var(--gold); } .newsletter__status.is-error { color: #e8a89a; } .newsletter__input { flex: 1; padding: 1.1rem 1.5rem; background: transparent; border: 1px solid rgba(226,220,203,0.4); border-right: none; color: var(--white); font-family: var(--sans); font-size: 0.85rem; font-weight: 300; outline: none; transition: border-color 0.3s ease; } .newsletter__input::placeholder { color: rgba(255,255,255,0.45); } .newsletter__input:focus { border-color: var(--gold); } .newsletter__btn { padding: 1.1rem 2rem; background: var(--gold); border: none; font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: var(--brown-dark); cursor: pointer; transition: var(--trans); } .newsletter__btn:hover { background: var(--white); color: var(--brown); } /* ================================================ FOOTER ================================================ */ .footer { background: var(--dark); padding: 5.5rem 0 3rem; } .footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3.5rem; padding-bottom: 4rem; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer__logo { height: 38px; filter: brightness(0) invert(0.55); margin-bottom: 1.8rem; } .footer__about { font-size: 0.88rem; color: rgba(255,255,255,0.45); line-height: 1.85; margin-bottom: 2rem; } .footer__social { display: flex; gap: 1.5rem; } .footer__social a { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.4); } .footer__social a:hover { color: var(--gold); } .footer__col-title { font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin-bottom: 1.8rem; } .footer__list { display: flex; flex-direction: column; gap: 0.85rem; } .footer__list a, .footer__list li { font-size: 0.85rem; color: rgba(255,255,255,0.5); transition: color 0.3s ease; } .footer__list a:hover { color: var(--gold); } .footer__hours-item { font-size: 0.85rem; color: rgba(255,255,255,0.5); line-height: 1.6; } .footer__hours-item strong { color: rgba(255,255,255,0.7); font-weight: 400; display: block; font-size: 0.78rem; letter-spacing: 0.08em; } .footer__spotify { padding: 3rem 0 2.5rem; border-top: 1px solid rgba(255,255,255,0.08); } .footer__spotify .footer__col-title { margin-bottom: 1.25rem; } .footer__bottom { padding-top: 2.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .footer__copyright { font-size: 0.75rem; color: rgba(255,255,255,0.3); } .footer__copyright a { color: var(--gold); } .footer__legal { display: flex; gap: 2rem; } .footer__legal a { font-size: 0.7rem; color: rgba(255,255,255,0.3); letter-spacing: 0.08em; } .footer__legal a:hover { color: rgba(255,255,255,0.6); } /* ================================================ OFFER BANDS & SPECIAL SECTIONS ================================================ */ .text-banner { background: var(--cream); padding: 5rem 0; text-align: center; } .features-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--gold); } .feature-box { background: var(--white); padding: 4rem 3rem; text-align: center; } .feature-box__icon { font-size: 2rem; color: var(--brown); margin-bottom: 1.5rem; } .feature-box__title { font-family: var(--serif); font-size: 1.3rem; font-weight: 300; margin-bottom: 1rem; color: var(--dark); } .feature-box__text { font-size: 0.88rem; color: var(--muted); line-height: 1.85; } /* Meetings table */ .info-table { width: 100%; border-collapse: collapse; } .info-table th { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brown); padding: 1rem 1.5rem; border-bottom: 1px solid var(--gold); text-align: left; font-weight: 500; } .info-table td { padding: 1.2rem 1.5rem; border-bottom: 1px solid rgba(226,220,203,0.4); font-size: 0.9rem; color: var(--muted); } .info-table tr:hover td { background: var(--cream); } @media (max-width: 600px) { /* 1.5rem de rembourrage par cellule élargissaient le tableau au-delà de l'écran sur les petits mobiles. */ .info-table th { padding: 0.85rem 0.6rem; letter-spacing: 0.12em; } .info-table td { padding: 1rem 0.6rem; font-size: 0.85rem; } } /* Form styles */ .form-group { margin-bottom: 1.5rem; } .form-label { display: block; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; } .form-control { width: 100%; padding: 1rem 1.25rem; border: 1px solid var(--gold); background: transparent; font-family: var(--sans); font-size: 0.9rem; color: var(--dark); outline: none; transition: border-color 0.3s ease; } .form-control:focus { border-color: var(--brown); } .form-control::placeholder { color: rgba(107,101,97,0.5); } textarea.form-control { resize: vertical; min-height: 140px; } /* Olive oil specific */ .oil-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 4rem; } .oil-step { text-align: center; padding: 2rem; border: 1px solid var(--gold); position: relative; } .oil-step::after { content: ''; position: absolute; top: 50%; right: -1rem; width: 1rem; height: 1px; background: var(--gold); } .oil-step:last-child::after { display: none; } .oil-step__number { font-family: var(--serif); font-size: 3.5rem; font-weight: 300; color: var(--gold); line-height: 1; margin-bottom: 1rem; } .oil-step__title { font-family: var(--serif); font-size: 1.2rem; font-weight: 300; margin-bottom: 0.75rem; } .oil-step__text { font-size: 0.85rem; color: var(--muted); line-height: 1.8; } /* ================================================ LAZY IMAGE PLACEHOLDER ================================================ */ .img-ph { background: #ddd8d0; overflow: hidden; position: relative; display: block; } /* img fade-in: defined with fallback animation near .scene rules */ /* ================================================ HOMEPAGE — VDE INTRO BLOCK ================================================ */ .home-intro { padding: 6.3rem 0; background: var(--white); } .home-intro__inner { max-width: 860px; margin: 0 auto; padding: 0 3rem; text-align: center; } .home-intro__line { width: 1px; height: 80px; background: var(--gold); margin: 0 auto 4rem; } .home-intro__label { display: block; font-size: 0.6rem; letter-spacing: 0.38em; text-transform: uppercase; color: var(--brown); font-weight: 500; margin-bottom: 3.5rem; } .home-intro__text { font-family: var(--serif); font-size: clamp(1.15rem, 1.8vw, 1.6rem); font-weight: 300; line-height: 1.5; color: var(--dark); font-style: italic; margin-bottom: 4.5rem; } .home-intro__cta { display: inline-flex; align-items: center; gap: 1.5rem; font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 500; color: var(--brown); transition: var(--trans); } .home-intro__cta::after { content: ''; display: block; width: 48px; height: 1px; background: var(--brown); transition: width 0.4s var(--ease); } .home-intro__cta:hover::after { width: 72px; } /* ================================================ HOMEPAGE — TEXT INTERLUDE ================================================ */ .text-interlude { padding: 7rem 0 0; background: var(--white); } .text-interlude__rule { display: block; width: 1px; height: 60px; background: var(--gold); margin: 0 auto 4rem; } .text-interlude__heading { font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 300; line-height: 1.15; color: var(--dark); margin-bottom: 2.5rem; } .text-interlude__heading em { font-style: italic; } .text-interlude__body { font-size: 1rem; color: var(--muted); line-height: 1.9; max-width: 52ch; margin: 0 auto 3.5rem; } .text-interlude__link { display: inline-flex; align-items: center; gap: 1.2rem; font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 500; color: var(--brown); transition: var(--trans); } .text-interlude__link::after { content: ''; display: block; width: 40px; height: 1px; background: var(--brown); transition: width 0.4s var(--ease); } .text-interlude__link:hover::after { width: 64px; } /* ================================================ MAURO'S WORDS — PINNED SCROLL SEQUENCE ================================================ */ .mauro-scroll { position: relative; background-color: #0b0907; background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; /* pinned while panels scroll past */ color: #f4ede1; isolation: isolate; } /* iOS / small screens: fixed bg has poor support — fall back to cover scroll */ @media (max-width: 900px), (hover: none) and (pointer: coarse) { .mauro-scroll { background-attachment: scroll; } } .mauro-scroll__veil { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11, 9, 7, 0.60) 0%, rgba(11, 9, 7, 0.72) 50%, rgba(11, 9, 7, 0.60) 100%); } /* Each panel is one viewport tall. Stacked, they give the scroll sequence. */ .mauro-scroll__panel { position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 6rem 1.5rem; } .mauro-scroll__inner { max-width: 640px; width: 100%; text-align: center; color: #f4ede1; } .mauro-scroll__eyebrow, .mauro-scroll__chapter { display: block; font-size: 0.68rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin-bottom: 2rem; } .mauro-scroll__title { font-family: var(--serif); font-size: clamp(2.75rem, 6vw, 5rem); font-weight: 300; line-height: 1.1; color: #f8f2e6; margin-bottom: 2rem; } .mauro-scroll__title em { font-style: italic; } .mauro-scroll__rule { display: block; width: 1px; height: 60px; background: var(--gold); margin: 1.5rem auto 2.5rem; } .mauro-scroll__text { font-family: var(--serif); font-size: clamp(1.15rem, 1.55vw, 1.45rem); line-height: 1.75; color: #ede5d4; margin-bottom: 1.75rem; } .mauro-scroll__text:last-child { margin-bottom: 0; } .mauro-scroll__closing { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 2.5vw, 2rem); color: #f8f2e6; line-height: 1.4; margin-top: 2rem; } .mauro-scroll__signature { font-family: var(--serif); font-style: italic; font-size: 1rem; letter-spacing: 0.08em; color: var(--gold); margin-top: 2.5rem; } /* Per-element fade as a progressive enhancement. .seq-reveal is visible by default; when has .js-seq, it hides until the IntersectionObserver adds .is-visible. If JS fails, text still shows. */ .seq-reveal { opacity: 1; transform: none; } html.js-seq .seq-reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease, cubic-bezier(.22,.61,.36,1)), transform 1s var(--ease, cubic-bezier(.22,.61,.36,1)); } html.js-seq .seq-reveal.is-visible { opacity: 1; transform: translateY(0); } html.js-seq .seq-d1 { transition-delay: 0.12s; } html.js-seq .seq-d2 { transition-delay: 0.24s; } html.js-seq .seq-d3 { transition-delay: 0.36s; } @media (max-width: 768px) { .mauro-scroll__panel { min-height: 100vh; padding: 5rem 1.25rem; } .mauro-scroll__title { font-size: clamp(2.25rem, 9vw, 3.25rem); } .mauro-scroll__text { font-size: 1.05rem; line-height: 1.7; } .mauro-scroll__eyebrow, .mauro-scroll__chapter { letter-spacing: 0.3em; font-size: 0.62rem; } } @media (prefers-reduced-motion: reduce) { .seq-reveal { opacity: 1; transform: none; transition: none; } .mauro-scroll__img { transform: none; } } /* ================================================ HOMEPAGE — BANNER EYEBROW ================================================ */ .home-banner__eyebrow { font-size: 0.6rem; letter-spacing: 0.38em; text-transform: uppercase; color: var(--gold); font-weight: 500; display: block; margin-bottom: 2rem; } /* ================================================ HOMEPAGE — LES CHEFS ================================================ */ .home-chefs { padding: 12rem 0; background: var(--white); } .home-chefs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8rem; align-items: start; } .home-chef { } .home-chef--alt { margin-top: 8rem; } .home-chef__img { aspect-ratio: 3/4; overflow: hidden; margin-bottom: 3rem; } .home-chef__img .img-ph { width: 100%; height: 100%; position: absolute; inset: 0; } .home-chef__img { position: relative; aspect-ratio: 3/4; overflow: hidden; margin-bottom: 3rem; } .home-chef__origin { font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--brown); font-weight: 500; margin-bottom: 0.75rem; } .home-chef__name { font-family: var(--serif); font-size: clamp(2.5rem, 4vw, 4rem); font-weight: 300; line-height: 1.1; color: var(--dark); margin-bottom: 2rem; border-bottom: 1px solid var(--gold); padding-bottom: 2rem; } .home-chef__bio { font-size: 0.92rem; color: var(--muted); line-height: 2; } /* ================================================ HOMEPAGE — EXPLORE CARDS (VDE restaurant grid) ================================================ */ .home-explore { padding: 10rem 0; background: var(--white); } .home-explore__header { margin-bottom: 6rem; } .home-explore__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4rem; } .explore-card { display: block; text-decoration: none; color: inherit; } .explore-card__img { aspect-ratio: 3/4; overflow: hidden; margin-bottom: 2.5rem; display: block; position: relative; } .explore-card__img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.75s ease, transform 1s var(--ease); } .explore-card__img > img.loaded { opacity: 1; } .explore-card:hover .explore-card__img > img { transform: scale(1.04); } .explore-card__body { padding-top: 0.5rem; } .explore-card__tag { display: block; font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--brown); margin-bottom: 0.75rem; font-weight: 500; } .explore-card__title { font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 300; color: var(--dark); margin-bottom: 1.75rem; line-height: 1.2; } .explore-card .cta-link { margin-top: 0; } /* ================================================ HOMEPAGE — EDITORIAL BLOCKS ================================================ */ .home-editorial { padding: 0; margin-bottom: 6rem; } .home-editorial:last-of-type { margin-bottom: 0; } .editorial-block { display: grid; grid-template-columns: 58% 42%; min-height: 100vh; } .editorial-block--reversed { grid-template-columns: 42% 58%; } .editorial-block--reversed .editorial-block__image { order: 2; } .editorial-block--reversed .editorial-block__body { order: 1; } .editorial-block__image { position: relative; overflow: hidden; } .editorial-block__image .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; } .editorial-block:hover .editorial-block__image .img-ph > img { transform: scale(1.04); } .editorial-block__body { display: flex; flex-direction: column; justify-content: center; padding: 9rem 8rem; background: var(--white); } .editorial-block__body--cream { background: var(--white); } .editorial-num { font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.45em; color: rgba(226, 220, 203, 0.9); font-weight: 400; display: block; margin-bottom: 1.25rem; } .editorial-rule { width: 32px; height: 1px; background: var(--gold); margin-bottom: 2.5rem; } /* ================================================ HOMEPAGE — ATMOSPHERE STRIP ================================================ */ .home-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; height: 420px; } .home-strip__item { overflow: hidden; position: relative; height: 100%; } .home-strip__item > img { transition: opacity 0.75s ease, transform 0.9s var(--ease); } .home-strip__item:hover > img { transform: scale(1.05); } /* ================================================ HOMEPAGE — FULL-BLEED BANNER ================================================ */ .home-banner { position: relative; min-height: 84vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .home-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; } .home-banner__bg > img { transform: scale(1.03); } .home-banner__overlay { position: absolute; inset: 0; background: rgba(10, 8, 6, 0.48); z-index: 1; } .home-banner__content { position: relative; z-index: 2; text-align: center; padding: 4rem 2rem; } /* ================================================ HOMEPAGE — NOS UNIVERS (portrait cards) ================================================ */ .home-univers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; } .univ-card { position: relative; overflow: hidden; display: block; min-height: 66vh; text-decoration: none; } .univ-card .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; } .univ-card .img-ph > img { transition: opacity 0.75s ease, transform 0.9s var(--ease); } .univ-card:hover .img-ph > img { transform: scale(1.05); } .univ-card__overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 2.5rem; color: var(--white); background: linear-gradient(to top, rgba(10,8,6,0.75) 0%, rgba(10,8,6,0.02) 55%); transition: background 0.5s ease; } .univ-card:hover .univ-card__overlay { background: linear-gradient(to top, rgba(10,8,6,0.82) 0%, rgba(10,8,6,0.12) 65%); } .univ-card__tag { font-size: 0.57rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.65rem; font-weight: 500; } .univ-card__title { font-family: var(--serif); font-size: clamp(1.6rem, 2.2vw, 2rem); font-weight: 300; line-height: 1.2; margin-bottom: 0.6rem; } .univ-card__desc { font-size: 0.82rem; color: rgba(255,255,255,0.78); line-height: 1.7; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.55s var(--ease), opacity 0.45s ease; } .univ-card:hover .univ-card__desc { max-height: 120px; opacity: 1; } .univ-card__link { font-size: 0.57rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-top: 0.85rem; display: inline-block; opacity: 0; transform: translateY(5px); transition: opacity 0.4s ease 0.05s, transform 0.4s ease 0.05s; } .univ-card:hover .univ-card__link { opacity: 1; transform: translateY(0); } /* ================================================ HOMEPAGE — GALLERY MOSAIC ================================================ */ .home-mosaic { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 280px; gap: 3px; } .mosaic-item { overflow: hidden; position: relative; cursor: pointer; } .mosaic-item .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; } .mosaic-item .img-ph > img { transition: opacity 0.75s ease, transform 0.9s var(--ease); } .mosaic-item:hover .img-ph > img { transform: scale(1.05); } .mosaic-item:nth-child(1) { grid-column: span 5; grid-row: span 2; } .mosaic-item:nth-child(2) { grid-column: span 4; } .mosaic-item:nth-child(3) { grid-column: span 3; grid-row: span 2; } .mosaic-item:nth-child(4) { grid-column: span 4; } .mosaic-item:nth-child(5) { grid-column: span 5; } .mosaic-item:nth-child(6) { grid-column: span 7; } /* ================================================ REVEAL ANIMATIONS ================================================ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-d1 { transition-delay: 0.1s; } .reveal-d2 { transition-delay: 0.2s; } .reveal-d3 { transition-delay: 0.3s; } .reveal-d4 { transition-delay: 0.4s; } /* ── Directional text reveals ── */ .reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .reveal-right { opacity: 0; transform: translateX(32px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: translateX(0); } /* Sur mobile la gouttière du conteneur n'est que de 1.5rem : un décalage de 32px sur un bloc pleine largeur dépassait l'écran tant que l'animation n'était pas déclenchée. On réduit la course, l'effet reste lisible. */ @media (max-width: 768px) { .reveal-left { transform: translateX(-16px); } .reveal-right { transform: translateX(16px); } } /* ================================================ CLIP-PATH SCENE REVEAL (Villa d'Este pattern) Images wipe in as they enter the viewport ================================================ */ @keyframes sceneFallback { to { clip-path: inset(0 0 0% 0); } } .scene { clip-path: inset(0 0 100% 0); transition: clip-path 1.25s cubic-bezier(0.76, 0, 0.24, 1); will-change: clip-path; animation: sceneFallback 1s ease 2.5s forwards; } .scene.in-view { clip-path: inset(0 0 0% 0); animation: none; } @keyframes imgFallback { to { opacity: 1; } } .img-ph > img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.75s ease, transform 0.9s var(--ease); animation: imgFallback 0.75s ease 3s forwards; } .img-ph > img.loaded { opacity: 1; animation: none; } /* Video used in place of an image inside an .img-ph frame */ .img-ph > video { display: block; width: 100%; height: 100%; object-fit: cover; } /* Staggered strip items */ .home-strip .scene:nth-child(2) { transition-delay: 0.12s; } .home-strip .scene:nth-child(3) { transition-delay: 0.24s; } /* ================================================ CINEMATIC FULL-BLEED IMAGE BREAK ================================================ */ .cinematic-break { height: 60vh; min-height: 400px; overflow: hidden; position: relative; } .cinematic-break__img { width: 100%; height: 130%; object-fit: cover; position: absolute; top: -15%; left: 0; will-change: transform; } /* Editorial images — disable CSS transform transition (parallax is JS-driven) */ .editorial-block__image .img-ph > img { transition: opacity 0.75s ease; transform: scale(1.1) translateY(0); will-change: transform; } /* ================================================ RESPONSIVE ================================================ */ @media (max-width: 1100px) { .split { grid-template-columns: 1fr; min-height: auto; } .split--reverse { direction: ltr; } .split__image { aspect-ratio: 16/9; position: relative; } .split__image img { position: static; height: 100%; } .split__content { padding: 4rem 3rem; } .highlights { grid-template-columns: 1fr 1fr; } .chefs-grid { grid-template-columns: 1fr; gap: 3.5rem; } .footer__top { grid-template-columns: 1fr 1fr; } .oil-process { grid-template-columns: 1fr 1fr; } .oil-step::after { display: none; } /* Homepage editorial minmax(0,1fr) et non 1fr : « 1fr » vaut « minmax(auto,1fr) », donc la piste ne peut pas descendre sous la taille min-content de l'image et déborde. */ .editorial-block, .editorial-block--reversed { grid-template-columns: minmax(0, 1fr); min-height: auto; } .editorial-block--reversed .editorial-block__image { order: 0; } .editorial-block--reversed .editorial-block__body { order: 1; } .editorial-block__image { height: 65vw; min-height: 360px; } .editorial-block__body { padding: 5rem 4rem; } /* Chefs */ .home-chefs__grid { grid-template-columns: 1fr; gap: 6rem; } .home-chef--alt { margin-top: 0; } /* Explore */ .home-explore__grid { grid-template-columns: 1fr 1fr; gap: 3rem; } /* Mosaic */ .home-mosaic { grid-template-columns: repeat(6,1fr); grid-auto-rows: 220px; } .mosaic-item:nth-child(1) { grid-column: span 3; grid-row: span 2; } .mosaic-item:nth-child(2) { grid-column: span 3; } .mosaic-item:nth-child(3) { grid-column: span 2; grid-row: span 2; } .mosaic-item:nth-child(4) { grid-column: span 3; } .mosaic-item:nth-child(5) { grid-column: span 3; } .mosaic-item:nth-child(6) { grid-column: span 6; } } @media (max-width: 768px) { section { padding: 6rem 0; } .container { padding: 0 1.5rem; } .home-intro { padding: 3.5rem 0; } .home-intro__text { font-size: clamp(1rem, 3vw, 1.3rem); } .text-interlude { padding: 7rem 0; } .text-interlude__heading { font-size: clamp(2rem, 7vw, 3rem); } .home-chefs__grid { grid-template-columns: 1fr; gap: 5rem; } .home-chef--alt { margin-top: 0; } .home-explore__grid { grid-template-columns: 1fr; gap: 4rem; } .home-banner { min-height: 65vh; } .home-mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; } .mosaic-item:nth-child(n) { grid-column: span 1; grid-row: span 1; } .mosaic-item:nth-child(1), .mosaic-item:nth-child(3), .mosaic-item:nth-child(6) { grid-column: span 2; } .highlights { grid-template-columns: 1fr; } .experiences-grid { grid-template-columns: 1fr; } .chef-card { grid-template-columns: 1fr; } .chef-card__portrait { aspect-ratio: 4/3; } .gallery { grid-template-columns: 1fr 1fr; } .gallery__item:nth-child(1) { grid-column: span 2; grid-row: span 1; } .footer__top { grid-template-columns: 1fr; gap: 2.5rem; } .features-row { grid-template-columns: 1fr; } .oil-process { grid-template-columns: 1fr; } .newsletter__row { flex-direction: column; } .footer__bottom { flex-direction: column; text-align: center; } } @media (max-width: 480px) { .hero__logo { height: 65px; } /* kept for other pages that may still use it */ .page-hero { height: 100vh; min-height: 520px; } .gallery { grid-template-columns: 1fr; } .gallery__item:nth-child(1) { grid-column: span 1; } } /* ================================================ LEGAL DOCUMENTS (privacy.html / legal.html) ================================================ */ .legal-doc { padding: 2rem 0 1rem; } .legal-doc__notice { padding: 1.1rem 1.4rem; margin-bottom: 3.5rem; background: rgba(198,160,74,0.09); border-left: 2px solid var(--gold); font-family: var(--sans); font-size: 0.78rem; line-height: 1.75; font-weight: 300; color: var(--brown); } .legal-doc__h2 { font-family: var(--serif); font-size: 1.35rem; font-weight: 300; color: var(--dark); margin: 3rem 0 1rem; } .legal-doc__h2:first-of-type { margin-top: 0; } .legal-doc__body { font-family: var(--sans); font-size: 0.88rem; font-weight: 300; line-height: 1.9; color: var(--muted); } .legal-doc__body p { margin-bottom: 1rem; } .legal-doc__body p:last-child { margin-bottom: 0; } .legal-doc__body a { color: var(--brown); text-decoration: underline; text-underline-offset: 2px; } .legal-doc__body a:hover { color: var(--gold); } /* Interlude that ends a page section rather than butting straight into the next one — the base .text-interlude has 7rem top padding and no bottom. */ .text-interlude--spaced { padding-bottom: 6rem; } /* ================================================ RECIPE CHEF SIGNATURE (recette-*.html) ================================================ */ .recipe-chef { display: grid; grid-template-columns: 200px 1fr; gap: 3rem; align-items: center; max-width: 760px; margin: 5rem auto 0; padding-top: 3.5rem; border-top: 1px solid var(--gold); } .recipe-chef__img { position: relative; aspect-ratio: 3 / 4; overflow: hidden; } .recipe-chef__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s var(--ease); } .recipe-chef:hover .recipe-chef__img img { transform: scale(1.04); } .recipe-chef__label { display: block; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; } .recipe-chef__name { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 300; line-height: 1.1; color: var(--dark); margin-bottom: 1rem; } .recipe-chef__name em { font-style: italic; } .recipe-chef__note { font-family: var(--sans); font-size: 0.88rem; font-weight: 300; line-height: 1.9; color: var(--muted); } @media (max-width: 640px) { .recipe-chef { grid-template-columns: 1fr; gap: 2rem; text-align: center; justify-items: center; } .recipe-chef__img { width: 190px; } } /* ================================================ GARDE-FOUS RESPONSIVE Filet de sécurité contre les débordements horizontaux. ================================================ */ /* Aucun média ne dépasse jamais son conteneur */ img, video, iframe, svg, canvas { max-width: 100%; } /* Les enfants de grille/flex ont min-width:auto par défaut et refusent de rétrécir sous leur contenu — première cause de débordement sur mobile. */ .editorial-block > *, .home-chefs__grid > *, .home-explore__grid > *, .features-row > *, .oil-process > *, .experiences-grid > *, .footer__top > * { min-width: 0; } /* Les tableaux larges défilent dans leur propre boîte plutôt que d'élargir la page */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-scroll > table { min-width: 30rem; } /* Grilles responsives — remplacent les grid-template-columns écrits en style inline, qu'aucune media query ne pouvait surcharger. minmax(0,1fr) empêche les pistes de refuser de rétrécir sous leur contenu minimum. */ .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Rangée de chiffres clés : centrée et largement espacée sur grand écran, elle repasse en trois colonnes serrées sur mobile — un gap fixe de 6rem suffisait à lui seul à faire déborder la page sur un téléphone. */ .stat-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 6rem; } @media (max-width: 700px) { .stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } } .stat-row__item { text-align: center; } .stat-row__num { font-family: var(--serif); /* Doit rétrécir avec la colonne : à 3.5rem fixes, « 100% » débordait. */ font-size: clamp(1.9rem, 9vw, 3.5rem); font-weight: 300; color: var(--brown); line-height: 1; } .stat-row__label { font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-top: 0.5rem; } @media (max-width: 600px) { .stat-row__label { font-size: 0.55rem; letter-spacing: 0.12em; } } @media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { /* Les cartes à fort rembourrage (tarifs, formules) passent en pile pleine largeur : deux colonnes laisseraient un orphelin et écraseraient le texte. */ .grid-3 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 600px) { .grid-2, .grid-4 { grid-template-columns: minmax(0, 1fr); } } /* ================================================ CLOSURE NOTICE — modale de fermeture saisonnière Injectée par app.js sur toutes les pages, affichée une fois par session après la sortie du splash. z-index sous le curseur personnalisé (99998). ================================================ */ .closure-notice { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(26, 23, 17, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.6s var(--ease); } .closure-notice.is-open { opacity: 1; pointer-events: auto; } .closure-notice__card { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 3rem); overflow-y: auto; background: var(--cream); padding: clamp(2.5rem, 6vw, 4rem) clamp(1.75rem, 5vw, 3.5rem); text-align: center; transform: translateY(28px); transition: transform 0.7s var(--ease); } .closure-notice.is-open .closure-notice__card { transform: none; } .closure-notice__close { position: absolute; top: 1rem; right: 1.25rem; background: none; border: 0; font-family: var(--sans); font-size: 1rem; line-height: 1; color: var(--muted); padding: 0.5rem; transition: color 0.3s var(--ease); } .closure-notice__close:hover { color: var(--brown-dark); } .closure-notice__logo { width: 130px; height: auto; margin: 0 auto 2rem; display: block; } .closure-notice__label { margin-bottom: 1.25rem; } .closure-notice__title { font-family: var(--serif); font-size: clamp(1.9rem, 5vw, 2.8rem); font-weight: 300; line-height: 1.15; color: var(--dark); } .closure-notice__title em { font-style: italic; } .closure-notice__dates { font-family: var(--serif); font-size: clamp(1.05rem, 2.6vw, 1.3rem); font-style: italic; color: var(--brown); margin-top: 1.25rem; } .closure-notice__rule { width: 44px; height: 1px; background: var(--brown); opacity: 0.35; margin: 1.75rem auto; } .closure-notice__body { color: var(--muted); font-size: 0.9rem; line-height: 1.9; } .closure-notice__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem; margin-top: 2.25rem; } /* .cta-link est écrit pour des : le bouton hérite sinon du cadre et de la police par défaut du navigateur. */ .closure-notice__actions .cta-link { margin-top: 0; background: none; border: 0; font-family: var(--sans); } @media (max-width: 600px) { .closure-notice__actions { gap: 1.25rem; flex-direction: column; } } /* Le splash d'ouverture reste prioritaire : la modale n'apparaît qu'ensuite. */ body.splash-open .closure-notice { display: none; } /* Même verrou que le splash : la page ne défile pas derrière la modale. */ body.closure-open { overflow: hidden; }