/* =============================================================================
   BIBI HOUSE · styles.css
   The palette is the house's own: Chromatic Vert Sariette, Bleu Versa, Vert Armerie and
   Flamant Old Church White in the resident spaces; RAL 9001, 9002 and 6012 on the facade,
   in the flex spaces and the gym; Croma Olympic and Leather tiles in the vestiaires.
   Type: Fraunces (headlines, ledes, quotes), Archivo (body, interface), Anton (wordmark).
   ============================================================================= */

[hidden] { display: none !important; }


/* ==== 01 · TOKENS ================================================= */

:root {
  --c-cream:     #F1EADB;   /* RAL 9001, facade and flex spaces: the page canvas */
  --c-cream-2:   #F7F2E7;   /* lighter tint of the same for cards */
  --c-grey:      #E4E6DA;   /* RAL 9002, grey white */
  --c-church:    #EDE3CE;   /* Flamant Old Church White, resident spaces */
  --c-green:     #2F3B39;   /* RAL 6012, black green */
  --c-green-2:   #243030;
  --c-sariette:  #3E4A38;   /* Chromatic CH2 0332 */
  --c-versa:     #3E5668;   /* Chromatic CH2 0285 */
  --c-armerie:   #9AA686;   /* Chromatic CH2 0735 */
  --c-olympic:   #86B7BE;   /* Croma Olympic tiles */
  --c-leather:   #A6764D;   /* Croma Leather tiles */

  --c-ink:       #1A201E;
  --c-ink-2:     #48504C;
  --c-ink-3:     #5A615D;
  --c-line:      rgba(26, 32, 30, .16);
  --c-line-2:    rgba(26, 32, 30, .08);
  --c-cream-a90: rgba(241, 234, 219, .9);
  --c-cream-a70: rgba(241, 234, 219, .7);
  --c-cream-a20: rgba(241, 234, 219, .2);

  --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-sans:    'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-mark:    'Anton', Impact, 'Arial Narrow', sans-serif;

  --fs-0: .82rem;
  --fs-1: 1rem;
  --fs-2: 1.12rem;
  --fs-3: clamp(1.25rem, 1.15rem + .5vw, 1.55rem);
  --fs-4: clamp(1.55rem, 1.25rem + 1.2vw, 2.25rem);
  --fs-5: clamp(2rem, 1.4rem + 2.2vw, 3.4rem);
  --fs-6: clamp(2.3rem, 1.5rem + 3vw, 4.4rem);

  --nav-h:   72px;
  --gutter:  clamp(20px, 4vw, 64px);
  --band:    clamp(80px, 10vw, 150px);
  --wrap:    1280px;
  --radius:  4px;
  --radius-lg: 10px;

  --t-fast: 160ms;
  --t-mid:  360ms;
  --ease:   cubic-bezier(.2, .7, .2, 1);
}


/* ==== 02 · RESET + BASE =========================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--nav-h);
  background: var(--c-cream);
}
/* Smooth scrolling for in-page links only: app.js sets the class once the page has loaded, so
   a deep link jumps straight to its section instead of gliding through the whole page. */
html.is-loaded { scroll-behavior: smooth; }
html, body {
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--c-cream);
  font-optical-sizing: auto;
}

img, svg, video { max-width: 100%; display: block; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
em { font-style: italic; }
strong { font-weight: 500; }
address { font-style: normal; }

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

::selection { background: var(--c-green); color: var(--c-cream); }

:focus-visible {
  outline: 2px solid var(--c-versa);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: fixed; top: 10px; left: 10px; z-index: 2000;
  background: var(--c-ink); color: var(--c-cream);
  padding: 8px 14px; border-radius: var(--radius); font-size: var(--fs-0);
  transform: translateY(-200%); transition: transform var(--t-mid) var(--ease);
}
.skip:focus { transform: translateY(0); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }


/* ==== 03 · LAYOUT PRIMITIVES ====================================== */

main { position: relative; z-index: 1; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.band { padding-top: var(--band); padding-bottom: var(--band); }
/* Two-column section: a head on the left (sticky under the nav), the body on the right. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.split__head { position: sticky; top: calc(var(--nav-h) + 24px); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split__head { position: static; }
}

.label {
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--fs-2);
  color: var(--c-ink-3);
  margin-bottom: 14px;
}
.sec-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-5);
  line-height: 1.08;
  letter-spacing: -.012em;
  color: var(--c-ink);
  max-width: 22ch;
}
.sec-lede {
  margin-top: 18px;
  font-family: var(--f-display);
  font-size: var(--fs-3);
  line-height: 1.4;
  color: var(--c-ink-2);
  max-width: 44ch;
}
.sec-lede a, .prose a:not(.btn) {
  color: var(--c-versa);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(62, 86, 104, .4);
  transition: text-decoration-color var(--t-fast) var(--ease);
}
.sec-lede a:hover, .prose a:not(.btn):hover { text-decoration-color: currentColor; }


/* ==== 04 · BUTTONS ================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--f-sans); font-weight: 500;
  font-size: 15px; line-height: 1; letter-spacing: .01em;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-1px); }

/* Dark containers invert the primary button by setting --btn-bg, --btn-fg and --btn-bg-hover. */
.btn--primary { background: var(--btn-bg, var(--c-green)); color: var(--btn-fg, var(--c-cream)); border-color: var(--btn-bg, var(--c-green)); }
.btn--primary:hover { background: var(--btn-bg-hover, var(--c-green-2)); border-color: var(--btn-bg-hover, var(--c-green-2)); }
.day, .close { --btn-bg: var(--c-cream); --btn-fg: var(--c-green); --btn-bg-hover: #fff; }

.btn--ghost { border-color: currentColor; color: inherit; background: transparent; }
.btn--ghost:hover { background: var(--btn-ghost-hover, var(--c-church)); }


/* ==== 05 · NAV ==================================================== */

.nav {
  position: sticky; top: 0; z-index: 400;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  min-height: var(--nav-h);
  padding: 16px var(--gutter);
  background: var(--c-cream);
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-line);
}

.nav__mark {
  display: inline-flex; align-items: center; gap: 12px;
  line-height: 1;
}
.nav__mark-bh {
  font-family: var(--f-mark);
  font-size: 24px; letter-spacing: .02em;
  text-transform: uppercase;
}
.nav__mark-word {
  display: inline-flex; flex-direction: column; gap: 5px;
  white-space: nowrap;
  font-family: var(--f-display); font-weight: 500;
  font-size: 19px; letter-spacing: -.01em;
  padding-left: 12px; border-left: 1px solid currentColor;
}
.nav__mark-sub {
  font-family: var(--f-sans); font-weight: 500;
  font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .8;
}
/* The nav runs out of room before the menu folds into the burger at 1180px: the subtitle goes first, and the WhatsApp
   button keeps its short label (measured with the Sport entry, 2026-11-06: the full nav fits from 1366px). */
@media (max-width: 1365px) {
  .nav__mark-sub { display: none; }
  .btn--nav .full { display: none; }
  .btn--nav .short { display: inline; }
}

.nav__menu {
  display: flex; justify-content: center;
  gap: clamp(18px, 2.4vw, 34px);
  font-size: 15px; font-weight: 400;
}
.nav__menu a, .nav__link {
  position: relative; padding: 6px 0;
  opacity: .9;
  transition: opacity var(--t-fast) var(--ease);
}
.nav__menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.nav__menu a:hover, .nav__link:hover, .nav__menu a[aria-current="page"] { opacity: 1; }
.nav__menu a:hover::after, .nav__menu a[aria-current="page"]::after { transform: scaleX(1); }

.nav__actions { display: inline-flex; align-items: center; gap: clamp(14px, 2vw, 24px); justify-self: end; }
/* Language toggle: a pill split in two, the current language filled like the knob of a switch.
   --ls-fill / --ls-on are the knob and its text; the nav and the footer each set them. */
.lang-switch {
  --ls-fill: var(--c-green); --ls-on: var(--c-cream);
  display: inline-flex; padding: 2px;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .08em;
}
.lang-switch > .lang-switch__opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 30px; padding: 0 10px 0 11px;
  border-radius: 999px;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lang-switch > [aria-current] { background: var(--ls-fill); color: var(--ls-on); }
.lang-switch > a { opacity: .85; }
.lang-switch > a:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }

.btn--nav { padding: 10px 16px; font-size: 14px; }
.btn--nav svg { width: 16px; height: 16px; }
.btn--nav .short { display: none; }

.nav__burger { display: none; width: 44px; height: 44px; margin-right: -8px; position: relative; }
.nav__menu-blog { display: none; }
/* Sign in: a ghost button beside WhatsApp on wide screens, the last entry of the mobile menu below 1180px. */
.nav__login { white-space: nowrap; }
.nav__menu-login { display: none; }
.nav__burger i {
  position: absolute; left: 8px; right: 8px; height: 1.5px; background: currentColor;
  transition: transform var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease);
}
.nav__burger i:nth-child(1) { top: 17px; }
.nav__burger i:nth-child(2) { top: 25px; }
.nav__burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* The menu folds into the burger below 1180px: with the Sport entry the full nav no longer fits under it. */
@media (max-width: 1180px) {
  :root { --nav-h: 60px; }
  .nav { padding: 12px 20px; gap: 12px; }
  .nav__mark-word { display: none; }
  .nav__menu {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; gap: 0;
    background: var(--c-cream);
    padding: 8px 20px 20px;
    border-bottom: 1px solid var(--c-line);
    transform: translateY(-110%);
    visibility: hidden;
    transition: transform var(--t-mid) var(--ease), visibility var(--t-mid) var(--ease);
    z-index: 399;
  }
  .nav__menu.is-open { transform: translateY(0); visibility: visible; }
  .nav__menu a { padding: 14px 0; border-bottom: 1px solid var(--c-line-2); font-size: 17px; }
  .nav__menu a:last-child { border-bottom: 0; }
  .nav__menu a::after { display: none; }
  .nav__burger { display: block; }
  .nav__link { display: none; }
  .nav__login { display: none; }
  .nav__menu-login { display: block; }
  .btn--nav { min-height: 44px; padding: 0 16px; font-size: 13px; }
  .nav__actions { gap: clamp(8px, 3vw, 14px); }
  .lang-switch > .lang-switch__opt { height: 38px; min-width: 34px; padding: 0 8px 0 9px; }
  .nav__mark { min-height: 44px; }
  .nav__menu-blog { display: block; }
  .btn--nav .full { display: none; }
  .btn--nav .short { display: inline; }
  body.menu-open { overflow: hidden; }
}


/* ==== 06 · HERO =================================================== */

/* The beach first: the copy on the left, on the right the map of the Côte des Basques with the walk
   from the house to the sand, drawn as the page opens (partials/map.njk, is-in set by app.js). The
   map gets the wider column so its labels stay legible. */
.hero { padding: clamp(40px, 7vh, 88px) var(--gutter) clamp(48px, 7vh, 88px); }
.hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; }
.hero__content {
  display: grid; gap: clamp(14px, 2vh, 22px);
  justify-items: start;
}
.hero__eyebrow {
  font-size: var(--fs-0); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-versa);
}
.hero__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-6);
  line-height: 1.04;
  letter-spacing: -.014em;
  max-width: 18ch;
  text-wrap: balance;
}
.hero__lede { margin-top: 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.hero__note { font-size: var(--fs-1); color: var(--c-ink-3); }

.hero__content > * { animation: rise 900ms var(--ease) both; }
.hero__content > :nth-child(1) { animation-delay: 120ms; }
.hero__content > :nth-child(2) { animation-delay: 240ms; }
.hero__content > :nth-child(3) { animation-delay: 360ms; }
.hero__content > :nth-child(4) { animation-delay: 480ms; }
.hero__content > :nth-child(5) { animation-delay: 600ms; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* One column on small screens, the map between the title and the lede so the first screen
   shows the beach: the content block dissolves into the hero grid, and what follows the title
   is pushed after the map. The 1fr repeats .split's rule because the base .hero__grid above
   would otherwise win. */
@media (max-width: 900px) {
  .hero { padding-top: clamp(24px, 4vh, 40px); }
  .hero__grid { grid-template-columns: 1fr; gap: clamp(14px, 2vh, 22px); }
  .hero__content { display: contents; }
  .hero__lede, .hero__actions, .hero__note { order: 1; }
  .hero__visual { animation: rise 900ms var(--ease) both 300ms; }
}
@media (max-width: 640px) {
  .hero__actions .btn { width: 100%; }
}


/* ==== 06b · PROOF (who is behind the house, what you risk) ======= */

.proof { background: var(--c-cream-2); border-bottom: 1px solid var(--c-line-2); }
.proof__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 9fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: center;
  padding-top: clamp(24px, 3vw, 36px);
  padding-bottom: clamp(24px, 3vw, 36px);
}
.proof strong {
  display: block;
  font-family: var(--f-display); font-weight: 500;
  font-size: var(--fs-2); line-height: 1.3;
  color: var(--c-ink);
}
.proof__who {
  display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center;
  font-size: var(--fs-0); line-height: 1.45; color: var(--c-ink-2);
}
.proof__who img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.proof__who:hover strong { color: var(--c-versa); }
.proof__list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
  font-size: var(--fs-0); line-height: 1.45; color: var(--c-ink-2);
}
.proof__list li { padding-left: clamp(14px, 2vw, 28px); border-left: 1px solid var(--c-line); }

@media (max-width: 1100px) {
  .proof__grid { grid-template-columns: 1fr; }
  .proof__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 640px) {
  .proof__list { grid-template-columns: 1fr; gap: 14px; }
  .proof__list li { padding-left: 14px; }
}


/* ==== 06c · PHOTOS OF THE HOUSE =================================== */

/* assets/img/house/*, 4:5 portraits; the frame keeps its ratio and crops the image to it. */
.photo {
  display: block; overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: var(--c-line-2);
}


/* ==== 07 · L'IDÉE ================================================= */

.idea__kicker {
  margin-top: 18px;
  font-family: var(--f-display);
  font-size: var(--fs-3);
  line-height: 1.35;
  color: var(--c-sariette);
  max-width: 30ch;
}

.prose { max-width: 62ch; color: var(--c-ink-2); font-size: var(--fs-2); line-height: 1.7; }
.prose > * + * { margin-top: 1.15em; }
.idea .prose > p:first-child {
  font-family: var(--f-display);
  font-size: var(--fs-3);
  line-height: 1.4;
  color: var(--c-ink);
}

/* The reading links close the text, a size down. */
.idea .prose > .idea__links { margin-top: clamp(28px, 4vw, 44px); font-size: var(--fs-1); }


/* ==== 08 · UNE JOURNÉE (tide chart) =============================== */

.day, .members { background: var(--c-green); color: var(--c-cream); }
:is(.day, .members) .label { color: var(--c-olympic); }
:is(.day, .members) .sec-title { color: var(--c-cream); }
:is(.day, .members) .sec-lede { color: var(--c-cream-a70); }

.tide { margin-top: clamp(48px, 7vw, 96px); }
.tide__chart {
  position: relative;
  aspect-ratio: 4 / 1;
  margin-bottom: 96px;
}
.tide__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tide__line {
  fill: none; stroke: var(--c-olympic); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.tide.is-in .tide__line { animation: draw 2200ms var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Each moment carries its viewBox coordinates (--x of 1200, --y of 300) and its rank (--i). */
.tide__list { position: absolute; inset: 0; }
.tide__item {
  position: absolute;
  left: calc(var(--x) / 12 * 1%);
  top: calc(var(--y) / 3 * 1%);
  bottom: 0;
  width: 0;
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
  transition-delay: calc(400ms + var(--i) * 300ms);
}
.tide.is-in .tide__item { opacity: 1; }
.tide__item::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c-cream);
  transform: translate(-50%, -50%);
}
.tide__item::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  border-left: 1px dashed var(--c-cream);
  opacity: .35;
}
.tide__label {
  position: absolute; top: 100%; left: 0;
  width: 150px;
  transform: translateX(-50%);
  padding-top: 14px;
  text-align: center;
  font-size: var(--fs-0);
  line-height: 1.4;
}
.tide__when {
  display: block;
  font-family: var(--f-display); font-style: italic;
  font-size: var(--fs-2);
  color: var(--c-olympic);
  margin-bottom: 2px;
}
.tide__what { display: block; color: var(--c-cream-a90); }

.tide__axis {
  display: flex; justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--c-cream-a20);
  font-size: var(--fs-0);
  color: var(--c-cream-a70);
}

@media (max-width: 1100px) {
  .tide__chart { aspect-ratio: auto; margin-bottom: 0; }
  .tide__svg, .tide__axis, .tide__item::before, .tide__item::after { display: none; }
  .tide__list { position: static; display: grid; max-width: 40ch; }
  .tide__item {
    position: static; width: auto; opacity: 1;
    display: grid; grid-template-columns: 9.5rem 1fr; gap: 12px; align-items: baseline;
    padding: 14px 0;
    border-top: 1px solid var(--c-cream-a20);
    font-size: var(--fs-1);
  }
  .tide__item:last-child { border-bottom: 1px solid var(--c-cream-a20); }
  .tide__label { display: contents; text-align: left; }
  .tide__when { margin-bottom: 0; }
}


/* ==== 09 · LES ESPACES (painted rooms) ============================ */

.rooms__head { padding-bottom: clamp(40px, 6vw, 72px); }
.rooms__note { margin-top: 16px; font-size: var(--fs-0); color: var(--c-ink-3); }

/* One room per band, painted in its own colour: a .split with its photo on one side and the
   text on the other, sides swapped on every other room (.room--flip). */
.room {
  padding: clamp(40px, 6vw, 80px) 0;
  border-top: 1px solid var(--c-line-2);
}
.room__grid { gap: clamp(28px, 5vw, 80px); align-items: center; }
.room--flip .room__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.room--flip .photo { order: 2; }
.room__body { max-width: 52ch; }
.room__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--fs-5);
  line-height: 1.02; letter-spacing: -.012em;
}
.room__tag { margin-top: 12px; font-size: var(--fs-0); }
.room__lede { margin-top: 22px; font-family: var(--f-display); font-size: var(--fs-3); line-height: 1.4; max-width: 36ch; }
.room__list { margin-top: 22px; display: grid; gap: 8px; font-size: var(--fs-1); max-width: 48ch; }
.room__list li { padding-left: 18px; position: relative; opacity: .9; }
/* La Salle's link to the sports page (/sport/). */
.room__more { margin-top: 22px; font-size: var(--fs-1); }
.room__more a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--c-cream-a70); }
.room__more a:hover { text-decoration-color: currentColor; }
.room__list li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 8px; height: 1px; background: currentColor; opacity: .7;
}

.room--maison { background: var(--c-church); color: var(--c-sariette); }
.room--maison .room__title { color: var(--c-sariette); }
.room--grange { background: var(--c-cream); color: var(--c-green); }
.room--salle { background: var(--c-green); color: var(--c-cream); border-top: 0; }
.room--surf { background: var(--c-grey); color: var(--c-green); border-top: 0; }
.room--vestiaires { background: var(--c-cream); color: var(--c-green); border-top: 0; }

@media (max-width: 900px) {
  .room { padding: 32px 0 40px; }
  .room--flip .room__grid { grid-template-columns: 1fr; }
  .room__grid { gap: 24px; }
  .room--flip .photo { order: 0; }
  .room .photo { aspect-ratio: 1; }
}


/* ==== 10 · FORMULES =============================================== */

.plans { background: var(--c-grey); }
.plans__grid {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.plan {
  background: var(--c-cream-2);
  border: 1px solid var(--c-line-2);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.5vw, 44px);
  /* Six rows shared across cards (subgrid): flag, name, description, price, features, actions.
     Adding or removing a child means changing the span. */
  display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 14px;
  --btn-ghost-hover: var(--c-grey);
}
.plan--featured { border: 2px solid var(--c-green); box-shadow: 0 18px 40px -24px rgba(26, 32, 30, .35); }
.plan__name {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--fs-4); line-height: 1.05; letter-spacing: -.01em;
}
.plan__flag {
  justify-self: start;
  padding: 5px 12px; border-radius: 999px;
  background: var(--c-grey); color: var(--c-sariette);
  font-size: var(--fs-0); font-weight: 500;
}
.plan--featured .plan__flag { background: var(--c-green); color: var(--c-cream); }
.plan__desc { font-size: var(--fs-2); line-height: 1.55; color: var(--c-ink-2); }
.plan__price {
  padding: 16px 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  color: var(--c-ink-2);
}
.plan__price strong {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--fs-5); line-height: 1; letter-spacing: -.01em;
  color: var(--c-ink);
  margin-right: 6px;
}
.plan__features { display: grid; align-content: start; gap: 10px; padding: 4px 0 8px; color: var(--c-ink-2); }
.plan__features li { position: relative; padding-left: 28px; line-height: 1.45; }
.plan__features li::before {
  content: ""; position: absolute; left: 3px; top: .28em;
  width: 6px; height: 11px;
  border: solid var(--c-sariette); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.plan__features strong { color: var(--c-ink); }
.plan__actions { align-self: end; display: grid; gap: 10px; padding-top: 8px; }
.plan__actions .btn { width: 100%; }
/* ==== MEMBRES (before Formules) ==== */
/* One row of cards, scrolled sideways when they do not all fit: the row bleeds into the gutters so
   the next card peeks in, each card snaps to the left edge of the text column, the scrollbar is
   hidden and two arrows (shown by app.js only when the row overflows) do the paging. */
.members__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.members__nav { display: flex; gap: 10px; flex-shrink: 0; padding-bottom: 6px; }
.members__nav[hidden] { display: none; }
.members__arrow {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--c-cream-a20); background: transparent; color: var(--c-cream);
  cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.members__arrow:hover:not(:disabled) { background: var(--c-cream); color: var(--c-green); }
.members__arrow:disabled { opacity: .3; cursor: default; }
.members__arrow[data-dir="-1"] svg { transform: scaleX(-1); }
.members__list {
  --gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(40px, 6vw, 72px);
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(300px, 100% - 56px, 520px); gap: var(--gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.members__list::-webkit-scrollbar { display: none; }
.member { scroll-snap-align: start; }
@media (max-width: 720px) { .members__head { display: block; } .members__nav { margin-top: 20px; padding-bottom: 0; } }
/* The name's link is stretched over the whole card, portrait included. */
.member {
  --pad: clamp(24px, 3vw, 36px);
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: start;
  column-gap: clamp(18px, 2.4vw, 28px);
  padding: var(--pad) var(--pad) 0;
  background: var(--c-cream-2); color: var(--c-ink); border-radius: var(--radius-lg);
}
.member__photo {
  overflow: hidden; width: clamp(88px, 9.5vw, 128px); aspect-ratio: 1; border-radius: 50%;
  background: var(--c-line-2);
  box-shadow: 0 0 0 4px var(--c-cream-2), 0 0 0 5px var(--c-line);
}
.member__name { font-family: var(--f-display); font-size: clamp(1.35rem, 1.2rem + .5vw, 1.7rem); line-height: 1.1; letter-spacing: -.01em; }
.member__name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.member__name a { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: transparent; }
.member:hover .member__name a { text-decoration-color: currentColor; }
.member__role { margin-top: 8px; font-size: var(--fs-1); font-weight: 500; }
.member__handle { font-size: var(--fs-1); color: var(--c-versa); overflow-wrap: anywhere; }
.member__bio { margin: 14px 0 22px; font-size: var(--fs-1); line-height: 1.6; color: var(--c-ink-2); }
/* On a phone the card is too narrow for a portrait beside the text: the portrait sits above it. */
@media (max-width: 640px) {
  .member { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
  .member__photo { width: 76px; margin-bottom: 16px; }
}

/* Client and press logos: a centred band across the foot of the card, each logo centred in its own column. */
.member__logos {
  grid-column: 1 / -1; margin-inline: calc(-1 * var(--pad));
  padding: 12px var(--pad) 16px; text-align: center;
  background: var(--c-church); border-top: 1px solid var(--c-line-2);
}
.member__logos-label { font-family: var(--f-display); font-style: italic; font-size: var(--fs-0); color: var(--c-sariette); }
.member__logos ul {
  margin-top: 10px; min-height: 38px;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center; justify-items: center; gap: 16px;
}
.member__logos img { display: block; max-width: 100%; height: auto; filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; opacity: .75; }
.plans__note { margin-top: clamp(24px, 3vw, 40px); max-width: none; }

@media (max-width: 720px) { .plans__grid { grid-template-columns: 1fr; } }


/* ==== 11 · FONDATEUR ============================================== */

/* The bio speaks in the first person: one reading column, the portrait an accent above it. */
.founder__inner { max-width: 62ch; }
.founder__portrait {
  overflow: hidden;
  width: clamp(88px, 9vw, 112px);
  aspect-ratio: 1;
  border-radius: 50%;
  margin-bottom: 24px;
  background: var(--c-grey);
}
.founder__portrait img, .member__photo img, .photo img { width: 100%; height: 100%; object-fit: cover; }
.founder__text { margin-top: 24px; }
.founder__more { margin-top: 12px; font-size: var(--fs-1); }
.founder__more a { color: var(--c-versa); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.founder__sign {
  margin-top: 24px;
  font-family: var(--f-display); font-style: italic;
  font-size: var(--fs-3);
  color: var(--c-sariette);
}




/* ==== 11b · COMMENT ÇA SE PASSE =================================== */

.steps { background: var(--c-grey); }
.steps__list {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  counter-reset: step;
}
.steps__item {
  counter-increment: step;
  padding-top: 20px;
  border-top: 1px solid var(--c-green);
  color: var(--c-ink-2);
  max-width: 38ch;
}
.steps__item::before {
  content: counter(step);
  display: block;
  font-family: var(--f-display); font-style: italic;
  font-size: var(--fs-5); line-height: 1;
  color: var(--c-sariette);
  margin-bottom: 18px;
}
.steps__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--fs-4); line-height: 1.15; letter-spacing: -.01em;
  color: var(--c-ink);
  margin-bottom: 10px;
}
.steps__cta { margin-top: clamp(40px, 5vw, 64px); }

@media (max-width: 900px) {
  .steps__list { grid-template-columns: 1fr; }
  .steps__cta .btn { width: 100%; }
}


/* ==== 12 · QUESTIONS ============================================== */

.faq { background: var(--c-cream-2); }
.faq__head .sec-lede { font-family: var(--f-sans); font-size: var(--fs-1); }

.faq__item { border-top: 1px solid var(--c-line); }
.faq__item:last-child { border-bottom: 1px solid var(--c-line); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: grid; grid-template-columns: 1fr 24px; gap: 20px; align-items: center;
  padding: 20px 0;
  font-family: var(--f-display);
  font-size: var(--fs-3);
  line-height: 1.3;
  color: var(--c-ink);
  transition: color var(--t-fast) var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--c-versa); }
.faq__item summary::after {
  content: ""; width: 24px; height: 24px;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 12px no-repeat;
  opacity: .7;
  transition: transform var(--t-mid) var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__answer { padding: 0 44px 24px 0; color: var(--c-ink-2); max-width: 60ch; }
.faq__answer > * + * { margin-top: .8em; }


/* ==== 13 · OÙ NOUS TROUVER ======================================== */

.where { background: var(--c-cream-2); border-top: 1px solid var(--c-line-2); }
.where__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.where__address { margin-top: 28px; font-size: var(--fs-1); line-height: 1.55; color: var(--c-ink-2); }
.where__address strong { color: var(--c-ink); font-weight: 500; }
.where__body .btn { margin-top: 28px; }
.where__fig .photo { aspect-ratio: 4 / 3; }

/* The map of the Côte des Basques in the hero (partials/map.njk, drawn by scripts/make-map.js). */
.map { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); background: var(--c-cream); }
.map__ocean { fill: var(--c-versa); }
.map__rock { fill: var(--c-cream); }
/* Sand: the leather tile colour thinned with the cream, opaque so it reads the same over the sea. */
.map__sand { fill: #D9C7A9; fill: color-mix(in srgb, var(--c-leather) 32%, var(--c-cream)); }
.map__swell { fill: none; stroke: var(--c-cream); stroke-width: 1.2; stroke-dasharray: 26 18; stroke-linecap: round; }
/* The three swell lines, lighter as they go out to sea (the markup cannot carry inline styles). */
.map__swell--1 { opacity: .5; }
.map__swell--2 { opacity: .36; }
.map__swell--3 { opacity: .22; }
.map__green { fill: var(--c-armerie); fill-opacity: .32; }
.map__wood { fill: var(--c-sariette); fill-opacity: .16; }
.map__block { fill: var(--c-ink); fill-opacity: .05; }
.map__cliff { fill: none; stroke: var(--c-ink); stroke-opacity: .16; stroke-width: 2; stroke-dasharray: 1 4; }
.map__street, .map__road, .map__lamartine { fill: none; stroke: var(--c-ink); stroke-linecap: round; stroke-linejoin: round; }
.map__street { stroke-opacity: .1; stroke-width: 1; }
.map__road { stroke-opacity: .2; stroke-width: 1.6; }
.map__lamartine { stroke-width: 3; }
.map__walk { fill: none; stroke: var(--c-leather); stroke-width: 3.5; stroke-dasharray: 0 8; stroke-linecap: round; }
/* The walk draws itself from the house to the sand once the map is on screen (app.js, is-in). */
.map__walk-reveal { fill: none; stroke: #fff; stroke-width: 10; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease) .4s; }
.map.is-in .map__walk-reveal { stroke-dashoffset: 0; }

.map__pin-halo { fill: var(--c-leather); fill-opacity: .25; transform-box: fill-box; transform-origin: center; animation: map-pulse 2.8s var(--ease) infinite; }
.map__pin-house { fill: var(--c-leather); stroke: var(--c-cream); stroke-width: 1.5; stroke-linejoin: round; }
.map__compass circle { fill: var(--c-cream); fill-opacity: .85; stroke: var(--c-ink); stroke-opacity: .25; }
.map__compass path { fill: var(--c-ink); fill-opacity: .7; }
.map__compass text { font-family: var(--f-sans); font-size: 10px; letter-spacing: .08em; fill: var(--c-ink); fill-opacity: .7; }
.map__spot { fill: var(--c-ink); fill-opacity: .75; stroke: var(--c-cream); stroke-width: 1.5; }
@keyframes map-pulse { 0%, 100% { transform: scale(.8); } 50% { transform: scale(1.15); } }
.map__label { font-family: var(--f-sans); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; fill: var(--c-ink); fill-opacity: .75; }
.map__label--sea { fill: var(--c-cream); fill-opacity: .85; paint-order: stroke; stroke: var(--c-versa); stroke-width: 5px; stroke-linejoin: round; }
.map__label--house { font-family: var(--f-display); font-style: italic; font-size: 23px; letter-spacing: 0; text-transform: none; fill-opacity: 1; }
.map__label--small { font-size: 12px; }
.map__label--street { font-size: 11px; letter-spacing: .12em; fill-opacity: .45; }

.map__label--walk { font-family: var(--f-display); font-style: italic; font-size: 16px; letter-spacing: 0; text-transform: none; fill: var(--c-leather); fill-opacity: 1; }
.map__label--credit { font-size: 9px; letter-spacing: .04em; fill-opacity: .5; }
.map a:hover .map__label--credit { fill-opacity: .9; }
.map__label--end { text-anchor: end; }

@media (max-width: 900px) {
  .where__grid { grid-template-columns: 1fr; gap: 28px; }
  .where__fig { order: 2; }
}
/* The SVG scales with its frame, so its labels grow where the frame is narrow. */
@media (max-width: 720px) {
  .map__label { font-size: 17px; }
  .map__label--house { font-size: 27px; }
  .map__label--small { font-size: 14px; }
  .map__label--walk { font-size: 18px; }
  .map__label--street { font-size: 12px; }

  .map__compass { transform: translate(34px, 36px) scale(1.3); }
  .map__label--credit { font-size: 12px; }
}


/* ==== 14 · PASSE PRENDRE UN CAFÉ ================================== */

.close {
  background: var(--c-green); color: var(--c-cream);
  padding-top: var(--band);
  overflow: hidden;
}
.close__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}
.close__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--fs-6); line-height: 1.02; letter-spacing: -.016em;
}
.close__text {
  margin-top: 20px;
  font-family: var(--f-display);
  font-size: var(--fs-3); line-height: 1.4;
  color: var(--c-cream-a90);
  max-width: 34ch;
}
.close__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.close__alt { margin-top: 16px; font-size: var(--fs-1); color: var(--c-cream-a70); }
.close__alt a { color: var(--c-cream); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.close__aside {
  display: grid; gap: 18px;
  font-size: var(--fs-1); line-height: 1.5;
  color: var(--c-cream-a70);
  padding-bottom: 6px;
}
.close__aside strong { color: var(--c-cream); font-weight: 500; }

.close__mark {
  margin: clamp(48px, 8vw, 110px) auto -.16em;
  max-width: var(--wrap);
  padding: 0 var(--gutter);
  font-family: var(--f-mark);
  font-size: clamp(6rem, 21vw, 21rem);
  line-height: .8; letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: .07;
  white-space: nowrap;
  pointer-events: none;
}
.close__mark::before { content: "Bibi House"; }

@media (max-width: 900px) {
  .close__grid { grid-template-columns: 1fr; }
  .close__actions .btn { width: 100%; }
}


/* ==== 15 · FOOTER ================================================= */

.foot {
  background: var(--c-ink);
  color: rgba(241, 234, 219, .8);
  padding: clamp(56px, 8vw, 96px) 0 clamp(20px, 3vh, 40px);
}
.foot__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 64px);
  padding-bottom: clamp(32px, 5vw, 56px);
  border-bottom: 1px solid rgba(241, 234, 219, .16);
}
.foot__col h2 {
  font-family: var(--f-display); font-weight: 500;
  font-size: var(--fs-2); color: var(--c-cream);
  margin-bottom: 12px;
}
.foot__col address, .foot__col a, .foot__col p {
  display: block; font-size: var(--fs-1); line-height: 1.55;
  transition: color var(--t-fast) var(--ease);
}
.foot__col a:hover { color: var(--c-cream); }
.foot__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  padding-top: 20px;
  font-size: var(--fs-0);
  color: rgba(241, 234, 219, .55);
}
.foot__legal a:hover { color: var(--c-cream); }
.foot .lang-switch { --ls-on: var(--c-ink); color: rgba(241, 234, 219, .8); }

@media (max-width: 720px) {
  .foot__cols { grid-template-columns: 1fr; gap: 28px; }
  .foot__col a { padding: 9px 0; }
  .foot__col:last-child a { display: inline-block; margin-right: 24px; }
  .foot__legal a { display: inline-block; padding: 12px 0; }
}


/* ==== 16 · MOTION PREFERENCES ===================================== */

@media (prefers-reduced-motion: reduce) {
  html.is-loaded { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  .tide__line { stroke-dashoffset: 0; }
  .tide__item { opacity: 1; }
  .map__walk-reveal { stroke-dashoffset: 0; }
}