/* ==========================================================================
   sections.css — Mise en page de chaque section
   ========================================================================== */

/* Grille éditoriale asymétrique, réutilisée partout */
.grid-12,
.hero__inner,
.geste__grid,
.section-head--split,
.skin__collage,
.process__inner,
.reviews__inner,
.care__inner,
.faq__inner,
.booking__inner,
.footer__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}

.section-head { grid-column: 1 / -1; }

/* Ligne pointillée réutilisable */
.dotted-rule,
.facts > div,
.faq__item,
.footer__bottom {
  background-image: radial-gradient(circle, var(--line) 0.9px, transparent 1.3px);
  background-size: 6px 3px;
  background-repeat: repeat-x;
  background-position: 0 100%;
}
[data-theme="dark"] .facts > div,
.footer__bottom {
  background-image: radial-gradient(circle, rgba(217, 185, 154, 0.45) 0.9px, transparent 1.3px);
}
.faq__item { background-image: radial-gradient(circle, rgba(30, 24, 20, 0.45) 0.9px, transparent 1.3px); }

/* ======================================================================
   HERO — Nuit + lampe : une pièce cachée dans le noir, le curseur l'éclaire
   ====================================================================== */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}
.thread-mark { position: absolute; inset: 0; pointer-events: none; }

.hero__night {
  position: absolute;
  inset: 0;
  --lx: 60%;
  --ly: 40%;
  --lr: 0px;
}
.hero__night img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
/* à peine devinée dans le noir */
.hero__night-base { opacity: 0.07; filter: grayscale(1) contrast(1.2); }
/* éclairée par la lampe */
.hero__night-lit {
  -webkit-mask: radial-gradient(circle var(--lr) at var(--lx) var(--ly), #000 55%, rgba(0, 0, 0, 0.5) 78%, transparent 100%);
  mask: radial-gradient(circle var(--lr) at var(--lx) var(--ly), #000 55%, rgba(0, 0, 0, 0.5) 78%, transparent 100%);
  filter: sepia(0.18) contrast(1.05);
}
/* vignette pour fondre les bords dans l'encre */
.hero__night::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, var(--encre) 100%),
    linear-gradient(to top, var(--encre) 0%, rgba(30, 24, 20, 0) 38%);
  pointer-events: none;
}
/* Mise en page épurée : le nom, une phrase, un bouton */
.hero__inner {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding-top: 7rem;
  padding-bottom: clamp(2.5rem, 7vh, 5rem);
  pointer-events: none;
}
.hero__inner a { pointer-events: auto; }
.hero__title { line-height: 0.76; }
.hero__name {
  display: block;
  font-style: italic;
  font-weight: 400;
  font-size: min(var(--fs-hero), 40vh);
  letter-spacing: -0.045em;
  line-height: 0.76;
  padding: 0 0.06em 0.12em;
  white-space: nowrap;
  color: var(--os);
}
.hero__motto {
  margin-top: clamp(0.6rem, 2vh, 1.4rem);
  font-style: italic;
  font-size: clamp(1.5rem, 1rem + 1.4vw, 2.4rem);
  line-height: 1.1;
  color: var(--argile);
}
.hero__btn { margin-top: clamp(1.6rem, 4vh, 2.6rem); }
/* le premier point, d'où part le fil d'encre */
.hero__first {
  display: block;
  width: 12px;
  height: 12px;
  margin-top: clamp(1.6rem, 4vh, 2.8rem);
}

@media (max-width: 899px) {
  .hero__name { font-size: clamp(5rem, 30vw, 11rem); }
}

/* ======================================================================
   LE GESTE
   ====================================================================== */
.geste {
  padding-block: var(--section-y) calc(var(--section-y) * 0.9);
  overflow-x: clip;
}
.geste__inner { display: block; }
.geste .section-head { margin-bottom: clamp(3rem, 7vw, 7rem); }

.geste__story {
  max-width: 17em;
  margin-left: 14%;
  font-size: var(--fs-story);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.geste__grid {
  margin-top: clamp(4rem, 9vw, 9rem);
  align-items: start;
}
.geste__drawing {
  grid-column: 7 / 12;
  grid-row: 1;
  margin: 0;
}
.geste__lily {
  width: 100%;
  aspect-ratio: 0.86;
}
.geste__drawing figcaption {
  margin-top: 0.9rem;
  color: var(--fg-soft);
}
.geste__text {
  grid-column: 1 / 6;
  grid-row: 1;
  display: grid;
  gap: 1.4rem;
  padding-top: clamp(0rem, 8vw, 8rem);
}
.geste__text > p { max-width: 36em; color: var(--fg); }
.geste__text > p + p { color: var(--fg-soft); }
.geste__quote {
  margin: 1.6rem 0 1rem;
  padding-left: 1.6rem;
  background-image: radial-gradient(circle, var(--terracotta-clair) 1.1px, transparent 1.4px);
  background-size: 3px 7px;
  background-repeat: repeat-y;
}
.geste__quote p {
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.2;
}
.facts { display: grid; margin-top: 1rem; }
.facts > div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1rem;
  padding: 0.95rem 0;
}
.facts dt { color: var(--argile); opacity: 0.75; }
.facts dd { color: var(--os); }

@media (max-width: 899px) {
  .geste__story { margin-left: 0; }
  .geste__drawing { grid-column: 2 / -2; grid-row: 1; }
  .geste__text { grid-column: 1 / -1; grid-row: 2; padding-top: 3rem; }
  .facts > div { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* ======================================================================
   MARQUEE
   ====================================================================== */
.marquee {
  position: relative;
  z-index: var(--z-content);
  overflow: hidden;
  padding-block: clamp(1.4rem, 3vw, 2.6rem);
  background: var(--sable);
  color: var(--encre);
  white-space: nowrap;
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  will-change: transform;
}
.marquee__item {
  font-style: italic;
  font-size: clamp(2.6rem, 1.4rem + 5vw, 7rem);
  line-height: 1.05;
  padding-inline: clamp(1.2rem, 3vw, 3rem);
  letter-spacing: -0.02em;
}
.marquee__item:nth-of-type(4n + 2) { font-style: normal; font-weight: 300; }
.marquee__dot {
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--terracotta);
}

/* ======================================================================
   FLASHS — une planche qu'on parcourt à l'horizontale
   ====================================================================== */
.flashs { padding-block: calc(var(--section-y) * 0.6) var(--section-y); overflow-x: clip; }
.flashs__pin { position: relative; z-index: var(--z-content); }
/* Sans animation (mouvement réduit, pas de GSAP) : la planche se fait défiler à la main */
.flashs__pin.is-static { overflow-x: auto; scrollbar-width: thin; }
@media (prefers-reduced-motion: reduce) {
  .flashs__pin { overflow-x: auto; scrollbar-width: thin; }
}
.flashs__track {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 5rem);
  width: max-content;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(5rem, 10vh, 7rem) max(var(--pad), (100vw - var(--max)) / 2);
  will-change: transform;
}
.flashs__intro { width: min(34vw, 30rem); flex: none; }
.flashs__intro .section-sub { margin-top: 1.4rem; }
.flashs__text { color: var(--fg-soft); max-width: 26em; }
.flashs__count {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 2rem;
  color: var(--fg-soft);
}
.flashs__arrow {
  width: 46px; height: 3px;
  margin-left: 1rem;
  background-image: radial-gradient(circle, var(--terracotta) 1.1px, transparent 1.4px);
  background-size: 6px 3px;
  animation: nudge 1.8s var(--ease-in-out) infinite;
}
@keyframes nudge { 50% { transform: translateX(8px); } }

.flash-grid {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 5rem);
  list-style: none;
  padding: 0;
}
.flash { flex: none; width: clamp(240px, 23vw, 380px); }
.flash:nth-child(2) { margin-top: 14vh; }
.flash:nth-child(3) { margin-top: -10vh; }
.flash:nth-child(4) { margin-top: 18vh; width: clamp(200px, 18vw, 300px); }
.flash:nth-child(5) { margin-top: -6vh; width: clamp(260px, 26vw, 420px); }
.flash:nth-child(6) { margin-top: 10vh; }

.flashs__outro {
  flex: none;
  width: min(30vw, 26rem);
  display: grid;
  gap: 1.2rem;
  justify-items: start;
}
.flashs__outro-title {
  font-style: italic;
  font-size: clamp(2.4rem, 1.2rem + 3vw, 4.4rem);
  line-height: 0.95;
}
.flashs__outro p:not(.flashs__outro-title) { color: var(--fg-soft); }

.flash { position: relative; }

.flash__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--os);
}
.flash__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out), opacity 0.6s;
}
.no-js .flash:hover .flash__media img { transform: scale(1.045); }
.js .flash__media img { transition: opacity 0.6s; }
.flash.is-inking .flash__media img { filter: url(#ink-hover); }

.flash__caption {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.15rem 1rem;
  margin-top: 1rem;
}
.flash__num { grid-column: 1; grid-row: 1; color: var(--fg-soft); }
.flash__status {
  grid-column: 2; grid-row: 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  color: var(--fg);
}
.flash__status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sauge);
}
.flash__name {
  grid-column: 1; grid-row: 2;
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1;
}
.flash__meta { grid-column: 2; grid-row: 2; justify-self: end; color: var(--fg-soft); }

.flash.is-taken .flash__media img { opacity: 0.45; filter: grayscale(1); }
.flash.is-taken .flash__name {
  text-decoration: line-through;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--terracotta);
}
.flash.is-taken .flash__status { color: var(--terracotta-texte); }
.flash.is-taken .flash__status::before { background: var(--terracotta); }

/* Tout le flash est cliquable ; le libellé apparaît sur l'image au survol.
   Le texte du lien reste lisible par les lecteurs d'écran. */
.flash__cta {
  position: absolute;
  inset: 0;
  color: transparent;
  font-size: 0;
}
.flash__cta::after {
  content: "Réserver ce flash";
  position: absolute;
  left: 0.9rem; top: 0.9rem;
  padding: 0.55rem 0.9rem;
  border-radius: 2px;
  background: var(--terracotta);
  color: var(--os);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.35s, transform 0.5s var(--ease-out);
}
.flash:hover .flash__cta::after,
.flash__cta:focus-visible::after { opacity: 1; transform: none; }

/* ---- Sur la peau : liste, la photo suit le curseur ---- */
.skin { margin-top: clamp(5rem, 12vw, 11rem); }
.skin__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.skin__title {
  grid-column: 1 / 8;
  font-style: italic;
  font-size: clamp(3.4rem, 1.6rem + 6vw, 8.5rem);
  letter-spacing: -0.025em;
  line-height: 0.9;
}
.skin__head p { grid-column: 9 / 13; color: var(--fg-soft); }

.pieces { list-style: none; padding: 0; }
.piece {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.3fr) auto;
  align-items: baseline;
  gap: 1rem var(--gap);
  padding: clamp(1.1rem, 2.2vw, 2rem) 0;
  background-image: radial-gradient(circle, rgba(30, 24, 20, 0.4) 0.9px, transparent 1.3px);
  background-size: 6px 3px;
  background-repeat: repeat-x;
  background-position: 0 100%;
  transition: opacity 0.5s var(--ease-soft);
}
.piece:first-child { border-top: 0; }
.piece__thumb { display: none; }
.piece__num { color: var(--accent-text); }
.piece__place {
  font-style: italic;
  font-size: clamp(2.2rem, 1.2rem + 3vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  transition: transform 0.7s var(--ease-out), color 0.4s;
}
.piece__what { font-size: var(--fs-lead); color: var(--fg-soft); transition: transform 0.7s var(--ease-out); }
.piece__meta { color: var(--fg-soft); }
/* une ligne survolée avance, les autres s'effacent */
.pieces.has-active .piece { opacity: 0.32; }
.pieces.has-active .piece.is-active { opacity: 1; }
.piece.is-active .piece__place { transform: translateX(1.2rem); color: var(--terracotta-texte); }
.piece.is-active .piece__what { transform: translateX(0.6rem); }

.pieces__preview {
  position: fixed;
  left: 0; top: 0;
  z-index: 80;
  width: clamp(220px, 21vw, 340px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s var(--ease-soft);
}
.pieces__preview.is-visible { opacity: 1; }
.pieces__preview.is-inking { filter: url(#ink-hover); }
.pieces__preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 0.45s var(--ease-soft), transform 1s var(--ease-out);
}
.pieces__preview img.is-active { opacity: 1; transform: scale(1); }

@media (max-width: 899px) {
  .flashs__track { display: block; width: auto; min-height: 0; padding: 0 var(--pad); }
  .flashs__intro { width: auto; margin-bottom: 3rem; }
  .flashs__count { display: none; }
  .flash-grid {
    gap: 1rem;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    scrollbar-width: none;
    align-items: flex-start;
  }
  .flash-grid::-webkit-scrollbar { display: none; }
  .flash { flex: 0 0 74vw; width: auto !important; margin: 0 !important; scroll-snap-align: start; }
  .flash__cta::after { opacity: 1; transform: none; }
  .flashs__outro { width: auto; margin-top: 3rem; }

  .skin__title, .skin__head p { grid-column: 1 / -1; }
  .skin__head p { margin-top: 1rem; }
  /* Tactile : vignette à gauche de chaque ligne */
  .piece { grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0.2rem 1rem; align-items: center; }
  .piece__thumb { display: block; grid-row: 1 / span 3; width: 4.6rem; aspect-ratio: 4 / 5; object-fit: cover; }
  .piece__num { display: none; }
  .piece__place { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .piece__what { font-size: var(--fs-small); }
}

/* ======================================================================
   AVIS GOOGLE — la note au cœur d'un mandala piqué par le fil
   ====================================================================== */
.reviews { padding-block: var(--section-y); overflow-x: clip; }
.reviews__inner { align-items: center; row-gap: 3rem; }
.reviews__score {
  grid-column: 1 / 6;
  justify-self: center;
  width: min(100%, 470px);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.6rem;
  text-align: center;
}
.reviews__num {
  font-style: italic;
  font-size: clamp(4.4rem, 2rem + 4.6vw, 7.5rem);
  line-height: 0.8;
  letter-spacing: -0.03em;
}
.reviews__stars { display: flex; gap: 5px; }
.reviews__stars i {
  width: 18px; height: 18px;
  background: var(--terracotta);
  -webkit-mask: url("/static/images/motifs/star-small.svg") center / contain no-repeat;
  mask: url("/static/images/motifs/star-small.svg") center / contain no-repeat;
}
.reviews__source { color: var(--fg-soft); }

.reviews__body { grid-column: 7 / 13; }
.reviews__head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.reviews__title {
  font-style: italic;
  font-size: clamp(3rem, 1.5rem + 4.5vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: -0.025em;
}
.reviews__list { display: grid; list-style: none; padding: 0; touch-action: pan-y; }
.review { grid-area: 1 / 1; display: grid; gap: 1.6rem; align-content: start; }
.reviews__stage.is-enhanced .review[hidden] { display: grid !important; visibility: hidden; }
.review__text {
  font-style: italic;
  font-size: clamp(1.7rem, 1.1rem + 1.9vw, 3rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  quotes: "«\00a0" "\00a0»";
}
.review__text::before { content: open-quote; }
.review__text::after { content: close-quote; }
.review__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; color: var(--fg-soft); }
.review__author { color: var(--terracotta-texte); }

.reviews__controls {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.reviews__btn {
  position: relative;
  width: 48px; height: 48px;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: background-color 0.3s, border-color 0.3s;
}
.reviews__btn:hover { background: var(--encre); border-color: var(--encre); color: var(--os); }
/* flèche en pointillé */
.reviews__btn span {
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 3px;
  margin: -1.5px 0 0 -9px;
  background-image: radial-gradient(circle, currentColor 1px, transparent 1.3px);
  background-size: 4px 3px;
}
.reviews__btn span::before {
  content: "";
  position: absolute;
  left: -1px; top: -3px;
  width: 8px; height: 8px;
  border-left: 1.2px dotted currentColor;
  border-top: 1.2px dotted currentColor;
  transform: rotate(-45deg);
}
.reviews__btn--next span { transform: scaleX(-1); }
.reviews__count { color: var(--fg-soft); min-width: 5.5em; text-align: center; }
.reviews__bar {
  position: relative;
  flex: 1;
  height: 3px;
  background-image: radial-gradient(circle, var(--line) 1px, transparent 1.3px);
  background-size: 6px 3px;
}
.reviews__bar span {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--terracotta) 1.2px, transparent 1.5px);
  background-size: 6px 3px;
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.reviews__all { display: inline-block; margin-top: 2.4rem; }

@media (max-width: 899px) {
  .reviews__score { grid-column: 1 / -1; width: min(86vw, 380px); }
  .reviews__body { grid-column: 1 / -1; }
}

/* ======================================================================
   LE PROCESSUS — les étapes de part et d'autre du fil
   ====================================================================== */
.process { padding-block: var(--section-y); }
.process__inner { display: block; }
.process__head { margin-bottom: clamp(4rem, 9vw, 8rem); max-width: 40%; }
.process__steps {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: clamp(3rem, 7vw, 6rem);
}
.step {
  display: grid;
  gap: 1rem;
  align-content: start;
  opacity: 0.32;
  transition: opacity 0.9s var(--ease-soft);
}
.step.is-reached { opacity: 1; }
.step:nth-child(odd) { grid-column: 1 / 6; text-align: right; justify-items: end; }
.step:nth-child(even) { grid-column: 8 / 13; margin-top: clamp(6rem, 13vw, 12rem); }
.step__num { color: var(--terracotta-clair); }
.step__title {
  font-style: italic;
  font-size: clamp(2.4rem, 1.2rem + 3.6vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.step p:not(.step__meta) { color: var(--fg); max-width: 30em; }
.step__meta { color: var(--argile); }

@media (max-width: 899px) {
  .process__head { max-width: none; padding-left: 2.2rem; }
  .process__steps { display: grid; grid-template-columns: 1fr; row-gap: 4.5rem; padding-left: 2.6rem; }
  .step:nth-child(n) { grid-column: 1; text-align: left; justify-items: start; margin-top: 0; }
  .step__title { font-size: clamp(2.2rem, 9vw, 3.2rem); }
}

/* ======================================================================
   SOINS
   ====================================================================== */
.care {
  padding-block: var(--section-y);
  overflow: clip;
}
.care__inner { align-items: start; }
.care__head {
  grid-column: 1 / 6;
  position: sticky;
  top: 18vh;
}
.care__intro { margin-top: 2rem; max-width: 26em; }
.care__help { margin-top: 1.2rem; color: var(--fg-soft); font-size: var(--fs-small); }

.care__timeline {
  grid-column: 7 / 13;
  position: relative;
  display: grid;
  gap: clamp(3rem, 6vw, 5.5rem);
  padding-left: clamp(2rem, 3vw, 3rem);
  padding-top: 0.6rem;
}
.care__day { position: relative; }
.care__day::before {
  content: "";
  position: absolute;
  left: calc(clamp(2rem, 3vw, 3rem) * -1 - 6px);
  top: 0.3rem;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1px solid var(--encre);
  background: var(--os);
  z-index: 1;
  transition: background-color 0.5s, border-color 0.5s, transform 0.5s var(--ease-out);
}
.care__day.is-reached::before { background: var(--terracotta); border-color: var(--terracotta); transform: scale(1.25); }
.care__when { color: var(--terracotta-texte); margin-bottom: 0.7rem; }
.care__day h3 {
  font-size: var(--fs-h3);
  line-height: 1.05;
  margin-bottom: 0.9rem;
}
.care__day p:not(.care__when) { color: var(--fg-soft); max-width: 34em; }

.care__avoid {
  grid-column: 7 / 13;
  margin-top: clamp(4rem, 8vw, 7rem);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  background: var(--sable);
}
.care__avoid h3 { font-style: italic; font-size: var(--fs-h3); margin-bottom: 1.2rem; }
.care__avoid ul { list-style: none; padding: 0; display: grid; gap: 0.4rem; }
.care__avoid li { display: flex; gap: 0.9rem; align-items: baseline; }
.care__avoid li::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  transform: translateY(-0.15em);
}

@media (max-width: 899px) {
  .care__head { grid-column: 1 / -1; position: relative; top: 0; margin-bottom: 3.5rem; }
  .care__timeline, .care__avoid { grid-column: 1 / -1; }
}

/* ======================================================================
   FAQ
   ====================================================================== */
.faq { padding-block: var(--section-y); }
.faq__inner { align-items: start; }
.faq__head { grid-column: 1 / 6; position: sticky; top: 18vh; }
.faq__list { grid-column: 6 / 13; }
.faq__item { padding-block: 0.2rem; }
.faq__item h3 { font-size: inherit; line-height: inherit; }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  min-height: 44px;
  padding: clamp(1.1rem, 2vw, 1.7rem) 0;
  text-align: left;
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 2rem);
  line-height: 1.2;
  transition: color 0.3s;
}
.faq__q:hover { color: var(--terracotta-texte); }
.faq__icon {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
  transition: transform 0.6s var(--ease-out);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background-image: radial-gradient(circle, currentColor 1.1px, transparent 1.4px);
}
.faq__icon::before { left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background-size: 4.4px 4px; }
.faq__icon::after { top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px; background-size: 4px 4.4px; transition: transform 0.5s var(--ease-out); }
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(180deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: scaleY(0); }
.faq__a { overflow: hidden; }
.faq__a-inner { padding: 0 0 1.8rem; }
.faq__a p { max-width: 38em; color: var(--fg-soft); }

@media (max-width: 899px) {
  .faq__head { grid-column: 1 / -1; position: relative; top: 0; margin-bottom: 2.5rem; }
  .faq__list { grid-column: 1 / -1; }
}

/* ======================================================================
   RÉSERVATION
   ====================================================================== */
.booking {
  padding-block: var(--section-y) calc(var(--section-y) * 0.8);
}
.booking__inner { align-items: start; row-gap: 4rem; }
.booking__intro { grid-column: 1 / 6; position: sticky; top: 14vh; }
.booking__title {
  font-style: italic;
  font-size: clamp(4.2rem, 1rem + 7.4vw, 10.5rem);
  line-height: 0.85;
  white-space: nowrap;
  letter-spacing: -0.03em;
  margin-left: -0.04em;
}
.booking__lede { margin-top: 2rem; max-width: 26em; font-size: var(--fs-lead); line-height: 1.3; }
.booking__info { display: grid; gap: 1.1rem; margin-top: 2.6rem; }
.booking__info dt { color: var(--argile); opacity: 0.75; }
.booking__info dd { color: var(--os); }
.booking__info a { color: var(--terracotta-clair); }
.booking__info a:hover { text-decoration: underline dotted; text-underline-offset: 4px; }
.booking__alt { margin-top: 2rem; color: var(--fg-soft); }

/* Formulaire « carnet » : lignes simples, étiquettes mono */
.form {
  grid-column: 7 / 13;
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.4rem);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 3vw, 2.4rem) var(--gap); }
.form__group { position: relative; display: grid; gap: 0.5rem; border: 0; padding: 0; min-width: 0; }
.form__label {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  color: var(--argile);
  padding: 0;
}
.form__opt { opacity: 0.7; }
.form__control {
  width: 100%;
  min-height: 3rem;
  padding: 0.35rem 0 0.55rem;
  border: 0;
  border-bottom: 1px solid rgba(244, 238, 228, 0.32);
  border-radius: 0;
  background: transparent;
  color: var(--os);
  font-size: var(--fs-lead);
  line-height: 1.25;
  transition: border-color 0.35s;
  -webkit-appearance: none;
  appearance: none;
}
.form__control::placeholder { color: rgba(244, 238, 228, 0.55); font-style: italic; }
.form__control:hover { border-bottom-color: rgba(244, 238, 228, 0.6); }
.form__control:focus { border-bottom-color: var(--terracotta-clair); outline: none; }
.form__control:focus-visible { outline: none; }
textarea.form__control { resize: vertical; min-height: 7.5rem; }
select.form__control {
  padding-right: 2rem;
  background-image: radial-gradient(circle, var(--argile) 1.2px, transparent 1.5px), radial-gradient(circle, var(--argile) 1.2px, transparent 1.5px), radial-gradient(circle, var(--argile) 1.2px, transparent 1.5px);
  background-size: 4px 4px;
  background-repeat: no-repeat;
  background-position: right 8px center, right 4px top 55%, right 0 center;
}
select.form__control option { background: var(--encre); color: var(--os); }
/* Bordure qui se « pique » sous le champ actif */
.form__group::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--terracotta-clair);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.6s var(--ease-out);
  pointer-events: none;
}
.form__group:not(.form__group--choice):not(.form__group--file)::after { bottom: auto; top: calc(100% - 1px); }
.form__group:has(.form__error:not(:empty))::after { top: auto; bottom: 1.6rem; }
.form__group:focus-within::after { transform: scaleX(1); }
.form__group--choice::after, .form__group--file::after { display: none; }

.choices { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1.2rem;
  border: 1px solid rgba(244, 238, 228, 0.3);
  border-radius: 2px;
  font-size: var(--fs-small);
  transition: background-color 0.35s, color 0.35s, border-color 0.35s;
}
.choice:hover span { border-color: var(--os); }
.choice input:checked + span { background: var(--os); color: var(--encre); border-color: var(--os); }
.choice input:focus-visible + span { outline: 1.5px dashed var(--terracotta-clair); outline-offset: 3px; }

/* Champ fichier : l'input natif reste accessible mais caché ; le libellé
   visible est en français quel que soit le navigateur. */
.form__file {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}
.form__file-btn {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 44px;
  padding: 0.55rem 1.2rem;
  border: 1px solid rgba(244, 238, 228, 0.3);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.form__file-btn:hover { background: var(--os); color: var(--encre); border-color: var(--os); }
.form__file:focus-visible + .form__file-btn { outline: 1.5px dashed var(--terracotta-clair); outline-offset: 3px; }
.form__file-name { color: var(--argile); opacity: 0.8; letter-spacing: 0.08em; text-transform: none; }

.form__checks { display: grid; gap: 0.8rem; }
.check { display: flex; gap: 0.9rem; align-items: flex-start; cursor: pointer; font-size: var(--fs-small); line-height: 1.45; }
.check input {
  flex: none;
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  margin-top: 0.15em;
  border: 1px solid rgba(244, 238, 228, 0.45);
  border-radius: 3px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.check input::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--terracotta-clair);
  transform: scale(0);
  transition: transform 0.35s var(--ease-out);
}
.check input:checked::after { transform: scale(1); }
.check input:focus-visible { outline: 1.5px dashed var(--terracotta-clair); outline-offset: 3px; }

.form__error {
  min-height: 1.1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #E8957A;
}
.form__error:empty { min-height: 0; }
.form__checks .form__error { margin: -0.4rem 0 0 2.15rem; }
.is-invalid .form__control { border-bottom-color: #E8957A; }

.form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 0.8rem; }
.form__note { color: var(--argile); }
.form__status { font-style: italic; font-size: var(--fs-lead); color: var(--argile); }
.form__status:empty { display: none; }

@media (max-width: 899px) {
  .booking__intro, .form { grid-column: 1 / -1; position: relative; top: 0; }
}
@media (max-width: 599px) {
  .form__row { grid-template-columns: 1fr; }
}

/* ======================================================================
   FOOTER — le point final
   ====================================================================== */
.footer {
  padding-top: clamp(6rem, 14vw, 12rem);
  overflow: clip;
  text-align: center;
}
.footer__bloom {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.footer__inner { display: flex; flex-direction: column; align-items: center; }
.footer__name {
  font-style: italic;
  font-size: min(var(--fs-giant), 34vh);
  line-height: 0.8;
  letter-spacing: -0.035em;
  color: var(--os);
  padding-bottom: 0.1em;
  white-space: nowrap;
}
/* Le point final est piqué par le fil ; un clic le fait éclore */
.footer__period {
  display: inline-block;
  width: 0.13em;
  height: 0.13em;
  margin-left: 0.03em;
  border-radius: 50%;
  vertical-align: baseline;
  cursor: pointer;
}
.footer__period:focus-visible { outline-offset: 6px; }
.footer__bloom-msg {
  min-height: 1.6em;
  margin-top: 0.6rem;
  font-style: italic;
  font-size: var(--fs-lead);
  color: var(--argile);
}
.footer__address { margin-top: clamp(1.5rem, 4vw, 3rem); color: var(--argile); }
.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 2.4rem;
  margin-top: 1.4rem;
  font-size: var(--fs-small);
}
.footer__bottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(4rem, 9vw, 7rem);
  padding: 1.6rem 0 calc(1.6rem + env(safe-area-inset-bottom));
  background-position: 0 0;
  color: var(--argile);
}
.footer__top { min-height: 44px; display: inline-flex; align-items: center; }
.footer__top:hover { color: var(--os); }