/**
 * Version 01 — « Éditorial »
 * Papier, grandes marges, chapitres numérotés, révélations par masque.
 */

:root {
  --paper: #f2efe7;
  --paper-deep: #e8e3d7;
  --ink: #1c2019;
  --ink-soft: #55594c;
  --ink-faint: #8d9083;
  --green: #33422f;
  --terracotta: #9d5a3c;
  --rule: rgba(28, 32, 25, 0.16);

  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --measure: 38ch;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
  line-height: 1.7;
}

/* `base.css` (socle commun aux cinq versions) met un défilement animé
   par défaut sur tout saut d'ancre. Sur une page aussi longue que
   celle-ci, animer le trajet complet entre « Maison » et « Séjourner »
   revient à faire défiler le site entier sous les yeux du visiteur —
   l'inverse de l'accès direct qu'un menu doit offrir. Cette version
   choisit donc le saut instantané ; `prefers-reduced-motion` demandait
   déjà ce même comportement. */
html {
  scroll-behavior: auto;
}

/* Repère d'ancrage : un saut de navigation (bandeau du haut ou de bas
   d'écran) ne doit jamais poser le titre d'un chapitre juste sous lui. */
[id] {
  scroll-margin-top: 5.5rem;
  scroll-margin-bottom: 4.5rem;
}

/* Grain très léger : rapproche l'écran du papier imprimé. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.28;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ *
 * Typographie partagée
 * ------------------------------------------------------------------ */

.overline {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.overline--rule {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.overline--rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* ------------------------------------------------------------------ *
 * Navigation — bandeau horizontal
 *
 * Le bandeau reste fixe en haut de l'écran pendant que le fond change :
 * papier clair des chapitres, puis photographies pleine page, claires ou
 * sombres. Sa couleur suit donc ce qui passe derrière lui — la luminance
 * réelle est mesurée par assets/lib/backdrop.js, qui pose `is-on-photo`
 * et `is-on-dark`.
 * ------------------------------------------------------------------ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  color: var(--ink);
  --nav-dim: 0.62;
  padding: 0.9rem clamp(1.25rem, 5vw, 5.5rem);
  /* Le fond passant derrière le bandeau change en permanence (papier,
     puis photographies claires ou sombres) : un fond translucide
     garantit le contraste des libellés, qui restent tous lisibles. */
  background: rgba(242, 239, 231, 0.82);
  border: 1px solid rgba(28, 32, 25, 0.08);
  border-width: 0 0 1px;
  backdrop-filter: blur(10px) saturate(1.1);
  transition: color 0.5s var(--ease), background 0.5s var(--ease),
    border-color 0.5s var(--ease);
  animation: nav-in 1.4s var(--ease) 2.5s both;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2rem);
}

/* Sur fond sombre, le cartouche s'inverse plutôt que de trouer l'image. */
.nav.is-on-dark {
  color: var(--paper);
  background: rgba(14, 18, 13, 0.62);
  border-color: rgba(242, 239, 231, 0.14);
}

/* La navigation entre après l'ouverture du cadre de la photographie
   d'accueil. Page rechargée en cours de lecture, elle est là d'emblée. */
@keyframes nav-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.nav--immediate {
  animation: none;
}

/* Trait de progression dans la section en cours. */
.nav__mark {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  transition: transform 0.15s linear;
}

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  flex: 1 1 auto;
  min-width: 0;
}

/* Retour à l'accueil : une feuille de tilleul à deux traits, reprenant le
   motif récurrent du site plutôt qu'un pictogramme de maison générique.
   Le libellé reste caché jusqu'au survol, comme une amorce de carte. */
.nav__home {
  flex: 0 0 auto;
}

/* Spécificité volontairement supérieure à « .nav a, .nav__soon » (0,1,1),
   pour que l'alignement centré et l'absence de gap fixe l'emportent. */
.nav .nav__home {
  align-items: center;
  gap: 0;
}

.nav__home svg {
  display: block;
  flex-shrink: 0;
}

.nav__home-label {
  display: inline-block;
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  transition: max-width 0.45s var(--ease), margin-left 0.45s var(--ease),
    opacity 0.3s var(--ease);
}

.nav__home:hover .nav__home-label,
.nav__home:focus-visible .nav__home-label {
  max-width: 6rem;
  margin-left: 0.55rem;
  opacity: 1;
}

.nav a,
.nav__soon {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7rem;
  text-decoration: none;
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: var(--nav-dim);
  transition: opacity 0.5s var(--ease);
}

.nav a:hover,
.nav a.is-current {
  opacity: 1;
}

.nav__soon {
  opacity: 0.2;
  cursor: default;
}

/* Les libellés ne se dévoilent plus au survol : ils restent lisibles en
   permanence, la section en cours se distinguant par l'opacité seule. */
.nav__label {
  font-size: 0.625rem;
  /* Interlettrage resserré : un mot entier reste dense, et le cartouche
     n'empiète pas davantage sur la colonne de texte. */
  letter-spacing: 0.12em;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Navigation — second niveau
 *
 * Une section entière (le jardin, les alentours…) peut compter sept
 * chapitres : y descendre entièrement pour atteindre le dernier n'est
 * plus raisonnable. Chaque entrée du bandeau garde donc, discrètement
 * repliée, la liste de ses chapitres — elle ne se montre qu'à la
 * demande (survol, clavier, ou tap sur le petit chevron), jamais
 * en permanence. Rien ne change pour qui ignore son existence : le
 * clic sur le libellé continue de mener au début de la section.
 * ------------------------------------------------------------------ */

.nav__item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
}

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  margin: -0.4rem -0.3rem -0.4rem -0.15rem;
  padding: 0;
  border: 0;
  background: none;
  color: currentColor;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.4s var(--ease);
}

.nav__toggle svg {
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  transition: transform 0.35s var(--ease);
}

.nav__toggle:hover,
.nav__toggle:focus-visible,
.nav__item:hover .nav__toggle,
.nav__item:focus-within .nav__toggle,
.nav__item.is-open .nav__toggle {
  opacity: 1;
}

.nav__item:hover .nav__toggle svg,
.nav__item:focus-within .nav__toggle svg,
.nav__item.is-open .nav__toggle svg {
  transform: rotate(180deg);
}

.nav__sublist {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  width: max-content;
  max-width: 14rem;
  /* Le panneau garde toujours son propre papier, quel que soit le
     contraste du bandeau au-dessus (clair ou basculé sur fond sombre) :
     son texte reste donc fixé à l'encre, jamais hérité de `.nav.is-on-dark`. */
  color: var(--ink);
  background: rgba(242, 239, 231, 0.95);
  backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid rgba(28, 32, 25, 0.1);
  box-shadow: 0 0.5rem 1.5rem rgba(28, 32, 25, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.3rem);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s linear 0.35s;
}

.nav__item:last-child .nav__sublist {
  left: auto;
  right: 0;
}

.nav__item:hover .nav__sublist,
.nav__item:focus-within .nav__sublist,
.nav__item.is-open .nav__sublist {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.nav__sublist a {
  /* Autonome plutôt qu'hérité de `.nav a` : sur mobile, ce lien est
     momentanément détaché du bandeau (voir main.js) et perdrait sinon
     sa mise en forme (majuscules, absence de soulignement). */
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0.4rem 1.1rem;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
  opacity: 0.62;
  transition: opacity 0.4s var(--ease), color 0.4s var(--ease);
}

.nav__sublist a:hover,
.nav__sublist a:focus-visible {
  opacity: 1;
}

/* Le chapitre en cours de lecture, dans son sous-menu : la même
   couleur que les distances de la carte, réservée aux petits repères
   fonctionnels — jamais un aplat, jamais une couleur inédite. */
.nav__sublist a.is-current {
  opacity: 1;
  color: var(--terracotta);
}

/* ------------------------------------------------------------------ *
 * Ouverture
 * ------------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: end;
  padding: var(--gutter);
  padding-bottom: clamp(2.5rem, 7vh, 5rem);
  overflow: hidden;
  color: var(--paper);

  /* Voile de lecture, décrit une seule fois : le dégradé ci-dessous et la
     mesure de contraste (backdrop.js) lisent les mêmes valeurs. */
  --scrim: 0.72;
  --scrim-stop: 45%;
  --scrim-base: 0.14;
}

.hero__frame {
  position: absolute;
  inset: 0;
  clip-path: inset(12% 12% 12% 12%);
  animation: frame-open 2.4s var(--ease) 0.25s both;
}

@keyframes frame-open {
  from { clip-path: inset(18% 18% 18% 18%); }
  to   { clip-path: inset(0 0 0 0); }
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  transform: scale(1.18) translate3d(0, var(--parallax, 0px), 0);
  animation: hero-settle 3s var(--ease) 0.25s both;
}

@keyframes hero-settle {
  from { transform: scale(1.3) translate3d(0, 0, 0); }
  to   { transform: scale(1.08) translate3d(0, var(--parallax, 0px), 0); }
}

.hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(14, 18, 12, var(--scrim)) 0%,
      rgba(14, 18, 12, var(--scrim-base)) var(--scrim-stop),
      rgba(14, 18, 12, 0.25) 100%);
}

.hero__text {
  position: relative;
  max-width: 46rem;
}

.hero .overline {
  color: rgba(242, 239, 231, 0.75);
  animation: fade-up 1.4s var(--ease) 1.1s both;
}

.hero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3rem, 12vw, 9.5rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0.35em 0 0.5em;
}

.hero__title em {
  font-style: italic;
  color: #e5d9c4;
}

.line {
  display: block;
  overflow: hidden;
}

.line-inner {
  display: block;
  transform: translateY(105%);
  animation: line-in 1.5s var(--ease) both;
  animation-delay: calc(0.55s + var(--stagger, 0ms));
}

.hero__title .line:nth-child(1) .line-inner { --stagger: 0ms; }
.hero__title .line:nth-child(2) .line-inner { --stagger: 130ms; }
.hero__title .line:nth-child(3) .line-inner { --stagger: 260ms; }

@keyframes line-in {
  to { transform: translateY(0); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}

.hero__lede {
  max-width: 30rem;
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem);
  color: rgba(242, 239, 231, 0.86);
  animation: fade-up 1.6s var(--ease) 1.35s both;
}

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2.5rem, 7vh, 5rem);
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(242, 239, 231, 0.7);
  writing-mode: vertical-rl;
  animation: fade-up 1.6s var(--ease) 1.9s both;
}

.hero__rule {
  width: 1px;
  height: 4.5rem;
  background: linear-gradient(to bottom, rgba(242, 239, 231, 0.8), transparent);
  animation: rule-slide 2.6s var(--ease) infinite;
  transform-origin: top;
}

@keyframes rule-slide {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(100%); opacity: 0; }
}

/* ------------------------------------------------------------------ *
 * Révélations
 * ------------------------------------------------------------------ */

[data-reveal] {
  opacity: 0;
  transform: translateY(1.75rem);
  transition:
    opacity 1.1s var(--ease) var(--stagger, 0ms),
    transform 1.2s var(--ease) var(--stagger, 0ms);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

.fig[data-reveal] {
  opacity: 1;
  transform: none;
}

.fig__mask {
  position: relative;
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.5s var(--ease) var(--stagger, 0ms);
}

/* Photographies du carnet « à moins d'une heure » : chacune est un lien
   vers le site du lieu qu'elle montre. Le renvoi ne se révèle qu'au
   survol ou au clavier — la photo seule, sans étiquette permanente,
   garde la lecture éditoriale plutôt que commerciale. */
.fig-link {
  display: block;
  color: inherit;
}

.fig-link__label {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  z-index: 1;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--paper);
  text-shadow: 0 1px 6px rgba(14, 18, 12, 0.55);
  opacity: 0;
  transform: translateY(0.35rem);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.fig-link:hover .fig-link__label,
.fig-link:focus-visible .fig-link__label {
  opacity: 1;
  transform: translateY(0);
}

.fig.is-in .fig__mask {
  clip-path: inset(0 0 0 0);
}

.fig img,
.fig video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, var(--parallax, 0px), 0) scale(var(--zoom, 1.18));
  transition: transform 1.9s var(--ease) var(--stagger, 0ms);
  will-change: transform;
}

.fig.is-in img,
.fig.is-in video {
  --zoom: 1.02;
}

.fig figcaption {
  margin-top: 0.9rem;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity 1s var(--ease) 0.5s;
}

.fig.is-in figcaption {
  opacity: 1;
}

/* ------------------------------------------------------------------ *
 * Section & chapitres
 * ------------------------------------------------------------------ */

.section {
  --section-pad-top: clamp(2rem, 5vh, 4rem);
  padding: var(--section-pad-top) 0 0;
}

/* Une section qui s'ouvre sur une photo plein écran (bandeau du haut
   compris) ne doit pas hériter du souffle habituel de `.section` :
   ce vide entre le bandeau et la photo cassait l'arrivée immersive
   attendue. La photo remonte donc jusqu'au ras du bandeau. */
.section > .closing--open:first-child {
  margin-top: calc(-1 * var(--section-pad-top));
}

.intro {
  padding: 0 var(--gutter);
  max-width: 72rem;
  margin: 0 auto clamp(2rem, 5vh, 3.75rem);
}

.intro__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.25rem, 6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 1.5rem 0 2rem;
  max-width: 18ch;
}

.intro__body {
  max-width: 46ch;
  margin-left: auto;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.25rem);
  color: var(--ink-soft);
}

.chapter {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
  padding: 0 var(--gutter);
  margin: 0 auto clamp(2rem, 5vh, 3.75rem);
  max-width: 88rem;
}

.chapter--wide,
.chapter--offset {
  grid-template-columns: repeat(12, 1fr);
}

.chapter--wide > .fig      { grid-column: 1 / span 8; }
.chapter--wide > .chapter__text { grid-column: 9 / span 4; }

.chapter--reverse > .fig      { grid-column: 5 / span 8; grid-row: 1; }
.chapter--reverse > .chapter__text { grid-column: 1 / span 4; grid-row: 1; }

.chapter--offset > .chapter__text { grid-column: 1 / span 4; }
.chapter--offset > .fig      { grid-column: 5 / span 8; }

.chapter--full {
  display: block;
}

.chapter__text {
  max-width: var(--measure);
}

.chapter__text--center {
  margin: 0 auto clamp(1.75rem, 4vh, 3rem);
  text-align: center;
  max-width: 40ch;
}

.chapter__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.08;
  margin-bottom: 1rem;
}

.chapter__text p {
  color: var(--ink-soft);
}

.fig--tall .fig__mask { aspect-ratio: 3 / 4; }
.chapter .fig .fig__mask { aspect-ratio: 4 / 3; }
.chapter .fig--tall .fig__mask { aspect-ratio: 3 / 4; }

.duo {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  padding: 0 var(--gutter);
  max-width: 88rem;
  margin: 0 auto clamp(2rem, 5vh, 3.75rem);
}

.duo .fig:first-child { grid-column: 2 / span 6; }
.duo .fig:last-child  { grid-column: 9 / span 3; align-self: end; }
.duo .fig:first-child .fig__mask { aspect-ratio: 4 / 3; }
.duo .fig:last-child  .fig__mask { aspect-ratio: 3 / 4; }

.trio {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  padding: 0 var(--gutter);
  max-width: 88rem;
  margin: 0 auto;
}

.trio .fig:nth-child(1) { grid-column: 1 / span 3; }
.trio .fig:nth-child(2) { grid-column: 5 / span 5; margin-top: clamp(1.5rem, 5vh, 3.5rem); }
.trio .fig:nth-child(3) { grid-column: 10 / span 3; margin-top: clamp(2.5rem, 8vh, 5.5rem); }
.trio .fig:nth-child(1) .fig__mask { aspect-ratio: 3 / 4; }
.trio .fig:nth-child(2) .fig__mask { aspect-ratio: 4 / 3; }
.trio .fig:nth-child(3) .fig__mask { aspect-ratio: 3 / 4; }

.pull {
  padding: clamp(2rem, 5vh, 3.5rem) var(--gutter);
  margin: 0 auto clamp(1.75rem, 4.5vh, 3.25rem);
  max-width: 60rem;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.28;
  color: var(--green);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* ------------------------------------------------------------------ *
 * Carte minimaliste et marqueurs interactifs
 * ------------------------------------------------------------------ */

/* Le titre se pose à gauche de la carte plutôt qu'au-dessus : la carte
   reste ainsi le point d'accroche visuel de la section, dès l'arrivée. */
.atlas-wrap {
  max-width: 82rem;
  margin: 0 auto clamp(2rem, 5vh, 3.75rem);
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}

.atlas-wrap__head {
  grid-column: 1 / span 4;
  padding-top: clamp(0.5rem, 3vh, 1.5rem);
  text-align: left;
}

.atlas-wrap__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  margin: 1rem 0 0;
}

/* Le cadre ne rogne pas : sur petit écran, l'étiquette d'un marqueur proche
   du bord a besoin de déborder sur le papier pour rester entière. La photo
   et son voile portent donc eux-mêmes l'arrondi. */
.atlas {
  grid-column: 5 / span 8;
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: 0.5rem;
  background: var(--paper-deep);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.atlas__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Les bords de la photographie aérienne se fondent dans le papier : la carte
   se pose sur la page au lieu d'y être découpée. */
.atlas::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(120% 120% at 50% 45%, transparent 55%, rgba(242, 239, 231, 0.55));
}

.atlas__pins {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  padding: 0.75rem;
  margin: -0.75rem;
  z-index: 0;
}

/* Plusieurs points sont proches les uns des autres sur cette carte : sans
   cela, la fiche d'un point survolé ou ouvert pouvait se retrouver sous
   celle d'un voisin plus loin dans le HTML (ordre du DOM par défaut). Le
   point actif passe donc toujours au premier plan. */
.pin:hover,
.pin:focus-within,
.pin.is-open {
  z-index: 2;
}

/* Le point est le seul déclencheur (survol, tap, clavier) ; la fiche qui
   l'accompagne est un frère, pas un descendant, pour pouvoir contenir un
   vrai lien — un <a> imbriqué dans un <button> n'est pas valide. */
.pin__toggle {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Le fond est une photographie sombre : un liseré clair détache le point,
   quelle que soit la couleur du versant sur lequel il tombe. */
.pin__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--terracotta);
  box-shadow: 0 0 0 2px rgba(242, 239, 231, 0.92), 0 0 0 5px rgba(157, 90, 60, 0.35);
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}

.pin--home .pin__dot {
  width: 0.8rem;
  height: 0.8rem;
  background: var(--paper);
  box-shadow: 0 0 0 3px var(--green), 0 0 0 7px rgba(242, 239, 231, 0.5);
}

.pin:hover .pin__dot,
.pin:focus-within .pin__dot,
.pin.is-open .pin__dot {
  transform: scale(1.25);
  box-shadow: 0 0 0 2px rgba(242, 239, 231, 0.95), 0 0 0 8px rgba(157, 90, 60, 0.5);
}

.pin--home:hover .pin__dot,
.pin--home:focus-within .pin__dot,
.pin--home.is-open .pin__dot {
  box-shadow: 0 0 0 3px var(--green), 0 0 0 9px rgba(242, 239, 231, 0.7);
}

.pin__card {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: 50%;
  transform: translate(-50%, 0.35rem);
  display: grid;
  gap: 0.2rem;
  width: max-content;
  max-width: 12rem;
  padding: 0.7rem 0.85rem;
  background: var(--paper);
  border-radius: 0.3rem;
  box-shadow: 0 0.5rem 1.5rem rgba(28, 32, 25, 0.16);
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.pin--home .pin__card { text-align: center; }

/* Près des bords, l'étiquette s'ouvrirait hors du cadre : on la retourne
   vers le bas, ou on l'aligne sur le point plutôt que de le centrer. */
.pin--below .pin__card {
  bottom: auto;
  top: calc(100% + 0.6rem);
  transform: translate(-50%, -0.35rem);
}

.pin--start .pin__card {
  left: 0;
  transform: translate(-0.75rem, 0.35rem);
}

.pin--below.pin--start .pin__card { transform: translate(-0.75rem, -0.35rem); }

.pin--end .pin__card {
  left: auto;
  right: 0;
  transform: translate(0.75rem, 0.35rem);
}

.pin:hover .pin__card,
.pin:focus-within .pin__card,
.pin.is-open .pin__card {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.pin--start:hover .pin__card,
.pin--start:focus-within .pin__card,
.pin--start.is-open .pin__card { transform: translate(-0.75rem, 0); }

.pin--end:hover .pin__card,
.pin--end:focus-within .pin__card,
.pin--end.is-open .pin__card { transform: translate(0.75rem, 0); }

.pin__name {
  font-family: var(--serif);
  font-size: 0.9375rem;
  color: var(--ink);
}

.pin__dist {
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.pin__desc {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.pin__link {
  display: inline-block;
  margin-top: 0.15rem;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.2em;
}

.pin__link:hover,
.pin__link:focus-visible {
  color: var(--ink);
  text-decoration-color: currentColor;
}

.atlas__source {
  grid-column: 5 / span 8;
  margin-top: 1rem;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------------ *
 * Carnet des destinations plus lointaines
 * ------------------------------------------------------------------ */

.carnet-wrap {
  max-width: 74rem;
  margin: 0 auto clamp(1.75rem, 4.5vh, 3.25rem);
  padding: 0 var(--gutter);
  text-align: center;
}

.carnet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.carnet__item .fig__mask { aspect-ratio: 4 / 3; }

.carnet__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.2;
  margin: 1.1rem 0 0;
}

.carnet__dist {
  margin: 0.35rem 0 0.6rem;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.carnet__desc {
  margin: 0;
  max-width: 32ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Crédits des photographies empruntées : présents, mais au bas de la page. */
.credits {
  max-width: 52rem;
  margin: 0 auto clamp(1.75rem, 4vh, 3rem);
  padding: clamp(1.75rem, 5vh, 2.5rem) var(--gutter) 0;
  border-top: 1px solid var(--rule);
  font-size: 0.6875rem;
  line-height: 1.8;
  text-align: center;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------------ *
 * Photographie de fin de section
 * ------------------------------------------------------------------ */

.closing {
  position: relative;
  height: 100svh;
  margin-top: clamp(2rem, 5vh, 3.75rem);
  overflow: hidden;

  /* Mêmes valeurs pour le dégradé et pour la mesure de contraste. */
  --scrim: 0.8;
  --scrim-stop: 55%;
}

.closing img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12) translate3d(0, var(--parallax, 0px), 0);
  will-change: transform;
}

/* Ce cadrage plein écran, très large et peu haut, coupe le bas de la
   photo par défaut (centrage vertical) — ici la terrasse et sa table,
   pourtant le sujet de la photo, disparaissaient derrière le mur nu.
   On recentre donc la zone visible vers le bas de l'image source. */
img[data-edit-img="maison.opening.photo"] {
  object-position: 50% 85%;
}

.closing::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 18, 12, var(--scrim)), transparent var(--scrim-stop));
}

.closing__caption {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(2.5rem, 8vh, 5rem);
  z-index: 2;
  display: grid;
  gap: 0.9rem;
  color: var(--paper);
}

.closing__caption .overline {
  color: rgba(242, 239, 231, 0.7);
}

.closing__title {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 5vw, 3.75rem);
  line-height: 1.05;
  font-weight: 300;
}

/* ------------------------------------------------------------------ *
 * Transition douce entre deux sections (sans vidéo)
 *
 * La photo suit le scroll normalement (pas d'épingle) ; seule son opacité
 * décroît pendant le dernier quart de sa sortie d'écran, pilotée par
 * main.js via [data-fade-exit]. La section suivante, juste après elle
 * dans le flux, apparaît alors en douceur derrière elle.
 * ------------------------------------------------------------------ */

.closing--dissolve {
  will-change: opacity;
}

/* ------------------------------------------------------------------ *
 * Section 04 — informations pratiques
 * ------------------------------------------------------------------ */

.practical {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 72rem;
  margin: 0 auto clamp(1.75rem, 4.5vh, 3.25rem);
  padding: 0 var(--gutter);
}

.practical__heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.375rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
}

.practical__list {
  display: grid;
  gap: 1.25rem;
}

.practical__list dt {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 0.35rem;
}

.practical__list dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.booking {
  max-width: 40rem;
  margin: 0 auto clamp(2rem, 5vh, 3.5rem);
  padding: clamp(1.75rem, 4.5vh, 3rem) var(--gutter) 0;
  text-align: center;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
}

.booking a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.25em;
}

.booking a:hover { text-decoration-color: currentColor; }

/* Une seconde ligne discrète (l'album de photos), sous le lien de
   réservation : pas de second filet, pour que les deux restent lus
   comme une même note de bas de page plutôt que deux blocs distincts. */
.booking--follow {
  margin-top: calc(clamp(2rem, 5vh, 3.5rem) * -1 + 0.75rem);
  padding-top: 0;
  border-top: none;
  font-size: 0.9rem;
}

/* ------------------------------------------------------------------ *
 * Pied de page
 * ------------------------------------------------------------------ */

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.75rem, 4vh, 3rem) var(--gutter);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--paper-deep);
}

.foot a { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }

/* ------------------------------------------------------------------ *
 * Adaptations
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {
  .nav {
    top: auto;
    bottom: 0;
    padding: 0.7rem clamp(0.75rem, 4vw, 2rem);
    border-width: 1px 0 0;
  }
  /* Sept libellés ne tiennent pas toujours sur une seule ligne aux plus
     petites largeurs : la liste défile au doigt plutôt que de couper
     silencieusement « Séjourner » hors de l'écran. Le fondu sur le bord
     droit fait de ce défilement une invite, pas une surprise. */
  .nav__list {
    justify-content: space-between;
    gap: 0.5rem;
    text-align: center;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav__list::-webkit-scrollbar { display: none; }

  /* Classe posée par main.js seulement quand il reste du contenu à faire
     défiler : jamais de fondu sur un libellé déjà entièrement visible. */
  .nav__list.has-more {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 1.25rem), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 1.25rem), transparent 100%);
  }
  .nav a, .nav__soon { gap: 0; letter-spacing: 0.1em; }
  .nav__label { font-size: 0.5625rem; }
  .nav__mark { top: 0; bottom: auto; }

  /* Le bandeau bascule en bas d'écran ici (voir `.nav` ci-dessus) : le
     repère d'ancrage doit basculer avec lui, sous peine de réserver un
     vide inutile en haut de chaque section et de laisser le bandeau du
     bas recouvrir le pied de la précédente. */
  [id] {
    scroll-margin-top: 1.5rem;
    scroll-margin-bottom: 5.5rem;
  }

  /* Le bandeau du bas défile au doigt et couperait un sous-menu ouvert
     au-dessus de lui : main.js sort alors momentanément la liste du
     bandeau (elle redevient un enfant direct de <body>) et la repositionne
     par-dessus la photographie, juste au-dessus du chevron qui l'a ouverte. */
  .nav__sublist--floating {
    position: fixed;
    top: auto;
    right: auto;
    max-width: calc(100vw - 1.5rem);
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .chapter--wide,
  .chapter--offset,
  .chapter--reverse { grid-template-columns: 1fr; }
  .chapter--wide > .fig,
  .chapter--wide > .chapter__text,
  .chapter--offset > .fig,
  .chapter--offset > .chapter__text,
  .chapter--reverse > .fig,
  .chapter--reverse > .chapter__text { grid-column: 1 / -1; grid-row: auto; }
  .chapter--reverse > .fig { order: -1; }

  .intro__body { margin-left: 0; }

  .duo, .trio { grid-template-columns: 1fr; }
  .duo .fig, .trio .fig { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .duo .fig:last-child .fig__mask,
  .trio .fig .fig__mask { aspect-ratio: 4 / 3; }

  /* La carte garde son cadrage : les marqueurs sont placés en pourcentage de
     l'image, tout autre rapport les décalerait du terrain. Elle prend donc
     simplement toute la largeur disponible, le titre repassant au-dessus. */
  .atlas-wrap__head,
  .atlas,
  .atlas__source { grid-column: 1 / -1; }
  .pin__card { max-width: 9.5rem; padding: 0.6rem 0.7rem; }
  .pin__desc { display: none; }

  .carnet { grid-template-columns: repeat(2, 1fr); }

  .practical { grid-template-columns: 1fr; gap: 3rem; }
}

/* Sans JavaScript, les masques restent ouverts. */
.no-js .fig__mask { clip-path: none; }
.no-js .fig img,
.no-js .fig video { transform: none; }
.no-js .fig figcaption { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero__frame, .hero__img, .hero .overline, .hero__lede, .hero__scroll, .line-inner {
    animation: none;
    clip-path: none;
    transform: none;
    opacity: 1;
  }
  .hero__img { transform: scale(1.02); }
  .hero__rule { display: none; }
  .fig__mask { clip-path: none; }
  .fig img,
  .fig video { transform: none; }
  .closing img { transform: none; }
  [data-reveal] { opacity: 1; transform: none; }
  .fig figcaption { opacity: 1; }

  .nav__sublist,
  .nav__item:hover .nav__sublist,
  .nav__item:focus-within .nav__sublist,
  .nav__item.is-open .nav__sublist,
  .nav__toggle svg {
    transition: none;
  }
}