/* ============================================================
   MORE Surf Lodge, Design system
   Palette: Green Ink (logo) · Sand/Paper surfaces · Terracotta accent
   "Less noise. More life."
   ============================================================ */

:root {
  /* --- Green Ink (primary, sampled from the logo) --- */
  --ink-900: #0b1f19;
  --ink-800: #133029;          /* base */
  --ink-700: #1b443a;
  --ink-600: #28604f;
  --ink-500: #3a7a65;
  --ink-400: #6aa18c;
  --ink-300: #97c0ad;
  --ink-200: #c2dbce;
  --ink-100: #e4f0e9;

  /* --- Sand / Paper surfaces (never white-gray) --- */
  --sand-000: #ffffff;
  --sand-050: #fbf9f4;         /* paper */
  --sand-100: #f5ede0;         /* cream */
  --sand-200: #eddfc9;
  --sand-300: #e0cdaf;

  /* --- Terracotta (sun accent, sparingly: CTAs, highlights) --- */
  --terra-900: #6e3414;
  --terra-800: #86421a;
  --terra-700: #b25e24;        /* base */
  --terra-600: #c67a33;
  --terra-500: #d29049;
  --terra-400: #e0ac72;
  --terra-300: #ecc89f;
  --terra-200: #f5dfc5;
  --terra-100: #faefe0;

  /* --- Semantic aliases --- */
  --surface-card: var(--sand-000);
  --surface-paper: var(--sand-050);
  --surface-sand: var(--sand-100);
  --surface-ink: var(--ink-900);
  --text-primary: var(--ink-900);
  --text-secondary: #47584f;
  --text-on-ink: var(--sand-050);
  --text-muted-on-ink: var(--ink-300);
  --text-accent: var(--terra-800);   /* price highlight, tags (AA on cream) */
  --cta-bg: var(--terra-700);
  --cta-bg-hover: var(--terra-800);
  --border-soft: #e5dcc9;
  --ring: var(--terra-700);

  /* --- Type --- */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
  --fs-h1: clamp(2.4rem, 6vw, 4.2rem);
  --fs-h2: clamp(1.7rem, 3.4vw, 2.4rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* --- Spacing (spacious marketing scale) --- */
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 48px; --space-6: 64px; --space-7: 96px; --space-8: 128px;

  /* --- Misc --- */
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 2px 6px rgba(11, 31, 25, .05), 0 14px 34px rgba(11, 31, 25, .08);
  --shadow-lift: 0 6px 14px rgba(11, 31, 25, .10), 0 24px 48px rgba(11, 31, 25, .14);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --z-header: 100; --z-sticky: 200; --z-widget: 300;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  /* The warm sand/ink palette IS the brand: opt out of Android/Chrome forced
     dark-mode inversion and keep native controls (date inputs…) light. */
  color-scheme: only light;
}
/* `clip` (not `hidden`): hidden makes html/body a horizontal scroll container that
   chained touch gestures (e.g. swiping the stamps carousel past its end) can still
   shift sideways on mobile; clip forbids horizontal scrolling entirely. */
html, body { overflow-x: hidden; overflow-x: clip; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--surface-paper);
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--surface-ink); color: var(--text-on-ink);
  padding: 10px 18px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: .01em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.wrap { max-width: 1160px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 40px); }
.section { padding-block: var(--space-7); }
.section--sand { background: var(--surface-sand); }
.section--ink { background: var(--surface-ink); color: var(--text-on-ink); }
.kicker {
  display: inline-block; font-size: .78rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-accent);
  margin-bottom: var(--space-2);
}
.section--ink .kicker { color: var(--terra-400); }
.section-head { max-width: 640px; margin-bottom: var(--space-5); }
.section-head p { color: var(--text-secondary); margin-top: var(--space-2); }
.section--ink .section-head p { color: var(--text-muted-on-ink); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 12px 26px;
  border: none; border-radius: 999px;
  font-weight: 600; font-size: 1rem; text-decoration: none;
  transition: background-color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
  touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn svg { flex: none; }
.btn--primary { background: var(--cta-bg); color: #fff; box-shadow: 0 6px 18px rgba(178, 94, 36, .32); }
.btn--primary:hover { background: var(--cta-bg-hover); box-shadow: 0 8px 24px rgba(178, 94, 36, .4); }
/* Header WhatsApp button, the site's own green (ink-600), not WhatsApp's brand green */
.btn--wa { background: var(--ink-600); color: #fff; box-shadow: 0 6px 18px rgba(40, 96, 79, .3); }
.btn--wa:hover { background: var(--ink-700); box-shadow: 0 8px 24px rgba(40, 96, 79, .4); }
.btn--ink { background: var(--ink-800); color: var(--text-on-ink); }
.btn--ink:hover { background: var(--ink-700); }
.btn--ghost {
  background: transparent; color: var(--text-primary);
  border: 1.5px solid var(--ink-800);
}
.btn--ghost:hover { background: var(--ink-100); }
.btn--sm { min-height: 42px; padding: 9px 20px; font-size: .92rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(251, 249, 244, .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}
.site-header .wrap {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 72px;
}
/* flex:none on both, in a tight header the logo used to be squeezed to a
   sliver while keeping its height (a squashed 14px-wide wordmark on phones). */
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand img { width: 58px; height: 58px; flex: none; filter: brightness(0) opacity(.88); }
.brand-name {
  font-family: var(--font-display); font-size: 1.45rem; font-weight: 600;
  color: var(--ink-900); letter-spacing: .02em;
}
/* Language switcher, each locale is a surfboard fin in its flag's colours */
@media (max-width: 560px) {
  .site-header .wrap { gap: var(--space-2); }
  .brand-name { display: none; }
}
.main-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.main-nav a:not(.btn) {
  text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--text-primary);
  padding: 8px 2px; position: relative;
}
.main-nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px;
  background: var(--terra-700); transition: right .25s var(--ease-out);
}
.main-nav a:not(.btn):hover::after { right: 0; }


@media (max-width: 860px) {
  .brand img { width: 56px; height: 56px; }
}
/* Phones: the header CTA drops to a round icon button so the logo and the
   fins keep their full size. The label stays for screen readers via
   aria-label on the button. */
@media (max-width: 560px) {
  .main-nav .btn--wa {
    width: 44px; min-height: 44px; padding: 0; gap: 0; justify-content: center;
  }
  .main-nav .btn--wa .btn-label { display: none; }
  .main-nav .btn--wa svg { width: 21px; height: 21px; }
}

/* ---------- Hero ---------- */
/* Hero shows only the looping video, no overlaid copy or CTA. */
.hero {
  position: relative;
  min-height: 92vh;  /* fallback: iOS Safari < 16.4 has no dvh, without this the hero collapses */
  min-height: 92dvh;
  overflow: hidden;
  background: var(--ink-900);
}
.hero video, .hero .hero-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* ---------- Trust bar ---------- */
.trust { background: var(--surface-paper); border-bottom: 1px solid var(--border-soft); }
.trust .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3);
  padding-block: var(--space-4);
}
.trust-item { display: flex; gap: 14px; align-items: flex-start; }
.trust-item svg { flex: none; width: 28px; height: 28px; color: var(--ink-600); margin-top: 2px; }
.trust-item strong { display: block; font-size: .95rem; font-weight: 600; }
.trust-item span { font-size: .85rem; color: var(--text-secondary); }
@media (max-width: 900px) { .trust .wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .trust .wrap { grid-template-columns: 1fr; gap: var(--space-2); } }

/* ---------- Stamps on the envelope (Choose your stay) ---------- */
.envelope {
  /* Full-bleed-ish, symmetric breakout so the paper reads clearly bigger than the stamps */
  width: min(100vw - 32px, 1320px);
  margin-left: calc(50% - min(50vw - 16px, 660px));
  margin-right: calc(50% - min(50vw - 16px, 660px));
  background: url("../assets/letter-v4.webp") center / 100% 100% no-repeat;
  padding: clamp(60px, 9vw, 116px) clamp(60px, 11vw, 184px);
  filter: drop-shadow(0 22px 48px rgba(11, 31, 25, .18));
}
.stamps {
  /* Featured (Dream Team) is the first, wider column.
     Shared subgrid rows (badge / stamp / price+CTA) keep every stamp's
     bottom edge and every button on the exact same lines. */
  display: grid; grid-template-columns: 1.22fr 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  column-gap: clamp(22px, 2.8vw, 48px); row-gap: 14px;
}
.stamp-card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
.stamp-badge { align-self: end; justify-self: center; }
.stamp-media { align-self: end; }
.stamp-meta { align-self: start; }
/* Les quatre boutons sur une même ligne. Le prix du Dream Team est écrit plus
   gros que les autres : son bloc est donc plus haut, et son bouton descendait
   de dix pixels sous ses voisins. Chaque bloc prend maintenant toute la hauteur
   de la rangée partagée, et le bouton se cale en bas. */
@media (min-width: 1021px) {
  .stamps .stamp-meta { align-self: stretch; }
  .stamps .stamp-meta .btn { margin-top: auto; }
}
@supports not (grid-template-rows: subgrid) {
  .stamps { align-items: end; }
  .stamp-card { display: flex; flex-direction: column; gap: 12px; }
}
@media (max-width: 1020px) {
  .envelope {
    width: auto; margin-left: 0; margin-right: 0;
    background: none; padding: 0; filter: none;
  }
  /* Vertical list: every offer visible without side-scrolling.
     The featured €660 card leads big; the other three are compact rows,
     so the price ladder (660 → 1090) reads at a glance. */
  .stamps {
    display: flex; flex-direction: column; gap: 14px;
    max-width: 560px; margin-inline: auto;
  }
  .stamp-card {
    grid-template-rows: auto; grid-row: auto;
    display: grid; grid-template-columns: 96px 1fr;
    grid-template-areas: "media badge" "media meta";
    column-gap: 16px; row-gap: 6px; align-items: center;
    background: var(--surface-card); border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg); padding: 14px;
    box-shadow: var(--shadow-card);
  }
  .stamps .stamp-badge { grid-area: badge; justify-self: start; align-self: end; }
  .stamps .stamp-media { grid-area: media; }
  .stamps .stamp-meta {
    grid-area: meta; align-self: start;
    align-items: flex-start; text-align: left; gap: 8px;
  }
  .stamps .stamp-price strong { font-size: 1.5rem; }
  .stamps .stamp-card .btn { width: auto; padding: 10px 20px; }
  /* Featured Dream Team keeps the big-stamp treatment */
  .stamp-card--featured {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 12px; padding: 20px 16px 18px;
    border: 2px solid var(--ink-600);
    background: linear-gradient(165deg, var(--surface-card) 55%, var(--terra-100));
    box-shadow: 0 16px 38px rgba(40, 96, 79, .16);
  }
  .stamps .stamp-card--featured .stamp-badge { align-self: center; }
  .stamps .stamp-card--featured .stamp-media { width: min(56vw, 220px); align-self: center; }
  .stamps .stamp-card--featured .stamp-meta { align-self: center; align-items: center; text-align: center; }
  .stamps .stamp-card--featured .stamp-price strong { font-size: 2rem; }
  .stamps .stamp-card--featured .btn { width: 100%; max-width: 260px; }
}
.stamp-badge {
  align-self: center; max-width: 100%;
  font-size: .7rem; font-weight: 600; letter-spacing: .03em;
  color: var(--ink-700); background: rgba(255, 255, 255, .72);
  border: 1px solid var(--ink-200); border-radius: 999px;
  padding: 5px 12px; text-align: center; line-height: 1.25;
}
.stamp-badge--star {
  color: #fff; background: var(--ink-700); border-color: var(--ink-700);
  box-shadow: 0 5px 14px rgba(19, 48, 41, .3);
}
.stamp-badge--star::before { content: "\2605\00a0"; color: var(--terra-300); }
.stamp-badge--vip {
  color: var(--terra-800); background: var(--terra-100); border-color: var(--terra-400);
}
.stamp-media img {
  width: 100%; height: auto;
  filter: drop-shadow(0 6px 10px rgba(11, 31, 25, .18)) drop-shadow(0 18px 32px rgba(11, 31, 25, .16));
  transition: transform .3s var(--ease-out);
}
.stamp-card:hover .stamp-media img,
.stamp-card:focus-within .stamp-media img {
  transform: scale(1.06) rotate(-.6deg);
}
/* Featured card: the €660 best-value pick reads bigger and warmer */
.stamp-card--featured .stamp-media img {
  filter: drop-shadow(0 8px 14px rgba(11, 31, 25, .2)) drop-shadow(0 22px 42px rgba(178, 94, 36, .3));
}
.stamp-meta {
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  text-align: center; padding-bottom: 4px;
}
.stamp-price { font-size: .8rem; color: var(--text-secondary); }
.stamp-price strong {
  display: block; font-family: var(--font-display);
  font-size: 1.9rem; font-weight: 600; color: var(--text-primary);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.stamp-card--featured .stamp-price strong { font-size: 2.15rem; color: var(--ink-700); }
.stamp-card .btn { justify-content: center; width: 100%; max-width: 240px; }

/* Opening sale, anchor price above the live price: black, slightly bigger,
   struck by a red diagonal (pseudo-element, line-through can't be diagonal) */
.stamp-was {
  font-family: var(--font-display);
  font-size: 2rem; color: var(--text-primary); font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: -4px;
}
.stamp-was > s { text-decoration: none; position: relative; display: inline-block; padding: 0 .06em; }
.stamp-was > s::after {
  content: ""; position: absolute; left: -4%; right: -4%; top: 50%;
  height: .085em; min-height: 3px; margin-top: -.04em;
  background: #c23b2b; border-radius: 2px; transform: rotate(-9deg);
}
.stamp-card--featured .stamp-was { font-size: 2.3rem; }
/* PL: équivalent złoty en petit sous le prix barré, rayé simple */
.stamp-was-zl {
  display: block; font-family: var(--font-body, inherit);
  font-size: .78rem; font-weight: 400; color: var(--text-secondary); margin-top: 3px;
}
.stamp-was-zl s {
  text-decoration: line-through; text-decoration-color: #c23b2b; text-decoration-thickness: 2px;
}
@media (max-width: 1020px) {
  .stamps .stamp-was { font-size: 1.6rem; }
  .stamps .stamp-card--featured .stamp-was { font-size: 2.1rem; }
}

/* Opening sale, red announcement above the envelope, framed by the same
   rotating light comet as the retreats offer card (see retraites.css .beam) */
@property --sale-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.sale-banner { text-align: center; margin: 0 0 22px; }
.sale-banner-box {
  position: relative; isolation: isolate; display: inline-block;
  border-radius: 14px; border: 1px solid rgba(19, 48, 41, .14);
  background: #fffdf8; padding: 16px 34px 14px;
}
.sale-banner-box::before, .sale-banner-box::after {
  content: ""; position: absolute; inset: -1px; border-radius: 14px; pointer-events: none;
  background: conic-gradient(from var(--sale-a),
    transparent 0deg,
    rgba(201, 162, 39, .05) 18deg, rgba(201, 162, 39, .55) 46deg,
    #c9a227 56deg, #f4d976 60deg, transparent 63deg,
    transparent 198deg,
    rgba(194, 59, 43, .05) 216deg, rgba(194, 59, 43, .5) 244deg,
    #c23b2b 254deg, #e88a72 258deg, transparent 261deg,
    transparent 360deg);
  animation: sale-beam 9s linear infinite;
}
.sale-banner-box::before {
  padding: 2px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.sale-banner-box::after { filter: blur(14px); opacity: .22; z-index: -1; }
@keyframes sale-beam { to { --sale-a: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .sale-banner-box::before, .sale-banner-box::after { animation: none; }
}
.sale-banner strong {
  display: block; color: #c23b2b; font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.6vw, 1.5rem); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}
.sale-banner span { display: block; color: var(--text-secondary); font-size: .95rem; margin-top: 6px; }

/* Green CTA reserved for the featured best-value stay */
.btn--book { background: var(--ink-600); color: #fff; box-shadow: 0 6px 18px rgba(40, 96, 79, .32); }
.btn--book:hover { background: var(--ink-700); box-shadow: 0 8px 24px rgba(40, 96, 79, .42); }

/* Gold shimmering CTA, reserved for the Wave Into Soul waitlist */
.btn--gold {
  background: linear-gradient(105deg,
    #a6791f 0%, #c9a227 18%, #f3e195 38%, #fdf6d8 50%, #f3e195 62%, #c9a227 82%, #a6791f 100%);
  background-size: 250% 100%;
  color: var(--ink-900); font-weight: 700;
  border: 1px solid rgba(166, 121, 31, .55);
  box-shadow: 0 6px 20px rgba(201, 162, 39, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  animation: gold-sheen 3.4s linear infinite;
}
.btn--gold:hover {
  box-shadow: 0 10px 28px rgba(201, 162, 39, .6), inset 0 1px 0 rgba(255, 255, 255, .55);
  animation-duration: 1.6s;
}
@keyframes gold-sheen {
  0% { background-position: 0% 0; }
  100% { background-position: 250% 0; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); counter-reset: step; }
.step { position: relative; padding-top: var(--space-2); }
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 600;
  color: var(--ink-200); display: block; line-height: 1; margin-bottom: 10px;
}
.step h3 { margin-bottom: 6px; }
.step p { color: var(--text-secondary); font-size: .95rem; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: var(--space-3); } }

/* ---------- Experience / day timeline ---------- */
.experience-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-6); align-items: center;
}
@media (max-width: 900px) { .experience-grid { grid-template-columns: 1fr; } }
.experience-media {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift);
  aspect-ratio: 4 / 5; background: var(--ink-800);
}
.experience-media img, .experience-media video { width: 100%; height: 100%; object-fit: cover; }
.timeline { list-style: none; margin-top: var(--space-4); }
.timeline li {
  display: grid; grid-template-columns: 96px 1fr; gap: 18px;
  padding: 14px 0; border-bottom: 1px dashed var(--ink-200);
}
.timeline li:last-child { border-bottom: none; }
.timeline .moment {
  font-family: var(--font-display); font-weight: 600; color: var(--terra-800);
  font-style: italic;
}
.timeline p { color: var(--text-secondary); font-size: .95rem; }
.timeline strong { color: var(--text-primary); }

/* ---------- Tamraght strip ---------- */
.tamraght { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-5); }
.tamraght article {
  background: var(--surface-card); border-radius: var(--radius);
  padding: var(--space-4); box-shadow: var(--shadow-card);
}
.tamraght h3 { margin-bottom: 8px; }
.tamraght p { font-size: .93rem; color: var(--text-secondary); }
@media (max-width: 820px) { .tamraght { grid-template-columns: 1fr; } }

/* ---------- Spots map ---------- */
.spots-grid {
  /* The map has to stay big enough to read the spot names on it */
  display: grid; grid-template-columns: minmax(320px, 560px) 1fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
/* Keep the copy at a readable measure, the free column is wide on desktop */
.spots-copy { max-width: 56ch; }
.spots-map { margin: 0; }
.spots-map img {
  display: block; width: 100%; height: auto;
  border-radius: 4px;
  filter: drop-shadow(0 14px 34px rgba(11, 31, 25, .18));
}

/* The map unrolls downward as you scroll, like a mat being rolled out.
   --unroll runs 0 -> 1 and is driven from main.js. It defaults to 1 so the
   map is simply there when JS is off or motion is reduced; the roll itself
   only shows once the script takes over. */
.spots-unroll { position: relative; --unroll: 1; }
.spots-unroll > img:not(.spots-rod) {
  clip-path: inset(0 0 calc((1 - var(--unroll)) * 100%) 0);
}
.spots-rod {
  position: absolute; left: -3.5%; width: 107%; height: auto;
  top: calc(var(--unroll) * 100%);
  /* thins out as the sheet comes off it */
  transform: translateY(-52%) scaleY(calc(1 - var(--unroll) * .38));
  filter: drop-shadow(0 9px 16px rgba(11, 31, 25, .3));
  opacity: 0; pointer-events: none;
}
.spots-unroll.is-rolling .spots-rod {
  /* gone by the time the last few percent unroll */
  opacity: clamp(0, calc((1 - var(--unroll)) * 7), 1);
}
@media (prefers-reduced-motion: reduce) {
  .spots-unroll { --unroll: 1 !important; }
  .spots-rod { display: none; }
}
@media (max-width: 820px) {
  .spots-grid { grid-template-columns: 1fr; }
  /* Copy first on phones, the map reads as the payoff underneath */
  .spots-map { order: 2; max-width: 380px; margin-inline: auto; }
}

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.quote {
  background: rgba(251, 249, 244, .06);
  border: 1px solid rgba(151, 192, 173, .22);
  border-radius: var(--radius); padding: var(--space-4);
  display: flex; flex-direction: column; gap: 16px;
}
.quote blockquote { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.5; font-style: italic; }
.quote figcaption { font-size: .85rem; color: var(--text-muted-on-ink); }
.quote figcaption strong { color: var(--text-on-ink); font-weight: 600; }
@media (max-width: 820px) { .quotes { grid-template-columns: 1fr; } }

/* ---------- Avis Google (tools/build_avis.py) ----------
   Reprise en CSS du composant testimonials-6 (shadcn) : en-tête centré,
   colonnes qui défilent verticalement en boucle, fondu haut et bas,
   ralenti au survol (main.js). Fixe sous 4 avis et si l'utilisateur
   demande moins d'animations. */
.avis-tete { max-width: 780px; margin: 0 auto var(--space-5); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.avis-pastille { border: 1px solid var(--border-soft); border-radius: 10px; padding: 4px 16px; font-size: .85rem; color: var(--text-secondary); background: var(--surface-card); }
.avis-tete h2 { font-size: var(--fs-h2); }
.avis-titre { font-style: italic; text-wrap: balance; }
.avis-source { margin-top: -4px; font-size: .9rem; }
.avis-source a { color: var(--text-secondary); text-decoration: none; }
.avis-source a:hover { color: var(--text-accent); text-decoration: underline; text-underline-offset: 3px; }
.avis-resume { display: flex; justify-content: center; margin-top: 6px; }
.avis-etoiles { color: var(--terra-600); letter-spacing: .12em; }
.avis-tous { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-soft); }
.avis-tous:hover { text-decoration-color: var(--terra-700); }

/* Note Google en badge : le chiffre en grand, le G de Google, le nombre d'avis. */
.avis-badge {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 24px 14px 18px;
  background: var(--surface-card); color: var(--text-primary); text-decoration: none;
  border: 1px solid var(--border-soft); border-radius: 18px;
  box-shadow: 0 10px 28px rgba(11, 31, 25, .08);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.avis-badge:hover { border-color: var(--terra-300); box-shadow: 0 14px 32px rgba(11, 31, 25, .12); transform: translateY(-1px); }
.avis-badge:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.avis-g { flex: none; width: 28px; height: 28px; }
.avis-badge-note { font-family: var(--font-display); font-weight: 600; font-size: 2.75rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.avis-badge-detail { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; }
.avis-badge .avis-etoiles { font-size: 1.25rem; line-height: 1; letter-spacing: .08em; }
.avis-badge-texte { font-size: .9rem; line-height: 1.2; color: var(--text-secondary); white-space: nowrap; }
.avis-badge-texte [data-avis-nombre] { color: var(--text-primary); font-weight: 600; }
.avis-badge:hover .avis-badge-texte [data-avis-nombre] { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--terra-700); }
@media (max-width: 420px) {
  .avis-badge { gap: 11px; padding: 12px 18px 12px 14px; }
  .avis-g { width: 24px; height: 24px; }
  .avis-badge-note { font-size: 2.3rem; }
  .avis-badge .avis-etoiles { font-size: 1.1rem; }
  .avis-badge-texte { font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) { .avis-badge { transition: none; } .avis-badge:hover { transform: none; } }

/* La note en une ligne, là où l'on décide : sous les prix et au dernier appel. */
.section-head .note-google { margin-top: var(--space-3); }
.final-cta .note-google { margin: var(--space-3) auto 0; }
.note-google { font-size: .9rem; }
.note-google a {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border-soft); background: var(--surface-card);
  color: var(--text-secondary); text-decoration: none;
  transition: border-color .2s ease;
}
.note-google a:hover { border-color: var(--terra-300); }
.note-google .avis-etoiles { letter-spacing: .08em; }
.note-google-chiffre { color: var(--text-primary); font-weight: 600; }
.note-google--fin a { background: transparent; border-color: rgba(243, 233, 218, .22); color: var(--text-muted-on-ink); }
.note-google--fin a:hover { border-color: var(--terra-400); }
.note-google--fin .avis-etoiles { color: var(--terra-400); }
.note-google--fin .note-google-chiffre { color: var(--text-on-ink); }

.avis-carte { margin: 0; width: 100%; max-width: 340px; }
.avis-lien {
  display: flex; flex-direction: column; gap: 16px;
  background: var(--surface-card); border: 1px solid var(--border-soft);
  border-radius: 24px; padding: var(--space-4);
  box-shadow: 0 10px 24px rgba(11, 31, 25, .08);
  color: var(--text-primary); text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.avis-lien:hover { border-color: var(--terra-300); box-shadow: 0 14px 32px rgba(11, 31, 25, .12); }
.avis-lien:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.avis-lien blockquote { margin: 0; line-height: 1.6; }
.avis-lien blockquote p + p { margin-top: 10px; }
.avis-lien figcaption { display: flex; align-items: center; gap: 10px; }
.avis-avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink-100); color: var(--ink-700); font-weight: 600; font-size: .9rem;
}
.avis-qui { display: flex; flex-direction: column; line-height: 1.3; }
.avis-qui cite { font-style: normal; font-weight: 600; letter-spacing: -.01em; }
.avis-qui > span { font-size: .85rem; color: var(--text-secondary); }
.avis-voir { font-size: .82rem; color: var(--text-accent); }
.avis-qui .avis-trad { font-size: .78rem; font-style: italic; color: var(--text-secondary); }

/* Moins de 4 avis : cartes fixes, centrées. */
.avis-fixe { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.avis-fixe .avis-carte { max-width: 340px; }
img.avis-avatar { object-fit: cover; background: var(--ink-100); }

/* 4 avis et plus : colonnes en boucle. */
.avis-defile {
  display: flex; justify-content: center; gap: var(--space-3);
  max-height: 640px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}
.avis-col { width: 100%; max-width: 340px; }
.avis-piste, .avis-copie { display: flex; flex-direction: column; gap: var(--space-3); }
.avis-copie { padding-top: 0; }
.avis-piste { animation: avis-monte var(--duree, 40s) linear infinite; }
@keyframes avis-monte { from { transform: translateY(0); } to { transform: translateY(calc(-50% - var(--space-3) / 2)); } }
.avis-col--2 { display: none; }
.avis-col--3 { display: none; }
@media (min-width: 768px) { .avis-col--2 { display: block; } }
@media (min-width: 1024px) { .avis-col--3 { display: block; } }
@media (prefers-reduced-motion: reduce) {
  .avis-piste { animation: none; }
  .avis-copie { display: none; }
  .avis-defile { max-height: none; -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; }
  .avis-col--2, .avis-col--3 { display: block; }
}

.avis-pied { margin-top: var(--space-5); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.avis-tous { font-size: .9rem; }

/* ---------- Waitlist ---------- */
.waitlist-band {
  background: linear-gradient(150deg, var(--terra-100), var(--sand-100));
  border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 64px);
  display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-4); align-items: center;
  box-shadow: var(--shadow-card);
}
.waitlist-band .gdpr { font-size: .78rem; color: var(--text-secondary); margin-top: 12px; }
.waitlist-band .cta-zone { text-align: right; }
.waitlist-band .wis-logo {
  display: block; width: min(360px, 100%); height: auto;
  margin: 0 0 18px auto;
}
@media (max-width: 760px) { .waitlist-band .wis-logo { margin-left: 0; } }
@media (max-width: 760px) {
  .waitlist-band { grid-template-columns: 1fr; }
  .waitlist-band .cta-zone { text-align: left; }
}

/* ---------- Blog teaser ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.blog-card {
  background: var(--surface-card); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-card); text-decoration: none;
  display: flex; flex-direction: column;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.blog-card .thumb { aspect-ratio: 16 / 10; background: linear-gradient(140deg, var(--ink-700), var(--ink-500)); }
/* Photo thumbnail (article hero). Gradient blocks stay as the fallback for
   articles that have no photos yet. */
.blog-card img.thumb {
  width: 100%; height: auto; aspect-ratio: 16 / 10;
  object-fit: cover; display: block; background: var(--sand-100);
}
.blog-card:hover img.thumb { transform: none; }
.blog-card .thumb--terra { background: linear-gradient(140deg, var(--terra-700), var(--terra-500)); }
.blog-card .thumb--sand { background: linear-gradient(140deg, var(--ink-500), var(--sand-300)); }
.blog-card div { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.blog-card h3 { font-size: 1.1rem; }
.blog-card p { font-size: .88rem; color: var(--text-secondary); flex-grow: 1; }
.blog-card .read { font-size: .85rem; font-weight: 600; color: var(--text-accent); }
@media (max-width: 820px) { .blog-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; }
.faq-item { border-bottom: 1px solid var(--border-soft); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px;
  align-items: center; padding: 20px 4px; font-weight: 600; font-size: 1.02rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--terra-700); border-bottom: 2px solid var(--terra-700);
  transform: rotate(45deg); transition: transform .25s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(225deg); }
.faq-item .answer { padding: 0 4px 22px; color: var(--text-secondary); max-width: 62ch; }

/* ---------- Final CTA ---------- */
.final-cta { text-align: center; }
.final-cta h2 { max-width: 18em; margin-inline: auto; }
.final-cta p { color: var(--text-muted-on-ink); margin: var(--space-2) auto var(--space-4); max-width: 40em; }

/* ---------- Footer ---------- */
.site-footer { background: var(--surface-ink); color: var(--text-muted-on-ink); font-size: .9rem; }
.site-footer .wrap { padding-block: var(--space-6) var(--space-4); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-5); }
.site-footer h4 {
  font-family: var(--font-body); font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-300); margin-bottom: 14px;
}
.site-footer a { color: var(--text-on-ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 10px; }
.footer-brand img { width: 88px; height: 88px; margin-bottom: 12px; }
.footer-brand .baseline { font-family: var(--font-display); font-style: italic; color: var(--text-on-ink); }
/* Contacts du pied de page, pastille ronde + logo du service. Même grammaire
   que les drapeaux juste en dessous : icône, puis libellé, aligné, 10px. */
.footer-contact { display: inline-flex; align-items: center; gap: 10px; }
.footer-contact .ico {
  flex: 0 0 auto;
  width: 30px; height: 30px; padding: 6px;
  border-radius: 50%;
  background: rgba(151, 192, 173, .14);   /* ink-300 très dilué, comme un tampon */
  fill: currentColor;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.footer-contact:hover { text-decoration: none; }
.footer-contact:hover span { text-decoration: underline; }
.footer-contact:hover .ico { background: var(--terra-700); color: var(--sand-050); transform: translateY(-1px); }
.footer-contact:focus-visible .ico { outline: 2px solid var(--terra-500); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .footer-contact .ico { transition: none; }
  .footer-contact:hover .ico { transform: none; }
}

/* Language list, same fins as the header, on the ink background */
.footer-langs li { margin-bottom: 4px; }
.footer-langs a { display: inline-flex; align-items: center; gap: 10px; padding: 5px 0; }
.footer-langs svg {
  width: 17px; height: 21px; flex: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}
.footer-langs a[aria-current="page"] { font-weight: 600; }
.footer-legal {
  border-top: 1px solid rgba(151, 192, 173, .18); margin-top: var(--space-5);
  padding-top: var(--space-3);
  display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(251, 249, 244, .96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-soft);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}
/* Équivalent złoty sur la page polonaise, réassurance, le prix reste en € */
.stamp-zl { display: block; font-size: .78rem; color: var(--text-secondary); font-weight: 400; margin-top: 2px; font-variant-numeric: tabular-nums; }
.from-zl { display: block; font-size: .72rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.sticky-cta .from { font-size: .8rem; color: var(--text-secondary); line-height: 1.3; }
.sticky-cta .from strong { display: block; font-size: 1rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .sticky-cta { display: flex; } body { padding-bottom: 74px; } }

/* ---------- Chat widget, WhatsApp look-alike ---------- */
/* WhatsApp palette */
:root {
  --wa-teal: #075e54;       /* header (classic) */
  --wa-teal-dark: #054d44;
  --wa-green: #25d366;      /* send / bubble accent */
  --wa-out: #d9fdd3;        /* outgoing bubble (newer) */
  --wa-out-classic: #dcf8c6;
  --wa-in: #ffffff;         /* incoming bubble */
  --wa-wall: #efeae2;       /* chat wallpaper base */
  --wa-txt: #111b21;        /* message text */
  --wa-meta: #667781;       /* timestamps / status */
  --wa-tick: #53bdeb;       /* blue read ticks */
  --wa-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, Arial, "Noto Sans", sans-serif;
}

.chat-bubble {
  position: fixed; right: 20px; bottom: 20px; z-index: var(--z-widget);
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--wa-green); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px rgba(11, 31, 25, .35);
  transition: transform .2s var(--ease-out), background-color .2s;
}
.chat-bubble:hover { transform: scale(1.06); background: #1fb457; }
.chat-bubble svg { width: 30px; height: 30px; }
@media (max-width: 760px) { .chat-bubble { bottom: 86px; } }

.chat-panel {
  position: fixed; right: 20px; bottom: 92px; z-index: var(--z-widget);
  width: min(370px, calc(100vw - 32px));
  font-family: var(--wa-font);
  background: var(--wa-wall); border-radius: 12px;
  box-shadow: 0 24px 64px rgba(11, 31, 25, .34);
  overflow: hidden; display: none; flex-direction: column;
  max-height: min(600px, calc(100vh - 130px)); /* iOS < 16.4 fallback */
  max-height: min(600px, calc(100dvh - 130px));
}
.chat-panel.open { display: flex; animation: panel-in .3s var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@media (max-width: 760px) { .chat-panel { bottom: 158px; } }

/* --- Header (teal bar, avatar, name, status, action icons) --- */
.chat-head {
  background: var(--wa-teal); color: #fff;
  padding: 9px 12px; display: flex; align-items: center; gap: 9px;
}
.chat-head img {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: contain; padding: 5px; background: var(--wa-teal-dark); flex: none;
  filter: none; /* keep the white palm logo visible on the dark avatar */
}
.chat-head-id { line-height: 1.2; min-width: 0; }
.chat-head strong { display: block; font-size: .98rem; font-weight: 500; letter-spacing: .01em; }
.chat-head span {
  display: block; font-size: .72rem; color: rgba(255,255,255,.78);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-head-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.chat-head-actions svg { width: 21px; height: 21px; }
.chat-ico, .chat-close {
  background: none; border: none; color: #fff; opacity: .92;
  width: 34px; height: 34px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 1.15rem; line-height: 1;
}
.chat-ico:hover, .chat-close:hover { background: rgba(255,255,255,.14); opacity: 1; }
.chat-ico--deco { pointer-events: none; } /* decorative call/video icons */

/* --- Body: WhatsApp doodle wallpaper --- */
.chat-body {
  padding: 12px 8px 14px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 3px;
  background-color: var(--wa-wall);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23c4b8a8' stroke-width='1.4' opacity='.35'%3E%3Cpath d='M18 20q6-8 12 0t12 0'/%3E%3Ccircle cx='92' cy='24' r='7'/%3E%3Cpath d='M86 62h14M93 55v14'/%3E%3Cpath d='M20 88c0-6 5-9 9-9s9 3 9 9c0 5-9 12-9 12s-9-7-9-12z'/%3E%3Cpath d='M70 96q8-6 16 0'/%3E%3Cpath d='M50 50l8 4-8 4z'/%3E%3C/g%3E%3C/svg%3E");
}
.chat-day {
  align-self: center; margin: 6px 0 8px;
  background: #ffffff; color: var(--wa-meta);
  font-size: .68rem; font-weight: 500; letter-spacing: .02em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 8px; box-shadow: 0 1px 1px rgba(11,31,25,.13);
}

/* --- Incoming bubbles --- */
.chat-msg {
  position: relative; align-self: flex-start;
  background: var(--wa-in); color: var(--wa-txt);
  border-radius: 8px; border-top-left-radius: 0;
  padding: 6px 9px 8px 11px; margin: 2px 0 2px 10px;
  font-size: .9rem; line-height: 1.35; max-width: 82%;
  box-shadow: 0 1px .5px rgba(11,31,25,.13);
  animation: msg-in .22s var(--ease-out);
}
.chat-msg::before {
  content: ""; position: absolute; top: 0; left: -8px;
  width: 8px; height: 13px;
  background: var(--wa-in);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.chat-msg .chat-time { color: var(--wa-meta); }
.chat-time {
  display: inline-block; float: right; margin: 6px -3px -2px 8px;
  font-size: .63rem; line-height: 1; color: var(--wa-meta);
  position: relative; top: 3px;
}
.chat-time svg { width: 15px; height: 11px; margin-left: 2px; vertical-align: -1px; color: var(--wa-tick); }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } }

/* --- Quick-reply option buttons (WhatsApp interactive style) --- */
.chat-options { display: flex; flex-direction: column; gap: 6px; margin: 6px 10px 4px; }
.chat-opt {
  text-align: center; background: #ffffff; color: var(--wa-teal);
  border: none; border-radius: 8px;
  padding: 11px 14px; font-family: var(--wa-font);
  font-size: .9rem; font-weight: 500; min-height: 44px;
  box-shadow: 0 1px 1px rgba(11,31,25,.14);
  transition: background-color .15s;
}
.chat-opt:hover { background: #f2efe9; }

/* --- Date picker card --- */
.chat-dates {
  display: flex; flex-direction: column; gap: 10px; margin: 4px 10px;
  background: #ffffff; border-radius: 8px; padding: 12px 14px;
  box-shadow: 0 1px 1px rgba(11,31,25,.14);
}
.chat-dates label {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--wa-font); font-size: .74rem; font-weight: 600; color: var(--wa-meta);
}
.chat-dates input[type="date"] {
  border: 1px solid #e0dbd2; border-radius: 8px;
  padding: 9px 10px; min-height: 44px;
  font-family: var(--wa-font); font-size: 1rem; /* ≥16px: stops iOS Safari auto-zoom */
  background: #fff; color: var(--wa-txt);
}
.chat-dates .chat-dates-ok,
.chat-form .chat-dates-ok {
  background: var(--wa-teal); color: #fff; border: none; border-radius: 20px;
  padding: 11px 14px; font-family: var(--wa-font); font-weight: 600; font-size: .9rem; min-height: 44px;
}
.chat-dates .chat-dates-ok:disabled,
.chat-form .chat-dates-ok:disabled { opacity: .45; cursor: default; }
.chat-dates .chat-dates-ok:not(:disabled):hover,
.chat-form .chat-dates-ok:not(:disabled):hover { background: var(--wa-teal-dark); }

/* --- Contact card: name + phone + promo, same paper card as the dates --- */
.chat-form {
  display: flex; flex-direction: column; gap: 8px; margin: 4px 10px;
  background: #ffffff; border-radius: 8px; padding: 10px 12px;
  box-shadow: 0 1px 1px rgba(11,31,25,.14);
}
/* Two fields per row so the card + promo note + CTA fit above the fold */
.chat-form-row { display: flex; gap: 8px; }
.chat-form-row > label { flex: 1 1 0; min-width: 0; }
.chat-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--wa-font); font-size: .74rem; font-weight: 600; color: var(--wa-meta);
}
.chat-form input,
.chat-form select {
  width: 100%; box-sizing: border-box;
  border: 1px solid #e0dbd2; border-radius: 8px;
  padding: 9px 10px; min-height: 44px;
  font-family: var(--wa-font); font-size: 1rem; /* ≥16px: stops iOS Safari auto-zoom */
  background: #fff; color: var(--wa-txt);
}
.chat-form input:focus-visible,
.chat-form select:focus-visible { outline: 2px solid var(--wa-teal); outline-offset: 1px; border-color: var(--wa-teal); }
/* Indicatif + numero : la liste prend le minimum, le numero prend le reste.
   Sans min-width:0 le champ numero deborde la carte sur petit ecran. */
.chat-phone { display: flex; gap: 6px; }
.chat-phone select { flex: 0 1 44%; min-width: 0; padding-right: 4px; }
.chat-phone input { flex: 1 1 0; min-width: 0; }
.chat-note {
  font-family: var(--wa-font); font-size: .74rem; line-height: 1.4; color: var(--wa-meta);
}
.chat-note.ok { color: #1a7f4b; }
.chat-note.ko { color: #b0402a; }
.chat-note:empty { display: none; }
/* Sortie vers WhatsApp sous le bouton « garder ma chambre » : un lien, pas un
   second bouton, pour que l'action principale reste seule à l'œil. */
.chat-link {
  align-self: center; background: none; border: none; padding: 6px 4px; min-height: 32px;
  font-family: var(--wa-font); font-size: .78rem; color: var(--wa-meta);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.chat-link:hover { color: var(--wa-txt); }
.chat-link:focus-visible { outline: 2px solid var(--wa-teal); outline-offset: 1px; border-radius: 4px; }
/* Champ piège anti-robot : hors écran, jamais vu ni atteint au clavier. */
.chat-form .chat-hp {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; min-height: 0;
  padding: 0; border: 0; opacity: 0; pointer-events: none;
}

/* Verdict bubbles: a thin colour bar so the answer reads at a glance */
/* Chambre retenue, rappelée en haut de l'écran, surtout utile quand on arrive
   par « Book now » et qu'on n'a pas vu passer le choix dans le chat. */
.chat-picked {
  align-self: center;
  margin: 2px auto 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(19, 48, 41, .06);
  color: var(--wa-meta);
  font-family: var(--wa-font);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
  max-width: 90%;
}

.chat-msg--yes { box-shadow: inset 3px 0 0 #25d366, 0 1px .5px rgba(11,31,25,.13); }
.chat-msg--tight { box-shadow: inset 3px 0 0 var(--terra-700), 0 1px .5px rgba(11,31,25,.13); }
.chat-msg--no { box-shadow: inset 3px 0 0 #b0402a, 0 1px .5px rgba(11,31,25,.13); }

/* “No code? Join the list.” under the contact card */
.chat-promo-hint { margin: 2px 10px 6px; }
.chat-promo-hint span {
  display: block; margin-bottom: 6px;
  font-family: var(--wa-font); font-size: .74rem; color: var(--wa-meta);
}

/* --- Final editable message = outgoing green bubble --- */
.chat-edit {
  align-self: flex-end;
  width: min(88%, 300px); min-height: 92px; resize: vertical;
  border: none; border-radius: 8px; border-top-right-radius: 0;
  margin: 4px 10px 2px 0;
  padding: 8px 11px 10px; font-family: var(--wa-font);
  font-size: 1rem; line-height: 1.4; /* ≥16px: no iOS focus zoom */
  background: var(--wa-out); color: var(--wa-txt);
  box-shadow: 0 1px .5px rgba(11,31,25,.13);
}
.chat-edit:focus-visible { outline: 2px solid var(--wa-green); outline-offset: 1px; }
.chat-edit-hint {
  align-self: flex-end; max-width: 86%;
  font-family: var(--wa-font); font-size: .68rem; color: var(--wa-meta);
  margin: 0 12px 4px 0; text-align: right;
}
.chat-send {
  align-self: flex-end; display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--wa-green); color: #fff; border: none; border-radius: 22px;
  margin: 4px 10px 6px 0;
  padding: 12px 20px; font-family: var(--wa-font); font-weight: 600; font-size: .92rem; min-height: 46px;
  box-shadow: 0 3px 10px rgba(37,211,102,.4);
}
.chat-send:hover { background: #1fb457; }
.chat-send svg { width: 19px; height: 19px; }

/* --- Composer / fallback bar (mimics WhatsApp input bar) --- */
.chat-foot {
  padding: 8px 10px; background: #f0f2f5;
  border-top: 1px solid rgba(11,31,25,.06);
  font-family: var(--wa-font); font-size: .74rem; color: var(--wa-meta);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.chat-foot a { color: var(--wa-teal); font-weight: 600; text-decoration: none; }
.chat-foot a:hover { text-decoration: underline; }
.chat-back {
  align-self: flex-start; margin: 2px 0 4px 6px;
  background: rgba(255,255,255,.85); border: none; color: var(--wa-teal);
  font-family: var(--wa-font); font-size: .74rem; font-weight: 600;
  padding: 5px 12px; border-radius: 14px; box-shadow: 0 1px 1px rgba(11,31,25,.12);
}
.chat-back:hover { background: #fff; }

/* ---------- Cookie consent banner (GDPR, gates GA4 + MailerLite) ---------- */
.consent-banner {
  position: fixed; z-index: calc(var(--z-widget) + 10);
  left: 50%; bottom: 18px; transform: translate(-50%, 14px);
  display: flex; align-items: center; gap: 20px;
  width: min(720px, calc(100vw - 24px));
  background: var(--surface-ink); color: var(--text-on-ink);
  border-radius: var(--radius-lg); padding: 18px 22px;
  box-shadow: 0 18px 48px rgba(11, 31, 25, .38);
  font-size: .9rem; line-height: 1.5; opacity: 0;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.consent-banner.in { opacity: 1; transform: translate(-50%, 0); }
.consent-msg a { color: var(--terra-300); }
.consent-actions { display: flex; gap: 10px; flex: none; }
.consent-accept, .consent-deny {
  border: none; border-radius: 999px; font-weight: 600; font-size: .9rem;
  padding: 10px 20px; min-height: 44px; white-space: nowrap;
}
.consent-accept { background: var(--cta-bg); color: #fff; }
.consent-accept:hover { background: var(--cta-bg-hover); }
.consent-deny { background: transparent; color: var(--ink-200); border: 1.5px solid var(--ink-500); }
.consent-deny:hover { background: rgba(255, 255, 255, .08); color: #fff; }
@media (max-width: 640px) {
  .consent-banner { flex-direction: column; align-items: stretch; text-align: center; bottom: 86px; }
  .consent-actions { justify-content: center; }
}

/* ---------- Language suggestion banner (first-visit, dismissible) ---------- */
.lang-banner {
  /* below the chat widget so an open chat panel is never covered */
  position: fixed; z-index: calc(var(--z-widget) - 1);
  left: 50%; top: 84px; transform: translate(-50%, -12px);
  display: flex; align-items: center; gap: 14px;
  max-width: calc(100vw - 24px);
  background: var(--surface-ink); color: var(--text-on-ink);
  border-radius: 999px; padding: 10px 12px 10px 20px;
  box-shadow: 0 14px 40px rgba(11, 31, 25, .3);
  font-size: .9rem; opacity: 0;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.lang-banner.in { opacity: 1; transform: translate(-50%, 0); }
.lang-banner span { line-height: 1.3; }
.lang-banner-cta {
  flex: none; background: var(--cta-bg); color: #fff; text-decoration: none;
  font-weight: 600; padding: 7px 16px; border-radius: 999px; white-space: nowrap;
}
.lang-banner-cta:hover { background: var(--cta-bg-hover); }
.lang-banner-close {
  flex: none; background: none; border: none; color: var(--ink-300);
  width: 32px; height: 32px; border-radius: 50%; font-size: .95rem; line-height: 1; cursor: pointer;
}
.lang-banner-close:hover { background: rgba(255, 255, 255, .12); color: #fff; }
@media (max-width: 560px) {
  .lang-banner { flex-wrap: wrap; justify-content: center; text-align: center; border-radius: 18px; top: 74px; padding: 12px 14px; }
  .lang-banner span { flex: 1 1 100%; }
}

/* ---------- Blog hub ---------- */
.blog-hero { padding-block: var(--space-7) var(--space-3); }
.blog-hero .lead { color: var(--text-secondary); max-width: 44ch; margin-top: var(--space-2); }

/* ---------- Blog article ---------- */
.article-wrap { max-width: 760px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 40px); }
.breadcrumb { font-size: .82rem; color: var(--text-secondary); padding-top: var(--space-4); }
.breadcrumb a { color: var(--text-accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 6px; opacity: .5; }
.article-hero { padding-block: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-soft); }
.article-hero h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); margin-block: var(--space-2); }
.article-byline { font-size: .85rem; color: var(--text-secondary); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.article-lead {
  font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.28rem);
  line-height: 1.55; color: var(--text-primary); margin-top: var(--space-3);
}
.article-body { font-size: 1.05rem; line-height: 1.78; padding-block: var(--space-4); }
.article-body h2 { font-size: clamp(1.4rem, 2.6vw, 1.7rem); margin: var(--space-5) 0 var(--space-2); }
.article-body h3 { font-size: 1.18rem; margin: var(--space-4) 0 6px; }
.article-body p { margin: var(--space-2) 0; }
.article-body a { color: var(--text-accent); text-decoration: underline; text-underline-offset: 2px; }
.article-body ul { margin: var(--space-2) 0 var(--space-2) 1.25em; }
.article-body li { margin: 8px 0; padding-left: 4px; }
.article-body strong { color: var(--text-primary); font-weight: 600; }
.article-body hr { border: none; border-top: 1px solid var(--border-soft); margin: var(--space-4) 0; }
.native-box {
  background: var(--surface-sand); border-left: 4px solid var(--terra-700);
  border-radius: 0 var(--radius) var(--radius) 0; padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0; font-size: 1rem;
}
.native-box p { margin: 6px 0; }
.native-box a { font-weight: 600; }
.article-faq { margin-top: var(--space-5); }
.faq-qa { padding: var(--space-2) 0; border-bottom: 1px solid var(--border-soft); }
.faq-qa .q { display: block; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.author-card {
  display: flex; gap: var(--space-3); align-items: center;
  background: var(--surface-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: var(--space-3); margin: var(--space-6) 0 var(--space-4);
}
.author-card img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; flex: none; }
.author-card .name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.author-card .author-ig {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 6px;
  color: var(--terra-800); font-size: .85rem; font-weight: 600; text-decoration: none;
}
.author-card .author-ig svg { flex: none; }
.author-card .author-ig:hover { color: var(--terra-700); text-decoration: underline; }
.author-card .bio { font-size: .9rem; color: var(--text-secondary); margin: 2px 0 4px; }
.author-card a { color: var(--text-accent); font-weight: 500; text-decoration: none; font-size: .88rem; }
.author-card a:hover { text-decoration: underline; }
.article-cta {
  text-align: center; background: var(--surface-ink); color: var(--text-on-ink);
  border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 56px) var(--space-4); margin: var(--space-5) 0 var(--space-7);
}
.article-cta h2 { color: var(--text-on-ink); font-size: 1.5rem; }
.article-cta p { color: var(--text-muted-on-ink); max-width: 42ch; margin: var(--space-2) auto var(--space-4); }

/* ---------- Blog article photos ---------- */
.article-figure {
  margin: var(--space-5) 0;
}
.article-figure img {
  width: 100%; height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
/* Hero: breaks slightly out of the text column, sits under the byline */
.article-figure--hero {
  margin: var(--space-4) 0 var(--space-5);
}
.article-figure--hero img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
/* Portrait shots: narrower, centred, a full-width vertical photo swallows the page */
.article-figure--portrait img {
  max-width: 420px; margin-inline: auto;
}
.article-figure figcaption {
  margin-top: 10px; font-size: .82rem; line-height: 1.5;
  color: var(--text-secondary); text-align: center;
}
@media (max-width: 760px) {
  .article-figure { margin-block: var(--space-4); }
}

/* ---------- Reveal on scroll ----------
   Hidden state only when JS runs (html.js set inline in <head>): without JS
   (iOS QuickLook previews, strict readers) all content stays visible. */
html.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
html.js .reveal.in { opacity: 1; transform: none; }

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


/* ---- page /faq/ : la FAQ rangee par themes ---- */
/* Les questions vivent aussi sur la page d'accueil ; seuls le titre de groupe
   et l'appel final sont propres a la page dediee. */
.faq-group {
  max-width: 760px;
  margin: var(--space-4) 0 var(--space-1);
  font-size: 1.05rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-accent);
}
.faq-group:first-of-type { margin-top: var(--space-2); }
.faq-cta {
  max-width: 760px;
  margin-top: var(--space-5);
  padding: var(--space-3);
  border-radius: 18px;
  background: var(--surface-sand);
  text-align: center;
}
.faq-cta h2 { font-size: var(--fs-h3); margin-bottom: 6px; }
.faq-cta p { color: var(--text-secondary); margin-bottom: var(--space-2); }

/* depuis la FAQ courte de l'accueil vers la page complete */
.faq-more { max-width: 760px; margin-top: var(--space-2); }
.faq-more a { font-size: .9rem; font-weight: 600; color: var(--text-accent); }
.faq-more a:hover { text-decoration: underline; }

/* ---------- Menu mobile ----------
   Sous 860 px les liens ne tenaient plus dans la barre : ils etaient
   simplement masques, et le site devenait inutilisable au doigt, ni
   Chambres, ni Retraites, ni Blog, ni FAQ. Ils passent desormais dans un
   panneau deroulant ; WhatsApp reste visible en permanence. */


@media (max-width: 860px) {
  .nav-toggle:hover { background: var(--sand-200); }
  .nav-toggle span {
    display: block; height: 2px; border-radius: 2px; background: var(--text-primary);
    transition: transform .18s ease, opacity .18s ease;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .nav-links.is-open {
    display: flex; flex-direction: column;
    position: absolute; left: 0; right: 0; top: 100%;
    padding: 4px 20px 14px;
    background: var(--surface-paper);
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 22px 34px -26px rgba(0, 0, 0, .5);
  }
  .nav-links.is-open a:not(.btn) {
    display: block; padding: 14px 2px; font-size: 1.02rem;
    border-bottom: 1px solid var(--border-soft);
  }
  .nav-links.is-open a:not(.btn):last-child { border-bottom: 0; }
  .nav-links.is-open a:not(.btn)::after { content: none; }
}
@media (prefers-reduced-motion: reduce) { .nav-toggle span { transition: none; } }

/* prix d'ancrage dans la barre collante, meme traitement que les timbres :
   noir, barre d'une diagonale rouge (line-through ne sait pas etre oblique) */
.sticky-cta .from-was {
  text-decoration: none; position: relative; display: inline-block;
  color: var(--text-secondary); font-weight: 500; margin-right: 5px; padding: 0 .06em;
}
.sticky-cta .from-was::after {
  content: ""; position: absolute; left: -6%; right: -6%; top: 50%;
  height: 2px; margin-top: -1px; border-radius: 2px;
  background: #c23b2b; transform: rotate(-9deg);
}
.sticky-cta .from-zl s { text-decoration-color: #c23b2b; }
/* le prix d'ancrage allonge la ligne : sans ca, le prix ET le bouton passent
   chacun sur deux lignes et la barre double de hauteur */
.sticky-cta .from strong { white-space: nowrap; }
.sticky-cta .from-was { font-size: .82em; }
.sticky-cta .btn { white-space: nowrap; }
@media (max-width: 400px) {
  .sticky-cta .from strong { font-size: .93rem; }
  .sticky-cta .btn { padding-left: 13px; padding-right: 13px; font-size: .82rem; }
}

/* ============================================================
   En-tête sur deux lignes
   ------------------------------------------------------------
   Ligne 1 : logo · langue · menu · WhatsApp
   Ligne 2 : Retraites · Blog · FAQ, en pastilles
   Les cinq drapeaux prenaient 129 px pour une information que le bandeau
   de suggestion donne déjà ; ils tiennent maintenant dans un bouton.
   ============================================================ */

/* ---- bouton de langue ---- */
.lang-pick { position: relative; flex: none; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 5px 11px 5px 9px;
  border: 1px solid var(--border-soft); border-radius: 12px;
  background: var(--surface-card); color: var(--text-primary);
  font-family: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
  transition: background .15s var(--ease-out), border-color .15s var(--ease-out);
}
.lang-btn:hover { background: var(--surface-sand); border-color: var(--ink-300); }
.lang-btn svg { width: 17px; height: 21px; display: block; flex: none;
  filter: drop-shadow(0 1px 1.5px rgba(11, 31, 25, .22)); }
.lang-caret {
  width: 0; height: 0; margin-left: 1px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--text-secondary);
  transition: transform .15s var(--ease-out);
}
.lang-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: var(--z-header);
  min-width: 178px; margin: 0; padding: 6px; list-style: none;
  background: var(--surface-card); border: 1px solid var(--border-soft);
  border-radius: 14px; box-shadow: 0 22px 38px -24px rgba(11, 31, 25, .45);
}
.lang-menu[hidden] { display: none; }
.lang-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 9px;
  font-size: .9rem; color: var(--text-primary); text-decoration: none;
}
.lang-menu a:hover { background: var(--surface-sand); }
.lang-menu a[aria-current="true"] { font-weight: 600; color: var(--text-accent); }
.lang-menu svg { width: 17px; height: 21px; display: block; flex: none;
  filter: drop-shadow(0 1px 1.5px rgba(11, 31, 25, .22)); }

/* ---- deuxième ligne ---- */
.site-header .subnav {
  /* sans ca, la deuxieme ligne herite du min-height de 72 px de .wrap et
     l'en-tete double de hauteur */
  min-height: 0; display: flex; align-items: center;
  padding-top: 0; padding-bottom: 10px; margin-top: -6px;
}
.quick-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.quick-nav a {
  display: inline-flex; align-items: center; min-height: 34px;
  padding: 0 15px; border-radius: 999px;
  background: var(--surface-sand); color: var(--text-primary);
  font-size: .86rem; font-weight: 600; letter-spacing: .01em;
  text-decoration: none;
  transition: background .15s var(--ease-out), color .15s var(--ease-out);
}
.quick-nav a:hover { background: var(--ink-800); color: var(--text-on-ink); }
.quick-nav a::after { content: none; }
.quick-nav a[aria-current="page"] { background: var(--ink-800); color: var(--text-on-ink); }

/* ---- le menu déroulant, désormais à toutes les largeurs ---- */
.nav-links.is-open a:not(.btn) {
  display: block; padding: 14px 2px; font-size: 1.02rem;
  border-bottom: 1px solid var(--border-soft);
}
.nav-links.is-open a:not(.btn):last-child { border-bottom: 0; }
.nav-links.is-open a:not(.btn)::after { content: none; }

.nav-toggle:hover { background: var(--sand-200); }
.nav-toggle span {
  display: block; height: 2px; border-radius: 2px; background: var(--text-primary);
  transition: transform .18s var(--ease-out), opacity .18s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 560px) {
  .lang-btn { padding: 5px 9px 5px 8px; font-size: .8rem; }
  .quick-nav a { padding: 0 13px; font-size: .82rem; }
  .subnav { padding-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-toggle span, .lang-caret { transition: none; }
}

/* ---- lien vers le blog complet, sous les articles de l'accueil ---- */
.blog-more { display: flex; justify-content: center; margin-top: var(--space-3); }
.blog-more .btn { font-size: 1rem; padding: 14px 30px; }

/* ---- sur telephone, les trois raccourcis sont centres ---- */
@media (max-width: 860px) {
  .site-header .subnav { justify-content: center; }
  .quick-nav { justify-content: center; }
}

/* ============================================================
   Deux en-têtes, un par taille d'écran
   ------------------------------------------------------------
   Ordinateur : la barre d'origine, logo, cinq drapeaux, cinq liens,
   WhatsApp, sur une seule ligne. La refonte à deux lignes ne devait
   concerner que le téléphone.
   Téléphone : bouton de langue, bouton menu, deuxième ligne de raccourcis.
   ============================================================ */

/* ---- ordinateur : la forme d'origine ---- */
.lang-switch { display: flex; gap: 8px; align-items: flex-end; }
.lang-flag {
  position: relative; display: block; width: 24px; height: 30px; flex: none;
  opacity: .55; cursor: pointer;
  transition: opacity .15s var(--ease-out), transform .15s var(--ease-out);
}
.lang-flag::before { content: ""; position: absolute; inset: -9px -4px; }
.lang-flag svg { width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 1px 1.5px rgba(11, 31, 25, .22)); }
.lang-flag:hover, .lang-flag:focus-visible { opacity: 1; transform: translateY(-2px); }
.lang-flag.is-active { opacity: 1; }
.lang-flag.is-active::after {
  content: ""; position: absolute; left: 2px; right: 4px; bottom: -2px; height: 2px;
  border-radius: 2px; background: var(--terra-700);
}

.nav-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.lang-pick, .nav-toggle, .site-header .subnav { display: none; }

/* ---- téléphone : la forme à deux lignes ---- */
@media (max-width: 860px) {
  .lang-switch { display: none; }
  .nav-links { display: none; }

  .lang-pick { display: block; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 42px; height: 38px; padding: 0 10px; border: 0; border-radius: 12px;
    background: var(--surface-sand); cursor: pointer; flex: none;
  }
  .site-header .subnav { display: flex; justify-content: center; }
}

/* ---- page « Reservation et annulation » ---- */
.terms { max-width: 720px; }
.terms h2 {
  font-size: 1.15rem; margin: var(--space-4) 0 var(--space-1);
  padding-top: var(--space-2); border-top: 1px solid var(--border-soft);
}
.terms h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.terms p { color: var(--text-secondary); margin-bottom: var(--space-1); line-height: 1.7; }
.terms strong { color: var(--text-primary); }

/* ---------- What's included (Standard Stay vs Wave Into Soul) ----------
   Sits right under the envelope: the stamps catch the eye, this table answers
   "what do I get for that price?". One <table> for both layouts: three columns
   on desktop, two stacked cards on mobile (shared items, then retreat extras),
   never a sideways scroll. */
.compare { margin-top: var(--space-7); --gold: #c9a227; --gold-deep: #86610c; --gold-soft: #fbf3dc; }
.compare-head { text-align: center; max-width: 640px; margin: 0 auto var(--space-5); }
.compare-head h3 { font-size: var(--fs-h2); }
.compare-head p { color: var(--text-secondary); }
.compare-star { display: block; width: 22px; height: 22px; margin: 10px auto; color: var(--terra-700); }
.compare svg { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

.cmp {
  width: 100%; max-width: 980px; margin-inline: auto;
  border-collapse: separate; border-spacing: 0; table-layout: fixed;
  border: 1px solid var(--ink-800); border-radius: var(--radius);
  background: var(--surface-paper); font-size: .98rem;
}
.cmp th, .cmp td { text-align: left; vertical-align: middle; padding: 15px 22px; font-weight: 400; }
.cmp tbody tr:not(.cmp-group) > * { border-top: 1px dotted rgba(19, 48, 41, .32); }
.cmp col.cmp-c1 { width: 36%; } .cmp col.cmp-c3 { width: 33%; }

.cmp thead th { padding-block: 26px 20px; text-align: center; vertical-align: bottom; }
.cmp thead strong { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.cmp thead small, .cmp-group small { display: block; margin-top: 6px; font-size: .82rem; color: var(--text-secondary); line-height: 1.4; }

/* Row label: icon + name */
.cmp tbody th[scope="row"] { font-weight: 500; }
.cmp-label { display: flex; align-items: center; gap: 16px; }
.cmp-label svg { flex: none; width: 32px; height: 32px; color: var(--ink-800); }

/* Wave Into Soul column: gold panel running the full height */
.cmp tr > :last-child:not([colspan="3"]) {
  background: var(--gold-soft);
  border-left: 1px solid var(--gold); border-right: 1px solid var(--gold);
}
.cmp thead th:last-child { position: relative; border-top: 1px solid var(--gold); border-top-right-radius: var(--radius); padding-top: 34px; }
.cmp tbody:last-child tr:last-child > :last-child { border-bottom: 1px solid var(--gold); border-bottom-right-radius: var(--radius); }
.cmp tbody tr:not(.cmp-group) > td:last-child { border-top-color: rgba(201, 162, 39, .55); }
.cmp-ribbon {
  display: inline-block; white-space: nowrap;
  background: var(--terra-700); color: #fff;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 16px; line-height: 1.3;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%, 7px 50%);
}
.cmp thead .cmp-ribbon { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); }

/* Cell states */
.cmp-yes::before { content: "\2713"; margin-right: 10px; color: var(--ink-600); }
/* Hanging check: a wrapped second line aligns with the text, not the tick */
.cmp td.cmp-yes { padding-left: 44px; text-indent: -22px; }
.cmp td.cmp-yes::before { display: inline-block; width: 22px; margin-right: 0; text-indent: 0; }
.cmp-opt { color: #8a6f5c; }
.cmp-opt::before { content: "+"; margin-right: 8px; }
.cmp-plus { font-family: var(--font-display); font-weight: 600; font-size: 1.16rem; color: var(--ink-800); }
.cmp-plus > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cmp-plus svg { flex: none; width: 30px; height: 30px; color: var(--gold); stroke-width: 1.1; }

/* Group rows: "Retreat extras" divider on desktop, card headings on mobile */
.cmp-group th { padding-block: 22px 8px; text-align: right; }
.cmp-group strong { font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--terra-700); }
.cmp-group--both, .cmp-group small, .cmp-group .cmp-ribbon { display: none; }

@media (max-width: 760px) {
  .compare { margin-top: var(--space-5); }
  .compare-head { margin-bottom: var(--space-3); }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; }
  .cmp colgroup { display: none; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cmp { border: 0; background: none; max-width: 560px; }
  .cmp th, .cmp td { padding: 0; }
  .cmp tr > :last-child:not([colspan="3"]) { background: none; border: 0; }

  .cmp tbody { border: 1px solid var(--ink-800); border-radius: var(--radius); background: var(--surface-paper); padding: 6px 18px 4px; }
  .cmp tbody.cmp-extras { position: relative; margin-top: 38px; border-color: var(--gold); background: var(--gold-soft); }
  .cmp tbody tr:not(.cmp-group) { border-top: 1px dotted rgba(19, 48, 41, .32); padding-block: 13px; }
  .cmp tbody tr:not(.cmp-group) > * { border-top: 0; }
  .cmp tbody.cmp-extras tr:not(.cmp-group) { border-top-color: rgba(201, 162, 39, .6); }
  .cmp tbody:last-child tr:last-child > :last-child { border-bottom: 0; }

  /* Card headings */
  .cmp-group, .cmp-group--both { display: block; }
  .cmp-group th { text-align: center; padding: 18px 0 16px; }
  .cmp-group strong { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .01em; text-transform: none; color: var(--text-primary); }
  .cmp-group small { display: block; }
  .cmp-group td { display: none; }
  .cmp-group .cmp-ribbon { display: block; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); font-size: .68rem; letter-spacing: .1em; }
  .cmp-extras .cmp-group th { padding-top: 26px; }

  .cmp-label { gap: 12px; }
  .cmp-label svg { width: 28px; height: 28px; }

  /* Shared items: one line each, the value once (it is the same in both stays) */
  .cmp-shared tr:not(.cmp-group) { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; align-items: center; }
  .cmp-shared td:last-child { display: none; }
  .cmp-shared td { font-size: .93rem; }
  .cmp td.cmp-yes { padding-left: 22px; }

  /* Retreat extras: name, then one labelled line per stay. One grid for the whole
     card (rows and cells are display: contents) so every stay label has the same
     width and every value starts on the same vertical line. */
  .cmp tbody.cmp-extras { display: grid; grid-template-columns: 40px max-content minmax(0, 1fr); column-gap: 0; align-items: center; }
  .cmp-extras tr, .cmp-extras td { display: contents; }
  .cmp-extras tr.cmp-group td { display: none; }
  .cmp-extras th { grid-column: 1 / -1; }
  .cmp tbody.cmp-extras tr:not(.cmp-group) > th { border-top: 1px dotted rgba(201, 162, 39, .6); padding-top: 13px; }
  .cmp-extras td::before {
    content: attr(data-label); grid-column: 2; margin: 0; padding: 3px 12px 3px 0;
    font-family: var(--font-body); font-size: .66rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; color: var(--ink-800);
  }
  /* Stay labels: quiet green for Standard, deep gold for Wave Into Soul (5.4:1 on the gold tint) */
  .cmp-extras td::before { color: var(--ink-600); }
  .cmp-extras td.cmp-plus::before { color: var(--gold-deep); font-weight: 700; }
  .cmp-extras td > span { grid-column: 3; padding-block: 3px; }
  .cmp-extras td:last-child::before, .cmp-extras td:last-child > span { padding-bottom: 14px; }
  .cmp-extras td.cmp-opt > span::before { content: "+ "; }
  .cmp-plus { font-size: 1.04rem; }
  .cmp-plus svg { width: 24px; height: 24px; }
  /* Narrow phones: the value needs the room more than the seal does */
  @media (max-width: 420px) {
    .cmp-plus svg { display: none; }
    .cmp-plus { font-size: 1rem; }
    .cmp tbody { padding-inline: 14px; }
    .cmp tbody.cmp-extras { grid-template-columns: 36px max-content minmax(0, 1fr); }
    .cmp-extras .cmp-label { gap: 8px; }
  }
}