/* ==========================================================================
   Cinema layer (draft, 10 Oct 2026) — scroll-driven effects for the home page.
   • Static by default (no JS, reduced motion, « Moins de mouvement »): everything visible, nothing moves.
   • html.cine-on (set by js/cinema.js only when motion is allowed) switches on the effects
     (hero and photo parallax, two stacked cards, the desktop filmstrip).
   • Native CSS scroll-driven animations where supported (@supports animation-timeline);
     otherwise html.cine-js and js/cinema.js drive the same transforms with one rAF loop.
   • Only transform and opacity are animated.
   ========================================================================== */

body.home {
  --amp: 8%;          /* image parallax travel inside its frame (desktop) */
  --ov: 12%;          /* overscan: extra image height above and below the frame */
  --top-gap: 84px;    /* sticky offset under the top bar */
}
@media (max-width: 720px) {
  body.home { --amp: 4%; --ov: 7%; --top-gap: 70px; }
}

/* ---------- Shared photo frame ---------- */
body.home .shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 2px;
  background: var(--night-2);
  overflow: hidden;
  overflow: clip; /* clip, not hidden: a hidden box is a scroll container and would freeze view() timelines */
  cursor: zoom-in;
  aspect-ratio: var(--ar, 3 / 2);
}
body.home .shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.home .shot:focus-visible { outline: 1px solid var(--accent-soft); outline-offset: 4px; }

/* ---------- Hero: photo layer slower than the page, copy layer slightly faster ---------- */
body.home .hero-plx { position: absolute; inset: 0; }
body.home .hero-plx .hero-photo { width: 100%; height: 100%; object-fit: cover; }
html.cine-on body.home .hero-plx { inset: calc(-1 * var(--ov)) 0; }

/* ---------- Story: three chapters, each its own full-screen photo with the text card in front ----------
   No pinning, no crossfade: the sections simply scroll one after another.
   Static (no JS / reduced motion / « Moins de mouvement »): same layout, nothing moves. */
body.home .story { padding-top: 0; }
body.home .story article.story-ch {
  position: relative;
  display: flex;
  align-items: center;
  max-width: none;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 calc(-1 * var(--gutter));
  padding: clamp(96px, 12vh, 140px) var(--gutter);
  border: 0;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  background: var(--night-2);
}
body.home .ch-bg { position: absolute; inset: 0; margin: 0; z-index: -1; overflow: hidden; overflow: clip; }
body.home .ch-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}
body.home .ch-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(14, 11, 9, 0.62) 0%, rgba(14, 11, 9, 0.3) 45%, rgba(14, 11, 9, 0) 75%),
    linear-gradient(to bottom, rgba(14, 11, 9, 0.5) 0%, rgba(14, 11, 9, 0) 22%, rgba(14, 11, 9, 0) 72%, rgba(20, 17, 14, 0.75) 100%);
}
body.home .story-ch[data-ch="0"] .ch-bg img { object-position: 50% 45%; }
body.home .ch-card {
  position: relative;
  width: min(100%, 35rem);
  margin-left: max(0px, calc((100% - 1200px) / 2));
  padding: clamp(28px, 3.6vw, 46px);
  background: linear-gradient(180deg, rgba(20, 17, 14, 0.68), rgba(20, 17, 14, 0.52));
  border: 1px solid rgba(243, 237, 228, 0.08);
  border-radius: 2px;
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
body.home .ch-card > p { white-space: pre-line; padding-top: 22px; max-width: 34em; color: rgba(243, 237, 228, 0.88); }
body.home .story .facts { margin-top: 0; }
@media (max-width: 720px) {
  body.home .story article.story-ch { align-items: flex-end; padding-top: 45svh; padding-bottom: 28px; }
  body.home .ch-bg::after {
    background: linear-gradient(to bottom, rgba(14, 11, 9, 0.45) 0%, rgba(14, 11, 9, 0.08) 25%, rgba(14, 11, 9, 0.25) 55%, rgba(20, 17, 14, 0.85) 100%);
  }
  body.home .ch-card { width: 100%; background: rgba(20, 17, 14, 0.72); }
}
/* motion on: the photo is taller than its section (overscan) so it can drift and slowly zoom */
html.cine-on body.home .ch-bg img { top: calc(-1 * var(--ov)); height: calc(100% + 2 * var(--ov)); transform-origin: 50% 50%; }

/* ---------- Story, DESKTOP with motion (>= 900px): the first-draft pinned scene ----------
   One full-screen stage stays pinned while the three texts scroll over it; the photo crossfades
   night → dusk → day. Below 900px, without JS, or with reduced motion / « Moins de mouvement »:
   the per-chapter layout above (each chapter its own full-screen photo, nothing pinned). */
body.home .cine { position: relative; }
body.home .cine-stage { display: none; }
@media (min-width: 900px) {
  html.cine-on body.home .cine { timeline-scope: --ch0, --ch1, --ch2; }
  html.cine-on body.home .cine-stage {
    display: block;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100lvh;
    margin: 0 calc(-1 * var(--gutter)) -100vh;
    margin-bottom: -100lvh;
    overflow: hidden;
    overflow: clip;
    z-index: 0;
    background: var(--night-2);
  }
  html.cine-on body.home .cine-bg { position: absolute; inset: 0; margin: 0; overflow: hidden; overflow: clip; }
  html.cine-on body.home .cine-bg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; transform-origin: 50% 55%; }
  html.cine-on body.home .cine-bg[data-ch="0"] img { object-position: 50% 45%; }
  html.cine-on body.home .cine-bg[data-ch="0"] { z-index: 1; }
  html.cine-on body.home .cine-bg[data-ch="1"] { z-index: 2; }
  html.cine-on body.home .cine-bg[data-ch="2"] { z-index: 3; }
  html.cine-on body.home .cine-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
  html.cine-on body.home .cine-bg[data-ch="0"]::after { background: rgba(10, 14, 32, 0.28); }
  html.cine-on body.home .cine-bg[data-ch="1"]::after { background: rgba(58, 30, 12, 0.24); }
  html.cine-on body.home .cine-bg[data-ch="2"]::after { background: rgba(20, 17, 14, 0.06); }
  html.cine-on body.home .cine-shade {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background:
      linear-gradient(to right, rgba(14, 11, 9, 0.72) 0%, rgba(14, 11, 9, 0.38) 45%, rgba(14, 11, 9, 0) 75%),
      linear-gradient(to bottom, rgba(14, 11, 9, 0.55) 0%, rgba(14, 11, 9, 0) 22%, rgba(14, 11, 9, 0) 70%, rgba(20, 17, 14, 0.9) 100%);
  }
  /* the chapters become transparent text layers scrolling over the pinned stage */
  html.cine-on body.home .story article.story-ch {
    z-index: 1;
    display: flex;
    align-items: flex-start;
    min-height: 135vh;
    min-height: 135svh;
    padding: 45vh var(--gutter) 30vh;
    padding: 45svh var(--gutter) 30svh;
    background: none;
    overflow: visible;
    isolation: auto;
  }
  html.cine-on body.home .story article.story-ch[data-ch="0"] { view-timeline: --ch0 block; padding-top: 70svh; }
  html.cine-on body.home .story article.story-ch[data-ch="1"] { view-timeline: --ch1 block; }
  html.cine-on body.home .story article.story-ch[data-ch="2"] { view-timeline: --ch2 block; }
  html.cine-on body.home .story .ch-bg { display: none; }
  html.cine-on body.home .ch-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, rgba(20, 17, 14, 0.66), rgba(20, 17, 14, 0.5)); }
  html.cine-on body.home .story .facts { position: relative; z-index: 1; }
}

/* ---------- Photos band ---------- */
body.home .photos-band { padding-top: clamp(32px, 5vw, 64px); }
body.home .photos-band > div { max-width: var(--max); margin-left: auto; margin-right: auto; }

/* Stacked cards: static = simple column */
body.home .stack { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 22px); }
body.home .stack-card .shot { aspect-ratio: auto; height: min(72vh, 58vw); }
@media (max-width: 720px) {
  body.home .stack-card .shot { height: auto; aspect-ratio: 4 / 5; }
}

/* Filmstrip: static = column of photos at their own ratio */
body.home .film { margin-top: clamp(12px, 1.6vw, 22px); }
body.home .film-track { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 22px); }
body.home .film-card { aspect-ratio: var(--ar); }
@media (min-width: 721px) {
  body.home .film-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  body.home .film-card { aspect-ratio: 4 / 3; }
}

/* Parallax frames: the image is taller than its frame (overscan) and drifts slower than the page. */
html.cine-on body.home .plx img {
  position: absolute;
  max-width: none;
  max-height: none;
  left: 0;
  top: calc(-1 * var(--ov));
  height: calc(100% + 2 * var(--ov));
  width: 100%;
}

/* Stacked cards: each card sticks under the bar and the next one slides over it. */
html.cine-on body.home .stack { gap: 0; timeline-scope: --sc1; padding-bottom: 6vh; }
html.cine-on body.home .stack-card {
  position: sticky;
  top: calc(var(--top-gap) + var(--k) * 16px);
  margin-bottom: 22vh;
}
html.cine-on body.home .stack-card:last-child { margin-bottom: 0; }
html.cine-on body.home .stack-card[style*="--k:1"] { view-timeline: --sc1 block; }
html.cine-on body.home .stack-card .shot { box-shadow: 0 -18px 50px -30px rgba(0, 0, 0, 0.9); transform-origin: 50% 0; }
html.cine-on body.home .stack-card .shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #0e0b09;
  opacity: 0;
  pointer-events: none;
}

/* Filmstrip: desktop only — the page scrolls down, the strip travels sideways. */
@media (min-width: 901px) {
  html.cine-on body.home .film {
    height: var(--film-h, 320vh);
    max-width: none;
    margin: 0 calc(-1 * var(--gutter));
    view-timeline: --film block;
  }
  html.cine-on body.home .film-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
  }
  html.cine-on body.home .film-track {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3.2vw;
    padding: 0 7vw;
    will-change: transform;
  }
  html.cine-on body.home .film-card {
    flex: 0 0 auto;
    height: 64vh;
    width: auto;
    aspect-ratio: var(--ar);
  }
  html.cine-on body.home .film-card:nth-child(even) { margin-top: 10vh; }
  html.cine-on body.home .film-card:nth-child(odd) { margin-bottom: 8vh; }
  /* horizontal overscan for the inner drift */
  html.cine-on body.home .film-card.plx img {
    top: 0;
    height: 100%;
    left: -8%;
    width: 116%;
  }
}
@media (max-width: 900px) and (min-width: 721px) {
  html.cine-on body.home .film-track { display: grid; }
}

/* ==========================================================================
   Native scroll-driven animations
   ========================================================================== */
@supports (animation-timeline: view()) {
  html.cine-on:not(.cine-js) body.home .hero-plx {
    animation: cine-hero-photo linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 100vh;
  }
  html.cine-on:not(.cine-js) body.home .hero-copy {
    animation: cine-hero-copy linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 100vh;
  }
  html.cine-on:not(.cine-js) body.home .plx img {
    animation: cine-plx-y linear both;
    animation-timeline: view(block);
    animation-range: cover 0% cover 100%;
  }
  html.cine-on:not(.cine-js) body.home .stack-card:nth-child(2) .shot img { animation-name: cine-plx-y-slow; }

  /* chapters: each photo drifts and slowly zooms out while its section crosses the screen; the card slides/fades in */
  html.cine-on:not(.cine-js) body.home .ch-bg img {
    animation: cine-ch-img linear both;
    animation-timeline: view(block);
    animation-range: cover 0% cover 100%;
  }
  html.cine-on:not(.cine-js) body.home .ch-card {
    animation: cine-ch-card linear both;
    animation-timeline: view(block);
    animation-range: entry 0% exit 100%;
  }

  /* desktop pinned scene: later photos fade in over earlier ones; each zooms out slowly; cards fade in/out */
  @media (min-width: 900px) {
    html.cine-on:not(.cine-js) body.home .cine-bg[data-ch="1"] { animation: cine-fade-in linear both; animation-timeline: --ch1; animation-range: entry 0% entry 90vh; }
    html.cine-on:not(.cine-js) body.home .cine-bg[data-ch="2"] { animation: cine-fade-in linear both; animation-timeline: --ch2; animation-range: entry 0% entry 90vh; }
    html.cine-on:not(.cine-js) body.home .cine-bg[data-ch="0"] img { animation: cine-scene-zoom linear both; animation-timeline: --ch0; animation-range: cover 0% cover 100%; }
    html.cine-on:not(.cine-js) body.home .cine-bg[data-ch="1"] img { animation: cine-scene-zoom linear both; animation-timeline: --ch1; animation-range: cover 0% cover 100%; }
    html.cine-on:not(.cine-js) body.home .cine-bg[data-ch="2"] img { animation: cine-scene-zoom linear both; animation-timeline: --ch2; animation-range: cover 0% cover 100%; }
    html.cine-on:not(.cine-js) body.home .ch-card { animation-name: cine-card; }
  }

  /* stack: the first card recedes while the second slides over it */
  html.cine-on:not(.cine-js) body.home .stack-card[style*="--k:0"] .shot { animation: cine-recede linear both; animation-timeline: --sc1; animation-range: entry 0% entry 100%; }
  html.cine-on:not(.cine-js) body.home .stack-card[style*="--k:0"] .shot::after { animation: cine-dim linear both; animation-timeline: --sc1; animation-range: entry 0% entry 100%; }

  @media (min-width: 901px) {
    html.cine-on:not(.cine-js) body.home .film-track { animation: cine-film-x linear both; animation-timeline: --film; animation-range: contain 0% contain 100%; }
    html.cine-on:not(.cine-js) body.home .film-card.plx img { animation: cine-film-drift linear both; animation-timeline: --film; animation-range: contain 0% contain 100%; }
    html.cine-on:not(.cine-js) body.home .film-card.plx:nth-child(even) img { animation-name: cine-film-drift-rev; }
  }
}

@keyframes cine-hero-photo { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, calc(var(--ov) * 0.7), 0); } }
@keyframes cine-hero-copy { from { transform: translate3d(0, 0, 0); opacity: 1; } 70% { opacity: 1; } to { transform: translate3d(0, -56px, 0); opacity: 0.35; } }
@keyframes cine-plx-y { from { transform: translate3d(0, calc(-1 * var(--amp)), 0); } to { transform: translate3d(0, var(--amp), 0); } }
@keyframes cine-plx-y-slow { from { transform: translate3d(0, calc(-0.6 * var(--amp)), 0); } to { transform: translate3d(0, calc(0.6 * var(--amp)), 0); } }
@keyframes cine-ch-img {
  from { transform: translate3d(0, calc(-1 * var(--amp)), 0) scale(1.12); }
  to { transform: translate3d(0, var(--amp), 0) scale(1.02); }
}
@keyframes cine-ch-card {
  entry 0% { opacity: 0; transform: translate3d(0, 9vh, 0); }
  entry 85% { opacity: 1; transform: translate3d(0, 0, 0); }
  exit 45% { opacity: 1; transform: translate3d(0, 0, 0); }
  exit 100% { opacity: 0.15; transform: translate3d(0, -4vh, 0); }
}
@keyframes cine-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cine-scene-zoom { from { transform: scale(1.14); } to { transform: scale(1.02); } }
@keyframes cine-card {
  entry 0% { opacity: 0; transform: translate3d(0, 9vh, 0); }
  entry 80% { opacity: 1; transform: translate3d(0, 0, 0); }
  exit 30% { opacity: 1; transform: translate3d(0, 0, 0); }
  exit 100% { opacity: 0; transform: translate3d(0, -5vh, 0); }
}
@keyframes cine-recede { from { transform: scale(1); } to { transform: scale(0.92); } }
@keyframes cine-dim { from { opacity: 0; } to { opacity: 0.5; } }
@keyframes cine-film-x { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--film-shift, -100vw), 0, 0); } }
@keyframes cine-film-drift { from { transform: translate3d(5%, 0, 0); } to { transform: translate3d(-5%, 0, 0); } }
@keyframes cine-film-drift-rev { from { transform: translate3d(-3%, 0, 0); } to { transform: translate3d(3%, 0, 0); } }

/* Hard stop: reduced motion or « Moins de mouvement » — nothing animated, everything visible. */
@media (prefers-reduced-motion: reduce) {
  html body.home .hero-plx, html body.home .hero-copy, html body.home .plx img,
  html body.home .ch-bg img, html body.home .ch-card,
  html body.home .cine-bg, html body.home .cine-bg img,
  html body.home .stack-card .shot, html body.home .stack-card .shot::after,
  html body.home .film-track, html body.home .film-card img { animation: none !important; }
}
html.lpm-still body.home .hero-plx, html.lpm-still body.home .hero-copy, html.lpm-still body.home .plx img,
html.lpm-still body.home .ch-bg img, html.lpm-still body.home .ch-card,
html.lpm-still body.home .cine-bg, html.lpm-still body.home .cine-bg img,
html.lpm-still body.home .stack-card .shot,
html.lpm-still body.home .film-track, html.lpm-still body.home .film-card img { animation: none !important; }

/* rAF fallback (browsers without animation-timeline): js/cinema.js writes transforms; the dim layer reads a variable. */
html.cine-on.cine-js body.home .stack-card .shot::after { opacity: var(--dim, 0); }

/* ---------- Map: Leaflet + OpenStreetMap ---------- */
body.home .leaf {
  position: relative;
  z-index: 0;
  isolation: isolate;
  height: clamp(380px, 80vh, 720px);
  background: #e9e1d5;
  font-family: var(--sans);
}
body.home .leaf-wait {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(42, 35, 28, 0.45);
}
body.home .leaf .leaflet-tile-pane { filter: saturate(0.72) sepia(0.12); }
body.home .leaf .leaflet-control-attribution { font-size: 0.68rem; background: rgba(250, 247, 242, 0.86); }
body.home .leaf .leaflet-bar a { color: var(--ink); }
body.home .lpm-home-pin span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #a5603f;
  border: 2px solid #fffcf7;
  box-shadow: 0 4px 14px rgba(42, 35, 28, 0.35);
}
body.home .lpm-home-pin svg { width: 17px; height: 17px; fill: #fffcf7; }
body.home .lpm-pop .leaflet-popup-content-wrapper { border-radius: 3px; box-shadow: 0 10px 30px rgba(42, 35, 28, 0.22); }
body.home .lpm-pop .leaflet-popup-content { margin: 12px 18px 12px 14px; line-height: 1.4; }
body.home .lpm-pop .pop-name { display: block; font-family: var(--serif); font-size: 1.12rem; font-weight: 500; color: var(--ink); }
body.home .lpm-pop .pop-tag { display: block; margin-top: 2px; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(42, 35, 28, 0.55); }
body.home .lpm-pop .pop-time { display: block; margin-top: 6px; font-size: 0.86rem; color: var(--accent); }
body.home .leaf-hint {
  position: absolute;
  z-index: 800;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(20, 17, 14, 0.78);
  color: #fbf6ef;
  font-size: 0.78rem;
  white-space: nowrap;
  pointer-events: none;
}
body.home .leaf.is-active .leaf-hint { display: none; }
@media (max-width: 720px) {
  /* full width on phones so the whole area fits at a readable zoom */
  body.home .map-card { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); border-left: 0; border-right: 0; border-radius: 0; }
  body.home .leaf { height: clamp(380px, 66vh, 560px); }
}

/* ---------- Near the bottom: four photos in a calm collage (façade, spa + table, cour, spa under the staircase) ---------- */
body.home .coda { padding-top: clamp(72px, 9vw, 128px); padding-bottom: clamp(72px, 9vw, 128px); }
body.home .coda-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
  max-width: var(--max);
  margin: 0 auto;
}
body.home .coda .shot { aspect-ratio: auto; background: #e9e1d5; }
body.home .coda .shot img { transition: transform 1.6s cubic-bezier(0.2, 0.6, 0.2, 1); }
body.home .coda-a { grid-column: 1 / 9; grid-row: 1; aspect-ratio: 3 / 2 !important; }
body.home .coda-b { grid-column: 1 / 5; grid-row: 2; aspect-ratio: 4 / 3 !important; }
body.home .coda-c { grid-column: 5 / 9; grid-row: 2; aspect-ratio: 4 / 3 !important; }
body.home .coda-d { grid-column: 9 / 13; grid-row: 1 / 3; height: 100%; }
body.home .coda .shot img { position: absolute; inset: 0; }
@media (hover: hover) and (pointer: fine) {
  body.home .coda .shot:hover img { transform: scale(1.03); }
}
@media (max-width: 720px) {
  body.home .coda-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  body.home .coda-a { grid-column: 1 / 3; grid-row: 1; }
  body.home .coda-b { grid-column: 1 / 2; grid-row: 2; aspect-ratio: 1 / 1 !important; }
  body.home .coda-c { grid-column: 2 / 3; grid-row: 2; aspect-ratio: 1 / 1 !important; }
  body.home .coda-d { grid-column: 1 / 3; grid-row: 3; height: auto; aspect-ratio: 4 / 5 !important; }
}
html.lpm-still body.home .coda .shot img { transition: none; transform: none !important; }
@media (prefers-reduced-motion: reduce) { body.home .coda .shot img { transition: none; transform: none !important; } }

/* « Toutes les photos → » just before the final booking button */
body.home #contact p.all-cta { margin: 44px 0 0; }
body.home #contact p.all-cta + p.book-final { margin-top: 18px; }
body.home .all-cta a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 28px;
  border: 1px solid rgba(243, 237, 228, 0.32);
  border-radius: 999px;
  color: #f3ede4;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.4s ease, background-color 0.4s ease;
}
body.home .all-cta a:hover { border-color: rgba(243, 237, 228, 0.7); background: rgba(243, 237, 228, 0.06); }
body.home .all-cta-arrow { transition: transform 0.4s ease; }
body.home .all-cta a:hover .all-cta-arrow { transform: translateX(4px); }
html.lpm-still body.home .all-cta-arrow { transition: none; transform: none !important; }
@media (prefers-reduced-motion: reduce) { body.home .all-cta-arrow { transition: none; transform: none !important; } }

/* Photo section ends right after the stacked cards (no empty dark band before « Confort ») */
body.home .photos-band { padding-bottom: clamp(28px, 3.5vw, 48px); }
html.cine-on body.home .stack { padding-bottom: 0; }

/* Note above the short list of best-known sites */
body.home .place-note { margin: 28px 0 0; font-size: 0.86rem; color: var(--muted, rgba(43, 36, 30, 0.62)); }
/* Approximate area label on the Leaflet map (no exact house pin). */
.leaflet-tooltip.lpm-area-label { background: rgba(255, 252, 247, 0.92); border: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.18); color: #3d3429; font-weight: 700; font-size: 12px; padding: 3px 8px; border-radius: 999px; }
.leaflet-tooltip.lpm-area-label::before { display: none; }