/* ============================================
   LE P911 — feuille de style principale
   ============================================ */

:root{
  --ink:        #0a0a0b;
  --ink-soft:   #131315;
  --paper:      #f2efe9;
  --paper-dim:  #a8a49c;
  --rule:       rgba(242,239,233,0.14);
  --rouge:      #c8102e;

  --display: 'Bodoni Moda', Georgia, serif;
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;

  --maxw: 1180px;
  --gutter: clamp(22px, 6vw, 88px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background: var(--rouge); color: var(--paper); }
:focus-visible{ outline: 1px solid var(--paper); outline-offset: 4px; }

.wrap{ max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gutter); }

.label{
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.sec-title{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(38px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.sec-title em{ font-style: italic; }

.link-underline{
  display:inline-block;
  font-size:12px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase;
  padding-bottom:6px; border-bottom:1px solid var(--paper-dim);
  transition: border-color .25s ease, color .25s ease;
}
.link-underline:hover{ border-color: var(--rouge); color: var(--paper); }


/* ── BANDEAU MESSAGE (piloté par le Google Sheets) ── */
.bandeau{
  position: relative; z-index: 70;
  background: var(--rouge);
  color: var(--paper);
  text-align:center;
}
.bandeau p{
  padding: 11px 0;
  font-size: 13.5px; font-weight:500;
  letter-spacing: 0.04em;
}
body:has(.bandeau:not([hidden])) header{ top: auto; }

/* ── HEADER ───────────────────────────── */
header{
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  padding: 26px 0;
  transition: padding .4s ease, background .4s ease;
}
header.pinned{
  padding: 14px 0;
  background: rgba(10,10,11,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.head{ display:flex; align-items:center; justify-content:space-between; gap:32px; }

.mark{
  font-family: var(--display);
  font-size: 21px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

nav.main{ display:flex; gap:34px; }
nav.main a{
  font-size: 12px; font-weight:500;
  letter-spacing: 0.14em; text-transform:uppercase;
  color: var(--paper-dim);
  transition: color .25s ease;
}
nav.main a:hover, nav.main a.current{ color: var(--paper); }

.tel{
  font-size:12px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
  padding-bottom:3px; border-bottom: 1px solid var(--rule);
  transition: border-color .25s ease;
  white-space: nowrap;
}
.tel:hover{ border-color: var(--paper); }

/* burger */
.burger{
  display:none;
  width:34px; height:22px;
  background:none; border:none; cursor:pointer;
  position:relative;
}
.burger span{
  position:absolute; left:0; right:0; height:1px;
  background: var(--paper);
  transition: transform .35s ease, opacity .25s ease;
}
.burger span:nth-child(1){ top:3px; }
.burger span:nth-child(2){ top:11px; }
.burger span:nth-child(3){ top:19px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:55;
  background: var(--ink);
  display:flex; flex-direction:column; justify-content:center;
  padding: var(--gutter);
  opacity:0; visibility:hidden;
  transition: opacity .4s ease, visibility .4s ease;
}
.drawer.open{ opacity:1; visibility:visible; }
.drawer a{
  font-family: var(--display);
  font-size: clamp(32px, 9vw, 52px);
  line-height:1.5;
  color: var(--paper);
}
.drawer a em{ font-style:italic; color: var(--rouge); }
.drawer .drawer-foot{
  margin-top: 40px; padding-top:24px; border-top:1px solid var(--rule);
  font-size:14px; color: var(--paper-dim);
}

/* ── HERO ─────────────────────────────── */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; align-items:flex-end;
  padding-bottom: clamp(48px, 9vh, 96px);
  padding-top: 140px;
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0;
  z-index:0;
}
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  filter: saturate(0.85) contrast(1.05);
}
.hero-media::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(10,10,11,0.96) 0%, rgba(10,10,11,0.72) 40%, rgba(10,10,11,0.45) 100%);
}
.hero-inner{ position:relative; z-index:2; width:100%; }
.hero-place{ margin-bottom: 26px; }

.hero h1{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(70px, 16vw, 220px);
  line-height: 0.82;
  letter-spacing: -0.015em;
}
.hero h1 em{ font-style: italic; color: var(--rouge); }

.hero-foot{
  margin-top: clamp(36px, 6vh, 68px);
  display:grid; grid-template-columns: 1fr auto;
  gap: 40px; align-items: end;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.hero-line{
  font-family: var(--display);
  font-style: italic; font-weight: 400;
  font-size: clamp(19px, 2.2vw, 26px);
  line-height: 1.45; max-width: 34ch;
}
.hero-meta{ text-align:right; }
.hero-meta p{ font-size:13px; color: var(--paper-dim); letter-spacing:0.04em; }
.hero-meta p + p{ margin-top: 3px; }

/* hero interne (pages secondaires) */
.page-hero{
  padding: clamp(160px, 22vh, 240px) 0 clamp(56px, 9vh, 100px);
  border-bottom: 1px solid var(--rule);
}
.page-hero h1{
  font-family: var(--display);
  font-weight:400;
  font-size: clamp(46px, 9vw, 108px);
  line-height:0.95; letter-spacing:-0.015em;
  margin-top: 18px;
}
.page-hero h1 em{ font-style:italic; }
.page-hero .lede{
  margin-top: 26px;
  font-family: var(--display); font-style:italic;
  font-size: clamp(18px, 2.1vw, 24px);
  color: var(--paper-dim);
  max-width: 40ch;
}

/* ── SECTIONS ─────────────────────────── */
section{ padding: clamp(90px, 14vh, 175px) 0; }
.sec-head{ margin-bottom: clamp(44px, 7vh, 80px); }
.bordered{ border-top: 1px solid var(--rule); }

/* ── HISTOIRE ─────────────────────────── */
.hist-grid{
  display:grid; grid-template-columns: 1fr 1.15fr;
  gap: clamp(40px, 8vw, 110px); align-items: start;
}
.body-text p{
  font-size: 16.5px;
  color: rgba(242,239,233,0.78);
  max-width: 58ch;
}
.body-text p + p{ margin-top: 22px; }
.sign{
  margin-top: 34px;
  font-family: var(--display); font-style: italic;
  font-size: 20px; color: var(--paper);
}

.figure{ margin-top: clamp(56px, 9vh, 100px); }
.figure img{ width:100%; height:auto; }
.figure figcaption{
  margin-top: 14px; font-size:12px; letter-spacing:0.12em;
  text-transform:uppercase; color: var(--paper-dim);
}

/* ── CARTE ────────────────────────────── */
.dishes{ border-top: 1px solid var(--rule); }
.dish{
  display:grid;
  grid-template-columns: 130px 1fr auto;
  gap: clamp(18px, 3.5vw, 52px);
  align-items: baseline;
  padding: clamp(24px, 3.6vh, 36px) 0;
  border-bottom: 1px solid var(--rule);
  transition: background .3s ease;
}
.dish:hover{ background: var(--ink-soft); }
.dish-cat{
  font-size: 11px; font-weight:500;
  letter-spacing: 0.18em; text-transform:uppercase;
  color: var(--paper-dim);
}
.dish-name{
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.2;
}
.dish-desc{
  margin-top: 8px; font-size: 14.5px;
  color: var(--paper-dim); max-width: 48ch;
}
.dish-price{
  font-family: var(--display);
  font-size: clamp(18px, 2vw, 24px);
  white-space: nowrap;
}

/* carte complète : groupes */
.menu-group{ margin-bottom: clamp(64px, 10vh, 110px); }
.menu-group:last-child{ margin-bottom:0; }
.menu-group > h2{
  font-family: var(--display);
  font-weight:400;
  font-size: clamp(28px, 4vw, 46px);
  margin-bottom: 8px;
}
.menu-group > h2 em{ font-style:italic; }
.menu-group > .group-note{
  font-size:13px; color: var(--paper-dim); letter-spacing:0.04em;
  margin-bottom: 32px;
}

/* liste boissons compacte */
.drinks{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(32px, 6vw, 80px); }
.drink-block{ margin-bottom: 44px; }
.drink-block h3{
  font-family: var(--display); font-size: 22px; font-weight:400;
  padding-bottom: 12px; margin-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.drink-row{
  display:flex; justify-content:space-between; align-items:baseline;
  gap: 16px; padding: 7px 0;
  font-size: 14.5px;
}
.drink-row .n{ color: rgba(242,239,233,0.85); }
.drink-row .n small{
  display:block; font-size:12.5px; color: var(--paper-dim); margin-top:1px;
}
.drink-row .p{ color: var(--paper-dim); white-space:nowrap; font-variant-numeric: tabular-nums; }

/* ── IMAGES ───────────────────────────── */
.img-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 22px);
}
.shot{ overflow:hidden; background: var(--ink-soft); }
.shot img{
  width:100%; height:100%; object-fit:cover;
  aspect-ratio: 4/5;
  transition: transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.shot:hover img{ transform: scale(1.04); }
.shot.wide{ grid-column: span 2; }
.shot.wide img{ aspect-ratio: 8/5; }

/* ── BANDE CITATION ───────────────────── */
.quote-band{
  border-top: 1px solid var(--rule);
  text-align:center;
}
.quote-band blockquote{
  font-family: var(--display); font-style:italic; font-weight:400;
  font-size: clamp(24px, 4vw, 46px);
  line-height:1.3; max-width: 20ch; margin-inline:auto;
}
.quote-band cite{
  display:block; margin-top: 28px;
  font-style:normal; font-size:11px; letter-spacing:0.2em;
  text-transform:uppercase; color: var(--paper-dim);
}

/* ── RESERVER ─────────────────────────── */
.reserver{ border-top: 1px solid var(--rule); text-align:center; }
.reserver .sec-title{ max-width: 16ch; margin-inline:auto; }
.reserver-num{
  display:inline-block; margin-top: 40px;
  font-family: var(--display);
  font-size: clamp(30px, 5.5vw, 58px);
  letter-spacing: 0.02em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  transition: border-color .3s ease;
}
.reserver-num:hover{ border-color: var(--rouge); }
.reserver-note{ margin-top: 26px; font-size:13px; color: var(--paper-dim); letter-spacing:0.04em; }

/* ── CONTACT ──────────────────────────── */
.contact-grid{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 90px);
}
.info-block{ margin-bottom: 44px; }
.info-block:last-child{ margin-bottom:0; }
.info-block h2{
  font-size:11px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase;
  color: var(--paper-dim); margin-bottom: 14px;
}
.info-block p, .info-block a{
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 28px);
  line-height:1.4;
}
.info-block a{ border-bottom:1px solid var(--rule); transition: border-color .25s ease; }
.info-block a:hover{ border-color: var(--rouge); }
.info-block .small{ font-family: var(--sans); font-size:14.5px; color: var(--paper-dim); margin-top:8px; }

.map-embed{
  width:100%; aspect-ratio: 4/3; border:1px solid var(--rule);
  filter: grayscale(1) invert(0.92) contrast(0.86);
}

/* ── FOOTER ───────────────────────────── */
footer{ border-top: 1px solid var(--rule); padding: clamp(56px,8vh,90px) 0 34px; }
.foot-grid{
  display:grid; grid-template-columns: 1.5fr 1fr 1fr;
  gap: 44px; padding-bottom: 56px;
}
.foot-mark{ font-family: var(--display); font-size: 30px; letter-spacing:0.04em; }
.foot-tag{
  margin-top: 14px;
  font-family: var(--display); font-style:italic;
  font-size: 17px; color: var(--paper-dim); max-width: 30ch;
}
.foot-col h3{
  font-size:11px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase;
  color: var(--paper-dim); margin-bottom:16px;
}
.foot-col p, .foot-col a{ font-size:14.5px; display:block; color: rgba(242,239,233,0.8); }
.foot-col a:hover{ color: var(--paper); }
.foot-col p + p, .foot-col a + a, .foot-col p + a{ margin-top:6px; }

.foot-base{
  border-top:1px solid var(--rule); padding-top: 24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color: rgba(242,239,233,0.35);
}

/* ── MOTION ───────────────────────────── */
.rise{
  opacity:0; transform: translateY(18px);
  transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1);
}
.rise.on{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .rise{ opacity:1; transform:none; transition:none; }
  .shot img{ transition:none; }
}

/* ── RESPONSIVE ───────────────────────── */
@media (max-width: 940px){
  nav.main{ display:none; }
  .burger{ display:block; }
  .tel{ display:none; }
  .hero-foot{ grid-template-columns: 1fr; gap:24px; }
  .hero-meta{ text-align:left; }
  .hist-grid{ grid-template-columns: 1fr; gap:32px; }
  .contact-grid{ grid-template-columns: 1fr; }
  .drinks{ grid-template-columns: 1fr; }
  .dish{ grid-template-columns: 1fr auto; gap: 18px; }
  .dish-cat{ grid-column: 1 / -1; margin-bottom: -12px; }
  .img-grid{ grid-template-columns: 1fr 1fr; }
  .shot.wide{ grid-column: span 2; }
  .foot-grid{ grid-template-columns: 1fr; gap:34px; }
}
@media (max-width: 540px){
  .mark{ font-size: 18px; }
  .img-grid{ grid-template-columns: 1fr; }
  .shot.wide{ grid-column: auto; }
  .shot img, .shot.wide img{ aspect-ratio: 4/3; }
}