/* Domaine Bassin 18 · reprise du 20 octobre (demande de Maoni : « les fonds sont beaucoup trop simplistes par endroits,
   ça manque d'éléments de décoration animés et certaines photos sont entassées et pas mises en valeur »).
   On garde la signature de fête de la v4 et on la prolonge :
   1. des fonds avec de la matière : la photo du domaine voilée sous les sections sombres, les courbes de niveau du terrain,
      la feuille de latanier du logo en filigrane et une flaque de lumière chaude sur les sections claires ;
   2. des décors animés tout au long du parcours : guirlandes d'ampoules au-dessus des photos et des avis, lucioles dans
      les sections du soir, feuilles qui se balancent, lumière qui glisse (transform et opacity seulement, à l'écran seulement) ;
   3. les galeries : plus de mosaïque serrée, des tirages encadrés qui défilent à l'horizontale, une grande et une petite
      décalées, légende numérotée, flèches et visionneuse au clic. */

/* — 1. les fonds — */
.fond-nuit, .fond-roche { position: relative; isolation: isolate; overflow: clip; }
.fond-nuit::before, .fond-roche::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 24, 23, 0.86) 0%, rgba(18, 24, 23, 0.58) 38%, rgba(18, 24, 23, 0.7) 70%, rgba(18, 24, 23, 0.92) 100%), var(--voile, none) var(--voile-pos, 50% 50%) / cover no-repeat;
}
.fond-nuit::after, .fond-roche::after {
  content: ""; position: absolute; inset: -60px; z-index: -1; pointer-events: none; opacity: 0.55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='420' viewBox='0 0 520 420'%3E%3Cg fill='none' stroke='%23E8B54A' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M-20 80C60 30 140 120 230 70s160-60 310 10'/%3E%3Cpath d='M-20 120C70 70 150 160 240 110s150-55 300 15'/%3E%3Cpath d='M-20 160C80 115 160 200 250 150s140-50 290 20'/%3E%3Cpath d='M-20 260C60 220 150 300 240 255s170-40 300 0'/%3E%3Cpath d='M-20 300C70 262 160 340 250 296s160-36 290 4'/%3E%3Cpath d='M-20 340C80 304 170 380 260 338s150-32 280 8'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 520px 420px repeat;
}
.js .fond-nuit.v5-vue::after, .js .fond-roche.v5-vue::after { animation: v5-derive 60s linear infinite; }
@keyframes v5-derive { to { transform: translate(-52px, 42px); } }

/* La photo voilée de chaque section sombre : un lieu du domaine, flouté à la construction */
[aria-labelledby="titre-traversee"] { --voile: url("img/voile-ocean.webp"); --voile-pos: 50% 30%; }
[aria-labelledby="titre-galerie"] { --voile: url("img/voile-terrasse.webp"); }
[aria-labelledby="titre-plan-m"] { --voile: url("img/voile-pelouse-arc.webp"); }
[aria-labelledby="titre-photos-m"] { --voile: url("img/voile-villa-mer.webp"); }
[aria-labelledby="titre-avis-e"] { --voile: url("img/voile-salle-soiree.webp"); }
[aria-labelledby="titre-photos-b"] { --voile: url("img/voile-noel-pelouse.webp"); }
[aria-labelledby="titre-laser"] { --voile: url("img/voile-domaine-terrasses.webp"); }
[aria-labelledby="titre-avis-act"] { --voile: url("img/voile-jardin-agaves.webp"); }
/* La traversée garde sa photo de drone nette au premier plan : le voile reste plus discret derrière */
[aria-labelledby="titre-traversee"]::before { background: linear-gradient(180deg, rgba(18, 24, 23, 0.9), rgba(18, 24, 23, 0.66) 45%, rgba(18, 24, 23, 0.9)), var(--voile) var(--voile-pos) / cover no-repeat; }
/* fond-fete garde ses dessins de fête par-dessus le voile */
.fond-fete::after { opacity: 0.35; }

/* Sections claires : la feuille de latanier du logo en grand filigrane, qui se balance, et une lumière chaude qui glisse */
:is(.fond-grain, .fond-sable, .fond-ecume, .fond-quadrille, .fond-paperboard, .fond-route, .fond-jardin, .fond-salle, .fond-villa, .fond-plan:not(.heros), .fond-lagon) { position: relative; isolation: isolate; overflow: clip; }
:is(.fond-grain, .fond-sable, .fond-ecume, .fond-quadrille, .fond-paperboard, .fond-route, .fond-jardin, .fond-salle, .fond-villa, .fond-plan:not(.heros), .fond-lagon)::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: clamp(300px, 46vw, 640px); aspect-ratio: 84 / 100; top: var(--fy, -8%); left: var(--fx, auto); right: var(--fr, -10%);
  background: var(--feuille) center / contain no-repeat; opacity: var(--fo, 0.16);
  transform-origin: 48% 64%; rotate: var(--frot, -18deg);
}
:is(.fond-grain, .fond-sable, .fond-ecume, .fond-quadrille, .fond-paperboard, .fond-route, .fond-jardin, .fond-salle, .fond-villa, .fond-plan:not(.heros), .fond-lagon)::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; width: 120vw; height: 900px; max-height: 120%;
  left: var(--lx, -40vw); top: var(--ly, 20%);
  background: radial-gradient(closest-side, var(--lumiere, rgba(243, 214, 150, 0.55)), transparent 72%);
}
.fond-lagon { --feuille: var(--feuille-claire); --fo: 0.12; --lumiere: rgba(156, 208, 203, 0.28); }
.js .v5-vue:is(.fond-grain, .fond-sable, .fond-ecume, .fond-quadrille, .fond-paperboard, .fond-route, .fond-jardin, .fond-salle, .fond-villa, .fond-plan, .fond-lagon)::before { animation: v5-balance 9s ease-in-out infinite alternate; }
.js .v5-vue:is(.fond-grain, .fond-sable, .fond-ecume, .fond-quadrille, .fond-paperboard, .fond-route, .fond-jardin, .fond-salle, .fond-villa, .fond-plan, .fond-lagon)::after { animation: v5-lumiere 16s ease-in-out infinite alternate; }
@keyframes v5-balance { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
@keyframes v5-lumiere { from { transform: translate(0, 0); opacity: 0.7; } to { transform: translate(38vw, -60px); opacity: 1; } }
/* d'une section à l'autre, la feuille change de côté */
.fond-salle, .fond-sable:nth-of-type(odd), .fond-quadrille, .fond-route { --fx: -12%; --fr: auto; --frot: 16deg; --lx: 10vw; }
.fond-villa, .fond-ecume { --fy: 52%; }
.fond-grain { --fy: -20%; --fo: 0.2; }

/* L'accueil, « ce que nous organisons » : un dégradé seul, on y pose la feuille et la lumière au-dessus des teintes */
.usages { isolation: isolate; }
.usages::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none; width: clamp(320px, 52vw, 720px); aspect-ratio: 84 / 100;
  right: -12%; bottom: -14%; background: var(--feuille) center / contain no-repeat; opacity: 0.17; transform-origin: 48% 64%; rotate: 14deg;
}
.js .usages.v5-vue::after { animation: v5-balance 10s ease-in-out infinite alternate; }

/* — 2. les décors animés — */
/* la guirlande d'ampoules tendue en haut des sections photo et avis */
.v5-guirlande { position: absolute; left: 0; right: 0; top: 0; height: 76px; pointer-events: none; z-index: 2; }
.v5-guirlande svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.v5-guirlande path { fill: none; stroke: rgba(30, 30, 26, 0.55); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.sombre .v5-guirlande path, .fond-terre .v5-guirlande path, .fond-lagon .v5-guirlande path { stroke: rgba(245, 242, 236, 0.4); }
.v5-ampoule { position: absolute; width: 10px; height: 14px; margin: -2px 0 0 -5px; border-radius: 45% 45% 50% 50%; background: #FFE3A3; box-shadow: 0 0 6px 2px rgba(255, 210, 120, 0.9), 0 0 22px 8px rgba(232, 181, 74, 0.35); opacity: 0.9; }
.v5-ampoule::before { content: ""; position: absolute; left: 2px; right: 2px; top: -4px; height: 5px; border-radius: 2px; background: #3A3A32; }
.js .v5-vue .v5-ampoule { animation: v5-ampoule 2.6s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes v5-ampoule { from { opacity: 1; } 60% { opacity: 0.9; } to { opacity: 0.45; } }
.v5-guirlande .v5-balance { position: absolute; inset: 0; transform-origin: 50% 0; }
.js .v5-vue .v5-guirlande .v5-balance { animation: v5-vent 7s ease-in-out infinite alternate; }
@keyframes v5-vent { from { transform: translateY(-2px) skewX(-1.2deg); } to { transform: translateY(3px) skewX(1.2deg); } }

/* les lucioles et le bokeh des ampoules dans les sections du soir */
.v5-lucioles { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.v5-luciole { position: absolute; width: var(--t, 10px); height: var(--t, 10px); border-radius: 50%; background: radial-gradient(circle, rgba(255, 224, 150, 0.95) 0%, rgba(232, 181, 74, 0.45) 40%, transparent 70%); opacity: 0.5; }
.js .v5-vue .v5-luciole { animation: v5-flotte var(--duree, 9s) ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes v5-flotte { 0% { transform: translate(0, 0) scale(0.8); opacity: 0.15; } 50% { opacity: 0.85; } 100% { transform: translate(var(--dx, 20px), -46px) scale(1.15); opacity: 0.3; } }

/* — 3. les galeries : des tirages qui défilent, avec de l'air — */
.mosaique, .mosaique-6 {
  display: flex !important; align-items: flex-start; gap: 22px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gouttiere); scrollbar-width: none;
  margin: 34px calc(var(--gouttiere) * -1) 0; padding: 8px var(--gouttiere) 30px; counter-reset: tirage;
}
.mosaique::-webkit-scrollbar { display: none; }
.mosaique .vignette, .mosaique-6 .vignette {
  counter-increment: tirage; flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; width: min(80vw, 560px);
  aspect-ratio: auto !important; height: auto !important; grid-column: auto !important; grid-row: auto !important;
  padding: 9px 9px 14px; border: 1px solid var(--trait); border-radius: 22px; overflow: visible; background: var(--papier); color: var(--basalte);
  scroll-snap-align: start; text-align: left; box-shadow: 0 34px 50px -34px rgba(18, 24, 23, 0.55); position: relative;
}
.mosaique .vignette::after { content: ""; position: absolute; inset: 3.5px; border: 1px solid var(--liseré); border-radius: 18.5px; pointer-events: none; }
.sombre .mosaique .vignette { background: var(--chaux); border-color: transparent; box-shadow: 0 40px 60px -36px rgba(0, 0, 0, 0.8); }
.mosaique .vignette img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.mosaique .vignette:nth-of-type(even) { width: min(62vw, 360px); margin-top: 44px; }
.mosaique .vignette:nth-of-type(even) img { aspect-ratio: 4 / 5; }
.mosaique .vignette > span {
  position: static; display: flex; align-items: baseline; gap: 10px; padding: 0 8px; background: none; border-radius: 0;
  color: var(--basalte); font-family: var(--titre); font-size: 18px; font-weight: 400; line-height: 1.2;
}
.mosaique .vignette > span::before { content: "N° " counter(tirage); flex: none; font-family: var(--texte); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terre); }
@media (hover: hover) { .mosaique .vignette:hover img { transform: none; } .mosaique .vignette { transition: translate 0.5s var(--ease); } .mosaique .vignette:hover { translate: 0 -6px; } }
@media (min-width: 900px) {
  .mosaique, .mosaique-6 { gap: 40px; margin-top: 46px; padding-bottom: 40px; }
  .mosaique .vignette { width: 540px; }
  .mosaique .vignette:nth-of-type(even) { width: 330px; margin-top: 84px; }
  .mosaique .vignette > span { font-size: 21px; }
}
/* les flèches et le compteur, ajoutés par le script */
.v5-nav { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 6px; }
.v5-nav-compte { font-family: var(--titre); font-size: 18px; margin-right: auto; font-variant-numeric: tabular-nums; }
.v5-nav-compte i { font-style: normal; opacity: 0.55; }
.v5-nav-barre { flex: 1; max-width: 240px; height: 2px; background: currentColor; opacity: 0.2; position: relative; overflow: hidden; margin-right: auto; }
.v5-nav button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid currentColor; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; transition: background 0.3s, color 0.3s; }
.v5-nav button:hover { background: var(--terre); border-color: var(--terre); color: var(--chaux); }
.v5-nav button svg { width: 20px; height: 20px; }
.v5-nav button:first-of-type svg { transform: scaleX(-1); }
.v5-nav button:disabled { opacity: 0.3; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .fond-nuit::after, .fond-roche::after, .v5-ampoule, .v5-luciole, .v5-guirlande .v5-balance, .usages::after,
  :is(.fond-grain, .fond-sable, .fond-ecume, .fond-quadrille, .fond-paperboard, .fond-route, .fond-jardin, .fond-salle, .fond-villa, .fond-plan, .fond-lagon)::before,
  :is(.fond-grain, .fond-sable, .fond-ecume, .fond-quadrille, .fond-paperboard, .fond-route, .fond-jardin, .fond-salle, .fond-villa, .fond-plan, .fond-lagon)::after { animation: none !important; }
  .mosaique { scroll-behavior: auto; }
}
@media (min-width: 900px) { .mosaique, .mosaique-6 { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 90px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 90px), transparent); } }

:root { --feuille: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20color%3D%22%232F5F5E%22%20class%3D%22feuille%22%20viewBox%3D%220%200%2084%20100%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2262%22%20r%3D%226.2%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%220.7%22%2F%3E%3Cpath%20d%3D%22M33.2%2060.5Q27.8%2061.0%2018.5%2057.4Q28.5%2057.9%2033.2%2060.5ZM33.5%2059.4Q23.9%2057.3%2011.8%2050.7Q25.1%2054.3%2033.5%2059.4ZM34.0%2058.3Q23.2%2053.5%2010.9%2044.0Q24.8%2050.8%2034.0%2058.3ZM34.8%2057.4Q24.8%2050.7%2014.3%2039.3Q26.9%2048.3%2034.8%2057.4ZM35.6%2056.5Q26.0%2047.1%2016.9%2033.1Q28.5%2045.1%2035.6%2056.5ZM36.6%2055.9Q28.9%2045.2%2022.4%2030.1Q31.7%2043.7%2036.6%2055.9ZM37.7%2055.4Q31.6%2042.4%2027.4%2025.5Q34.6%2041.4%2037.7%2055.4ZM38.9%2055.1Q34.9%2040.2%2033.5%2021.9Q38.0%2039.7%2038.9%2055.1ZM40.1%2055.0Q38.7%2040.3%2040.5%2022.5Q41.9%2040.3%2040.1%2055.0ZM41.3%2055.1Q42.6%2039.4%2047.5%2021.5Q45.7%2040.0%2041.3%2055.1ZM42.4%2055.4Q46.1%2041.0%2053.8%2024.8Q49.1%2042.1%2042.4%2055.4ZM43.5%2055.9Q50.0%2041.6%2060.7%2026.4Q52.8%2043.2%2043.5%2055.9ZM44.5%2056.6Q53.8%2043.1%2067.3%2029.5Q56.2%2045.2%2044.5%2056.6ZM45.3%2057.5Q56.0%2046.4%2071.0%2035.9Q58.1%2048.8%2045.3%2057.5ZM46.0%2058.5Q58.9%2049.1%2075.8%2041.0Q60.5%2051.8%2046.0%2058.5ZM46.6%2059.5Q59.7%2052.9%2076.9%2048.2Q60.8%2055.9%2046.6%2059.5ZM46.9%2060.7Q61.4%2056.3%2079.4%2054.6Q62.0%2059.5%2046.9%2060.7ZM47.0%2061.9Q62.3%2060.1%2080.6%2061.4Q62.4%2063.3%2047.0%2061.9ZM46.9%2063.1Q60.9%2063.7%2077.5%2067.9Q60.4%2066.8%2046.9%2063.1ZM46.6%2064.3Q60.4%2067.3%2076.2%2074.3Q59.4%2070.3%2046.6%2064.3ZM46.1%2065.4Q57.7%2069.9%2070.9%2078.9Q56.2%2072.7%2046.1%2065.4ZM45.5%2066.4Q56.0%2072.7%2067.3%2083.7Q54.0%2075.2%2045.5%2066.4ZM44.7%2067.2Q53.7%2075.0%2062.7%2087.5Q51.3%2077.1%2044.7%2067.2ZM43.7%2067.9Q50.0%2075.1%2055.7%2087.3Q47.3%2076.8%2043.7%2067.9ZM42.6%2068.5Q46.4%2073.5%2048.9%2084.1Q43.4%2074.7%2042.6%2068.5Z%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%220.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M40%2062C36%2072%2030%2084%2023%2095%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.1199999999999999%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); --feuille-claire: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20color%3D%22%23DCE9E6%22%20class%3D%22feuille%22%20viewBox%3D%220%200%2084%20100%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2262%22%20r%3D%226.2%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%220.7%22%2F%3E%3Cpath%20d%3D%22M33.2%2060.5Q27.8%2061.0%2018.5%2057.4Q28.5%2057.9%2033.2%2060.5ZM33.5%2059.4Q23.9%2057.3%2011.8%2050.7Q25.1%2054.3%2033.5%2059.4ZM34.0%2058.3Q23.2%2053.5%2010.9%2044.0Q24.8%2050.8%2034.0%2058.3ZM34.8%2057.4Q24.8%2050.7%2014.3%2039.3Q26.9%2048.3%2034.8%2057.4ZM35.6%2056.5Q26.0%2047.1%2016.9%2033.1Q28.5%2045.1%2035.6%2056.5ZM36.6%2055.9Q28.9%2045.2%2022.4%2030.1Q31.7%2043.7%2036.6%2055.9ZM37.7%2055.4Q31.6%2042.4%2027.4%2025.5Q34.6%2041.4%2037.7%2055.4ZM38.9%2055.1Q34.9%2040.2%2033.5%2021.9Q38.0%2039.7%2038.9%2055.1ZM40.1%2055.0Q38.7%2040.3%2040.5%2022.5Q41.9%2040.3%2040.1%2055.0ZM41.3%2055.1Q42.6%2039.4%2047.5%2021.5Q45.7%2040.0%2041.3%2055.1ZM42.4%2055.4Q46.1%2041.0%2053.8%2024.8Q49.1%2042.1%2042.4%2055.4ZM43.5%2055.9Q50.0%2041.6%2060.7%2026.4Q52.8%2043.2%2043.5%2055.9ZM44.5%2056.6Q53.8%2043.1%2067.3%2029.5Q56.2%2045.2%2044.5%2056.6ZM45.3%2057.5Q56.0%2046.4%2071.0%2035.9Q58.1%2048.8%2045.3%2057.5ZM46.0%2058.5Q58.9%2049.1%2075.8%2041.0Q60.5%2051.8%2046.0%2058.5ZM46.6%2059.5Q59.7%2052.9%2076.9%2048.2Q60.8%2055.9%2046.6%2059.5ZM46.9%2060.7Q61.4%2056.3%2079.4%2054.6Q62.0%2059.5%2046.9%2060.7ZM47.0%2061.9Q62.3%2060.1%2080.6%2061.4Q62.4%2063.3%2047.0%2061.9ZM46.9%2063.1Q60.9%2063.7%2077.5%2067.9Q60.4%2066.8%2046.9%2063.1ZM46.6%2064.3Q60.4%2067.3%2076.2%2074.3Q59.4%2070.3%2046.6%2064.3ZM46.1%2065.4Q57.7%2069.9%2070.9%2078.9Q56.2%2072.7%2046.1%2065.4ZM45.5%2066.4Q56.0%2072.7%2067.3%2083.7Q54.0%2075.2%2045.5%2066.4ZM44.7%2067.2Q53.7%2075.0%2062.7%2087.5Q51.3%2077.1%2044.7%2067.2ZM43.7%2067.9Q50.0%2075.1%2055.7%2087.3Q47.3%2076.8%2043.7%2067.9ZM42.6%2068.5Q46.4%2073.5%2048.9%2084.1Q43.4%2074.7%2042.6%2068.5Z%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%220.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M40%2062C36%2072%2030%2084%2023%2095%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.1199999999999999%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }