/* =========================================================================
   Casa Marea · showroom 92 Media House
   Un seul fichier CSS, sans framework. Les couleurs et polices sont des
   variables : pour un client, on change les six premières lignes.
   ========================================================================= */

:root {
  --sand: #f3ece0;
  --cream: #faf7f0;
  --ink: #1c2a2b;
  --ink-2: #33494a;
  --muted: #6d7879;
  --line: rgba(28, 42, 43, 0.14);
  --ocean: #1f5c60;
  --ocean-2: #2a7c80;
  --terra: #c9673b;
  --wa: #128c7e;
  --white: #ffffff;

  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 10px;
  --shadow: 0 20px 50px -30px rgba(28, 42, 43, 0.45);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.05; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(56px, 9vw, 124px); }
h2 { font-size: clamp(34px, 4.6vw, 58px); }
h3 { font-size: clamp(26px, 3vw, 38px); }
p { margin: 0 0 1em; }
.lead { font-size: clamp(17px, 1.4vw, 19px); color: var(--ink-2); max-width: 60ch; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.kicker {
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  color: var(--terra); margin: 0 0 14px;
}
.kicker-light { color: #f0c9ad; }
.section-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head .lead { margin-top: 10px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px; border: 1px solid transparent;
  font: 600 15px/1 var(--font-body); text-decoration: none; cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { flex: none; }
.btn-primary { background: var(--ink); color: var(--cream); }
.btn-primary:hover { background: var(--ocean); }
.btn-wa { background: var(--wa); color: var(--white); }
.btn-wa:hover { background: #0f7a6d; }
.btn-ghost { background: rgba(255, 255, 255, 0.12); color: var(--white); border-color: rgba(255, 255, 255, 0.45); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.22); }
.btn-ghost-dark { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost-dark:hover { background: var(--ink); color: var(--cream); }
.btn-small { padding: 10px 16px; font-size: 13px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ---------- Ruban de démonstration ---------- */
.ribbon {
  background: var(--ink); color: var(--sand);
  font-size: 13.5px; text-align: center; padding: 10px var(--gutter);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ribbon p { margin: 0; }
.ribbon a { color: #f0c9ad; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.ribbon a:hover { text-decoration: underline; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px var(--gutter);
  color: var(--white);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.nav.scrolled { background: rgba(250, 247, 240, 0.92); color: var(--ink); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.brand { font-family: var(--font-display); font-size: 26px; font-weight: 500; text-decoration: none; letter-spacing: 0.01em; white-space: nowrap; }
.nav-links { display: flex; gap: 26px; }
.nav-links a { text-decoration: none; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; opacity: 0.9; }
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.nav-right { display: flex; align-items: center; gap: 14px; }
.lang { display: inline-flex; border: 1px solid currentColor; border-radius: 999px; padding: 3px; opacity: 0.9; }
/* La langue en cours n'est pas un lien mais un <span> : on habille les deux,
   sinon elle hérite du serif de l'en-tête et perd sa pastille. */
.lang > * { text-decoration: none; font: 700 11.5px/1 var(--font-body); letter-spacing: 0.1em; padding: 5px 10px; border-radius: 999px; }
.lang [aria-current="true"] { background: currentColor; }
.nav .lang [aria-current="true"] { color: var(--ink); background: var(--white); }
.nav.scrolled .lang [aria-current="true"] { color: var(--cream); background: var(--ink); }
.footer .lang [aria-current="true"] { color: var(--ink); background: var(--sand); }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: min(92vh, 900px); display: flex; align-items: flex-end;
  margin-top: calc(-1 * (28px + 2 * 14px)); /* passe sous la nav */
  color: var(--white); isolation: isolate; overflow: hidden;
}
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20, 30, 31, 0.35) 0%, rgba(20, 30, 31, 0.05) 35%, rgba(20, 30, 31, 0.72) 100%);
}
.hero-inner { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; padding: 120px 0 64px; }
.hero h1 { margin-bottom: 8px; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25); }
.hero-sub { font-family: var(--font-display); font-style: italic; font-size: clamp(22px, 2.6vw, 32px); margin: 0 0 28px; opacity: 0.95; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-guide { min-height: min(80vh, 760px); }
.scroll-hint { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.8; margin-top: 30px; }

/* ---------- Intro ---------- */
.intro { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 6vw, 90px); align-items: center; padding: clamp(64px, 9vw, 128px) 0; }
.intro-media img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- La carte ---------- */
.carte { margin: clamp(22px, 3vw, 36px) 0 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--sand); }
.carte iframe { display: block; width: 100%; height: clamp(260px, 30vw, 400px); border: 0; }

/* ---------- Galerie et visionneuse ---------- */
.galerie { padding: clamp(28px, 4vw, 52px) 0 0; }
.galerie-mosaique {
  position: relative; display: grid; gap: 8px;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, clamp(120px, 17vw, 210px));
}
.galerie-tuile {
  padding: 0; border: 0; border-radius: 4px; overflow: hidden; cursor: pointer;
  background: var(--sand); position: relative;
}
.galerie-tuile:first-child { grid-row: span 2; border-radius: var(--radius) 4px 4px var(--radius); }
.galerie-tuile:nth-child(3) { border-top-right-radius: var(--radius); }
.galerie-tuile:nth-child(5) { border-bottom-right-radius: var(--radius); }
.galerie-tuile img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.galerie-tuile:hover img { transform: scale(1.03); }
.galerie-cadre { position: relative; }
.galerie-tuile:nth-child(n+6) { display: none; }
.galerie-tete { margin-bottom: clamp(18px, 2.4vw, 28px); }
.galerie-tuile:focus-visible { outline: 2px solid var(--ocean); outline-offset: 2px; }
.galerie-tout {
  position: absolute; right: 14px; bottom: 14px; cursor: pointer;
  font: 600 13.5px/1 var(--font-body); letter-spacing: .02em;
  color: var(--ink); background: rgba(250, 247, 240, .94);
  border: 1px solid rgba(28, 42, 43, .12); border-radius: 999px; padding: 11px 18px;
  box-shadow: 0 6px 18px -8px rgba(28, 42, 43, .5);
}
.galerie-tout:hover { background: var(--white); }

.visionneuse {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  background: rgba(16, 24, 25, .94); padding: clamp(12px, 4vw, 48px);
}
.visionneuse[hidden] { display: none; }
.visionneuse img { max-width: 100%; max-height: 86vh; width: auto; border-radius: 6px; }
.vis-bouton {
  position: absolute; cursor: pointer; color: var(--white);
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px; width: 46px; height: 46px; display: grid; place-items: center;
  font: 400 26px/1 var(--font-body);
}
.vis-bouton:hover { background: rgba(255, 255, 255, .24); }
.vis-fermer { top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); font-size: 24px; }
.vis-prec { left: clamp(10px, 3vw, 28px); }
.vis-suiv { right: clamp(10px, 3vw, 28px); }
.vis-compteur {
  position: absolute; bottom: clamp(10px, 3vw, 26px); left: 0; right: 0; margin: 0;
  text-align: center; color: rgba(255, 255, 255, .75); font-size: 13px; letter-spacing: .06em;
}

@media (max-width: 760px) {
  /* Sur mobile, une bande qu'on fait défiler au doigt : la photo suivante dépasse
     du bord pour inviter le geste, et la page garde son rythme vertical. */
  .galerie-mosaique {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--gutter, 20px)); padding: 0 var(--gutter, 20px);
    scroll-padding: 0 var(--gutter, 20px); scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .galerie-mosaique::-webkit-scrollbar { display: none; }
  .galerie-tuile, .galerie-tuile:nth-child(n) {
    display: block; flex: 0 0 82%; aspect-ratio: 4 / 3; scroll-snap-align: start;
    border-radius: var(--radius);
  }
  .galerie-tout {
    position: static; display: block; margin: 16px auto 0;
    padding: 12px 20px; font-size: 13.5px; box-shadow: none;
  }
  /* La photo de « L'hôtel » est aussi dans la galerie : sur mobile on ne la
     montre qu'une fois, la galerie prend le relais du texte. */
  .story-media-doublon { display: none; }
  .vis-bouton { width: 40px; height: 40px; }
}

/* ---------- Bungalows / offres ---------- */
.rooms { padding: clamp(48px, 7vw, 96px) 0 0; background: linear-gradient(180deg, var(--cream), var(--sand) 12%, var(--sand)); }
.rooms-list { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 110px); }
.room { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 5vw, 72px); align-items: start; }
.room-alt { grid-template-columns: 7fr 5fr; }
.room-alt .room-media { order: 2; }
.room-media { position: sticky; top: 90px; margin: 0; }
.room-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.room-media figcaption { position: absolute; top: 16px; left: 16px; background: rgba(250, 247, 240, 0.92); color: var(--ink); border-radius: 999px; padding: 6px 12px 6px 8px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.room-media figcaption span { background: var(--ink); color: var(--cream); border-radius: 999px; width: 22px; height: 22px; display: grid; place-items: center; font-size: 11px; }
.room-body header { margin-bottom: 20px; }
.room-body h3 { font-size: clamp(38px, 4.5vw, 60px); margin-bottom: 8px; font-variant-numeric: lining-nums; }
.tagline { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); max-width: 46ch; }
.features { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; }
.features li { display: flex; gap: 12px; align-items: center; color: var(--ink-2); font-size: 15px; }
.features svg { color: var(--ocean); flex: none; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.price .from { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.price .amount { font-family: var(--font-display); font-size: 42px; font-weight: 600; line-height: 1; }
.price .sub { font-size: 14px; color: var(--muted); }

.booking { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset; }
.booking-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--terra); margin: 0 0 4px; }
.booking-test { font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--ink-2); margin: 0 0 16px; }
.widget { display: grid; gap: 12px; }
.widget label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.widget input, .widget textarea {
  font: 15px/1.4 var(--font-body); color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; width: 100%;
}
.widget input:focus, .widget textarea:focus { outline: 2px solid var(--ocean-2); outline-offset: 1px; border-color: transparent; }
.widget textarea { resize: vertical; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.widget .btn { justify-self: start; }

.bubble {
  position: relative; background: #dcf8c6; color: #1b2b1b; border-radius: 14px 14px 14px 4px; padding: 12px 14px; font-size: 14.5px; line-height: 1.45; max-width: 44ch;
}
.bubble::after { content: '12:04 ✓✓'; display: block; text-align: right; font-size: 10.5px; color: #5b7a5b; margin-top: 4px; }

/* Calendrier */
.synced { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ocean); font-weight: 600; margin: 0; }
.cal { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; }
.cal-month { }
.cal-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin: 0 0 8px; text-transform: capitalize; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-wd { font-size: 10.5px; text-align: center; color: var(--muted); font-weight: 700; padding: 4px 0; }
.cal-day { aspect-ratio: 1; display: grid; place-items: center; font-size: 13px; border-radius: 6px; background: var(--white); border: 1px solid transparent; cursor: pointer; user-select: none; }
.cal-day:hover { border-color: var(--ocean-2); }
.cal-day.empty { background: transparent; cursor: default; }
.cal-day.past { color: #b9c0c0; cursor: default; background: transparent; }
.cal-day.booked { background: repeating-linear-gradient(135deg, #e4dccd 0 3px, #f3ece0 3px 6px); color: #a09786; cursor: not-allowed; text-decoration: line-through; }
.cal-day.sel { background: var(--ocean); color: var(--white); }
.cal-day.range { background: #cfe3e2; color: var(--ink); }
.legend { list-style: none; padding: 0; margin: 0; display: flex; gap: 16px; font-size: 12.5px; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 6px; }
.sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid var(--line); }
.sw-free { background: var(--white); }
.sw-booked { background: repeating-linear-gradient(135deg, #e4dccd 0 3px, #f3ece0 3px 6px); }
.sw-sel { background: var(--ocean); }
.cal-summary { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.cal-summary strong { font-family: var(--font-display); font-size: 22px; font-weight: 600; }

/* Moteur */
.engine-bar { display: grid; grid-template-columns: 1fr 1fr 0.7fr auto; gap: 10px; align-items: end; }
.engine-results { display: grid; gap: 10px; }
.engine-results h4 { margin: 4px 0 0; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.er { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.er-name { font-weight: 700; margin: 0; }
.er-desc { margin: 0; font-size: 13px; color: var(--muted); }
.er-price { text-align: right; }
.er-price strong { font-family: var(--font-display); font-size: 26px; font-weight: 600; display: block; line-height: 1; }
.er-price small { color: var(--muted); font-size: 12px; }
.er-cta { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.er-left { font-size: 12px; color: var(--terra); font-weight: 700; }
.er.sold { opacity: 0.55; }
.er.sold .er-left { color: var(--muted); }

/* Inclus */
/* Le bloc « compris dans le séjour » n'a qu'un enfant ici : une grille de deux
   colonnes lui laissait 40 % de vide à droite. On le centre, largeur tenue. */
.included { padding: clamp(56px, 8vw, 110px) 0; }
.included-box { max-width: 860px; margin: 0 auto; background: var(--ink); color: var(--sand); border-radius: var(--radius); padding: clamp(26px, 3.5vw, 44px); }
.included-box h3 { color: var(--white); font-size: 28px; margin-bottom: 18px; }
.included-box ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.included-box li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.included-box svg { color: #f0c9ad; flex: none; margin-top: 4px; }
.monthly-note { font-size: 15px; color: var(--ink-2); border-left: 3px solid var(--terra); padding-left: 18px; }

/* ---------- Tableau comparatif ---------- */
.compare { padding: clamp(56px, 8vw, 110px) 0; }
.compare h2 { margin-bottom: 30px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14.5px; }
.compare th, .compare td { padding: 12px 10px; text-align: center; border-bottom: 1px solid var(--line); vertical-align: middle; }
.compare th[scope="row"] { text-align: left; font-weight: 500; color: var(--ink-2); }
.compare th[scope="row"] small { display: block; font-size: 12px; color: var(--muted); }
.compare thead th { font-family: var(--font-display); font-size: 24px; font-weight: 600; border-bottom: 2px solid var(--ink); }
.compare thead th:first-child { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.th-kicker { display: block; white-space: nowrap; font: 600 11px/1.2 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--terra); margin-bottom: 4px; }
.compare .yes { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ocean); color: var(--white); }
.compare .no { color: #c4c9c9; }
.compare tfoot td { font-family: var(--font-display); font-size: 20px; font-weight: 600; border-bottom: 0; }
.compare tfoot small { display: block; font: 12px/1.3 var(--font-body); color: var(--muted); }

.price-note { margin: 18px 0 0; font-size: 13.5px; color: var(--muted); }

/* ---------- Mentions légales ---------- */
.nav-solid { position: sticky; }
.texte { max-width: 780px; margin-inline: auto; padding-block: clamp(48px, 7vw, 96px); }
.texte h1 { font-size: clamp(38px, 5vw, 60px); margin-bottom: 0.8em; }
.texte section { margin-bottom: 36px; }
.texte h2 { font-size: 28px; margin-bottom: 10px; }
.texte p { color: var(--ink-2); }
.texte a:not(.btn) { color: var(--ocean); }
.texte-intro { font-size: 17px; margin-bottom: 36px; }
.texte-maj { font-size: 13px; color: var(--muted); margin-top: 40px; }
.footer a { color: inherit; }

/* ---------- Avis ---------- */
.reviews { background: var(--sand); padding: clamp(56px, 8vw, 110px) 0; }
.review-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review { background: var(--cream); border-radius: var(--radius); padding: 28px; border: 1px solid var(--line); }
.stars { color: var(--terra); display: flex; gap: 2px; margin: 0 0 12px; }
.review blockquote { margin: 0 0 14px; font-family: var(--font-display); font-size: 22px; line-height: 1.3; }
.who { font-size: 13px; color: var(--muted); margin: 0; letter-spacing: 0.04em; }
.note-center { text-align: center; color: var(--muted); font-size: 14px; margin: 28px 0 0; }

/* ---------- Histoire ---------- */
/* Le récit : la grille appartient au .wrap intérieur, pas à la section —
   sinon la section met son unique enfant dans la première colonne et laisse
   la seconde vide. La photo prend la part la plus large. */
.story { padding: clamp(64px, 9vw, 128px) 0; }
.story .grid-2 { grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.story-media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.story-text p { font-size: 17px; line-height: 1.68; color: var(--ink-2); max-width: 54ch; margin-bottom: 1.15em; }
.story-text h2 { font-size: clamp(34px, 3.4vw, 46px); }
.story-text .who { margin-top: 22px; margin-bottom: 0; font-style: italic; color: var(--muted); }
.signature-line { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--ink); margin-top: 22px; }

/* ---------- Process ---------- */
.process { background: var(--ink); color: var(--sand); padding: clamp(56px, 8vw, 110px) 0; }
.process h2 { color: var(--white); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: step; }
.steps li { border-top: 1px solid rgba(255, 255, 255, 0.18); padding-top: 22px; }
.step-n { font-family: var(--font-display); font-size: 44px; color: #f0c9ad; display: block; line-height: 1; margin-bottom: 14px; }
.steps h3 { color: var(--white); font-size: 28px; }
.steps p { color: rgba(243, 236, 224, 0.82); font-size: 15.5px; }

/* ---------- FAQ ---------- */
.faq { padding: clamp(56px, 8vw, 110px) 0; }
.faq-list { max-width: 820px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font-family: var(--font-display); font-size: 24px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.plus { position: relative; width: 22px; height: 22px; flex: none; }
.plus::before, .plus::after { content: ''; position: absolute; background: var(--ink); inset: 50% auto auto 50%; transform: translate(-50%, -50%); transition: transform 0.2s ease; }
.plus::before { width: 16px; height: 1.5px; }
.plus::after { width: 1.5px; height: 16px; }
details[open] .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details p { margin: -6px 0 22px; color: var(--ink-2); max-width: 66ch; }

/* ---------- Contact ---------- */
.contact { background: var(--ocean); color: var(--white); padding: clamp(64px, 9vw, 128px) 0; text-align: center; }
.contact h2 { color: var(--white); max-width: 18ch; margin-inline: auto; }
.contact .lead { color: rgba(255, 255, 255, 0.85); margin-inline: auto; }
.contact .hero-ctas { justify-content: center; margin-top: 8px; }

/* ---------- Footer et signature 92 Media House ---------- */
.footer { background: var(--ink); color: var(--sand); padding: 48px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.footer .brand { font-size: 28px; margin: 0 0 8px; }
.muted { color: rgba(243, 236, 224, 0.65); font-size: 13.5px; margin: 0 0 6px; }
.footer-lang { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.footer .lang { border-color: rgba(243, 236, 224, 0.4); }
.sig { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border: 1px solid rgba(243, 236, 224, 0.18); border-radius: var(--radius); }
.sig img { width: 88px; height: 88px; flex: none; }
/* Le cachet rond du 92, teinté par la palette du site : il prend la couleur
   d'accent du client (le vert, chez Casa Marea) au lieu d'être un aplat noir
   invisible sur le pied de page sombre. Le SVG ne sert que de masque, donc
   changer --ocean-2 suffit à changer le cachet. */
.sig-seal {
  display: inline-block; vertical-align: middle; flex: none; width: 44px; height: 44px;
  background-color: var(--ocean-2);
  background-color: color-mix(in srgb, var(--ocean-2) 75%, var(--sand));
  -webkit-mask: url(logo/seal-black.svg) center / contain no-repeat;
  mask: url(logo/seal-black.svg) center / contain no-repeat;
}
.sig-link:hover .sig-seal, .footer-92 a:hover .sig-seal { background-color: var(--sand); }
.footer-92 .sig-seal { width: 60px; height: 60px; }
.sig-made { margin: 0; font-size: 13px; color: rgba(243, 236, 224, 0.7); }
.sig-made strong { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--white); line-height: 1.1; letter-spacing: 0.02em; }
.sig-tag { margin: 4px 0 8px; font-size: 13px; color: rgba(243, 236, 224, 0.7); }
/* La signature du pied de page reste une mention discrète : en minuscules,
   sans graisse ni interlettrage de titre. */
.sig-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; text-transform: lowercase; color: #f0c9ad; text-decoration: none; }
.sig-link:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .nav-right .btn-small svg { display: none; }
  .nav-right .btn-small { gap: 0; }
}

/* ---------- Modal et toast ---------- */
.modal[hidden], .toast[hidden], [hidden] { display: none !important; }
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(28, 42, 43, 0.55); backdrop-filter: blur(4px); }
.modal-card { position: relative; background: var(--cream); color: var(--ink); border-radius: 14px; padding: 32px; width: min(540px, 100%); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.5); }
.modal-card h3 { font-size: 30px; margin-bottom: 10px; padding-right: 30px; }
.modal-card p { color: var(--ink-2); font-size: 15px; }
.modal-card pre { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 14px; font: 13.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; margin: 0 0 16px; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.modal-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 110; background: var(--ink); color: var(--cream); padding: 12px 18px; border-radius: 999px; font-size: 14px; box-shadow: var(--shadow); }
.receipt { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin: 0 0 16px; display: grid; gap: 4px; font-size: 14.5px; }
.receipt .total { display: flex; justify-content: space-between; font-weight: 700; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
.receipt .total span:last-child { font-family: var(--font-display); font-size: 22px; }

/* ---------- Guide d'accueil ---------- */
.guide-page .g-welcome { text-align: center; padding: clamp(56px, 8vw, 100px) 0 clamp(24px, 4vw, 40px); max-width: 780px; }
.g-quote { margin: 0 0 14px; font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); line-height: 1.3; font-style: italic; }
.g-section { padding: clamp(40px, 6vw, 80px) 0; }
.g-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.g-cards-3 { grid-template-columns: repeat(3, 1fr); }
.g-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.g-card h3 { font-size: 24px; margin-bottom: 6px; }
.g-card p { margin: 0; color: var(--ink-2); font-size: 15px; }
.g-icon { font-size: 26px; display: block; margin-bottom: 10px; }
.g-card-row { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.g-card-row .g-icon { margin: 0; }
.g-map { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ocean); text-decoration: none; }
.g-arrival { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.g-arrival figure { margin: 0; }
.g-arrival img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.g-eat { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(28px, 5vw, 70px); align-items: start; }
.g-eat figure { margin: 0; position: sticky; top: 90px; }
.g-eat img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.g-list { list-style: none; padding: 0; margin: 0; }
.g-list li { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); }
.g-list h3 { font-size: 26px; margin-bottom: 4px; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.g-list h3 small { font: 600 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--terra); }
.g-list p { margin: 0; color: var(--ink-2); }
.g-n { font-family: var(--font-display); font-size: 22px; color: var(--muted); padding-top: 4px; }
.g-review { text-align: center; padding: clamp(56px, 8vw, 100px) 0; max-width: 640px; }
.g-review .stars { justify-content: center; }
.g-review .lead { margin-inline: auto; }

/* ---------- Apparition au scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .room { grid-template-columns: minmax(0, 1fr); }
  .room-alt .room-media { order: 0; }
  .room-media { position: relative; top: 0; }   /* top: 90px (sticky, bureau) décalerait l'image sur le titre */
  .room-media img { aspect-ratio: 16 / 10; }
  .review-list { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .g-cards-3 { grid-template-columns: 1fr; }
  .g-eat { grid-template-columns: 1fr; }
  .g-eat figure { position: static; }
  .g-eat img { aspect-ratio: 16 / 9; }
}
@media (max-width: 800px) {
  .nav-links { display: none; }
  .intro { grid-template-columns: 1fr; }
  .story .grid-2 { grid-template-columns: 1fr; }
  .intro-media { order: -1; }
  .intro-media img, .story-media img { aspect-ratio: 16 / 10; }
  .footer-grid { grid-template-columns: 1fr; }
  .g-arrival { grid-template-columns: 1fr; }
  .g-cards { grid-template-columns: 1fr; }
  .engine-bar { grid-template-columns: 1fr 1fr; }
  .engine-bar .btn { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 520px) {
  .hero-inner { padding-top: 90px; }
  .nav { gap: 10px; padding-inline: 16px; }
  /* Un nom long (Villa des Ambassadeurs) passe sur deux lignes plutôt que de pousser le bouton hors de l'écran. */
  .nav .brand { font-size: 22px; white-space: normal; line-height: 1.05; min-width: 0; }
  .nav-right { flex-shrink: 0; }
  .nav-right { gap: 8px; }
  .lang > * { padding: 5px 8px; }
  .nav .btn-small { padding: 10px 12px; }
  .grid-2 { grid-template-columns: 1fr; }
  .sig { flex-direction: column; align-items: flex-start; }
  .nav .btn-small span { display: none; }
  .booking { padding: 16px; }
  .bubble { max-width: 100%; }
  .cal { grid-template-columns: 1fr; }
}

/* =========================================================================
   Formulaire de demande (offres Essentiel et au-dessus)
   ========================================================================= */
.demande { max-width: 720px; margin: 28px auto 0; text-align: left; }
.demande label { display: block; margin: 0 0 14px; font-size: 14px; letter-spacing: .02em; }
.demande input, .demande select, .demande textarea {
  width: 100%; margin-top: 6px; font: inherit; font-size: 15px;
  color: var(--ink); background: var(--white);
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px; padding: 11px 13px;
}
.demande input:focus, .demande select:focus, .demande textarea:focus {
  outline: 2px solid var(--white); outline-offset: 1px;
}
.demande-grid { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* La barre de demande par WhatsApp : trois champs, un bouton, rien d'autre.
   Le bouton a le même poids que celui du formulaire qu'il remplace. */
.demande-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 12px; }
.demande-wa .btn-wa { padding: 14px 26px; }
.demande-aide { margin: 0 0 16px; font-size: 14px; color: rgba(243, 236, 224, .8); }
.demande-mail { font-size: 14px; color: rgba(243, 236, 224, .8); text-decoration: underline; text-underline-offset: 3px; }
.demande-mail:hover { color: var(--white); }
@media (max-width: 560px) {
  .demande-wa .btn-wa { width: 100%; justify-content: center; }
  .demande-actions { gap: 14px; }
}
.demande button {
  font: inherit; font-weight: 600; margin-top: 6px; cursor: pointer;
  color: var(--ink); background: var(--white);
  border: 0; border-radius: 999px; padding: 13px 28px;
}
.demande button[disabled] { opacity: .55; cursor: default; }
.demande .status { margin-top: 12px; font-size: 14px; min-height: 1.2em; }
.demande .hp { position: absolute; left: -9999px; }
.demande-ok { display: none; max-width: 620px; margin: 24px auto 0; }
.demande-ok h3 { font-family: var(--font-display); font-size: 26px; margin: 0 0 8px; }
.contact.sent .demande { display: none; }
.contact.sent .demande-ok { display: block; }

/* Bandeau de repères sous l'accroche */
/* Le bandeau des faits : une ligne, des points de séparation qui ne se
   détachent jamais du texte, et des faits qui ne se coupent pas en deux. */
.facts ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 0; margin: 34px 0 0; padding: 0; }
.facts li { flex: none; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; padding: 0 22px; }
.facts li + li { border-left: 1px solid var(--line); }
@media (max-width: 700px) {
  /* Sur deux rangées, un trait à gauche en début de ligne serait orphelin. */
  .facts li { padding: 0 14px; font-size: 12.5px; }
}

/* ---------- Dates prises et acompte (offres Confort et Complet) ---------- */
/* Le calendrier des dates prises : une carte claire posée sur la section
   sombre, aux mêmes couleurs que la démo du showroom. */
.dispo {
  max-width: 720px; margin: 24px auto 0; padding: 18px 20px 16px; text-align: left;
  background: var(--cream); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); box-shadow: var(--shadow);
}
.dispo-titre { margin: 0 0 14px; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.dispo-mois { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px 18px; }
.dispo .cal-title { font-size: 17px; }
.dispo .cal-day { font-family: inherit; padding: 0; -webkit-appearance: none; appearance: none; cursor: default; }
.dispo .cal-day:hover { border-color: transparent; }
/* Les jours libres se choisissent au clic : arrivée, puis départ. */
.dispo button.cal-day:not([disabled]) { cursor: pointer; }
.dispo button.cal-day:not([disabled]):hover { border-color: var(--ocean-2); }
.dispo button.cal-day:focus-visible { outline: 2px solid var(--ocean-2); outline-offset: 1px; }
.dispo .cal-day.today { box-shadow: inset 0 0 0 2px var(--ocean-2); }
.dispo .dispo-note { color: var(--muted); opacity: 1; }
/* Sur un téléphone, six mois en une colonne feraient deux mille pixels de
   calendrier avant le formulaire : on passe à deux colonnes plus serrées. */
@media (max-width: 560px) {
  .dispo { padding: 14px; }
  .dispo-mois { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
  .dispo .cal-title { font-size: 14px; margin-bottom: 4px; }
  .dispo .cal-grid { gap: 2px; }
  .dispo .cal-wd { font-size: 9px; padding: 2px 0; }
  /* aspect-ratio imposerait la largeur par la hauteur : les cases seraient
     plus larges que l'écran à deux mois par rangée. */
  .dispo .cal-day { font-size: 11px; border-radius: 4px; aspect-ratio: auto; min-height: 26px; }
}
.dispo-note, .demande-note { margin: 10px 0 0; font-size: 13px; opacity: .8; }
.demande-note { max-width: 720px; margin-left: auto; margin-right: auto; text-align: left; }
#dispo-note[hidden], .dispo[hidden] { display: none; }
/* Le mot sur les dates prises vit dans le formulaire, juste sous les dates. */
#dispo-note { margin: 2px 0 14px; color: #f3c9b6; opacity: 1; }
.demande input[aria-invalid="true"] { outline: 2px solid #e0a58f; }

/* ---------- Moteur de réservation (offre Complet) ---------- */
.card-moteur {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
}
.card-moteur iframe { width: 100%; min-height: 720px; border: 0; display: block; }

/* ---------- Les offres (forfaits, saisons) ---------- */
.offres { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.offre { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; }
.offre h3 { font-size: 26px; margin-bottom: 8px; }
.offre p { color: var(--ink-2); font-size: 15px; margin: 0 0 10px; }
.offre .offre-inclus { font-size: 13px; color: var(--muted); }
.offre-lien { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terra); text-decoration: none; }
.offre-lien:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Le bloc « Réserver » maison : chambre, calendrier, moteur ---------- */
.resa { padding: clamp(48px, 7vw, 96px) 0; background: var(--sand); scroll-margin-top: 60px; }
.resa-card { background: var(--white); border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.4); box-shadow: var(--shadow); padding: clamp(18px, 3vw, 36px); }
.resa-step { border: 0; padding: 0; margin: 0 0 28px; min-width: 0; }
.resa-step legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 14px; font: 600 12px/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); }
.resa-step legend span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--cream); letter-spacing: 0; font-size: 12px; }

.resa-rooms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.resa-room { position: relative; display: flex; flex-direction: column; border: 1.5px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: pointer; background: var(--cream); transition: border-color .2s, box-shadow .2s; }
.resa-room input { position: absolute; opacity: 0; pointer-events: none; }
.resa-room img, .resa-room-all { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.resa-room-all { background: linear-gradient(135deg, var(--sand), color-mix(in srgb, var(--terra) 30%, var(--sand))); }
.resa-room-txt { padding: 10px 12px 12px 36px; position: relative; display: flex; flex-direction: column; gap: 2px; }
.resa-room-txt::before { content: ''; position: absolute; left: 12px; top: 13px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--muted); background: var(--white); }
.resa-room strong { font-size: 14px; font-weight: 600; }
.resa-room small { font-size: 12.5px; color: var(--muted); }
.resa-room:hover { border-color: var(--ocean-2); }
.resa-room:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); background: var(--white); }
.resa-room:has(input:checked) .resa-room-txt::before { border: 5px solid var(--ink); }
.resa-room:has(input:focus-visible) { outline: 2px solid var(--terra); outline-offset: 2px; }

.resa-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.resa-choix { margin: 0; text-align: center; font-size: 15px; color: var(--ink-2); flex: 1; }
.resa-choix strong { color: var(--ink); font-weight: 600; }
.resa-min { display: block; margin-top: 4px; font-size: 13px; color: var(--terra); }
.resa-choix.secoue { animation: resa-secoue .4s; color: var(--terra); }
@keyframes resa-secoue { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.resa-effacer { border: 0; background: none; padding: 0 0 0 6px; font: inherit; font-size: 13px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.resa-nav { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); font-size: 22px; line-height: 1; color: var(--ink); cursor: pointer; flex: none; }
.resa-nav:hover:not(:disabled) { border-color: var(--ink); }
.resa-nav:disabled { opacity: 0.3; cursor: default; }
.resa-mois { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; }
.resa-m-titre { text-align: center; font-family: var(--font-display); font-size: 22px; margin: 0 0 10px; text-transform: capitalize; }
.resa-jours { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; }
.resa-j { text-align: center; font-size: 11.5px; font-weight: 600; color: var(--muted); padding-bottom: 6px; text-transform: uppercase; }
.resa-d { aspect-ratio: 1; border: 0; background: none; font: 500 14px/1 var(--font-body); color: var(--ink); cursor: pointer; border-radius: 0; position: relative; }
.resa-d:hover:not(:disabled) { background: var(--sand); border-radius: 50%; }
.resa-d:disabled { color: color-mix(in srgb, var(--muted) 45%, transparent); cursor: default; }
.resa-d.pris { text-decoration: line-through; color: color-mix(in srgb, var(--muted) 60%, transparent); }
.resa-d.dans { background: color-mix(in srgb, var(--terra) 16%, transparent); }
.resa-d.debut, .resa-d.fin { background: var(--ink); color: var(--cream); }
.resa-d.debut { border-radius: 50% 0 0 50%; }
.resa-d.fin { border-radius: 0 50% 50% 0; }
.resa-d.seul { border-radius: 50%; }
.resa-legende { margin: 12px 0 0; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.resa-pastille { display: inline-block; width: 22px; height: 1px; background: var(--muted); }

.resa-bas { display: flex; align-items: end; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 22px; }
.resa-pers { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.resa-pers[hidden] { display: none; }
.resa-pers select { font: 500 15px var(--font-body); padding: 11px 36px 11px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); color: var(--ink); }
.resa-go { margin-left: auto; }
.resa-go.attente { opacity: 0.55; }
.resa-note { margin: 16px 0 0; font-size: 13.5px; color: var(--muted); }

@media (max-width: 900px) {
  .resa-rooms { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .resa-mois { grid-template-columns: 1fr; }
  .resa-go { margin-left: 0; width: 100%; justify-content: center; }
}

/* Menu long (avec « Réserver ») : pas de retour à la ligne ; tant que le menu est visible, le lien
   « Réserver » remplace le bouton de droite, qui revient sur tablette et téléphone. */
.nav-links a { white-space: nowrap; }
.nav-resa .nav-links { gap: clamp(14px, 1.7vw, 26px); }
@media (min-width: 1041px) { .nav-resa .nav-right .btn-small { display: none; } }
@media (max-width: 1040px) { .nav-resa .nav-links { display: none; } }
.resa-d { aspect-ratio: auto; height: 42px; }

/* ---------- Carrousel des photos d'une chambre ---------- */
.car { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.car-piste { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.car-piste::-webkit-scrollbar { display: none; }
.car-piste:focus-visible { outline: 2px solid var(--terra); outline-offset: -2px; }
.room-media .car-piste img { flex: 0 0 100%; scroll-snap-align: start; border-radius: 0; box-shadow: none; }
.car-btn {
  position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%;
  border: 0; background: rgba(250, 247, 240, 0.92); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; padding-bottom: 3px; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.45); transition: opacity .2s, background .2s;
}
.car-btn:hover:not(:disabled) { background: var(--white); }
.car-btn:disabled { opacity: 0; pointer-events: none; }
.car-prec { left: 12px; }
.car-suiv { right: 12px; }
.car-compte { position: absolute; right: 14px; bottom: 14px; background: rgba(28, 24, 20, 0.62); color: var(--white); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px; }
@media (hover: none) { .car-btn { width: 36px; height: 36px; font-size: 22px; } }
/* Les photos de chambre sont en paysage (3:2) : un carrousel les montre entières — lit et fenêtre —
   au lieu de les recadrer en portrait comme une photo seule. */
.room-media .car-piste img { aspect-ratio: 3 / 2; }
.room:has(.car) { grid-template-columns: 1fr 1fr; align-items: center; }
@media (max-width: 960px) { .room:has(.car) { grid-template-columns: 1fr; } }

/* =========================================================================
   Sites à plusieurs pages (config.pages) : en-têtes de page, logo, quartier,
   aperçu des chambres, FAQ par thèmes, bouton flottant, illustration du pied.
   ========================================================================= */
.page-hero { min-height: min(58vh, 540px); }
.page-hero h1 { font-size: clamp(46px, 7vw, 92px); }

/* Le logo du client, d'une seule couleur : son PNG ne sert que de masque. */
.brand-logo { display: inline-flex; align-items: center; }
.brand-logo .logo {
  display: block; width: clamp(118px, 12vw, 150px); aspect-ratio: 1042 / 392; background: currentColor;
  -webkit-mask: var(--logo) left center / contain no-repeat; mask: var(--logo) left center / contain no-repeat;
}

/* Le bouton « Réserver » reste visible en haut à droite, menu affiché ou non. */
@media (min-width: 1041px) { .nav-pages .nav-right .btn-small { display: inline-flex; } }

/* Le quartier */
.quartier { padding: clamp(64px, 9vw, 120px) 0 clamp(40px, 6vw, 80px); }
.quartier .grid-2 { grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.quartier-texte p { font-size: 17px; line-height: 1.68; color: var(--ink-2); max-width: 56ch; }
.quartier-texte h2 { font-size: clamp(34px, 3.4vw, 46px); }
.quartier-carte { margin: 0; }
.quartier-carte img { width: 100%; height: auto; display: block; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
.lieux { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.lieux li { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.lieu-nom { flex: 1; }
.lieu-temps { color: var(--terra); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.lien-fleche { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terra); text-decoration: none; }
.lien-fleche:hover { text-decoration: underline; text-underline-offset: 4px; }

/* L'aperçu des chambres sur l'accueil */
.rooms-apercu { padding-bottom: clamp(48px, 7vw, 96px); }
.cartes-chambres { list-style: none; padding: 0; margin-top: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.carte-chambre a { display: block; text-decoration: none; color: inherit; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.carte-chambre a:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.carte-chambre img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.carte-chambre-txt { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; }
.carte-chambre strong { font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.1; }
.carte-chambre small { color: var(--muted); font-size: 13.5px; margin-bottom: 8px; }

/* La FAQ par thèmes */
.faq-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 36px; }
.faq-filtre { border: 1px solid var(--line); background: var(--white); color: var(--ink); border-radius: 999px; padding: 9px 16px; font: 600 13px var(--font-body); cursor: pointer; }
.faq-filtre:hover { border-color: var(--ink); }
.faq-filtre[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.faq-page { padding-block: clamp(48px, 7vw, 88px); }
.faq-theme { margin-bottom: 44px; }
.faq-theme h2 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 14px; }
.faq-theme[hidden] { display: none; }
.acces { grid-template-columns: repeat(2, 1fr); }

/* Le bouton « Réserver » flottant, sur téléphone */
.resa-flottant { display: none; }
@media (max-width: 800px) {
  .nav-pages .nav-right .btn-small { display: none; }
  .resa-flottant {
    display: inline-flex; align-items: center; gap: 8px; position: fixed; z-index: 60; left: 50%; bottom: 18px;
    transform: translateX(-50%); padding: 14px 26px; border-radius: 999px; background: var(--ink); color: var(--cream);
    font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.55);
    transition: opacity .25s, transform .25s;
  }
  .resa-flottant.cache { opacity: 0; pointer-events: none; transform: translate(-50%, 16px); }
  .cartes-chambres { grid-template-columns: 1fr; }
  .lieux { grid-template-columns: 1fr; }
  .acces { grid-template-columns: 1fr; }
  .quartier .grid-2 { grid-template-columns: 1fr; }
}
@media (min-width: 801px) and (max-width: 1000px) { .cartes-chambres { grid-template-columns: repeat(2, 1fr); } }

/* L'illustration au-dessus du pied de page : une rue dessinée, la maison au milieu. */
.illus-pied { background: var(--cream); line-height: 0; }
.illus-pied img { width: 100%; height: auto; display: block; }

/* Logo en deux fichiers : le clair sur la photo, le sombre quand la barre devient claire. */
.brand-deux img { height: clamp(40px, 4.2vw, 52px); width: auto; display: block; }
.brand-deux .logo-sombre { display: none; }
.nav.scrolled .brand-deux .logo-clair, .nav-solid .brand-deux .logo-clair { display: none; }
.nav.scrolled .brand-deux .logo-sombre, .nav-solid .brand-deux .logo-sombre { display: block; }
.brand-pied img { height: 58px; width: auto; display: block; }
/* La carte du quartier : on la montre en grand, sans cadre, elle a son propre fond. */
.quartier .grid-2 { grid-template-columns: 0.9fr 1.1fr; }

/* Retouches du 01/10/2026 */
.hero .kicker-light { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); color: #f6e3c8; }
.page-hero::after { background: linear-gradient(180deg, rgba(20, 18, 16, 0.45) 0%, rgba(20, 18, 16, 0.12) 40%, rgba(20, 18, 16, 0.72) 100%); }
.rooms-page { padding-top: clamp(40px, 6vw, 72px); }
/* Sur la page Quartier, la carte prend la place qu'elle mérite et reste à l'écran pendant la lecture. */
.quartier-page .grid-2 { grid-template-columns: 0.85fr 1.25fr; align-items: start; }
.quartier-page .quartier-carte { position: sticky; top: 96px; }
@media (max-width: 800px) {
  .quartier .grid-2, .quartier-page .grid-2 { grid-template-columns: 1fr; }
  .quartier-page .quartier-carte { position: static; }
  .quartier-carte { order: -1; }
}

/* Retouches du 01/10/2026, second retour de Thibault */
html, body { overflow-x: clip; }   /* jamais de défilement latéral sur téléphone */
/* La barre de menu avec logo est plus haute : la photo remonte d'autant, sans bande beige au-dessus. */
.nav-pages + main > .hero:first-child { margin-top: calc(-1 * (clamp(40px, 4.2vw, 52px) + 28px + 2px)); }
/* La photo d'accueil « accroche » : un voile plus soutenu, la phrase en grand, les arguments, un gros bouton. */
.hero-accroche::after { background: linear-gradient(180deg, rgba(20, 18, 16, 0.5) 0%, rgba(20, 18, 16, 0.32) 40%, rgba(20, 18, 16, 0.7) 100%); }
.hero-titre { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 6.2vw, 84px); line-height: 1.04; max-width: 15ch; margin: 0 0 22px; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.3); }
.hero-points { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.hero-points li { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; background: rgba(20, 18, 16, 0.25); backdrop-filter: blur(4px); }
.btn-grand { padding: 18px 30px; font-size: 16px; }
.nav-pages .nav-right .btn-small { padding: 12px 22px; font-size: 14px; }
@media (max-width: 520px) { .hero-points li { font-size: 11.5px; padding: 7px 11px; } .btn-grand { width: 100%; justify-content: center; } }

/* Photos de l'accueil en fondu (images.hero en liste) */
.hero-img.diapo { opacity: 0; transition: opacity 1.6s ease; }
.hero-img.diapo.actif { opacity: 1; }

/* Pages de texte (mentions, confidentialité) : barre claire et lisible, sans photo dessous. */
.nav-solid { background: var(--cream); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.nav-solid .lang [aria-current="true"] { color: var(--cream); background: var(--ink); }
.pied-liens a { margin-right: 2px; }
.demande-rgpd { margin: 12px 0 0; font-size: 12.5px; opacity: 0.75; }
.demande-rgpd a { color: inherit; }

/* ---------- Le bloc « Réserver » en fenêtre (moteur.popup) ---------- */
.resa-modale { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; opacity: 0; transition: opacity .25s ease; }
.resa-modale[hidden] { display: none; }
.resa-modale.ouvert { opacity: 1; }
.resa-fond { position: absolute; inset: 0; background: rgba(20, 18, 16, 0.55); backdrop-filter: blur(3px); }
.resa-boite { position: relative; width: min(960px, 100%); max-height: calc(100vh - 48px); overflow: auto; overscroll-behavior: contain; background: var(--sand); border-radius: calc(var(--radius) * 1.4); padding: clamp(20px, 3vw, 36px); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6); transform: translateY(14px); transition: transform .25s ease; }
.resa-modale.ouvert .resa-boite { transform: none; }
.resa-tete { margin: 0 44px 18px 0; }
.resa-tete h2 { font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 6px; }
.resa-tete .lead { margin: 0; font-size: 15.5px; }
.resa-fermer { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding-bottom: 2px; }
.resa-fermer:hover { border-color: var(--ink); }
.resa-boite .resa-card { box-shadow: none; }
body.resa-ouverte { overflow: hidden; }
body.resa-ouverte .resa-flottant { display: none; }
@media (max-width: 760px) {
  .resa-modale { padding: 0; place-items: stretch; }
  .resa-boite { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; padding: 18px 16px 24px; }
}
/* Dans la fenêtre : plus compact, et le bouton « Voir les tarifs » toujours visible en bas. */
.resa-boite .resa-step legend { display: none; }
.resa-boite .resa-step { margin-bottom: 16px; }
.resa-boite .resa-card { padding-bottom: 0; }
.resa-boite .resa-d { height: 36px; }
.resa-boite .resa-m-titre { margin-bottom: 4px; }
.resa-boite .resa-bas { position: sticky; bottom: 0; background: var(--white); padding: 16px 0 18px; margin-top: 8px; }
.resa-boite .resa-note { margin: 0 0 18px; }
.resa-boite .resa-tete .lead { max-width: 62ch; }

/* Activités (photo + texte), 08/10/2026 : sites dont les activités sont le point fort (Can Bora) */
.activites { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.activite img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); display: block; margin-bottom: 12px; }
.activite h3 { font-size: 22px; margin-bottom: 4px; }
.activite p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* iPhone (Safari) : un champ de date a une largeur minimale propre et une case de grille ne
   rétrécit pas sous son contenu ; sans ces règles, le formulaire déborde à droite (Thibault, 09/10). */
.demande-grid > label, .demande label { min-width: 0; }
.demande input, .demande select, .demande textarea { min-width: 0; max-width: 100%; }
.demande input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-height: 46px; line-height: 1.2; }
.demande input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.demande input[type="date"]::-webkit-calendar-picker-indicator { margin-left: 0; }
/* iPhone : sous 16 px, Safari zoome la page dès qu'on touche un champ et elle paraît déborder.
   16 px sur téléphone, pour tous les champs du site (formulaire de contact et bloc Réserver). */
@media (max-width: 760px) {
  input, select, textarea { font-size: 16px !important; }
}
/* Tous les champs d'une ligne à la même hauteur, liste déroulante comprise (Safari la dessine plus basse). */
.demande input:not([type="checkbox"]):not([type="radio"]), .demande select { height: 48px; min-height: 48px; }
.demande select {
  -webkit-appearance: none; appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232b2520' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

/* ---------- Bandeau de consentement à la mesure d'audience (assets/mesure.js) ----------
   Refuser et Accepter ont exactement le même poids : c'est une exigence de la CNIL. */
.cookies {
  position: fixed; z-index: 140; left: 16px; right: 16px; bottom: 16px; margin: 0 auto; max-width: 560px;
  background: var(--cream, #fbf8f3); color: var(--ink, #2b2520); border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .35); font-size: 14.5px; line-height: 1.5;
}
.cookies[hidden] { display: none; }
.cookies p { margin: 0 0 12px; }
.cookies a { color: inherit; text-decoration: underline; }
.cookies-choix { display: flex; gap: 10px; }
.cookies-btn {
  flex: 1; justify-content: center; cursor: pointer; padding: 11px 14px; border-radius: 999px;
  border: 1px solid var(--ink, #2b2520); background: transparent; color: var(--ink, #2b2520); font: inherit; font-weight: 600;
}
.cookies-btn:hover { background: var(--ink, #2b2520); color: var(--cream, #fbf8f3); }