/* ============================================================
   Cru « Villas » — feuille de style du site public
   Direction : domaine privé de villas, luxe nocturne et éditorial. Obsidienne,
   ivoire, laiton ; Unbounded (large, en graisse fine pour les titres, en
   capitales espacées pour les étiquettes) et Newsreader (texte, italiques).
   Grille de filets visible en fond, marques de coin, numéros de section.
   Chaque section a son propre mécanisme : mot-masque, sommaire vivant, villas
   empilées, curseur du jour, menu à points de conduite, baromètre des saisons,
   cartes postales, carte des courbes, rotonde. Mobile d'abord.
   ============================================================ */

@font-face { font-family: "Unbounded"; src: url("../fonts/unbounded-normal.edd24a2b43a9.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-normal.0a301b6df4c7.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-italic.6d201901085f.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }

:root {
    --nuit: #0e0d0b;
    --creme: #efe8da;
    --sable: #e1d8c6;
    --encre: #16140f;
    --cuivre: #c9a961;
    --cuivre-fonce: #8d7233;
    --cuivre-clair: #e9d8a8;
    --nuit-2: color-mix(in srgb, var(--nuit), var(--creme) 5%);
    --nuit-3: color-mix(in srgb, var(--nuit), var(--creme) 10%);
    --creme-2: color-mix(in srgb, var(--creme), white 40%);
    --gris: color-mix(in srgb, var(--creme), transparent 45%);
    --gris-sombre: color-mix(in srgb, var(--encre), transparent 45%);
    --ligne: color-mix(in srgb, var(--creme), transparent 86%);
    --ligne-forte: color-mix(in srgb, var(--creme), transparent 70%);
    --ligne-sombre: color-mix(in srgb, var(--encre), transparent 84%);
    --ligne-claire: var(--ligne);
    --serif: "Newsreader", Georgia, "Times New Roman", serif;
    --sans: "Unbounded", "Helvetica Neue", Arial, sans-serif;
    --marge: clamp(20px, 4vw, 64px);
    --largeur: 1440px;
    --rayon: 0px;
    --sortie: cubic-bezier(0.16, 1, 0.3, 1);
    --entete: 72px;
    --colonnes: 6;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.55; color: var(--creme); background: var(--nuit); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.menu-ouvert, body.comptoir-ouvert { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--cuivre); color: var(--nuit); }
.evitement { position: absolute; left: -9999px; top: 8px; background: var(--cuivre); color: var(--nuit); padding: 8px 14px; z-index: 1000; }
.evitement:focus { left: 8px; }

/* la grille de filets, en fond de toutes les pages */
.grille-fond { position: fixed; inset: 0; z-index: 0; pointer-events: none; padding: 0 var(--marge); }
.grille-fond span { display: block; height: 100%; max-width: var(--largeur); margin: 0 auto; background: repeating-linear-gradient(90deg, var(--ligne) 0 1px, transparent 1px calc(100% / var(--colonnes))); background-size: calc(100% + 1px) 100%; border-right: 1px solid var(--ligne); opacity: 0.6; }
main, .entete, .pied, .comptoir { position: relative; z-index: 1; }
.clair { background: var(--creme); color: var(--encre); --ligne: var(--ligne-sombre); --gris: var(--gris-sombre); }

/* ---------- typographie ---------- */
.etiquette { font-family: var(--sans); font-weight: 400; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cuivre); }
.numero { font-family: var(--sans); font-weight: 300; font-size: 10px; letter-spacing: 0.3em; color: var(--gris); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.numero::before { content: ""; width: 34px; height: 1px; background: var(--cuivre); }
.titre-geant, .titre-page, .titre-section, .titre-bloc { font-family: var(--sans); font-weight: 200; letter-spacing: -0.02em; line-height: 1; text-wrap: balance; }
.titre-geant { font-size: clamp(40px, 7vw, 104px); }
.titre-page { font-size: clamp(36px, 6vw, 92px); }
.titre-section { font-size: clamp(28px, 4vw, 62px); }
.titre-bloc { font-size: clamp(20px, 2.2vw, 30px); font-weight: 300; line-height: 1.15; }
.titre-geant em, .titre-page em, .titre-section em, .titre-bloc em, .italique { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--cuivre); letter-spacing: 0; font-size: 1.08em; }
.texte-grand { font-size: clamp(20px, 2vw, 27px); line-height: 1.4; font-weight: 300; }
.texte-doux { color: var(--gris); }
.prose { display: grid; gap: 14px; font-size: 18px; line-height: 1.6; max-width: 58ch; font-weight: 300; }
.prose p { margin: 0; }
.prose h2 { font-family: var(--sans); font-weight: 300; font-size: 22px; margin-top: 18px; letter-spacing: 0; }
.prose ul { list-style: disc; padding-left: 20px; }
.prose .a-completer { background: color-mix(in srgb, var(--cuivre), transparent 60%); padding: 0 4px; }
.lien-souligne { text-decoration: none; border-bottom: 1px solid var(--cuivre); padding-bottom: 1px; transition: color 300ms; }
.lien-souligne:hover { color: var(--cuivre); }
.lien-fleche { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-family: var(--sans); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; }
.lien-fleche::after { content: "→"; font-family: var(--serif); font-size: 18px; letter-spacing: 0; transition: transform 500ms var(--sortie); }
.lien-fleche:hover::after { transform: translateX(8px); }

/* ---------- boutons : rectangles à marques de coin ---------- */
.bouton { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 15px 26px; border: 1px solid var(--ligne-forte); background: transparent; color: inherit; text-decoration: none; font-family: var(--sans); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 400; cursor: pointer; isolation: isolate; overflow: hidden; transition: color 400ms var(--sortie), border-color 400ms; }
.bouton::before { content: ""; position: absolute; inset: 0; background: var(--cuivre); transform: translateY(101%); transition: transform 500ms var(--sortie); z-index: -1; }
.bouton:hover::before, .bouton:focus-visible::before { transform: none; }
.bouton:hover { color: var(--nuit); border-color: var(--cuivre); }
.bouton-plein { background: var(--cuivre); border-color: var(--cuivre); color: var(--nuit); }
.bouton-plein::before { background: var(--creme); }
.bouton-clair { border-color: var(--creme); color: var(--creme); }
.bouton-petit { padding: 10px 16px; font-size: 9px; }
.bouton-grand { padding: 18px 34px; }
.clair .bouton { border-color: var(--encre); color: var(--encre); }
.clair .bouton:hover { color: var(--nuit); }
.clair .bouton-plein { background: var(--encre); color: var(--creme); border-color: var(--encre); }
.clair .bouton-plein::before { background: var(--cuivre); }
.bouton[disabled], .bouton[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.coins { position: relative; }
.coins::before, .coins::after { content: "+"; position: absolute; font-family: var(--sans); font-weight: 200; font-size: 14px; line-height: 1; color: var(--cuivre); pointer-events: none; }
.coins::before { left: -6px; top: -8px; }
.coins::after { right: -6px; bottom: -8px; }

/* ---------- en-tête ---------- */
.entete { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--entete); display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 var(--marge); transition: transform 600ms var(--sortie), background 500ms; }
.entete::after { content: ""; position: absolute; left: var(--marge); right: var(--marge); bottom: 0; height: 1px; background: var(--ligne); }
.entete.compacte { background: color-mix(in srgb, var(--nuit), transparent 14%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.entete.cachee { transform: translateY(-100%); }
.marque { text-decoration: none; display: inline-flex; align-items: baseline; gap: 14px; }
.marque-logo { height: 26px; width: auto; }
.marque .ed-vide { min-height: 0; padding: 4px 8px; font-size: 11px; }
.marque-nom { font-family: var(--sans); font-weight: 300; font-size: 15px; letter-spacing: 0.34em; text-transform: uppercase; white-space: nowrap; }
.marque-lieu { display: none; font-family: var(--sans); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gris); }
.navigation { display: none; }
.entete-actions { display: flex; align-items: center; gap: 14px; }
.entete-heure { display: none; font-family: var(--sans); font-weight: 300; font-size: 10px; letter-spacing: 0.22em; color: var(--gris); font-variant-numeric: tabular-nums; }
.bouton-reserver { padding: 11px 18px; }
.bouton-reserver[aria-expanded="true"] { color: var(--nuit); border-color: var(--cuivre); }
.bouton-reserver[aria-expanded="true"]::before { transform: none; }
.burger { position: relative; width: 44px; height: 44px; border: 1px solid var(--ligne-forte); background: none; cursor: pointer; padding: 0; }
.burger span { position: absolute; left: 13px; top: 50%; width: 18px; height: 1px; background: currentColor; transition: transform 500ms var(--sortie); }
.burger span:first-child { transform: translateY(-4px); }
.burger span:last-child { transform: translateY(4px); }
.burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
.menu-mobile { position: fixed; inset: 0; background: var(--nuit); color: var(--creme); padding: calc(var(--entete) + 24px) var(--marge) 32px; display: grid; grid-template-rows: 1fr auto; z-index: 99; overflow: auto; }
.menu-mobile nav { display: grid; align-content: center; }
.menu-mobile nav a { display: grid; grid-template-columns: 40px 1fr; align-items: baseline; font-family: var(--sans); font-weight: 200; font-size: clamp(30px, 8vw, 72px); line-height: 1.2; text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--ligne); opacity: 0; transform: translateY(20px); animation: apparition 800ms var(--sortie) forwards; }
.menu-mobile nav a small { font-size: 10px; letter-spacing: 0.3em; color: var(--cuivre); }
.menu-mobile nav a:nth-child(2) { animation-delay: 60ms; } .menu-mobile nav a:nth-child(3) { animation-delay: 120ms; } .menu-mobile nav a:nth-child(4) { animation-delay: 180ms; } .menu-mobile nav a:nth-child(5) { animation-delay: 240ms; }
.menu-mobile-reserver { color: var(--cuivre); }
.menu-mobile-pied { display: flex; flex-wrap: wrap; gap: 12px 24px; font-family: var(--sans); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gris); padding-top: 24px; }
.menu-mobile-pied a { text-decoration: none; }

/* ---------- le comptoir : le sélecteur descend du haut ---------- */
.comptoir { position: fixed; top: 0; left: 0; right: 0; z-index: 98; background: color-mix(in srgb, var(--nuit), transparent 6%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--cuivre); padding: calc(var(--entete) + 24px) var(--marge) 28px; transform: translateY(-110%); transition: transform 700ms var(--sortie); }
.comptoir.ouvert { transform: none; }
.comptoir-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 18px; }
.comptoir-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.comptoir-titre { font-family: var(--sans); font-weight: 200; font-size: clamp(24px, 3vw, 40px); }
.comptoir-note { font-size: 14px; color: var(--gris); font-style: italic; }
.comptoir-voile { position: fixed; inset: 0; z-index: 97; background: color-mix(in srgb, var(--nuit), transparent 40%); opacity: 0; pointer-events: none; transition: opacity 500ms; }
body.comptoir-ouvert .comptoir-voile { opacity: 1; pointer-events: auto; }

/* ---------- messages ---------- */
.messages { position: fixed; top: calc(var(--entete) + 12px); left: 50%; transform: translateX(-50%); z-index: 95; width: min(560px, calc(100% - 32px)); display: grid; gap: 8px; }
.message { background: var(--creme); color: var(--encre); padding: 14px 18px; font-size: 15px; animation: apparition 600ms var(--sortie); border-left: 3px solid var(--cuivre); }
.message-error { background: #5a2a22; color: var(--creme); }
.message-success { background: #2b4a35; color: var(--creme); }

/* ---------- sections ---------- */
.section { padding: clamp(64px, 9vw, 140px) var(--marge); }
.section-interieur { max-width: var(--largeur); margin: 0 auto; }
.entete-section { display: grid; gap: 10px; margin-bottom: clamp(32px, 5vw, 64px); }
.entete-section .titre-section { max-width: 18ch; }
.actions-ligne { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.image-cadre { overflow: hidden; background: var(--nuit-3); margin: 0; }
.image-cadre img { width: 100%; height: 100%; object-fit: cover; }
.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-1-1 { aspect-ratio: 1; }

/* ---------- apparitions ---------- */
[data-apparition] { opacity: 0; transform: translateY(24px); transition: opacity 1000ms var(--sortie), transform 1000ms var(--sortie); transition-delay: calc(var(--i, 0) * 80ms); }
[data-apparition].visible { opacity: 1; transform: none; }
[data-apparition="echelle"] { transform: scale(1.03); }
[data-apparition="echelle"].visible { transform: none; }
.mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.1em 0.04em 0.18em; margin: -0.1em -0.04em -0.08em; }
.mot > span { display: inline-block; transform: translateY(110%); transition: transform 1200ms var(--sortie); transition-delay: calc(var(--m) * 60ms); }
.mots-visibles .mot > span { transform: none; }
@keyframes apparition { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    [data-apparition], .mot > span { opacity: 1; transform: none; transition: none; }
    .menu-mobile nav a { animation: none; opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
    .ouverture-mot, .bandeau-piste, .rotonde svg { animation: none !important; }
}

/* ============================================================
   ACCUEIL
   ============================================================ */
/* 00 · ouverture : le nom en masque sur la mer */
.ouverture { min-height: 100svh; display: grid; grid-template-rows: 1fr auto auto; padding: calc(var(--entete) + 32px) var(--marge) 0; position: relative; overflow: clip; }
.ouverture-haut { display: grid; align-content: space-between; gap: 18px; max-width: var(--largeur); width: 100%; margin: 0 auto; }
.ouverture-accroche { justify-self: end; text-align: right; max-width: 18ch; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(22px, 3vw, 44px); line-height: 1.15; color: var(--creme); }
.ouverture-accroche em { font-style: normal; font-family: var(--sans); font-weight: 200; font-size: 0.7em; letter-spacing: 0.02em; color: var(--cuivre); }
.ouverture-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--sans); font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gris); font-variant-numeric: tabular-nums; }
.ouverture-meta b { font-weight: 400; color: var(--cuivre); }
.ouverture-mot { font-family: var(--sans); font-weight: 800; font-size: clamp(64px, 18.5vw, 300px); line-height: 0.86; letter-spacing: -0.04em; text-transform: uppercase; margin: -0.2em 0 0 -0.04em; padding-top: 0.2em; color: transparent; -webkit-background-clip: text; background-clip: text; background-image: var(--mer, url("../img/hero.ebcff66156f4.webp")); background-size: 130% auto; background-position: 50% 40%; animation: derive 40s ease-in-out infinite alternate; }
@keyframes derive { from { background-position: 0% 30%; } to { background-position: 100% 60%; } }
.ouverture-bas { max-width: var(--largeur); width: 100%; margin: 0 auto; display: grid; gap: 22px; padding: 28px 0 32px; border-top: 1px solid var(--ligne); }
.ouverture-texte { max-width: 40ch; font-size: clamp(18px, 1.6vw, 22px); font-weight: 300; line-height: 1.45; }
.ouverture-texte em { font-style: italic; color: var(--cuivre); }
.ouverture-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* le bandeau des nuits libres */
.bandeau { border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); overflow: hidden; margin: 0 calc(-1 * var(--marge)); padding: 12px 0; }
.bandeau-piste { display: flex; gap: 0; width: max-content; animation: defiler 60s linear infinite; }
.bandeau:hover .bandeau-piste { animation-play-state: paused; }
@keyframes defiler { to { transform: translateX(-50%); } }
.bandeau-item { display: inline-flex; align-items: baseline; gap: 14px; padding: 0 28px; font-family: var(--sans); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; text-decoration: none; }
.bandeau-item::before { content: "◇"; color: var(--cuivre); font-size: 9px; }
.bandeau-item em { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 17px; color: var(--cuivre-clair); }
.bandeau-item:hover em { color: var(--cuivre); }

/* 01 · sommaire vivant */
.sommaire { position: relative; padding: clamp(64px, 9vw, 140px) var(--marge); isolation: isolate; overflow: clip; }
.sommaire-fond { position: absolute; inset: 0; z-index: -1; }
.sommaire-fond img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 900ms var(--sortie), transform 1600ms var(--sortie); }
.sommaire-fond img.actif { opacity: 0.42; transform: none; }
.sommaire-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--nuit) 0%, color-mix(in srgb, var(--nuit), transparent 40%) 60%, color-mix(in srgb, var(--nuit), transparent 20%) 100%); }
.sommaire-grille { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 40px; }
.sommaire-liste { display: grid; border-top: 1px solid var(--ligne); }
.sommaire-ligne { display: grid; grid-template-columns: 40px 1fr auto; align-items: baseline; gap: 12px 18px; padding: 18px 0; border-bottom: 1px solid var(--ligne); text-decoration: none; transition: padding 500ms var(--sortie); }
.sommaire-ligne:hover, .sommaire-ligne.actif { padding-left: 14px; }
.sommaire-ligne small { font-family: var(--sans); font-size: 9px; letter-spacing: 0.3em; color: var(--cuivre); }
.sommaire-ligne span { font-family: var(--sans); font-weight: 200; font-size: clamp(24px, 3.6vw, 54px); line-height: 1.05; letter-spacing: -0.02em; }
.sommaire-ligne i { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--gris); }
.sommaire-texte { display: grid; gap: 18px; align-content: start; }
.sommaire-manifeste { font-size: clamp(22px, 2.3vw, 32px); line-height: 1.35; font-weight: 300; font-style: italic; max-width: 26em; text-wrap: pretty; }
.sommaire-manifeste em { color: var(--cuivre); font-style: normal; font-family: var(--sans); font-weight: 200; font-size: 0.82em; letter-spacing: 0; }
.chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; border-top: 1px solid var(--ligne); padding-top: 20px; }
.chiffre { display: grid; gap: 4px; }
.chiffre strong { font-family: var(--sans); font-weight: 200; font-size: clamp(32px, 4vw, 60px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.chiffre span { font-size: 13px; color: var(--gris); font-style: italic; }

/* 02 · villas empilées */
.pile { position: relative; }
.pile-tete { padding: clamp(48px, 7vw, 100px) var(--marge) 24px; max-width: var(--largeur); margin: 0 auto; display: grid; gap: 10px; }
.pile-carte { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--nuit); border-top: 1px solid var(--ligne); }
.pile-image { position: absolute; inset: 0; margin: 0; }
.pile-image img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1 + var(--p, 0) * 0.08)); filter: brightness(calc(1 - var(--p, 0) * 0.6)); transition: transform 200ms linear, filter 200ms linear; }
.pile-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--nuit), transparent 60%), transparent 35%, color-mix(in srgb, var(--nuit), transparent 15%) 100%); }
.pile-fiche { position: absolute; left: var(--marge); right: var(--marge); bottom: clamp(24px, 5vh, 56px); display: grid; gap: 14px; max-width: var(--largeur); margin: 0 auto; }
.pile-numero { font-family: var(--sans); font-weight: 200; font-size: clamp(60px, 10vw, 140px); line-height: 0.8; letter-spacing: -0.04em; color: var(--cuivre); opacity: 0.9; }
.pile-nom { font-family: var(--sans); font-weight: 200; font-size: clamp(32px, 5vw, 76px); line-height: 1; letter-spacing: -0.02em; }
.pile-nom a { text-decoration: none; }
.pile-sous { font-style: italic; font-size: clamp(16px, 1.5vw, 20px); color: var(--cuivre-clair); max-width: 44ch; }
.pile-specs { display: flex; flex-wrap: wrap; gap: 8px 26px; font-family: var(--sans); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gris); }
.pile-specs b { font-weight: 400; color: var(--creme); }
.pile-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* 03 · une journée : le curseur du soleil */
.journee { padding: clamp(64px, 9vw, 140px) var(--marge); background: linear-gradient(180deg, var(--ciel-a, #0e0d0b), var(--ciel-b, #0e0d0b)); color: var(--creme); transition: background 900ms linear; position: relative; }
.journee-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 36px; }
.journee-tete { display: grid; gap: 10px; }
.journee-heure { font-family: var(--sans); font-weight: 200; font-size: clamp(56px, 9vw, 150px); line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.journee-heure small { font-size: 0.3em; letter-spacing: 0.1em; margin-left: 0.2em; color: var(--cuivre); }
.journee-curseur { position: relative; padding: 24px 0 8px; }
.journee-curseur input { width: 100%; appearance: none; -webkit-appearance: none; background: transparent; height: 32px; margin: 0; cursor: ew-resize; }
.journee-curseur input::-webkit-slider-runnable-track { height: 1px; background: var(--ligne-forte); }
.journee-curseur input::-moz-range-track { height: 1px; background: var(--ligne-forte); }
.journee-curseur input::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; margin-top: -15px; background: radial-gradient(circle, var(--cuivre-clair) 0 35%, var(--cuivre) 36% 60%, transparent 61%); box-shadow: 0 0 40px 6px color-mix(in srgb, var(--cuivre), transparent 60%); border: 0; cursor: ew-resize; }
.journee-curseur input::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--cuivre); border: 0; cursor: ew-resize; }
.journee-heures { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 9px; letter-spacing: 0.2em; color: var(--gris); margin-top: 6px; }
.journee-corps { display: grid; gap: 28px; }
.journee-image { aspect-ratio: 4 / 3; position: relative; overflow: hidden; }
.journee-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms var(--sortie); }
.journee-image img.actif { opacity: 1; }
.journee-textes { position: relative; display: grid; }
.moment { grid-area: 1 / 1; display: grid; gap: 12px; align-content: center; opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--sortie), transform 800ms var(--sortie); pointer-events: none; }
.moment.actif { opacity: 1; transform: none; pointer-events: auto; }
.moment-heure { font-family: var(--sans); font-size: 10px; letter-spacing: 0.3em; color: var(--cuivre); }
.moment-titre { font-family: var(--sans); font-weight: 200; font-size: clamp(28px, 3.4vw, 52px); line-height: 1.02; letter-spacing: -0.02em; }
.moment-texte { max-width: 46ch; font-weight: 300; font-size: 18px; }
body.mode-edition .moment { opacity: 1; transform: none; pointer-events: auto; position: static; }
body.mode-edition .journee-textes { display: grid; gap: 24px; }

/* 04 · la table : un menu à points de conduite */
.carte-menu { padding: clamp(64px, 9vw, 140px) var(--marge); }
.carte-menu-grille { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 40px; }
.carte-menu-texte { display: grid; gap: 18px; align-content: start; justify-items: start; }
.menu { border: 1px solid var(--ligne); padding: clamp(24px, 4vw, 48px); display: grid; gap: 28px; position: relative; }
.menu::before { content: "MENU"; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: var(--creme); padding: 0 12px; font-family: var(--sans); font-size: 9px; letter-spacing: 0.4em; color: var(--cuivre-fonce); }
.menu-partie { display: grid; gap: 10px; }
.menu-partie-titre { font-family: var(--sans); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cuivre-fonce); text-align: center; margin-bottom: 6px; }
.menu-ligne { display: flex; align-items: baseline; gap: 10px; font-size: 18px; }
.menu-ligne > span:first-child { flex: none; max-width: 70%; }
.menu-ligne small { display: block; font-style: italic; color: var(--gris); font-size: 14px; }
.menu-ligne i { flex: 1; border-bottom: 1px dotted var(--ligne-forte); transform: translateY(-5px); }
.clair .menu-ligne i { border-color: var(--gris-sombre); }
.menu-ligne b { font-family: var(--sans); font-weight: 300; font-size: 13px; white-space: nowrap; }
.menu-ligne b small { display: inline; font-style: normal; font-family: var(--sans); font-size: 9px; letter-spacing: 0.1em; color: var(--gris); }

/* 05 · les saisons : le baromètre */
.baro { padding: clamp(64px, 9vw, 140px) var(--marge); }
.baro-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 36px; }
.baro-grille { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 300px; border-bottom: 1px solid var(--ligne-forte); }
.baro-mois { display: grid; grid-template-rows: 1fr auto; height: 100%; text-decoration: none; gap: 8px; }
.baro-barre { align-self: end; height: calc(var(--h) * 1%); min-height: 6px; background: linear-gradient(180deg, var(--cuivre), color-mix(in srgb, var(--cuivre), transparent 60%)); position: relative; transition: transform 500ms var(--sortie), filter 300ms; transform-origin: bottom; }
.baro-mois:hover .baro-barre { filter: brightness(1.2); transform: scaleY(1.02); }
.baro-mois.ferme .baro-barre { background: repeating-linear-gradient(135deg, var(--ligne-forte) 0 1px, transparent 1px 6px); height: 12%; }
.baro-mois.passe { opacity: 0.35; }
.baro-prix { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); font-family: var(--sans); font-size: 9px; letter-spacing: 0.06em; white-space: nowrap; color: var(--creme); opacity: 0; transition: opacity 300ms; }
.baro-mois:hover .baro-prix, .baro-mois.courant .baro-prix { opacity: 1; }
.baro-nom { font-family: var(--sans); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris); text-align: center; padding-top: 8px; }
.baro-mois.courant .baro-nom { color: var(--cuivre); }
.baro-legende { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 14px; font-style: italic; color: var(--gris); }
.baro-legende span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; background: var(--cuivre); }
.baro-legende .legende-ferme::before { background: repeating-linear-gradient(135deg, var(--ligne-forte) 0 1px, transparent 1px 4px); }

/* 06 · livre de bord : cartes postales */
.postales { padding: clamp(64px, 9vw, 140px) 0; overflow: hidden; }
.postales-tete { padding: 0 var(--marge); max-width: var(--largeur); margin: 0 auto 32px; display: grid; gap: 10px; }
.postales-piste { display: flex; gap: 28px; padding: 24px var(--marge); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; }
.postales-piste::-webkit-scrollbar { display: none; }
.postales-piste.saisie { cursor: grabbing; scroll-snap-type: none; }
.postale { flex: 0 0 min(84vw, 460px); scroll-snap-align: center; background: var(--creme); color: var(--encre); padding: 28px 28px 24px; display: grid; grid-template-columns: 1fr auto; gap: 18px; min-height: 280px; transform: rotate(var(--r, 0deg)); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); position: relative; }
.postale:nth-child(odd) { --r: -1.6deg; }
.postale:nth-child(even) { --r: 1.2deg; }
.postale:nth-child(3n) { --r: 2.4deg; }
.postale::before { content: ""; position: absolute; left: 50%; top: 24px; bottom: 24px; width: 1px; background: var(--ligne-sombre); display: none; }
.postale-texte { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; }
.postale-texte::before { content: "« "; color: var(--cuivre-fonce); }
.postale-texte::after { content: " »"; color: var(--cuivre-fonce); }
.postale-timbre { width: 64px; height: 78px; border: 1px dashed var(--cuivre-fonce); display: grid; place-items: center; font-family: var(--sans); font-size: 9px; letter-spacing: 0.2em; text-align: center; color: var(--cuivre-fonce); padding: 6px; align-self: start; }
.postale cite { grid-column: 1 / -1; font-style: normal; font-family: var(--sans); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gris-sombre); align-self: end; }

/* 07 · venir : la carte des courbes */
.venir { padding: clamp(64px, 9vw, 140px) var(--marge); }
.venir-grille { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 40px; }
.carte-courbes { position: relative; aspect-ratio: 1; max-width: 560px; }
.carte-courbes svg { width: 100%; height: 100%; }
.carte-courbes path { fill: none; stroke: var(--ligne-forte); stroke-width: 1; }
.carte-courbes .mer { stroke: color-mix(in srgb, var(--cuivre), transparent 50%); stroke-dasharray: 2 5; }
.carte-courbes .point { fill: var(--cuivre); }
.carte-courbes .halo { fill: none; stroke: var(--cuivre); stroke-width: 1; opacity: 0; animation: halo 3s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes halo { 0% { transform: scale(0.3); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }
.carte-courbes text { fill: var(--creme); font-family: var(--sans); font-size: 7px; letter-spacing: 0.2em; text-transform: uppercase; }
.carte-courbes .lieu { fill: var(--gris); }
.venir-textes { display: grid; gap: 28px; align-content: start; }
.trajets { display: grid; border-top: 1px solid var(--ligne); }
.trajet { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--ligne); align-items: baseline; }
.trajet strong { font-family: var(--sans); font-weight: 300; font-size: 16px; letter-spacing: 0.02em; }
.trajet span { font-size: 15px; color: var(--gris); font-style: italic; grid-column: 1; }
.trajet b { grid-column: 2; grid-row: 1 / span 2; font-family: var(--sans); font-weight: 200; font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.trajet b small { font-size: 0.38em; letter-spacing: 0.14em; margin-left: 4px; color: var(--cuivre); }
.infos-sejour { display: grid; border-top: 1px solid var(--ligne); }
.infos-sejour li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ligne); font-size: 16px; }
.infos-sejour li span:last-child { font-family: var(--sans); font-weight: 300; font-size: 13px; }

/* 08 · la rotonde */
.rotonde { padding: clamp(80px, 12vw, 200px) var(--marge); display: grid; place-items: center; text-align: center; gap: 28px; }
.rotonde-cercle { position: relative; width: min(64vw, 320px); aspect-ratio: 1; display: grid; place-items: center; text-decoration: none; }
.rotonde-cercle svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: tourner 26s linear infinite; }
.rotonde-cercle:hover svg { animation-duration: 10s; }
@keyframes tourner { to { transform: rotate(360deg); } }
.rotonde-cercle text { fill: var(--creme); font-family: var(--sans); font-size: 8.5px; letter-spacing: 0.4em; text-transform: uppercase; }
.rotonde-centre { width: 42%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--cuivre); display: grid; place-items: center; font-family: var(--serif); font-size: clamp(28px, 4vw, 48px); color: var(--cuivre); transition: background 500ms, color 500ms, transform 700ms var(--sortie); }
.rotonde-cercle:hover .rotonde-centre { background: var(--cuivre); color: var(--nuit); transform: scale(1.08); }
.rotonde-texte { max-width: 34ch; font-style: italic; color: var(--gris); }

/* ============================================================
   PAGES INTÉRIEURES
   ============================================================ */
.tete-page { padding: calc(var(--entete) + clamp(40px, 7vw, 100px)) var(--marge) clamp(32px, 5vw, 64px); }
.tete-page-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 22px; }
.tete-page .titre-page { max-width: 16ch; }
.tete-page-texte { max-width: 50ch; }

/* les villas : le registre à lignes dépliables */
.registre { max-width: var(--largeur); margin: 0 auto; border-top: 1px solid var(--ligne); }
.registre-ligne { border-bottom: 1px solid var(--ligne); }
.registre-tete { width: 100%; display: grid; grid-template-columns: 44px 1fr 36px; gap: 6px 14px; align-items: center; padding: 22px 0; background: none; border: 0; text-align: left; cursor: pointer; color: inherit; }
.registre-tete small { font-family: var(--sans); font-size: 9px; letter-spacing: 0.3em; color: var(--cuivre); }
.registre-nom { font-family: var(--sans); font-weight: 200; font-size: clamp(26px, 4.4vw, 68px); line-height: 1; letter-spacing: -0.02em; transition: transform 600ms var(--sortie), color 400ms; }
.registre-tete:hover .registre-nom, .registre-ligne.ouvert .registre-nom { transform: translateX(10px); color: var(--cuivre-clair); }
.registre-meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--sans); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gris); }
.registre-plus { position: relative; width: 36px; height: 36px; border: 1px solid var(--ligne-forte); grid-column: 3; grid-row: 1 / span 2; }
.registre-plus::before, .registre-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1px; background: currentColor; transform: translate(-50%, -50%); transition: transform 500ms var(--sortie); }
.registre-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.registre-ligne.ouvert .registre-plus::after { transform: translate(-50%, -50%) rotate(0); }
.registre-corps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 700ms var(--sortie); }
.registre-ligne.ouvert .registre-corps { grid-template-rows: 1fr; }
.registre-corps > div { overflow: hidden; }
.registre-detail { display: grid; gap: 28px; padding: 6px 0 40px; }
.registre-images { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.registre-texte { display: grid; gap: 16px; justify-items: start; align-content: start; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
.etiquette-tag { font-family: var(--sans); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; padding: 7px 12px; border: 1px solid var(--ligne); color: var(--gris); }
.fiche-technique { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--ligne); width: 100%; }
.fiche-technique > div { display: grid; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--ligne); }
.fiche-technique dt { font-family: var(--sans); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gris); }
.fiche-technique dd { font-family: var(--sans); font-weight: 200; font-size: clamp(20px, 2vw, 28px); letter-spacing: -0.01em; }
.fiche-technique dd small { display: block; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--gris); letter-spacing: 0; }

/* la fiche d'une villa : galerie collée à gauche */
.villa { padding: calc(var(--entete) + 24px) var(--marge) 0; }
.villa-grille { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 32px; }
.villa-galerie { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.villa-galerie img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: calc(1 - var(--p, 0) * 1.4); }
.villa-galerie img + img { opacity: calc(var(--p, 0) * 1.4 - 0.3); }
.villa-galerie-numero { position: absolute; left: 20px; top: 16px; font-family: var(--sans); font-weight: 200; font-size: 48px; line-height: 1; color: var(--creme); mix-blend-mode: difference; }
.villa-texte { display: grid; gap: 24px; align-content: start; justify-items: start; padding-bottom: clamp(48px, 7vw, 100px); }
.villa-texte .titre-page { max-width: 12ch; }
.villa-desc { font-size: clamp(18px, 1.5vw, 21px); font-weight: 300; max-width: 52ch; }
.liste-plus { display: grid; gap: 0; border-top: 1px solid var(--ligne); width: 100%; }
.liste-plus li { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--ligne); font-size: 16px; }
.liste-plus li::before { content: "+"; font-family: var(--sans); font-weight: 200; color: var(--cuivre); }
.villa-autres { max-width: var(--largeur); margin: 0 auto; border-top: 1px solid var(--ligne); }
.villa-autre { display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--ligne); text-decoration: none; }
.villa-autre figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.villa-autre img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--sortie); }
.villa-autre:hover img { transform: scale(1.06); }
.villa-autre strong { font-family: var(--sans); font-weight: 200; font-size: clamp(20px, 2.2vw, 30px); display: block; }
.villa-autre small { font-style: italic; color: var(--gris); }
.villa-autre b { font-family: var(--sans); font-weight: 300; font-size: 13px; white-space: nowrap; }

/* le domaine : plan interactif et chapitres à index collé */
.plan { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 28px; }
.plan-svg { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--ligne); background: var(--nuit-2); }
.plan-svg svg { width: 100%; height: 100%; }
.plan-svg .terre { fill: var(--nuit-3); stroke: var(--ligne-forte); stroke-width: 0.6; }
.plan-svg .eau { fill: none; stroke: color-mix(in srgb, var(--cuivre), transparent 55%); stroke-width: 0.5; stroke-dasharray: 1.5 3; }
.plan-svg .chemin { fill: none; stroke: var(--cuivre); stroke-width: 0.5; stroke-dasharray: 2 2; }
.plan-svg .bassin { fill: color-mix(in srgb, var(--cuivre), transparent 75%); stroke: var(--cuivre); stroke-width: 0.4; }
.plan-svg text { font-family: var(--sans); font-size: 3.2px; letter-spacing: 0.24em; text-transform: uppercase; fill: var(--gris); }
.plan-point { cursor: pointer; }
.plan-point circle { fill: var(--nuit); stroke: var(--cuivre); stroke-width: 0.6; transition: fill 300ms; }
.plan-point text { fill: var(--creme); font-size: 3.4px; letter-spacing: 0.05em; text-anchor: middle; dominant-baseline: central; }
.plan-point:hover circle, .plan-point.actif circle { fill: var(--cuivre); }
.plan-point:hover text, .plan-point.actif text { fill: var(--nuit); }
.plan-legende { display: grid; gap: 0; border-top: 1px solid var(--ligne); }
.plan-legende a { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--ligne); text-decoration: none; transition: padding-left 400ms var(--sortie); }
.plan-legende a:hover, .plan-legende a.actif { padding-left: 10px; color: var(--cuivre-clair); }
.plan-legende small { font-family: var(--sans); font-size: 9px; letter-spacing: 0.3em; color: var(--cuivre); }
.plan-legende strong { font-family: var(--sans); font-weight: 200; font-size: clamp(18px, 2vw, 26px); }
.plan-legende span { font-family: var(--sans); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gris); }
.chapitres { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 40px; }
.chapitre { display: grid; gap: 18px; padding-top: 24px; border-top: 1px solid var(--ligne); }
.chapitre-index { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(48px, 7vw, 110px); line-height: 0.9; color: var(--cuivre); }
.chapitre-corps { display: grid; gap: 18px; justify-items: start; }
.chapitre-image { aspect-ratio: 16 / 10; width: 100%; }
.services { display: grid; width: 100%; border-top: 1px solid var(--ligne); }
.services li { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--ligne); }
.services-nom { font-size: 18px; }
.services-nom small { display: block; font-style: italic; color: var(--gris); font-size: 14px; }
.services-prix { font-family: var(--sans); font-weight: 300; font-size: 13px; white-space: nowrap; }
.services-prix small { font-size: 9px; letter-spacing: 0.1em; color: var(--gris); }

/* l'île : le carnet en colonnes */
.carnet { max-width: var(--largeur); margin: 0 auto; columns: 1; column-gap: 28px; }
.carnet-page { break-inside: avoid; display: grid; gap: 14px; padding: 0 0 36px; margin-bottom: 8px; }
.carnet-page:nth-child(3n+1) .carnet-image { aspect-ratio: 4 / 5; }
.carnet-page:nth-child(3n+2) .carnet-image { aspect-ratio: 1; }
.carnet-page:nth-child(3n) .carnet-image { aspect-ratio: 16 / 10; }
.carnet-image { overflow: hidden; }
.carnet-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--sortie); }
.carnet-page:hover .carnet-image img { transform: scale(1.04); }
.carnet-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.carnet-numero { font-family: var(--sans); font-weight: 200; font-size: 34px; color: var(--cuivre); line-height: 1; }
.carnet-distance { font-family: var(--sans); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gris); }
.carnet-titre { font-family: var(--sans); font-weight: 200; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.05; letter-spacing: -0.01em; }
.carnet-texte { font-weight: 300; max-width: 46ch; }

/* gestion d'un séjour, formulaires */
.carte-bloc { background: var(--nuit-2); border: 1px solid var(--ligne); padding: clamp(24px, 4vw, 40px); display: grid; gap: 22px; }
.recap { display: grid; gap: 10px; }
.recap-date { font-family: var(--sans); font-weight: 200; font-size: clamp(24px, 3vw, 40px); line-height: 1.05; letter-spacing: -0.02em; }
.recap-date em { font-family: var(--serif); font-style: italic; color: var(--cuivre); }
.recap-lignes li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ligne); font-size: 16px; }
.recap-total { font-family: var(--sans); font-weight: 300; font-size: 15px; }
.pastille { display: inline-block; padding: 6px 12px; font-family: var(--sans); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid var(--ligne-forte); justify-self: start; }
.pastille-ok { border-color: #6f9b7c; color: #9fd3ae; }
.pastille-attente { border-color: var(--cuivre); color: var(--cuivre); }
.pastille-non { border-color: #b07064; color: #e2a89c; }
.formulaire { display: grid; gap: 16px; }
.champ { display: grid; gap: 6px; }
.champ label { font-family: var(--sans); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gris); }
.champ input, .champ select, .champ textarea { font: inherit; font-size: 17px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--ligne-forte); background: transparent; color: inherit; width: 100%; transition: border-color 300ms; color-scheme: dark; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--cuivre); }
.champ textarea { min-height: 90px; resize: vertical; }
.champ-case { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--gris); }
.champ-case input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--cuivre); }
.champ-piege { position: absolute; left: -9999px; }
.ligne-champs { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.appel { padding: clamp(64px, 9vw, 140px) var(--marge); text-align: center; display: grid; gap: 24px; justify-items: center; }

/* ============================================================
   PIED
   ============================================================ */
.pied { padding: clamp(48px, 7vw, 100px) var(--marge) 28px; border-top: 1px solid var(--ligne); }
.pied-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 36px; }
.pied-heure { display: grid; gap: 6px; }
.pied-heure strong { font-family: var(--sans); font-weight: 200; font-size: clamp(56px, 11vw, 168px); line-height: 0.9; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.pied-heure span { font-family: var(--sans); font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gris); }
.pied-colonnes { display: grid; gap: 28px; }
.pied-colonne { display: grid; gap: 8px; font-size: 16px; align-content: start; }
.pied-colonne .etiquette { margin-bottom: 6px; }
.pied-colonne a { color: var(--creme); }
.pied-nom { font-family: var(--sans); font-weight: 300; font-size: 14px; letter-spacing: 0.34em; text-transform: uppercase; }
.pied-baseline { color: var(--gris); font-style: italic; max-width: 30ch; }
.pied-acces { color: var(--gris); font-size: 14px; font-style: italic; }
.pied-infos { display: grid; gap: 4px; font-size: 15px; }
.pied-infos li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--ligne); }
.pied-infos li span:last-child { font-family: var(--sans); font-weight: 300; font-size: 12px; }
.pied-liens { display: grid; gap: 4px; }
.pied-liens a { text-decoration: none; }
.pied-bas { max-width: var(--largeur); margin: 48px auto 0; padding-top: 22px; border-top: 1px solid var(--ligne); display: grid; gap: 12px; font-family: var(--sans); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris); }
.pied-bas nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pied-bas a { color: inherit; text-decoration: none; }
.pied-bas a:hover { color: var(--creme); }
.pied-credit a { border-bottom: 1px solid currentColor; }

/* ---------- éditeur : langues, fonds, formulaire ---------- */
.langues { display: inline-flex; gap: 2px; margin-left: 6px; }
.langues a { text-decoration: none; font-family: var(--sans); font-size: 9px; letter-spacing: 0.2em; padding: 4px 8px; opacity: 0.6; }
.langues a[aria-current] { opacity: 1; border-bottom: 1px solid currentColor; }
.menu-mobile .langues { margin: 16px 0 0; }
[data-fond-texte="clair"] { color: var(--creme); --ligne: var(--ligne-claire); }
[data-fond-texte="sombre"] { color: var(--encre); --ligne: var(--ligne-sombre); --gris: var(--gris-sombre); }
.contact { max-width: 760px; }
.formulaire-titre { font-family: var(--sans); font-weight: 200; font-size: clamp(28px, 3.4vw, 48px); letter-spacing: -0.02em; margin-bottom: 10px; line-height: 1; }
.formulaire-intro { color: var(--gris); margin-bottom: 24px; max-width: 56ch; font-style: italic; }
.formulaire-champ { display: grid; gap: 6px; }
.formulaire-champ label { font-family: var(--sans); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gris); }
.formulaire-champ input:not([type="checkbox"]), .formulaire-champ textarea, .formulaire-champ select { width: 100%; font: inherit; font-size: 17px; color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--ligne-forte); padding: 12px 0; }
.formulaire-champ textarea { min-height: 130px; resize: vertical; }
.formulaire-champ input:focus, .formulaire-champ textarea:focus, .formulaire-champ select:focus { outline: none; border-color: var(--cuivre); }
.formulaire-case { display: flex; gap: 10px; align-items: center; text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; font-family: var(--serif) !important; color: inherit !important; }
.formulaire-aide { color: var(--gris); font-size: 13px; font-style: italic; }
.formulaire-erreur { color: #e2a89c; font-size: 13px; }
.formulaire-champ.en-erreur input, .formulaire-champ.en-erreur textarea { border-color: #b07064; }
.formulaire-piege { position: absolute; left: -9999px; }
.formulaire-merci { background: var(--cuivre); color: var(--nuit); padding: 20px 24px; font-size: 20px; font-style: italic; }
.formulaire .bouton, .formulaire button[type="submit"] { justify-self: start; }
.formulaire button[type="submit"]:not(.bouton) { padding: 15px 26px; border: 1px solid var(--cuivre); background: var(--cuivre); color: var(--nuit); font-family: var(--sans); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; cursor: pointer; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 700px) {
    .ouverture-bas { grid-template-columns: 1fr auto; align-items: end; }
    .sommaire-grille { grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start; }
    .sommaire-texte { position: sticky; top: calc(var(--entete) + 32px); }
    .journee-corps { grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
    .carte-menu-grille { grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
    .carte-menu-texte { position: sticky; top: calc(var(--entete) + 32px); }
    .postale::before { display: block; }
    .venir-grille { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
    .registre-tete { grid-template-columns: 56px 1fr auto 36px; }
    .registre-meta { grid-column: 3; grid-row: 1; justify-content: flex-end; text-align: right; }
    .registre-plus { grid-column: 4; grid-row: 1; }
    .registre-detail { grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; }
    .villa-grille { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
    .villa-galerie { position: sticky; top: calc(var(--entete) + 16px); aspect-ratio: auto; height: calc(100svh - var(--entete) - 32px); }
    .plan { grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
    .chapitre { grid-template-columns: 160px 1fr; gap: 40px; }
    .chapitre-index { position: sticky; top: calc(var(--entete) + 24px); }
    .carnet { columns: 2; }
    .pied-colonnes { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
    .pied-bas { grid-template-columns: 1fr auto auto; align-items: center; gap: 24px; }
    .chiffres { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1000px) {
    :root { --colonnes: 12; }
    .entete { grid-template-columns: 1fr auto 1fr; }
    .navigation { display: flex; justify-content: center; gap: 4px; }
    .navigation a { position: relative; text-decoration: none; font-family: var(--sans); font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; padding: 8px 14px; color: var(--creme); transition: color 300ms; }
    .navigation a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 1px; background: var(--cuivre); transform: scaleX(0); transform-origin: right; transition: transform 500ms var(--sortie); }
    .navigation a:hover::after, .navigation a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
    .marque-lieu { display: inline; }
    .entete-heure { display: inline; }
    .entete-actions { justify-self: end; }
    .burger { display: none; }
    .pile-fiche { grid-template-columns: auto 1fr auto; align-items: end; gap: 24px 40px; }
    .pile-fiche > * { grid-column: 2; }
    .pile-fiche .pile-numero { grid-column: 1; grid-row: 1 / span 4; align-self: end; }
    .pile-fiche .pile-actions { grid-column: 3; grid-row: 1 / span 4; align-self: end; }
    .carnet { columns: 3; }
    .baro-grille { height: 360px; }
}