/* =========================================================================
ELEVEN PARK — Stylesheet V2
Design system following the brand book (Edition 01 · 2026)
========================================================================= */
/* -------------------------------------------------------------------------
00 · Polices (hébergées sur le site depuis le 25/09/2026, plus de Google Fonts)
Mêmes fichiers et mêmes déclarations que Google Fonts : sous-ensembles
latin et latin-ext, une règle par graisse (le fichier est variable, il est
téléchargé une seule fois). Les polices ne se chargent qu’en http(s) :
un index.html ouvert par double-clic (file://) retombe sur la police de secours.
------------------------------------------------------------------------- */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('fonts/cormorant-garamond-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/cormorant-garamond-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url('fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url('fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('fonts/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('fonts/inter-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/inter-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/inter-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* -------------------------------------------------------------------------
01 · Design tokens
------------------------------------------------------------------------- */
/* Mode sombre des téléphones (26/09/2026). Le site est conçu en clair uniquement :
on le déclare (ici et en dans chaque
page), c’est le signal standard contre l’assombrissement forcé. Samsung Internet 30
l’ignore encore et assombrit tout site quand le téléphone est en mode sombre ; son
« mode sombre adaptatif » (encore dans Labs) respecte cette déclaration.
Testé sur Galaxy S24 Ultra, Samsung Internet 30.0.0.67 : « only light » et
« light dark » sont tous deux ignorés tant que l’option Labs n’est pas active. */
:root { color-scheme: only light; }
@media (prefers-color-scheme: dark) {
html, body { background-color: #EDEAE2; color: #4A4A48; }
}
:root {
/* V10 — Palette nommée (charte v4, 25/09/2026)
4 couleurs de marque + une échelle de neutres, chacune avec un rôle.
Contrastes mesurés sur le fond crème #EDEAE2 :
graphite 11,2:1 · graphite 80 7,4:1 · graphite 60 5,0:1
olive 3,7:1 (grands corps / graphique uniquement)
beige 1,5:1 (JAMAIS pour du texte : filets et contours seulement) */
--c-bg: #EDEAE2; /* Crème — fond principal (= palissades, = print) */
--c-ivoire: #F2EFE8; /* Ivoire — texte clair sur graphite / photo */
--c-graphite: #2F2F2E; /* Graphite — titres, aplats sombres */
--c-text-strong: #3A3A38; /* Graphite 90 — libellés forts */
--c-text: #4A4A48; /* Graphite 80 — texte courant */
--c-muted: #666360; /* Graphite 60 — légendes, libellés discrets */
--c-beige: #C8C1B8; /* Beige pierre — filets, contours */
--c-olive: #6F7A6A; /* Olive — repère, état actif (≤ 5 %) */
--c-olive-deep: #5F6A5B; /* Olive profond — fond des boutons olive (ivoire dessus : 4,9:1) */
/* Versions RVB pour les transparences : rgb(var(--c-bg-rgb) / .9) */
--c-bg-rgb: 237 234 226;
--c-ivoire-rgb: 242 239 232;
--c-graphite-rgb: 47 47 46;
--c-beige-rgb: 200 193 184;
--font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; /* Canela retirée de la charte le 25/09/2026 */
--font-body: 'Inter', system-ui, sans-serif;
--fs-micro: clamp(11px, 0.72vw + 8px, 13px);
--fs-caption: clamp(12px, 0.4vw + 11px, 14px);
--fs-body: clamp(15px, 0.3vw + 14px, 17px);
--fs-label: clamp(15px, 0.4vw + 14px, 18px);
--fs-quote: clamp(22px, 1.6vw + 16px, 32px);
--fs-h2: clamp(32px, 3vw + 16px, 56px);
--fs-h1: clamp(44px, 5vw + 16px, 84px);
--fs-display: clamp(56px, 8vw + 16px, 140px);
--fs-stat: clamp(36px, 3.4vw + 16px, 64px);
--tr-tight: -0.015em;
--tr-snug: -0.005em;
--tr-normal: 0;
--tr-wide: 0.08em;
--tr-caps: 0.16em;
--s-1: 8px;
--s-2: 16px;
--s-3: 24px;
--s-4: 32px;
--s-5: 48px;
--s-6: 64px;
--s-7: 96px;
--s-8: 128px;
--s-9: 192px;
--s-10: 256px;
/* ESPACEMENTS DE SECTION (V5.2 — système unifié)
Une seule variable pilote le rythme vertical de toutes les sections
non full-bleed. Override aux breakpoints uniquement (voir section 18).
- Desktop (≥ 1280px) : 192px = grand souffle, registre éditorial
- Tablet (640-1280) : 128px = transition douce
- Mobile (< 640px) : 80px = compacte mais lisible */
--section-pad-y: clamp(128px, 11vw, 168px); /* V10 — 192 → ~160 : le filet de chapitre porte la césure */
--section-head-mb: var(--s-6); /* espace entre l'eyebrow header et le H2 / contenu */
--section-h2-mb: var(--s-5); /* espace entre le H2 et le corps de section */
--paragraph-gap: 1.4em; /* espace entre paragraphes consécutifs */
--container: 1440px;
--container-narrow: 720px;
--gutter: clamp(20px, 4vw, 64px);
--ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-quiet: cubic-bezier(0.65, 0, 0.35, 1);
--d-slow: 1200ms;
--d-medium: 800ms;
--d-fast: 400ms;
}
/* -------------------------------------------------------------------------
02 · Reset
------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
/* Pas de surbrillance bleue au toucher d’un lien (réglage par défaut des navigateurs
mobiles ; décision de Simo du 26/09/2026). Le focus au clavier reste visible. */
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
/* V10 — Chiffres alignés partout. Par défaut, Cormorant dessine des
chiffres « elzéviriens » : « 11 » s’affichait « I I » et « 1,1 »
« I,I ». Pour une marque qui s’appelle Eleven, rédhibitoire. */
font-variant-numeric: lining-nums;
}
body {
font-family: var(--font-body);
font-size: var(--fs-body);
/* V10 — Corps en Inter Regular (la Light reste réservée aux titres
Cormorant) : même légèreté perçue, lisible sur tous les écrans. */
font-weight: 400;
line-height: 1.65;
color: var(--c-text);
background: var(--c-bg);
overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
::selection { background: var(--c-graphite); color: var(--c-bg); }
/* -------------------------------------------------------------------------
03 · Typography primitives
------------------------------------------------------------------------- */
.eyebrow {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tr-caps);
text-transform: uppercase;
color: var(--c-text-strong);
display: inline-flex;
align-items: center;
gap: 14px; /* V10 — filet inline AVANT le libellé, écart fixe */
}
.eyebrow--beige { color: var(--c-beige); } /* sur fond sombre uniquement */
.eyebrow--muted { color: var(--c-muted); }
.eyebrow--light { color: var(--c-beige); }
.eyebrow--light .filet,
.eyebrow--light .filet-grow { background: var(--c-beige); }
.h1 {
font-family: var(--font-display);
font-weight: 300;
font-size: var(--fs-h1);
letter-spacing: var(--tr-snug);
line-height: 1.05;
color: var(--c-graphite);
}
.h2 {
font-family: var(--font-display);
font-weight: 300;
font-size: var(--fs-h2);
letter-spacing: var(--tr-snug);
line-height: 1.1;
color: var(--c-graphite);
}
/* -------------------------------------------------------------------------
04 · Filet
------------------------------------------------------------------------- */
.filet {
display: inline-block;
height: 1px;
width: 56px;
background: var(--c-graphite);
vertical-align: middle;
}
.filet--beige { background: var(--c-beige); height: 1px; }
.filet--short { width: 32px; }
.filet--long { width: 80px; }
.filet-grow {
display: inline-block;
height: 1px;
background: var(--c-graphite);
width: 0;
transition: width var(--d-slow) var(--ease-quiet);
}
.filet-grow.is-revealed { width: 56px; }
.filet-grow.is-revealed.filet--long { width: 80px; }
/* -------------------------------------------------------------------------
05 · Layout
------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow {
max-width: var(--container-narrow);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* -------------------------------------------------------------------------
06 · Nav
Logo small, fades in only AFTER scrolling past hero (because hero has
its own large central logo).
------------------------------------------------------------------------- */
.nav {
position: fixed;
inset: 0 0 auto 0;
z-index: 50;
padding: var(--s-3) var(--gutter);
display: flex;
justify-content: space-between;
align-items: center;
color: var(--c-bg);
transition: color var(--d-medium) var(--ease-soft),
background-color var(--d-medium) var(--ease-soft);
pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav.is-scrolled {
background: rgb(var(--c-bg-rgb) / 0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--c-graphite);
border-bottom: 1px solid rgba(200, 193, 184, 0.3);
}
.nav__logo-link {
opacity: 0;
transform: translateY(-8px);
transition: opacity var(--d-medium) var(--ease-soft),
transform var(--d-medium) var(--ease-soft);
pointer-events: none;
}
.nav.is-scrolled .nav__logo-link {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.nav__logo {
width: 110px; /* tighter viewBox = visible logo larger; bumped from 92px */
height: auto;
color: currentColor;
}
.nav__right {
display: flex;
align-items: center;
gap: var(--s-5);
font-size: var(--fs-micro);
letter-spacing: var(--tr-caps);
text-transform: uppercase;
font-weight: 500;
}
.nav__link, .lang {
position: relative;
opacity: 0;
transform: translateY(-8px);
transition: opacity var(--d-medium) var(--ease-soft),
transform var(--d-medium) var(--ease-soft),
color 200ms var(--ease-soft);
}
.nav__link:hover { color: var(--c-beige); }
.nav.is-scrolled .nav__link:hover { color: var(--c-text); }
body.is-loaded .nav__link, body.is-loaded .lang { opacity: 1; transform: translateY(0); transition-delay: 200ms; }
.lang { display: inline-flex; gap: var(--s-1); }
.lang span { opacity: 0.4; }
.lang .is-active { opacity: 1; }
.lang a { opacity: 0.4; }
.lang a:hover { opacity: 1; }
/* -------------------------------------------------------------------------
07 · Hero — V10 : la composition du panneau
Le haut de l’image est un ciel qui se fond dans la crème. Le logo et le
titre s’y posent en graphite, SANS voile, comme sur le panneau.
ÉCRAN PAYSAGE (ordinateur) : le hero est plus haut que l’écran. Le
premier écran montre le ciel, la marque et la villa ; en descendant,
l’image continue et le jardin se déploie en entier, avec la phrase
« Le jardin, prolongement de la villa ». On mesure la grandeur du
jardin en le parcourant, au lieu de le rogner.
ÉCRAN PORTRAIT (mobile, tablette verticale) : l’image recadrée en 3:4
contient la villa en entier. Elle est posée en bas de l’écran ; son
ciel crème se fond dans le fond du hero (même couleur exacte), si bien
que l’écran entier paraît être un seul ciel où flotte la marque.
------------------------------------------------------------------------- */
:root {
--c-hero-sky: #F5F6F1; /* couleur exacte du haut de l’image hero */
--hero-crop: 7vw; /* part du ciel crème masquée en haut (paysage) */
}
.hero {
position: relative;
width: 100%;
overflow: hidden;
color: var(--c-graphite);
background: var(--c-hero-sky);
/* L’image carrée à pleine largeur, moins le ciel masqué ;
jamais moins d’un écran, jamais plus de 1,7 écran */
height: clamp(100svh, calc(100vw - var(--hero-crop)), 170svh);
}
.hero__media {
position: absolute;
inset: 0;
background: var(--c-hero-sky);
opacity: 0;
transform: scale(1.03);
transform-origin: 50% 0%;
transition: opacity 1800ms var(--ease-soft),
transform 6000ms var(--ease-soft);
overflow: hidden;
}
.hero__media picture { position: absolute; inset: 0; }
.hero__media img {
position: absolute;
left: 0;
top: calc(-1 * var(--hero-crop));
width: 100%;
height: calc(100% + var(--hero-crop));
object-fit: cover;
object-position: 50% 0%;
filter: saturate(0.9);
}
body.is-loaded .hero__media { opacity: 1; transform: scale(1.0); }
/* Voile conditionnel : uniquement sous les textes posés sur le jardin */
.hero__media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(0deg,
rgb(var(--c-graphite-rgb) / 0.55) 0%,
rgb(var(--c-graphite-rgb) / 0.10) 34%,
rgb(var(--c-graphite-rgb) / 0) 48%);
}
/* Le contenu occupe le PREMIER écran uniquement */
.hero__content {
position: relative;
z-index: 2;
height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: clamp(88px, 11vh, 124px) var(--gutter) var(--s-3);
}
.hero__brand {
display: flex;
flex-direction: column;
align-items: center;
}
.hero__logo {
width: clamp(190px, 16vw, 260px);
height: auto;
color: var(--c-graphite);
margin-bottom: clamp(24px, 3vh, 36px);
opacity: 0;
transform: translateY(16px);
transition: opacity 1400ms var(--ease-soft),
transform 1600ms var(--ease-soft);
}
body.is-loaded .hero__logo {
opacity: 1;
transform: translateY(0);
transition-delay: 100ms;
}
/* Titre sur une ligne, romain + italique à la même taille —
exactement comme « Parmi les onze, la vôtre » sur le panneau. */
.hero__title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(46px, 5vw + 14px, 104px);
line-height: 1;
letter-spacing: var(--tr-tight);
color: var(--c-graphite);
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: baseline;
gap: 0.26em;
white-space: nowrap;
}
.hero__title-line { display: block; }
.hero__title-line--italic { font-style: italic; }
.hero__title .word {
display: inline-block;
opacity: 0;
transform: translateY(40px);
transition: opacity 1100ms var(--ease-quiet),
transform 1100ms var(--ease-quiet);
}
.hero__title.is-revealed .word {
opacity: 1;
transform: translateY(0);
transition-delay: calc(520ms + var(--i, 0) * 110ms);
}
/* Pied du premier écran : adresse · appel à la visite */
.hero__foot {
margin-top: auto;
width: 100%;
max-width: calc(var(--container) - 2 * var(--gutter));
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: end;
color: var(--c-ivoire);
}
.hero__accroche {
justify-self: start;
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tr-caps);
text-transform: uppercase;
text-align: left;
color: var(--c-ivoire);
opacity: 0;
transform: translateY(12px);
margin: 0;
padding-bottom: var(--s-2);
}
.hero__accroche.is-revealed {
opacity: 0.88;
transform: translateY(0);
transition: opacity 1200ms var(--ease-soft) 1050ms,
transform 1200ms var(--ease-soft) 1050ms;
}
.hero__scroll {
justify-self: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s-2);
font-size: var(--fs-micro);
letter-spacing: var(--tr-caps);
text-transform: uppercase;
font-weight: 500;
opacity: 0;
color: var(--c-ivoire);
}
.hero__scroll.is-revealed {
opacity: 0.9;
transition: opacity 1000ms var(--ease-soft) 1450ms;
}
.hero__scroll-line {
width: 1px;
height: 36px;
background: rgb(var(--c-ivoire-rgb) / 0.55);
position: relative;
overflow: hidden;
}
.hero__scroll-line::after {
content: '';
position: absolute;
top: -100%;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(to bottom, transparent, var(--c-ivoire));
animation: scroll-pulse 2.6s ease-in-out infinite;
}
@keyframes scroll-pulse {
0% { top: -100%; }
100% { top: 100%; }
}
/* Paysage : le bas du premier écran tombe sur la piscine — on n’y pose
pas de texte. Seul reste le trait vertical animé, qui invite à descendre
dans le jardin. (Le texte revient en portrait, où il repose sur la pelouse.) */
@media (min-aspect-ratio: 4/5) {
.hero__accroche,
.hero__scroll > span:first-child { display: none; }
.hero__scroll-line { height: 56px; }
/* 25/09/2026 : l’adresse masquée, le trait glissait dans la 1re colonne
de la grille (à gauche, au-dessus de la piscine) : on le fixe au centre. */
.hero__scroll { grid-column: 2; }
}
/* La phrase du jardin, révélée en descendant (paysage uniquement) */
.hero__garden {
position: absolute;
z-index: 2;
left: 0;
right: 0;
top: 80%;
text-align: center;
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: clamp(28px, 2.2vw + 12px, 46px);
letter-spacing: var(--tr-snug);
color: var(--c-ivoire);
text-shadow: 0 1px 18px rgb(var(--c-graphite-rgb) / 0.35);
pointer-events: none;
}
/* ---- Portrait : mobile et tablette verticale ------------------------- */
@media (max-aspect-ratio: 4/5) {
.hero {
height: 100svh;
min-height: 540px;
}
/* L’image 3:4 à pleine largeur, posée en bas. Si l’écran est court,
elle se raccourcit par le bas (le jardin), jamais par les côtés :
la villa reste entière. */
.hero__media {
top: auto;
height: min(calc(100vw * 4 / 3), calc(100svh - 170px));
}
.hero__media img {
top: 0;
height: 100%;
}
.hero__media::after {
background: linear-gradient(0deg,
rgb(var(--c-graphite-rgb) / 0.6) 0%,
rgb(var(--c-graphite-rgb) / 0.2) 20%,
rgb(var(--c-graphite-rgb) / 0) 36%);
}
.hero__content {
height: 100%;
/* le bas laisse la place au bouton « Son » (fixe, en bas à droite) */
padding: 0 var(--gutter) 64px;
}
/* La marque est centrée dans le ciel : de la nav jusqu’au toit de la
villa (≈ 31 % de la hauteur de l’image) */
.hero__brand {
height: calc(100svh - 0.69 * min(calc(100vw * 4 / 3), calc(100svh - 170px)));
min-height: 240px;
justify-content: center;
padding-top: 40px;
}
.hero__logo { width: min(52vw, 230px); margin-bottom: var(--s-3); }
.hero__title {
font-size: clamp(28px, 8.4vw, 44px);
gap: 0.24em;
}
.hero__foot {
grid-template-columns: 1fr;
justify-items: center;
row-gap: var(--s-3);
}
.hero__scroll { grid-row: 1; grid-column: 1; }
.hero__scroll-line { height: 32px; }
.hero__accroche {
grid-row: 2;
justify-self: center;
text-align: center;
font-size: 10px;
letter-spacing: 0.14em;
}
.hero__garden { display: none; }
}
/* -------------------------------------------------------------------------
08 · Section frame
Toutes les sections non full-bleed utilisent --section-pad-y pour
un rythme vertical homogène à tous les breakpoints.
------------------------------------------------------------------------- */
.section {
padding: var(--section-pad-y) 0;
position: relative;
}
.section--tight { padding: calc(var(--section-pad-y) * 0.6) 0; }
.section__head {
display: flex;
align-items: center;
gap: var(--s-2);
margin-bottom: var(--section-head-mb);
}
.section__head .num {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tr-caps);
text-transform: uppercase;
color: var(--c-text-strong);
}
/* -------------------------------------------------------------------------
09 · Manifeste
------------------------------------------------------------------------- */
.manifeste {
text-align: left;
padding: var(--section-pad-y) 0;
}
.manifeste__title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(36px, 3.6vw + 16px, 64px);
line-height: 1.05;
letter-spacing: var(--tr-snug);
color: var(--c-graphite);
margin-top: var(--s-3);
margin-bottom: var(--section-h2-mb);
max-width: 16ch;
}
.manifeste__lead {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: clamp(22px, 1.8vw + 14px, 34px);
line-height: 1.4;
color: var(--c-graphite);
margin-bottom: var(--s-5);
}
.manifeste__body p {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--fs-body);
line-height: 1.8;
color: var(--c-text);
}
.manifeste__body p + p { margin-top: var(--paragraph-gap); }
.manifeste__signoff {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: clamp(20px, 1.4vw + 14px, 28px);
color: var(--c-graphite);
margin-top: var(--s-6);
line-height: 1.5;
}
/* -------------------------------------------------------------------------
10 · L'art de vivre (3-image gallery with offset)
------------------------------------------------------------------------- */
.art {
background: var(--c-bg);
}
.art__head {
text-align: left;
margin-bottom: var(--section-head-mb);
max-width: 720px;
}
.art__head .h2 { margin-top: var(--s-3); margin-bottom: var(--s-3); max-width: 18ch; }
.art__intro {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: var(--fs-quote);
line-height: 1.4;
color: var(--c-text-strong);
max-width: 38ch;
}
.art__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-5) var(--s-4);
align-items: start;
}
.art__item {
display: flex;
flex-direction: column;
}
.art__item--offset {
margin-top: var(--s-7); /* visual rhythm — middle item drops slightly */
}
.art__media {
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
background: var(--c-bg); /* matches page background — invisible "breathing" zones */
margin-bottom: var(--s-3);
display: flex;
align-items: center;
justify-content: center;
}
.art__media-inner {
width: 100%;
aspect-ratio: 1 / 1; /* square photo holder */
position: relative;
overflow: hidden;
border: 1px solid rgba(200, 193, 184, 0.35);
}
.art__media-inner img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.9) contrast(1.02);
transform: scale(1);
transition: transform 1800ms var(--ease-soft);
}
.art__item:hover .art__media-inner img { transform: scale(1.03); }
/* Mask reveal — clip-path expansion on the inner square image holder */
.art__media-inner::before {
content: '';
position: absolute;
inset: 0;
background: var(--c-bg);
z-index: 2;
transform-origin: top;
transition: transform 1400ms var(--ease-quiet);
}
.art__media.is-revealed .art__media-inner::before { transform: scaleY(0); }
.art__item-title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(22px, 1.2vw + 16px, 28px);
letter-spacing: var(--tr-snug);
line-height: 1.2;
color: var(--c-graphite);
margin-bottom: var(--s-2);
}
.art__item-text {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--fs-caption);
line-height: 1.7;
color: var(--c-text);
}
/* -------------------------------------------------------------------------
11 · Le Lieu
------------------------------------------------------------------------- */
.lieu {
background: var(--c-bg);
padding: var(--section-pad-y) 0;
}
.lieu__grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--s-7);
align-items: center;
}
.lieu__image {
position: relative;
aspect-ratio: 8 / 5;
overflow: hidden;
background: var(--c-beige);
}
.lieu__image img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.9) contrast(1.02);
transform: scale(1.08);
transition: transform 6000ms var(--ease-soft);
}
.lieu__image.is-revealed img { transform: scale(1.0); }
.lieu__image::before {
content: '';
position: absolute;
inset: 0;
background: var(--c-bg);
z-index: 2;
transform-origin: top;
transition: transform 1400ms var(--ease-quiet);
}
.lieu__image.is-revealed::before { transform: scaleY(0); }
.lieu__caption {
position: absolute;
bottom: var(--s-3);
right: var(--s-3);
z-index: 3;
font-size: var(--fs-caption);
color: var(--c-bg);
letter-spacing: var(--tr-wide);
font-weight: 400;
}
.lieu__title { margin-top: var(--s-3); margin-bottom: var(--section-h2-mb); }
.lieu__text p {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--fs-body);
line-height: 1.75;
color: var(--c-text);
}
.lieu__text p + p { margin-top: var(--paragraph-gap); }
/* -------------------------------------------------------------------------
12 · Le Domaine — Interactive aerial map with hotspots
------------------------------------------------------------------------- */
.domaine {
padding: var(--section-pad-y) 0;
background: var(--c-bg);
}
.domaine__head {
text-align: center;
margin-bottom: var(--section-head-mb);
}
.domaine__head .h2 {
margin-top: var(--s-3);
margin-inline: auto;
max-width: 22ch;
}
.domaine__intro {
margin-top: var(--s-3);
max-width: 48ch;
margin-inline: auto;
color: var(--c-text);
font-style: italic;
font-family: var(--font-display);
font-size: var(--fs-quote);
font-weight: 300;
}
.domaine__map-wrap {
position: relative;
margin: 0 auto;
max-width: 1600px;
padding-inline: var(--gutter);
}
.domaine__map {
position: relative;
width: 100%;
overflow: hidden;
background: var(--c-graphite);
}
.domaine__photo {
display: block;
width: 100%;
height: auto;
filter: saturate(0.78) contrast(1.05) brightness(0.96);
}
/* Subtle vignette to focus eye on the complex */
.domaine__map::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse at 50% 30%, transparent 40%, rgba(47, 47, 46, 0.3) 100%);
}
.domaine__overlay {
position: absolute;
inset: 0;
z-index: 2;
}
/* Hotspot button */
.hotspot {
position: absolute;
left: var(--x);
top: var(--y);
transform: translate(-50%, -50%);
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(242, 239, 232, 0.95);
border: 1px solid rgba(47, 47, 46, 0.5);
color: var(--c-graphite);
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform var(--d-fast) var(--ease-soft),
background var(--d-fast) var(--ease-soft),
box-shadow var(--d-fast) var(--ease-soft);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* Pulse ring */
.hotspot::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 50%;
border: 1px solid rgba(242, 239, 232, 0.6);
opacity: 0.7;
animation: hotspot-pulse 2.6s var(--ease-soft) infinite;
pointer-events: none;
}
@keyframes hotspot-pulse {
0% { transform: scale(1); opacity: 0.7; }
70% { transform: scale(2.2); opacity: 0; }
100% { transform: scale(2.2); opacity: 0; }
}
.hotspot:hover {
background: var(--c-graphite);
color: var(--c-bg);
transform: translate(-50%, -50%) scale(1.15);
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.hotspot__num {
position: relative;
z-index: 1;
}
.hotspot--small {
width: 30px;
height: 30px;
font-size: 10px;
}
.hotspot--exception {
background: var(--c-graphite);
color: var(--c-bg);
border-color: var(--c-bg);
}
.hotspot--exception::before {
border-color: rgba(242, 239, 232, 0.8);
animation-duration: 2s;
}
.hotspot--exception:hover {
background: var(--c-bg);
color: var(--c-graphite);
}
/* Tooltip */
.hotspot__tip {
position: absolute;
bottom: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: var(--c-graphite);
color: var(--c-bg);
padding: 8px 12px;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity var(--d-fast) var(--ease-soft),
transform var(--d-fast) var(--ease-soft);
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.hotspot__tip small {
font-size: 10px;
font-weight: 400;
letter-spacing: 0.04em;
text-transform: none;
opacity: 0.7;
}
.hotspot__tip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-top-color: var(--c-graphite);
}
.hotspot:hover .hotspot__tip {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.domaine__legend {
display: flex;
justify-content: center;
gap: var(--s-5);
flex-wrap: wrap;
margin-top: var(--s-4);
font-size: var(--fs-caption);
color: var(--c-text);
letter-spacing: var(--tr-wide);
}
.legend__item {
display: inline-flex;
align-items: center;
gap: var(--s-1);
}
.legend__dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(242, 239, 232, 1);
border: 1px solid var(--c-graphite);
}
.legend__dot--small {
width: 8px;
height: 8px;
}
.legend__dot--exception {
background: var(--c-graphite);
border: 1px solid var(--c-graphite);
}
/* -------------------------------------------------------------------------
11bis · Au fil des heures (cinematic video interlude)
------------------------------------------------------------------------- */
.au-fil {
position: relative;
width: 100%;
height: 90vh;
min-height: 560px;
max-height: 900px;
overflow: hidden;
background: #1a1a19;
color: var(--c-bg);
}
.au-fil__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
/* Soft vignette + bottom gradient so the title is always legible */
.au-fil__overlay {
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(180deg,
rgba(20, 20, 19, 0.45) 0%,
rgba(20, 20, 19, 0.15) 30%,
rgba(20, 20, 19, 0.15) 60%,
rgba(20, 20, 19, 0.75) 100%);
pointer-events: none;
}
.au-fil__content {
position: absolute;
inset: auto 0 var(--s-7) 0;
z-index: 3;
}
.au-fil__eyebrow {
display: flex;
align-items: center;
gap: var(--s-2);
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tr-caps);
text-transform: uppercase;
color: var(--c-bg);
opacity: 0.85;
margin-bottom: var(--s-3);
}
.au-fil__eyebrow .filet-grow { background: var(--c-bg); }
.au-fil__title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(36px, 4.4vw + 16px, 76px);
line-height: 1.05;
letter-spacing: var(--tr-snug);
color: var(--c-bg);
max-width: 22ch;
}
.au-fil__title em {
font-style: italic;
font-weight: 300;
}
/* Video sound toggle — small pill, bottom-right of the video section */
.video-sound {
position: absolute;
right: var(--gutter);
bottom: var(--s-5);
z-index: 5;
display: inline-flex;
align-items: center;
gap: var(--s-2);
padding: 8px 14px;
background: rgba(20, 20, 19, 0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(242, 239, 232, 0.3);
border-radius: 999px;
color: var(--c-bg);
cursor: pointer;
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: var(--tr-caps);
text-transform: uppercase;
transition: background 300ms var(--ease-soft),
border-color 300ms var(--ease-soft);
}
.video-sound:hover {
background: rgba(20, 20, 19, 0.75);
border-color: rgba(242, 239, 232, 0.55);
}
.video-sound__icon {
display: inline-flex;
align-items: center;
gap: 2px;
height: 14px;
}
.video-sound__bar {
display: block;
width: 1.5px;
height: 5px;
background: var(--c-bg);
border-radius: 1px;
transition: height 200ms var(--ease-soft);
}
.video-sound[data-state="on"] .video-sound__bar {
animation: ambient-wave 1.4s ease-in-out infinite;
}
.video-sound[data-state="on"] .video-sound__bar:nth-child(2) { animation-delay: 0.2s; }
.video-sound[data-state="on"] .video-sound__bar:nth-child(3) { animation-delay: 0.4s; }
/* -------------------------------------------------------------------------
17ter · Ambient audio toggle (floating, fixed bottom-right)
------------------------------------------------------------------------- */
.ambient-toggle {
position: fixed;
right: var(--gutter);
bottom: var(--gutter);
z-index: 45;
display: inline-flex;
align-items: center;
gap: var(--s-2);
padding: 8px 14px;
background: rgb(var(--c-bg-rgb) / 0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(200, 193, 184, 0.5);
border-radius: 999px;
color: var(--c-graphite);
cursor: pointer;
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: var(--tr-caps);
text-transform: uppercase;
opacity: 0;
transform: translateY(10px);
transition: opacity 600ms var(--ease-soft),
transform 600ms var(--ease-soft),
background 300ms var(--ease-soft);
}
.ambient-toggle.is-visible {
opacity: 1;
transform: translateY(0);
}
.ambient-toggle:hover {
background: var(--c-bg);
border-color: var(--c-graphite);
}
.ambient-toggle__icon {
display: inline-flex;
align-items: center;
gap: 2px;
height: 14px;
}
.ambient-toggle__bar {
display: block;
width: 1.5px;
height: 5px;
background: var(--c-graphite);
border-radius: 1px;
transition: height 200ms var(--ease-soft);
}
.ambient-toggle[data-state="on"] .ambient-toggle__bar {
animation: ambient-wave 1.4s ease-in-out infinite;
}
.ambient-toggle[data-state="on"] .ambient-toggle__bar:nth-child(2) { animation-delay: 0.2s; }
.ambient-toggle[data-state="on"] .ambient-toggle__bar:nth-child(3) { animation-delay: 0.4s; }
@keyframes ambient-wave {
0%, 100% { height: 4px; }
50% { height: 12px; }
}
/* Hide the audio element itself */
.ambient-audio { display: none; }
/* -------------------------------------------------------------------------
13bis · Interstitial (full-width wireframe between Domaine and Villas)
------------------------------------------------------------------------- */
.interstitial {
width: 100%;
height: 70vh;
min-height: 480px;
max-height: 800px;
overflow: hidden;
position: relative;
background: transparent; /* V5.3 : transparent au lieu de beige */
}
.interstitial__media {
position: absolute;
inset: -10% 0; /* negative inset to allow parallax movement */
width: 100%;
}
.interstitial__media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.9) contrast(1.02);
will-change: transform;
}
/* Subtle vignette for depth */
.interstitial::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(242, 239, 232, 0.25) 0%,
transparent 12%,
transparent 88%,
rgba(242, 239, 232, 0.25) 100%);
pointer-events: none;
}
@media (max-width: 640px) {
.interstitial { height: 50vh; min-height: 360px; }
}
/* -------------------------------------------------------------------------
13 · Les Villas (3 typology cards)
------------------------------------------------------------------------- */
.villas {
background: var(--c-bg);
}
.villas__head {
text-align: center;
margin-bottom: var(--section-head-mb);
}
.villas__head .h2 { margin-top: var(--s-3); max-width: 18ch; margin-inline: auto; }
.villas__intro {
/* V6 — passé d'italique-quote court à paragraphe descriptif :
le nouveau texte décrit composition, équipements et seul-différenciateur,
incompatible avec le registre italique gros (lourd visuellement).
Reste centré et discret comme une introduction de section. */
margin-top: var(--s-4);
max-width: 56ch;
margin-inline: auto;
color: var(--c-text);
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.7;
}
.villas__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-5);
}
.card {
position: relative;
display: block;
cursor: pointer;
isolation: isolate;
}
.card__media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--c-beige);
margin-bottom: var(--s-3);
border: 1px solid rgba(200, 193, 184, 0.35);
}
.card__media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.9) contrast(1.02);
transform: scale(1.0);
transition: transform 1800ms var(--ease-soft),
filter 1200ms var(--ease-soft);
}
.card:hover .card__media img { transform: scale(1.04); filter: saturate(0.95) contrast(1.04); }
.card__media::before {
content: '';
position: absolute;
inset: 0;
background: var(--c-bg);
z-index: 2;
transform-origin: top;
transition: transform 1400ms var(--ease-quiet) var(--reveal-delay, 0ms);
}
.card.is-revealed .card__media::before { transform: scaleY(0); }
.card__num {
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tr-caps);
text-transform: uppercase;
color: var(--c-text-strong);
display: flex;
align-items: center;
gap: var(--s-2);
}
.card__title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(24px, 1.4vw + 18px, 34px);
letter-spacing: var(--tr-snug);
color: var(--c-graphite);
margin-top: var(--s-1);
line-height: 1.15;
}
.card__desc {
font-family: var(--font-body);
font-size: var(--fs-caption);
color: var(--c-text);
margin-top: var(--s-2);
line-height: 1.6;
max-width: 32ch;
}
.card__more {
margin-top: var(--s-3);
display: inline-block;
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tr-caps);
text-transform: uppercase;
color: var(--c-graphite);
position: relative;
padding-bottom: 4px;
}
.card__more::after {
content: '';
position: absolute;
left: 0; bottom: 0;
height: 1px;
width: 24px;
background: var(--c-graphite);
transition: width 500ms var(--ease-quiet);
}
.card:hover .card__more::after { width: 100%; }
/* -------------------------------------------------------------------------
14 · Stats (chiffres-clés)
------------------------------------------------------------------------- */
.stats {
padding: 0 0 calc(var(--section-pad-y) * 0.4);
}
.stats__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-4);
}
.stat {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--s-2);
padding: var(--s-3) var(--s-2);
border-left: 1px solid rgba(200, 193, 184, 0.4);
}
.stat:first-child { border-left: none; }
.stat__num {
font-family: var(--font-display);
font-weight: 300;
font-size: var(--fs-stat);
line-height: 1;
color: var(--c-graphite);
letter-spacing: var(--tr-tight);
}
.stat__label {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tr-caps);
text-transform: uppercase;
color: var(--c-text-strong);
}
/* -------------------------------------------------------------------------
15 · L'engagement
------------------------------------------------------------------------- */
.engagement {
background: var(--c-bg);
padding: var(--section-pad-y) 0;
}
.engagement .h2 {
margin-top: var(--s-3);
margin-bottom: var(--section-h2-mb);
}
.engagement__lead {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: clamp(22px, 1.8vw + 14px, 32px);
line-height: 1.4;
color: var(--c-graphite);
margin-bottom: var(--s-7);
max-width: 48ch;
}
.engagement__cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-5);
padding-top: var(--s-4);
border-top: 1px solid var(--c-beige);
}
.engagement__cols .eyebrow {
margin-bottom: var(--s-2);
}
.engagement__col-text {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--fs-caption);
line-height: 1.7;
color: var(--c-text);
}
/* -------------------------------------------------------------------------
16 · Footer
------------------------------------------------------------------------- */
.footer {
background: var(--c-bg);
border-top: 1px solid var(--c-beige);
padding: var(--s-7) 0 var(--s-4);
margin-top: 0;
}
.footer__top {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: var(--s-5);
margin-bottom: var(--s-7);
}
.footer__col h4 {
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--tr-caps);
text-transform: uppercase;
color: var(--c-text-strong);
margin-bottom: var(--s-2);
}
.footer__col p, .footer__col a {
display: block;
font-size: var(--fs-caption);
color: var(--c-text);
line-height: 1.8;
}
.footer__col a:hover { color: var(--c-graphite); }
.footer__logo {
width: 100px; /* tighter viewBox: bumped from 64px */
margin: 0 auto;
color: var(--c-beige);
}
.footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--c-beige);
padding-top: var(--s-3);
margin-top: var(--s-5);
font-size: var(--fs-micro);
letter-spacing: var(--tr-wide);
color: var(--c-beige);
}
/* -------------------------------------------------------------------------
17 · Reveal-on-scroll
------------------------------------------------------------------------- */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity var(--d-slow) var(--ease-soft),
transform var(--d-slow) var(--ease-soft);
}
.reveal.is-revealed { opacity: 1; transform: translateY(0); }
.reveal--lift { transform: translateY(48px); }
/* -------------------------------------------------------------------------
17bis · Dock navigation (floating filets)
Designed to feel native to the brand language: each link is just a
filet, the brand's signature graphic. Hover/active state extends the
filet and reveals a label — like a quiet promise of progression.
------------------------------------------------------------------------- */
.dock {
position: fixed;
right: var(--gutter);
top: 50%;
transform: translateY(-50%);
z-index: 40; /* below nav (50), above content */
pointer-events: none; /* rail itself doesn't block clicks */
opacity: 0;
transition: opacity 600ms var(--ease-soft);
}
.dock.is-visible { opacity: 1; }
.dock__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.dock__link {
pointer-events: auto; /* only links capture clicks */
display: flex;
align-items: center;
gap: var(--s-2);
padding: 6px 0; /* enlarge clickable area without visual change */
text-decoration: none;
position: relative;
/* Keep the row fixed-width-from-left so labels don't push content around */
justify-content: flex-end;
}
.dock__filet {
display: block;
height: 1px;
width: 16px;
background: var(--c-beige);
transition: width 500ms var(--ease-quiet),
background-color 400ms var(--ease-soft);
}
.dock__label {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: var(--tr-caps);
text-transform: uppercase;
color: var(--c-graphite);
opacity: 0;
transform: translateX(8px);
transition: opacity 400ms var(--ease-soft),
transform 500ms var(--ease-soft);
white-space: nowrap;
/* Position label so the filet stays anchored on the right */
position: absolute;
right: calc(100% + var(--s-2));
top: 50%;
transform: translateY(-50%) translateX(8px);
pointer-events: none;
}
/* Hover: filet extends, label appears */
.dock__link:hover .dock__filet {
width: 40px;
background: var(--c-graphite);
}
.dock__link:hover .dock__label {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
/* Active state: filet long and graphite, label always visible */
.dock__link.is-active .dock__filet {
width: 56px;
background: var(--c-graphite);
}
.dock__link.is-active .dock__label {
opacity: 1;
transform: translateY(-50%) translateX(0);
color: var(--c-graphite);
}
/* On dark sections (hero, dark backgrounds), invert dock colors */
.dock.is-on-dark .dock__filet { background: rgba(242, 239, 232, 0.4); }
.dock.is-on-dark .dock__label { color: var(--c-bg); }
.dock.is-on-dark .dock__link:hover .dock__filet,
.dock.is-on-dark .dock__link.is-active .dock__filet { background: var(--c-bg); }
.dock.is-on-dark .dock__link.is-active .dock__label { color: var(--c-bg); }
/* Hide on small viewports — nav is sufficient there */
@media (max-width: 960px) {
.dock { display: none; }
}
/* On medium-large but not huge screens, slim the visible width budget */
@media (max-width: 1280px) {
.dock { right: 24px; }
.dock__link.is-active .dock__filet { width: 40px; }
.dock__link:hover .dock__filet { width: 30px; }
}
/* -------------------------------------------------------------------------
18 · Responsive
Système d'espacement piloté par --section-pad-y au :root.
On override la variable à chaque breakpoint et TOUT s'adapte
automatiquement (grâce au refactor des sections en V5.2).
------------------------------------------------------------------------- */
/* Tablet : largeur < 960px */
@media (max-width: 960px) {
:root {
--section-pad-y: var(--s-8); /* 128px */
--section-head-mb: var(--s-5); /* 48px */
--section-h2-mb: var(--s-4); /* 32px */
}
.lieu__grid { grid-template-columns: 1fr; gap: var(--s-5); }
.villas__grid { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.footer__top { grid-template-columns: 1fr 1fr; }
/* L'art de vivre — go straight to single column on tablet to avoid
an awkward 2-column / 3rd-orphan layout */
.art__grid { grid-template-columns: 1fr; gap: var(--s-6); max-width: 600px; margin-inline: auto; }
.art__item--offset { margin-top: 0; }
.art__media { aspect-ratio: auto; padding-block: var(--s-3); }
.stats__grid { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.stat:nth-child(3) { border-left: none; }
.engagement__cols { grid-template-columns: 1fr; gap: var(--s-4); }
.domaine__legend { gap: var(--s-3); font-size: 11px; }
.hotspot { width: 30px; height: 30px; font-size: 10px; }
.hotspot--small { width: 26px; height: 26px; }
.dock { display: none; }
}
/* Mobile : largeur < 640px */
@media (max-width: 640px) {
:root {
--gutter: 20px;
--section-pad-y: 80px; /* compact mais aéré */
--section-head-mb: var(--s-4); /* 32px */
--section-h2-mb: var(--s-3); /* 24px */
--paragraph-gap: 1.2em; /* paragraphes légèrement plus serrés */
}
.nav__right { gap: var(--s-3); }
.nav__link { display: none; }
.nav__logo { width: 100px; }
.villas__grid { grid-template-columns: 1fr; }
.footer__top { grid-template-columns: 1fr; gap: var(--s-3); }
.footer__bottom { flex-direction: column; gap: var(--s-2); text-align: center; }
/* V10 — le hero mobile est réglé dans la section 07 */
/* V9 — Le hero mobile utilise désormais sa propre photo
(01-hero-villa-crepuscule-mobile.jpg, crop portrait 9:16)
servie via dans le HTML. Plus besoin de tricher
le cadrage ici. */
.lieu__image { aspect-ratio: 4 / 3; }
.art__grid { grid-template-columns: 1fr; gap: var(--s-4); }
.stats__grid { grid-template-columns: 1fr 1fr; }
.hotspot { width: 24px; height: 24px; font-size: 9px; }
.hotspot--small { width: 22px; height: 22px; }
.hotspot__tip { font-size: 10px; padding: 6px 8px; }
.ambient-toggle { padding: 6px 10px; font-size: 10px; right: var(--gutter); bottom: var(--gutter); }
/* Section vidéo en mobile :
On veut que la vidéo soit VISIBLE ENTIÈREMENT (pas de crop).
- height: auto pour que la section prenne la hauteur naturelle
- vidéo en object-fit: contain (ratio préservé)
- titre passe SOUS la vidéo au lieu d'être en overlay
- overlay caché car le titre n'est plus sur l'image */
.au-fil {
height: auto;
min-height: 0;
max-height: none;
background: #1a1a19;
}
.au-fil__video {
position: relative;
inset: auto;
width: 100%;
height: auto;
object-fit: contain;
display: block;
}
.au-fil__overlay { display: none; }
.au-fil__content {
position: relative;
inset: auto;
padding: var(--s-5) var(--gutter) var(--s-6);
}
.au-fil__title { max-width: 14ch; font-size: clamp(28px, 7vw, 40px); }
/* Bouton son : repositionné en bas-droite de la VIDÉO pour ne pas
cacher le contenu visuel important. La vidéo étant en flow naturel
(position relative), on calcule le bottom par rapport à la section
entière, en sachant que sous la vidéo il y a le titre. */
.video-sound {
/* Aspect-ratio 16:9 sur 100vw donne une hauteur vidéo de 56.25vw.
On positionne le bouton à -50px depuis le bas de la vidéo, soit
à 56.25vw - 50px depuis le top de la section. */
top: calc(56.25vw - 44px);
bottom: auto;
right: var(--s-3);
padding: 6px 10px;
font-size: 10px;
}
}
/* -------------------------------------------------------------------------
20 · Loader d'entrée
Voile crème plein écran avec logo + filet animés.
Skip automatique en 2e visite (sessionStorage géré côté script.js).
Toutes les durées sont contrôlées depuis script.js → CONFIG.loader
------------------------------------------------------------------------- */
/* Voile : couvre tout l'écran, fond crème de la marque */
.loader {
position: fixed;
inset: 0;
z-index: 100; /* au-dessus de TOUT (nav=50, dock=40) */
background: var(--c-bg);
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
/* La sortie (slide up) est gérée via .loader.is-leaving + transition CSS,
dont la durée est synchronisée avec CONFIG.loader.exit (script.js). */
transition: clip-path 600ms var(--ease-quiet);
clip-path: inset(0% 0% 0% 0%);
}
.loader.is-leaving {
clip-path: inset(0% 0% 100% 0%); /* le voile remonte vers le haut */
}
.loader.is-gone {
display: none; /* libère le DOM */
}
/* Conteneur du logo : centré, légèrement étiré pour un beau placement */
.loader__inner {
position: relative;
width: min(280px, 60vw);
display: flex;
align-items: center;
justify-content: center;
}
/* SVG du logo : on cache d'abord les lettres (revealed via clip-path)
et on cache le filet (animé séparément).
La logique précise des classes is-filet-drawn / is-letters-revealed
est appliquée par script.js. */
.loader__logo {
width: 100%;
height: auto;
color: var(--c-graphite);
/* Toutes les paths du logo SAUF la dernière (le filet) sont les lettres.
Voir bloc ci-dessous pour la logique d'animation. */
}
/* Lettres du logo : initialement masquées par un clip-path qui les cache
complètement, puis se révèlent en descendant (effet rideau inversé). */
.loader__logo > use {
/* On utilise un wrapper trick : le