/* =====================================================================
   LA CATHÉDRALE — Feuille de style
   Restaurant • Lounge — Soissons
   ---------------------------------------------------------------------
   Sommaire
   01. Jetons de design (variables)        06. Hero
   02. Réinitialisation & base             07. Sections éditoriales
   03. Typographie                         08. Galerie & Lightbox
   04. Utilitaires de mise en page         09. Menu / Réservation / Contact
   05. En-tête & navigation                10. Pied de page
                                           11. Animations & responsive
   ---------------------------------------------------------------------
   Principe : deux familles typographiques, l'or en accent seulement,
   beaucoup de blanc, la photographie en héroïne. Aucune dépendance.
   ===================================================================== */

/* =====================================================================
   01. JETONS DE DESIGN
   ===================================================================== */
:root {
  /* Palette (source : cahier des charges) */
  --anthracite: #161B20;
  --anthracite-2: #1c2229;
  --gold: #C4A45A;
  --gold-bright: #d4b76e;
  --gold-ink: #856A24;      /* or « encre » : lisible en texte sur fond clair (≥ AA) */
  --gold-deep: #584827;     /* or sombre : donne la profondeur métallique aux filets */
  --gold-pale: #EFD9A0;     /* or clair (réchauffé) : le reflet qui balaie les filets */
  --ivory: #F6F4EF;
  --stone: #DDD4C4;
  --gray: #7B7F84;
  --text: #262626;
  --muted: #5c6166;        /* gris assombri pour rester ≥ AA sur l'ivoire */

  /* Rôles sémantiques */
  --bg: var(--ivory);
  --bg-dark: var(--anthracite);
  --fg: var(--text);
  --fg-on-dark: var(--ivory);
  --accent: var(--gold);
  --line: rgba(38, 38, 38, .14);      /* filet fin sur clair */
  --line-dark: rgba(246, 244, 239, .16); /* filet fin sur sombre */

  /* Typographie */
  --font-title: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Échelle typographique fluide (clamp : mobile → desktop) */
  --fs-hero: clamp(3rem, 9vw, 7.5rem);
  --fs-h2: clamp(2.1rem, 5vw, 3.75rem);
  --fs-h3: clamp(1.5rem, 3vw, 2.25rem);
  --fs-lead: clamp(1.1rem, 1.6vw, 1.375rem);
  --fs-body: 1.0625rem;      /* 17px */
  --fs-small: 0.9375rem;     /* 15px */
  --fs-eyebrow: 0.8125rem;   /* 13px, en capitales espacées */

  /* Espacement (rythme 8pt, généreux) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 9rem;

  /* Structure */
  --container: 1240px;
  --container-wide: 1500px;
  --radius: 6px;            /* coins « légèrement » arrondis */
  --radius-lg: 10px;
  --header-h: 82px;

  /* Mouvement */
  --ease: cubic-bezier(.22, .61, .36, 1);   /* ease-out doux */
  --dur: .8s;
  --dur-fast: .45s;
}

/* =====================================================================
   02. RÉINITIALISATION & BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Aucun décalage global : chaque section calcule elle-même son point
     d'arrivée (voir « Ancres » plus bas). Réserver ici la hauteur de la
     barre laissait apparaître, au-dessus du titre visé, une bande vide
     de la taille de celle-ci — d'autant plus visible que la barre se
     masque au défilement vers le bas. */
  scroll-padding-top: 0;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }

/* Confort tactile : supprime le délai de 300 ms au tap et le surlignage
   bleu par défaut, remplacé par un rappel discret dans l'or de la maison. */
a, button, [role="button"], summary, input, select, textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(196, 164, 90, .18);
}

ul { list-style: none; margin: 0; padding: 0; }

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

/* Texte réservé aux lecteurs d'écran : invisible à l'œil, bien annoncé.
   Sert par exemple à préciser « (PDF, nouvelle fenêtre) » sur un lien. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement (accessibilité clavier) */
.skip-link {
  position: absolute;
  left: -999px; top: 0;
  z-index: 1000;
  background: var(--anthracite);
  color: var(--ivory);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* =====================================================================
   03. TYPOGRAPHIE
   ===================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 600;
  line-height: 1.08;
  margin: 0;
  letter-spacing: .005em;
}

/* Respiration sous les grands titres : sans cela le texte colle au titre. */
.h2 { font-size: var(--fs-h2); margin-bottom: var(--space-3); }
.h3 { font-size: var(--fs-h3); font-weight: 500; }

p { margin: 0 0 var(--space-2); max-width: 64ch; }

/* Sur-titre en capitales espacées, précédé d'un filet or */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-ink);   /* sur fond clair par défaut ; passe en or vif sur fond sombre (voir plus bas) */
  margin: 0 0 var(--space-3);
}
/* Sur les sections sombres, l'or reprend tout son éclat */
.section--dark .eyebrow,
.fullbleed .eyebrow,
.hero .eyebrow { color: var(--gold); }
.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: .8;
}
.eyebrow--center { justify-content: center; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--muted);
  font-weight: 400;
}

.text-gold { color: var(--accent); }

/* =====================================================================
   04. UTILITAIRES DE MISE EN PAGE
   ===================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}
.container--wide { max-width: var(--container-wide); }

/* Les marges hautes/basses passent par des variables : le calcul du point
   d'arrivée des ancres (plus bas) s'appuie dessus pour viser le CONTENU
   de la section plutôt que le sommet de son rembourrage. */
.section {
  --pad-top: clamp(4.5rem, 11vw, var(--space-8));
  --pad-bottom: clamp(4.5rem, 11vw, var(--space-8));
  padding-block: var(--pad-top) var(--pad-bottom);
}
.section--tight {
  --pad-top: clamp(3.5rem, 8vw, var(--space-7));
  --pad-bottom: clamp(3.5rem, 8vw, var(--space-7));
}
/* Rapprochement de deux sections voisines séparées par le filet doré */
.section--flush-bottom { --pad-bottom: clamp(2rem, 5vw, 3rem); }
.section--flush-top { --pad-top: clamp(2.5rem, 6vw, 3.5rem); }

/* --- Ancres : viser le CONTENU, pas le sommet du rembourrage -----------
   Le titre visé arrive toujours à la même distance sous la barre
   (1,5 rem), quel que soit le rembourrage de la section, et sans bande
   vide au-dessus. La valeur devient négative dès que le rembourrage
   dépasse la hauteur de barre : le défilement va alors « un peu plus bas ».
   Les sections pleine image centrent leur contenu : elles visent leur
   propre sommet. */
.section[id] {
  scroll-margin-top: calc(var(--header-h) + 1.5rem - var(--pad-top));
}
.fullbleed[id] { scroll-margin-top: 0; }

.section--dark {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
}
.section--dark .lead { color: rgba(246, 244, 239, .72); }
.section--dark p { color: rgba(246, 244, 239, .82); }

.section__head { max-width: 62ch; margin-bottom: var(--space-5); }
.section__head--center { margin-inline: auto; text-align: center; }

/* --- Filet doré de séparation entre les sections ---
   Se dessine du centre vers les bords à l'apparition (voir script.js). --- */
.divider {
  position: relative;
  /* Le filet se superpose à la jonction au lieu d'y creuser un interligne :
     sans cette marge négative, ce bandeau de 1px laisserait voir le fond
     ivoire du body — d'où un trait blanc entre deux sections sombres. */
  z-index: 5;
  margin: 0 0 -1px;
  border: 0;
  height: 1px;
  width: 100%;
  overflow: hidden;         /* contient le reflet */
  /* Or franc sur toute la partie centrale, éteint seulement aux extrémités. */
  background: linear-gradient(to right,
    transparent 0%,
    rgba(196, 164, 90, .35) 5%,
    var(--gold) 22%,
    var(--gold-bright) 50%,
    var(--gold) 78%,
    rgba(196, 164, 90, .35) 95%,
    transparent 100%);
  /* On masque par clip-path (et non scaleX) : la boîte garde sa largeur,
     sans quoi l'IntersectionObserver ne détecterait jamais l'élément. */
  clip-path: inset(0 50% 0 50%);
  opacity: 0;
  transition: clip-path 1.1s var(--ease), opacity 1.1s var(--ease);
}
.divider.is-visible { clip-path: inset(0 0 0 0); opacity: 1; }

/* Reflet clair qui traverse le filet : c'est l'effet du composant fourni,
   transposé à l'horizontale (translation d'un dégradé linéaire, animée
   en transform — donc sans reflow ni repaint coûteux). */
.divider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    transparent 38%,
    var(--gold-pale) 50%,
    transparent 62%);
  transform: translateX(-100%);
}
/* Le balayage ne démarre qu'une fois le trait dessiné. */
.divider.is-visible::after {
  animation: divider-sheen 9s var(--ease) 1.2s infinite;
}
@keyframes divider-sheen {
  0%        { transform: translateX(-100%); }
  45%, 100% { transform: translateX(100%); }
}

/* --- Boutons --- */
.btn {
  --btn-fg: var(--ivory);
  --btn-bg: var(--anthracite);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.85rem;
  min-height: 48px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: .04em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius);
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Bouton or (CTA principal) */
.btn--gold {
  --btn-bg: var(--gold);
  --btn-fg: var(--anthracite);
  border-color: var(--gold);
}
.btn--gold:hover { background: var(--gold-bright); border-color: var(--gold-bright); }

/* Bouton fantôme (contour) */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--anthracite);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--anthracite); }

/* Variantes sur fond sombre (classe portée par le bouton ou un parent) */
.on-dark .btn--ghost, .btn--ghost.on-dark, .section--dark .btn--ghost {
  --btn-fg: var(--ivory);
  border-color: var(--line-dark);
}
.on-dark .btn--ghost:hover, .btn--ghost.on-dark:hover, .section--dark .btn--ghost:hover { border-color: var(--ivory); }

/* Lien fléché discret */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: .03em;
  color: var(--gold-ink);
  padding-block: .35rem;
}
.section--dark .link-arrow, .fullbleed .link-arrow { color: var(--gold); }
.link-arrow svg { transition: transform var(--dur-fast) var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

/* =====================================================================
   05. EN-TÊTE & NAVIGATION
   ===================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur) var(--ease);
}
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  z-index: -1;
}
/* Voile sombre au chargement (au-dessus du hero) pour la lisibilité */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(22,27,32,.55), rgba(22,27,32,0));
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--dur-fast) var(--ease);
}
.site-header.is-scrolled::before { opacity: 0; }
.site-header.is-scrolled::after {
  background: rgba(22, 27, 32, .92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom-color: var(--line-dark);
}
.site-header.is-hidden { transform: translateY(-100%); }

.nav {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Logo */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--ivory);
}
.brand__mark { height: 34px; flex: none; display: inline-flex; align-items: center; }
.brand__mark svg, .brand__mark img { height: 100%; width: auto; }
.brand__word {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}
.brand__word small {
  display: block;
  font-family: var(--font-body);
  font-size: .55rem;
  letter-spacing: .34em;
  color: var(--gold);
  margin-top: .28rem;
  font-weight: 600;
}

/* Navigation principale */
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.1rem);
}
.nav__link {
  position: relative;
  color: var(--ivory);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .02em;
  padding: .4rem 0;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="true"]::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: var(--space-2); }
.nav__cta { padding: .7rem 1.35rem; min-height: 44px; }

/* --- Sélecteur de langue ---
   FR actif ; EN et NL sont en place, prêts à être activés dès que les
   traductions existeront (voir le commentaire dans index.html). --- */
.lang { position: relative; }
.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: .5rem .55rem;
  color: var(--ivory);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease);
}
.lang__btn:hover { color: var(--gold); }
.lang__chevron { transition: transform var(--dur-fast) var(--ease); }
.lang[data-open] .lang__chevron { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  z-index: 120;
  min-width: 200px;
  padding: .35rem;
  background: rgba(22, 27, 32, .97);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility var(--dur-fast);
}
.lang[data-open] .lang__menu { opacity: 1; visibility: visible; transform: none; }

.lang__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: .55rem .7rem;
  border-radius: 4px;
  color: var(--ivory);
  font-size: var(--fs-small);
}
a.lang__item:hover { background: rgba(196, 164, 90, .12); color: var(--gold); }
.lang__item[aria-current="true"] { color: var(--gold); }
.lang__item[aria-disabled="true"] { color: rgba(246, 244, 239, .55); cursor: not-allowed; }

/* Langues dans le menu mobile */
.mobile-menu__lang { display: flex; gap: .5rem; margin-top: var(--space-3); }
.mobile-menu__lang span,
.mobile-menu__lang a {
  min-width: 48px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .1em;
  color: rgba(246, 244, 239, .55);
}
/* Une langue disponible (lien) se distingue d'une langue à venir (span) */
.mobile-menu__lang a { color: var(--ivory); }
.mobile-menu__lang a:hover { color: var(--gold); border-color: var(--gold); }
.mobile-menu__lang [aria-current="true"] { color: var(--gold); border-color: var(--gold); }

/* Bouton hamburger */
.burger {
  display: none;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  color: var(--ivory);
}
.burger span {
  position: relative;
  width: 24px; height: 2px;
  background: currentColor;
  transition: background-color var(--dur-fast) var(--ease);
}
.burger span::before, .burger span::after {
  content: "";
  position: absolute;
  left: 0; width: 24px; height: 2px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease), top var(--dur-fast) var(--ease);
}
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }
.burger.is-open span { background: transparent; }
.burger.is-open span::before { top: 0; transform: rotate(45deg); }
.burger.is-open span::after { top: 0; transform: rotate(-45deg); }

/* Menu mobile plein écran */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--anthracite);
  display: flex;
  flex-direction: column;
  /* Dégage la barre fixe en haut, respecte la zone sûre en bas,
     et laisse défiler si la liste ne tient pas. */
  padding: calc(var(--header-h) + 1rem) clamp(1.5rem, 7vw, 3rem)
           calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility var(--dur-fast);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }
/* Centre verticalement quand ça tient — sans jamais rogner le haut,
   contrairement à justify-content: center qui rend le début inaccessible. */
.mobile-menu > nav { margin-block: auto; }
.mobile-menu ul { display: flex; flex-direction: column; gap: .1rem; }
.mobile-menu a {
  display: flex;
  align-items: center;
  min-height: 48px;              /* cible tactile confortable */
  font-family: var(--font-title);
  font-size: clamp(1.35rem, 5.2vw, 1.75rem);
  font-weight: 500;
  color: var(--ivory);
  padding: .25rem 0;
}
.mobile-menu a:hover { color: var(--gold); }
.mobile-menu__foot {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-dark);
  color: rgba(246,244,239,.7);
  font-size: var(--fs-small);
}
.mobile-menu__foot a { font-family: var(--font-body); font-size: 1rem; color: var(--gold); }

/* En-tête « plein » pour les sous-pages (pas de hero derrière) */
.site-header--solid::before { opacity: 0; }
.site-header--solid::after {
  background: rgba(22, 27, 32, .96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom-color: var(--line-dark);
}
.header-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--ivory);
  font-size: var(--fs-small);
  font-weight: 500;
}
.header-back svg { transition: transform var(--dur-fast) var(--ease); }
.header-back:hover svg { transform: translateX(-4px); }

/* =====================================================================
   06. HERO
   ===================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--ivory);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
/* <picture> doit remplir le conteneur, sinon le height:100% de l'image
   se calcule sur une hauteur « auto » : l'image reprend alors ses
   proportions naturelles et n'atteint pas le bas de l'écran. */
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Zoom lent et continu du héros */
  animation: hero-zoom 18s var(--ease) forwards;
  will-change: transform;
}
@keyframes hero-zoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
/* Voile dégradé pour asseoir le texte */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(22,27,32,.82) 0%, rgba(22,27,32,.30) 42%, rgba(22,27,32,.42) 100%);
}
.hero__inner {
  width: 100%;
  padding-bottom: clamp(4rem, 11vh, 8rem);
  padding-top: calc(var(--header-h) + 2rem);
}
/* Halo diffus derrière le sur-titre : détache le texte de la photo
   sans contour ni pastille — les bords s'effacent en dégradé. */
.hero__eyebrow {
  position: relative;
  isolation: isolate;          /* le halo reste contenu sous le texte */
  display: inline-block;
  color: var(--gold);
  letter-spacing: .3em;
  font-size: clamp(.75rem, 1.4vw, .95rem);
  font-weight: 600;
  text-transform: uppercase;
  /* on retire à droite l'espace ajouté par l'interlettrage */
  padding: .35rem calc(.6rem - .3em) .35rem .6rem;
  /* la marge négative annule le rembourrage gauche : le texte reste
     aligné sur le titre et le bouton, seul le halo déborde. */
  margin-left: -.6rem;
}
/* Le halo est partagé par le sur-titre et le sous-titre : même dégradé,
   seul l'étalement diffère selon la forme du bloc. Il détache le texte
   des zones claires de la façade (pierre, passage piéton) sans contour. */
.hero__eyebrow::before,
.hero__sub::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(10, 13, 16, .62) 0%,
    rgba(10, 13, 16, .42) 42%,
    rgba(10, 13, 16, .16) 68%,
    transparent 100%
  );
}
/* Sur-titre : bloc court d'une seule ligne, halo très étiré. */
.hero__eyebrow::before { inset: -140% -55%; }
.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 600;
  line-height: .98;
  letter-spacing: .01em;
  margin: 1rem 0 1.25rem;
  text-shadow: 0 2px 40px rgba(0,0,0,.35);
}
.hero__sub {
  position: relative;
  isolation: isolate;          /* le halo reste contenu sous le texte */
  /* inline-block : la boîte épouse le texte au lieu de s'étendre sur
     toute la largeur du conteneur — le halo ne déborde donc pas à droite. */
  display: inline-block;
  font-family: var(--font-title);
  font-size: var(--fs-lead);
  font-style: italic;
  color: rgba(246,244,239,.9);
  margin-bottom: var(--space-4);
  padding: .2rem .6rem;
  margin-left: -.6rem;         /* même compensation que le sur-titre */
}
/* Sous-titre : bloc plus large, parfois sur deux lignes en mobile.
   Halo moins étiré verticalement, un peu plus débordant sur les côtés. */
.hero__sub::before { inset: -55% -16%; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Indicateur de défilement */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: rgba(246,244,239,.72);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.scroll-cue__line {
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  position: relative;
  overflow: hidden;
}
/* Traînée : une lueur dorée aux extrémités fondues, et non un bloc net.
   Elle s'anime en transform (et non en top) : pas de recalcul de mise en
   page, donc un glissement parfaitement lisse. */
.scroll-cue__line::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 55%;
  background: linear-gradient(to bottom,
    transparent,
    rgba(196, 164, 90, .9) 50%,
    transparent);
  transform: translateY(-100%);
  animation: cue 2.8s var(--ease) infinite;
  will-change: transform;
}
@keyframes cue {
  /* apparition et disparition en fondu : la lueur naît et s'éteint
     au lieu de surgir puis de se couper net aux bords du filet */
  0%        { transform: translateY(-100%); opacity: 0; }
  20%       { opacity: 1; }
  65%       { opacity: 1; }
  75%, 100% { transform: translateY(230%); opacity: 0; }
}

/* =====================================================================
   07. SECTIONS ÉDITORIALES
   ===================================================================== */
/* Grille image + texte alternée */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, var(--space-7));
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__body { max-width: 34rem; }

/* Cadre média avec léger débord et filet or */
.media-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame--tall { aspect-ratio: 4 / 5; }
.media-frame--wide { aspect-ratio: 3 / 2; }
.media-frame--16x9 { aspect-ratio: 16 / 9; }
.media-frame--portrait { aspect-ratio: 3 / 4; }
/* Cadre au ratio naturel de la photo (aucun recadrage) */
.media-frame--natural img { height: auto; object-fit: initial; }

/* Effet de survol des images (scale 1.04) */
.zoom-img { overflow: hidden; }
.zoom-img img {
  transition: transform 1s var(--ease);
  will-change: transform;
}
.zoom-img:hover img { transform: scale(1.04); }

/* Bande photo pleine largeur */
.fullbleed {
  position: relative;
  min-height: clamp(60vh, 70vh, 760px);
  display: flex;
  align-items: center;
  color: var(--ivory);
  overflow: hidden;
  isolation: isolate;
}
.fullbleed__media { position: absolute; inset: 0; z-index: -2; }
.fullbleed__media img { width: 100%; height: 100%; object-fit: cover; }
.fullbleed::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(22,27,32,.85) 0%, rgba(22,27,32,.45) 50%, rgba(22,27,32,.15) 100%);
}
.fullbleed__body { max-width: 40rem; }

/* --- Encadré « Le chef » ---------------------------------------------
   Portrait + parcours, présenté comme une carte posée sur l'ivoire :
   filet or très fin, coins légèrement arrondis, aucun effet d'ombre. */
.chef {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, var(--space-5));
  align-items: center;
  padding: clamp(1.5rem, 3.5vw, var(--space-4));
  border: 1px solid rgba(196, 164, 90, .38);
  border-radius: var(--radius-lg);
  background: rgba(196, 164, 90, .04);
}
.chef__portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
}
.chef__portrait img { width: 100%; height: 100%; object-fit: cover; }
.chef__name {
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 600;
  margin-bottom: .35rem;
}
/* Ligne de parcours : le fait marquant, en italique discret */
.chef__path {
  font-family: var(--font-title);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--gold-ink);
  margin-bottom: var(--space-2);
}
.chef p:last-child { margin-bottom: 0; }

/* Trio de « piliers » (produits, savoir-faire) */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, var(--space-5));
  margin-top: var(--space-5);
}
/* Filet neutre : l'or est réservé aux séparations entre sections */
.pillar { padding-top: var(--space-3); border-top: 1px solid var(--line); }
.section--dark .pillar { border-top-color: var(--line-dark); }
.pillar h3 { margin-bottom: .5rem; }

/* Cocktails : galerie de 3 portraits + texte */
.cocktails-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, var(--space-3));
}
.cocktail-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.cocktail-card figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.25rem 1.1rem;
  font-family: var(--font-title);
  font-size: 1.35rem;
  color: var(--ivory);
  background: linear-gradient(to top, rgba(22,27,32,.8), transparent);
}

/* =====================================================================
   08. GALERIE & LIGHTBOX
   ===================================================================== */
/* Masonry via colonnes CSS (léger, sans JS de layout) */
.masonry {
  column-count: 3;
  column-gap: clamp(.75rem, 1.5vw, 1.1rem);
  margin-top: var(--space-5);
}
.masonry__item {
  position: relative;
  break-inside: avoid;
  margin-bottom: clamp(.75rem, 1.5vw, 1.1rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: 100%;
  display: block;
  background: var(--anthracite-2);
}
.masonry__item img {
  width: 100%;
  transition: transform 1s var(--ease), filter var(--dur-fast) var(--ease);
}
.masonry__item:hover img { transform: scale(1.04); }
/* Décalage d'apparition en cascade, calculé par la POSITION de la vignette :
   plus besoin d'attribut data-delay dans le HTML, donc réordonner les photos
   ne demande que de déplacer le bloc <button>. */
.masonry__item:nth-child(3n+2) { transition-delay: .08s; }
.masonry__item:nth-child(3n+3) { transition-delay: .16s; }

.masonry__item .zoom-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ivory);
  background: rgba(22,27,32,.28);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.masonry__item:hover .zoom-badge,
.masonry__item:focus-visible .zoom-badge { opacity: 1; }

/* Indication de balayage (visible uniquement en carrousel mobile) */
.gallery-hint {
  display: none;
  text-align: center;
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(15, 18, 22, .94);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease), visibility var(--dur-fast);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img {
  max-width: min(1100px, 92vw);
  max-height: 82vh;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  transform: scale(.98);
  transition: transform var(--dur-fast) var(--ease);
}
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__btn {
  position: absolute;
  color: var(--ivory);
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  background: rgba(22,27,32,.5);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.lightbox__btn:hover { background: rgba(196,164,90,.2); border-color: var(--gold); }
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__prev { left: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lightbox__count {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: 50%; transform: translateX(-50%);
  color: rgba(246,244,239,.75);
  font-size: var(--fs-small);
  letter-spacing: .1em;
}

/* =====================================================================
   09. SOIRÉES / MENU / RÉSERVATION / CONTACT
   ===================================================================== */
/* Soirées : bloc évolutif, prêt à recevoir des affiches */
.events {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 5vw, var(--space-6));
  /* Alignement en haut, et non centré : une affiche au format vertical
     est bien plus haute que le texte, et le centrage creusait un vide
     de plus de 200 px au-dessus du titre. */
  align-items: start;
}
/* Colonne d'affiches : de 1 à 3, empilées. Avec une seule affiche —
   le cas courant — le rendu est identique à une colonne simple. */
.events__posters {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

/* Affiche de soirée : on adopte le format NATUREL du fichier déposé.
   Pas de cadre imposé ni de recadrage — une affiche porte des dates et
   des noms qui ne doivent jamais être coupés, quel que soit son format
   (A4, carré, story…). La hauteur du bloc suit donc celle de l'image. */
.events__poster {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-dark);
  align-self: start;
}
.events__poster img { display: block; width: 100%; height: auto; }
.events__list { margin-top: var(--space-4); }
.event-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line-dark);
}
.event-row:last-child { border-bottom: 1px solid var(--line-dark); }
.event-row__title { font-family: var(--font-title); font-size: 1.4rem; }
.event-row__meta { color: var(--gold); font-size: var(--fs-small); letter-spacing: .04em; white-space: nowrap; }

/* Menu / carte */
.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, var(--space-7)) clamp(3rem, 8vw, 6rem);
  margin-top: var(--space-5);
}
.menu-cat__title {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 500;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}
.menu-cat__title .dot { color: var(--gold); }
.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .25rem 1rem;
  align-items: baseline;
  padding: .85rem 0;
}
.menu-item + .menu-item { border-top: 1px dashed var(--line); }
.menu-item__name { font-weight: 600; }
.menu-item__desc {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: var(--fs-small);
  max-width: 46ch;
  margin: 0;
}
.menu-item__price {
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  font-weight: 600;
  white-space: nowrap;
}
.menu-item__price[data-empty]::after { content: "—"; color: var(--gray); }
/* Bouton « Voir la carte complète », centré sous l'aperçu */
.menu-cta {
  margin-top: var(--space-5);
  margin-bottom: 0;
  max-width: none;
  text-align: center;
}

.menu-note {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--fs-small);
  text-align: center;
}

/* Réservation : bandeau fort */
.reserve {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}
.reserve__phone {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-title);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 500;
  color: var(--ivory);
  margin-block: var(--space-3) var(--space-4);
  letter-spacing: .02em;
}
.reserve__phone svg { color: var(--gold); width: .8em; height: .8em; }
.reserve__phone:hover { color: var(--gold); }
/* Libellé qui lève l'ambiguïté : ces horaires sont ceux du service en
   cuisine, pas ceux d'ouverture de l'établissement (section Contact). */
.reserve__hours-label {
  margin: 0 0 .5rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.reserve__hours { display: inline-flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: center; color: rgba(246,244,239,.75); font-size: var(--fs-small); }

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 5vw, var(--space-6));
  align-items: stretch;
}
.info-list { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.info-row { display: grid; grid-template-columns: 28px 1fr; gap: 1rem; align-items: start; }
.info-row svg { width: 20px; height: 20px; color: var(--gold-ink); margin-top: .2rem; }
.info-row h3 { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }
/* overflow-wrap : évite qu'une adresse e-mail longue ne déborde sur mobile */
.info-row p, .info-row a { margin: 0; font-size: var(--fs-body); overflow-wrap: anywhere; }
.info-row a:hover { color: var(--gold-ink); }
.socials { display: flex; gap: .75rem; margin-top: var(--space-4); }
.socials a {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.socials a:hover { border-color: var(--gold-ink); color: var(--gold-ink); }
.socials svg { width: 20px; height: 20px; }

.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 420px;
  height: 100%;
}
.map-frame iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; filter: grayscale(.2) contrast(1.02); }

/* Façade de carte (chargement au clic) */
.map-facade {
  width: 100%;
  min-height: 420px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  text-align: center;
  color: var(--ivory);
  background:
    radial-gradient(120% 120% at 50% 0%, #1f2831 0%, var(--anthracite) 70%);
  position: relative;
  overflow: hidden;
}
.map-facade::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .5;
  pointer-events: none;
}
.map-facade > * { position: relative; }
.map-facade__pin {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: rgba(196,164,90,.08);
}
.map-facade__pin svg { width: 26px; height: 26px; }
.map-facade__label { font-family: var(--font-title); font-size: 1.4rem; }
.map-facade__cta {
  font-size: var(--fs-small);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease);
}
.map-facade:hover .map-facade__cta { color: var(--gold-bright); }

/* --- Pages légales / texte long --- */
.legal {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: clamp(3rem, 7vw, 6rem);
}
.legal .container { max-width: 820px; }
.legal h1 { font-size: var(--fs-h2); margin-bottom: var(--space-2); }
.legal .updated { color: var(--muted); font-size: var(--fs-small); margin-bottom: var(--space-5); }
.legal h2 {
  font-size: var(--fs-h3);
  font-weight: 500;
  margin: var(--space-5) 0 var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.legal p, .legal li { color: var(--text); max-width: none; }
.legal ul.legal-list { list-style: disc; padding-left: 1.3rem; display: grid; gap: .4rem; margin-bottom: var(--space-3); }
.legal a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 2px; }

/* =====================================================================
   10. PIED DE PAGE
   ===================================================================== */
.site-footer {
  background: var(--anthracite);
  color: rgba(246,244,239,.72);
  padding-block: var(--space-6) var(--space-4);
  /* Pas de bordure ici : le filet doré assure déjà la séparation. */
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line-dark);
}
.footer-brand .brand { margin-bottom: var(--space-3); }
.footer-brand p { max-width: 32ch; font-size: var(--fs-small); }
.footer-col h4 {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-2);
}
.footer-col ul { display: grid; gap: .55rem; }
.footer-col a { font-size: var(--fs-small); overflow-wrap: anywhere; }
.footer-col a:hover { color: var(--ivory); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  font-size: var(--fs-small);
}
.footer-bottom a:hover { color: var(--gold); }
.footer-credit { color: rgba(246,244,239,.5); }
.footer-credit a { color: var(--gold); }

/* =====================================================================
   11. ANIMATIONS AU DÉFILEMENT & RESPONSIVE
   ===================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
/* Décalage en cascade */
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

/* ---- Tablette ---- */
@media (max-width: 1024px) {
  :root { --header-h: 74px; }
  .masonry { column-count: 2; }
}

/* ---- Sous 900px : navigation mobile ---- */
@media (max-width: 900px) {
  .nav__list, .nav__cta, .lang { display: none; }  /* langues reprises dans le menu mobile */
  .burger { display: inline-flex; }

  .split { grid-template-columns: 1fr; gap: var(--space-4); }
  .split--reverse .split__media { order: 0; }
  .split__body { max-width: none; }

  .chef { grid-template-columns: 1fr; }
  .chef__portrait { max-width: 300px; }

  .events { grid-template-columns: 1fr; }
  .events__poster { max-width: 380px; }

  .contact-grid { grid-template-columns: 1fr; }
  .menu-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ---- Mobile ---- */
/* Note : sous 720px, le hero utilise une photo PORTRAIT dédiée (voir le
   <picture> dans index.html). L'ancien zoom de recadrage n'a plus lieu
   d'être : l'image est déjà composée pour l'écran vertical. */

@media (max-width: 620px) {
  .pillars { grid-template-columns: 1fr; }
  .cocktails-grid { grid-template-columns: 1fr; gap: var(--space-2); }
  .cocktail-card { aspect-ratio: 16 / 10; }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }
  .brand__word { font-size: 1.15rem; }
  .fullbleed::before { background: linear-gradient(to top, rgba(22,27,32,.9), rgba(22,27,32,.4)); }

  /* Sections un peu moins hautes : 10 blocs à 144px de marges verticales
     font beaucoup de défilement sur un téléphone. */
  /* on met à jour les variables, pas le padding : le calcul des ancres
     reste ainsi juste sur mobile */
  .section {
    --pad-top: clamp(3.5rem, 9vw, 4.5rem);
    --pad-bottom: clamp(3.5rem, 9vw, 4.5rem);
  }
  .fullbleed { min-height: 62vh; }

  /* La carte n'a pas besoin de 420px de haut sur mobile */
  .map-frame, .map-facade, .map-frame iframe { min-height: 300px; }

  /* Le pied de page respire moins */
  .site-footer { padding-block: var(--space-5) var(--space-3); }

  /* Cibles tactiles : au moins 44px de haut sur les liens autonomes.
     (Les liens en pleine ligne de texte gardent leur taille : ils
     bénéficient de l'exception « lien dans un paragraphe » du WCAG.) */
  .brand,
  .link-arrow { min-height: 44px; }
  .footer-col ul { gap: .1rem; }
  .footer-col a,
  .info-row a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Galerie : carrousel horizontal (9 images empilées, c'est trop long) */
  .masonry {
    column-count: initial;
    display: flex;
    align-items: flex-start;   /* pas d'étirement vertical des vignettes */
    gap: .75rem;
    overflow-x: auto;
    /* Indispensable : dès qu'un axe n'est plus « visible », l'autre passe
       de lui-même à « auto ». Sans cette ligne, le carrousel défile aussi
       verticalement de quelques pixels. */
    overflow-y: hidden;
    /* Le doigt ne pilote que l'horizontale ; un geste vertical fait défiler
       la page au lieu d'être capté par le carrousel. */
    touch-action: pan-x;
    /* Évite que le balayage en fin de course déclenche le « retour » du navigateur */
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: .75rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .masonry::-webkit-scrollbar { display: none; }
  .masonry__item {
    flex: 0 0 78%;
    margin-bottom: 0;
    scroll-snap-align: center;
    aspect-ratio: 3 / 4;
  }
  .masonry__item img { width: 100%; height: 100%; object-fit: cover; }
  /* Dans le carrousel, l'apparition se fait en fondu SANS translation :
     le translateY(28px) de .reveal alimente la zone de défilement du
     conteneur (une transformation compte dans l'overflow) et provoquait
     le petit défilement vertical parasite. Il ferait aussi « sauter » les
     vignettes pendant le balayage horizontal. */
  .masonry .reveal { transform: none; }
  .gallery-hint { display: block; }
}

/* =====================================================================
   ACCESSIBILITÉ : mouvement réduit
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .divider { opacity: 1; clip-path: none; }
  .divider::after { display: none; }   /* pas de reflet qui balaie */
  .hero__media img { animation: none; transform: scale(1); }
  .scroll-cue__line::after { display: none; }
}

/* Impression : sobriété */
@media print {
  .site-header, .mobile-menu, .scroll-cue, .lightbox, .map-frame { display: none !important; }
  body { color: #000; background: #fff; }
}