/* =========================================================
   Riad Sasha — design tokens
   ========================================================= */
:root {
  --color-sand: #f2f0eb;
  --color-sand-deep: #e4e1d8;
  --color-cream: #fbfaf7;
  --color-ink: #1a1a1a;
  --color-ink-soft: #6b6b68;
  --color-line: rgba(26, 26, 26, 0.12);

  --color-terracotta: #1a1a1a;
  --color-terracotta-deep: #000000;
  --color-majorelle: #1a1a1a;
  --color-ochre: #f2f0eb;
  --color-green: #1a1a1a;

  --color-night: #161616;
  --color-night-text: #f2f0eb;
  --color-night-line: rgba(242, 240, 235, 0.16);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Jost", "Segoe UI", Arial, sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 2.75rem;
  --space-5: 4.5rem;
  --space-6: 7rem;

  --container-w: 1180px;
  --radius-md: 10px;
  --radius-lg: 22px;
  --shadow-soft: 0 20px 50px -25px rgba(42, 33, 27, 0.35);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
   Reset & base
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-sand);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
}

p { margin: 0 0 var(--space-2); }

ul { margin: 0; padding: 0; list-style: none; }

.icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: -0.125em;
}

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -60px;
  background: var(--color-ink);
  color: var(--color-cream);
  padding: 0.75em 1.25em;
  border-radius: var(--radius-md);
  z-index: 999;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: var(--space-2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   Type scale
   ========================================================= */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin-bottom: var(--space-2);
}
.eyebrow::before {
  content: "";
  width: 1.6em;
  height: 1px;
  background: currentColor;
}
.section--dark .eyebrow { color: var(--color-ochre); }

h2 { font-size: clamp(1.9rem, 1.5rem + 2vw, 3rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); }

.lede {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  color: var(--color-ink-soft);
  max-width: 54ch;
}
.section--dark .lede { color: rgba(243, 233, 216, 0.75); }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 0.95em 1.7em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--color-terracotta);
  color: var(--color-cream);
}
.btn--primary:hover { background: var(--color-terracotta-deep); }

.btn--ghost {
  background: transparent;
  border-color: currentColor;
  color: var(--color-ink);
}
.btn--ghost:hover { background: var(--color-ink); color: var(--color-cream); }

.section--dark .btn--ghost { color: var(--color-night-text); }
.section--dark .btn--ghost:hover { background: var(--color-night-text); color: var(--color-night); }

.btn--sm { padding: 0.7em 1.3em; font-size: 0.85rem; }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: var(--space-2) 0;
  color: var(--color-cream);
  transition: padding 0.35s var(--ease), color 0.35s var(--ease);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.site-header.is-scrolled {
  padding: 0.7rem 0;
  color: var(--color-ink);
}
.site-header.is-scrolled::before {
  background: rgba(247, 241, 230, 0.92);
  backdrop-filter: saturate(160%) blur(10px);
  box-shadow: 0 1px 0 var(--color-line);
}

/* Pages sans hero sombre (piscine privée, et les pages internes à venir).
   L'en-tête est transparent à crème par défaut, parce qu'il se pose sur la
   photo pleine hauteur de l'accueil ; ici il flotterait en clair sur clair,
   illisible tant qu'on n'a pas fait défiler. On le rend opaque d'emblée, et
   on réserve la hauteur du bandeau fixe pour qu'il ne recouvre pas le titre. */
.page-solid-header .site-header {
  color: var(--color-ink);
}
.page-solid-header .site-header::before {
  background: rgba(247, 241, 230, 0.92);
  backdrop-filter: saturate(160%) blur(10px);
  box-shadow: 0 1px 0 var(--color-line);
}
.page-solid-header main {
  padding-top: 4.5rem;
}

.brand {
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
}
.brand svg { width: 1.5em; height: 1.5em; color: inherit; }

.nav-toggle {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid currentColor;
  border-radius: 50%;
  cursor: pointer;
  color: inherit;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.primary-nav__links {
  display: flex;
  gap: var(--space-3);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}
.primary-nav__links a {
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
}
.primary-nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right 0.3s var(--ease);
}
.primary-nav__links a:hover::after { right: 0; }

.primary-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.lang-switch a {
  text-decoration: none;
  padding: 0.3em 0.15em;
  color: inherit;
  opacity: 0.6;
  border-bottom: 1px solid transparent;
}
.lang-switch a[aria-current="true"] {
  opacity: 1;
  border-color: currentColor;
}
.lang-switch span { color: inherit; opacity: 0.35; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    position: fixed;
    z-index: 1;
    inset: 0;
    background: var(--color-sand);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: calc(var(--space-3) + env(safe-area-inset-top)) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom));
    gap: var(--space-4);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
  }
  .primary-nav.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--ease);
    color: var(--color-ink);
  }
  .primary-nav__links {
    flex-direction: column;
    gap: var(--space-2);
    font-size: 1.4rem;
    font-family: var(--font-display);
  }
  .primary-nav__actions { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}
@media (min-width: 901px) {
  .nav-toggle { display: none; }
}

/* =========================================================
   Sections / layout rhythm
   ========================================================= */
.section {
  padding: var(--space-6) 0;
}
.section--alt { background: var(--color-sand-deep); }
.section--dark {
  background: var(--color-night);
  color: var(--color-night-text);
}
.section--tight { padding: var(--space-5) 0; }

.section-head {
  max-width: 640px;
  margin: 0 0 var(--space-5);
}
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: 7rem;
  padding-bottom: var(--space-5);
  overflow: hidden;
  background: var(--color-night);
  color: var(--color-night-text);
}
.hero__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__visual .placeholder { height: 100%; border-radius: 0; }
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 15, 15, 0.35) 0%, rgba(15, 15, 15, 0.55) 55%, rgba(15, 15, 15, 0.92) 100%);
  z-index: 1;
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero__eyebrow {
  color: var(--color-ochre);
}
.hero h1 {
  font-size: clamp(3rem, 2.1rem + 6vw, 6.5rem);
  margin: 0;
  color: var(--color-cream);
}
.hero__tagline {
  max-width: 46ch;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  color: rgba(243, 233, 216, 0.85);
  margin: var(--space-2) 0 var(--space-3);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-night-line);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: rgba(243, 233, 216, 0.75);
}
.hero__meta strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-cream);
  font-weight: 500;
}

/* Scroll-scrubbed video-frame section */
.hero--scroll {
  position: relative;
  display: block;
  width: 100%;
}
.hero--scroll__pin {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--color-sand);
  display: flex;
  flex-direction: column;
}
.hero--scroll__text {
  text-align: center;
  padding: var(--space-5) var(--space-4) var(--space-3);
}
.hero--scroll__text h2 { margin: var(--space-2) 0; }
.hero--scroll__text .lede {
  max-width: 42ch;
  margin: 0 auto;
}
.hero--scroll__media {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: var(--space-4);
}
.hero--scroll__canvas {
  display: block;
}

/* =========================================================
   Placeholder visuals (temporary, until real photos)
   ========================================================= */
.placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  background-color: var(--color-sand-deep);
  background-image:
    linear-gradient(160deg, rgba(42,33,27,0.06), transparent 60%),
    url("../img/pattern-zellige.svg");
  background-size: auto, 220px;
  background-repeat: no-repeat, repeat;
  color: var(--color-ink-soft);
  overflow: hidden;
}
.placeholder__mark {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  text-align: center;
  padding: var(--space-2);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.placeholder__mark .icon { width: 1.8rem; height: 1.8rem; color: var(--color-terracotta); }
.placeholder--terracotta .icon { color: var(--color-terracotta); }
.placeholder--majorelle .icon { color: var(--color-majorelle); }
.placeholder--ochre .icon { color: var(--color-ochre); }
.placeholder--green .icon { color: var(--color-green); }

/* Real photo dropped into a .placeholder slot: fills it, hides pattern + mark */
.placeholder.has-photo { background-image: none; }
.placeholder.has-photo .placeholder__mark { display: none; }
.placeholder__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arch {
  border-radius: 50% 50% 6px 6px / 22% 22% 6px 6px;
}

/* =========================================================
   Intro / story
   ========================================================= */
.intro {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
.intro__visual .placeholder { aspect-ratio: 4 / 5; min-height: 360px; }
@media (min-width: 900px) {
  .intro { grid-template-columns: 0.9fr 1.1fr; }
  .intro--reverse .intro__visual { order: 2; }
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}
.stat-strip div strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
  color: var(--color-terracotta);
  font-weight: 500;
}
.stat-strip div span {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
@media (min-width: 640px) {
  .stat-strip { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================
   Cards grid (rooms)
   ========================================================= */
.card-grid {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 720px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}
.room-card__visual .placeholder { aspect-ratio: 5 / 4; }
.room-card__body { padding-top: var(--space-2); }
.room-card__body h3 { margin-bottom: 0.3em; }
.room-card__amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1em;
  margin-top: var(--space-2);
  font-size: 0.82rem;
  color: var(--color-ink-soft);
}
.room-card__amenities li { display: flex; align-items: center; gap: 0.4em; }

/* =========================================================
   Feature split (pool)
   ========================================================= */
.split {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 720px) {
  .split { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .split .placeholder:nth-child(2) { margin-top: var(--space-5); }
}

/* =========================================================
   Location
   ========================================================= */
.location-grid {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 900px) {
  .location-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}
.poi-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.9em 0;
  border-bottom: 1px solid var(--color-night-line);
}
.poi-list li span:last-child { color: var(--color-ochre); white-space: nowrap; }
.map-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-sand-deep);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(100%) contrast(1.05); }

/* =========================================================
   Gallery + lightbox
   ========================================================= */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
@media (min-width: 720px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .gallery a:first-child { grid-column: span 2; grid-row: span 2; }
}
.gallery a { display: block; border-radius: var(--radius-md); overflow: hidden; }
.gallery .placeholder { aspect-ratio: 1 / 1; min-height: 0; }
.gallery a:first-child .placeholder { aspect-ratio: 1 / 1; height: 100%; }

/* Les attributs width/height du HTML réservent la place avant le chargement
   (l'image est en lazy-loading) ; `height: auto` laisse le ratio s'adapter.
   Sans ça, la page grandissait de 700 px en cours de défilement et tous les
   liens d'ancre atterrissaient une section trop haut. */
.panorama-photo {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--space-4);
  border-radius: var(--radius-lg);
}

/* Questions fréquentes des pages éditoriales : les <h3> y sont des questions,
   pas des titres de section — on les ramène à une taille de texte pour ne pas
   concurrencer les <h2> du plan de page. */
.faq { max-width: 60ch; }
.faq h3 {
  font-size: 1.12rem;
  line-height: 1.35;
  margin-top: var(--space-3);
}
.faq h3:first-child { margin-top: var(--space-2); }
.faq p { color: var(--color-ink-soft); }

/* Règlement intérieur. Une liste numérotée, mais dont le numéro n'est pas la
   puce par défaut du navigateur : il est mis à distance et adouci, pour que
   l'œil accroche le titre de la règle plutôt que son rang. Les <h2> sont
   ramenés à une taille de texte, comme dans la FAQ — six règles ne sont pas
   six sections. */
.house-rules {
  max-width: 62ch;
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: rule;
}
.house-rules > li {
  counter-increment: rule;
  position: relative;
  padding: 0 0 var(--space-3) 3.25rem;
  border-bottom: 1px solid var(--color-line);
  margin-bottom: var(--space-3);
}
.house-rules > li:last-child { border-bottom: 0; margin-bottom: 0; }
.house-rules > li::before {
  content: counter(rule);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--color-ink-soft);
  opacity: 0.55;
}
.house-rules h2 {
  font-size: 1.12rem;
  line-height: 1.35;
  margin-bottom: var(--space-1);
}
.house-rules p { color: var(--color-ink-soft); margin: 0; }

@media (max-width: 540px) {
  .house-rules > li { padding-left: 2.5rem; }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 15, 15, 0.92);
  padding: var(--space-3);
}
.lightbox.is-open { display: flex; }
.lightbox__frame { max-width: 900px; width: 100%; }
.lightbox__frame .placeholder { aspect-ratio: 4 / 3; min-height: 0; }
.lightbox__caption {
  color: var(--color-night-text);
  text-align: center;
  margin-top: var(--space-2);
  font-size: 0.9rem;
}
.lightbox__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--color-night-line);
  background: transparent;
  color: var(--color-night-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   Trust / reviews
   ========================================================= */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.trust-badge {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-cream);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-ink);
  box-shadow: var(--shadow-soft);
}
.trust-badge__score {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--color-terracotta);
  line-height: 1;
}
.trust-badge__meta { font-size: 0.85rem; color: var(--color-ink-soft); }
.trust-badge__meta strong { display: block; color: var(--color-ink); font-size: 0.95rem; }

/* =========================================================
   Réservation directe — arguments + widget calendrier
   ========================================================= */
.booking-perks {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
@media (min-width: 720px) {
  .booking-perks { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
}
.booking-perks li {
  display: flex;
  gap: 0.7em;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--color-ink-soft);
}
.booking-perks strong { display: block; color: var(--color-ink); font-size: 0.98rem; }
.booking-perks .icon { flex: none; margin-top: 0.25em; color: var(--color-ink); }

.booking {
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-cream);
  box-shadow: var(--shadow-soft);
}
@media (min-width: 720px) {
  .booking { padding: var(--space-4); }
}

.bk-grid { display: grid; gap: var(--space-4); }
@media (min-width: 860px) {
  .bk-grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-5); align-items: start; }
}

.bk-loading,
.bk-hint {
  margin: 0;
  font-size: 0.86rem;
  color: var(--color-ink-soft);
}
.bk-hint--times { margin-top: var(--space-1); }
.bk-error {
  margin: var(--space-2) 0 0;
  padding: 0.7em 0.9em;
  border-radius: var(--radius-md);
  background: var(--color-sand-deep);
  border-left: 3px solid var(--color-ink);
  font-size: 0.88rem;
}

/* ---- Calendrier ---- */
.bk-calendar { position: relative; }
.bk-nav {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 0.4rem;
  z-index: 1;
}
.bk-nav__btn {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  line-height: 1;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.bk-nav__btn:hover:not(:disabled) { background: var(--color-ink); color: var(--color-cream); }
.bk-nav__btn:disabled { opacity: 0.3; cursor: default; }

.bk-months { display: grid; gap: var(--space-3); }
@media (min-width: 860px) {
  .bk-months { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
}
.bk-month__title {
  margin: 0 0 0.8em;
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-transform: capitalize;
}
.bk-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.bk-week--head {
  margin-bottom: 0.4em;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  text-align: center;
}

.bk-day {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-ink);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.bk-day--pad { cursor: default; }
.bk-day__p { font-size: 0.62rem; line-height: 1; color: var(--color-ink-soft); }
/* Le survol ne doit pas repeindre par-dessus les bornes du séjour choisi :
   d'où les :not(), sans quoi il l'emporterait par spécificité. */
.bk-day:hover:not(:disabled):not(.is-start):not(.is-end) { background: var(--color-sand-deep); }

.bk-day:disabled { cursor: default; }
.bk-day.is-busy,
.bk-day.is-out {
  color: rgba(26, 26, 26, 0.28);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.bk-day.is-unreachable:not(.is-busy):not(.is-out) { color: rgba(26, 26, 26, 0.3); }

/* Nuit occupée mais départ possible ce jour-là : lisible, avec un demi-fond
   qui montre que seule la matinée est à vous. */
.bk-day.is-busy.is-checkout {
  color: var(--color-ink);
  text-decoration: none;
  background: linear-gradient(to bottom right, var(--color-sand-deep) 0 49.5%, transparent 50.5% 100%);
}

.bk-day.is-inside { background: var(--color-sand-deep); border-radius: 0; }
.bk-day.is-start {
  background: var(--color-ink);
  color: var(--color-cream);
  text-decoration: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.bk-day.is-start .bk-day__p { color: rgba(251, 250, 247, 0.75); }

/* Le jour du départ n'est pas une nuit : on quitte le riad le matin, et cette
   nuit-là appartient déjà au voyageur suivant. Le peindre comme le séjour
   laisserait croire qu'elle est due. Un contour suffit à montrer où la
   sélection s'arrête — c'est la convention des autres plateformes.
   La règle vient après .is-busy pour qu'une date de départ déjà réservée
   cesse d'être barrée une fois choisie. */
.bk-day.is-end {
  background: transparent;
  color: var(--color-ink);
  text-decoration: none;
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.bk-day.is-end .bk-day__p { color: var(--color-ink-soft); }
.bk-day:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }

.bk-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-size: 0.78rem;
  color: var(--color-ink-soft);
}
.bk-legend li { display: flex; align-items: center; gap: 0.45em; }
.bk-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 3px;
  display: inline-block;
}
.bk-dot--free { border: 1px solid var(--color-line); background: var(--color-cream); }
.bk-dot--busy { background: var(--color-sand-deep); }
.bk-dot--sel { background: var(--color-ink); }

/* ---- Panneau récapitulatif + formulaire ---- */
.bk-panel { display: grid; gap: var(--space-3); }
.bk-summary { display: grid; gap: var(--space-2); align-content: start; }
/* L'indication « choisissez vos dates » suit immédiatement les deux cases,
   elle ne doit pas flotter à mi-distance du champ suivant. */
.bk-summary .bk-hint { margin-top: calc(var(--space-2) * -0.6); }

.bk-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.bk-dates__cell {
  padding: 0.7em 0.9em;
  background: var(--color-cream);
}
.bk-dates__cell.is-set { background: var(--color-sand); }
.bk-dates__label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.bk-dates__cell strong { font-size: 1rem; }

.bk-price {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4em 1em;
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
  font-size: 0.9rem;
}
.bk-price dt { color: var(--color-ink-soft); }
.bk-price dd { margin: 0; text-align: right; }
.bk-price__total {
  padding-top: 0.5em;
  border-top: 1px solid var(--color-line);
  font-weight: 600;
  color: var(--color-ink) !important;
  font-size: 1.05rem;
}

.bk-quote {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
}
.bk-quote strong { font-size: 1.15rem; font-family: var(--font-display); }
.bk-quote__label { margin: 0.1em 0 0.4em; font-size: 0.95rem; }

.bk-form__title {
  margin: 0 0 var(--space-2);
  font-size: 1.05rem;
}
.bk-fields { display: grid; gap: var(--space-2); }
@media (min-width: 480px) {
  .bk-fields { grid-template-columns: 1fr 1fr; }
  .bk-field--wide { grid-column: 1 / -1; }
}
.bk-label {
  display: block;
  margin-bottom: 0.3em;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.bk-input {
  width: 100%;
  padding: 0.7em 0.85em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-sand);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-ink);
}
.bk-input:focus { outline: 2px solid var(--color-ink); outline-offset: 1px; }
textarea.bk-input { resize: vertical; min-height: 5em; }

/* Piège à robots : invisible mais pas display:none (que certains bots ignorent). */
.bk-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.bk-submit { margin-top: var(--space-2); width: 100%; justify-content: center; }
.bk-submit:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.bk-success { text-align: center; padding: var(--space-3) 0; }
.bk-success h3 { font-size: 1.6rem; margin-bottom: var(--space-1); }
.bk-success p { margin: 0 auto var(--space-2); max-width: 46ch; color: var(--color-ink-soft); }
.bk-success__meta { font-size: 0.9rem; }
.bk-success__meta strong { color: var(--color-ink); }

/* ---- Rappel Airbnb / Booking.com ---- */
.booking-alt {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-1) var(--space-2);
  text-align: center;
  font-size: 0.88rem;
  color: var(--color-ink-soft);
}
.booking-alt p { margin: 0; }
.booking-alt a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================
   Journée type — pages éditoriales de conseils
   =========================================================
   Une journée se lit comme une frise verticale : un trait continu relie les
   moments (matin, midi, soir), chaque étape est accrochée dessus par une
   pastille. Le trait est en `border-left` sur chaque étape plutôt qu'un
   pseudo-élément sur le conteneur : la dernière étape peut ainsi couper le
   trait (`.day-step:last-child { border-color: transparent }`) pour qu'il ne
   pende pas dans le vide sous le dernier paragraphe. */
/* Le sommaire de ces pages pointe vers des titres, pas vers des sections. Une
   section a sept rem de rembourrage qui laissent le titre passer sous l'en-tête
   collant ; un <h2> nu, lui, atterrit dessous et disparaît. */
h2[id], h3[id] { scroll-margin-top: 6rem; }

.day-plan { max-width: 68ch; }
.day-step {
  position: relative;
  padding: 0 0 var(--space-4) var(--space-3);
  border-left: 1px solid var(--color-line);
}
.day-step:last-child { border-color: transparent; padding-bottom: 0; }
.day-step::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0.5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-ink);
}
.day-step__time {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-1);
}
.day-step h3 { margin-bottom: var(--space-2); }
.day-step p:last-child { margin-bottom: 0; }

/* Liens vers les adresses conseillées : site officiel, fiche Google, Instagram.
   Des pastilles plutôt que des liens dans le texte — on veut qu'un voyageur qui
   survole la page retrouve d'un coup d'œil « où cliquer pour réserver ». */
.place-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
}
.place-links a {
  display: inline-block;
  padding: 0.35em 0.95em;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-cream);
  font-size: 0.82rem;
  text-decoration: none;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.place-links a:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-cream); }

/* Encadré « le conseil de l'hôte » : ce qu'on dirait au petit-déjeuner et qui
   ne tient pas dans le fil du texte (heure à viser, piège à éviter, prix). */
.tip {
  max-width: 60ch;
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-ink);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-cream);
}
.tip p:last-child { margin-bottom: 0; }
.tip strong { display: block; font-family: var(--font-display); font-size: 1rem; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--color-night);
  color: rgba(243, 233, 216, 0.75);
  padding: var(--space-5) 0 var(--space-3);
}
.footer-grid {
  display: grid;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-night-line);
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
}
.site-footer .brand { color: var(--color-night-text); }
.site-footer .brand svg { color: #fff; }
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-night-text);
  margin-bottom: var(--space-2);
}
.footer-col a { text-decoration: none; }
.footer-col li { margin-bottom: 0.6em; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-3);
  font-size: 0.8rem;
}
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }