/* =========================================================
   Carla Salva Photographie — Design tokens & base styles
   Cinematic, dark, moody. EB Garamond + Manrope.
   ========================================================= */

:root {
  /* Color palette ------------------------------------------------- */
  --bg-primary:    #0F1410;  /* deep forest black */
  --bg-secondary:  #1C2620;  /* night green */
  --surface:       #2A3D33;  /* moss */
  --surface-deep:  #0A0A0A;  /* footer black */

  --accent:        #C9A86A;  /* brass gold */
  --accent-hover:  #D9BA7A;  /* lighter brass */
  --accent-soft:   rgba(201, 168, 106, 0.12);

  --ivory:         #F5F2EC;
  --sand:          #D4B996;
  --taupe:         #8A8076;

  --border:        rgba(201, 168, 106, 0.15);
  --border-strong: rgba(201, 168, 106, 0.35);
  --overlay:       rgba(15, 20, 16, 0.55);
  --overlay-deep:  rgba(15, 20, 16, 0.78);

  /* Type --------------------------------------------------------- */
  --font-display: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  /* Motion ------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-slow: 600ms;
  --dur-base: 400ms;
  --dur-fast: 220ms;
}

/* Tailwind-style reset (minimal, hand-rolled) ------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ivory);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; outline: 0; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* Typography utilities ----------------------------------------- */
.serif      { font-family: var(--font-display); font-weight: 400; }
.serif-med  { font-family: var(--font-display); font-weight: 500; }
.italic     { font-style: italic; }

.caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.caption-muted { color: var(--sand); }

.h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.2;
}
.lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.45;
  color: var(--sand);
}
.muted   { color: var(--sand); }
.subtle  { color: var(--taupe); }
.num     { font-variant-numeric: tabular-nums; }

/* Layout ------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) { .container { padding: 0 48px; } }
@media (min-width: 1280px){ .container { padding: 0 64px; } }

.section { padding: 96px 0; }
.section-lg { padding: 140px 0; }
@media (min-width: 768px) { .section { padding: 140px 0; } .section-lg { padding: 200px 0; } }

.divider-thin {
  height: 1px;
  background: var(--border);
  border: 0;
}

/* ============== HEADER ============== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 22px 0;
  transition: background var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out),
              padding var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  padding: 14px 0;
  background: rgba(15, 20, 16, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.brand .wordmark {
  height: 18px;
  width: auto;
}
.nav-list {
  display: none;
  align-items: center;
  gap: 36px;
}
@media (min-width: 1024px) { .nav-list { display: flex; } }
.nav-link {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ivory);
  position: relative;
  padding: 8px 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-link:hover { color: var(--accent); }
.nav-link.is-active { color: var(--accent); }
.nav-link.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--accent);
}

/* Dropdown */
.nav-item { position: relative; }
.nav-item .chev {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  color: var(--accent);
}
.dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: -24px;
  min-width: 240px;
  padding: 18px 22px;
  background: rgba(15, 20, 16, 0.96);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all var(--dur-base) var(--ease-out);
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown a {
  display: block;
  padding: 10px 0;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ivory);
  border-bottom: 1px solid var(--border);
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}
.dropdown a:last-child { border-bottom: 0; }
.dropdown a:hover { color: var(--accent); padding-left: 6px; }

/* CTA buttons ---------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: all var(--dur-base) var(--ease-out);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: var(--bg-primary);
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}
.btn-outline {
  background: transparent;
  color: var(--ivory);
  border-color: var(--accent);
}
.btn-outline:hover {
  background: var(--accent-soft);
  color: var(--accent-hover);
}
.btn-ghost {
  background: transparent;
  color: var(--accent);
  padding: 12px 0;
  letter-spacing: 0.18em;
  border-bottom: 1px solid var(--accent);
}
.btn-ghost:hover { color: var(--accent-hover); }
.btn-lg { padding: 18px 36px; font-size: 13px; }

.btn-nav {
  display: none;
  padding: 12px 20px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out);
}
.btn-nav:hover { background: var(--accent-soft); }
@media (min-width: 1024px) { .btn-nav { display: inline-flex; } }

/* Mobile menu --------------------------------------------------- */
.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
}
@media (min-width: 1024px) { .menu-toggle { display: none; } }
.menu-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--ivory);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.mobile-menu {
  position: fixed; inset: 0;
  z-index: 200;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out), visibility var(--dur-slow) var(--ease-out);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu-close {
  position: absolute;
  top: 24px; right: 24px;
  font-size: 28px;
  color: var(--accent);
  padding: 12px;
  font-family: var(--font-display);
}
.mobile-nav {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mobile-nav a {
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 44px);
  color: var(--ivory);
  transform: translateY(20px);
  opacity: 0;
  transition: all var(--dur-slow) var(--ease-out);
}
.mobile-menu.is-open .mobile-nav a {
  transform: translateY(0);
  opacity: 1;
}
.mobile-menu.is-open .mobile-nav a:nth-child(1) { transition-delay: 100ms; }
.mobile-menu.is-open .mobile-nav a:nth-child(2) { transition-delay: 160ms; }
.mobile-menu.is-open .mobile-nav a:nth-child(3) { transition-delay: 220ms; }
.mobile-menu.is-open .mobile-nav a:nth-child(4) { transition-delay: 280ms; }
.mobile-menu.is-open .mobile-nav a:nth-child(5) { transition-delay: 340ms; }
.mobile-menu.is-open .mobile-nav a:nth-child(6) { transition-delay: 400ms; }
.mobile-menu.is-open .mobile-nav a:nth-child(7) { transition-delay: 460ms; }
.mobile-nav .caption { display: block; margin-top: 28px; }

/* ============== HERO ============== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: var(--ivory);
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transform: scale(1.04);
  animation: slowZoom 24s ease-out forwards;
}
@keyframes slowZoom { to { transform: scale(1); } }
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,20,16,0.55) 0%, rgba(15,20,16,0.30) 40%, rgba(15,20,16,0.85) 100%);
  z-index: 1;
}
.hero-content {
  position: relative; z-index: 2;
  max-width: 1100px;
  padding: 0 24px;
}
.hero-content .caption { margin-bottom: 28px; }
.hero-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 8vw, 104px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ivory);
  margin-bottom: 36px;
  text-wrap: balance;
}
.hero-sub {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 56px;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}
.hero-scroll {
  position: absolute;
  bottom: 36px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  color: var(--accent);
}
.hero-scroll .caption { color: var(--accent); margin-bottom: 12px; }
.hero-scroll .arrow {
  display: inline-block;
  width: 1px;
  height: 36px;
  background: var(--accent);
  position: relative;
  animation: pulseLine 2.4s ease-in-out infinite;
}
.hero-scroll .arrow::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 50%;
  width: 7px; height: 7px;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  transform: translateX(-50%) rotate(45deg);
}
@keyframes pulseLine {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50%      { opacity: 1;   transform: scaleY(1.2); }
}
.hero-short { min-height: 62vh; }

/* ============== SECTIONS ============== */
.manifesto {
  background: var(--bg-primary);
  text-align: center;
  padding: 160px 24px;
}
.manifesto p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.25;
  color: var(--ivory);
  max-width: 1000px;
  margin: 0 auto;
}
.manifesto p + p {
  margin-top: 24px;
  color: var(--sand);
}

.section-head {
  margin-bottom: 72px;
  max-width: 720px;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .caption { margin-bottom: 18px; display: inline-flex; align-items: center; gap: 14px; }
.section-head .caption::before {
  content: '';
  display: inline-block;
  width: 32px; height: 1px;
  background: var(--accent);
}

/* Prestation cards --------------------------------------------- */
.prestations-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .prestations-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.prestation-card {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  cursor: pointer;
  display: block;
}
.prestation-card .bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 1.6s var(--ease-out);
}
.prestation-card:hover .bg { transform: scale(1.05); }
.prestation-card .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,20,16,0) 35%, rgba(15,20,16,0.92) 100%);
  transition: opacity var(--dur-base) var(--ease-out);
}
.prestation-card:hover .scrim {
  background: linear-gradient(180deg, rgba(15,20,16,0.15) 0%, rgba(15,20,16,0.95) 100%);
}
.prestation-card .body {
  position: absolute;
  left: 32px; right: 32px; bottom: 32px;
  z-index: 2;
  color: var(--ivory);
}
.prestation-card .body .caption { margin-bottom: 10px; color: var(--accent); }
.prestation-card .title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  margin-bottom: 10px;
}
.prestation-card .desc {
  font-size: 14px;
  color: var(--sand);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out), margin var(--dur-base) var(--ease-out);
}
.prestation-card:hover .desc {
  max-height: 100px;
  opacity: 1;
  margin: 12px 0 18px;
}
.prestation-card .more {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--accent); font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500;
  transition: gap var(--dur-fast) var(--ease-out);
}
.prestation-card:hover .more { gap: 16px; color: var(--accent-hover); }

/* Portfolio gallery -------------------------------------------- */
.gallery-masonry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .gallery-masonry { grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (min-width: 1024px) {
  .gallery-masonry {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 220px;
    gap: 18px;
  }
}
.gal {
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
  background: var(--bg-secondary);
}
.gal img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.gal:hover img { transform: scale(1.04); }
@media (min-width: 1024px) {
  .gal.tall { grid-row: span 2; }
  .gal.wide { grid-column: span 2; }
  .gal.big  { grid-column: span 2; grid-row: span 2; }
}
.gal-meta {
  position: absolute;
  left: 16px; bottom: 16px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ivory);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.gal:hover .gal-meta { opacity: 1; }

/* Signature section --------------------------------------------- */
.signature {
  background: var(--bg-secondary);
}
.signature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  align-items: center;
}
@media (min-width: 1024px) {
  .signature-grid { grid-template-columns: 1fr 1.05fr; gap: 96px; }
}
.signature ul.bullets {
  margin: 32px 0 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.signature ul.bullets li {
  display: flex; align-items: flex-start; gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  color: var(--sand);
}
.signature ul.bullets li::before {
  content: '';
  width: 6px; height: 6px; margin-top: 9px;
  background: var(--accent);
  flex-shrink: 0;
}

/* Site mockup (compact display) --------------------------------- */
.mockup-stack {
  position: relative;
  aspect-ratio: 5 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mockup-desktop {
  position: relative;
  width: 92%;
  background: #0a0a0a;
  border: 1px solid var(--border);
  padding: 14px 14px 0 14px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6);
}
.mockup-desktop .bar {
  display: flex; gap: 6px;
  padding-bottom: 12px;
}
.mockup-desktop .bar span {
  width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.15);
}
.mockup-desktop img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.mockup-mobile {
  position: absolute;
  right: -2%;
  bottom: -8%;
  width: 24%;
  border-radius: 18px;
  overflow: hidden;
  background: #0a0a0a;
  padding: 8px;
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px -10px rgba(0,0,0,0.7);
}
.mockup-mobile img { width: 100%; aspect-ratio: 9 / 18; object-fit: cover; border-radius: 10px; }

/* Stats --------------------------------------------------------- */
.stats {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (min-width: 768px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.stat {
  padding: 56px 32px;
  position: relative;
  text-align: center;
}
.stats-grid .stat + .stat::before {
  content: '';
  position: absolute;
  left: 0; top: 24px; bottom: 24px;
  width: 1px;
  background: var(--border);
}
@media (max-width: 767px) {
  .stats-grid .stat:nth-child(3)::before { display: none; }
  .stats-grid .stat:nth-child(odd)::before { display: none; }
  .stats-grid .stat:nth-child(n+3) { border-top: 1px solid var(--border); }
}
.stat .num-big {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(54px, 6vw, 84px);
  line-height: 1;
  color: var(--ivory);
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}
.stat .label {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 6px;
}
.stat .sub {
  font-size: 13px;
  color: var(--sand);
}

/* Testimonials carousel ----------------------------------------- */
.testimonials {
  background: var(--bg-primary);
  overflow: hidden;
}
.carousel {
  position: relative;
  overflow: hidden;
}
.carousel-track {
  display: flex;
  transition: transform 700ms var(--ease-out);
}
.testimonial {
  flex: 0 0 100%;
  padding: 0 16px;
}
.testimonial-inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  padding: 24px;
}
.testimonial blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.4;
  color: var(--ivory);
  margin-bottom: 36px;
  text-wrap: balance;
}
.testimonial blockquote::before {
  content: '“';
  font-size: 80px;
  line-height: 0.4;
  display: block;
  margin: 0 auto 24px;
  color: var(--accent);
  height: 30px;
}
.testimonial cite {
  display: block;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 8px;
}
.testimonial .meta {
  font-size: 13px;
  color: var(--sand);
  letter-spacing: 0.05em;
}
.carousel-dots {
  display: flex; justify-content: center; gap: 14px;
  margin-top: 56px;
}
.carousel-dots button {
  width: 28px; height: 1px;
  background: var(--border-strong);
  transition: all var(--dur-base) var(--ease-out);
  padding: 0;
}
.carousel-dots button.is-active {
  background: var(--accent);
  width: 56px;
}

/* Zones / map --------------------------------------------------- */
.zones-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  align-items: center;
}
@media (min-width: 1024px) {
  .zones-grid { grid-template-columns: 1.1fr 0.9fr; gap: 96px; }
}
.cities {
  columns: 2;
  column-gap: 32px;
}
@media (min-width: 640px) { .cities { columns: 3; } }
.cities li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--sand);
  break-inside: avoid;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cities li::before {
  content: '';
  width: 4px; height: 4px;
  background: var(--accent);
}

/* CTA bandeau --------------------------------------------------- */
.cta-band {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.cta-band .hero-bg { animation: none; transform: scale(1); }
.cta-band .hero-overlay {
  background: linear-gradient(180deg, rgba(15,20,16,0.6), rgba(15,20,16,0.85));
}
.cta-band .content {
  position: relative;
  z-index: 2;
  padding: 100px 24px;
}
.cta-band h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.1;
  margin-bottom: 24px;
}
.cta-band p {
  font-size: 16px;
  color: var(--sand);
  margin-bottom: 48px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Footer ------------------------------------------------------- */
.site-footer {
  background: var(--surface-deep);
  padding: 96px 0 36px;
  border-top: 1px solid var(--border);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  margin-bottom: 64px;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 80px; }
}
.footer-col h4 {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 24px;
}
.footer-col p, .footer-col li, .footer-col a {
  font-size: 14px;
  color: var(--sand);
  line-height: 1.8;
}
.footer-col a { transition: color var(--dur-fast) var(--ease-out); }
.footer-col a:hover { color: var(--accent); }
.footer-col .brand .wordmark { height: 16px; margin-bottom: 24px; }
.footer-divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 28px;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--taupe);
}
.footer-bottom .legal a {
  color: var(--taupe);
  margin-left: 16px;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-bottom .legal a:hover { color: var(--sand); }
.footer-credit {
  font-size: 10px;
  color: rgba(245, 242, 236, 0.2);
  margin-top: 18px;
  text-align: center;
  width: 100%;
}
.footer-credit a {
  color: rgba(245, 242, 236, 0.3);
  text-decoration: underline;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-credit a:hover { color: var(--accent); }

/* Reveal on scroll — visible by default for environments without IntersectionObserver. */
.reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Lightbox ----------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(10, 14, 11, 0.96);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: min(1400px, 92vw);
  max-height: 86vh;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  color: var(--accent);
  padding: 18px;
  font-family: var(--font-display);
  font-size: 32px;
  transition: color var(--dur-fast) var(--ease-out);
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { color: var(--accent-hover); }
.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev  { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-meta {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand);
}

/* Forms -------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
@media (min-width: 640px) {
  .form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
}
.field {
  position: relative;
  padding-top: 20px;
}
.field label {
  position: absolute;
  top: 24px; left: 0;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--taupe);
  pointer-events: none;
  transition: all var(--dur-base) var(--ease-out);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 0;
  font-size: 16px;
  color: var(--ivory);
  background: transparent;
  border-bottom: 1px solid var(--border);
  transition: border-color var(--dur-base) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 120px; }
.field select { appearance: none; padding-right: 24px; cursor: pointer; }
.field .arrow-down {
  position: absolute; right: 0; bottom: 18px;
  color: var(--accent);
  pointer-events: none;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  top: 0;
  font-size: 10px;
  color: var(--accent);
}

/* Tarifs / forfaits -------------------------------------------- */
.forfaits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .forfaits { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
.forfait {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  transition: all var(--dur-base) var(--ease-out);
}
.forfait:hover { border-color: var(--border-strong); }
.forfait.featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(201,168,106,0.06) 0%, rgba(28,38,32,1) 100%);
  transform: translateY(-12px);
}
.forfait .ribbon {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  font-weight: 500;
}
.forfait .name {
  font-family: var(--font-display);
  font-size: 32px;
  margin-bottom: 8px;
}
.forfait .intent {
  color: var(--sand);
  font-size: 14px;
  margin-bottom: 28px;
  min-height: 42px;
}
.forfait .price {
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--ivory);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.forfait .price small {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 8px;
}
.forfait .includes {
  margin: 36px 0;
  flex: 1;
}
.forfait .includes li {
  font-size: 14px;
  color: var(--sand);
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.forfait .includes li::before {
  content: '+';
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

/* Generic 2-col content blocks --------------------------------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}
@media (min-width: 1024px) {
  .two-col { grid-template-columns: 1fr 1fr; gap: 96px; }
  .two-col.reverse { direction: rtl; }
  .two-col.reverse > * { direction: ltr; }
}
.two-col img,
.two-col .img-block {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  background-size: cover;
  background-position: center;
}

/* Values cards ------------------------------------------------- */
.value-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .value-grid { grid-template-columns: repeat(3, 1fr); }
}
.value-card {
  border: 1px solid var(--border);
  padding: 48px 32px;
  background: var(--bg-secondary);
  transition: all var(--dur-base) var(--ease-out);
}
.value-card:hover { border-color: var(--border-strong); }
.value-card .num-small {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: 18px;
}
.value-card h3 {
  font-family: var(--font-display);
  font-size: 28px;
  margin-bottom: 14px;
}
.value-card p { color: var(--sand); font-size: 15px; line-height: 1.7; }

/* Page heading ------------------------------------------------- */
.page-head {
  padding: 200px 0 80px;
  text-align: center;
}
.page-head h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(44px, 7vw, 88px);
  line-height: 1.1;
  margin-bottom: 24px;
}
.page-head p { max-width: 560px; margin: 0 auto; color: var(--sand); }

/* Filters (portfolio) ------------------------------------------ */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 64px;
}
.filter-btn {
  padding: 10px 22px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--sand);
  border: 1px solid var(--border);
  transition: all var(--dur-fast) var(--ease-out);
}
.filter-btn:hover { color: var(--accent); border-color: var(--border-strong); }
.filter-btn.is-active {
  background: var(--accent);
  color: var(--bg-primary);
  border-color: var(--accent);
}

/* Numbered steps ----------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
}
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, 1fr); border-top: 0; }
}
.step {
  padding: 56px 32px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
@media (min-width: 1024px) {
  .step { border-bottom: 0; border-right: 1px solid var(--border); }
  .step:last-child { border-right: 0; }
}
.step .step-num {
  font-family: var(--font-display);
  font-size: 56px;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 24px;
  font-variant-numeric: tabular-nums;
}
.step h3 {
  font-family: var(--font-display);
  font-size: 22px;
  margin-bottom: 12px;
  color: var(--ivory);
}
.step p { font-size: 14px; color: var(--sand); }

/* FAQ ---------------------------------------------------------- */
.faq {
  max-width: 860px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item summary {
  cursor: pointer;
  padding: 32px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--ivory);
  transition: color var(--dur-fast) var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 28px;
  color: var(--accent);
  transition: transform var(--dur-base) var(--ease-out);
  font-family: var(--font-body);
  font-weight: 300;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--accent); }
.faq-item .answer {
  padding: 0 0 32px;
  color: var(--sand);
  font-size: 15px;
  line-height: 1.8;
  max-width: 720px;
}

/* Options grid (tarifs) ---------------------------------------- */
.options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 768px) { .options-grid { grid-template-columns: repeat(3, 1fr); } }
.option-card {
  padding: 40px 32px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}
.option-card .opt-cat {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.option-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  margin-bottom: 12px;
}
.option-card p { font-size: 14px; color: var(--sand); margin-bottom: 20px; }
.option-card .price-tag {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--ivory);
  font-variant-numeric: tabular-nums;
}
.option-card .price-tag small {
  font-size: 11px;
  color: var(--taupe);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: var(--font-body);
  display: block;
}

/* Mini-site example mockups (experience-apres) ----------------- */
.mini-sites {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) { .mini-sites { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.mini-site {
  background: #0a0a0a;
  padding: 14px 14px 0;
  border: 1px solid var(--border);
}
.mini-site .bar { display: flex; gap: 5px; padding-bottom: 10px; }
.mini-site .bar span { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.12); }
.mini-site img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.mini-site .cap {
  padding: 14px 4px 18px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand);
  text-align: center;
}

/* Map / SVG container ------------------------------------------ */
.map-wrap {
  position: relative;
  border: 1px solid var(--border);
  padding: 32px;
  background: rgba(15, 20, 16, 0.6);
}
.map-wrap svg { width: 100%; height: auto; }

/* Specs (equipement) ------------------------------------------- */
.specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
}
@media (min-width: 768px) { .specs { grid-template-columns: 1fr 1fr; } }
.spec {
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}
@media (min-width: 768px) {
  .spec:nth-child(odd) { padding-right: 36px; border-right: 1px solid var(--border); }
  .spec:nth-child(even) { padding-left: 36px; }
}
.spec .spec-label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
}
.spec .spec-value {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ivory);
  text-align: right;
}

/* Contact page ------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 80px;
}
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 1.3fr 0.7fr; gap: 120px; }
}
.contact-info dt {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  margin-top: 28px;
}
.contact-info dt:first-child { margin-top: 0; }
.contact-info dd {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ivory);
}
.contact-info dd.small {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--sand);
}

/* Accessibility focus ----------------------------------------- */
:focus-visible {
  outline: 1.5px solid var(--accent);
  outline-offset: 4px;
}

/* =========================================================
   V2 — Loading screen, full-screen menu, tour layout
   Adds Anton (monumental sans) + Permanent Marker (tag)
   ========================================================= */

:root {
  --font-mono-block: 'Anton', 'Bebas Neue', 'Impact', sans-serif;
  --font-tag:        'Permanent Marker', 'Bradley Hand', cursive;
}

/* ====== Loading screen ====== */
.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 28px;
}
.loader.is-hidden {
  pointer-events: none;
  animation: loaderOut 900ms var(--ease-out) forwards;
}
@keyframes loaderOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.loader-tag {
  font-family: var(--font-tag);
  font-size: clamp(72px, 18vw, 240px);
  line-height: 0.85;
  color: var(--ivory);
  letter-spacing: -0.02em;
  text-align: center;
  position: relative;
  text-wrap: balance;
}
.loader-tag .l-line {
  display: block;
  overflow: hidden;
}
.loader-tag .l-line span {
  display: inline-block;
}
.loader-tag .l-line:nth-child(2) span { color: var(--accent); }

.loader-meta {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--taupe);
}
.loader-bar {
  width: 240px;
  height: 1px;
  background: var(--accent);
  position: relative;
  overflow: hidden;
}

/* hide page until loader done */
body.is-loading { overflow: hidden; }

/* ====== New header (V2) ====== */
.site-header.v2 .nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.site-header.v2 .nav-left,
.site-header.v2 .nav-right {
  display: flex;
  align-items: center;
  gap: 24px;
}
.site-header.v2 .nav-right { justify-content: flex-end; }
.site-header.v2 .nav-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.header-meta {
  display: none;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .header-meta { display: inline-flex; align-items: center; gap: 8px; } }
.header-meta .dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 999px;
  display: inline-block;
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.header-mail {
  display: none;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out);
}
.header-mail:hover { color: var(--accent); }
@media (min-width: 1024px) { .header-mail { display: inline-flex; } }

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ivory);
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.menu-btn::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--accent);
  display: inline-block;
}
.menu-btn:hover { color: var(--accent); }
.menu-btn:hover::before { width: 36px; transition: width var(--dur-base) var(--ease-out); }
.menu-btn .icon {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}
.menu-btn .icon span {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
}

/* "Personnaliser" button in header — opens the tweaks panel.
   Hidden by default. Shown only in admin mode (body.is-admin),
   activated via ?admin URL param or localStorage flag. */
.tweak-btn { display: none; }
body.is-admin .tweak-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-right: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
body.is-admin .tweak-btn::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
body.is-admin .tweak-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
@media (max-width: 768px) {
  body.is-admin .tweak-btn { display: none; }
}

.site-header.v2 .brand .wordmark { height: 14px; }

/* ====== Full-screen menu overlay (V2) ====== */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--bg-primary);
  display: none;
  flex-direction: column;
  overflow-y: auto;
}
.menu-overlay.is-open {
  display: flex;
}
.menu-overlay .menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 32px;
  border-bottom: 1px solid var(--border);
}
.menu-overlay .menu-top .brand .wordmark { height: 14px; }
.menu-close {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
}
.menu-close .x {
  display: inline-block;
  font-size: 22px;
  line-height: 1;
  font-family: var(--font-display);
  transition: transform var(--dur-base) var(--ease-out);
}
.menu-close:hover .x { transform: rotate(90deg); }

.menu-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  padding: 56px 32px 0;
  gap: 48px;
  overflow-y: auto;
}
@media (min-width: 1024px) {
  .menu-body {
    grid-template-columns: 1.4fr 0.6fr;
    padding: 80px 56px 0;
    gap: 80px;
    overflow: visible;
  }
}
.menu-groups {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.menu-group .menu-cat {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.menu-group .menu-cat::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--accent);
}
.menu-items {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
}
.menu-items a {
  font-family: var(--font-mono-block);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 80px);
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--ivory);
  text-transform: uppercase;
  position: relative;
  padding: 4px 0;
  transition: color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  display: inline-block;
}
.menu-items a:hover {
  color: var(--accent);
  transform: translateX(8px);
}
.menu-items a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transition: right var(--dur-base) var(--ease-out);
}
.menu-items a:hover::after { right: 0; }

.menu-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 32px;
}
.menu-side .sub {
  display: block;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 14px;
}
.menu-side h4 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--ivory);
  margin-bottom: 18px;
  font-weight: 400;
}
.menu-side p, .menu-side a {
  font-size: 14px;
  color: var(--sand);
  line-height: 1.7;
}
.menu-side a { transition: color var(--dur-fast) var(--ease-out); }
.menu-side a:hover { color: var(--accent); }
.menu-side hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 24px 0;
}

.menu-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 32px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
}
.menu-foot a { color: var(--taupe); transition: color var(--dur-fast) var(--ease-out); }
.menu-foot a:hover { color: var(--accent); }

/* Stagger animations on open — disabled in preview iframes that throttle animations.
   Items appear immediately for reliability. */

/* ====== Monumental display class (use for hero/section titles) ====== */
.mono-h {
  font-family: var(--font-mono-block);
  font-weight: 400;
  font-size: clamp(72px, 14vw, 200px);
  line-height: 0.88;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ivory);
  text-wrap: balance;
}
.mono-h .accent { color: var(--accent); }
.mono-h .italic-soft {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.02em;
}

/* ====== Tour / event page layout ====== */
.tour {
  padding-top: 120px;  /* clear fixed header */
  background: var(--bg-primary);
}
.tour-head {
  padding: 80px 32px 56px;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 1024px) {
  .tour-head { padding: 80px 56px 56px; }
}
.tour-meta-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 28px;
  margin-bottom: 32px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--taupe);
  font-weight: 500;
}
.tour-meta-top .breadcrumb-sep { color: var(--accent); }
.tour-head h1 {
  font-family: var(--font-mono-block);
  font-weight: 400;
  font-size: clamp(54px, 10vw, 160px);
  line-height: 0.9;
  letter-spacing: 0.005em;
  color: var(--ivory);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.tour-head h1 .accent { color: var(--accent); }
.tour-head h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--sand);
  margin-bottom: 0;
}

.tour-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  padding: 64px 32px;
}
@media (min-width: 1024px) {
  .tour-body {
    grid-template-columns: 280px 1fr;
    gap: 80px;
    padding: 80px 56px;
  }
}
.tour-aside {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (min-width: 1024px) {
  .tour-aside {
    position: sticky;
    top: 120px;
    align-self: start;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }
}
.tour-aside .field-block {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.tour-aside .field-block:last-child { border-bottom: 0; }
.tour-aside .field-label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 12px;
}
.tour-aside .field-value {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  color: var(--ivory);
  font-weight: 400;
  line-height: 1.3;
}
.tour-aside .field-value.body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--sand);
  line-height: 1.75;
}
.tour-aside .field-value.body p + p { margin-top: 12px; }

.tour-images {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tour-images img,
.tour-images .pair {
  width: 100%;
  display: block;
}
.tour-images figure {
  margin: 0;
  position: relative;
  background: var(--bg-secondary);
}
.tour-images figure img {
  width: 100%;
  height: auto;
}
.tour-images figcaption {
  position: absolute;
  bottom: 12px; left: 16px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory);
  background: rgba(15,20,16,0.75);
  padding: 6px 12px;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.tour-images figure:hover figcaption { opacity: 1; }
.tour-images .pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tour-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.tour-nav a {
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: background var(--dur-base) var(--ease-out);
}
.tour-nav a:hover { background: var(--bg-secondary); }
.tour-nav a + a { border-left: 1px solid var(--border); }
.tour-nav a:nth-child(2) { text-align: right; align-items: flex-end; }
.tour-nav .tn-label {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
}
.tour-nav .tn-title {
  font-family: var(--font-mono-block);
  font-size: clamp(28px, 4vw, 48px);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--ivory);
  transition: color var(--dur-fast) var(--ease-out);
}
.tour-nav a:hover .tn-title { color: var(--accent); }

/* ====== Portfolio = Événements grid (V2) ====== */
.events-head {
  padding: 200px 32px 64px;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 1024px) { .events-head { padding: 200px 56px 80px; } }
.events-head .lab {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 28px;
}
.events-head h1 {
  font-family: var(--font-mono-block);
  font-weight: 400;
  font-size: clamp(64px, 13vw, 200px);
  line-height: 0.88;
  letter-spacing: 0.005em;
  color: var(--ivory);
  text-transform: uppercase;
  margin: 0;
}
.events-head .sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--sand);
  margin-top: 24px;
  max-width: 720px;
}

.events-cats {
  padding: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 1024px) { .events-cats { padding: 32px 56px; } }
.events-cats .lab2 {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--taupe);
  font-weight: 500;
}
.events-cats button {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--sand);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.events-cats button:hover { color: var(--ivory); }
.events-cats button.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.events-list {
  padding: 0;
}
.event-row {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: background var(--dur-base) var(--ease-out);
}
@media (min-width: 768px) {
  .event-row { grid-template-columns: 1fr 1fr; }
  .event-row:nth-child(even) > .event-info { order: 2; }
}
@media (min-width: 1024px) {
  .event-row { grid-template-columns: 1.2fr 0.8fr; }
}
.event-row:hover { background: var(--bg-secondary); }
.event-info {
  padding: 56px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
@media (min-width: 1024px) { .event-info { padding: 80px 56px; } }
.event-info .num {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.event-info h3 {
  font-family: var(--font-mono-block);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ivory);
  transition: color var(--dur-base) var(--ease-out);
}
.event-row:hover .event-info h3 { color: var(--accent); }
.event-info .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 500;
  margin-top: 4px;
}
.event-info .meta span:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--accent);
  margin-left: 18px;
  vertical-align: middle;
}
.event-info .more {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  transition: gap var(--dur-fast) var(--ease-out);
}
.event-row:hover .event-info .more { gap: 22px; }
.event-img {
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3;
  background: var(--bg-secondary);
}
@media (min-width: 1024px) { .event-img { aspect-ratio: auto; min-height: 480px; } }
.event-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-out), filter var(--dur-base) var(--ease-out);
  filter: brightness(0.85);
}
.event-row:hover .event-img img {
  transform: scale(1.06);
  filter: brightness(1);
}

/* ====== Reworked hero (V2) — uses big mono type ====== */
.hero.v2 .hero-tagline {
  font-family: var(--font-mono-block);
  font-weight: 400;
  font-size: clamp(56px, 13vw, 200px);
  line-height: 0.88;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero.v2 .hero-tagline em {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: none;
  font-size: 0.75em;
  letter-spacing: -0.01em;
  color: var(--sand);
}
.hero.v2 .hero-tagline .accent { color: var(--accent); }
.hero.v2 .hero-tagline .tag {
  font-family: var(--font-tag);
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 0.85em;
  color: var(--accent);
  font-weight: 400;
}

/* ====== Marquee strip (use between sections) ====== */
.marquee {
  background: var(--accent);
  color: var(--bg-primary);
  overflow: hidden;
  padding: 18px 0;
  border-top: 1px solid var(--bg-primary);
  border-bottom: 1px solid var(--bg-primary);
}
.marquee-track {
  display: flex;
  gap: 64px;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  font-family: var(--font-mono-block);
  font-size: clamp(24px, 4vw, 48px);
  text-transform: uppercase;
  line-height: 1;
}
.marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 32px;
}
.marquee-track span::after {
  content: '✦';
  font-family: var(--font-display);
  font-size: 0.7em;
  color: var(--bg-primary);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Misc utilities ----------------------------------------------- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.center { text-align: center; }
.gap-sm { gap: 16px; }
.mt-sm { margin-top: 16px; }
.mt-md { margin-top: 32px; }
.mt-lg { margin-top: 64px; }
.mb-sm { margin-bottom: 16px; }
.mb-md { margin-bottom: 32px; }
.mb-lg { margin-bottom: 64px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-prose { max-width: 720px; }
.max-content { max-width: 920px; }

/* =========================================================
   V3 — Monochrome refresh
   • drops gold/brass accents entirely
   • new hand-painted "Carla Salva" wordmark
   • solid header, no overlap
   • homepage = pure photo wall (no marketing copy)
   ========================================================= */

:root {
  /* Override palette → monochrome warm */
  --accent:        #EFE7DA;   /* warm off-white (replaces brass gold) */
  --accent-hover:  #FFFFFF;
  --accent-soft:   rgba(239, 231, 218, 0.06);
  --border:        rgba(239, 231, 218, 0.10);
  --border-strong: rgba(239, 231, 218, 0.22);
  --sand:          #B8AC9B;
  --taupe:         #6F665C;
}

/* Body padding to clear fixed header on every page (no overlap) */
body { padding-top: 64px; }

/* Solid header (always opaque) ---------------------------------- */
.site-header,
.site-header.v2,
.site-header.is-scrolled {
  position: fixed;
  background: rgba(10, 14, 11, 0.92);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  transition: none;
}
.site-header .nav { gap: 16px; }
.site-header.v2 .nav-left,
.site-header.v2 .nav-right {
  gap: 18px;
}
.header-meta,
.header-mail,
.menu-btn,
.site-header.v2 .nav-center .header-meta {
  font-family: var(--font-body);
  color: var(--sand);
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 500;
}
.header-meta .dot { background: var(--accent); }
.header-mail:hover,
.menu-btn:hover { color: var(--accent); }
.menu-btn::before { background: var(--accent); }

/* New brand wordmark — handwritten tag --------------------------- */
.brand img.wordmark { display: none; }   /* hide old SVG wordmark everywhere */
.brand-tag {
  font-family: 'Permanent Marker', cursive;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ivory);
  line-height: 1;
  display: inline-block;
  transform: rotate(-2deg);
  transition: color var(--dur-fast) var(--ease-out);
  user-select: none;
}
.brand-tag:hover { color: var(--accent); }
.menu-overlay .menu-top .brand-tag { font-size: 30px; }
.loader-tag { font-family: 'Permanent Marker', cursive; }

/* Hero on home — remove the gigantic overlay; keep only soft caption ------ */
.hero.v3 {
  min-height: calc(100vh - 64px);
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0;
  text-align: left;
  background: var(--bg-primary);
}
.hero.v3 .hero-bg {
  background-size: cover;
  background-position: center;
  filter: brightness(0.85) contrast(1.05);
  transform: scale(1);
  animation: none;
}
.hero.v3 .hero-overlay {
  background: linear-gradient(180deg, rgba(15,20,16,0) 60%, rgba(15,20,16,0.85) 100%);
}
.hero.v3 .hero-foot {
  position: relative; z-index: 2;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 40px 32px;
  gap: 32px;
  color: var(--ivory);
}
@media (min-width: 1024px) { .hero.v3 .hero-foot { padding: 56px 56px; } }
.hero.v3 .hero-foot .label {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 500;
}
.hero.v3 .hero-foot .place {
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(40px, 6vw, 84px);
  color: var(--ivory);
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.hero.v3 .hero-foot .meta-right {
  text-align: right;
  display: flex; flex-direction: column; gap: 6px;
}

/* Home — photo wall grid (the main canvas) ----------------------- */
.photo-wall {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 2px;
  background: var(--bg-primary);
}
@media (min-width: 640px)  { .photo-wall { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .photo-wall { grid-template-columns: repeat(3, 1fr); } }
.pw-cell {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg-secondary);
  cursor: pointer;
}
.pw-cell.wide   { aspect-ratio: 16 / 9; }
@media (min-width: 1024px) {
  .pw-cell.wide   { grid-column: span 2; aspect-ratio: 16 / 10; }
  .pw-cell.tall   { grid-row:    span 2; aspect-ratio: 4 / 7; }
  .pw-cell.square { aspect-ratio: 1 / 1; }
}
.pw-cell img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.05) brightness(0.92);
  transition: filter var(--dur-base) var(--ease-out), transform 1.6s var(--ease-out);
}
.pw-cell:hover img { filter: grayscale(0) brightness(1.04); transform: scale(1.03); }
.pw-cell .pw-meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 20px;
  font-family: 'Permanent Marker', cursive;
  font-size: 18px;
  color: var(--ivory);
  background: linear-gradient(180deg, rgba(15,20,16,0) 0%, rgba(15,20,16,0.85) 100%);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  pointer-events: none;
}
.pw-cell:hover .pw-meta { opacity: 1; }

/* Home strip — small intro band beneath photo wall --------------- */
.home-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 80px 32px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
  align-items: center;
}
@media (min-width: 1024px) {
  .home-strip { grid-template-columns: 1fr auto 1fr; padding: 100px 56px; }
}
.home-strip .left {
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 0.95;
  color: var(--ivory);
}
.home-strip .right {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.8;
  color: var(--sand);
  max-width: 460px;
  justify-self: end;
}
.home-strip .sep {
  width: 1px; height: 80px;
  background: var(--border);
  justify-self: center;
}
@media (max-width: 1023px) { .home-strip .sep { display: none; } }

/* Drop EB Garamond italic where it feels too "wedding" ---------- */
.hero-tagline,
.h1, .h2, .h3,
.cta-band h2,
.manifesto p {
  font-family: var(--font-mono-block);
  font-weight: 400;
  text-transform: uppercase;
  font-style: normal;
  letter-spacing: 0.005em;
}
.manifesto p { line-height: 1.05; font-size: clamp(40px, 7vw, 96px); }
.manifesto p em { font-style: normal; }
.manifesto p em::before, .manifesto p em::after { content: ''; }
.faq-item summary { font-family: var(--font-mono-block); text-transform: uppercase; letter-spacing: 0.005em; font-size: clamp(18px, 2vw, 22px); }
.lede { font-family: var(--font-body); font-style: normal; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.7; color: var(--sand); }
.testimonial blockquote { font-family: var(--font-display); font-style: italic; }  /* keep italic for quotes only */

/* Buttons — monochrome */
.btn-primary {
  background: var(--accent);
  color: var(--bg-primary);
}
.btn-primary:hover {
  background: var(--accent-hover);
  color: var(--bg-primary);
}
.btn-outline { color: var(--ivory); border-color: var(--accent); }
.btn-outline:hover { color: var(--accent); background: transparent; border-color: var(--accent-hover); }
.btn-ghost { color: var(--ivory); border-bottom-color: var(--accent); }
.btn-ghost:hover { color: var(--accent); }
.btn-nav { border-color: var(--accent); color: var(--ivory); }
.btn-nav:hover { color: var(--accent); }

/* Captions — drop the gold colour for a softer treatment */
.caption { color: var(--sand); }
.section-head .caption::before { background: var(--sand); }
.events-head .lab { color: var(--sand); }
.events-cats button.is-active { color: var(--ivory); border-bottom-color: var(--ivory); }
.events-cats .lab2 { color: var(--taupe); }
.event-info .num,
.event-info .more { color: var(--sand); }
.event-row:hover .event-info h3 { color: var(--ivory); }
.tour-aside .field-label { color: var(--sand); }
.tour-meta-top .breadcrumb-sep { color: var(--sand); }
.tour-nav .tn-label { color: var(--sand); }
.menu-cat { color: var(--sand) !important; }
.menu-cat::before { background: var(--sand) !important; }
.menu-side .sub { color: var(--sand); }
.footer-col h4 { color: var(--sand); }

/* Forfait featured ribbon → drop the gold bg gradient */
.forfait.featured {
  background: var(--bg-secondary);
  border-color: var(--accent);
}
.forfait.featured .ribbon { color: var(--accent); }
.forfait .includes li::before { color: var(--accent); }

/* Marquee strip — monochrome (replaces the gold band) ----------- */
.marquee {
  background: var(--bg-primary);
  color: var(--ivory);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
}
.marquee-track {
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -0.01em;
  text-transform: none;
}
.marquee-track span::after {
  content: '✺';
  font-family: var(--font-body);
  color: var(--sand);
}

/* Page heads — kill the italic, embrace Anton */
.page-head {
  padding: 110px 0 80px;
  text-align: left;
  padding-left: 32px;
  padding-right: 32px;
}
@media (min-width: 1024px) { .page-head { padding: 130px 56px 80px; } }
.page-head h1 {
  font-family: var(--font-mono-block);
  font-style: normal;
  font-size: clamp(56px, 12vw, 180px);
  line-height: 0.9;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 18px;
  text-align: left;
}
.page-head p { color: var(--sand); text-align: left; margin: 0; max-width: 620px; }

/* Events head + tour head — adjust for new header padding */
.events-head { padding: 110px 32px 56px; }
@media (min-width: 1024px) { .events-head { padding: 120px 56px 80px; } }
.tour { padding-top: 0; }
.tour-head { padding-top: 80px; }

/* Hero scroll arrow — drop the pulse animation visibility */
.hero-scroll .arrow { background: var(--sand); }
.hero-scroll .arrow::after { border-color: var(--sand); }
.hero-scroll .caption { color: var(--sand); }

/* Loader bar → soft */
.loader-bar { background: var(--accent); }

/* Footer credit accent → muted */
.footer-credit a:hover { color: var(--accent); }

/* =========================================================
   V4 — Menu refonte (siemprericc-style single horizontal row)
   + Light/Dark toggle
   + Horizontal scroll event pages
   ========================================================= */

/* Light mode token overrides (toggled via html.light) */
html.light {
  --bg-primary:   #F2EEE5;
  --bg-secondary: #E8E2D4;
  --surface-deep: #FFFFFF;
  --ivory:        #0F1410;
  --sand:         #4A4239;
  --taupe:        #8A8076;
  --accent:       #0F1410;
  --accent-hover: #2A3D33;
  --accent-soft:  rgba(15, 20, 16, 0.05);
  --border:       rgba(15, 20, 16, 0.10);
  --border-strong: rgba(15, 20, 16, 0.22);
}
html.light body { background: var(--bg-primary); color: var(--ivory); }
html.light .site-header,
html.light .menu-overlay,
html.light .loader,
html.light .site-footer {
  background: rgba(242, 238, 229, 0.92);
  color: var(--ivory);
}
html.light .loader { background: var(--bg-primary); }
html.light .hero-overlay {
  background: linear-gradient(180deg, rgba(242,238,229,0) 60%, rgba(242,238,229,0.6) 100%);
}
html.light .photo-wall,
html.light .home-strip,
html.light .events-list,
html.light .tour,
html.light .tour-head {
  background: var(--bg-primary);
}
html.light .btn-primary { background: var(--accent); color: var(--bg-primary); }

/* ====== Header — refresh to match siemprericc exactly ====== */
.site-header.v2 .nav {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 28px;
  align-items: center;
}
@media (max-width: 1023px) {
  .site-header.v2 .nav { grid-template-columns: auto auto auto; }
  .site-header .header-meta:not(.time),
  .site-header .header-mail { display: none; }
}
.site-header.v2 .nav-left,
.site-header.v2 .nav-center,
.site-header.v2 .nav-right {
  display: contents;  /* let grid handle layout */
}
.site-header .brand { justify-self: start; }
.site-header .header-meta.time { justify-self: start; }
.site-header .theme-switch { justify-self: center; }
.site-header .header-mail { justify-self: end; }
.site-header .menu-btn,
.site-header .menu-close-x { justify-self: end; }

/* Theme switch — "LIGHT | DARK" */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  font-family: var(--font-body);
  color: var(--taupe);
}
.theme-switch .opt {
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.theme-switch .opt:hover { color: var(--ivory); }
.theme-switch .opt.is-active { color: var(--ivory); font-weight: 600; }
.theme-switch .sep { color: var(--taupe); }
@media (max-width: 767px) { .theme-switch { display: none; } }

/* ====== New menu-btn / close-x — circle with dot ====== */
.menu-btn,
.menu-close-x {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 12px;
  letter-spacing: 0.28em;
  font-weight: 500;
  text-transform: uppercase;
  font-family: var(--font-body);
  color: var(--ivory);
  cursor: pointer;
  background: none;
  border: none;
}
.menu-btn::before,
.menu-close-x::before {
  display: none;  /* override v2 line styling */
}
.menu-btn .icon,
.menu-close-x .icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid currentColor;
  border-radius: 50%;
  position: relative;
}
.menu-btn .icon::after,
.menu-close-x .icon::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent);
  transform-origin: center;
}
.menu-close-x .icon::after { background: currentColor; }
.menu-btn:hover,
.menu-close-x:hover { color: var(--accent); }
.menu-btn:hover .icon::after { transform: scale(1.4); transition: transform var(--dur-fast) var(--ease-out); }
.menu-btn .icon span { display: none; }  /* remove the old hamburger lines */

/* ====== Menu overlay — center single horizontal row ====== */
.menu-overlay {
  display: none;
  flex-direction: column;
  padding: 0;
  background: var(--bg-primary);
  /* full screen including under header */
}
.menu-overlay.is-open { display: flex; }

/* Replace the menu top bar so it matches the regular header layout */
.menu-overlay .menu-top {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 28px;
  align-items: center;
  padding: 22px 32px;
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 2;
}
.menu-overlay .menu-top .brand-tag { font-size: 30px; }
.menu-overlay .menu-top .header-meta,
.menu-overlay .menu-top .header-mail {
  display: inline-flex !important;
}

/* Centre big row */
.menu-overlay .menu-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 32px;
  gap: 0;
  /* override v2 grid */
  grid-template-columns: none;
}
.menu-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 32px;
  text-align: center;
}
.menu-row .menu-item {
  font-family: var(--font-body);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ivory);
  background: none;
  border: 0;
  padding: 14px 8px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), letter-spacing var(--dur-fast) var(--ease-out);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.menu-row .menu-item .plus {
  display: inline-block;
  font-weight: 400;
  font-size: 0.85em;
  transition: transform var(--dur-base) var(--ease-out);
  margin-left: 2px;
}
.menu-row .menu-item:hover { color: var(--accent); letter-spacing: 0.08em; }
.menu-row .menu-item.is-active .plus { transform: rotate(45deg); }

/* Sub-items area — appears below the row when an item is expanded */
.menu-sub-wrap {
  margin-top: 36px;
  min-height: 120px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}
.menu-sub {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 24px;
  max-width: 1100px;
  text-align: center;
}
.menu-sub.is-open { display: flex; }
.menu-sub a {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--sand);
  padding: 8px 4px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.menu-sub a:hover {
  color: var(--ivory);
  border-bottom-color: var(--accent);
}
.menu-sub a.lead {
  font-family: var(--font-mono-block);
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ivory);
  padding: 8px 12px;
}
.menu-sub a.lead:hover { color: var(--accent); border-bottom-color: transparent; }

/* Hide the legacy menu side panel */
.menu-overlay .menu-side,
.menu-overlay .menu-groups { display: none; }

/* Bottom bar — legal | socials | copyright */
.menu-overlay .menu-foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 22px 32px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  background: var(--bg-primary);
}
.menu-overlay .menu-foot .legal { justify-self: start; }
.menu-overlay .menu-foot .socials {
  justify-self: center;
  display: inline-flex;
  gap: 18px;
  font-family: var(--font-body);
  letter-spacing: 0.04em;
  font-weight: 600;
  font-size: 14px;
  text-transform: none;
}
.menu-overlay .menu-foot .socials a {
  color: var(--ivory);
  transition: color var(--dur-fast) var(--ease-out);
}
.menu-overlay .menu-foot .socials a:hover { color: var(--accent); }
.menu-overlay .menu-foot .copy { justify-self: end; color: var(--taupe); }
.menu-overlay .menu-foot a { color: inherit; }
.menu-overlay .menu-foot a:hover { color: var(--accent); }

/* ====== Tour page — horizontal scroll layout ====== */
.tour.h-scroll {
  display: grid;
  grid-template-columns: 320px 1fr;
  grid-template-rows: 1fr auto;
  height: calc(100vh - 64px);
  padding: 0;
  overflow: hidden;
  background: var(--bg-primary);
}
@media (max-width: 1023px) {
  .tour.h-scroll {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    height: auto;
  }
}
.tour.h-scroll .tour-aside-h {
  grid-row: 1;
  grid-column: 1;
  padding: 56px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
@media (max-width: 1023px) {
  .tour.h-scroll .tour-aside-h { border-right: 0; border-bottom: 1px solid var(--border); padding: 80px 24px 32px; }
}
.tour.h-scroll .tour-aside-h .top h1 {
  font-family: var(--font-mono-block);
  font-weight: 400;
  font-size: clamp(40px, 4vw, 60px);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 14px;
}
.tour.h-scroll .tour-aside-h .top .subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--sand);
}
.tour.h-scroll .tour-aside-h .bot { display: flex; flex-direction: column; gap: 24px; }
.tour.h-scroll .tour-aside-h .field-block { border-bottom: 0; padding: 0; }
.tour.h-scroll .tour-aside-h .field-block .field-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 500;
  margin-bottom: 8px;
}
.tour.h-scroll .tour-aside-h .field-block .field-value {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ivory);
  line-height: 1.6;
  font-weight: 400;
}
.tour.h-scroll .tour-aside-h .field-block.year .field-value {
  font-family: var(--font-mono-block);
  font-size: 22px;
  letter-spacing: 0.005em;
}

/* Photo strip — horizontal scrolling track */
.tour.h-scroll .tour-strip {
  grid-row: 1;
  grid-column: 2;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 32px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
@media (max-width: 1023px) {
  .tour.h-scroll .tour-strip { grid-column: 1; grid-row: 2; padding: 24px; }
}
.tour.h-scroll .tour-strip::-webkit-scrollbar { height: 6px; }
.tour.h-scroll .tour-strip::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.tour.h-scroll .tour-strip::-webkit-scrollbar-track { background: transparent; }
.tour-strip-track {
  display: flex;
  gap: 24px;
  align-items: center;
  height: 100%;
  padding-right: 240px; /* breathing room at end so last frame doesn't crash into edge */
}
.tour-strip-track .frame {
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 3 / 2;       /* landscape default; child img can override via natural ratio */
  position: relative;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tour-strip-track .frame.tall { aspect-ratio: 2 / 3; }     /* portrait */
.tour-strip-track .frame.square { aspect-ratio: 1 / 1; }
.tour-strip-track .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 1023px) {
  .tour-strip-track .frame { max-height: 64vh; aspect-ratio: 3 / 2; }
  .tour-strip-track .frame img { max-height: 64vh; }
}
.tour-strip-track .frame .num {
  position: absolute;
  bottom: 8px; left: 12px;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--taupe);
  background: rgba(15, 20, 16, 0.6);
  padding: 4px 10px;
}

/* Footer nav bar — PREV | © | NEXT */
.tour.h-scroll .tour-nav-h {
  grid-row: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 32px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--taupe);
  background: var(--bg-primary);
}
.tour.h-scroll .tour-nav-h a {
  color: var(--ivory);
  transition: color var(--dur-fast) var(--ease-out);
  font-weight: 500;
}
.tour.h-scroll .tour-nav-h a:hover { color: var(--accent); }
.tour.h-scroll .tour-nav-h .prev { justify-self: start; }
.tour.h-scroll .tour-nav-h .center { justify-self: center; }
.tour.h-scroll .tour-nav-h .next { justify-self: end; }

/* Remove body padding for tour-h-scroll pages (they handle own header offset) */
body.has-h-scroll { padding-top: 0; }
body.has-h-scroll .site-header { position: fixed; }
body.has-h-scroll main { padding-top: 64px; }

/* Hide site-footer on horizontal-scroll tour pages */
body.has-h-scroll .site-footer { display: none; }

/* =========================================================
   V5 — Tweakable font tokens (per text level)
   Falls back to the v3/v4 stacks if a tweak is not set.
   ========================================================= */
:root {
  --font-h1: var(--font-mono-block);
  --font-h2: var(--font-mono-block);
  --font-h3: var(--font-mono-block);
  /* --font-body and --font-tag inherit from earlier tokens */
}

/* H1-level applications */
.mono-h,
.hero-tagline,
.page-head h1,
.events-head h1,
.tour-head h1,
.tour.h-scroll .tour-aside-h .top h1,
.event-info h3,
.tour-nav .tn-title,
.cta-band h2,
.manifesto p { font-family: var(--font-h1) !important; }

/* H2 */
.h2,
.section-head .h2 { font-family: var(--font-h2) !important; }

/* H3 */
.h3,
.value-card h3,
.option-card h3,
.forfait .name,
.step h3,
.footer-col h4 { font-family: var(--font-h3) !important; }

/* Body & UI */
body,
.muted, .sand, p, li, .caption,
.btn, .btn-nav,
.menu-row .menu-item,
.tour-aside-h .field-block .field-value.body,
.tour.h-scroll .tour-aside-h .field-block .field-value { font-family: var(--font-body); }

/* Tag — handwritten moments */
.brand-tag,
.loader-tag,
.hero.v3 .hero-foot .place,
.pw-cell .pw-meta,
.home-strip .left,
.marquee-track { font-family: var(--font-tag); }