/* ==========================================================================
   Accueil — mise en scène animée (Lenis / GSAP / Motion).

   Règle de base : le CSS ne cache rien tant que [data-sb-root] n'a pas reçu
   `.is-anim` en JS. Sans JavaScript, la page reste entièrement lisible ; c'est
   GSAP qui pose ensuite les états initiaux.
   ========================================================================== */

.sb-x {
  --gut: clamp(1.25rem, 5vw, 4.5rem);
  --wrapw: 88rem;                 /* largeur de page unique */
  /* Hauteur de la barre de navigation : padding vertical (0.8–1.1rem x2)
     plus le logo (32–46px). Sert à dégager les sections épinglées, que la
     barre recouvrirait sinon. */
  --nav-h: clamp(3.6rem, 5.5vw, 5.1rem);
  --rule: 1px solid rgba(244, 231, 211, 0.14);
  /* Pas d'overflow ni de transform ici : ScrollTrigger épingle la galerie en
     `position: fixed`, qu'un ancêtre clippant ou transformé mettrait en cage.
     Le débordement horizontal est contenu par .sb-x-rail__vp. */
}

/* Lenis : le défilement natif doit rester actif pour les liens ancrés. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Mots découpés côté PHP : le masque est le parent, l'enfant coulisse. */
.sb-w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.sb-w__i { display: inline-block; will-change: transform; }

.sb-u {
  font-family: "Ferom", sans-serif; font-size: 0.95rem;
  color: var(--cream); text-decoration: none;
  padding-bottom: 0.16em;
  border-bottom: 1px solid rgba(244, 231, 211, 0.34);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.sb-u:hover { color: var(--rust-lit); border-bottom-color: var(--rust-lit); }

.sb-x-h2 {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.8rem);
  line-height: 1.02; letter-spacing: -0.012em;
  color: var(--cream);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.sb-x-hero {
  position: relative;
  /* Hauteur bornée : `min-height` seul laissait le titre pousser la section
     au-delà de l'écran dès que le texte passait sur deux lignes. */
  height: 100svh;
  min-height: 34rem;
  display: flex; align-items: flex-end;
  padding: clamp(5rem, 12vh, 7.5rem) var(--gut) clamp(2rem, 5vh, 3.2rem);
  overflow: hidden; isolation: isolate;
}
/* Le conteneur déborde volontairement en haut et en bas : c'est cette réserve
   qui permet au parallaxe de le décaler sans jamais découvrir le fond. */
.sb-x-hero__media {
  position: absolute; inset: -10% 0; z-index: -2;
  will-change: transform;
}
.sb-x-hero__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Même cadrage que la page d'attente : la pièce reste dans le bas du cadre. */
  object-position: center 82%;
  will-change: transform;
}
.sb-x-hero__shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(18, 13, 11, 0.55) 0%,
    rgba(18, 13, 11, 0.12) 38%,
    rgba(18, 13, 11, 0.68) 82%,
    rgba(18, 13, 11, 0.95) 100%
  );
}
.sb-x-hero__in { width: 100%; max-width: var(--wrapw); margin-inline: auto; }

.sb-x-hero__title {
  margin: 0 0 clamp(1.4rem, 3vw, 2.2rem);
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 400;
  /* Plafonné pour tenir dans la hauteur d'écran avec le bloc de pied. */
  font-size: clamp(2.2rem, 7vw, 5.6rem);
  line-height: 0.94; letter-spacing: -0.018em;
  text-transform: uppercase; color: var(--cream);
  max-width: 15ch;
}
.sb-x-hero__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap;
  border-top: var(--rule); padding-top: clamp(1.2rem, 2.6vw, 1.8rem);
}
.sb-x-hero__text {
  margin: 0; max-width: 34ch;
  color: var(--cream-dim); font-size: clamp(0.92rem, 1.5vw, 1.02rem); line-height: 1.55;
}
.sb-x-hero__cta { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.4rem); }

/* Bouton magnétique : Motion pilote x/y, le CSS ne gère que l'apparence. */
.sb-mag {
  display: inline-block; text-decoration: none;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(1.05rem, 2.1vw, 1.5rem);
  color: var(--cream);
  padding: 0.62em 1.25em;
  border: 1px solid var(--rust-lit); border-radius: 999px;
  white-space: nowrap; will-change: transform;
  transition: background-color 0.35s ease, color 0.35s ease;
}
.sb-mag:hover { background: var(--rust-lit); color: var(--ink-2); }

/* ==========================================================================
   Bandeau d'informations sous le hero
   ========================================================================== */
/* Le filet traverse toute la largeur, le contenu suit la grille de page. */
.sb-x-bar {
  padding: clamp(0.9rem, 2vw, 1.3rem) var(--gut);
  border-block: var(--rule);
  background: var(--ink);
  font-size: 0.86rem;
}
.sb-x-bar__in {
  max-width: var(--wrapw); margin-inline: auto;
  display: flex; flex-wrap: wrap;
  gap: clamp(1.2rem, 4vw, 3.5rem);
}
.sb-x-bar__i { display: flex; align-items: baseline; gap: 0.6rem; color: var(--cream); }
.sb-x-bar__i b {
  font-weight: 400; font-family: "Ferom", sans-serif;
  font-size: 0.72rem; color: var(--rust-lit);
}
.sb-x-bar__i a { text-decoration: none; transition: color 0.25s ease; }
.sb-x-bar__i a:hover { color: var(--rust-lit); }

/* ==========================================================================
   Manifeste
   ========================================================================== */
.sb-x-word {
  padding: clamp(3.2rem, 8vw, 5.5rem) var(--gut);
  max-width: var(--wrapw); margin-inline: auto;
  display: grid;
  /* La colonne de gauche est plus large : elle porte la citation. */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 5vw, 4rem); align-items: start;
}
/* La flamme est posée en bas de la citation, à sa hauteur de texte — elle ne
   flotte plus au milieu d'une colonne vide. */
.sb-x-word__l {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: 1.5rem;
}
.sb-x-word__mark {
  width: auto; height: clamp(64px, 7vw, 104px);
  opacity: 0.45; align-self: end;
}
.sb-x-word__pt {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(1.8rem, 5.2vw, 4.2rem);
  line-height: 1.04; letter-spacing: -0.014em;
  color: var(--cream); max-width: 22ch;
}
.sb-x-word__fr {
  margin: 0.9rem 0 0;
  font-family: "Ferom", sans-serif; font-style: italic;
  font-size: 1rem; color: var(--rust-lit);
}
.sb-x-word__text {
  color: var(--cream-dim); font-size: clamp(0.98rem, 1.7vw, 1.08rem); line-height: 1.75;
  padding-top: clamp(0.5rem, 3vw, 2rem);
}
.sb-x-word__text p { margin: 0 0 1.1rem; }
.sb-x-word__text p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Savoir-faire — trois blocs
   ========================================================================== */
.sb-x-craft {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  padding: 0 var(--gut) clamp(3rem, 7vw, 5rem);
  max-width: var(--wrapw); margin-inline: auto;
}
.sb-x-craft__i { margin: 0; display: flex; flex-direction: column; }
.sb-x-craft__m { overflow: hidden; border-radius: 3px; margin-bottom: 1.1rem; }
.sb-x-craft__m img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  transition: transform 0.9s cubic-bezier(.2, .7, .2, 1);
}
.sb-x-craft__i:hover .sb-x-craft__m img { transform: scale(1.05); }
.sb-x-craft__n {
  font-family: "Ferom", sans-serif; font-size: 0.72rem;
  color: var(--rust-lit); font-variant-numeric: tabular-nums;
  margin-bottom: 0.4rem;
}
.sb-x-craft__t {
  margin: 0 0 0.5rem;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: var(--cream);
}
.sb-x-craft__d { margin: 0; color: var(--cream-dim); font-size: 0.92rem; line-height: 1.6; }

/* ==========================================================================
   Aperçu de la carte — trois colonnes de plats réels
   ========================================================================== */
.sb-x-menu {
  padding: clamp(3rem, 7vw, 5rem) var(--gut);
  max-width: var(--wrapw); margin-inline: auto;
  border-top: var(--rule);
}
.sb-x-menu__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.sb-x-menu__cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
}
.sb-x-menu__cat {
  margin: 0 0 1rem; padding-bottom: 0.6rem;
  border-bottom: var(--rule);
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--rust-lit);
}
.sb-x-menu__list { list-style: none; margin: 0; padding: 0; }
.sb-x-menu__list li {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.42rem 0; font-size: 0.94rem;
}
.sb-x-menu__n { color: var(--cream); flex: 0 1 auto; min-width: 0; }
.sb-x-menu__lead {
  flex: 1 0 2rem; min-width: 2rem;
  border-bottom: 1px dotted rgba(244, 231, 211, 0.26);
  transform: translateY(-0.26em);
}
.sb-x-menu__p { color: var(--cream-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==========================================================================
   Avis
   ========================================================================== */
.sb-x-avis {
  padding: clamp(3rem, 7vw, 5rem) var(--gut);
  max-width: var(--wrapw); margin-inline: auto;
  border-top: var(--rule);
}
.sb-x-avis__h {
  margin: 0 0 clamp(1.6rem, 4vw, 2.6rem);
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem); color: var(--cream);
}
.sb-x-avis__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); }
.sb-x-avis__i {
  margin: 0; padding: clamp(1.2rem, 2.5vw, 1.8rem);
  border: var(--rule); border-radius: 3px;
  display: flex; flex-direction: column; gap: 1rem;
}
.sb-x-avis__i p {
  margin: 0; color: var(--cream); font-size: 0.98rem; line-height: 1.6;
  font-style: italic;
}
.sb-x-avis__i footer {
  font-family: "Ferom", sans-serif; font-size: 0.82rem; color: var(--cream);
  margin-top: auto;
}
.sb-x-avis__i footer span { color: var(--cream-dim); }
.sb-x-avis__i footer span::before { content: " · "; }

/* ==========================================================================
   Galerie horizontale épinglée
   ========================================================================== */
.sb-x-rail { position: relative; }

/* La section occupe exactement un écran et centre son contenu : épinglée en
   « top top », elle collait sinon à la barre de navigation, avec un grand vide
   sous les cartes. Le retrait haut dégage la barre. */
.sb-x-rail__inner {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  padding-top: calc(var(--nav-h) + clamp(1rem, 3vh, 2rem));
  padding-bottom: clamp(1.5rem, 5vh, 3rem);
}

/* Le titre reste fixe pendant que les cartes défilent : dans la piste, il
   sortait du cadre par la gauche et se retrouvait tronqué. */
.sb-x-rail__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding-inline: max(var(--gut), calc((100% - var(--wrapw)) / 2)) var(--gut);
}

.sb-x-rail__vp { overflow: hidden; }
.sb-x-rail__track {
  display: flex; align-items: stretch;
  gap: clamp(1.2rem, 2.4vw, 2.2rem);
  padding-inline: max(var(--gut), calc((100% - var(--wrapw)) / 2)) var(--gut);
  width: max-content;
  will-change: transform;
}

/* Pas de `will-change` permanent ici : huit cartes promues en calque, chacune
   avec une grande image, saturent la mémoire GPU pendant tout le défilement
   horizontal. C'est le JS qui la pose le temps du fondu, puis la retire. */
.sb-x-card {
  flex: 0 0 auto; width: clamp(15rem, 21vw, 21rem);
  display: flex; flex-direction: column;
}
.sb-x-card__media { overflow: hidden; border-radius: 3px; margin-bottom: 1rem; }
.sb-x-card__media img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
  transition: transform 0.9s cubic-bezier(.2, .7, .2, 1);
}
.sb-x-card:hover .sb-x-card__media img { transform: scale(1.05); }
.sb-x-card__meta { display: flex; align-items: baseline; gap: 0.7rem; }
.sb-x-card__n { font-family: "Ferom", sans-serif; font-size: 0.74rem; color: var(--rust-lit); font-variant-numeric: tabular-nums; }
.sb-x-card__t {
  margin: 0; flex: 1;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 400;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem); color: var(--cream);
}
.sb-x-card__p { font-family: "Bricolage Grotesque", sans-serif; color: var(--rust-lit); font-variant-numeric: tabular-nums; }
.sb-x-card__d { margin: 0.5rem 0 0; color: var(--cream-dim); font-size: 0.9rem; line-height: 1.55; }

/* ==========================================================================
   Fin de page
   ========================================================================== */
.sb-x-end {
  border-top: var(--rule);
  padding: clamp(3.2rem, 8vw, 5.5rem) var(--gut);
  max-width: var(--wrapw); margin-inline: auto;
  text-align: center;
}
.sb-x-end__call { display: inline-block; text-decoration: none; will-change: transform; }
.sb-x-end__lbl {
  display: block; margin-bottom: 0.7rem;
  font-family: "Ferom", sans-serif; font-size: 0.82rem; color: var(--cream-dim);
}
.sb-x-end__num {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(1.8rem, 7.4vw, 5.6rem);
  line-height: 0.98; letter-spacing: -0.02em;
  color: var(--cream);
  transition: color 0.35s ease;
}
.sb-x-end__call:hover .sb-x-end__num { color: var(--rust-lit); }
.sb-x-end__note { margin: 1.1rem 0 0; font-size: 0.84rem; color: var(--cream-dim); }

.sb-x-end__grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(2rem, 6vw, 5rem);
  margin-top: clamp(3rem, 7vw, 4.5rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: var(--rule);
  text-align: left;
}
.sb-x-sched { margin: 0; min-width: 17rem; }
.sb-x-sched > div {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.8rem; padding: 0.4rem 0; font-size: 0.88rem;
  border-top: var(--rule);
}
.sb-x-sched dt { color: var(--cream); }
.sb-x-sched dd { margin: 0; color: var(--cream-dim); }
.sb-x-addr {
  font-style: normal; color: var(--cream);
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem;
  font-size: 0.95rem;
}

/* Les états initiaux ne sont plus écrits ici : c'est GSAP qui les pose
   (gsap.set) juste avant de créer les déclencheurs. Le CSS ne masque donc
   jamais rien — si le JS échoue, la page reste entièrement lisible. */

/* ==========================================================================
   Adaptations
   ========================================================================== */
@media (max-width: 1000px) {
  .sb-x-craft { grid-template-columns: 1fr 1fr; }
  .sb-x-craft__i:last-child { grid-column: 1 / -1; }
  .sb-x-menu__cols, .sb-x-avis__grid { grid-template-columns: 1fr 1fr; }
  .sb-x-avis__i:last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .sb-x-word { grid-template-columns: 1fr; }
  .sb-x-word__text { padding-top: 0; }
  /* Sans épinglage : simple défilement horizontal au doigt. */
  .sb-x-rail__vp { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .sb-x-rail__vp::-webkit-scrollbar { display: none; }
  .sb-x-rail__track { width: max-content; }
  .sb-x-rail__head { padding-inline: var(--gut); }
  .sb-x-card { width: min(72vw, 20rem); }
}
@media (max-width: 660px) {
  .sb-x-craft, .sb-x-menu__cols, .sb-x-avis__grid { grid-template-columns: 1fr; }
  .sb-x-craft__i:last-child, .sb-x-avis__i:last-child { grid-column: auto; }
}
@media (max-width: 560px) {
  .sb-x-hero__foot { flex-direction: column; align-items: flex-start; }
  .sb-x-sched > div { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .sb-x-bar { gap: 0.9rem 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-x-card__media img, .sb-x-craft__m img { transition: none; }
}