:root {
  --color-paper: #fbfcf7;
  --color-ink: #3a3426;
  --color-head: #2c4a2e;
  --color-accent: #a9c97a;
  --color-soft: #e9eedc;
  --color-deep: #23402a;
  --color-on-deep: #ffffff;
  --color-on-deep-soft: #c8d6c3;
  --color-button: #5f8a3a;
  --color-button-ink: #ffffff;
  --overlay-hero: linear-gradient(rgba(20, 35, 22, 0.30), rgba(20, 35, 22, 0.55));
  --veil-closing: rgba(251, 252, 247, 0.86);
  --veil-tile: rgba(35, 64, 42, 0.88);
  --font-display: "Marcellus", Georgia, serif;
  --font-body: "Source Sans 3", Helvetica, Arial, sans-serif;
  --radius-button: 999px;
  --radius-tile: 10px;
  --radius-photo: 4px;
  --pad: clamp(18px, 5vw, 64px);
  --mosaic-gap: 6px;
}

@font-face {
  font-family: "Marcellus";
  src: url("assets/fonts/marcellus-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("assets/fonts/source-sans-3-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height, 100px); }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.container { padding-left: var(--pad); padding-right: var(--pad); }

.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-head);
  font-size: clamp(28px, 3.8vw, 42px);
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
.cta {
  display: inline-block;
  background: var(--color-button);
  color: var(--color-button-ink);
  padding: 14px 28px;
  border-radius: var(--radius-button);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: filter 0.15s;
}
.cta:hover { filter: brightness(1.08); }
.cta-icon { display: inline-flex; align-items: center; gap: 10px; }
.cta-icon .ico { width: 18px; height: 18px; stroke: currentColor; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

/* Contact values drawn by script.js */
.contact { display: inline-block; vertical-align: middle; }
.contact canvas { display: block; cursor: pointer; }

/* Header */
.top { background: var(--color-deep); position: sticky; top: 0; z-index: 10; }
.strip {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 22px;
  font-size: 13px;
  color: var(--color-on-deep);
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.strip > span { display: inline-flex; align-items: center; gap: 6px; }
.ico { width: 14px; height: 14px; fill: none; stroke: var(--color-on-deep-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--color-on-deep); }
.logo svg { width: 34px; height: 34px; flex: none; }
.logo svg path { fill: var(--color-accent); }
.logo b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1; }
.logo small { display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-on-deep-soft); margin-top: 3px; }
.nav { display: flex; gap: 24px; font-size: 15px; color: var(--color-on-deep); }
.nav a { padding: 4px 0; border-bottom: 2px solid transparent; }
.nav a.on, .nav a:hover { border-color: var(--color-accent); }
.burger { display: none; background: none; border: 0; color: var(--color-on-deep); font-size: 26px; line-height: 1; cursor: pointer; padding: 4px; }
.mobile-nav { padding-bottom: 12px; }
.mobile-nav a { display: block; padding: 12px 0; color: var(--color-on-deep); border-top: 1px solid rgba(255, 255, 255, 0.1); }

/* Hero with parallax background (moved by script.js) */
.hero { position: relative; min-height: 78vh; display: grid; place-items: center; text-align: center; overflow: hidden; }
.parallax-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: -10%;
  height: 120%;
  background: url("assets/images/hero-large.jpg") center / cover no-repeat;
  will-change: transform;
}
.hero::after { content: ""; position: absolute; inset: 0; background: var(--overlay-hero); }
.hero-text { position: relative; z-index: 1; padding-top: 80px; padding-bottom: 100px; color: #fff; display: grid; justify-items: center; gap: 16px; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.hero h1 em { font-style: normal; color: var(--color-accent); }
.hero p { margin: 0; font-size: clamp(17px, 1.9vw, 21px); max-width: 44ch; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }
.scroll { width: 24px; height: 36px; border: 2px solid #fff; border-radius: 12px; position: relative; margin-top: 10px; }
.scroll::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: scroll-hint 1.6s infinite; }
@keyframes scroll-hint { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

/* Intro */
.intro { text-align: center; padding-top: 76px; padding-bottom: 76px; display: grid; justify-items: center; gap: 22px; }
.brush { display: block; width: 160px; height: 12px; margin: 10px auto 0; }
.brush path { stroke: var(--color-accent); stroke-width: 5; fill: none; stroke-linecap: round; }
.intro p { margin: 0; max-width: 64ch; font-size: 18px; }

/* Text | picture rows */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 580px; }
.split-text { padding: 64px var(--pad); display: grid; align-content: center; gap: 22px; }
.split-text .h2 { text-align: center; }
.split ul { margin: 0; padding-left: 20px; display: grid; gap: 14px; font-size: 16.5px; }
.split li::marker { color: var(--color-button); }
.split li b { color: var(--color-head); }
.split-pic { position: relative; min-height: 340px; }
.split-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split.reverse .split-text { order: 2; }

/* Zone map */
.zone-map { margin: 0; background: var(--color-soft); position: relative; min-height: 420px; }
.zone-map svg { position: absolute; top: 3%; left: 3%; width: 94%; height: 94%; display: block; }
.commune { fill: var(--color-paper); stroke: var(--color-head); stroke-width: 1.4; transition: fill 0.2s; }
.commune:hover { fill: var(--color-accent); }
.commune.home { fill: var(--color-button); }
.labels { pointer-events: none; }
.labels text { font-family: var(--font-body); font-size: 9.5px; font-weight: 600; fill: var(--color-head); text-anchor: middle; }
.labels text.home { fill: var(--color-button-ink); }

/* Tiles (click shows details) */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: 68px; padding-bottom: 68px; }
.tile {
  position: relative;
  aspect-ratio: 6 / 5;
  overflow: hidden;
  border: 0;
  padding: 0;
  border-radius: var(--radius-tile);
  cursor: pointer;
  font: inherit;
  color: #fff;
  text-align: center;
  background: var(--color-deep);
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.tile:hover img { transform: scale(1.05); }
.tile::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.52); transition: background 0.25s; }
.tile.open::after { background: var(--veil-tile); }
.tile-face, .tile-back { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 16px; transition: opacity 0.25s; }
.tile-back { opacity: 0; font-size: 15px; line-height: 1.5; }
.tile.open .tile-face { opacity: 0; }
.tile.open .tile-back { opacity: 1; }
.tile h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 25px; line-height: 1.1; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }

/* Gallery: every photo has a named slot so the grid is always a full rectangle */
.gallery { background: var(--color-soft); padding-top: 60px; padding-bottom: 60px; }
.gallery .h2 { text-align: center; margin-bottom: 28px; }
.mosaic {
  display: grid;
  gap: var(--mosaic-gap);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: calc((100vw - 2 * var(--pad) - 5 * var(--mosaic-gap)) / 6 * 0.78);
  grid-template-areas:
    "a a b c d d"
    "a a e c f f"
    "g h h i j j"
    "g k k l l l";
}
.mosaic > div { overflow: hidden; border-radius: var(--radius-photo); min-width: 0; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.mosaic > div:hover img { transform: scale(1.06); }
.m-a { grid-area: a; } .m-b { grid-area: b; } .m-c { grid-area: c; } .m-d { grid-area: d; }
.m-e { grid-area: e; } .m-f { grid-area: f; } .m-g { grid-area: g; } .m-h { grid-area: h; }
.m-i { grid-area: i; } .m-j { grid-area: j; } .m-k { grid-area: k; } .m-l { grid-area: l; }

/* Closing call band */
.closing { position: relative; text-align: center; overflow: hidden; }
.closing > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.closing::after { content: ""; position: absolute; inset: 0; background: var(--veil-closing); }
.closing-text { position: relative; z-index: 1; padding-top: 88px; padding-bottom: 88px; display: grid; gap: 18px; justify-items: center; }
.closing p { margin: 0; font-size: 18px; }

/* Footer */
.foot { background: var(--color-deep); color: var(--color-on-deep-soft); font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding-top: 46px; padding-bottom: 46px; }
.foot h4 { margin: 0 0 12px; color: var(--color-on-deep); font-family: var(--font-display); font-weight: 400; font-size: 20px; }
.foot p { margin: 0 0 6px; }
.foot .contact { color: var(--color-on-deep); }
.foot-bottom { border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 14px; padding-bottom: 14px; font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* Preview lock (lock.js) */
html.locked body > :not(#lock) { display: none !important; }
html.locked body { background: #ffffff; }
#lock { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #ffffff; }
#lock input { width: 240px; max-width: 100%; font: 16px Helvetica, Arial, sans-serif; padding: 10px 12px; border: 2px solid #888888; border-radius: 4px; background: #ffffff; color: #000000; outline: none; }
#lock input:focus { border-color: #000000; }
#lock input.wrong { border-color: #d00000; }
#lock form { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#lock button { font: 16px Helvetica, Arial, sans-serif; padding: 10px 16px; border: 2px solid #888888; border-radius: 4px; background: #f2f2f2; color: #000000; cursor: pointer; }
#lock button:focus-visible { border-color: #000000; outline: none; }

/* Legal page */
.legal { max-width: 860px; margin: 0 auto; padding-top: 56px; padding-bottom: 72px; display: grid; gap: 28px; }
.legal section { display: grid; gap: 6px; }
.legal h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--color-head); }
.legal p { margin: 0; }
.legal a { color: var(--color-button); text-decoration: underline; }
.legal .contact { color: var(--color-ink); }
.foot-bottom a:hover { color: var(--color-on-deep); }

@media (max-width: 760px) {
  .nav { display: none; }
  .burger { display: block; }
  .strip { justify-content: center; flex-wrap: wrap; gap: 4px 18px; }
  .hero { min-height: 70vh; }
  .scroll { display: none; }
  .split, .foot-grid { grid-template-columns: 1fr; }
  .split { min-height: 0; }
  .split.reverse .split-text { order: 0; }
  .split-pic { min-height: 280px; }
  .zone-map { min-height: 0; aspect-ratio: 396 / 410; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile h3 { font-size: 20px; }
  .tile-back { font-size: 13.5px; }
  .mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: calc((100vw - 2 * var(--pad) - var(--mosaic-gap)) / 2 * 0.72);
    grid-template-areas: "a a" "b c" "d d" "e f" "g h" "i i" "j k" "l l";
  }
}
@media (min-width: 761px) {
  .mobile-nav { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tile img, .mosaic img { transition: none; }
  .scroll::after { animation: none; }
}