@font-face {
  font-family: 'Instrument Serif';
  src: url('polices/instrument-serif-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('polices/instrument-serif-latin-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('polices/geist-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --nuit: #0B0E0D;
  --encre: #161B19;
  --craie: #F5F2EB;
  --sable: #E4DED1;
  --laiton: #B4914F;
  --doux: #7E7A6E;

  --display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --courant: 'Geist', system-ui, -apple-system, sans-serif;

  --sortie: cubic-bezier(0.22, 1, 0.36, 1);
  --marge: clamp(1.25rem, 5vw, 5rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--craie);
  color: var(--nuit);
  font-family: var(--courant);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Le grain casse l'aplat numérique : c'est ce qui fait qu'une photo posée
   sur un fond plat cesse de ressembler à un montage. */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 900;
  pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23b)'/%3E%3C/svg%3E");
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; }

p { margin: 0; }

a { color: inherit; }

.pastille {
  font-family: var(--courant);
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--doux); margin: 0;
}

.titre-geant {
  font-size: clamp(3.5rem, 15vw, 11rem);
  line-height: 0.88;
  letter-spacing: -0.03em;
}

/* ── Ouverture ─────────────────────────────────────────────── */

/* Le noir vient du voile, pas de l'écran lui-même : c'est sa rétractation
   qui découvre la page. Un fond posé ici resterait opaque derrière lui. */
.ouverture {
  position: fixed; inset: 0; z-index: 1000;
  color: var(--craie);
  display: grid; place-items: center;
}
.ouverture__nom {
  font-family: var(--display);
  font-size: clamp(2rem, 9vw, 5rem);
  line-height: 1; letter-spacing: -0.02em;
  display: flex; gap: 0.3em; overflow: hidden;
}
.ouverture__nom span {
  display: block;
  transform: translateY(110%);
  animation: monter 1s var(--sortie) forwards;
}
.ouverture__nom span:nth-child(2) { animation-delay: 0.12s; }
@keyframes monter { to { transform: translateY(0); } }

.ouverture__compte {
  position: absolute; right: var(--marge); bottom: var(--marge);
  font-family: var(--display); font-size: clamp(3rem, 12vw, 7rem);
  line-height: 1; color: var(--laiton);
}
/* Le voile passe derrière le nom et le compteur, sinon il les cache : posé
   en dernier dans le balisage et positionné, il se peindrait par-dessus. */
.ouverture__voile {
  position: absolute; inset: 0; z-index: -1;
  background: var(--nuit);
  transform-origin: top;
}
.ouverture.est-partie { pointer-events: none; }
.ouverture.est-partie .ouverture__nom,
.ouverture.est-partie .ouverture__compte { opacity: 0; transition: opacity 0.4s; }
.ouverture.est-partie .ouverture__voile {
  transform: scaleY(0);
  transition: transform 1.1s var(--sortie);
}

/* ── En-tête ───────────────────────────────────────────────── */

.entete {
  position: fixed; inset: 0 0 auto; z-index: 800;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.25rem var(--marge);
  color: var(--craie);
  transition: background 0.5s var(--sortie), color 0.5s var(--sortie),
              padding 0.5s var(--sortie);
}
.entete__nom { font-family: var(--display); font-size: 1.35rem; text-decoration: none; }
.entete__nav { display: none; gap: 2rem; font-size: 0.9rem; }
.entete__nav a { text-decoration: none; opacity: 0.85; }
.entete__nav a:hover { opacity: 1; }
.entete__tel {
  font-size: 0.85rem; text-decoration: none;
  border: 1px solid currentColor; padding: 0.55rem 1.1rem; border-radius: 100px;
}
.entete.est-posee {
  background: var(--craie); color: var(--nuit);
  padding-block: 0.9rem;
  box-shadow: 0 1px 0 rgba(11, 14, 13, 0.08);
}
/* En vertical l'en-tête occupe le haut du cadre en permanence : une bande
   crème posée sur une section noire coupe l'image en deux. */
.entete.est-posee.sur-sombre {
  background: var(--nuit); color: var(--craie);
  box-shadow: 0 1px 0 rgba(245, 242, 235, 0.14);
}
@media (min-width: 62rem) { .entete__nav { display: flex; } }

/* ── Héros ─────────────────────────────────────────────────── */

.heros {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--marge) clamp(2.5rem, 7vw, 4rem);
  color: var(--craie); overflow: hidden;
}
.heros__fond { position: absolute; inset: 0; z-index: -2; }
.heros__fond img { transform: scale(1.12); transform-origin: center 60%; }
.heros::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(11, 14, 13, 0.65) 0%, rgba(11, 14, 13, 0.25) 35%, rgba(11, 14, 13, 0.88) 100%);
}
.sur-titre {
  font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 1.25rem; color: var(--sable);
}
.heros__accroche {
  max-width: 34ch; margin-top: 1.5rem;
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.35rem);
  color: var(--sable);
}
.heros__bas {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-top: clamp(2.5rem, 8vw, 5rem);
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sable);
}
.descendre { position: relative; padding-left: 2.4rem; }
.descendre::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 1.8rem; height: 1px;
  background: currentColor; transform-origin: left;
  animation: tirer 2.2s var(--sortie) infinite;
}
@keyframes tirer {
  0%, 100% { transform: scaleX(0.3); opacity: 0.4; }
  50% { transform: scaleX(1); opacity: 1; }
}

/* ── Manifeste ─────────────────────────────────────────────── */

.manifeste {
  padding: clamp(6rem, 18vw, 12rem) var(--marge);
  background: var(--craie);
}
.manifeste__texte {
  font-family: var(--display);
  font-size: clamp(1.75rem, 5.5vw, 4rem);
  line-height: 1.12; letter-spacing: -0.02em;
  max-width: 20ch;
}
.manifeste__texte .mot { display: inline-block; overflow: hidden; }
.manifeste__texte .mot > span {
  display: inline-block; transform: translateY(105%);
  transition: transform 0.7s var(--sortie);
}
.manifeste__texte.est-vue .mot > span { transform: translateY(0); }

/* ── Bandeau défilant ──────────────────────────────────────── */

.bandeau {
  background: var(--nuit); color: var(--craie);
  padding: 1.15rem 0; overflow: hidden;
}
.bandeau__piste {
  display: flex; gap: 2.5rem; width: max-content;
  font-family: var(--display); font-size: clamp(1.35rem, 3.5vw, 2.25rem);
  white-space: nowrap;
  animation: defiler 32s linear infinite;
}
.bandeau__piste span:nth-child(even) { color: var(--laiton); }
@keyframes defiler { to { transform: translateX(-50%); } }

/* ── Savoir-faire ──────────────────────────────────────────── */

.savoir { background: var(--craie); padding-bottom: clamp(4rem, 10vw, 8rem); }

/* Le z-index est indispensable : pendant leur révélation les textes portent
   un transform, donc ils se peignent au niveau des éléments positionnés et
   passeraient devant l'image collante. */
.savoir__image {
  position: sticky; top: 0; z-index: 1; height: 58svh;
  overflow: hidden; background: var(--nuit);
}
.volet {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transform: scale(1.06);
  transition: opacity 0.8s var(--sortie), transform 1.2s var(--sortie);
}
.volet.est-actif { opacity: 1; transform: scale(1); }

.savoir__textes { padding: 0 var(--marge); }
.etape {
  min-height: 62svh; display: flex; flex-direction: column; justify-content: center;
  gap: 0.9rem; padding: clamp(2rem, 6vw, 4rem) 0;
  border-bottom: 1px solid rgba(11, 14, 13, 0.12);
}
.etape:last-child { border-bottom: 0; }
.etape h2 { font-size: clamp(2rem, 6.5vw, 3.5rem); line-height: 1; letter-spacing: -0.02em; }
.etape p { max-width: 42ch; color: #3B3F3C; }

@media (min-width: 62rem) {
  .savoir { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
  .savoir__image { height: 100svh; }
  .savoir__textes { padding-right: var(--marge); }
  .etape { min-height: 100svh; }
}

/* ── La carte ──────────────────────────────────────────────── */

.carte {
  position: relative;
  background: var(--nuit); color: var(--craie);
  padding: clamp(5rem, 14vw, 10rem) var(--marge) clamp(5rem, 12vw, 9rem);
}
.carte .pastille { color: var(--laiton); }
.carte__entete { margin-bottom: clamp(3rem, 8vw, 6rem); }
.carte__entete .titre-geant { margin: 0.5rem 0 1.5rem; }
.carte__note { max-width: 40ch; color: var(--sable); }

.plats { list-style: none; margin: 0; padding: 0; }
.plat {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 1.5rem;
  padding: clamp(1.4rem, 4vw, 2.2rem) 0;
  border-top: 1px solid rgba(245, 242, 235, 0.16);
  position: relative;
  transition: color 0.4s var(--sortie);
}
.plat:last-child { border-bottom: 1px solid rgba(245, 242, 235, 0.16); }
.plat__nom {
  font-family: var(--display);
  font-size: clamp(1.5rem, 5vw, 2.75rem); line-height: 1.05;
  letter-spacing: -0.01em;
}
.plat__prix {
  font-family: var(--display);
  font-size: clamp(1.25rem, 3.5vw, 2rem); color: var(--laiton);
  align-self: start;
  /* Placement explicite : la description occupe toute la ligne suivante et
     le placement automatique enverrait le prix en dessous d'elle. */
  grid-column: 2; grid-row: 1;
}
.plat__prix::after { content: ' €'; font-size: 0.6em; }
.plat__desc {
  grid-column: 1 / -1; max-width: 46ch;
  font-size: 0.92rem; color: var(--doux);
}
@media (hover: hover) {
  .plat:hover { color: var(--laiton); }
}

.apercu {
  position: fixed; z-index: 700; top: 0; left: 0;
  width: 15rem; height: 19rem; overflow: hidden;
  pointer-events: none; opacity: 0;
  /* L'arrondi et l'ombre font lire une vignette posée sur la carte ; à bord
     franc, elle tranche le nom du plat comme une image mal calée. */
  border-radius: 0.35rem;
  box-shadow: 0 1.25rem 2.5rem rgba(11, 14, 13, 0.6);
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity 0.35s var(--sortie), transform 0.5s var(--sortie);
}
.apercu.est-vu { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Sans curseur à suivre, l'aperçu se pose en incrustation dans le coin :
   posé au milieu il coupait le nom du plat qu'il est censé illustrer. */
@media (hover: none) {
  .apercu {
    left: auto; right: var(--marge);
    top: auto; bottom: clamp(1.75rem, 7vw, 3.5rem);
    width: min(38vw, 11rem); height: min(50vw, 14.5rem);
    transform: translateY(1.25rem) scale(0.94);
  }
  .apercu.est-vu { transform: translateY(0) scale(1); }
}

/* ── Galerie horizontale ───────────────────────────────────── */

.galerie { height: 320svh; background: var(--nuit); }
.galerie__collant {
  position: sticky; top: 0; height: 100svh;
  display: flex; align-items: center; overflow: hidden;
}
.galerie__piste {
  display: flex; gap: clamp(1rem, 3vw, 2.5rem);
  padding-inline: var(--marge); will-change: transform;
}
.vue {
  margin: 0; flex: 0 0 auto;
  width: clamp(16rem, 72vw, 34rem);
}
.vue img { height: clamp(22rem, 68svh, 40rem); }
.vue figcaption {
  margin-top: 0.9rem; font-size: 0.8rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--doux);
}

/* ── Le lieu ───────────────────────────────────────────────── */

.lieu { background: var(--craie); }
.lieu__image { height: 68svh; overflow: hidden; }
/* L'image est centrée sur son cadre, pas calée en haut : la parallaxe la
   déplace dans les deux sens et découvrirait le fond sinon. */
.lieu__image img { height: 128%; margin-top: -14%; will-change: transform; }
.lieu__texte {
  padding: clamp(3rem, 9vw, 6rem) var(--marge) clamp(5rem, 12vw, 8rem);
  display: grid; gap: 1.25rem;
}
.lieu__texte h2 {
  font-size: clamp(2.25rem, 8vw, 5rem); line-height: 0.95; letter-spacing: -0.025em;
}
.lieu__texte > p { max-width: 44ch; color: #3B3F3C; }

.infos { margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.infos > div {
  display: grid; gap: 0.15rem;
  padding-top: 1rem; border-top: 1px solid rgba(11, 14, 13, 0.12);
}
.infos dt {
  font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--doux);
}
.infos dd { margin: 0; font-size: 1.05rem; }

@media (min-width: 62rem) {
  .lieu { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; }
  .lieu__image { height: 100svh; }
  .infos { grid-template-columns: repeat(2, 1fr); }
}

/* ── Réserver ──────────────────────────────────────────────── */

.reserver {
  position: relative; min-height: 92svh;
  display: grid; align-items: center;
  padding: clamp(5rem, 12vw, 9rem) var(--marge);
  color: var(--craie); overflow: hidden;
}
.reserver__fond { position: absolute; inset: 0; z-index: -2; }
.reserver__fond img { transform: scale(1.1); }
.reserver::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(11, 14, 13, 0.62);
}
.reserver__contenu { display: grid; gap: 1.75rem; max-width: 46rem; }
.reserver__contenu > p { max-width: 42ch; color: var(--sable); }

.boutons { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.bouton {
  display: inline-flex; align-items: center; min-height: 3.25rem;
  padding: 0 1.75rem; border-radius: 100px;
  border: 1px solid var(--craie); text-decoration: none;
  font-size: 0.95rem; letter-spacing: 0.02em;
  transition: background 0.35s var(--sortie), color 0.35s var(--sortie);
}
.bouton:hover { background: var(--craie); color: var(--nuit); }
.bouton--plein { background: var(--craie); color: var(--nuit); }
.bouton--plein:hover { background: var(--laiton); border-color: var(--laiton); color: var(--nuit); }

/* ── Pied ──────────────────────────────────────────────────── */

.pied {
  background: var(--nuit); color: var(--sable);
  padding: clamp(3rem, 8vw, 5rem) var(--marge) 2rem;
  display: grid; gap: clamp(2rem, 6vw, 3.5rem);
}
.pied__nom {
  font-family: var(--display);
  font-size: clamp(2.75rem, 14vw, 9rem); line-height: 0.9;
  letter-spacing: -0.03em; color: var(--craie);
}
.pied__cols {
  display: grid; gap: 1.5rem;
  border-top: 1px solid rgba(245, 242, 235, 0.16); padding-top: 2rem;
  font-size: 0.9rem;
}
.pied__cols div { display: grid; gap: 0.25rem; }
.pied__cols span:first-child { color: var(--doux); font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase; }
.pied__mention { font-size: 0.75rem; color: var(--doux); }
@media (min-width: 48rem) {
  .pied__cols { grid-template-columns: repeat(3, 1fr); }
}

/* ── Révélations ───────────────────────────────────────────── */

[data-monte] {
  opacity: 0; transform: translateY(1.75rem);
  transition: opacity 0.8s var(--sortie), transform 0.9s var(--sortie);
}
[data-monte].est-vue { opacity: 1; transform: none; }

.ligne { display: block; overflow: hidden; }
.ligne > span {
  display: block; transform: translateY(105%);
  transition: transform 0.95s var(--sortie);
}
[data-lignes].est-vue .ligne > span { transform: translateY(0); }
[data-lignes].est-vue .ligne:nth-child(2) > span { transition-delay: 0.09s; }

/* Les images se découvrent au lieu d'apparaître : le mouvement du cache
   se lit à l'écran, un fondu ne se voit pas dans une vidéo compressée. */
.savoir__image, .lieu__image, .heros__fond, .vue img {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-monte], .ligne > span, .manifeste__texte .mot > span {
    opacity: 1 !important; transform: none !important;
  }
}