@font-face { font-family: "Italiana"; src: url("polices/italiana.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Red Hat Display"; src: url("polices/redhat.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }

:root {
  --ardoise: #16231F;
  --ardoise-2: #1F302B;
  --ardoise-3: #2B3F39;
  --or: #B89B62;
  --or-fonce: #7E6538;
  --sable: #DCC6A5;
  --chaux: #F5F1EA;
  --blanc: #FFFFFF;
  --couchant: #E8A26A;
  --lagon: #46C6D8;
  --canard: #1E4D5C;
  --canard-2: #163C48;
  --fete: #C058C8;
  --nuit: #0E1A33;
  --titre: "Italiana", "Didot", Georgia, serif;
  --texte: "Red Hat Display", system-ui, sans-serif;
  --bord: 16px;
  --ease: cubic-bezier(.22, .9, .25, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .35 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--ardoise); color: var(--chaux);
  font: 400 17px/1.6 var(--texte); font-variant-numeric: lining-nums;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--titre); font-weight: 400; letter-spacing: .01em; margin: 0; text-wrap: balance; }
p { margin: 0; }
blockquote { margin: 0; }
cite { font-style: normal; }
figure { margin: 0; }
svg use { pointer-events: none; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* les chiffres : l'Italiana dessine le 1 comme un I, les nombres passent en Red Hat Display léger */
.num { font-family: var(--texte); font-weight: 300; letter-spacing: -.01em; }

/* le grain fin, posé sur le fond de chaque section */
.grain { position: relative; isolation: isolate; }
.grain::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .16; pointer-events: none; }

.surtitre { font: 600 13px/1.4 var(--texte); letter-spacing: .16em; text-transform: uppercase; color: var(--or); }

/* — boutons — */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 54px; padding: 0 26px; border-radius: 999px; border: 1.5px solid transparent;
  font: 650 16px/1.15 var(--texte); letter-spacing: .02em; text-decoration: none; cursor: pointer; text-align: center;
  transition: transform .35s var(--ease), background-color .3s, color .3s, border-color .3s, box-shadow .35s;
  -webkit-tap-highlight-color: transparent;
}
.bouton svg { width: 20px; height: 20px; flex: none; }
.bouton:active { transform: scale(.97); }
.bouton-or { background: var(--or); color: var(--ardoise); box-shadow: 0 10px 28px -14px rgba(184, 155, 98, .9); }
.bouton-or:hover { background: var(--sable); transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(184, 155, 98, 1); }
.bouton-trait { border-color: rgba(220, 198, 165, .55); color: var(--sable); background: transparent; }
.bouton-trait:hover { border-color: var(--sable); background: rgba(220, 198, 165, .1); transform: translateY(-2px); }
.bouton-ardoise { background: var(--ardoise); color: var(--sable); }
.bouton-ardoise:hover { background: var(--ardoise-3); transform: translateY(-2px); }
.bouton-petit { min-height: 50px; padding: 0 22px; font-size: 15.5px; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

/* — en-tête — */
/* 22 octobre : l'en-tête reste en haut de l'écran pendant tout le défilement, sur toutes les pages (jamais caché). Une fois
   la page commencée, il prend un fond d'ardoise voilé et un filet d'or ; sur grand écran il se resserre (sa marge du bas
   compense exactement, la page ne bouge pas). --entete-h : sa hauteur une fois resserré, que la séquence de l'accueil
   réserve en haut de sa scène. */
:root { --entete-h: 64px; }
html { scroll-padding-top: calc(var(--entete-h) + 16px); }
.entete {
  display: flex; align-items: center; gap: 12px; padding: 10px var(--bord); min-height: 64px; position: sticky; top: 0; z-index: 60;
  background: rgba(22, 35, 31, .96); transition: padding .35s var(--ease), margin .35s var(--ease), box-shadow .35s, background-color .35s;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .entete { background: rgba(22, 35, 31, .86); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); }
}
.entete.resserre { box-shadow: 0 1px 0 rgba(184, 155, 98, .38), 0 16px 32px -20px rgba(0, 0, 0, .65); }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sable); min-width: 0; }
.marque-embleme { width: 38px; height: 38px; color: var(--or); stroke-width: 6; flex: none; }
.marque-nom { font: 400 22px/1 var(--titre); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.marque-etoiles { font: 500 13px/1 var(--texte); letter-spacing: .1em; color: var(--or); vertical-align: super; margin-left: 2px; }
.apercu { font: 650 12.5px/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--ardoise); background: var(--sable); padding: 6px 9px; border-radius: 999px; flex: none; }
.menu { display: none; }
.entete-tel {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: 999px; border: 1.5px solid rgba(220, 198, 165, .5); color: var(--sable); text-decoration: none;
  font: 650 15px/1 var(--texte); white-space: nowrap; flex: none; transition: background-color .3s, border-color .3s;
}
.entete-tel:hover { background: rgba(220, 198, 165, .1); border-color: var(--sable); }
.entete-tel svg { width: 18px; height: 18px; }
.tel-court { display: none; }
@media (max-width: 520px) {
  .tel-long { display: none; }
  .tel-court { display: inline; }
  .marque-nom { font-size: 17px; letter-spacing: .1em; line-height: 1.05; display: grid; }
  .marque-etoiles { font-size: 11px; }
  .marque-embleme { width: 32px; height: 32px; }
  .entete { gap: 8px; }
}
@media (max-width: 370px) { .marque-etoiles { display: none; } .entete-tel { padding: 0 12px; } }
@media (min-width: 1000px) {
  :root { --entete-h: 66px; }
  .entete { padding: 18px 40px; gap: 20px; }
  .entete.resserre { padding-top: 10px; padding-bottom: 10px; margin-bottom: 16px; }
  .menu { display: flex; gap: 6px; margin-left: auto; }
  .menu a { text-decoration: none; padding: 10px 14px; border-radius: 999px; font: 550 15.5px/1 var(--texte); color: var(--chaux); opacity: .82; transition: opacity .25s, background-color .25s; }
  .menu a:hover { opacity: 1; background: rgba(220, 198, 165, .1); }
  .entete-tel { margin-left: 8px; }
}

/* — cadres : coins doux, filet doré intérieur à 10 px, ombre douce — */
.cadre-photo { position: relative; display: block; overflow: hidden; border-radius: 22px; padding: 0; border: 0; background: var(--ardoise-3); box-shadow: 0 30px 60px -32px rgba(10, 18, 15, .55); }
.cadre-photo::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(232, 214, 180, .85); border-radius: 14px; pointer-events: none; }
.cadre-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
button.cadre-photo { cursor: zoom-in; width: 100%; }
button.cadre-photo:hover img { transform: scale(1.04); }
.cadre figcaption { font: 600 14px/1.35 var(--texte); letter-spacing: .03em; margin-top: 12px; color: #3B4A45; }

/* — hublots : le cercle de l'emblème et les fenêtres rondes de la façade — */
.hublot { border-radius: 50%; overflow: hidden; background: var(--ardoise-3); isolation: isolate; }
.hublot img { width: 100%; height: 100%; object-fit: cover; }
.anneau { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); fill: none; stroke: var(--or); stroke-width: .7; overflow: visible; pointer-events: none; }
.anneau path { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* — 1. haut de page — */
.heros {
  padding: 6px var(--bord) 56px; display: grid; gap: 16px; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 78% 40%, rgba(43, 63, 57, .9), transparent 70%), linear-gradient(180deg, #16231F, #121E1A);
}
.heros-facade { position: absolute; z-index: -1; right: -22%; bottom: -2%; width: 110%; aspect-ratio: 2; color: var(--sable); opacity: .09; pointer-events: none; }
@media (max-width: 599px) { .sur-long { display: none; } }
.heros-visuel { --d: clamp(230px, min(82vw, calc(100svh - 384px)), 520px); position: relative; width: var(--d); height: var(--d); margin: 22px auto 0; }
.hublot-grand { position: absolute; inset: 0; }
.hublot-grand img { object-position: 38% 50%; }
.hublot-petit { position: absolute; width: 34%; height: 34%; right: -4%; bottom: 2%; border: 5px solid var(--ardoise); }
.pastille {
  position: absolute; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 9px 14px; border-radius: 999px; font: 550 14px/1 var(--texte); color: var(--ardoise); background: var(--chaux);
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .6);
}
.pastille svg { width: 16px; height: 16px; color: var(--or-fonce); }
.pastille b { font-weight: 750; }
.pastille-note { left: -2%; bottom: 13%; }
.pastille-soleil { left: 50%; top: -6px; transform: translateX(-50%); background: var(--ardoise); color: var(--sable); border: 1px solid rgba(220, 198, 165, .4); }
.heros-texte { display: grid; gap: 12px; }
.heros h1 { font-size: clamp(29px, 7.8vw, 68px); line-height: 1.08; color: var(--chaux); }
.heros h1 em { font-style: normal; color: var(--sable); }
.heros-actions { display: grid; gap: 10px; margin-top: 4px; }
.chapo { color: rgba(245, 241, 234, .82); max-width: 34em; margin-top: 6px; }
.js .heros .anneau path { stroke-dashoffset: 1; }
.js .heros.pret .anneau path { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s var(--ease) .2s; }
.js .heros .hublot-grand img { transform: scale(1.07); }
.js .heros.pret .hublot-grand img { transform: none; transition: transform 2.4s var(--ease); }
.js .heros .hublot-petit, .js .heros .pastille { opacity: 0; transform: translateY(12px); }
.js .heros .pastille-soleil { transform: translate(-50%, 12px); }
.js .heros.pret .hublot-petit, .js .heros.pret .pastille { opacity: 1; transform: none; transition: opacity .7s, transform .9s var(--ease); }
.js .heros.pret .pastille-soleil { transform: translateX(-50%); }
.js .heros.pret .hublot-petit { transition-delay: .9s; }
.js .heros.pret .pastille-note { transition-delay: 1.2s; }
.js .heros.pret .pastille-soleil { transition-delay: 1.4s; }
@media (min-width: 700px) { .heros-actions { grid-template-columns: auto auto; justify-content: start; } }
@media (min-width: 1000px) {
  .heros { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 56px; padding: 30px 56px 90px 64px; min-height: calc(100svh - 96px); }
  .heros-facade { right: -6%; bottom: 4%; width: 62%; opacity: .1; }
  .heros-texte { order: -1; gap: 24px; }
  .heros-visuel { --d: min(520px, calc(100svh - 230px), 40vw); margin: 0 auto; }
  .pastille { font-size: 15px; padding: 11px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .heros .anneau path, .js .heros .hublot-grand img, .js .heros .hublot-petit, .js .heros .pastille { stroke-dashoffset: 0; transform: none; opacity: 1; transition: none; }
  .js .heros .pastille-soleil { transform: translateX(-50%); }
}

/* — ruban (animation continue n° 1) — */
.ruban { overflow: hidden; padding: clamp(20px, 2.6vw, 40px) 0; margin: calc(-1 * clamp(12px, 2vw, 30px)) 0; position: relative; z-index: 2; }
.ruban-bande { margin: 0 -24px; background: linear-gradient(90deg, #A88A52, var(--or) 30%, #CDB27C 60%, var(--or)); transform: rotate(-2deg); overflow: hidden; }
.ruban-piste {
  display: flex; width: max-content; align-items: center; gap: 22px; padding: 14px 0;
  color: var(--ardoise); font: 400 23px/1 var(--titre); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  animation: ruban 46s linear infinite;
}
.ruban-piste i { font-style: normal; font-size: 15px; }
.ruban .num { font-weight: 400; letter-spacing: .02em; }
@keyframes ruban { to { transform: translateX(-50%); } }

/* — 2. la vue — */
.vue { padding: 96px var(--bord) 90px; color: var(--ardoise); background: linear-gradient(180deg, #F5F1EA 0%, #EEF4EF 55%, #E3F1EE 100%); overflow: hidden; }
.vue-tete { max-width: 860px; margin-bottom: 40px; }
.vue-tete .surtitre { color: #1F8A99; margin-bottom: 14px; }
.vue h2 { font-size: clamp(30px, 7.6vw, 58px); line-height: 1.1; }
.vue-scene { position: relative; }
.horizon { position: absolute; left: calc(-1 * var(--bord)); right: calc(-1 * var(--bord)); top: var(--h, 47%); border-top: 1.5px solid var(--or); opacity: .85; z-index: 2; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 var(--bord), transparent calc(var(--bord) + 1px), transparent calc(100% - var(--bord) - 1px), #000 calc(100% - var(--bord))); mask-image: linear-gradient(90deg, #000 0, #000 var(--bord), transparent calc(var(--bord) + 1px), transparent calc(100% - var(--bord) - 1px), #000 calc(100% - var(--bord))); }
.vue-pano { position: relative; z-index: 1; }
.vue-pano .cadre-photo { aspect-ratio: 2 / 1; }
.vue-pano img { position: absolute; top: 0; left: 0; height: 100%; width: 160%; max-width: none; object-fit: cover; transform: translateX(var(--x, -18%)); transition: none; }
.vue-duo { display: grid; gap: 30px; margin-top: 40px; }
.vue-a .cadre-photo { aspect-ratio: 2 / 1; }
.vue-b { width: 78%; justify-self: end; margin-top: -10px; }
.vue-b .cadre-photo { aspect-ratio: 4 / 3; }
.vue-avis { font: 400 clamp(25px, 6.4vw, 36px)/1.25 var(--titre); color: var(--ardoise); max-width: 18em; }
.vue-avis cite { display: block; font: 700 15px/1 var(--texte); color: #1F8A99; margin-top: 14px; }
@media (min-width: 1000px) {
  .vue { padding: 140px 64px 130px; }
  .vue > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
  .horizon { left: -64px; right: -64px; --bord: 64px; }
  .vue-pano .cadre-photo { aspect-ratio: 21 / 9; }
  .vue-pano img { width: 130%; }
  .vue-duo { grid-template-columns: 1.6fr 1fr; align-items: start; gap: 40px 48px; margin-top: 56px; }
  .vue-b { width: 100%; margin-top: 90px; }
  .vue-avis { grid-column: 1 / 3; justify-self: center; text-align: center; margin-top: 10px; }
}

/* — 3. une journée à la villa — */
.journee { background: #E3F1EE; color: var(--ardoise); position: relative; }
.journee-intro { padding: 72px var(--bord) 30px; max-width: 900px; margin: 0 auto; text-align: center; position: relative; }
.journee::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(184, 155, 98, .55) 70%, var(--or)); }
.journee-intro::before { content: ""; position: absolute; left: 50%; top: 0; width: 1.5px; height: 46px; background: var(--or); opacity: .8; }
.journee-intro .surtitre { color: var(--or-fonce); margin-bottom: 14px; }
.journee-intro h2 { font-size: clamp(30px, 7.4vw, 54px); line-height: 1.12; }

/* Sans JavaScript, ou avec « réduire les animations » : les trois moments l'un sous l'autre, chacun dans sa lumière. */
.sequence { position: relative; }
.scene { position: relative; }
.ciel, .scene-anneau, .frise, .moment-mot { display: none; }
.moment { --accent: var(--or-fonce); position: relative; display: grid; align-content: center; gap: 34px; min-height: 100vh; min-height: 100svh; padding: 64px var(--bord) 72px; }
.moment-jour { background: #E3F1EE; }
.moment-soir { background: linear-gradient(180deg, #F7E3C8 0%, #F1C89F 48%, #E8A26A 100%); }
.moment-nuit { background: radial-gradient(ellipse 60% 50% at 72% 0%, rgba(54, 78, 120, .55), transparent 70%), linear-gradient(180deg, #0E1A33, #101B18 85%); color: var(--chaux); --accent: var(--sable); }
.moment-visuel { position: relative; width: min(76vw, 420px); aspect-ratio: 1; margin: 0 auto; }
.moment-visuel::before { content: ""; position: absolute; inset: -12px; border: 1px solid var(--or); border-radius: 50%; opacity: .8; pointer-events: none; }
.moment-hublot { position: absolute; inset: 0; box-shadow: 0 40px 70px -38px rgba(10, 18, 15, .65); }
.moment-hublot img { width: 100%; height: 100%; object-fit: cover; }
.moment-petit { position: absolute; width: 33%; height: 33%; left: -5%; bottom: -1%; border: 4px solid var(--chaux); box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .55); }
.moment-texte { width: 100%; max-width: 560px; margin: 0 auto; }
.moment-num { font: 600 13px/1 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.moment-num b { font-weight: 800; }
.moment h3 { font-size: clamp(27px, 6.8vw, 46px); line-height: 1.12; margin-bottom: 18px; }
.moment blockquote { font: 400 17px/1.55 var(--texte); padding-left: 16px; border-left: 2px solid var(--or); }
.moment cite { display: block; margin-top: 8px; font-weight: 700; font-size: 15px; color: var(--accent); }
.moment-action { margin-top: 24px; }
@media (min-width: 1000px) {
  .journee-intro { padding: 100px 40px 0; }
  .moment { grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; padding: 90px max(64px, calc((100% - 1240px) / 2)); }
  .moment-visuel { width: min(480px, 38vw); }
  .moment-texte { margin: 0; }
}

/* Avec JavaScript : la section mesure trois écrans (un peu moins au téléphone) et la scène reste à l'écran (sticky) pendant
   qu'on les descend. L'après-midi se pose en haut de la section, le soir au milieu, la nuit au bout ; app.js fait glisser
   la page d'un moment à l'autre à chaque geste (23 octobre), et lit la position dans la section pour poser --t1 et --t2
   (0 à 1, les deux passages : après-midi vers soir, soir vers nuit) et data-moment.
   Le ciel, le soleil puis la lune et l'iris des photos suivent --t1 et --t2 ; le texte, le grand mot et la frise changent
   avec data-moment. La scène fait la hauteur du grand écran (100lvh) et son contenu celle du petit (100svh) : au téléphone,
   rien ne se découvre dessous quand la barre du navigateur se replie. */
.sequence-on .sequence { height: 300vh; }
@media (max-width: 999px) { .sequence-on .sequence { height: 260vh; } }
.sequence-on .scene { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; z-index: 1; }
.sequence-on .ciel { display: block; position: absolute; inset: 0; pointer-events: none; }
.ciel > div { position: absolute; inset: 0; overflow: hidden; }
.ciel-jour { background: #E3F1EE; }
.ciel-soir { opacity: 0; background: linear-gradient(180deg, #F7E3C8 0%, #F1C89F 48%, #E8A26A 100%); }
.ciel-nuit { opacity: 0; background: radial-gradient(ellipse 60% 50% at 72% 0%, rgba(54, 78, 120, .55), transparent 70%), linear-gradient(180deg, #0E1A33, #101B18 85%); }
.sequence-on .ciel-soir { opacity: var(--t1, 0); }
.sequence-on .ciel-nuit { opacity: var(--t2, 0); }
.rayons, .etoiles { position: absolute; inset: 0; width: 100%; height: 100%; }
.rayons { background: radial-gradient(circle at 70% 26%, rgba(255, 222, 165, .9), rgba(232, 162, 106, .3) 26%, transparent 60%), repeating-conic-gradient(from 0deg at 70% 26%, rgba(255, 236, 200, .2) 0 4deg, transparent 4deg 12deg); }
.etoiles circle { fill: #F5E9D2; animation: scintille 3.2s ease-in-out infinite alternate; }
@keyframes scintille { from { opacity: .15; } to { opacity: 1; } }

.sequence-on .scene-cadre {
  --d: clamp(150px, min(66vw, calc(100svh - 500px)), 340px);
  position: relative; height: 100vh; height: 100svh; display: grid; grid-template-areas: "v" "t"; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr);
  align-content: start; justify-items: center; row-gap: 34px; padding: calc(var(--entete-h) + max(26px, 3svh)) var(--bord) 0;
}
.sequence-on .moment { display: contents; }
.sequence-on .moment-visuel, .sequence-on .scene-anneau { grid-area: v; width: var(--d); height: var(--d); margin: 0; }
.sequence-on .moment-visuel::before { display: none; }
.sequence-on .moment-texte { grid-area: t; position: relative; z-index: 3; align-self: start; max-width: 540px; }
.sequence-on .scene-anneau { display: block; position: relative; }
.anneau-scene { inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); }
.anneau-scene circle { stroke-width: .8; }
/* 22 octobre : la progression se lit d'un coup d'œil. Le soleil (puis la lune) avance sans à-coup avec le défilement
   (--p, 0 à 1, posé par app.js) sur l'anneau : le chemin fait se trace en or, le chemin qui reste est en pointillé, un
   repère par moment s'allume au passage, et le dernier, plus gros, marque la fin de la journée. */
.anneau-course { inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); z-index: 1; }
.course-piste { stroke-width: 1; stroke-dasharray: 1.2 3.4; opacity: .6; }
.course-fil { stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0 360; }
.course-repere { fill: #E3F1EE; stroke-width: 1.2; transition: fill .4s, r .4s; }
.course-repere.atteint { fill: var(--or); }
.course-repere-fin.atteint { fill: var(--or); filter: drop-shadow(0 0 4px rgba(242, 180, 94, .9)); }
.anneau-course { stroke: var(--or-fonce); transition: stroke .8s; }
.sequence[data-moment="2"] .anneau-course { stroke: var(--sable); }
.sequence[data-moment="2"] .course-repere { fill: #101B18; }
.sequence[data-moment="2"] .course-repere.atteint { fill: var(--sable); }
.orbite { position: absolute; inset: -12px; transform: rotate(calc(-58deg + 72deg * var(--t1, 0) + 82deg * var(--t2, 0))); }
/* l'orbite épouse l'anneau (rayon 96 sur 200) et tourne avec la progression elle-même, plus seulement aux passages */
.sequence-on .orbite { inset: calc(var(--d) * .02 - 11.52px); transform: rotate(calc(-58deg + 154deg * var(--p, 0))); z-index: 2; }
.soleil, .lune { position: absolute; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; }
.soleil { top: 0; margin-top: -12px; background: radial-gradient(circle at 40% 40%, #FFF3D6, #F2B45E 60%, #E58A4A); box-shadow: 0 0 0 6px rgba(242, 180, 94, .18), 0 0 26px 6px rgba(242, 180, 94, .45); }
.lune { bottom: 0; margin-bottom: -12px; opacity: 0; background: radial-gradient(circle at 35% 35%, #FFFBEF, #E9DFC6 70%); box-shadow: 0 0 22px 4px rgba(245, 233, 210, .35); }
/* le soleil s'efface sur la première moitié du passage vers la nuit, la lune se lève sur la seconde */
.sequence-on .soleil { opacity: clamp(0, 1 - 2 * var(--t2, 0), 1); }
.sequence-on .lune { top: 0; bottom: auto; margin: -12px 0 0 -12px; opacity: clamp(0, 2 * var(--t2, 0) - 1, 1); transform: translateY(calc(10px * (1 - var(--t2, 0)))); }
.anneau-scene { transition: stroke .8s; }
.sequence[data-moment="2"] .anneau-scene { stroke: var(--sable); }

/* les photos : la suivante s'ouvre en iris dans le hublot, au-dessus de la précédente (et se referme en remontant) */
.sequence-on .moment-jour { --o: 1; }
.sequence-on .moment-soir { --o: var(--t1, 0); }
.sequence-on .moment-nuit { --o: var(--t2, 0); }
.sequence-on .moment-hublot { clip-path: circle(calc(51% * var(--o)) at 50% 50%); }
.sequence-on .moment-hublot img { transform: scale(1.07); transition: transform 1.8s var(--ease); }
.sequence-on .moment.actif .moment-hublot img { transform: none; }
.sequence-on .moment-petit { opacity: 0; transform: scale(.6) rotate(-10deg); transition: opacity .35s, transform .5s var(--ease); z-index: 2; }
.sequence-on .moment.actif .moment-petit { opacity: 1; transform: none; transition: opacity .6s .45s, transform .9s var(--ease) .45s; }

/* le texte du moment entre ligne par ligne ; celui qui s'en va s'efface vite */
.sequence-on .moment-texte { visibility: hidden; transition: visibility 0s .3s; }
.sequence-on .moment.actif .moment-texte { visibility: visible; transition: none; }
.sequence-on .moment-texte > * { opacity: 0; transform: translateY(24px); transition: opacity .25s, transform .3s; }
.sequence-on .moment.actif .moment-texte > * { opacity: 1; transform: none; transition: opacity .8s var(--ease) calc(.3s + var(--k, 0) * .1s), transform 1s var(--ease) calc(.3s + var(--k, 0) * .1s); }
.moment-texte > :nth-child(2) { --k: 1; } .moment-texte > :nth-child(3) { --k: 2; } .moment-texte > :nth-child(4) { --k: 3; }
.sequence-on .moment h3 { font-size: clamp(24px, 6.3vw, 44px); margin-bottom: 14px; }
.sequence-on .moment blockquote { font-size: 16px; line-height: 1.5; }
.sequence-on .moment-action { margin-top: 20px; }

/* la frise (22 octobre) : une piste en trois tronçons, un par moment, qui se remplit d'or au fil du défilement (--f, 0 à
   1, posé par app.js). Le repère du moment passé est plein, celui du moment en cours brille, un petit soleil (la lune la
   nuit) marque la tête du fil, et le point « Fin » s'allume quand la journée est finie. Toucher un moment y mène. */
.sequence-on .frise {
  --fil: var(--or-fonce); --astre: radial-gradient(circle at 40% 40%, #FFF3D6, #F2B45E 60%, #E58A4A);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: start;
  position: absolute; left: 0; right: 0; width: min(calc(100% - 2 * var(--bord)), 560px); margin: 0 auto;
  top: calc(100svh - var(--barre-h, 0px) - 74px); z-index: 4; transition: color 1s;
}
.sequence[data-moment="2"] .frise { color: var(--sable); --fil: var(--sable); --astre: radial-gradient(circle at 35% 35%, #FFFBEF, #E9DFC6 70%); }
.frise button { position: relative; display: block; min-height: 44px; padding: 12px 0 8px; border: 0; background: none; cursor: pointer; text-align: left; color: inherit; -webkit-tap-highlight-color: transparent; }
.frise-piste { position: relative; display: block; height: 11px; margin-bottom: 10px; }
.frise-piste::before { content: ""; position: absolute; left: 15px; right: 4px; top: 5px; height: 1px; background: currentColor; opacity: .3; }
.frise-piste i { position: absolute; left: 15px; right: 4px; top: 4.5px; height: 2px; border-radius: 2px; background: var(--fil); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.frise-piste::after { content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 11px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid currentColor; opacity: .55; transition: background-color .4s, border-color .4s, opacity .4s, box-shadow .4s; }
.frise button.passe .frise-piste::after, .frise button[aria-current] .frise-piste::after { background: var(--fil); border-color: var(--fil); opacity: 1; }
.frise button[aria-current] .frise-piste::after { box-shadow: 0 0 0 4px color-mix(in srgb, var(--fil) 22%, transparent); }
.frise-piste b { position: absolute; top: 0; left: calc(15px + (100% - 19px) * var(--f, 0) - 5.5px); width: 11px; height: 11px; border-radius: 50%; background: var(--astre); box-shadow: 0 0 10px 2px rgba(242, 180, 94, .55); opacity: 0; transition: opacity .3s; }
.frise button[aria-current] .frise-piste b { opacity: 1; }
.sequence.fini .frise button[aria-current] .frise-piste b { opacity: 0; }
.frise-nom { display: block; font: 600 12px/1.2 var(--texte); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; opacity: .5; transition: opacity .4s; }
.frise button.passe .frise-nom { opacity: .72; }
.frise button[aria-current] .frise-nom { opacity: 1; font-weight: 750; }
.frise button:hover .frise-nom { opacity: .9; }
.frise-fin { display: block; padding: 12px 0 8px; text-align: center; }
.frise-fin-point { display: block; width: 11px; height: 11px; margin: 0 auto 10px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid currentColor; opacity: .55; transition: background-color .5s, border-color .5s, opacity .5s, box-shadow .5s; }
.frise-fin .frise-nom { opacity: .4; }
.sequence.fini .frise-fin-point { background: var(--fil); border-color: var(--fil); opacity: 1; box-shadow: 0 0 0 4px color-mix(in srgb, var(--fil) 22%, transparent), 0 0 14px 2px rgba(242, 180, 94, .5); }
.sequence.fini .frise-fin .frise-nom { opacity: 1; font-weight: 750; }

@media (max-width: 999px) and (max-height: 760px) {
  .sequence-on .moment-action { display: none; }
  .sequence-on .scene-cadre { row-gap: 26px; padding-top: calc(var(--entete-h) + 22px); }
  .sequence-on .moment blockquote { font-size: 15px; }
}
@media (max-width: 380px) { .frise-nom { letter-spacing: .06em; font-size: 11.5px; } }
@media (min-width: 1000px) {
  .sequence-on .scene-cadre {
    --d: min(520px, calc(100svh - 230px), 36vw);
    grid-template-areas: "v t"; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; align-items: center; align-content: stretch;
    column-gap: 70px; padding: var(--entete-h) 64px 84px; max-width: 1400px; margin: 0 auto;
  }
  .sequence-on .moment-texte { justify-self: start; align-self: center; max-width: 540px; margin-top: -40px; }
  .sequence-on .moment h3 { font-size: clamp(36px, 3.4vw, 54px); margin-bottom: 22px; }
  .sequence-on .moment-num { font-size: 14px; margin-bottom: 18px; }
  .sequence-on .moment-mot { display: block; position: absolute; right: 3vw; bottom: 4svh; font: 400 clamp(110px, 12vw, 210px)/.8 var(--titre); letter-spacing: -.01em; white-space: nowrap; color: currentColor; opacity: 0; transform: translateY(40px); transition: opacity .4s, transform .6s var(--ease); pointer-events: none; z-index: 0; }
  .sequence-on .moment.actif .moment-mot { opacity: .07; transform: none; transition: opacity 1.2s ease .2s, transform 1.4s var(--ease) .2s; }
  .sequence-on .moment-nuit.actif .moment-mot { opacity: .09; }
  .sequence-on .scene::before { content: ""; position: absolute; left: 0; right: 52%; top: calc(50svh + var(--entete-h) / 2 - 42px); border-top: 1px solid rgba(184, 155, 98, .45); }
  .sequence-on .frise { top: calc(100svh - 92px); width: 620px; }
  .frise-nom { font-size: 13px; letter-spacing: .14em; }
  .sequence-on .moment blockquote { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ciel > div, .orbite, .moment-hublot, .moment-hublot img, .moment-petit, .moment-texte > * { transition: none !important; }
}

/* — ornement : une frise de hublots en bordure des titres — */
.frise-hublots { width: 220px; height: 24px; color: var(--or); display: block; margin-bottom: 18px; overflow: visible; }

/* — 4. les chambres — */
.chambres { padding: 90px var(--bord) 96px; color: var(--ardoise); background: radial-gradient(ellipse at 100% 50%, rgba(30, 77, 92, .14), transparent 55%), linear-gradient(180deg, #F5F1EA, #EFE9DE); display: grid; gap: 44px; overflow: hidden; }
.chambres .surtitre { color: var(--canard); margin-bottom: 14px; }
.chambres .frise-hublots { color: var(--canard); }
.chambres h2 { font-size: clamp(30px, 7.6vw, 54px); line-height: 1.1; margin-bottom: 18px; }
.chambres-texte > p:not(.surtitre) { color: #34433E; max-width: 34em; }
.chambres-avis { margin-top: 26px; padding: 20px 22px; border-radius: 22px 22px 22px 4px; background: var(--canard); color: var(--chaux); font: 400 22px/1.3 var(--titre); max-width: 26em; }
.chambres-avis cite { display: block; margin-top: 10px; font: 700 15px/1 var(--texte); color: var(--sable); }
.chambres-chiffre { margin-top: 24px; font: 600 15px/1.4 var(--texte); color: var(--canard) !important; }
.chambres-chiffre .num { font-size: 56px; line-height: 1; vertical-align: middle; margin-right: 10px; }
.arches {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 16px 34px; margin-top: 40px; border-radius: 30px;
  background: radial-gradient(circle at 80% 10%, rgba(255, 255, 255, .12), transparent 45%), linear-gradient(160deg, var(--canard), var(--canard-2));
}
.arches::before { content: ""; position: absolute; width: 180px; height: 180px; right: -50px; top: -50px; border-radius: 50%; border: 1px solid rgba(220, 198, 165, .4); }
.arche button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 999px 999px 18px 18px; overflow: hidden; position: relative; box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .6); }
.arche button::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(232, 214, 180, .8); border-radius: 999px 999px 12px 12px; pointer-events: none; }
.arche img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; transition: transform 1s var(--ease); }
.arche button:hover img { transform: scale(1.05); }
.arche-1 { margin-top: -40px; }
.arche-2 { margin-top: 20px; }
.hublot-chambre { grid-column: 1 / 3; position: relative; width: 78%; margin: 6px auto 0; text-align: center; }
.hublot-chambre button { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 5px solid var(--chaux); border-radius: 50%; overflow: hidden; cursor: zoom-in; background: none; box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .7); }
.hublot-chambre img { width: 100%; height: 100%; object-fit: cover; object-position: 12% 30%; transition: transform 1s var(--ease); }
.hublot-chambre button:hover img { transform: scale(1.05); }
.hublot-trace { position: absolute; left: -12px; top: -12px; width: calc(100% + 24px); aspect-ratio: 1; fill: none; stroke: var(--or); stroke-width: .9; overflow: visible; pointer-events: none; }
.hublot-trace circle { stroke-dasharray: 1; stroke-dashoffset: 0; }
.hublot-chambre figcaption { font: 600 14px/1.35 var(--texte); color: var(--sable); margin-top: 18px; }
/* le moment des chambres : les arches s'ouvrent comme des portes, le hublot se trace */
.js .arches .arche button, .js .arches .hublot-chambre button { clip-path: inset(100% 0 0 0 round 999px 999px 18px 18px); }
.js .arches .hublot-chambre button { clip-path: circle(0% at 50% 100%); }
.js .arches .hublot-trace circle { stroke-dashoffset: 1; }
.js .arches.vu .arche button { clip-path: inset(0 0 0 0 round 999px 999px 18px 18px); transition: clip-path .6s var(--ease); }
.js .arches.vu .arche-2 button { transition-delay: .15s; }
.js .arches.vu .hublot-chambre button { clip-path: circle(130% at 50% 100%); transition: clip-path .9s var(--ease) .3s; }
.js .arches.vu .hublot-trace circle { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease) .6s; }
@media (prefers-reduced-motion: reduce) {
  .js .arches .arche button, .js .arches .hublot-chambre button { clip-path: none !important; }
  .js .arches .hublot-trace circle { stroke-dashoffset: 0; }
}
@media (min-width: 1000px) and (max-width: 1399px) {
  .chambres { padding: 130px 64px; }
  .chambres > * { max-width: 820px; width: 100%; margin: 0 auto; }
  .arches { padding: 0 40px 40px; gap: 24px; }
  .hublot-chambre { width: 56%; }
}
@media (min-width: 1400px) {
  .chambres { grid-template-columns: minmax(0, 470px) 1fr; align-items: center; gap: 70px; padding: 150px 0 150px 64px; }
  .chambres-texte { max-width: 470px; justify-self: end; }
  .arches { display: block; height: 660px; margin: 0; padding: 0; border-radius: 30px 0 0 30px; }
  .arche { position: absolute; width: 300px; margin: 0 !important; }
  .arche-1 { left: 32px; top: -40px; }
  .arche-2 { left: 352px; top: 30px; }
  .hublot-chambre { position: absolute; left: 556px; top: 320px; width: 270px; margin: 0; }
}

/* — 5. les pièces à vivre — */
.vivre { padding: 90px var(--bord) 96px; color: var(--ardoise); background: radial-gradient(ellipse at 10% 0%, rgba(184, 155, 98, .18), transparent 50%), linear-gradient(180deg, #EFE9DE, #F5F1EA); }
.baies { position: absolute; z-index: -1; right: -18%; top: 4%; width: 92%; max-width: 1100px; color: var(--or); opacity: .09; pointer-events: none; }
.baies-mer { stroke: #1F8A99; }
@media (max-width: 999px) { .baies { right: -40%; width: 150%; top: 2%; } }
.vivre { overflow: hidden; }
.volets .volet { position: absolute; top: 0; bottom: 0; width: 50.5%; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(232, 214, 180, .96), rgba(245, 241, 234, .96)); border: 1px solid rgba(184, 155, 98, .6); transition: transform 1.2s var(--ease) .15s; }
.volets .volet::after { content: ""; position: absolute; top: 46%; width: 4px; height: 44px; border-radius: 3px; background: var(--or); }
.volet-g { left: 0; } .volet-g::after { right: 14px; }
.volet-d { right: 0; } .volet-d::after { left: 14px; }
html:not(.js) .volet { display: none; }
.vivre-grand.vu .volet-g { transform: translateX(-101%); }
.vivre-grand.vu .volet-d { transform: translateX(101%); }
@media (prefers-reduced-motion: reduce) { .volet { display: none; } }
.vivre-tete { max-width: 860px; }
.vivre-tete .surtitre { color: var(--or-fonce); margin-bottom: 14px; }
.vivre h2 { font-size: clamp(30px, 7.6vw, 54px); line-height: 1.1; margin-bottom: 18px; }
.vivre-tete > p:last-child { color: #34433E; max-width: 36em; }
.vivre-compo { display: grid; gap: 26px; margin-top: 44px; }
.vivre-grand .cadre-photo { aspect-ratio: 4 / 3; }
.vivre-cote { display: grid; gap: 22px; }
.vivre-cote .cadre-photo { aspect-ratio: 16 / 10; }
.vivre-bas { display: grid; gap: 30px; margin-top: 50px; }
.chiffres { display: grid; margin: 0; }
.chiffres > div { display: grid; grid-template-columns: minmax(0, 46%) 1fr; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid rgba(22, 35, 31, .14); }
.chiffres dt { font: 300 clamp(40px, 11vw, 72px)/1 var(--texte); color: var(--or-fonce); white-space: nowrap; }
.chiffres dd { margin: 0; font-size: 16px; line-height: 1.4; }
.etiquette { background: var(--ardoise); color: var(--chaux); padding: 22px 20px; border-radius: 22px 22px 22px 4px; font: 400 16.5px/1.5 var(--texte); transform: rotate(-1deg); }
.etiquette cite { display: block; margin-top: 10px; color: var(--sable); font-weight: 700; font-size: 15px; }
@media (min-width: 1000px) {
  .vivre { padding: 130px 64px 140px; }
  .vivre > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
  .vivre-compo { grid-template-columns: 1.55fr 1fr; gap: 30px; align-items: start; }
  .vivre-grand { max-width: 760px; }
  .vivre-cote { margin-top: 60px; }
  .vivre-bas { grid-template-columns: 1.2fr 1fr; align-items: center; gap: 60px; }
  .chiffres { grid-template-columns: 1fr 1fr; gap: 32px; }
  .chiffres > div { grid-template-columns: 1fr; gap: 10px; padding: 26px 0 0; }
}

/* — 6. la mosaïque — */
.mosaique { padding: 96px var(--bord) 100px; background: radial-gradient(ellipse at 90% 100%, rgba(184, 155, 98, .14), transparent 55%), linear-gradient(180deg, #1F302B, #182824); overflow: hidden; }
.mosaique-facade { position: absolute; z-index: -1; left: -10%; bottom: -1%; width: 90%; aspect-ratio: 2; color: var(--sable); opacity: .06; }
.mosaique-tete { max-width: 860px; margin-bottom: 44px; }
.mosaique-tete .surtitre { margin-bottom: 14px; }
.mosaique h2 { font-size: clamp(30px, 7.6vw, 54px); line-height: 1.1; margin-bottom: 12px; }
.mosaique-tete > p:last-child { color: rgba(245, 241, 234, .75); }
.groupe + .groupe { margin-top: 56px; }
.groupe h3 { font-size: clamp(25px, 6.2vw, 36px); margin-bottom: 18px; color: var(--sable); display: flex; align-items: baseline; gap: 14px; }
.groupe h3 .num { font-size: 15px; font-weight: 700; letter-spacing: .1em; color: var(--or); }
.grille { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
.grille.g5 { grid-template-columns: 1fr 1fr; }
.tuile { position: relative; display: block; padding: 0; border: 0; background: var(--ardoise-3); border-radius: 16px; overflow: hidden; cursor: zoom-in; aspect-ratio: 1; }
.tuile::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(232, 214, 180, .7); border-radius: 11px; pointer-events: none; }
.tuile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .4s; }
.tuile:hover img { transform: scale(1.06); }
.tuile svg { position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: rgba(22, 35, 31, .7); color: var(--sable); opacity: .9; transition: transform .35s var(--ease), background-color .3s; }
.tuile:hover svg { transform: scale(1.12); background: var(--or); color: var(--ardoise); }
.tuile-grande { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
@media (min-width: 1000px) {
  .mosaique { padding: 130px 64px 140px; }
  .mosaique > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
  .grille { grid-template-columns: 1.7fr 1fr; grid-template-rows: repeat(3, 196px); gap: 14px; }
  .grille .tuile { aspect-ratio: auto; }
  .grille .tuile-grande { grid-column: 1; grid-row: 1 / 4; }
  .grille.g5 { grid-template-columns: 1fr 1fr 1.5fr; grid-template-rows: repeat(2, 300px); }
  .grille.g5 .tuile-grande { grid-column: 3; grid-row: 1 / 3; }
}

/* — 7. choisir un week-end — */
.weekends { padding: 90px var(--bord) 80px; background: radial-gradient(circle at 85% 15%, rgba(70, 198, 216, .2), transparent 45%), radial-gradient(circle at 10% 90%, rgba(184, 155, 98, .16), transparent 45%), linear-gradient(160deg, #173A3C, #16231F 70%); overflow: hidden; }
.weekends::before { content: ""; position: absolute; z-index: -1; width: 240px; height: 240px; left: 4%; bottom: 40px; border: 1px solid rgba(184, 155, 98, .22); border-radius: 50%; box-shadow: 0 0 0 26px rgba(184, 155, 98, .025), 0 0 0 27px rgba(184, 155, 98, .12); }
@media (min-width: 1000px) { .weekends::before { width: 300px; height: 300px; left: 34px; bottom: 50px; } }
.weekends-tete .surtitre { margin-bottom: 14px; color: var(--lagon); }
.weekends h2 { font-size: clamp(30px, 7.4vw, 52px); line-height: 1.12; margin-bottom: 14px; max-width: 18em; }
.weekends-tete p:last-child { color: rgba(245, 241, 234, .78); }
.weekends-liste {
  list-style: none; margin: 28px calc(-1 * var(--bord)) 0; padding: 4px var(--bord) 10px; display: flex; gap: 10px; overflow-x: auto;
  touch-action: pan-x pan-y; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; scroll-padding-inline: var(--bord);
}
.weekends-liste::-webkit-scrollbar { display: none; }
.weekends-liste li { flex: none; scroll-snap-align: start; }
.we {
  display: grid; gap: 4px; min-width: 160px; min-height: 104px; padding: 16px 18px; text-align: left; border-radius: 22px; cursor: pointer;
  background: rgba(245, 241, 234, .07); border: 1px solid rgba(220, 198, 165, .35); color: var(--chaux);
  transition: background-color .25s, border-color .25s, transform .35s var(--ease);
}
.we:hover { background: rgba(220, 198, 165, .16); border-color: var(--sable); transform: translateY(-3px); }
.we-jours { font: 400 22px/1.1 var(--texte); color: var(--sable); }
.we-mois { font: 500 14.5px/1.2 var(--texte); }
.we-jours-sem { font-size: 13.5px; opacity: .7; }
.we-action { font: 700 13px/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--lagon); margin-top: 6px; }
.we[disabled] { cursor: default; opacity: .5; transform: none; background: transparent; border-style: dashed; }
.we[disabled] .we-action { color: rgba(245, 241, 234, .7); }
.weekends-note { font-size: 14px; line-height: 1.45; color: rgba(245, 241, 234, .62); margin-top: 14px; }
@media (min-width: 1000px) {
  .weekends { padding: 120px 64px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px 56px; align-items: center; }
  .weekends > * { max-width: none; }
  .weekends-liste { grid-column: 2; grid-row: 1 / 3; display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 0; padding: 0; }
  .we { min-width: 0; }
  .weekends-note { grid-column: 1; align-self: start; }
}

/* — 8. événements : faisceaux de lumière (animation continue n° 2) et voile drapé — */
.evenements { background: radial-gradient(ellipse at 50% 0%, rgba(192, 88, 200, .12), transparent 60%), linear-gradient(180deg, #19202A, var(--ardoise) 40%); color: var(--chaux); padding: 120px var(--bord) 90px; position: relative; overflow: hidden; isolation: isolate; }
.faisceaux { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.18) 0, rgba(0,0,0,.18) 28%, #000 46%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.18) 0, rgba(0,0,0,.18) 28%, #000 46%, #000 88%, transparent 100%); }
.faisceaux span { position: absolute; top: 40px; width: 1400px; height: 1700px; margin-left: -700px; transform-origin: 50% 0;
  background: conic-gradient(from 168deg at 50% 0, transparent 0deg, rgba(176, 106, 216, .26) 5deg, rgba(190, 120, 228, .6) 12deg, rgba(176, 106, 216, .26) 19deg, transparent 24deg);
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.5) 55%, transparent 90%); mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.5) 55%, transparent 90%); }
.f-g { left: 6%; transform: rotate(-24deg); animation: balaie 12s ease-in-out infinite alternate; }
.f-d { left: 94%; transform: rotate(24deg); animation: balaie2 12s ease-in-out infinite alternate; animation-delay: -6s; }
@keyframes balaie { from { transform: rotate(-36deg); } to { transform: rotate(-14deg); } }
@keyframes balaie2 { from { transform: rotate(36deg); } to { transform: rotate(14deg); } }
.projecteur { position: absolute; top: 30px; width: 46px; height: 38px; color: var(--or); opacity: .8; z-index: -1; }
.projecteur-g { left: calc(6% - 18px); }
.projecteur-d { right: calc(6% - 18px); transform: scaleX(-1); }
@media (max-width: 999px) {
  .f-g, .projecteur-g { display: none; }
  .f-d { left: 92%; }
  @keyframes balaie2 { from { transform: rotate(40deg); } to { transform: rotate(22deg); } }
}
.voile { position: absolute; left: 0; top: 0; width: 100%; height: 110px; color: var(--or); opacity: .55; z-index: -1; }
.eve-tete { max-width: 900px; position: relative; }
.eve-tete .surtitre { margin-bottom: 14px; color: #E2A6E8; }
.eve-tete h2 { font-size: clamp(30px, 7.6vw, 58px); line-height: 1.1; margin-bottom: 20px; }
.eve-tete p { color: rgba(245, 241, 234, .84); max-width: 40em; }
.eve-chiffres { display: grid; margin: 56px 0 0; }
.eve-chiffres > div { display: grid; grid-template-columns: minmax(0, 46%) 1fr; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid rgba(220, 198, 165, .2); }
.eve-chiffres dt { font: 300 clamp(40px, 11vw, 72px)/1 var(--texte); color: var(--sable); white-space: nowrap; }
.eve-chiffres dt.mot { font-family: var(--titre); font-weight: 400; font-size: clamp(32px, 8.4vw, 50px); white-space: normal; line-height: 1.05; }
.eve-chiffres dd { margin: 0; font-size: 16px; line-height: 1.4; }
.fetes { display: grid; gap: 32px; margin-top: 64px; position: relative; }
.fete-photo { display: none; }
@media (max-width: 999px) {
  .fetes-visuel { display: none; }
  .fete-photo { display: block; margin: 0 0 16px 31px; border-radius: 999px 999px 18px 18px; overflow: hidden; position: relative; box-shadow: 0 24px 50px -30px rgba(192, 88, 200, .6); }
  .fete-photo::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(232, 214, 180, .8); border-radius: 999px 999px 12px 12px; }
  .fete-photo img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; }
}
.arche-fete { position: relative; width: 100%; aspect-ratio: 4 / 5; margin: 0 auto; border-radius: 999px 999px 26px 26px; overflow: hidden; background: var(--ardoise-3); box-shadow: 0 40px 80px -40px rgba(192, 88, 200, .55); }
.arche-fete::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(232, 214, 180, .85); border-radius: 999px 999px 18px 18px; pointer-events: none; z-index: 2; }
.fete-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity .9s, transform 1.4s var(--ease); }
.fete-img.actif { opacity: 1; transform: none; }
.fete-legende { margin-top: 14px; text-align: center; font: 600 14px/1.3 var(--texte); letter-spacing: .04em; color: var(--sable); }
.fetes-liste h3 { font-size: clamp(26px, 6.4vw, 40px); margin-bottom: 18px; }
.fetes-liste ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(220, 198, 165, .22); }
.fete { border-bottom: 1px solid rgba(220, 198, 165, .22); }
.fete-titre {
  width: 100%; display: flex; align-items: baseline; gap: 16px; padding: 18px 0; min-height: 60px; background: none; border: 0; cursor: pointer; text-align: left;
  font: 400 clamp(25px, 6.4vw, 36px)/1.15 var(--titre); color: rgba(245, 241, 234, .66); transition: color .3s, padding-left .4s var(--ease);
}
.fete-titre:hover { color: var(--chaux); padding-left: 6px; }
.fete.actif .fete-titre { color: var(--chaux); }
.fete-num { font: 700 13px/1 var(--texte); letter-spacing: .1em; color: #E2A6E8; flex: none; transform: translateY(-4px); }
.fete-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.fete-int { min-height: 0; overflow: hidden; }
.fete.actif .fete-detail { grid-template-rows: 1fr; }
.fete-detail blockquote { font-size: 16.5px; line-height: 1.55; color: rgba(245, 241, 234, .9); padding: 0 0 14px 31px; }
.fete-detail cite { display: block; margin-top: 6px; font-weight: 700; color: var(--sable); font-size: 15px; }
.fete-detail .bouton { margin: 0 0 20px 31px; }
@media (min-width: 1000px) {
  .evenements { padding: 170px 64px 140px; }
  .evenements > :not(.faisceaux):not(.voile) { max-width: 1240px; margin-left: auto; margin-right: auto; }
  .voile { height: 150px; }
  .eve-chiffres { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .eve-chiffres > div { grid-template-columns: 1fr; gap: 10px; padding: 26px 0 0; }
  .fetes { grid-template-columns: 560px 1fr; gap: 80px; align-items: center; }
  .arche-fete { width: 560px; height: 700px; aspect-ratio: auto; }
}

/* — 9. avis : branches de frangipanier et pétales qui tombent (animation continue n° 3) — */
.avis { background: radial-gradient(ellipse at 100% 0%, rgba(232, 162, 106, .14), transparent 50%), linear-gradient(180deg, #F5F1EA, #F1EADF); color: var(--ardoise); padding: 90px var(--bord) 86px; overflow: hidden; }
.branche { position: absolute; z-index: -1; width: 210px; height: 173px; color: var(--or); opacity: .55; pointer-events: none; }
.branche-g { left: -40px; top: 20px; transform: scaleX(-1) rotate(10deg); }
.branche-d { right: -40px; bottom: 30px; transform: rotate(160deg); }
.petales { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.petales i {
  position: absolute; top: -50px; left: 3%; width: 24px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-32 -32 64 64'%3E%3Cg fill='%23FFF6E6' stroke='%23B89B62' stroke-width='1.6'%3E%3Cpath id='p' d='M0 0C5-10 18-20 11-29C4-35-8-27-7-15C-6-8-3-3 0 0Z'/%3E%3Cuse href='%23p' transform='rotate(72)'/%3E%3Cuse href='%23p' transform='rotate(144)'/%3E%3Cuse href='%23p' transform='rotate(216)'/%3E%3Cuse href='%23p' transform='rotate(288)'/%3E%3C/g%3E%3Ccircle r='6' fill='%23F2C25E'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: tombe 18s linear infinite; opacity: 0;
}
.petales i:nth-child(2) { left: 8%; width: 18px; height: 18px; animation-duration: 21s; animation-delay: -7s; }
.petales i:nth-child(3) { left: 1.5%; width: 26px; height: 26px; animation-duration: 16s; animation-delay: -12s; }
.petales i:nth-child(4) { left: 11%; width: 16px; height: 16px; animation-duration: 23s; animation-delay: -3s; }
.petales i:nth-child(5) { left: 90%; width: 22px; height: 22px; animation-duration: 19s; animation-delay: -10s; }
.petales i:nth-child(6) { left: 95%; width: 18px; height: 18px; animation-duration: 22s; animation-delay: -15s; }
.petales i:nth-child(7) { left: 87%; width: 26px; height: 26px; animation-duration: 17s; animation-delay: -5s; }
.petales i:nth-child(8) { left: 97%; width: 16px; height: 16px; animation-duration: 24s; animation-delay: -18s; }
.petales i:nth-child(9) { left: 5%; width: 20px; height: 20px; animation-duration: 20s; animation-delay: -1s; }
@media (max-width: 999px) { .petales i:nth-child(n+6) { display: none; } .petales i:nth-child(2) { left: 90%; } .petales i:nth-child(4) { left: 94%; } }
@keyframes tombe {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; }
  8% { opacity: .9; }
  50% { transform: translate(40px, 900px) rotate(200deg); }
  92% { opacity: .9; }
  100% { transform: translate(-20px, 1900px) rotate(420deg); opacity: 0; }
}
.avis-arche { position: relative; width: 100%; max-width: 1100px; margin: 0 auto; aspect-ratio: 358 / 540; border-radius: 999px 999px 28px 28px; overflow: hidden; box-shadow: 0 40px 70px -40px rgba(22, 35, 31, .7); }
.avis-arche img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%; }
.avis-arche::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 22%, rgba(12, 20, 17, .55) 48%, rgba(12, 20, 17, .92) 78%); }
.avis-arche::after { content: ""; position: absolute; inset: 10px; z-index: 2; border: 1px solid rgba(232, 214, 180, .85); border-radius: 999px 999px 20px 20px; pointer-events: none; }
.avis-arche-texte { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 0 24px 30px; color: var(--chaux); }
.note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; }
.note-chiffre { font: 200 clamp(84px, 24vw, 150px)/.9 var(--texte); letter-spacing: -.04em; color: var(--chaux); }
.note-etoiles { display: flex; gap: 3px; color: var(--or); }
.note-etoiles svg { width: 22px; height: 22px; }
.note-etoiles .demi { clip-path: inset(0 50% 0 0); }
.note-total { flex-basis: 100%; font-weight: 650; font-size: 16px; color: var(--sable); }
.avis-geant { margin-top: 18px; }
.avis-geant p { font: 400 clamp(23px, 6.2vw, 42px)/1.18 var(--titre); }
.avis-geant cite { display: block; margin-top: 12px; font-weight: 700; color: var(--sable); }
.sujets { list-style: none; padding: 0; margin: 28px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 900px; }
.sujets li { padding: 9px 14px; border-radius: 999px; background: var(--blanc); font: 550 15px/1 var(--texte); box-shadow: 0 6px 18px -12px rgba(22, 35, 31, .5); }
.sujets b { color: var(--or-fonce); margin-left: 4px; font-weight: 800; }
.cartes { margin: 50px calc(-1 * var(--bord)) 0; overflow-x: auto; touch-action: pan-x pan-y; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; scroll-padding-inline: var(--bord); }
.cartes::-webkit-scrollbar { display: none; }
.cartes ul { list-style: none; margin: 0; padding: 14px var(--bord) 26px; display: flex; gap: 18px; width: max-content; align-items: start; }
.carte {
  position: relative; scroll-snap-align: start; width: 290px; display: grid; grid-template-columns: 84px 1fr; grid-template-areas: "img cite" "p p"; gap: 14px; align-items: center;
  background: linear-gradient(180deg, #FFFCF6, #FBF5EA); border: 1px solid #E8DCC6; border-radius: 6px; padding: 18px 16px 18px 18px;
  box-shadow: 0 18px 30px -22px rgba(22, 35, 31, .6), 0 1px 0 rgba(255, 255, 255, .8) inset; transform: rotate(-1.4deg);
  transition: transform .45s var(--ease), box-shadow .45s;
}
.carte:nth-child(even) { transform: rotate(1.2deg); margin-top: 18px; }
.carte:nth-child(3n) { transform: rotate(-.6deg); margin-top: 8px; }
.carte:hover { transform: rotate(0) translateY(-6px); box-shadow: 0 26px 40px -24px rgba(22, 35, 31, .7); }
.carte img { grid-area: img; width: 84px; height: 84px; object-fit: cover; border-radius: 4px; border: 4px solid #fff; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5); transform: rotate(-3deg); }
.tampon { position: absolute; right: 10px; top: 8px; width: 46px; height: 46px; color: var(--or-fonce); stroke-width: 4; opacity: .45; transform: rotate(14deg); border-radius: 50%; outline: 1.5px dashed rgba(126, 101, 56, .5); outline-offset: 2px; }
.carte p { grid-area: p; font-size: 16px; line-height: 1.5; }
.carte cite { grid-area: cite; font: 400 22px/1.1 var(--titre); color: var(--or-fonce); padding-right: 52px; }
.avis-bas { margin-top: 20px; display: flex; justify-content: center; }
@media (min-width: 1000px) {
  .avis { padding: 140px 64px 120px; }
  .branche { width: 340px; height: 280px; }
  .avis-arche { aspect-ratio: 16 / 9.6; border-radius: 560px 560px 30px 30px; }
  .avis-arche::after { border-radius: 550px 550px 22px 22px; }
  .avis-arche::before { background: linear-gradient(180deg, transparent 30%, rgba(12, 20, 17, .5) 55%, rgba(12, 20, 17, .9) 88%); }
  .avis-arche-texte { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 24px 60px; padding: 0 64px 50px; }
  .note-bloc .surtitre { margin-bottom: 2px; }
  .avis-geant { margin: 0; }
  .cartes { margin: 60px 0 0; overflow: visible; }
  .cartes ul { width: auto; max-width: 1240px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .carte { width: auto; }
  .avis-bas { margin-top: 44px; }
}

/* — 10. venir : la coupe du relief, de la villa à l'océan — */
.venir { background: radial-gradient(ellipse at 85% 100%, rgba(232, 162, 106, .28), transparent 55%), linear-gradient(180deg, #1F302B, #232A25 70%, #2C2A22); padding: 90px var(--bord) 90px; display: grid; gap: 46px; overflow: hidden; }
.venir-texte .surtitre { margin-bottom: 14px; color: var(--couchant); }
.venir h2 { font-size: clamp(30px, 7.4vw, 54px); line-height: 1.12; }
.venir address { font: 400 21px/1.45 var(--texte); color: var(--sable); margin: 26px 0 24px; font-style: normal; }
.venir-actions { display: grid; gap: 10px; }
.cadran { text-align: center; }
.coupe { width: 100%; height: auto; overflow: visible; }
.coupe path { fill: none; stroke-linecap: round; }
.courbes path { stroke: var(--or); stroke-width: 1.2; }
.relief { fill: url(#relief-fondu) !important; stroke: none; }
.courbes path:first-child { stroke-width: 2.2; }
.mer { stroke: var(--couchant); stroke-width: 1.6; opacity: .8; }
.villa-mini path { stroke: var(--sable); stroke-width: 2; }
.villa-mini circle { fill: none; stroke: var(--sable); stroke-width: 1.5; }
.coupe-txt { fill: var(--sable); font: 600 14px var(--texte); letter-spacing: .06em; }
@media (max-width: 999px) { .coupe-txt { font-size: 25px; letter-spacing: .02em; } .cadran { margin-top: 0; } }
.arc-fond { stroke: rgba(220, 198, 165, .28); stroke-width: 2; stroke-dasharray: 2 7; }
.arc-jour { stroke: var(--couchant); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; }
.arc-soleil { fill: #F2B45E; stroke: rgba(242, 180, 94, .3); stroke-width: 9; }
.cadran-titre { font: 400 26px/1.25 var(--titre); color: var(--chaux); margin-top: 18px; }
.cadran-titre b { font: 400 1em var(--texte); color: var(--couchant); }
.cadran-sous { font-size: 15.5px; color: rgba(245, 241, 234, .72); margin-top: 8px; }
@media (min-width: 700px) { .venir-actions { grid-template-columns: auto auto; justify-content: start; } }
@media (min-width: 1000px) {
  .venir { grid-template-columns: 1fr 1.2fr; align-items: center; gap: 70px; padding: 130px 64px; }
  .venir > * { max-width: 680px; }
  .cadran { justify-self: end; width: 100%; }
}

/* — 11. contact : la villa la nuit, ses fenêtres allumées — */
.contact { position: relative; overflow: hidden; isolation: isolate; padding: 100px var(--bord) 0; text-align: center; background: radial-gradient(ellipse at 50% 100%, rgba(242, 180, 94, .16), transparent 55%), linear-gradient(180deg, var(--ardoise) 0%, #12203A 60%, var(--nuit) 100%); }
.contact-etoiles { position: absolute; inset: 0; width: 100%; height: 70%; z-index: -1; }
.contact-etoiles circle { fill: #F5E9D2; animation: scintille 2.8s ease-in-out infinite alternate; }
.contact-inner { position: relative; z-index: 1; }
.contact h2 { font-size: clamp(29px, 7.2vw, 52px); line-height: 1.14; max-width: 18em; margin: 0 auto; }
.contact-tel { display: inline-block; margin: 28px 0 30px; font: 300 clamp(40px, 11.4vw, 88px)/1 var(--texte); letter-spacing: .02em; color: var(--sable); text-decoration: none; white-space: nowrap; transition: color .3s; }
.contact-tel:hover { color: var(--blanc); }
.contact-actions { display: grid; gap: 10px; max-width: 420px; margin: 0 auto; }
.contact-facade { display: block; width: min(100%, 700px); height: auto; margin: 46px auto 0; overflow: visible; }
.fen { filter: drop-shadow(0 0 7px rgba(255, 190, 110, .75)) drop-shadow(0 0 16px rgba(232, 162, 106, .45)); opacity: .12; }
.contact.allume .fen { opacity: 1; transition: opacity .9s ease-out calc(var(--i) * .22s); }
.contact.allume.respire .fenetres { animation: respire 4.5s ease-in-out infinite alternate; }
@keyframes respire { from { opacity: 1; } to { opacity: .78; } }
html:not(.js) .fen { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fen { opacity: 1; } .contact.allume.respire .fenetres { animation: none; } }
.contact .bouton-trait { background: rgba(14, 26, 51, .88); }
.contact .bouton-trait:hover { background: rgba(31, 48, 80, .95); }
@media (min-width: 1000px) {
  .contact { padding: 140px 64px 0; }
  .contact-actions { display: flex; flex-wrap: wrap; justify-content: center; max-width: 900px; }
}

/* — pied — */
.pied { background: var(--nuit); padding: 60px var(--bord) 40px; display: grid; gap: 36px; }
.pied-marque { text-align: center; }
.pied-embleme { width: min(46vw, 180px); height: min(46vw, 180px); color: var(--or); stroke-width: 1.8; display: block; margin: 0 auto 18px; }
.pied-nom { font: 400 34px/1 var(--titre); letter-spacing: .14em; text-transform: uppercase; color: var(--sable); }
.pied-nom span { font: 500 16px/1 var(--texte); color: var(--or); vertical-align: super; letter-spacing: .1em; margin-left: 4px; }
.pied-sous { font: 600 13px/1.4 var(--texte); letter-spacing: .18em; text-transform: uppercase; color: var(--or); margin-top: 12px; }
.pied-infos { display: grid; gap: 10px; justify-items: center; text-align: center; color: rgba(245, 241, 234, .82); font-size: 16px; }
.pied-infos p a { text-decoration: none; }
.pied-infos p a:hover { text-decoration: underline; }
.pied-infos .bouton { margin-top: 8px; }
.pied-mention { font-size: 14px; line-height: 1.5; color: rgba(245, 241, 234, .6); text-align: center; max-width: 46em; margin: 0 auto; border-top: 1px solid rgba(220, 198, 165, .16); padding-top: 24px; }
.pied-mention a { color: var(--sable); }

/* — feuille de demande et visionneuse — */
.feuille, .visionneuse { border: 0; padding: 0; color: var(--chaux); background: transparent; max-width: none; max-height: none; }
.feuille::backdrop, .visionneuse::backdrop { background: rgba(8, 14, 12, .78); }
.feuille { margin: auto auto 0; width: 100%; }
.feuille-corps { position: relative; background: var(--ardoise); border-radius: 30px 30px 0 0; padding: 28px 20px calc(24px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(220, 198, 165, .3); }
.feuille[open] .feuille-corps { animation: monte .45s var(--ease); }
@keyframes monte { from { transform: translateY(40px); opacity: 0; } }
.feuille h2 { font-size: 30px; line-height: 1.15; margin: 10px 48px 8px 0; color: var(--chaux); }
.feuille-aide { font-size: 15px; color: rgba(245, 241, 234, .7); }
.feuille-message { margin: 18px 0 20px; padding: 16px 18px; border-radius: 18px 18px 18px 4px; background: #DCF8C6; color: #14201C; font: 450 16px/1.5 var(--texte); }
.feuille-actions { display: grid; gap: 10px; }
.feuille-fermer { position: absolute; top: 18px; right: 16px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(220, 198, 165, .35); background: var(--ardoise-2); color: var(--sable); display: grid; place-items: center; cursor: pointer; }
.feuille-fermer svg { width: 20px; height: 20px; }
@media (min-width: 700px) {
  .feuille { margin: auto; width: min(520px, calc(100% - 40px)); }
  .feuille-corps { border-radius: 30px; padding: 34px 32px 30px; border: 1px solid rgba(220, 198, 165, .3); }
}
.visionneuse { position: fixed; inset: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: rgba(8, 14, 12, .94); display: none; place-items: center; padding: 64px 12px 24px; }
.visionneuse[open] { display: grid; }
.visionneuse::backdrop { background: rgba(8, 14, 12, .94); }
.vision-cadre { margin: 0; display: grid; justify-items: center; gap: 14px; max-width: min(1200px, 100%); }
.vision-cadre img { width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 160px); object-fit: contain; border-radius: 18px; transition: opacity .35s, transform .5s var(--ease); }
.vision-cadre img.change { opacity: 0; transform: scale(.96); transition: none; }
.vision-cadre figcaption { display: flex; gap: 14px; align-items: baseline; color: var(--sable); font: 500 15px/1.4 var(--texte); text-align: center; }
.vision-compte { font-weight: 700; color: var(--or); letter-spacing: .08em; white-space: nowrap; }
.visionneuse .feuille-fermer { top: 12px; right: 12px; z-index: 2; }
.vision-fleche { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; border: 1px solid rgba(220, 198, 165, .5); background: rgba(22, 35, 31, .7); color: var(--sable); display: grid; place-items: center; cursor: pointer; transition: background-color .3s, transform .3s var(--ease); }
.vision-fleche:hover { background: var(--or); color: var(--ardoise); transform: scale(1.06); }
.vision-fleche svg { width: 24px; height: 24px; }
.vision-prec { left: 16px; } .vision-suiv { right: 16px; }
@media (max-width: 700px) { .vision-fleche { top: auto; bottom: 18px; margin: 0; } .vision-prec { left: calc(50% - 64px); } .vision-suiv { right: calc(50% - 64px); } .visionneuse { padding-bottom: 90px; } .vision-cadre img { max-height: calc(100dvh - 220px); } }

/* — apparitions — */
.js .apparait { opacity: 0; transform: translateY(26px); }
.js .apparait.vu { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform 1.1s var(--ease); }

/* — les animations continues s'arrêtent hors de l'écran (classe posée par app.js) — */
.js .ruban-piste, .js .reflets path, .js .etoiles circle, .js .faisceaux span, .js .voile path, .js .petales i, .js .contact-etoiles circle, .js .fenetres { animation-play-state: paused; }
.js .en-vue .ruban-piste, .js .en-vue .reflets path, .js .en-vue .etoiles circle, .js .en-vue .faisceaux span, .js .en-vue .voile path, .js .en-vue .petales i, .js .en-vue .contact-etoiles circle, .js .en-vue .fenetres { animation-play-state: running; }
.voile path { animation: ondule 7s ease-in-out infinite alternate; transform-origin: 50% 0; }
.voile path:nth-child(2) { animation-duration: 9s; animation-delay: -3s; }
.voile path:nth-child(3) { animation-duration: 8s; animation-delay: -6s; }
@keyframes ondule { from { transform: scaleY(.82); } to { transform: scaleY(1.12); } }

@media (prefers-reduced-motion: reduce) {
  .ruban-piste, .reflets path, .etoiles circle, .faisceaux span, .voile path, .petales i, .contact-etoiles circle, .fenetres { animation: none !important; }
  .petales { display: none; }
  .js .apparait { opacity: 1; transform: none; }
  .feuille[open] .feuille-corps { animation: none; }
}

/* — barre d'appel collante (procédé) — */
.barre-appel { display: none; }
@media (max-width: 760px) {
  :root { --barre-h: 67px; }
  .barre-appel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px;
    padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    background: var(--ardoise); border-top: 1px solid rgba(220, 198, 165, .25);
  }
  .barre-appel a { display: flex; align-items: center; justify-content: center; gap: .5em; min-height: 50px; padding: 0 12px; border: 1.5px solid var(--or); border-radius: 999px; background: var(--or); color: var(--ardoise); font: 700 16px/1 var(--texte); text-decoration: none; }
  .barre-appel a:not(:first-child) { background: transparent; color: var(--sable); }
  .barre-appel svg { width: 1.25em; height: 1.25em; flex: none; }
  body:has(.barre-appel) { padding-bottom: calc(var(--barre-h) + env(safe-area-inset-bottom, 0px)); }
  html:has(.barre-appel) { scroll-padding-bottom: calc(var(--barre-h) + env(safe-area-inset-bottom, 0px) + 16px); }
}
@media print { .barre-appel { display: none; } }
.voile path { transform-box: fill-box; }

/* — passe DA n° 3 — */
/* le fond de piscine de l'ouverture et de l'après-midi : des reflets turquoise qui ondulent lentement, et le grain */
.journee { isolation: isolate; }
.journee::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .16; pointer-events: none; }
.caustiques { position: absolute; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%2346C6D8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M-10 40C30 20 60 70 100 50S170 10 210 40 250 70 270 50'/%3E%3Cpath d='M-10 130C20 110 60 160 100 140S160 100 200 130 250 160 270 140'/%3E%3Cpath d='M-10 220C30 200 70 250 110 230S170 190 210 220 250 250 270 230'/%3E%3Cpath d='M40 -10C20 30 70 60 50 100S10 170 40 210 70 250 50 270'/%3E%3Cpath d='M130 -10C110 20 160 60 140 100S100 160 130 200 160 250 140 270'/%3E%3Cpath d='M220 -10C200 30 250 70 230 110S190 170 220 210 250 250 230 270'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%2346C6D8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M-10 40C30 20 60 70 100 50S170 10 210 40 250 70 270 50'/%3E%3Cpath d='M-10 130C20 110 60 160 100 140S160 100 200 130 250 160 270 140'/%3E%3Cpath d='M-10 220C30 200 70 250 110 230S170 190 210 220 250 250 270 230'/%3E%3Cpath d='M40 -10C20 30 70 60 50 100S10 170 40 210 70 250 50 270'/%3E%3Cpath d='M130 -10C110 20 160 60 140 100S100 160 130 200 160 250 140 270'/%3E%3Cpath d='M220 -10C200 30 250 70 230 110S190 170 220 210 250 250 230 270'/%3E%3C/g%3E%3C/svg%3E"); background-size: 260px 260px, 190px 190px; background-position: 0 0, 70px 40px; opacity: .17;
  animation: caustiques 14s ease-in-out infinite alternate; }
@keyframes caustiques { to { background-position: 60px 40px, 20px 90px; } }
.caustiques-intro { inset: 0 0 auto 0; height: 100%; z-index: 0; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000); mask-image: linear-gradient(180deg, transparent, #000 30%, #000); }
.journee-intro { z-index: 1; }
.caustiques-scene { inset: 0; -webkit-mask-image: radial-gradient(ellipse 38% 80% at 24% 50%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 38% 80% at 24% 50%, #000 45%, transparent 100%); }
@media (max-width: 999px) { .caustiques-scene { -webkit-mask-image: radial-gradient(ellipse 85% 24% at 50% 24%, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse 85% 24% at 50% 24%, #000 50%, transparent 100%); } }
.js .caustiques { animation-play-state: paused; } .js .en-vue .caustiques { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .caustiques { animation: none !important; } }

/* la côte sud au trait doré, sous les photos de « La vue » */
.cote { position: absolute; z-index: -1; left: -6%; bottom: 0; width: 112%; height: 58%; color: var(--or); opacity: .36; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 34% 26% at 50% 86%, transparent 30%, #000 100%); mask-image: radial-gradient(ellipse 34% 26% at 50% 86%, transparent 30%, #000 100%); }
@media (max-width: 999px) { .cote { height: 40%; width: 220%; left: -60%; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 92%); mask-image: linear-gradient(180deg, #000 40%, transparent 92%); } }

/* avis : surtitre lisible, citation sur un fond sombre */
.note-bloc .surtitre { color: var(--chaux); text-shadow: 0 1px 10px rgba(0, 0, 0, .6), 0 0 2px rgba(0, 0, 0, .5); }
.avis-arche::before { background: linear-gradient(180deg, transparent 18%, rgba(12, 20, 17, .5) 40%, rgba(12, 20, 17, .82) 60%, rgba(12, 20, 17, .94) 85%) !important; }
@media (min-width: 1000px) { .avis-arche::before { background: linear-gradient(180deg, transparent 22%, rgba(12, 20, 17, .45) 42%, rgba(12, 20, 17, .78) 60%, rgba(12, 20, 17, .92) 88%) !important; } }
.avis-geant p, .avis-geant cite, .note { text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }

/* la grande photo de nuit : agrandie et ancrée à droite, l'épuisette du premier plan sort du cadre */
.groupe-nuit .tuile-grande img { transform: scale(1.4); transform-origin: 100% 45%; }
.groupe-nuit .tuile-grande:hover img { transform: scale(1.45); }

/* les chambres : plus de vide en bas du panneau */
@media (min-width: 1400px) {
  .arches { height: 540px; }
  .arche-1 { top: 130px; }
  .arche-2 { top: -40px; }
  .hublot-chambre { top: 200px; }
}
/* les week-ends : l'anneau deux fois plus discret */
.weekends::before { opacity: .5; }


/* — modification du 19 octobre (soir) : chaque section a son entrée, les photos en vedette, plus d'appels à réserver — */
/* l'en-tête : « Réserver » toujours à portée sur grand écran */
.entete-reserver { display: none; }
@media (min-width: 1000px) { .entete-reserver { display: inline-flex; min-height: 46px; padding: 0 24px; margin-left: 4px; } }

/* le haut de page : la villa en quatre faits, en pastilles */
.heros-faits { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.heros-faits li { padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(220, 198, 165, .35); background: rgba(220, 198, 165, .07); font: 550 14.5px/1.1 var(--texte); color: var(--sable); }
.js .heros .heros-faits li { opacity: 0; translate: 0 10px; }
.js .heros.pret .heros-faits li { opacity: 1; translate: none; transition: opacity .7s, translate .9s var(--ease); transition-delay: calc(1.1s + var(--k, 0) * 90ms); }

/* les appels à réserver dans les sections */
.chambres-action { margin-top: 26px; }
.mosaique-bas { display: flex; justify-content: center; margin-top: 56px; }

/* les avis : une bande qui glisse, aussi sur grand écran, avec ses flèches */
@media (min-width: 1000px) {
  .cartes { margin: 60px -64px 0; overflow-x: auto; scroll-padding-inline: max(64px, calc((100vw - 1240px) / 2)); }
  .cartes ul { width: max-content; max-width: none; margin: 0; padding: 14px max(64px, calc((100vw - 1240px) / 2)) 30px; display: flex; gap: 26px; }
  .carte { width: 360px; }
}
.avis-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; max-width: 1240px; margin-left: auto; margin-right: auto; }
.cartes-nav { display: flex; gap: 10px; }
.cartes-nav button { width: 50px; height: 50px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1.5px solid rgba(22, 35, 31, .35); background: transparent; color: var(--ardoise); cursor: pointer; transition: background-color .3s, border-color .3s, transform .3s var(--ease); }
.cartes-nav button svg { width: 22px; height: 22px; }
.cartes-nav button:hover { background: var(--ardoise); color: var(--sable); border-color: var(--ardoise); }
.cartes-nav button:active { transform: scale(.94); }
.cartes-nav button[disabled] { opacity: .3; cursor: default; background: transparent; color: var(--ardoise); }

/* les entrées : les éléments d'une grille ou d'une liste arrivent l'un après l'autre, une fois */
.js .cascade > * { opacity: 0; translate: 0 34px; }
.js .cascade.vu > * { opacity: 1; translate: none; transition: opacity .9s var(--ease) calc(var(--k, 0) * 90ms), translate 1.1s var(--ease) calc(var(--k, 0) * 90ms), transform .45s var(--ease), background-color .3s, border-color .3s, box-shadow .45s; }
/* les photos : en entrant, l'image se pose dans son cadre (zoom faible) */
.js .photo-revele img, .js .photo-zoom img { scale: 1.07; transition: scale 1.9s var(--ease); }
.js .photo-revele.vu img, .js .photo-zoom.vu img { scale: 1; }
.js .photo-revele { opacity: 0; translate: 0 40px; }
.js .photo-revele.vu { opacity: 1; translate: none; transition: opacity 1s var(--ease), translate 1.2s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .js .cascade > *, .js .photo-revele, .js .photo-revele img, .js .photo-zoom img, .js .heros .heros-faits li { opacity: 1 !important; translate: none !important; scale: none !important; }
}

/* — modification du 20 octobre : des fonds qui ont de la matière, des décors animés tout du long, des photos qui respirent — */
.decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
section > .decor { max-width: none !important; width: auto !important; margin: 0 !important; }
@keyframes balance { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }
@keyframes tourne { to { transform: rotate(360deg); } }

/* la vue : le ciel du sud, le halo du soleil, des nuages au trait, des paille-en-queue qui passent */
.vue { background: radial-gradient(ellipse 55% 38% at 92% 0%, rgba(242, 180, 94, .2), transparent 70%), linear-gradient(180deg, #E4EFF1 0%, #F5F1EA 30%, #EEF4EF 62%, #E3F1EE 100%); }
.vue > .vue-ciel { max-width: none; margin: 0; }
.vue-ciel { position: absolute; left: 0; right: 0; top: 0; height: 640px; z-index: -1; pointer-events: none; overflow: hidden; }
.halo { position: absolute; right: -90px; top: -130px; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 226, 170, .6), rgba(242, 180, 94, .16) 45%, transparent 70%); animation: halo 9s ease-in-out infinite alternate; }
@keyframes halo { to { transform: scale(1.14); opacity: .7; } }
.nuage { position: absolute; width: 260px; height: 80px; fill: rgba(255, 255, 255, .6); stroke: rgba(184, 155, 98, .6); stroke-width: 1.3; overflow: visible; animation: derive 38s ease-in-out infinite alternate; }
.nuage-1 { left: 56%; top: 22px; }
.nuage-2 { left: -50px; top: 170px; width: 180px; height: 56px; animation-duration: 46s; animation-delay: -12s; }
.nuage-3 { left: 80%; top: 300px; width: 200px; height: 62px; animation-duration: 52s; animation-delay: -30s; }
@keyframes derive { from { transform: translateX(-40px); } to { transform: translateX(70px); } }
.vol { position: absolute; left: 0; top: 46px; width: 82px; animation: vol 30s linear infinite; }
.vol-2 { top: 14px; width: 60px; animation-duration: 38s; animation-delay: -14s; }
.vol-3 { top: 30px; width: 48px; animation-duration: 46s; animation-delay: -29s; }
@keyframes vol { from { transform: translate(-150px, 0); } 50% { transform: translate(50vw, -28px); } to { transform: translate(calc(100vw + 40px), 12px); } }
.oiseau { display: block; width: 100%; height: auto; overflow: visible; animation: plane 2.6s ease-in-out infinite alternate; }
@keyframes plane { to { transform: translateY(9px) rotate(-2deg); } }
.oiseau .corps, .oiseau .aile path { fill: #FFFDF8; stroke: var(--ardoise); stroke-width: 1.7; stroke-linejoin: round; }
.oiseau .queue { fill: none; stroke: var(--ardoise); stroke-width: 1.4; stroke-linecap: round; }
.oiseau .oeil { fill: var(--ardoise); }
.oiseau .aile { transform-box: fill-box; animation: aile-a .5s ease-in-out infinite alternate; }
.oiseau .aile-a { transform-origin: 100% 100%; }
.oiseau .aile-b { transform-origin: 0% 100%; animation-name: aile-b; }
@keyframes aile-a { from { transform: rotate(10deg); } to { transform: rotate(-42deg); } }
@keyframes aile-b { from { transform: rotate(-10deg); } to { transform: rotate(42deg); } }
@media (min-width: 1000px) { .vol { width: 120px; top: 64px; } .vol-2 { width: 90px; top: 20px; } .vol-3 { width: 70px; top: 40px; } .nuage-1 { width: 320px; height: 98px; } }

/* les chambres : un mur de chaux au grain de lin, des hublots qui tournent lentement, l'ombre d'une palme qui bouge */
.chambres { background:
  radial-gradient(ellipse 60% 50% at 100% 40%, rgba(30, 77, 92, .16), transparent 70%),
  radial-gradient(ellipse 45% 32% at 0% 100%, rgba(184, 155, 98, .16), transparent 70%),
  repeating-linear-gradient(0deg, rgba(126, 101, 56, .05) 0 1px, transparent 1px 4px),
  repeating-linear-gradient(90deg, rgba(126, 101, 56, .04) 0 1px, transparent 1px 5px),
  linear-gradient(180deg, #F5F1EA, #EFE9DE); }
.anneaux { position: absolute; left: -150px; top: 30px; width: 440px; height: 440px; color: var(--canard); opacity: .2; animation: tourne 90s linear infinite; }
.anneaux circle { stroke-width: 1.2; }
.ombre-palme { position: absolute; width: 540px; height: 327px; color: #1C3B3B; opacity: .1; filter: blur(4px); transform-origin: 0 50%; will-change: transform; animation: balance 7s ease-in-out infinite alternate; }
.ombre-1 { left: 46%; top: -70px; rotate: 128deg; }
.ombre-1b { left: -80px; bottom: 30px; width: 400px; height: 242px; rotate: -22deg; animation-duration: 9s; animation-delay: -3s; }
@media (min-width: 1000px) { .anneaux { left: -120px; top: 60px; width: 560px; height: 560px; } .ombre-1 { left: 30%; } }

/* les pièces à vivre : la terrasse voilée derrière la chaux, les baies vitrées qui se dessinent, une palme qui bouge */
.vivre { background: radial-gradient(ellipse at 10% 0%, rgba(184, 155, 98, .2), transparent 50%), linear-gradient(180deg, #EAE2D4, #F2EDE4); }
.vivre::before { content: ""; position: absolute; inset: 0; z-index: -2; background:
  repeating-linear-gradient(90deg, rgba(126, 101, 56, .09) 0 1px, transparent 1px 132px),
  repeating-linear-gradient(0deg, rgba(126, 101, 56, .09) 0 1px, transparent 1px 132px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000); mask-image: linear-gradient(180deg, transparent, #000 35%, #000); }
/* la lumière des baies vitrées posée sur le carrelage, qui bouge avec l'heure */
.lumiere { position: absolute; top: -10%; width: 190px; height: 130%; background: linear-gradient(180deg, rgba(255, 246, 226, 0), rgba(255, 246, 226, .95) 40%, rgba(255, 246, 226, .7) 80%, rgba(255, 246, 226, 0)); rotate: 24deg; filter: blur(8px); will-change: transform; animation: lumiere 14s ease-in-out infinite alternate; }
.lumiere-1 { left: 18%; }
.lumiere-2 { left: 42%; width: 120px; animation-delay: -5s; }
.lumiere-3 { left: 74%; width: 220px; animation-delay: -9s; }
@keyframes lumiere { from { transform: translateX(-30px); opacity: .55; } to { transform: translateX(50px); opacity: 1; } }
.baies { opacity: .17; }
.js .baies path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .baies.vu path { stroke-dashoffset: 0; transition: stroke-dashoffset 3.4s var(--ease); }
.js .baies.vu path:nth-child(2) { transition-delay: .5s; }
.js .baies.vu path:nth-child(3) { transition-delay: 1.4s; }
.ombre-2 { right: -60px; top: 34%; left: auto; rotate: 200deg; animation-duration: 8s; }
@media (prefers-reduced-motion: reduce) { .js .baies path { stroke-dashoffset: 0; } }

/* la villa en images : la nuit au jardin voilée, des palmes en ombre chinoise, des lucioles */
.mosaique::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(31, 48, 43, .9), rgba(24, 40, 36, .8) 50%, rgba(16, 27, 24, .94)), url("img/fond-nuit.webp") center / cover; }
.palme-nuit { position: absolute; width: 520px; height: 315px; color: #0A1310; opacity: .95; transform-origin: 0 50%; animation: balance 8s ease-in-out infinite alternate; }
.palme-nuit-1 { left: -150px; top: 20px; rotate: 24deg; }
.palme-nuit-2 { right: -170px; top: 40%; rotate: 160deg; scale: 1 -1; animation-duration: 10s; animation-delay: -4s; }
.palme-nuit-3 { left: -130px; bottom: 5%; width: 380px; height: 230px; rotate: -14deg; animation-duration: 9s; animation-delay: -2s; }
.luciole { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle, #FFF1C2, rgba(255, 214, 120, .7) 45%, transparent 72%); box-shadow: 0 0 12px 4px rgba(255, 206, 110, .32); animation: luciole 11s ease-in-out infinite alternate, clignote 2.6s ease-in-out infinite alternate; }
.luciole:nth-child(4) { left: 8%; top: 14%; }
.luciole:nth-child(5) { left: 86%; top: 22%; animation-duration: 13s, 3.1s; animation-delay: -4s, -1s; }
.luciole:nth-child(6) { left: 30%; top: 40%; animation-duration: 10s, 2.2s; animation-delay: -6s, -.5s; }
.luciole:nth-child(7) { left: 94%; top: 52%; animation-duration: 14s, 2.9s; animation-delay: -2s, -2s; }
.luciole:nth-child(8) { left: 4%; top: 63%; animation-duration: 12s, 3.4s; animation-delay: -8s, -1.4s; }
.luciole:nth-child(9) { left: 62%; top: 72%; animation-duration: 15s, 2.4s; animation-delay: -5s, -.8s; }
.luciole:nth-child(10) { left: 18%; top: 86%; animation-duration: 11s, 2.7s; animation-delay: -9s, -1.8s; }
.luciole:nth-child(11) { left: 78%; top: 92%; animation-duration: 13s, 3s; animation-delay: -3s, -.3s; }
.luciole:nth-child(12) { left: 48%; top: 8%; animation-duration: 16s, 2.5s; animation-delay: -7s, -2.2s; }
.luciole:nth-child(13) { left: 96%; top: 80%; animation-duration: 12s, 3.2s; animation-delay: -1s, -1.1s; }
@keyframes luciole { 0% { transform: translate(0, 0); } 33% { transform: translate(26px, -34px); } 66% { transform: translate(-18px, -12px); } 100% { transform: translate(14px, 28px); } }
@keyframes clignote { from { opacity: .15; } to { opacity: 1; } }

/* la villa en images : une bande de grandes photos par sujet, avec de l'air, une légende et des flèches */
.groupe + .groupe { margin-top: 84px; }
.grille, .grille.g4 {
  display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(-1 * var(--bord)); padding: 4px var(--bord) 30px; scroll-padding-inline: var(--bord); align-items: flex-start;
}
.grille::-webkit-scrollbar { display: none; }
.grille > .tuile { flex: none; width: 76vw; max-width: 460px; aspect-ratio: 4 / 3; scroll-snap-align: start; }
.planche { flex: none; width: 76vw; max-width: 460px; margin: 0; scroll-snap-align: start; }
.planche:first-child { width: 86vw; max-width: 680px; }
.planche:nth-child(even) { margin-top: 40px; }
.grille .planche .tuile { width: 100%; aspect-ratio: 4 / 3; border-radius: 20px; }
.planche figcaption { margin-top: 14px; font: 500 14.5px/1.45 var(--texte); color: rgba(245, 241, 234, .82); max-width: 30em; }
.planche figcaption b { display: block; margin-bottom: 4px; font-weight: 800; font-size: 12.5px; letter-spacing: .14em; color: var(--or); }
.planches-nav { display: flex; gap: 10px; justify-content: flex-end; }
.planches-nav button { width: 50px; height: 50px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1.5px solid rgba(220, 198, 165, .45); background: rgba(22, 35, 31, .5); color: var(--sable); cursor: pointer; transition: background-color .3s, border-color .3s, color .3s, transform .3s var(--ease); }
.planches-nav button svg { width: 22px; height: 22px; }
.planches-nav button:hover { background: var(--or); color: var(--ardoise); border-color: var(--or); }
.planches-nav button:active { transform: scale(.94); }
.planches-nav button[disabled] { opacity: .3; cursor: default; background: transparent; color: var(--sable); border-color: rgba(220, 198, 165, .45); }
@media (min-width: 1000px) {
  .grille, .grille.g4 { margin: 0; padding: 4px 0 34px; gap: 34px; scroll-padding-inline: 0; }
  .planche { width: 460px; }
  .planche:first-child { width: 680px; }
  .planche:nth-child(even) { margin-top: 80px; }
}

/* les week-ends : l'océan de la terrasse voilé, et la houle au trait qui avance */
.decor-mer { background: radial-gradient(circle at 85% 15%, rgba(70, 198, 216, .22), transparent 45%), radial-gradient(circle at 10% 90%, rgba(184, 155, 98, .16), transparent 45%), linear-gradient(160deg, rgba(23, 58, 60, .86), rgba(22, 35, 31, .9) 70%), url("img/fond-mer.webp") center / cover; }
.houle { position: absolute; left: 0; bottom: 0; width: 200%; height: 110px; color: var(--lagon); opacity: .3; animation: houle 36s linear infinite; }
@keyframes houle { to { transform: translateX(-50%); } }

/* venir : les courbes de niveau des pentes de La Rivière, qui dérivent lentement */
.topo { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; color: var(--or); opacity: .15; animation: relief 50s ease-in-out infinite alternate; }
@keyframes relief { to { transform: translate(-3%, 2%) rotate(2deg); } }

/* le pied : le ciel de nuit continue */
.pied { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(54, 78, 120, .38), transparent 70%), radial-gradient(ellipse 50% 30% at 50% 100%, rgba(184, 155, 98, .1), transparent 70%), var(--nuit); }
.pied-etoiles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.pied-etoiles circle { fill: #F5E9D2; animation: scintille 3s ease-in-out infinite alternate; }

/* les chambres sur grand écran : les photos ne se chevauchent plus */
@media (min-width: 1400px) {
  .arches { height: 620px; }
  .arche { width: 270px; }
  .arche-1 { left: 36px; top: 120px; }
  .arche-2 { left: 340px; top: -40px; }
  .hublot-chambre { left: 630px; top: 330px; width: 196px; }
}

/* les boucles s'arrêtent hors de l'écran, et ne tournent pas avec « réduire les animations » */
.js .decor *, .js .vue-ciel *, .js .pied-etoiles circle { animation-play-state: paused; }
.js .en-vue .decor *, .js .en-vue .vue-ciel *, .js .en-vue .pied-etoiles circle, .js .pied.en-vue .pied-etoiles circle { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .decor *, .vue-ciel *, .pied-etoiles circle { animation: none !important; }
  .vol { display: none; }
}
@media (max-width: 999px) { .nuage-2 { display: none; } }

/* — modification du 20 octobre (midi) : le défilement reste libre — */
/* les bandes qui glissent à l'horizontale ne défilent jamais à la verticale (quelques pixels de trop leur faisaient capter
   la molette et le doigt, et la page s'arrêtait au-dessus d'elles) */
.grille, .cartes, .weekends-liste { overflow-y: hidden; }