/* Restaurant L'Euro — feuille de style
   Couleurs et typo reprises de la carte imprimée : orange #FF7700, crème, noir, rouge du logo. */

@font-face { font-family: "Barlow Condensed"; src: url(fonts/barlow-condensed-latin-900-italic.woff2) format("woff2"); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(fonts/barlow-condensed-latin-900-normal.woff2) format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(fonts/barlow-condensed-latin-800-italic.woff2) format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fonts/barlow-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fonts/barlow-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fonts/barlow-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --orange: #ff7700;
  --orange-fonce: #e86c00;
  --creme: #fbf6eb;
  --papier: #fffaf0;
  --carte: #f6ebd8;
  --encre: #111111;
  --encre-douce: #4a3f35;
  --rouge: #ef1423;
  --vert: #1d8a4c;
  --nuit: #16120f;
  --nuit-2: #26201b;
  --nuit-texte: #e8dccb;
  --f-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-texte: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gouttiere: 16px;
  --max: 1120px;
  --r: 10px;
  --barre-h: 64px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font: 400 1.0625rem/1.5 var(--f-texte);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, table, address { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; border-radius: 4px; }
.matchs :focus-visible, .pied :focus-visible, .barre :focus-visible { outline-color: var(--orange); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-evitement { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--encre); color: #fff; padding: 10px 14px; border-radius: 8px; text-decoration: none; }
.lien-evitement:focus { top: 8px; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gouttiere); }
@media (min-width: 768px) { :root { --gouttiere: 32px; } }

/* ---------- Éléments de marque ---------- */

/* Étiquette noire inclinée avec ombre décalée, comme sur la carte papier */
.tag {
  display: inline-block;
  font: italic 800 1.65rem/1 var(--f-display);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: #fff;
  background: var(--encre);
  padding: .3em .55em .26em;
  border-radius: 8px;
  transform: rotate(-2.5deg);
  box-shadow: 4px 4px 0 var(--orange);
}
.tag--sur-orange { box-shadow: 4px 4px 0 var(--papier); }

.prix {
  display: inline-block;
  background: var(--orange);
  color: var(--encre);
  font: 700 1.2rem/1 var(--f-display);
  font-variant-numeric: tabular-nums;
  padding: .22em .45em .2em;
  border-radius: 6px;
  white-space: nowrap;
}

.titre {
  font: italic 900 clamp(2.4rem, 8.5vw, 4rem)/.95 var(--f-display);
  text-transform: uppercase;
  letter-spacing: -.005em;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 22px;
  border-radius: 10px;
  font: 700 1.3rem/1 var(--f-display);
  text-decoration: none;
  border: 2px solid var(--encre);
  transition: transform .12s ease, background-color .12s ease;
}
.btn svg { width: 22px; height: 22px; flex: none; }
.btn:active { transform: translateY(1px); }
.btn--encre { background: var(--encre); color: #fff; }
.btn--encre:hover { background: #000; }
.btn--papier { background: var(--papier); color: var(--encre); }
.btn--papier:hover { background: #fff; }
.btn--petit { min-height: 46px; font-size: 1.15rem; padding: 10px 16px; }

.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico--plein { fill: currentColor; stroke: none; }

/* ---------- Bandeau horaires ---------- */

.bandeau { background: var(--encre); color: var(--papier); }
.bandeau__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 18px;
  padding-block: 9px;
  font: 600 1.05rem/1.2 var(--f-display);
}
.bandeau .ico { width: 18px; height: 18px; color: var(--orange); }
.bandeau__plage { white-space: nowrap; }
.bandeau__plage b { font-weight: 700; color: var(--orange); }

/* ---------- Logos d'applis (Instagram, TikTok, Uber Eats, Deliveroo) ---------- */

.logo-app { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.app {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px;
  padding: 8px 16px 8px 9px;
  border-radius: 12px;
  background: var(--papier);
  color: var(--encre);
  font: 700 1.15rem/1 var(--f-display);
  text-decoration: none;
  transition: transform .12s ease;
}
.app:hover { background: #fff; }
.app:active { transform: translateY(1px); }
.app--encadre { border: 2px solid var(--encre); }

/* ---------- Haut de page ---------- */

.hero { background: var(--orange); overflow: hidden; }
.topnav { display: none; }
.hero__grid { display: grid; gap: 24px; padding-top: 24px; padding-bottom: 32px; text-align: center; justify-items: center; }
.hero__logo { width: min(58vw, 250px); filter: drop-shadow(0 5px 0 rgba(17, 17, 17, .14)); }
.hero__reseaux { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.hero__reseaux p { width: 100%; font: 700 1.15rem/1 var(--f-display); margin-bottom: 2px; }
/* « Nouveau propriétaire » / « Nouvelle carte », comme sur la carte imprimée */
.accroche { display: flex; align-items: center; justify-content: center; gap: 10px 16px; margin-top: 2px; }
.accroche__proprio, .accroche__carte { display: block; transform: rotate(-5deg); text-transform: uppercase; }
.accroche__proprio {
  font: 900 clamp(1.4rem, 6.2vw, 1.75rem)/.86 var(--f-display);
  letter-spacing: .005em;
  color: var(--encre);
  text-align: center;
}
.accroche__carte {
  font: italic 900 clamp(1.7rem, 7.6vw, 2.15rem)/1 var(--f-display);
  letter-spacing: .01em;
  white-space: nowrap;
  color: #fff;
  -webkit-text-stroke: 3px var(--encre);
  paint-order: stroke fill;
  text-shadow: 1px 1px 0 var(--encre), 2px 2px 0 var(--encre), 3px 3px 0 var(--encre), 4px 4px 0 var(--encre), 5px 5px 0 var(--encre);
  padding-bottom: 4px;
}
.hero__titre {
  font: italic 900 clamp(2rem, 8.6vw, 4rem)/.94 var(--f-display);
  text-transform: uppercase;
  letter-spacing: -.01em;
  max-width: 17ch;
  text-wrap: balance;
  margin-top: 6px;
}
.hero__sub { font-size: 1.15rem; font-weight: 500; max-width: 34ch; }
.hero__cta { display: grid; gap: 12px; width: 100%; max-width: 420px; }
.hero__visuel img { width: min(100%, 640px); margin-inline: auto; }
.hero__texte { display: grid; gap: 18px; justify-items: center; }

/* Bandeau « en direct » façon incrustation TV */
.direct {
  display: inline-flex; align-items: stretch;
  text-decoration: none;
  border-radius: 6px; overflow: hidden;
  box-shadow: 4px 4px 0 var(--encre);
  transform: rotate(-1.5deg);
}
.direct__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--rouge); color: #fff;
  font: italic 800 1.05rem/1 var(--f-display); text-transform: uppercase;
  padding: 9px 12px;
}
.direct__badge i { width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.direct__texte {
  display: inline-flex; align-items: center;
  background:
    linear-gradient(90deg, rgba(7, 11, 26, .35), rgba(7, 11, 26, 0) 75%),
    url(img/stade-bandeau.webp) 6% 46% / 135% auto no-repeat,
    #0b1433;
  color: #fff;
  font: 700 1.15rem/1 var(--f-display);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
  padding: 9px 14px;
  box-shadow: inset 0 -2px 0 rgba(120, 140, 255, .7);
}
.direct:hover .direct__texte { filter: brightness(1.15); }
@media (prefers-reduced-motion: no-preference) {
  .direct__badge i, .bug--direct .bug__heure i { animation: pulse 1.6s ease-in-out infinite; }
}
@keyframes pulse { 50% { opacity: .25; } }

@media (min-width: 960px) {
  .topnav { display: flex; justify-content: flex-end; align-items: center; gap: 28px; padding-top: 20px; }
  .topnav a { font: 700 1.2rem/1 var(--f-display); text-decoration: none; }
  .topnav a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
  .topnav__tel { background: var(--encre); color: #fff; padding: 10px 16px; border-radius: 8px; }
  .topnav a.topnav__tel:hover { text-decoration: none; background: #000; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; text-align: left; justify-items: start; padding-top: 8px; padding-bottom: 56px; gap: 40px; }
  .hero__texte { justify-items: start; gap: 16px; }
  .hero__logo { width: 230px; }
  .hero__titre { font-size: clamp(2.6rem, 3.7vw, 3.6rem); }
  .accroche { justify-content: flex-start; }
  .hero__reseaux { justify-content: flex-start; }
  .hero__reseaux p { width: auto; margin: 0 6px 0 0; }
  .hero__cta { grid-template-columns: auto auto; width: auto; max-width: none; }
  .hero__visuel img { width: 100%; max-width: none; }
}

/* ---------- Matchs : stade de nuit, projecteurs, néon bleu ---------- */

.matchs {
  --nuit-stade: #070b1a;
  --neon: linear-gradient(90deg, #4c6bff, #9a5cff 55%, #3ad6c4);
  --stade-h: 380px;
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 188px 0 52px;
  background:
    linear-gradient(180deg, rgba(7, 11, 26, .1) 0, rgba(7, 11, 26, .25) 40%, rgba(7, 11, 26, .85) 78%, var(--nuit-stade) 100%) left top / 100% var(--stade-h) no-repeat,
    url(img/stade-mobile.webp) left top / auto var(--stade-h) no-repeat,
    var(--nuit-stade);
}
/* Fine ligne néon en haut de section, comme l'arc du toit */
.matchs::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--neon);
  box-shadow: 0 0 18px rgba(110, 120, 255, .8);
}
.matchs__inner { position: relative; z-index: 1; }
.matchs__intro { display: grid; justify-items: start; gap: 10px; }
.matchs__live { border-radius: 6px; box-shadow: 0 0 22px rgba(239, 20, 35, .55); }
.matchs .titre {
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 0 30px rgba(90, 120, 255, .65), 0 2px 0 rgba(0, 0, 0, .45);
}
.matchs__lead { color: #c9d3f3; font-size: 1.08rem; max-width: 44ch; }

.affiches { margin-top: 28px; }
.affiches__titre { font: 700 1.5rem/1.1 var(--f-display); color: #fff; }
/* Téléphone : les affiches défilent à l'horizontale ; ordinateur : grille */
.affiches__liste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: 12px;
  margin: 14px calc(-1 * var(--gouttiere)) 0;
  padding: 2px var(--gouttiere) 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gouttiere);
  scrollbar-width: none;
}
.affiches__liste::-webkit-scrollbar { display: none; }
.affiches__liste > li { scroll-snap-align: start; }

/* Tableau de score, façon incrustation TV de nuit */
.bug {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  background: linear-gradient(180deg, rgba(26, 36, 86, .9), rgba(11, 17, 46, .94));
  border: 1px solid rgba(140, 160, 255, .26);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(180, 195, 255, .14);
}
.bug::before {
  content: "";
  position: absolute; left: 10%; right: 10%; top: 0;
  height: 2px;
  background: var(--neon);
  opacity: .9;
}
.bug__date {
  grid-column: 1 / -1;
  text-align: center;
  padding: 12px 12px 0;
  font: 700 .95rem/1 var(--f-display);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #a9b8ff;
}
.bug__equipe {
  display: flex; align-items: center;
  padding: 10px 8px 8px;
  font: 700 clamp(1.08rem, 4.6vw, 1.3rem)/1.05 var(--f-display);
  text-transform: uppercase;
  color: #fff;
  overflow-wrap: break-word;
  hyphens: manual;
}
.bug__equipe--dom { justify-content: flex-end; text-align: right; }
.bug__heure {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 64px;
  padding: 8px 10px;
  align-self: center;
  border-radius: 8px;
  background: var(--orange); color: var(--encre);
  font: italic 800 1.4rem/1 var(--f-display);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 20px rgba(255, 119, 0, .45);
}
.bug__heure i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.bug--direct .bug__heure { background: var(--rouge); color: #fff; font-size: 1.05rem; text-transform: uppercase; box-shadow: 0 0 22px rgba(239, 20, 35, .6); }
.bug__comp {
  grid-column: 1 / -1;
  text-align: center;
  font-size: .85rem; color: #8f9cc9;
  padding: 2px 12px 11px;
}

.competitions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.competitions li {
  background: rgba(22, 32, 78, .6);
  border: 1px solid rgba(140, 160, 255, .32);
  border-radius: 999px;
  padding: 4px 11px 5px;
  font: 600 .98rem/1.1 var(--f-display);
  color: #dfe5ff;
}

@media (min-width: 768px) {
  .matchs { --stade-h: 480px; padding: 230px 0 64px; }
  .affiches__liste { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 0; padding: 2px 0 0; overflow: visible; }
  .competitions { margin-top: 26px; }
}
/* Grand écran : le stade occupe toute la largeur, le titre se place dans la zone sombre à droite */
@media (min-width: 1024px) {
  .matchs {
    --stade-h: 40vw;
    padding: 0 0 64px;
    background:
      linear-gradient(180deg, rgba(7, 11, 26, 0) 0, rgba(7, 11, 26, 0) 72%, rgba(7, 11, 26, .55) 88%, var(--nuit-stade) 100%) left top / 100% var(--stade-h) no-repeat,
      url(img/stade-1600.webp) left top / 100% auto no-repeat,
      var(--nuit-stade);
  }
  .matchs__intro { margin-left: 52%; padding-top: clamp(56px, 6.5vw, 120px); max-width: 520px; }
  .affiches { margin-top: clamp(28px, 3.5vw, 64px); }
  .affiches__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- La carte ---------- */

.carte { padding: 56px 0 72px; }
.carte__entete { display: grid; gap: 10px; }
.carte__note { color: var(--encre-douce); font-size: .98rem; }

.carte-nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--creme);
  margin-top: 22px;
  border-bottom: 1.5px solid rgba(17, 17, 17, .1);
}
.carte-nav__piste {
  display: flex; gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 12px var(--gouttiere);
  max-width: var(--max); margin-inline: auto;
  scroll-padding-inline: var(--gouttiere);
}
.carte-nav__piste::-webkit-scrollbar { display: none; }
@media (min-width: 1040px) {
  .carte-nav__piste { flex-wrap: wrap; justify-content: center; overflow: visible; gap: 5px; padding-block: 10px; max-width: 1240px; }
  .carte-nav .puce { min-height: 36px; padding: 5px 10px; font-size: 1rem; }
}
.puce {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(17, 17, 17, .18);
  background: var(--papier);
  color: var(--encre);
  font: 700 1.1rem/1 var(--f-display);
  text-decoration: none;
  cursor: pointer;
}
.puce[aria-current="true"] { background: var(--encre); border-color: var(--encre); color: #fff; }
.puce--vege { border-color: var(--vert); color: var(--vert); }
.puce--vege::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; }
.puce--vege[aria-pressed="true"] { background: var(--vert); color: #fff; }
.puce--vege[aria-pressed="true"]::before { background: #fff; border-color: #fff; }

.cat { padding-top: 40px; scroll-margin-top: calc(var(--nav-h, 66px) - 22px); }
.cat__tete { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 16px; }
.cat__intro { margin-top: 14px; color: var(--encre-douce); max-width: 60ch; }
.options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.options li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--papier);
  border: 1.5px solid rgba(17, 17, 17, .14);
  font-weight: 600; font-size: .95rem;
}
.options li:has(b) { padding-right: 4px; }
.options li.options__inclus { background: var(--encre); color: #fff; border-color: var(--encre); }
.options li.options__titre { background: none; border: 0; padding-inline: 2px 0; color: var(--encre-douce); }
.options b { background: var(--orange); border-radius: 999px; padding: 3px 8px; font: 700 1rem/1 var(--f-display); }

.plats { display: grid; gap: 10px; margin-top: 18px; }
.plat {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  grid-template-areas: "img nom prix" "img desc desc";
  grid-template-rows: auto 1fr;
  gap: 2px 12px;
  align-items: start;
  background: var(--carte);
  border-radius: var(--r);
  padding: 12px 12px 12px 8px;
}
.plat--sans-img { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom prix" "desc desc"; padding-left: 14px; }
.plat--paliers { grid-template-areas: "img nom nom" "img desc desc" "img pal pal"; grid-template-rows: auto auto 1fr; }
.plat--sans-prix { grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "img nom" "img desc"; align-content: center; }
.plat--sans-prix.plat--variantes { grid-template-areas: "img nom" "img desc" "img var"; grid-template-rows: auto auto 1fr; }
.variantes { grid-area: var; margin-top: 8px; font: 700 1.2rem/1.1 var(--f-display); }
.plat__img { grid-area: img; width: 84px; height: 66px; object-fit: contain; align-self: center; }
.plat__corps { display: contents; }
.plat__nom { grid-area: nom; font: 700 1.35rem/1.1 var(--f-display); align-self: center; }
.plat__desc { grid-area: desc; font-size: .95rem; line-height: 1.35; color: var(--encre-douce); }
.plat > .prix { grid-area: prix; justify-self: end; }
.plat--vedette { background: var(--orange); }
.plat--vedette .plat__desc { color: var(--encre); }
.plat--vedette .prix { background: var(--encre); color: #fff; }
.paliers { grid-area: pal; display: grid; gap: 6px; margin-top: 10px; }
.paliers li { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 700 1.2rem/1 var(--f-display); }
.vege { display: inline-block; vertical-align: .2em; margin-left: 6px; font: 600 .75rem/1 var(--f-texte); color: var(--vert); border: 1.5px solid currentColor; border-radius: 999px; padding: 2px 6px; }

/* Desserts : petites vignettes */
.plats--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plats--compact .plat { grid-template-columns: 1fr; grid-template-areas: "img" "nom" "desc"; grid-template-rows: auto; justify-items: center; text-align: center; padding: 12px 10px 14px; }
.plats--compact .plat__img { width: 100%; height: 84px; }
.plats--compact .plat__nom { font-size: 1.2rem; }

/* Paninis : une photo, une liste de noms */
.liste { margin-top: 18px; background: var(--carte); border-radius: var(--r); padding: 16px; }
.liste__img { width: min(100%, 420px); margin: 0 auto 10px; }
.liste ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.liste li { font: 700 1.25rem/1.1 var(--f-display); }
.liste li small { display: block; font: 400 .9rem/1.3 var(--f-texte); color: var(--encre-douce); }
.liste--simple li small { display: inline; margin-left: 5px; }
.liste__note { margin-top: 14px; color: var(--encre-douce); }

/* Barquettes, boissons : tableau */
.tableau { margin-top: 18px; width: 100%; max-width: 560px; border-collapse: collapse; background: var(--carte); border-radius: var(--r); overflow: hidden; }
.tableau th, .tableau td { padding: 11px 14px; text-align: left; }
.tableau thead th { font: 600 .9rem/1 var(--f-texte); color: var(--encre-douce); padding-bottom: 4px; }
.tableau tbody th { font: 700 1.25rem/1.1 var(--f-display); }
.tableau tbody th small { font: 400 .9rem/1 var(--f-texte); color: var(--encre-douce); margin-left: 4px; }
.tableau tbody tr + tr > * { border-top: 1.5px dashed rgba(17, 17, 17, .14); }
.tableau .num { text-align: right; width: 1%; white-space: nowrap; font: 700 1.25rem/1 var(--f-display); font-variant-numeric: tabular-nums; }

.formule {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  margin-top: 14px;
  background: var(--orange);
  border-radius: var(--r);
  padding: 18px 16px;
}
.formule .tag { font-size: 1.35rem; }
.formule p { font: 700 1.3rem/1.1 var(--f-display); flex: 1 1 160px; }
.formule .prix { background: var(--encre); color: #fff; font-size: 1.35rem; }

.carte__pied { margin-top: 36px; color: var(--encre-douce); font-size: .95rem; }

/* Filtre végé */
.vege-seul .plat:not([data-vege]),
.vege-seul .liste li:not([data-vege]),
.vege-seul .tableau tbody tr:not([data-vege]),
.vege-seul .cat:not([data-vege]),
.vege-seul .puce[data-cat]:not([data-vege]),
.vege-seul .formule { display: none; }

@media (min-width: 700px) {
  .plats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plats--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .liste ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .carte { padding: 80px 0 96px; }
  .cat { padding-top: 52px; }
}
@media (min-width: 1040px) {
  .plats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plats--compact { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .liste { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: center; }
  .liste__img { margin: 0; }
}

/* ---------- Infos pratiques ---------- */

.infos { background: var(--orange); padding: 56px 0 64px; }
.infos__grille { display: grid; gap: 14px; margin-top: 28px; }
.bloc { background: var(--papier); border-radius: 14px; padding: 22px 20px; display: grid; gap: 14px; align-content: start; }
.bloc h3 { font: 700 1.6rem/1 var(--f-display); }
.bloc p, .bloc address { font-size: 1.1rem; }
.horaires { border-collapse: collapse; width: 100%; font-size: 1.08rem; }
.horaires th, .horaires td { padding: 8px 10px; text-align: left; }
.horaires td { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.horaires tr.aujourdhui > * { background: var(--carte); }
.horaires tr.aujourdhui th { border-radius: 8px 0 0 8px; }
.horaires tr.aujourdhui td { border-radius: 0 8px 8px 0; }
.horaires tr.aujourdhui th::after { content: " (aujourd’hui)"; font-weight: 400; color: var(--encre-douce); }
.faits { display: grid; gap: 10px; font-size: 1.1rem; }
.faits li { display: flex; gap: 10px; align-items: baseline; }
.faits li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--orange); transform: translateY(-2px) rotate(45deg); }
.bloc__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.suivre { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.suivre__titre { font: 700 1.4rem/1 var(--f-display); margin-right: 6px; width: 100%; }
@media (min-width: 700px) { .suivre__titre { width: auto; } }
.suivre .btn { border-color: var(--encre); }

@media (min-width: 700px) {
  .infos { padding: 80px 0 88px; }
  .infos__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Pied de page ---------- */

.pied { background: var(--nuit); color: var(--nuit-texte); padding: 40px 0 calc(40px + var(--barre-h) + env(safe-area-inset-bottom)); font-size: .98rem; }
.page-simple .pied { padding-bottom: 32px; }
.pied__grille { display: grid; gap: 22px; }
.pied__logo { width: 150px; }
.pied a { color: var(--papier); }
.pied nav { display: grid; gap: 14px; }
.pied__reseaux { display: flex; gap: 12px; }
.pied__app { display: inline-flex; border-radius: 10px; }
.pied__app .logo-app { width: 40px; height: 40px; border-radius: 10px; }
.pied__legal { color: #a2958a; font-size: .9rem; }
@media (min-width: 768px) {
  .pied__grille { grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; }
  .pied nav { justify-items: end; }
}

/* ---------- Barre d'actions (fixe en bas) ---------- */

.barre {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr;
  gap: 6px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: var(--encre);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .18);
}
.barre a, .barre button {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: calc(var(--barre-h) - 12px);
  border: 0; border-radius: 10px;
  background: none;
  color: #fff;
  text-decoration: none;
  font: 700 1.15rem/1 var(--f-display);
  cursor: pointer;
}
.barre .barre__commander { background: var(--orange); color: var(--encre); }
.barre .barre__commander[aria-expanded="true"] { background: var(--papier); }
.barre .ico { width: 22px; height: 22px; }

/* Choix Uber Eats / Deliveroo, au-dessus de la barre */
.commande {
  position: fixed; z-index: 51;
  left: 8px; right: 8px;
  bottom: calc(var(--barre-h) + env(safe-area-inset-bottom) + 8px);
  display: grid; gap: 8px;
  padding: 14px;
  background: var(--papier);
  border: 2px solid var(--encre);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.commande[hidden] { display: none; }
.commande__tete { display: flex; align-items: center; justify-content: space-between; padding-left: 4px; }
.commande__titre { font: 700 1.35rem/1 var(--f-display); }
.commande__fermer { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--carte); color: var(--encre); cursor: pointer; }
.commande__lien {
  display: flex; align-items: center; gap: 14px;
  min-height: 60px;
  padding: 8px 14px 8px 8px;
  border-radius: 12px;
  background: var(--carte);
  color: var(--encre);
  font: 700 1.35rem/1 var(--f-display);
  text-decoration: none;
}
.commande__lien:hover { background: #efe0c8; }
.commande__lien .logo-app { width: 44px; height: 44px; border-radius: 11px; }
@media (prefers-reduced-motion: no-preference) {
  .commande:not([hidden]) { animation: monte .18s ease-out; }
}
@keyframes monte { from { opacity: 0; transform: translateY(10px); } }

/* Sur grand écran : la barre devient un dock centré */
@media (min-width: 960px) {
  .barre { left: 50%; right: auto; bottom: 16px; width: 520px; transform: translateX(-50%); border-radius: 16px; padding: 6px; }
  .commande { left: 50%; right: auto; width: 520px; transform: translateX(-50%); bottom: calc(var(--barre-h) + 28px); }
  @media (prefers-reduced-motion: no-preference) {
    .commande:not([hidden]) { animation: monte-dock .18s ease-out; }
  }
  .pied { padding-bottom: calc(40px + var(--barre-h) + 16px); }
}
@keyframes monte-dock { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ---------- Pages secondaires ---------- */

.page-simple { background: var(--creme); }
.page-simple__tete { background: var(--orange); padding: 18px 0; }
.page-simple__tete img { width: 150px; }
.texte-legal { padding-block: 48px 72px; max-width: 72ch; }
.texte-legal h1 { margin-bottom: 24px; }
.texte-legal h2 { font: 700 1.6rem/1.1 var(--f-display); margin: 32px 0 10px; }
.texte-legal p + p { margin-top: 10px; }
.a-remplir { background: #fff1c2; padding: 0 4px; border-radius: 4px; }