/* ==========================================================================
   Sel & Braise — habillage partagé du site (nav, pied, coquille de page).
   Chargé sur tous les templates custom (accueil, menu, contact).
   La page d'accueil charge en plus home.css (compte à rebours).
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ferom";
  src: url("../fonts/Ferom-Light.woff") format("woff");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ferom";
  src: url("../fonts/Ferom-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Palette + base ---------- */
.sb-site {
  --ink:      #1c1613;
  --ink-2:    #120d0b;
  --cream:    #f4e7d3;
  --cream-dim:#cbb99f;
  --rust:     #b1531f;
  --rust-lit: #d0682c;
  --ember:    #e2431c;
  --hair:     rgba(244, 231, 211, 0.16);
  --wrap:     1160px;
}

html.sb-coming-soon-html { font-size: 16px; -webkit-text-size-adjust: 100%; }

/* Menu mobile ouvert : le fond est figé. */
html.sb-locked, html.sb-locked body { overflow: hidden; }

.sb-site {
  margin: 0;
  background: var(--ink-2);
  color: var(--cream);
  font-family: "Ferom", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.sb-site *, .sb-site *::before, .sb-site *::after { box-sizing: border-box; }
/* :where() met ce garde-fou à spécificité zéro : sans lui, `height: auto`
   écrasait la hauteur des logos (SVG sans width/height intrinsèques, donc
   effondrés à 0). Toute règle de composant doit pouvoir le surcharger. */
:where(.sb-site img) { max-width: 100%; height: auto; display: block; }
/* La skin Beaver Builder impose `a:hover { color:#2b7bb9; text-decoration:underline }`.
   On l'annule via :where(), donc à spécificité nulle : sans cela ce garde-fou
   pesait plus lourd que `.sb-mag:hover` et forçait la couleur des boutons. */
:where(.sb-site) a,
:where(.sb-site) a:hover,
:where(.sb-site) a:focus { color: inherit; text-decoration: none; }

/* Boutons : on repart d'une base neutre, l'apparence native et les styles de
   la skin n'ont rien à faire ici. */
.sb-site button {
  -webkit-appearance: none; appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
}

/* ---------- Révélation au scroll ----------
   La classe .sb-reveal est posée par JS (site.js) : sans JS, rien n'est caché.
   Décalage en cascade via --sb-d (index posé par JS). */
.sb-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(.2, .7, .2, 1), transform 0.7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--sb-d, 0) * 80ms);
  will-change: opacity, transform;
}
.sb-reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Parallaxe ----------
   Le décalage passe par la propriété `translate`, indépendante de `transform` :
   les deux se composent, donc le parallaxe cohabite avec la révélation
   ci-dessus sans que l'un écrase l'autre. */
.sb-parallax { will-change: translate; }

/* ---------- Animation d'entrée ----------
   CSS pur : joue au chargement, sans dépendre du JS et sans flash. */
.sb-isos { animation: sb-isos-in 1.8s cubic-bezier(.2, .7, .2, 1) 0.15s both; }
@keyframes sb-isos-in {
  from { opacity: 0; scale: 1.1; }
  to   { opacity: 1; scale: 1; }
}

/* Le titre monte derrière le masque (overflow) de son parent. */
.sb-page__title > span {
  animation: sb-title-in 1.1s cubic-bezier(.16, .84, .24, 1) 0.3s both;
}
@keyframes sb-title-in {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

/* Sur-titre et chapô suivent, en cascade. */
.sb-page__hero-inner > .sb-eyebrow-line { animation: sb-hero-in 0.9s cubic-bezier(.2, .7, .2, 1) 0.15s both; }
.sb-page__hero-inner > .sb-page__intro  { animation: sb-hero-in 0.9s cubic-bezier(.2, .7, .2, 1) 0.75s both; }
@keyframes sb-hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-reveal { opacity: 1; transform: none; transition: none; }
  .sb-parallax { translate: none !important; }
  .sb-isos,
  .sb-iso img,
  .sb-page__title > span,
  .sb-page__hero-inner > .sb-eyebrow-line,
  .sb-page__hero-inner > .sb-page__intro { animation: none; }
  .sb-iso img { translate: none; }
}

.sb-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.2rem, 4vw, 2.4rem); }

/* Titres de section, style commun */
.sb-h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  color: var(--cream);
  margin: 0;
}
.sb-eyebrow-line {
  display: inline-block;
  font-family: "Ferom", sans-serif;
  text-transform: uppercase; letter-spacing: 0.32em;
  font-size: clamp(0.6rem, 1.4vw, 0.74rem);
  color: var(--rust-lit);
  padding-left: 0.32em; /* compense le tracking après la dernière lettre */
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.sb-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(18, 13, 11, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--hair);
}
.sb-nav__inner {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: clamp(0.8rem, 2vw, 1.1rem) clamp(1.2rem, 4vw, 2.4rem);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
.sb-nav__brand { display: inline-flex; align-items: center; text-decoration: none; }
/* Le logo est un bloc horizontal (~4:1) : il lui faut un peu de hauteur pour
   que « SEL & BRAISE » reste lisible à côté du monogramme. Les attributs
   width/height posés en PHP donnent le ratio ; ici on ne pilote que la hauteur. */
.sb-nav__logo { height: clamp(32px, 4.4vw, 46px); width: auto; flex: 0 0 auto; }
.sb-nav__logo--text {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--cream);
  font-size: 1.2rem;
}
.sb-nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 2.6rem);
}
.sb-nav__link {
  text-decoration: none; color: var(--cream);
  font-family: "Ferom", sans-serif;
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.78rem;
  padding: 0.4rem 0;
  position: relative;
  transition: color 0.25s ease;
}
.sb-nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--rust-lit);
  transform: scaleX(0); transform-origin: left; transition: transform 0.28s ease;
}
.sb-nav__link:hover, .sb-nav__link.is-current { color: var(--rust-lit); }
.sb-nav__link.is-current::after, .sb-nav__link:hover::after { transform: scaleX(1); }

/* CTA de réservation dans la nav */
.sb-nav__cta {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  text-decoration: none; margin-left: clamp(1.2rem, 2.6vw, 2.2rem);
  padding: 0.5rem 1.1rem; border: 1px solid var(--rust-lit); border-radius: 2px;
  line-height: 1.15;
  transition: background 0.25s ease, color 0.25s ease;
}
.sb-nav__cta-label {
  font-family: "Ferom", sans-serif; text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 0.62rem; color: var(--rust-lit);
  transition: color 0.25s ease;
}
.sb-nav__cta-num {
  font-family: "Bricolage Grotesque", sans-serif; font-size: 0.86rem;
  color: var(--cream); white-space: nowrap; margin-top: 0.12rem;
}
.sb-nav__cta:hover { background: var(--rust-lit); }
.sb-nav__cta:hover .sb-nav__cta-label,
.sb-nav__cta:hover .sb-nav__cta-num { color: var(--ink-2); }
.sb-nav__menu { display: flex; align-items: center; }

/* Bouton menu (mobile) — pastille cerclée, dans la même famille que le CTA
   de réservation. Au-dessus du panneau coulissant (z-index) pour rester
   cliquable une fois le menu ouvert. */
.sb-nav__toggle {
  display: none;
  position: relative; z-index: 70;
  width: 46px; height: 46px;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  border: 1px solid var(--hair); border-radius: 999px;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.sb-nav__toggle:hover { border-color: var(--rust-lit); }
.sb-nav__toggle:focus-visible { outline: 2px solid var(--rust-lit); outline-offset: 3px; }

.sb-nav__bar {
  display: block; width: 18px; height: 1.5px;
  background: var(--cream); border-radius: 2px;
  transition:
    transform 0.4s cubic-bezier(.2, .7, .2, 1),
    width 0.4s cubic-bezier(.2, .7, .2, 1),
    opacity 0.25s ease;
}
/* La barre centrale plus courte : le décalage se lit comme un dessin, pas
   comme trois trous identiques. */
.sb-nav__bar:nth-child(2) { width: 11px; }
.sb-nav__toggle:hover .sb-nav__bar:nth-child(2) { width: 18px; }

/* Sur la home : nav transparente, superposée au hero. Le logo du hero reste
   centré (c'est l'identité de la page d'attente), la nav ne montre donc que
   ses liens, alignés à droite. Le bloc du logo est décalé vers le bas pour
   passer SOUS la barre : les deux se disputaient la même ligne. */
.sb-tpl-home .sb-nav {
  position: absolute; top: 0; left: 0; right: 0;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 0;
}
/* Accueil v2 : nav transparente par-dessus le hero photo, puis fond plein dès
   que la page défile (classe posée en JS).
   `fixed` et non `sticky` : en sticky la barre occupe sa place dans le flux,
   le hero commençait donc en dessous et sa hauteur de 100svh s'ajoutait à
   celle de la barre — d'où le dépassement. */
.sb-tpl-accueil .sb-nav {
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent; border-bottom: 1px solid transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.sb-tpl-accueil .sb-nav.is-stuck {
  background: rgba(18, 13, 11, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom-color: var(--hair);
}

.sb-tpl-home .sb-nav__inner { justify-content: flex-end; }
.sb-tpl-home .sb-nav__brand { display: none; }
.sb-tpl-home .sb-top { padding-top: clamp(6.5rem, 13vh, 9rem); }

/* ==========================================================================
   Coquille de page (Menu, Contact)
   ========================================================================== */
.sb-page { position: relative; }
.sb-page__hero {
  position: relative;
  padding: clamp(4rem, 11vw, 7.5rem) 0 clamp(2.6rem, 6vw, 4rem);
  text-align: center;
  border-bottom: 1px solid var(--hair);
  overflow: hidden;
  background: var(--ink-2);
}
/* Isotypes en filigrane — éléments réels et non image de fond, pour que chacun
   flotte à son propre rythme et dérive à sa propre vitesse au défilement.
   Deux propriétés distinctes se partagent le travail : `translate` porte le
   flottement (CSS) et la dérive (JS, sur le parent), `rotate` l'inclinaison
   fixe. Elles se composent sans jamais s'écraser. */
.sb-isos {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  overflow: hidden;
}
.sb-iso {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--s);
  transform: translate(-50%, -50%); /* centre le motif sur son point d'ancrage */
  opacity: 0.07;
  will-change: translate;
}
.sb-iso img {
  display: block; width: 100%; height: auto;
  rotate: var(--rot, 0deg);
  animation: sb-float var(--dur, 10s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes sb-float {
  0%, 100% { translate: 0 calc(var(--amp, 14px) * -0.5); }
  50%      { translate: 0 calc(var(--amp, 14px) * 0.5); }
}
/* Les plus petits motifs sont un peu plus présents, sinon ils disparaissent. */
.sb-iso:nth-child(4), .sb-iso:nth-child(6), .sb-iso:nth-child(9) { opacity: 0.09; }

@media (max-width: 720px) {
  /* Trop de motifs dans un hero étroit : on ne garde que les latéraux hauts. */
  .sb-iso:nth-child(n + 7) { display: none; }
  .sb-iso { opacity: 0.05; }
}
/* Grain argentique, même texture que le hero d'accueil : donne de la matière
   aux aplats sombres et évite le dégradé « plastique ». */
.sb-page__hero::after {
  content: "";
  position: absolute; inset: -50%;
  pointer-events: none; opacity: 0.045; z-index: 0;
  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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: sb-grain 6s steps(6) infinite;
}
@keyframes sb-grain {
  0%,100% { transform: translate(0, 0); }
  20% { transform: translate(-6%, 4%); }
  40% { transform: translate(4%, -6%); }
  60% { transform: translate(-4%, 6%); }
  80% { transform: translate(6%, -4%); }
}
@media (prefers-reduced-motion: reduce) {
  .sb-page__hero::after { animation: none; }
}
.sb-page__hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.sb-page__title {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.06em; line-height: 0.98;
  font-size: clamp(2.6rem, 9vw, 5.4rem); color: var(--cream); margin: 0;
  overflow: hidden; /* masque du dévoilement */
  padding-left: 0.06em; /* compense le tracking après la dernière lettre */
}
.sb-page__title > span { display: inline-block; }
.sb-page__intro {
  max-width: 46ch; margin: 0 auto; color: var(--cream-dim);
  font-size: clamp(0.95rem, 1.6vw, 1.08rem);
}
.sb-section { padding: clamp(2.6rem, 7vw, 5rem) 0; }

/* ==========================================================================
   Page Menu
   ========================================================================== */
.sb-menu__section { padding: clamp(2.4rem, 6vw, 4.4rem) 0; border-bottom: 1px solid var(--hair); }
.sb-menu__section:last-of-type { border-bottom: 0; }
.sb-menu__grid {
  display: grid; gap: clamp(1.8rem, 5vw, 4rem); align-items: start;
  grid-template-columns: 1.15fr 0.85fr;
}
.sb-menu__section.is-full .sb-menu__grid { grid-template-columns: minmax(0, 860px); justify-content: center; }
/* Sections sans photos (boissons) : grille 2 colonnes en desktop. Les
   intertitres (Blanc, Rouge, Bière…) s'étendent sur toute la largeur, les
   lignes se répartissent dessous, colonne par colonne visuellement équilibrée. */
@media (min-width: 721px) {
  /* Colonnes typographiques plutôt qu'une grille : le contenu se répartit
     tout seul et se rééquilibre, alors qu'une grille à lignes fixes laissait
     un trou dès qu'un nom passait sur deux lignes (le voisin restait vide).
     `column-span: all` sort les intertitres du découpage : chaque groupe se
     répartit donc sur ses deux colonnes, indépendamment des autres. */
  .sb-menu__section.is-full .sb-dishes {
    columns: 2;
    column-gap: clamp(2.4rem, 5vw, 4.5rem);
  }
  .sb-menu__section.is-full .sb-dish {
    padding: 0.55rem 0;
    break-inside: avoid;   /* un plat ne se coupe jamais entre deux colonnes */
  }
  .sb-menu__section.is-full .sb-dishes__group {
    column-span: all;
    break-after: avoid;
  }
}
.sb-menu__section.is-flipped .sb-menu__list { order: 2; }

.sb-menu__head { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); position: relative; }
.sb-menu__head.has-illus { padding-right: clamp(90px, 16vw, 150px); }
/* Illustration en accent du titre, pour les sections pleine largeur */
.sb-menu__head-illus {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: clamp(70px, 13vw, 120px); height: auto;
  opacity: 0.3; pointer-events: none;
}
.sb-menu__note { margin: 0.6rem 0 0; color: var(--cream-dim); font-size: 0.92rem; font-style: italic; }

.sb-dishes { list-style: none; margin: 0; padding: 0; }
/* Un seul trait par plat : la ligne de conduite pointillée entre le nom et le
   prix. Pas de bordure de rang en plus — c'est elle qui doublait le trait. */
.sb-dish { padding: 0.95rem 0; }
.sb-dish__top { display: flex; align-items: baseline; gap: 0.5rem; }
.sb-dish__name {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 400;
  font-size: clamp(1.02rem, 2vw, 1.22rem); color: var(--cream);
  letter-spacing: 0.01em;
}
/* Intertitre de sous-catégorie au sein d'une liste (Blanc / Rouge / Bière…) */
.sb-dishes__group {
  font-family: "Ferom", sans-serif; text-transform: uppercase;
  letter-spacing: 0.26em; font-size: 0.72rem; color: var(--rust-lit);
  padding: 1.6rem 0 0.2rem;
}
.sb-dishes .sb-dishes__group:first-child { padding-top: 0; }
/* Le nom peut se réduire et passer à la ligne, mais jamais au point de faire
   disparaître le trait de conduite : sans ce minimum, un intitulé long
   laissait le prix flotter seul, détaché de sa ligne. */
.sb-dish__name { flex: 0 1 auto; min-width: 0; }
.sb-dish__dots {
  flex: 1 0 2.5rem; min-width: 2.5rem;
  border-bottom: 1px dotted rgba(244, 231, 211, 0.28);
  transform: translateY(-0.2em);
}
.sb-dish__price {
  font-family: "Bricolage Grotesque", sans-serif; color: var(--rust-lit);
  font-size: clamp(1rem, 2vw, 1.18rem); white-space: nowrap;
}
.sb-dish__desc { margin: 0.35rem 0 0; color: var(--cream-dim); font-size: 0.92rem; max-width: 52ch; }

/* Collage éditorial : la grande photo ancre la composition, les suivantes se
   superposent en cascade, détourées par un cadre couleur du fond. La colonne
   est collante : les photos accompagnent la liste pendant le défilement. */
.sb-menu__media {
  position: sticky; top: clamp(84px, 12vh, 120px);
  display: flex; flex-direction: column;
  padding-bottom: 6%;
}
.sb-menu__photo { margin: 0; overflow: hidden; border-radius: 4px; position: relative; z-index: 1; }
.sb-menu__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s cubic-bezier(.2, .7, .2, 1);
}
.sb-menu__photo:hover img { transform: scale(1.045); }
.sb-menu__photo:nth-of-type(1) { width: 84%; align-self: flex-start; }
.sb-menu__photo:nth-of-type(1) img { aspect-ratio: 4 / 5; }
.sb-menu__photo:nth-of-type(2) {
  width: 58%; align-self: flex-end; margin-top: -22%;
  border: 8px solid var(--ink-2); z-index: 2;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.sb-menu__photo:nth-of-type(2) img { aspect-ratio: 1 / 1; }
.sb-menu__photo:nth-of-type(3) {
  width: 46%; align-self: flex-start; margin: -14% 0 0 6%;
  border: 8px solid var(--ink-2); z-index: 3;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
}
.sb-menu__photo:nth-of-type(3) img { aspect-ratio: 4 / 3; }
/* Côté inversé : le collage se réfléchit pour rester tourné vers la liste */
.is-flipped .sb-menu__photo:nth-of-type(1) { align-self: flex-end; }
.is-flipped .sb-menu__photo:nth-of-type(2) { align-self: flex-start; }
.is-flipped .sb-menu__photo:nth-of-type(3) { align-self: flex-end; margin: -14% 6% 0 0; }
/* Illustration gravure en filigrane derrière le haut du collage */
.sb-menu__illus {
  position: absolute; top: -3%; right: -2%;
  width: clamp(110px, 34%, 180px); height: auto;
  opacity: 0.16; z-index: 0; pointer-events: none;
}
.is-flipped .sb-menu__illus { right: auto; left: -2%; }

/* ==========================================================================
   Bandeau de réservation
   ========================================================================== */
.sb-reserve { border-top: 1px solid var(--hair); padding: clamp(2.8rem, 7vw, 4.6rem) 0; text-align: center; }
.sb-reserve__inner { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.sb-reserve__kicker {
  font-family: "Ferom", sans-serif; text-transform: uppercase;
  letter-spacing: 0.28em; font-size: 0.68rem; color: var(--rust-lit);
  margin: 0; padding-left: 0.28em;
}
.sb-reserve__num {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 400;
  font-size: clamp(1.9rem, 5.6vw, 3.4rem); color: var(--cream);
  text-decoration: none; letter-spacing: 0.02em; white-space: nowrap;
  transition: color 0.25s ease;
}
.sb-reserve__num:hover { color: var(--rust-lit); }
.sb-reserve__note { margin: 0.2rem 0 0; color: var(--cream-dim); font-size: 0.82rem; }

/* Téléphone mis en avant sur la page Contact */
.sb-contact__phone {
  display: inline-block; text-decoration: none;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(1.5rem, 3.6vw, 2.1rem); color: var(--cream);
  white-space: nowrap; transition: color 0.25s ease;
}
.sb-contact__phone:hover { color: var(--rust-lit); }
.sb-contact__hint { margin: 0.3rem 0 0.9rem; color: var(--cream-dim); font-size: 0.8rem; }

/* Bloc d'informations légales : trois colonnes lisibles plutôt qu'un pavé */
.sb-menu__infos { border-top: 1px solid var(--hair); padding: clamp(2.2rem, 5vw, 3.4rem) 0; }
.sb-menu__infos-grid {
  display: grid; gap: clamp(1.8rem, 4vw, 3.2rem);
  grid-template-columns: repeat(3, 1fr); align-items: start;
}
.sb-info__title {
  font-family: "Ferom", sans-serif; text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 0.68rem; color: var(--rust-lit);
  margin: 0 0 0.9rem;
}
.sb-info__text { margin: 0; color: var(--cream-dim); font-size: 0.84rem; line-height: 1.65; max-width: 44ch; }

.sb-origins { margin: 0; }
.sb-origins__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.34rem 0; border-bottom: 1px dashed var(--hair);
}
.sb-origins__row:last-child { border-bottom: 0; }
.sb-origins dt { color: var(--cream); font-size: 0.86rem; white-space: nowrap; }
.sb-origins dd { margin: 0; color: var(--cream-dim); font-size: 0.86rem; text-align: right; }

.sb-menu__footnote {
  text-align: center; color: var(--cream-dim); font-size: 0.8rem;
  padding: clamp(1.6rem, 4vw, 2.6rem) 1.5rem; border-top: 1px solid var(--hair);
  margin: 0;
}

@media (max-width: 760px) {
  .sb-menu__infos-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .sb-menu__grid, .sb-menu__section.is-full .sb-menu__grid { grid-template-columns: 1fr; }
  .sb-menu__section.is-flipped .sb-menu__list { order: 0; }
  /* En mobile : bande défilante horizontale, pas de collage ni de sticky */
  .sb-menu__media {
    position: static; order: 2;
    flex-direction: row; gap: 0.8rem; padding-bottom: 0.4rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .sb-menu__photo:nth-of-type(1),
  .sb-menu__photo:nth-of-type(2),
  .sb-menu__photo:nth-of-type(3) {
    width: 72vw; max-width: 340px; flex: 0 0 auto;
    align-self: auto; margin: 0; border: 0; box-shadow: none;
    scroll-snap-align: center;
  }
  .sb-menu__photo:nth-of-type(1) img,
  .sb-menu__photo:nth-of-type(2) img,
  .sb-menu__photo:nth-of-type(3) img { aspect-ratio: 4 / 3; }
  .sb-menu__illus { display: none; }
}

/* ==========================================================================
   Page Contact
   ========================================================================== */
.sb-contact__grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start;
  grid-template-columns: 0.9fr 1.1fr;
}
.sb-contact__block { padding-bottom: clamp(1.4rem, 3vw, 2rem); margin-bottom: clamp(1.4rem, 3vw, 2rem); border-bottom: 1px solid var(--hair); }
.sb-contact__block:last-child { border-bottom: 0; margin-bottom: 0; }
.sb-contact__label {
  font-family: "Ferom", sans-serif; text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 0.72rem; color: var(--rust-lit); margin: 0 0 0.7rem;
}
.sb-contact__value { margin: 0 0 0.4rem; font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--cream); }
.sb-contact__value a { text-decoration: none; }
.sb-contact__value a:hover { color: var(--rust-lit); }
.sb-contact__hours { list-style: none; margin: 0; padding: 0; }
.sb-contact__hours li { display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; padding: 0.35rem 0; border-bottom: 1px dashed var(--hair); font-size: 0.95rem; }
.sb-contact__hours li:last-child { border-bottom: 0; }
.sb-contact__day { color: var(--cream); white-space: nowrap; flex-shrink: 0; }
.sb-contact__hrs { color: var(--cream-dim); text-align: right; }
.sb-contact__social { display: flex; gap: 1.2rem; margin: 0; }
.sb-contact__social a { text-decoration: none; letter-spacing: 0.06em; }
.sb-contact__social a:hover { color: var(--rust-lit); }

.sb-contact__photo { margin: 0; border-radius: 4px; overflow: hidden; }
.sb-contact__photo img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5;
  transition: transform 0.8s cubic-bezier(.2, .7, .2, 1);
}
.sb-contact__photo:hover img { transform: scale(1.045); }
.sb-contact__map { position: relative; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; border: 1px solid var(--hair); background: var(--ink); margin-top: 1.2rem; }
.sb-contact__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.3) contrast(0.95); }
.sb-contact__form { margin-top: 1.6rem; }

/* Boutons */
.sb-btn {
  display: inline-block; margin-top: 0.9rem;
  font-family: "Ferom", sans-serif; text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.72rem; text-decoration: none; cursor: pointer;
  padding: 0.7em 1.4em; border-radius: 2px; transition: background 0.25s ease, color 0.25s ease;
}
.sb-btn--ghost { color: var(--cream); border: 1px solid var(--hair); }
.sb-btn--ghost:hover { background: var(--rust-lit); color: var(--ink-2); border-color: var(--rust-lit); }

@media (max-width: 720px) {
  .sb-contact__grid { grid-template-columns: 1fr; }
  .sb-contact__aside { order: -1; }
}

/* ==========================================================================
   Pied de page brandé
   ========================================================================== */
.sb-sitefoot {
  background: var(--ink);
  border-top: 1px solid var(--hair);
  color: var(--cream-dim);
}
.sb-sitefoot__inner {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: clamp(2.4rem, 6vw, 4rem) clamp(1.2rem, 4vw, 2.4rem);
  display: grid; gap: clamp(1.8rem, 4vw, 3rem);
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
.sb-sitefoot__logo { height: 46px; width: auto; flex: 0 0 auto; margin-bottom: 0.9rem; }
.sb-sitefoot__logo--text { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.4rem; color: var(--cream); text-transform: uppercase; }
.sb-sitefoot__tagline { margin: 0; font-size: 0.9rem; color: var(--cream-dim); }
.sb-sitefoot__title {
  font-family: "Ferom", sans-serif; text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 0.72rem; color: var(--rust-lit); margin: 0 0 1rem;
}
.sb-sitefoot__line { margin: 0 0 0.5rem; font-size: 0.92rem; display: flex; gap: 1rem; justify-content: space-between; align-items: baseline; }
/* Colonne de pied étroite : le jour au-dessus, les horaires dessous — les
   deux ne tiennent pas côte à côte sans casser une plage en deux. */
.sb-sitefoot__line--hours { display: block; margin-bottom: 0.85rem; }
.sb-sitefoot__line--hours .sb-sitefoot__day { display: block; }
.sb-sitefoot__line--hours .sb-sitefoot__hrs { display: block; text-align: left; }

/* Un service ne se coupe jamais ; la césure tombe sur le séparateur central. */
.sb-hours__slot { white-space: nowrap; }
.sb-hours__sep { padding: 0 0.45em; opacity: 0.5; }
.sb-sitefoot__line a { text-decoration: none; }
.sb-sitefoot__line a:hover { color: var(--cream); }
/* Le jour ne se coupe jamais (« Mar – Ven » restait sur deux lignes) ;
   l'horaire absorbe le retour à la ligne, aligné à droite. */
.sb-sitefoot__day { color: var(--cream); white-space: nowrap; flex-shrink: 0; }
.sb-sitefoot__hrs { text-align: right; }
.sb-sitefoot__social { display: flex; gap: 1.2rem; margin: 0; }
.sb-sitefoot__social a { text-decoration: none; letter-spacing: 0.06em; }
.sb-sitefoot__social a:hover { color: var(--rust-lit); }
.sb-sitefoot__bar {
  border-top: 1px solid var(--hair);
  padding: 1.1rem clamp(1.2rem, 4vw, 2.4rem);
  display: flex; align-items: center; justify-content: center; gap: 0.85rem;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em;
}
.sb-sitefoot__rule { width: 1px; height: 1em; background: var(--hair); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .sb-sitefoot__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  /* `backdrop-filter` crée un bloc conteneur pour les descendants en
     `position: fixed` : le panneau du menu se retrouvait confiné à la hauteur
     de la barre, son fond tronqué et ses liens débordant sur le vide. On y
     renonce donc en mobile — un fond opaque suffit, et le flou y coûte cher. */
  .sb-nav,
  .sb-tpl-accueil .sb-nav,
  .sb-tpl-accueil .sb-nav.is-stuck {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .sb-nav { background: var(--ink-2); }
  .sb-tpl-accueil .sb-nav { background: transparent; }
  .sb-tpl-accueil .sb-nav.is-stuck { background: var(--ink-2); }
  /* Menu ouvert : la barre reprend un fond, sinon le logo flotte sur la page. */
  .sb-tpl-accueil .sb-nav.is-open { background: var(--ink-2); }

  .sb-nav__toggle { display: flex; }

  /* Voile sur le reste de la page : sans lui, la bande de contenu laissée
     visible à gauche du panneau reste lisible et parasite le menu. */
  .sb-nav::before {
    content: ""; position: fixed; inset: 0; z-index: 55;
    background: rgba(18, 13, 11, 0.72);
    opacity: 0; pointer-events: none;
    transition: opacity 0.32s ease;
  }
  .sb-nav.is-open::before { opacity: 1; pointer-events: auto; }

  .sb-nav__menu {
    position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px);
    background: var(--ink); border-left: 1px solid var(--hair);
    transform: translateX(100%); transition: transform 0.32s cubic-bezier(.2,.7,.2,1);
    padding: 5rem 2rem 2rem; z-index: 60;
    overflow-y: auto; overscroll-behavior: contain;
  }
  .sb-nav.is-open .sb-nav__menu { transform: translateX(0); }
  .sb-nav__menu { flex-direction: column; align-items: flex-start; }
  .sb-nav__list { flex-direction: column; align-items: flex-start; gap: 1.6rem; }
  .sb-nav__link { font-size: 1rem; }
  /* Dans le panneau mobile, le CTA passe sous les liens, pleine largeur */
  .sb-nav__cta { margin: 2rem 0 0; width: 100%; align-items: center; padding: 0.85rem 1rem; }
  .sb-nav__cta-num { font-size: 1rem; }
  /* En mobile le panneau sort de la droite : la nav n'occupe plus la ligne du
     logo, qui peut donc remonter. */
  .sb-tpl-home .sb-top { padding-top: clamp(4rem, 9vh, 5.5rem); }
  /* 7.5px = hauteur d'une barre (1.5) + l'écart (6) : les deux traits se
     rejoignent exactement au centre pour former la croix. */
  .sb-nav.is-open .sb-nav__toggle { border-color: var(--rust-lit); }
  .sb-nav.is-open .sb-nav__bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .sb-nav.is-open .sb-nav__bar:nth-child(2) { opacity: 0; width: 0; }
  .sb-nav.is-open .sb-nav__bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}
@media (max-width: 520px) {
  .sb-sitefoot__inner { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-nav__link::after, .sb-nav__menu, .sb-nav__bar { transition: none; }
}