@font-face { font-family: "Boska"; src: url("polices/boska-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Boska"; src: url("polices/boska-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bespoke Serif"; src: url("polices/bespoke-serif-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("polices/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("polices/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("polices/switzer-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --creme: #F4EBDC;
  --creme-fonce: #EADDC6;
  --moutarde: #D9A13B;
  --rouge: #8C2A20;
  --rouge-fonce: #6E1F18;
  --tomate: #B5452F;
  --encre: #2B1A14;
  --encre-douce: #5A4438;
  --titre: "Boska", Georgia, serif;
  --accroche: "Bespoke Serif", Georgia, serif;
  --texte: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --marge: clamp(20px, 5vw, 72px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--creme); color: var(--encre); font: 400 17px/1.55 var(--texte); }
a { color: inherit; }

.demo {
  display: flex; justify-content: center; align-items: center; gap: 8px 20px; flex-wrap: wrap;
  padding: 8px var(--marge); background: var(--encre); color: var(--creme); font: 400 13px/1.35 var(--texte); text-align: center;
}
.demo p { margin: 0; }
.demo a { color: var(--moutarde); text-decoration: none; font-weight: 500; white-space: nowrap; }
.demo a:hover { text-decoration: underline; }
section[id] { scroll-margin-top: 70px; }

.tete {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 24px; padding: 14px var(--marge);
  background: color-mix(in srgb, var(--creme) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.marque { font: 700 28px/1 var(--titre); color: var(--rouge); text-decoration: none; display: flex; flex-direction: column; }
.marque small { font: 500 10px/1 var(--texte); letter-spacing: .18em; text-transform: uppercase; color: var(--encre-douce); margin-top: 5px; }
.menu { display: flex; gap: 28px; margin-left: auto; }
.menu a { font: 500 13px/1 var(--texte); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; padding: 8px 0; border-bottom: 1.5px solid transparent; }
.menu a[aria-current], .menu a:hover { border-color: var(--tomate); }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px;
  border-radius: 999px; font: 600 14px/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  transition: transform .25s ease, background-color .25s ease;
}
.bouton:hover { transform: translateY(-2px); }
.bouton-plein { background: var(--tomate); color: var(--creme); }
.bouton-plein:hover { background: var(--rouge); }
.bouton-trait { border: 1.5px solid var(--rouge); color: var(--rouge); }
.bouton.petit { min-height: 42px; padding: 0 20px; font-size: 13px; }

.histoire { position: relative; }
.film { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.film canvas { position: sticky; top: 0; display: block; width: 100%; height: 100vh; height: 100svh; }

.s-accueil { min-height: calc(100svh - 70px); padding: clamp(28px, 6vh, 80px) var(--marge) 80px; display: flex; align-items: center; }
.accueil-texte { position: relative; max-width: 1200px; }
h1 {
  margin: 0; font: 900 clamp(58px, 9.6vw, 156px)/.86 var(--titre); color: var(--moutarde);
  text-transform: uppercase; letter-spacing: -.01em;
}
.accroche { margin: 28px 0 0; font: 500 clamp(24px, 2.6vw, 38px)/1.12 var(--accroche); color: var(--rouge); }
.boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.s-spirale {
  position: relative; min-height: 160svh; padding: 22svh var(--marge) 18svh; background: var(--rouge); color: var(--creme);
  overflow: hidden;
}
.chapitre { margin: 0; font: 500 clamp(18px, 1.8vw, 26px)/1 var(--accroche); letter-spacing: .02em; }
.mot-geant { margin: 2svh 0 0 -.04em; font: 700 clamp(120px, 24vw, 380px)/.82 var(--titre); color: var(--creme); letter-spacing: -.02em; }
.texte-court { max-width: 34ch; margin: 40px 0 0; font-size: 18px; }
.s-spirale .texte-court { color: color-mix(in srgb, var(--creme) 86%, transparent); position: absolute; left: var(--marge); bottom: 14svh; }

.s-assiette { min-height: 100vh; min-height: 100svh; padding: 90px var(--marge) 40px; display: flex; align-items: center; }
.assiette-texte { max-width: min(600px, 42vw); }
.s-assiette .chapitre { color: var(--rouge); }
.titre-rouge { margin: 12px 0 0; font: 900 clamp(60px, 9vw, 140px)/.88 var(--titre); color: var(--rouge); text-transform: uppercase; white-space: nowrap; }
.prix { margin: 16px 0 28px; font: 700 34px/1 var(--titre); color: var(--tomate); }

.titre-section { margin: 12px 0 0; font: 900 clamp(48px, 6.4vw, 104px)/.9 var(--titre); color: var(--rouge); text-transform: uppercase; letter-spacing: -.01em; }
.lien { color: var(--rouge); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.lien:hover { color: var(--tomate); }

.s-carte { padding: clamp(90px, 14vh, 160px) var(--marge) clamp(80px, 12vh, 140px); }
.carte-tete { display: grid; grid-template-columns: 1fr minmax(0, 420px); align-items: end; gap: 24px 64px; max-width: 1320px; margin: 0 auto; }
.carte-tete .chapitre { grid-column: 1 / -1; color: var(--rouge); }
.carte-tete .titre-section { margin: 0; }
.carte-tete .texte-court { margin: 0; color: var(--encre-douce); }
.plats { list-style: none; margin: clamp(48px, 8vh, 88px) auto 0; padding: 0; max-width: 1320px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 28px; align-items: start; }
.plat:nth-child(even) { margin-top: 72px; }

.plat img { display: block; width: 100%; height: auto; aspect-ratio: 800 / 993; }
.plat-type { margin: 6px 0 0; font: 600 12px/1 var(--texte); letter-spacing: .16em; text-transform: uppercase; color: var(--tomate); }
.plat h3 { margin: 10px 0 0; font: 700 clamp(24px, 2vw, 30px)/1.05 var(--titre); color: var(--encre); }
.plat-texte { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--encre-douce); }
.plat-prix { margin: 12px 0 0; font: 700 24px/1 var(--titre); color: var(--tomate); }

.menu-court { max-width: 1320px; margin: clamp(80px, 12vh, 130px) auto 0; padding-top: 40px; border-top: 1.5px solid color-mix(in srgb, var(--rouge) 30%, transparent); }
.menu-titre { margin: 0; font: 500 clamp(24px, 2.4vw, 34px)/1.1 var(--accroche); color: var(--rouge); }
.menu-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 36px; margin-top: 36px; }
.menu-col h3 { margin: 0 0 18px; font: 600 13px/1 var(--texte); letter-spacing: .18em; text-transform: uppercase; color: var(--tomate); }
.menu-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.menu-col li { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: 8px; }
.menu-col .nom { font: 700 19px/1.2 var(--titre); color: var(--encre); }
.menu-col .pointilles { border-bottom: 1.5px dotted color-mix(in srgb, var(--encre) 30%, transparent); transform: translateY(-4px); min-width: 12px; }
.menu-col .prix-court { font: 700 17px/1 var(--titre); color: var(--tomate); white-space: nowrap; }
.menu-col .desc { grid-column: 1 / -1; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--encre-douce); }
.menu-note { margin: 40px 0 0; font-size: 14px; color: var(--encre-douce); }

.s-reserver {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 48px clamp(40px, 7vw, 120px); align-items: center;
  padding: clamp(90px, 14vh, 150px) var(--marge); background: var(--rouge); color: var(--creme);
}
.s-reserver .chapitre { color: #E8BC66; }
.s-reserver .titre-section { color: var(--creme); }
.s-reserver .texte-court { max-width: 40ch; color: color-mix(in srgb, var(--creme) 88%, transparent); }
.reserver-note { margin: 24px 0 0; font-size: 15px; color: color-mix(in srgb, var(--creme) 75%, transparent); }
.reserver-module { min-width: 0; }
.reserver-autre { margin: 18px 0 0; font-size: 15px; color: color-mix(in srgb, var(--creme) 85%, transparent); }
.reserver-autre a, .s-reserver noscript a { color: var(--creme); font-weight: 600; }

.s-infos { padding: clamp(90px, 14vh, 150px) var(--marge); background: var(--creme-fonce); }
.s-infos > * { max-width: 1320px; margin-left: auto; margin-right: auto; }
.s-infos .chapitre { color: var(--rouge); }
.infos-cols { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 48px; margin-top: clamp(40px, 7vh, 72px); }
.infos-cols h3 { margin: 0 0 16px; font: 600 13px/1 var(--texte); letter-spacing: .18em; text-transform: uppercase; color: var(--rouge); }
.infos-cols p { margin: 0 0 14px; }
.infos-cols > div > p:first-of-type { font: 700 24px/1.25 var(--titre); color: var(--encre); }
.infos-cols > div > p:first-of-type .tel { font: 600 22px/1.25 var(--texte); color: var(--encre); text-decoration: none; letter-spacing: .01em; }
.heures { list-style: none; margin: 0; padding: 0; }
.heures li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--encre) 14%, transparent); font-size: 16px; }
.heures li span:first-child { font-weight: 600; }
.heures li span:last-child { text-align: right; color: var(--encre-douce); }

.pied { padding: clamp(60px, 10vh, 100px) var(--marge) 32px; background: var(--encre); color: color-mix(in srgb, var(--creme) 82%, transparent); overflow: hidden; }
.pied a { color: inherit; text-decoration: none; }
.pied a:hover { color: var(--moutarde); }
.pied-nom { margin: 0 0 clamp(40px, 7vh, 72px); font: 900 clamp(64px, 15.5vw, 250px)/.8 var(--titre); color: var(--tomate); letter-spacing: -.02em; white-space: nowrap; }
.pied-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.pied-cols p, .pied-cols ul { margin: 0 0 8px; }
.pied-cols ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.pied-titre { font: 600 12px/1 var(--texte) !important; letter-spacing: .18em; text-transform: uppercase; color: var(--moutarde); margin-bottom: 16px !important; }
.pied-legal { display: flex; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; margin-top: 56px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--creme) 16%, transparent); font-size: 13px; }
.pied-legal p { margin: 0; }
.pied-legal a { text-decoration: underline; text-underline-offset: 3px; }

.demo-bulle {
  position: fixed; left: 50%; bottom: 24px; z-index: 30; width: min(92vw, 460px); margin: 0; padding: 14px 18px; border-radius: 14px;
  background: var(--encre); color: var(--creme); font-size: 14px; line-height: 1.45; box-shadow: 0 12px 30px rgb(43 26 20 / .25);
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .3s ease, transform .3s ease;
}
.demo-bulle.est-la { opacity: 1; transform: translate(-50%, 0); }
.barre { display: none; }

@media (max-width: 1100px) {
  .plats { grid-template-columns: repeat(2, 1fr); gap: 48px 28px; }
  .menu-cols { grid-template-columns: repeat(2, 1fr); }
  .s-reserver { grid-template-columns: 1fr; }
  .infos-cols { grid-template-columns: 1fr 1fr; }
  .infos-cols > div:nth-child(2) { grid-row: span 2; }
}

@media (max-width: 760px) {
  .menu { display: none; }
  .tete .bouton { margin-left: auto; }
  .tete { padding: 10px 16px; }
  .marque { font-size: 24px; }
  .s-accueil { align-items: flex-start; min-height: calc(100svh - 64px); padding: 30px 16px 0; }
  h1 { font-size: clamp(52px, 15vw, 72px); }
  .accroche { margin-top: 16px; font-size: 22px; }
  .boutons { margin-top: 20px; }
  .bouton { min-height: 46px; padding: 0 20px; font-size: 13px; }
  .s-spirale { padding: 16svh 16px 14svh; min-height: 140svh; }

  .s-spirale .texte-court { left: 16px; right: 16px; bottom: 8svh; font-size: 16px; z-index: 6; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--rouge-fonce) 94%, transparent); }

  .s-assiette { align-items: flex-start; padding: 60svh 16px 40px; }
  .assiette-texte { max-width: none; }
  .s-assiette .titre-rouge { font-size: 60px; }
  .s-assiette .texte-court { margin-top: 14px; font-size: 16px; }
  .s-assiette .prix { margin: 12px 0 16px; font-size: 28px; }
  .demo { padding: 7px 16px; font-size: 12px; }
  .demo p span { display: none; }
  .titre-section { font-size: clamp(42px, 12vw, 56px); }
  .carte-tete { grid-template-columns: 1fr; }

  .plats { display: flex; gap: 16px; margin: 40px -16px 0; padding: 0 16px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
  .plats::-webkit-scrollbar { display: none; }
  .plat { flex: 0 0 76%; scroll-snap-align: start; }
  .plat:nth-child(even) { margin-top: 0; }
  .menu-cols { grid-template-columns: 1fr; gap: 36px; }
  .s-carte, .s-reserver, .s-infos { padding: 72px 16px; }
  .infos-cols { grid-template-columns: 1fr; gap: 36px; }
  .infos-cols > div:nth-child(2) { grid-row: auto; }
  .heures li { font-size: 15px; }
  .pied { padding: 56px 16px 96px; }
  .pied-cols { grid-template-columns: 1fr 1fr; }
  .pied-cols > div:first-child { grid-column: 1 / -1; }
  .pied-legal { flex-direction: column; }

  .barre {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--creme) 94%, transparent);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 -6px 20px rgb(43 26 20 / .1);
    transform: translateY(110%); visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s;
  }

  .barre.est-la { transform: none; visibility: visible; transition: transform .3s ease, visibility 0s; }
  .barre .bouton { flex: 1; min-height: 46px; padding: 0 12px; }
  .demo-bulle { bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) { .bouton, .barre, .demo-bulle { transition: none; } }

.legal { max-width: 760px; margin: 0 auto; padding: 64px var(--marge) 96px; }
.legal .chapitre { color: var(--rouge); }
.legal dl { margin: 40px 0; display: grid; gap: 20px; }
.legal dt { font: 600 12px/1 var(--texte); letter-spacing: .16em; text-transform: uppercase; color: var(--tomate); }
.legal dd { margin: 6px 0 0; }
.legal h2 { margin: 56px 0 8px; font: 700 34px/1.1 var(--titre); color: var(--rouge); }
.legal h3 { margin: 28px 0 6px; font: 600 17px/1.3 var(--texte); }
.legal p { margin: 0 0 14px; }
.legal .bouton { margin-top: 24px; }
.pied-legal:first-child { margin-top: 0; }