@charset "UTF-8";

/* =========================================================================
   TACO NAAN — DAX
   =========================================================================

   Noir mat et jaune agressif. Ce n'est pas un choix arbitraire : c'est la
   palette des panneaux affichés au comptoir (menu/*.png). Les couleurs
   ci-dessous ont été relevées directement sur ces photos, pour que le site
   et la boutique se ressemblent.

   Trois règles tenues partout :

   1. UN SEUL accent, le jaune. Le vert n'existe que sur le point « ouvert »,
      parce que c'est un signal, pas une décoration.
   2. Le jaune ne sert jamais de fond à du texte long. Sur du noir il attire
      l'œil ; en aplat il fatigue. Il marque : boutons, prix, survols.
   3. Aucune dépendance externe hors les polices. Rien à mettre à jour.
   ========================================================================= */

/* ------------------------------------------------------------------ jetons */

:root {
  /* Les noirs — jamais #000, il écrase et bave sur les écrans OLED */
  --void:       #0a0c0c;
  --coal:       #111615;
  --slate:      #181e1d;

  /* Relevé sur les panneaux : le brun chaud du bandeau central */
  --amber:      #b4621a;

  /* L'accent */
  --yellow:     #ffc61a;
  --yellow-hot: #ffd95c;
  --yellow-dim: rgba(255, 198, 26, .16);

  --cream:      #f6f2e8;
  --mute:       #9ba39f;
  --faint:      #6d7570;

  --line:       rgba(246, 242, 232, .11);
  --line-warm:  rgba(255, 198, 26, .30);

  /* Fonctionnel uniquement */
  --open:       #5cc26a;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans:  "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --gutter: clamp(1.15rem, 4.5vw, 4.5rem);
  --ease:   cubic-bezier(.22, .61, .36, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--void);
  color: var(--cream);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip et non hidden : hidden forcerait overflow-y à auto, ce qui fait du
     body un conteneur de défilement et rend position:sticky capricieux. */
  overflow-x: clip;
}

/* Un grain très fin sur toute la page. Sur fond sombre, c'est ce qui empêche
   les grands aplats de noir de paraître plats et « numériques ». */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--yellow); color: var(--void); }

:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

.skip {
  position: absolute;
  left: -9999px;
  z-index: 200;
  background: var(--yellow);
  color: var(--void);
  padding: .8rem 1.3rem;
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 600;
}
.skip:focus { left: .75rem; top: .75rem; }

/* ------------------------------------------------------------- typographie */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.018em;
  margin: 0;
}

h1 { font-size: clamp(2.6rem, 1.5rem + 4.2vw, 5rem); }
h2 { font-size: clamp(2rem, 1.25rem + 2.7vw, 3.5rem); }
h3 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem); }

em { font-style: italic; color: var(--yellow); }

p { margin: 0 0 1.05em; }
a { color: inherit; }

/* Le libellé de section : numéro jaune, filet, titre. C'est le motif qui
   donne son rythme à toute la page. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 1.5rem;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--faint);
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.eyebrow b { font-weight: 600; color: var(--yellow); }

.wrap {
  width: min(80rem, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section-pad { padding-block: clamp(3.5rem, 8vw, 7.5rem); }

/* ------------------------------------------------------------------ boutons */

.btn {
  --bg: var(--yellow);
  --fg: var(--void);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 1rem 1.6rem;
  border: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform .25s var(--spring), box-shadow .25s var(--ease),
              background .25s var(--ease);
}
.btn:hover {
  transform: translateY(-3px) scale(1.025);
  box-shadow: 0 12px 34px rgba(255, 198, 26, .3);
}
.btn:active { transform: translateY(0) scale(.99); }

/* Un éclat balaie le bouton au survol. Discret, mais c'est ce qui fait qu'un
   bouton paraît « cher » plutôt que simplement fonctionnel. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%,
              rgba(255, 255, 255, .5) 48%, transparent 58%);
  transform: translateX(-130%);
  transition: transform .7s var(--ease);
}
.btn:hover::after { transform: translateX(130%); }

.btn--ghost {
  --bg: transparent;
  --fg: var(--cream);
  border: 1.5px solid var(--line);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  --fg: var(--yellow);
  border-color: var(--line-warm);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}
.btn--ghost::after { display: none; }

/* ------------------------------------------------------------ statut ouvert */

.status {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .05em;
  color: var(--mute);
}
.status__dot {
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--faint);
  flex: none;
}
.status--open   .status__dot { background: var(--open); animation: pulse 2.4s ease-in-out infinite; }
.status--closed .status__dot { background: var(--amber); }
.status b { color: var(--cream); font-weight: 600; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(92, 194, 106, .5); }
  70%      { box-shadow: 0 0 0 .45rem rgba(92, 194, 106, 0); }
}

/* --------------------------------------------------------------- barre haut */

.topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 3vw, 2.5rem);
  padding: .6rem var(--gutter);
  /* Verre dépoli : presque transparent en haut de page, il se densifie dès
     que du contenu passe dessous. */
  background: rgba(10, 12, 12, .34);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.topbar[data-stuck="true"] {
  background: rgba(10, 12, 12, .82);
  border-bottom-color: var(--line);
}

.topbar__mark { flex: none; line-height: 0; }
.topbar__mark img {
  width: clamp(3.9rem, 8vw, 5.4rem);
  transition: transform .4s var(--spring);
}
.topbar__mark:hover img { transform: rotate(-4deg) scale(1.06); }

.topbar__nav {
  display: flex;
  gap: clamp(.9rem, 2.2vw, 2rem);
  margin-inline-start: auto;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.topbar__nav a {
  position: relative;
  color: var(--mute);
  text-decoration: none;
  padding-block: .3rem;
  transition: color .25s var(--ease);
}
/* Le filet jaune se déroule depuis la gauche. */
.topbar__nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.topbar__nav a:hover { color: var(--cream); }
.topbar__nav a:hover::after { transform: scaleX(1); }

@media (max-width: 56rem) { .topbar__nav { display: none; } }

.topbar__end {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-inline-start: auto;
}
@media (min-width: 56.0625rem) { .topbar__end { margin-inline-start: 0; } }

.topbar .btn { padding: .65rem 1.05rem; font-size: .72rem; }
@media (max-width: 26rem) { .topbar .btn { display: none; } }

.lang { display: flex; gap: .12rem; }
.lang button {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .08em;
  background: none;
  border: 0;
  padding: .32rem .45rem;
  color: var(--faint);
  cursor: pointer;
  transition: color .2s, background .2s;
}
.lang button:hover { color: var(--cream); }
.lang button[aria-pressed="true"] { background: var(--yellow); color: var(--void); }

/* --------------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: min(92svh, 56rem);
  display: flex;
  align-items: center;
  padding-block: clamp(2.5rem, 7vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}

/* La vidéo de préparation, en fond. Volontairement assombrie et un peu
   désaturée : elle installe l'ambiance sans disputer la lisibilité au texte. */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.85) contrast(1.05);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(10,12,12,.96) 0%, rgba(10,12,12,.88) 42%, rgba(10,12,12,.52) 100%),
    linear-gradient(to top, var(--void) 2%, transparent 38%);
}

.hero__grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); width: 100%; }
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
}

.hero__stamp {
  width: clamp(7.5rem, 15vw, 11rem);
  margin-bottom: clamp(1rem, 2.2vw, 1.6rem);
  animation: stampIn 1s var(--spring) both;
}

.hero__kicker {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0 0 1rem;
}

.hero h1 { margin-bottom: 1.3rem; }
.hero h1 em { display: block; margin-inline-start: clamp(0rem, 3vw, 2.5rem); }

.hero__lede {
  font-size: clamp(1.02rem, .98rem + .35vw, 1.22rem);
  color: var(--mute);
  max-width: 40ch;
  margin-bottom: 1.8rem;
}
/* Le seul endroit où le jaune souligne du texte courant. */
.hero__lede strong {
  color: var(--cream);
  font-weight: 500;
  box-shadow: inset 0 -.42em 0 var(--yellow-dim);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.3rem;
  margin-bottom: 2rem;
}

.facts { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 0; }
.facts li {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
  border: 1px solid var(--line);
  padding: .33rem .62rem;
  transition: border-color .25s, color .25s, translate .25s var(--ease);
}
.facts li:hover { border-color: var(--line-warm); color: var(--cream); translate: 0 -2px; }
.facts li[data-strong] { border-color: var(--line-warm); color: var(--yellow); }

/* La découpe du plat flotte doucement. C'est, avec le bandeau, le seul
   mouvement permanent de la page : au-delà, ça deviendrait agité. */
.hero__aside { position: relative; }
.hero__cutout {
  margin: 0;
  filter: drop-shadow(-12px 22px 34px rgba(0, 0, 0, .75));
  animation: float 7s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-2.5deg); }
  50%      { transform: translateY(-16px) rotate(-1.2deg); }
}
@keyframes stampIn {
  from { opacity: 0; transform: scale(1.3) rotate(-8deg); filter: blur(10px); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cutout, .hero__stamp { animation: none; }
}

/* La note Google : une pastille de verre flottante, cliquable, qui se
   redresse au survol. Elle chevauche l'image pour densifier le coin. */
.score {
  position: absolute;
  right: 0;
  bottom: clamp(-1.5rem, -2.5vw, -2.5rem);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0 1rem;
  padding: 1.1rem 1.5rem 1.1rem 1.25rem;
  background: rgba(17, 22, 21, .8);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--line-warm);
  /* Le liseré jaune sur la tranche : c'est lui qui accroche l'œil de loin. */
  border-left: 4px solid var(--yellow);
  text-decoration: none;
  rotate: 2deg;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .7), 0 0 0 0 rgba(255, 198, 26, 0);
  transition: rotate .4s var(--spring), translate .4s var(--spring),
              box-shadow .4s var(--ease), border-color .3s;
}
.score:hover {
  rotate: 0deg;
  translate: 0 -7px;
  border-color: var(--yellow);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .7), 0 0 34px rgba(255, 198, 26, .28);
}

/* L ordre du HTML est etoiles / note / mention : on place explicitement,
   sinon la grille range les trois elements dans le mauvais sens. */
.score__num {
  grid-column: 1;
  grid-row: 1 / 3;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 3.4rem;
  line-height: .9;
  color: var(--yellow);
}
.score__stars {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-family: var(--mono);
  font-size: .95rem;
  letter-spacing: .2em;
  line-height: 1;
  color: var(--yellow);
}
.score__meta {
  grid-column: 2;
  grid-row: 2;
  display: block;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream);
  margin-top: .3rem;
}

@media (max-width: 62rem) {
  .score { position: static; width: max-content; margin: -1.25rem 0 0 auto; }
}

/* --------------------------------------------------------------- le bandeau */

.band {
  background: var(--yellow);
  color: var(--void);
  padding: .8rem 0;
  overflow: hidden;
}
/* Deux pistes identiques bout à bout, translatées de -50 % : la boucle est
   parfaitement continue, sans saut au raccord. */
.band__track {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.band:hover .band__track { animation-play-state: paused; }
.band__track span {
  display: flex;
  align-items: center;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  padding-inline: 1.5rem;
  white-space: nowrap;
}
.band__track span::after {
  content: "";
  width: .38rem; height: .38rem;
  margin-inline-start: 3rem;
  background: var(--void);
  rotate: 45deg;
  flex: none;
}
@keyframes marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) { .band__track { animation: none; } }

/* ---------------------------------------------------------------- la carte */

.carte { background: var(--void); }

.carte__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.carte__head p {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--faint);
  max-width: 36ch;
  margin: 0;
}

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.chips button {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: transparent;
  color: var(--mute);
  border: 1px solid var(--line);
  padding: .5rem .85rem;
  cursor: pointer;
  transition: color .22s, border-color .22s, background .22s, translate .22s var(--ease);
}
.chips button:hover { border-color: var(--line-warm); color: var(--cream); translate: 0 -2px; }
.chips button[aria-pressed="true"] {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--void);
}

.tier-note {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--faint);
  margin: 0 0 2.2rem;
}

.carte__grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
@media (min-width: 54rem) { .carte__grid { grid-template-columns: repeat(2, 1fr); } }

/* Une catégorie = une carte. Au survol elle se soulève et s'éclaire d'un
   liseré jaune : le geste est tactile, pas décoratif. */
.ticket {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.3rem, 2.6vw, 1.9rem);
  background: linear-gradient(165deg, var(--coal), var(--slate));
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .4s var(--spring), border-color .3s var(--ease),
              box-shadow .4s var(--ease);
}
.ticket[hidden] { display: none; }
.ticket:hover {
  transform: translateY(-6px) scale(1.012);
  border-color: var(--line-warm);
  box-shadow: 0 24px 55px rgba(0, 0, 0, .55);
}
/* Un halo jaune très doux s'allume dans le coin de la vignette. */
.ticket::before {
  content: "";
  position: absolute;
  top: -40%; right: -25%;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 198, 26, .13), transparent 68%);
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.ticket:hover::before { opacity: 1; }

.ticket__top {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.ticket__num {
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 600;
  color: var(--yellow);
  padding-top: .4rem;
  flex: none;
}
.ticket__title { flex: 1; min-width: 0; }
.ticket__title h3 { margin-bottom: .2rem; }
.ticket__title p { margin: 0; font-size: .85rem; color: var(--mute); }

.ticket__thumb { flex: none; width: clamp(4.5rem, 10vw, 7rem); align-self: center; }
.ticket__thumb img {
  transition: transform .45s var(--spring);
  /* Une canette est deux fois plus haute que large : sans plafond, elle
     etire la vignette et toute la fiche avec elle. */
  max-height: 8rem;
  width: auto;
  margin-inline: auto;
}
.ticket__thumb[data-kind="cutout"] img { filter: drop-shadow(-5px 9px 12px rgba(0, 0, 0, .7)); }
.ticket:hover .ticket__thumb[data-kind="cutout"] img { transform: scale(1.09) rotate(-3deg); }
.ticket__thumb[data-kind="photo"] img {
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--line);
}
.ticket:hover .ticket__thumb[data-kind="photo"] img { transform: scale(1.06); }

.ticket__list { list-style: none; padding: 0; margin: 0 0 auto; }

/* Les trois colonnes de prix : Seul / + Frite / + Menu. Même gabarit pour
   l'en-tête et pour chaque ligne, sinon rien n'est aligné. */
/* En flex et non en grille : une ligne peut compter deux ou trois elements
   selon qu'elle porte une note (« 1 viande »). Une grille a deux colonnes
   renverrait le prix a la ligne des qu'une note apparait. */
.ticket__row,
.ticket__head {
  display: flex;
  align-items: start;
  gap: .5rem;
  padding: .46rem 0;
}
/* Les prix sont toujours plaques a droite, quel que soit le nombre
   d'elements a leur gauche. */
.ticket__cells { margin-inline-start: auto; align-self: baseline; }
.ticket__row + .ticket__row { border-top: 1px solid rgba(246, 242, 232, .055); }

.ticket__head {
  padding-top: 0;
  padding-bottom: .5rem;
  margin-bottom: .2rem;
  border-bottom: 1px solid var(--line);
}
.ticket__head .ticket__cell {
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}

.ticket__cells {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(3.4rem, auto);
  gap: .5rem;
  text-align: right;
}
.ticket__cell {
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
}
/* La colonne « Seul » est celle qu'on regarde d'abord : elle passe en jaune. */
.ticket__cells .ticket__cell:first-child { color: var(--yellow); font-weight: 600; }
.ticket__head .ticket__cell:first-child { color: var(--faint); font-weight: 500; }
.ticket__cell i { color: var(--faint); font-style: normal; }

/* Nom + composition : un bloc qui peut retrecir et passer a la ligne, pour
   ne jamais pousser les prix hors de la carte. */
.ticket__label {
  display: grid;
  gap: .12rem;
  min-width: 0;
  flex: 0 1 auto;
}
.ticket__name { font-size: .93rem; }
.ticket__note {
  font-family: var(--mono);
  font-size: .63rem;
  line-height: 1.4;
  color: var(--faint);
  text-wrap: pretty;
}

.ticket__lead {
  flex: 1;
  align-self: baseline;
  border-bottom: 1px dotted rgba(246, 242, 232, .22);
  transform: translateY(-.25rem);
  min-width: 1.5rem;
}
.ticket__price {
  align-self: baseline;
  font-family: var(--mono);
  font-size: .88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--yellow);
}
.ticket__price--free {
  color: var(--open);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Sur un telephone, les trois colonnes de prix prenaient plus de la moitie
   de la carte et la composition se cassait sur quatre lignes. On resserre
   les colonnes sans descendre sous une taille lisible. */
@media (max-width: 30rem) {
  .ticket__cells { grid-auto-columns: minmax(2.9rem, auto); gap: .3rem; }
  .ticket__cell { font-size: .76rem; }
  .ticket__head .ticket__cell { font-size: .62rem; letter-spacing: .06em; }
}

.ticket__foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.2rem;
  padding-top: .85rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.ticket__foot b { color: var(--yellow); font-weight: 600; }

/* Les choix de fin de carte : pains, viandes, sauces, suppléments. */
.extras {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 46rem) { .extras { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .extras { grid-template-columns: repeat(4, 1fr); } }

.extras h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem;
  font-size: 1.1rem;
  margin-bottom: .85rem;
}
.extras__tag {
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--void);
  background: var(--yellow);
  padding: .16rem .45rem;
}
.extras__tag i { font-style: normal; font-weight: 400; opacity: .72; }

.extras ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .28rem .45rem; }
.extras li { font-family: var(--mono); font-size: .71rem; color: var(--mute); }
.extras li:not(:last-child)::after { content: " ·"; color: var(--yellow); }

/* Le pain et les viandes ont une photo par choix : ces deux groupes
   passent de la liste en ligne à une grille de vignettes. Les sauces et
   les suppléments, qui n'ont pas de photo, ne bougent pas. */
.extras ul[data-pics] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem .5rem;
}
@media (min-width: 30rem) { .extras ul[data-pics] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 46rem) { .extras ul[data-pics] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.extras ul[data-pics] li:not(:last-child)::after { content: none; }

.extras__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .34rem;
  text-align: center;
}
/* Une hauteur fixe pour la vignette : une merguez large et un cordon bleu
   haut restent alignés sur la même ligne de base. */
.extras__pic {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 3.1rem;
  width: 100%;
}
.extras__pic img {
  /* Hauteur en dur, pas en pourcentage : l element <picture> qui enveloppe
     l image n a pas de hauteur propre, un 100% ne s appuierait sur rien et
     les grosses vignettes deborderaient sur leur legende. */
  max-height: 3.1rem;
  max-width: 100%;
  width: auto;
  height: auto;
  filter: drop-shadow(-3px 5px 7px rgba(0, 0, 0, .6));
  transition: transform .45s var(--spring);
}
.extras__item:hover .extras__pic img { transform: scale(1.08) rotate(-2deg); }
.extras__name { font-size: .66rem; line-height: 1.25; }

.price-note[hidden] { display: none; }
.price-note {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.8rem;
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--faint);
}
.price-note::before { content: ""; width: .35rem; height: .35rem; background: var(--yellow); flex: none; }

/* ------------------------------------------------------------- les panneaux */

.boards-section { background: var(--coal); }

.boards { display: grid; gap: clamp(.9rem, 2vw, 1.4rem); margin-top: 2.2rem; }
@media (min-width: 60rem) { .boards { grid-template-columns: repeat(2, 1fr); } }

.board {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--void);
  cursor: zoom-in;
  overflow: hidden;
  transition: transform .4s var(--spring), border-color .3s, box-shadow .4s var(--ease);
}
.board:hover {
  transform: translateY(-5px);
  border-color: var(--line-warm);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .6);
}
.board img { width: 100%; transition: transform .6s var(--ease); }
.board:hover img { transform: scale(1.03); }

.board__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem .95rem;
  background: linear-gradient(to top, rgba(10, 12, 12, .94), transparent);
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream);
}
.board__label i {
  font-style: normal;
  font-weight: 500;
  color: var(--void);
  background: var(--yellow);
  padding: .18rem .5rem;
  opacity: 0;
  translate: 0 4px;
  transition: opacity .3s, translate .3s var(--ease);
}
.board:hover .board__label i { opacity: 1; translate: 0 0; }

/* ----------------------------------------------------------------- maison */

.maison { background: var(--void); }
.maison__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 58rem) { .maison__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); } }

.maison__text h2 { margin-bottom: 1.4rem; }
.maison__text p { color: var(--mute); max-width: 56ch; }

.proofs { display: grid; gap: 1.1rem; margin-top: 2.2rem; padding: 0; list-style: none; }
.proofs li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.proofs span { font-family: var(--mono); font-size: .68rem; font-weight: 600; color: var(--yellow); padding-top: .35rem; }
.proofs b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.28rem;
  line-height: 1.15;
  margin-bottom: .15rem;
}
.proofs p { margin: 0; font-size: .89rem; color: var(--mute); }

.shot {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
  rotate: 1.5deg;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
  transition: rotate .5s var(--spring), box-shadow .5s var(--ease);
}
.shot:hover { rotate: 0deg; box-shadow: 0 36px 80px rgba(255, 198, 26, .14); }
.shot img, .shot__video { width: 100%; display: block; }
.shot figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .8rem 1rem;
  background: linear-gradient(to top, rgba(10, 12, 12, .94), transparent);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ------------------------------------------------------------------- avis */

.avis { background: var(--coal); }

.avis__head {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: end;
  margin-bottom: clamp(2.2rem, 4vw, 3.5rem);
}
@media (min-width: 54rem) { .avis__head { grid-template-columns: minmax(0, 1fr) auto; } }

.gauge__title {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 .9rem;
}
.gauge { display: grid; gap: .45rem; min-width: min(22rem, 100%); }
.gauge__row {
  display: grid;
  grid-template-columns: 5.2rem minmax(4rem, 1fr) 2.2rem;
  align-items: center;
  gap: .8rem;
  font-family: var(--mono);
  font-size: .71rem;
  color: var(--mute);
}
.gauge__bar { display: block; height: .34rem; background: rgba(246, 242, 232, .1); overflow: hidden; }
.gauge__fill { display: block; height: 100%; width: 0; background: var(--amber); transition: width 1.1s var(--ease); }
.gauge__row[data-top] { color: var(--cream); }
.gauge__row[data-top] .gauge__fill { background: var(--yellow); }

.avis__grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 46rem) { .avis__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 74rem) { .avis__grid { grid-template-columns: repeat(4, 1fr); } }

/* Chaque avis est une carte de verre qui se redresse et s'éclaire au survol. */
.note {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1.5rem 1.35rem 1.25rem;
  background: rgba(24, 30, 29, .6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  transition: rotate .4s var(--spring), translate .4s var(--spring),
              border-color .3s, box-shadow .4s var(--ease);
}
.note:nth-child(4n+1) { rotate: -.9deg; }
.note:nth-child(4n+2) { rotate: .7deg;  }
.note:nth-child(4n+3) { rotate: -.5deg; }
.note:nth-child(4n+4) { rotate: 1.1deg; }
.note:hover {
  rotate: 0deg;
  translate: 0 -7px;
  border-color: var(--line-warm);
  box-shadow: 0 26px 55px rgba(0, 0, 0, .55);
}

.note__stars { font-family: var(--mono); font-size: .8rem; letter-spacing: .16em; color: var(--yellow); margin-bottom: .7rem; }
.note__text {
  margin: 0 0 1.1rem;
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.34;
  color: var(--cream);
}
/* Les guillemets font partie du dessin, pas du texte : ils restent en CSS
   pour que le contenu se copie proprement. */
.note__text::before { content: "« "; color: var(--yellow); }
.note__text::after  { content: " »"; color: var(--yellow); }

.note__by {
  margin-top: auto;
  padding-top: .85rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .66rem;
  color: var(--faint);
}
.note__by b { display: block; color: var(--cream); font-size: .74rem; }

.note__reply {
  margin-top: .9rem;
  padding: .8rem .95rem;
  background: rgba(10, 12, 12, .6);
  font-size: .83rem;
  line-height: 1.45;
  color: var(--mute);
}
.note__reply b {
  display: block;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: .3rem;
}

.avis__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-top: clamp(2.2rem, 4vw, 3rem);
}
.avis__cta p { margin: 0; max-width: 34ch; font-family: var(--mono); font-size: .7rem; color: var(--faint); }

/* ------------------------------------------------------------------ venir */

.venir { background: var(--void); }
.venir__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 58rem) { .venir__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }

.infos { display: grid; gap: 1.3rem; align-content: start; margin: 2.2rem 0 0; }
.info-row { display: grid; gap: .25rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.info-row dt {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}
.info-row dd { margin: 0; font-size: 1.02rem; }
.info-row dd a { text-underline-offset: 3px; text-decoration-color: var(--yellow); }

.info-row--phone dd {
  font-family: var(--mono);
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
  font-weight: 600;
}
.info-row--phone dd a { color: var(--yellow); text-decoration: none; }
.info-row--phone dd a:hover { text-decoration: underline; text-underline-offset: 5px; }

.hours { display: block; font-family: var(--mono); font-size: .9rem; }
.hours span { display: block; }
.info-row dd .status { margin-top: .6rem; }

/* Horaires qui diffèrent d'un jour à l'autre : un groupe par série de jours. */
.hours__group { margin-top: .75rem; }
.hours__group:first-child { margin-top: 0; }
.hours__group b { display: block; font-weight: 500; color: var(--cream); }

/* ------------------------------------------- fermeture exceptionnelle */

.notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: .65rem var(--gutter);
  background: var(--yellow);
  color: var(--void);
  font-family: var(--mono);
  font-size: .78rem;
  line-height: 1.45;
  letter-spacing: .03em;
}
.notice[hidden] { display: none; }
.notice p { margin: 0; text-align: center; }
.notice b { font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.notice__close {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  margin: -.7rem -.9rem -.7rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.notice__close:focus-visible { outline-color: var(--void); }

/* ------------------------------------------------------------- les offres */

.offres[hidden] { display: none; }
.offres__title { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.offres__grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

/* Une offre = une carte, comme la carte du menu, mais coiffée d'un filet
   jaune plein : c'est la seule chose de la page qui crie un peu. */
.deal {
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, var(--coal), var(--slate));
  border: 1px solid var(--line-warm);
  border-top: 3px solid var(--yellow);
  overflow: hidden;
}
/* Sans photo, la carte prend la hauteur de son texte au lieu de s'étirer
   jusqu'à celle de sa voisine. */
.deal--plain { align-self: start; }
.deal__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--void); }
.deal__media picture,
.deal__media img { display: block; width: 100%; height: 100%; }
.deal__media img { object-fit: cover; transition: transform .6s var(--ease); }
.deal:hover .deal__media img { transform: scale(1.04); }
.deal__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .55rem;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
}
.deal__until {
  margin: 0;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--yellow);
}
.deal h3 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem); }
.deal__text { margin: 0; color: var(--mute); }
.deal__price {
  margin: auto 0 0;
  padding-top: .6rem;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem);
  line-height: 1;
  color: var(--yellow);
}

.venir__route { margin-top: 1.6rem; }

/* La carte Google ne se charge qu'au clic : la page reste rapide et aucun
   traceur ne démarre avant que le visiteur ne le demande. */
.mapbox {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  background: var(--coal);
  overflow: hidden;
}
@media (min-width: 58rem) { .mapbox { aspect-ratio: 3 / 2.3; } }
/* Le plan de Google est blanc : on l'inverse pour qu'il tienne dans la page. */
.mapbox iframe {
  width: 100%; height: 100%;
  border: 0;
  display: block;
  filter: invert(.92) hue-rotate(180deg) saturate(.75);
}

.mapbox__facade {
  position: absolute;
  inset: 0;
  width: 100%;
  display: grid;
  place-content: center;
  gap: .7rem;
  padding: 1.5rem;
  border: 0;
  text-align: center;
  cursor: pointer;
  background:
    repeating-linear-gradient(45deg, transparent 0 16px, rgba(246, 242, 232, .022) 16px 32px),
    var(--coal);
  font-family: var(--mono);
  color: var(--mute);
  transition: background-color .25s;
}
.mapbox__facade:hover { background-color: var(--slate); }
.mapbox__facade b { font-family: var(--serif); font-weight: 400; font-size: 1.55rem; color: var(--cream); }
.mapbox__facade span { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); }
.mapbox__facade small { font-size: .64rem; color: var(--faint); max-width: 30ch; line-height: 1.5; }

/* ---------------------------------------------------------------- affiches */

.gallery__title { margin-top: clamp(3rem, 6vw, 5rem); }

/* Quatre colonnes fixes plutot qu auto-fit : avec quatre affiches, auto-fit en
   laisse une orpheline sur la derniere ligne des que la fenetre bouge un peu. */
.affiches { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.6rem, 1.4vw, 1rem); }
@media (min-width: 60rem) { .affiches { grid-template-columns: repeat(4, 1fr); } }

.affiche {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--void);
  cursor: zoom-in;
  line-height: 0;
  overflow: hidden;
  transition: transform .4s var(--spring), border-color .3s, box-shadow .4s var(--ease);
}
.affiche:hover {
  transform: translateY(-5px);
  border-color: var(--line-warm);
  box-shadow: 0 24px 55px rgba(0, 0, 0, .6);
}

/* L affiche est composee en 4:5 : on la montre telle quelle. Pas de recadrage
   carre ici - couper une affiche, c est couper son titre. */
.affiche img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.affiche:hover img { transform: scale(1.04); }

/* L'affiche porte deja son titre et son prix, composes dedans. On n'ajoute
   qu'une pastille d'agrandissement, et seulement au survol. */
.affiche__zoom {
  position: absolute;
  right: .55rem;
  bottom: .55rem;
  font-family: var(--mono);
  font-size: .6rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--void);
  background: var(--yellow);
  padding: .2rem .5rem;
  opacity: 0;
  translate: 0 4px;
  transition: opacity .3s, translate .3s var(--ease);
}
.affiche:hover .affiche__zoom { opacity: 1; translate: 0 0; }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; overflow: visible; }
.lightbox::backdrop { background: rgba(4, 6, 6, .95); backdrop-filter: blur(4px); }
.lightbox img {
  max-width: min(94vw, 72rem);
  max-height: 86vh;
  width: auto;
  border: 1px solid var(--line-warm);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .8);
}
.lightbox__close {
  position: absolute;
  top: -2.8rem; right: 0;
  background: var(--yellow);
  border: 0;
  color: var(--void);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .5rem .9rem;
  cursor: pointer;
}

/* -------------------------------------------------------------- pied de page */

.footer {
  background: var(--coal);
  border-top: 1px solid var(--line);
  color: var(--mute);
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(5.5rem, 8vw, 4rem);
  font-family: var(--mono);
  font-size: .76rem;
}
.footer__grid { display: grid; gap: 2.2rem; align-items: start; }
@media (min-width: 46rem) { .footer__grid { grid-template-columns: auto 1fr auto; gap: 3rem; } }
.footer img { width: 8.5rem; opacity: .9; }
.footer p { margin: 0 0 .35rem; }
.footer b { color: var(--cream); font-weight: 600; }
.footer a { color: var(--cream); text-underline-offset: 3px; }
.footer a:hover { color: var(--yellow); }
.footer__phone { margin-top: .3rem; font-size: 1.1rem; font-weight: 600; }
.footer__phone a { color: var(--yellow); text-decoration: none; }
.footer__phone a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__made { margin-top: .9rem; }
.footer__links { margin-top: 1rem; display: flex; gap: 1.2rem; }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
  font-size: .66rem;
  color: var(--faint);
}

/* --------------------------------------------------- barre d'appel mobile */

.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 85;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
  background: rgba(10, 12, 12, .88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line-warm);
  translate: 0 110%;
  transition: translate .38s var(--ease);
}
.callbar[data-show="true"] { translate: 0 0; }
@media (min-width: 48rem) { .callbar { display: none; } }
.callbar .status { font-size: .66rem; }
.callbar .btn { padding: .75rem 1.1rem; font-size: .74rem; }
.callbar .btn:hover { transform: none; box-shadow: none; }

/* ------------------------------------------------------------- apparitions */

/* translate et non transform : les cartes portent déjà une rotation, et les
   deux se disputeraient la même propriété — la rotation serait perdue. */
[data-reveal] {
  opacity: 0;
  translate: 0 26px;
  transition: opacity .75s var(--ease), translate .75s var(--ease);
}
[data-reveal].is-in { opacity: 1; translate: 0 0; }

/* Les éléments d'une même grille arrivent en cascade, pas d'un bloc. */
.carte__grid .ticket:nth-child(2n) { transition-delay: .07s; }
.avis__grid .note:nth-child(2n)    { transition-delay: .06s; }
.avis__grid .note:nth-child(3n)    { transition-delay: .12s; }
.boards .board:nth-child(2n)       { transition-delay: .07s; }
.extras .extras__group:nth-child(2n) { transition-delay: .06s; }
.extras .extras__group:nth-child(3n) { transition-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; translate: none; }
}

/* ------------------------------------------------------------- impression */

@media print {
  .topbar, .callbar, .band, .mapbox, .affiches, .avis__cta, .hero__video { display: none; }
  body { background: #fff; color: #000; }
  body::after { display: none; }
  .ticket { break-inside: avoid; border: 1px solid #ccc; background: none; }
  .ticket__cell, .ticket__price, .ticket__num { color: #000; }
}