:root {
  --ink: #1a1a1a;
  --paper: #f7f5f0;
  --green: #2c5e3f;
  /* Width of the centred editorial column on desktop (everything past the hero). */
  --content-band: 65vw;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

/* Subtle vignette shared by every full-bleed photo section.
   Sits below the per-section bottom gradient so legibility is preserved. */
.hero::before, .frame::before, .room::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 115% 95% at 50% 50%, transparent 50%, rgba(0,0,0,0.32) 100%);
}

/* Hero */
.hero {
  height: 100vh; width: 100%; position: relative;
  background-size: cover; background-position: center;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.10) 50%, rgba(0,0,0,0.85) 100%);
}
.hero-content { position: relative; z-index: 2; padding: 0 7vw 9vh; color: #fff; }
.hero .eyebrow {
  font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase;
  font-weight: 400; opacity: 0.95; margin-bottom: 18px; text-shadow: 0 1px 16px rgba(0,0,0,0.7);
}
.hero h1 {
  font-size: clamp(32px, 5.5vw, 70px); font-weight: 300; line-height: 1.06;
  letter-spacing: -0.01em; max-width: 16ch; text-shadow: 0 2px 40px rgba(0,0,0,0.6);
}
.scroll-hint {
  position: absolute; bottom: 3vh; left: 50%; transform: translateX(-50%);
  z-index: 3; color: #fff; font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; opacity: 0.9;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: bob 2.4s ease-in-out infinite; text-shadow: 0 1px 12px rgba(0,0,0,0.7);
}
@keyframes bob { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,8px)} }
.scroll-hint .line { width: 1px; height: 34px; background: rgba(255,255,255,0.8); }

.details-btn {
  position: absolute; bottom: 4vh; right: 6vw; z-index: 4;
  color: #fff; border: 1px solid rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.25); backdrop-filter: blur(4px);
  padding: 14px 28px; font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: all 0.25s; font-family: inherit;
}
.details-btn:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* Full-screen photo section (single image) */
.frame {
  position: relative; width: 100%; height: 100vh;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
}
.frame::after {
  content:""; position:absolute; inset:0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.18) 30%, rgba(0,0,0,0) 55%);
}
.frame .caption { position: relative; z-index: 2; padding: 0 7vw 8vh; color: #fff; }
.caption .label { font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; opacity: 0.95; margin-bottom: 12px; }
/* When a section shows only the label (no h2 below), give the label a stronger
   presence so it carries the caption on its own. */
.caption .label-only { font-size: 16px; letter-spacing: 0.30em; margin-bottom: 0; font-weight: 400; }
.caption h2 { font-size: clamp(26px, 4vw, 44px); font-weight: 300; line-height: 1.12; letter-spacing: -0.01em; text-shadow: 0 2px 30px rgba(0,0,0,0.55); max-width: 18ch; }

/* Room = a full-screen section whose photos can be swiped left/right.
   Vertical page scroll keeps working; only horizontal swipes change the photo. */
.room { position: relative; width: 100%; height: 100vh; overflow: hidden; background: #000; }
.room .slides { display: flex; height: 100%; transition: transform 0.4s ease; }
.room .slide {
  flex: 0 0 100%; height: 100%;
  background-size: cover; background-position: center;
}
.room::after {
  content:""; position:absolute; inset:0; pointer-events: none; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.18) 30%, rgba(0,0,0,0) 55%);
}
.room .caption { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 0 7vw 8vh; color: #fff; }
.room .nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 48px; height: 48px; border: 1px solid rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.25); color: #fff; font-size: 24px; line-height: 1;
  cursor: pointer; transition: all 0.25s; backdrop-filter: blur(4px);
}
.room .nav:hover { background: #fff; color: var(--ink); }
.room .nav.prev { left: 4vw; }
.room .nav.next { right: 4vw; }
.room .dots { position: absolute; bottom: 3vh; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 10px; }
.room .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.45); cursor: pointer; transition: background 0.25s; }
.room .dot.active { background: #fff; }
/* A room with a single photo needs no controls. */
.room[data-single] .nav, .room[data-single] .dots { display: none; }

/* Intro */
.intro { background: var(--paper); color: var(--ink); padding: 14vh 7vw; text-align: center; }
.intro p { font-size: clamp(18px, 2.2vw, 24px); font-weight: 300; line-height: 1.6; max-width: 42ch; margin: 0 auto; letter-spacing: -0.005em; }

/* Details */
.details { background: var(--paper); color: var(--ink); padding: 12vh 7vw 14vh; }
.details .section-title { text-align: center; font-size: 13px; letter-spacing: 0.25em; text-transform: uppercase; opacity: 0.5; margin-bottom: 10px; }
.details h3 { text-align: center; font-size: clamp(26px,3.5vw,40px); font-weight: 300; margin-bottom: 64px; letter-spacing: -0.01em; }

/* Per-room grid: row per chambre, column per attribute (Prix, Disponibilité).
   Thin dividers via 1px gap on a dark background. */
.rooms-grid {
  display: grid; grid-template-columns: auto 1fr 1fr;
  gap: 1px; background: rgba(0,0,0,0.12); border: 1px solid rgba(0,0,0,0.12);
  max-width: 720px; margin: 0 auto 72px;
}
.rooms-grid .cell { background: var(--paper); padding: 22px 24px; display: flex; align-items: center; }
.rooms-grid .cell.head {
  font-size: 12px; letter-spacing: 0.20em; text-transform: uppercase;
  opacity: 0.5; font-weight: 400; padding-top: 18px; padding-bottom: 14px;
}
.rooms-grid .cell.row-label {
  font-size: 12px; letter-spacing: 0.20em; text-transform: uppercase;
  opacity: 0.65; font-weight: 400; padding-right: 32px;
}
.rooms-grid .cell:not(.head):not(.row-label) { font-size: 20px; font-weight: 300; }
/* Wrapping the price in a single span keeps "CHF 550" and "/ mois" inline-text
   so the narrow mobile column wraps them on whitespace, not between flex items. */
.rooms-grid .price { display: inline-block; }
.rooms-grid .cell small { font-size: 13px; opacity: 0.6; margin-left: 2px; white-space: nowrap; }
/* Availability badge — colour-coded by the parent cell's data-availability. */
.badge {
  display: inline-block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  background: #3a7251; color: #fff; padding: 4px 12px; border-radius: 2px;
}
[data-availability="available"] .badge { background: #3a7251; }
[data-availability="reserved"]  .badge { background: #c08428; }
[data-availability="rented"]    .badge { background: #a82a2a; }

/* Centre the badge horizontally inside its grid cell. */
.rooms-grid .cell[data-availability] { justify-content: center; }

.block { max-width: 760px; margin: 0 auto 64px; }
.block h4 { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.55; margin-bottom: 24px; text-align:center; }
.block p { font-size: 17px; line-height: 1.85; font-weight: 300; opacity: 0.85; text-align: center; }

/* Grouped info lines with a single-stroke icon. No chips, no shadows.
   Narrower max-width keeps the two columns visually anchored to the page centre. */
.info-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 22px 32px; max-width: 620px; margin: 0 auto 56px;
}
.info-item { display: flex; align-items: flex-start; gap: 14px; font-size: 16px; font-weight: 300; line-height: 1.5; }
.info-item .icon { flex: 0 0 22px; width: 22px; height: 22px; opacity: 0.55; margin-top: 2px; }

/* Callouts. 1px coloured rule, paper background, no rounded card, no shadow.
   The colour switches via a modifier class (.amber for vehicle/transport). */
.note-card {
  max-width: 760px; margin: 8px auto 56px;
  border: 1px solid #8c3a3a; padding: 24px 28px;
  background: var(--paper);
}
.note-card-label {
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: #8c3a3a; margin-bottom: 10px; font-weight: 500;
}
.note-card p { font-size: 16px; line-height: 1.6; font-weight: 300; }
.note-card.amber { border-color: #b8722a; }
.note-card.amber .note-card-label { color: #b8722a; }

.dist-note { max-width: 600px; margin: 0 auto 28px; text-align: center; font-size: 15px; line-height: 1.6; font-weight: 300; opacity: 0.7; }

.dist { max-width: 600px; margin: 0 auto 36px; }
.dist .row { display:flex; justify-content: space-between; align-items:center; padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,0.10); }
.dist .row:last-child { border-bottom: none; }
.dist .mode { display: inline-flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 300; }
.dist .mode .icon { width: 20px; height: 20px; flex: 0 0 20px; opacity: 0.55; }
.dist .time { font-size: 16px; font-weight: 400; }
.dist .place { text-align:center; font-size: 14px; opacity: 0.55; margin-bottom: 8px; letter-spacing: 0.05em; }

.cff-link { display:block; text-align:center; margin: 0 auto 64px; font-size: 14px; }
.cff-link a { color: var(--ink); opacity: 0.7; text-decoration: underline; text-underline-offset: 3px; }

#map { height: 440px; max-width: 1000px; margin: 0 auto; border: 1px solid rgba(0,0,0,0.12); }
.map-fallback { display: flex; align-items: center; justify-content: center; background: #eceae3; }
.map-fallback a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-size: 16px; font-weight: 300; }

/* Custom Leaflet markers: strip the default white box, keep only the SVG +
   a soft drop-shadow so the icons read well over the map tiles. */
.molignon-marker { background: transparent; border: 0; }
.molignon-marker svg { display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35)); }

/* Contact */
.contact { background: var(--ink); color: var(--paper); padding: 16vh 7vw; text-align: center; }
.contact .small { font-size: 13px; letter-spacing: 0.25em; text-transform: uppercase; opacity: 0.5; margin-bottom: 24px; }
.contact h2 { font-size: clamp(30px, 5vw, 56px); font-weight: 300; margin-bottom: 40px; letter-spacing: -0.01em; }
/* Contact CTAs: each on its own line, icon + label, same on desktop and mobile. */
.contact-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.contact a.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--paper); border: 1px solid rgba(255,255,255,0.4);
  padding: 18px 32px; text-decoration: none; font-size: 14px; letter-spacing: 0.16em;
  text-transform: uppercase; transition: all 0.25s;
  min-width: 260px;
}
.contact a.btn:hover { background: var(--paper); color: var(--ink); }
.contact .btn-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.footer { background: var(--ink); color: rgba(247,245,240,0.4); text-align:center; padding: 0 0 50px; font-size: 12px; letter-spacing: 0.1em; }

/* Desktop only: everything below the hero lives in a centred column.
   The hero stays full-bleed for its full impact, then the rest of the
   page reads as an editorial layout with paper-coloured margins.
   Adjust the band width via the --content-band custom property. */
@media (min-width: 1024px) {
  .intro,
  .room,
  .frame,
  .details,
  .contact,
  .footer {
    max-width: var(--content-band);
    margin-left: auto;
    margin-right: auto;
  }
}

/* Login page — same editorial palette, restrained form fields. */
.login-page { background: var(--paper); color: var(--ink); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; overflow: visible; }
.login-box { width: 100%; max-width: 360px; }
.login-box h1 { font-size: 32px; font-weight: 300; text-align: center; margin-bottom: 40px; letter-spacing: -0.01em; }
.login-box form { display: flex; flex-direction: column; gap: 20px; }
.login-box label { display: flex; flex-direction: column; gap: 8px; }
.login-box label span { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.55; font-weight: 400; }
.login-box input { font: inherit; font-size: 16px; font-weight: 300; padding: 12px 14px; border: 1px solid rgba(0,0,0,0.2); background: #fff; color: var(--ink); }
.login-box input:focus { outline: none; border-color: var(--ink); }
.login-box button { font: inherit; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; padding: 16px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; margin-top: 10px; transition: all 0.2s; }
.login-box button:hover { background: transparent; color: var(--ink); }
.login-box .error { color: #8c3a3a; font-size: 14px; text-align: center; margin-top: 4px; }
.login-box .back { text-align: center; margin-top: 32px; font-size: 13px; opacity: 0.6; }
.login-box .back a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Mobile adjustments. */
@media (max-width: 768px) {
  /* Hero: crop top 20% of the source image, focal point at 40% from the left,
     and a deeper bottom gradient through the lower 25% for text legibility. */
  .hero {
    background-size: auto 125%;
    background-position: 40% 100%;
    background-repeat: no-repeat;
  }
  .hero::after {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 60%,
      rgba(0,0,0,0.20) 75%,
      rgba(0,0,0,0.55) 87%,
      rgba(0,0,0,0.92) 100%
    );
  }

  /* Tighter rooms grid on a narrow screen. */
  .rooms-grid .cell { padding: 14px 12px; }
  .rooms-grid .cell:not(.head):not(.row-label) { font-size: 16px; }
  .rooms-grid .cell.head { font-size: 10px; letter-spacing: 0.16em; padding-top: 12px; padding-bottom: 10px; }
  .rooms-grid .cell.row-label { font-size: 10px; letter-spacing: 0.14em; padding-right: 10px; }
  .rooms-grid .cell small { font-size: 11px; }
  .badge { font-size: 10px; padding: 3px 8px; letter-spacing: 0.10em; }
}
</content>