/* =============================================================
   BBM — bien boire & manger — feuille de styles commune
   Charte respectée depuis les PDF InDesign d'origine (dossier _PDF) :
   rouge de marque #e30613, noir, blanc, famille de police Nexa.
   ============================================================= */

/* -------------------------------------------------------------
   1. Polices Nexa (Fontfabric)
   Toutes les graisses utilisées dans les cartes d'origine.
   ------------------------------------------------------------- */
@font-face {
  font-family: "Nexa";
  src: url("../fonts/NexaLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nexa";
  src: url("../fonts/NexaLightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Nexa";
  src: url("../fonts/NexaBook.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nexa";
  src: url("../fonts/Nexa.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nexa";
  src: url("../fonts/Nexa-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Nexa";
  src: url("../fonts/NexaBold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nexa";
  src: url("../fonts/NexaBoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Nexa";
  src: url("../fonts/NexaHeavyItalic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Nexa";
  src: url("../fonts/NexaBlack.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nexa";
  src: url("../fonts/NexaBlackItalic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* -------------------------------------------------------------
   2. Design tokens
   ------------------------------------------------------------- */
:root {
  --bbm-red: #e30613;
  --bbm-black: #0d0d0d;
  --bbm-white: #ffffff;
  --bbm-grey: #6b6b6b;
  --bbm-line: #e6b3b6; /* filet rouge clair pour séparateurs discrets */
  --bbm-blue: #000dff;
  --bbm-green: #007846;

  --font: "Nexa", -apple-system, "Segoe UI", sans-serif;

  --page-max-width: 640px;
  --gutter: 1.25rem;

  --radius: 14px;
}

/* -------------------------------------------------------------
   3. Reset minimal
   ------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bbm-white);
  color: var(--bbm-black);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
p {
  margin: 0;
}

/* -------------------------------------------------------------
   4. Layout général
   ------------------------------------------------------------- */
.page {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: 4rem;
}

/* Barre supérieure : logo BBM cliquable + retour à la carte */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1rem;
  position: sticky;
  top: 0;
  background: var(--bbm-white);
  z-index: 10;
}

.theme-red .top-bar {
  background: var(--bbm-red);
}

.top-bar__logo img {
  height: 46px;
  width: auto;
}

/* Page d'accueil : logo mis en avant, bien plus grand */
.top-bar--home {
  justify-content: center;
  position: static;
  padding-block: 1.5rem 0.5rem;
}

.top-bar--home .top-bar__logo img {
  height: auto;
  width: min(100%, 400px);
}

.top-bar__back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--bbm-black);
}

.theme-red .top-bar__back {
  color: var(--bbm-black);
}

.top-bar__back svg {
  width: 1em;
  height: 1em;
}

/* Titre de page : reproduit le grand titre rouge deux lignes des PDF */
.page-title {
  font-family: var(--font);
  font-weight: 900;
  font-style: normal;
  color: var(--bbm-red);
  font-size: clamp(2.4rem, 11vw, 3.4rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin: 0.5rem 0 2rem;
}

.theme-red .page-title {
  color: var(--bbm-black);
}

.page-title span {
  display: block;
}

/* -------------------------------------------------------------
   5. Accueil : navigation vers les cartes
   ------------------------------------------------------------- */
.home-nav {
  border-top: 1px solid var(--bbm-black);
}

.home-nav__item {
  border-bottom: 1px solid var(--bbm-black);
}

.home-nav__link {
  display: block;
  padding: 1.1rem 0;
  font-weight: 900;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--bbm-red);
}

.home-nav__link--dark {
  color: var(--bbm-black);
}

.home-nav__link:active {
  opacity: 0.6;
}

/* -------------------------------------------------------------
   6. Sections de carte
   ------------------------------------------------------------- */
.menu-section {
  margin-top: 2.75rem;
}

.menu-section__title {
  font-weight: 900;
  font-style: normal;
  font-size: 1.9rem;
  color: var(--bbm-black);
  margin-bottom: 0.9rem;
}

.theme-red .menu-section__title {
  color: var(--bbm-black);
}

.menu-section__note {
  font-style: italic;
  font-weight: 400;
  color: var(--bbm-grey);
  font-size: 0.95rem;
  margin: -0.4rem 0 1rem;
}

.theme-red .menu-section__note {
  color: rgba(13, 13, 13, 0.75);
}

/* Liste de plats / boissons -------------------------------------------- */
.menu-list {
  display: flex;
  flex-direction: column;
}

.menu-item {
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(13, 13, 13, 0.12);
}

.theme-red .menu-item {
  border-bottom-color: rgba(13, 13, 13, 0.25);
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4em;
  margin: 0;
}

.menu-item__name {
  font-weight: 700;
  font-style: italic;
  font-size: 1.05rem;
  flex: 1 1 auto;
}

.menu-item__price {
  flex: 0 0 auto;
  font-weight: 900;
  font-style: normal;
  color: var(--bbm-red);
  font-size: 1.05rem;
  white-space: nowrap;
}

.menu-item__desc {
  font-weight: 300;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--bbm-grey);
  margin-top: 0.2rem;
}

.menu-item__note {
  flex: 1 1 100%;
  font-weight: 700;
  font-style: normal;
  font-size: 0.82rem;
  color: var(--bbm-red);
}

.theme-red .menu-item__desc {
  color: rgba(13, 13, 13, 0.75);
}

/* Petite icône coeur "coup de coeur" ------------------------------------ */
.icon-heart {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  vertical-align: -0.05em;
  background-color: var(--bbm-red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'%3E%3Cpath d='M16 29S0 19.5 0 9.5 8.5 0 12 0c2.6 0 3.7 1.3 4 2 .3-.7 1.4-2 4-2 3.5 0 12 3.4 12 9.5S16 29 16 29z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'%3E%3Cpath d='M16 29S0 19.5 0 9.5 8.5 0 12 0c2.6 0 3.7 1.3 4 2 .3-.7 1.4-2 4-2 3.5 0 12 3.4 12 9.5S16 29 16 29z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Petite icône maison "fait maison" -------------------------------------- */
.icon-house {
  display: inline-block;
  width: 1.05em;
  height: 0.82em;
  vertical-align: -0.03em;
  background-color: var(--bbm-red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 78.11'%3E%3Cpath d='M93.11,45.72 C91.56,56.55 90.03,67.31 88.48,78.11 L39.51,78.11 C38.28,69.40 37.04,60.68 35.80,51.89 L0.00,51.89 L0.00,45.72 L93.11,45.72 Z M62.66,0.00 C68.77,6.12 74.85,12.22 81.11,18.49 L81.11,9.00 L88.99,9.00 L88.99,9.92 C88.99,14.83 88.97,19.74 89.01,24.65 C89.02,25.15 89.25,25.75 89.60,26.12 C92.85,29.61 96.15,33.06 99.44,36.53 C99.60,36.70 99.76,36.88 100.00,37.15 L25.62,37.15 C38.01,24.72 50.32,12.37 62.66,0.00 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 78.11'%3E%3Cpath d='M93.11,45.72 C91.56,56.55 90.03,67.31 88.48,78.11 L39.51,78.11 C38.28,69.40 37.04,60.68 35.80,51.89 L0.00,51.89 L0.00,45.72 L93.11,45.72 Z M62.66,0.00 C68.77,6.12 74.85,12.22 81.11,18.49 L81.11,9.00 L88.99,9.00 L88.99,9.92 C88.99,14.83 88.97,19.74 89.01,24.65 C89.02,25.15 89.25,25.75 89.60,26.12 C92.85,29.61 96.15,33.06 99.44,36.53 C99.60,36.70 99.76,36.88 100.00,37.15 L25.62,37.15 C38.01,24.72 50.32,12.37 62.66,0.00 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.theme-red .icon-house {
  background-color: var(--bbm-black);
}

/* Petite icône poisson "contient du poisson" ----------------------------- */
.icon-fish {
  display: inline-block;
  width: 1.1em;
  height: 0.5em;
  vertical-align: -0.03em;
  background-color: var(--bbm-blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 45.37'%3E%3Cpath fill-rule='evenodd' d='M18.53,26.35 C14.59,33.92 7.72,37.43 0.06,39.95 C0.20,39.73 0.32,39.50 0.46,39.28 C2.93,35.52 4.98,31.56 6.13,27.19 C7.28,22.85 7.38,18.49 6.38,14.11 C5.28,9.30 3.09,4.97 0.44,0.84 C0.27,0.59 0.11,0.34 0.00,0.00 C3.83,1.92 7.58,3.98 11.00,6.58 C14.48,9.22 16.98,12.68 19.25,16.41 C19.53,16.26 19.75,16.14 19.96,16.01 C25.57,12.48 31.36,9.29 37.49,6.72 C42.98,4.42 48.64,2.67 54.57,1.90 C66.47,0.35 77.19,3.23 86.74,10.48 C91.70,14.24 95.91,18.74 99.71,23.63 C100.00,23.99 100.00,24.24 99.75,24.62 C93.84,33.56 85.86,39.79 75.59,42.94 C68.81,45.02 61.88,45.37 54.87,44.33 C44.91,42.87 35.93,38.93 27.67,33.31 C24.76,31.33 22.04,29.05 19.23,26.91 C19.05,26.77 18.87,26.62 18.53,26.35 Z M77.11,15.57 C74.58,15.60 72.58,17.55 72.57,20.01 C72.56,22.47 74.61,24.52 77.06,24.52 C79.60,24.51 81.62,22.49 81.60,19.99 C81.58,17.56 79.55,15.56 77.11,15.57 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 45.37'%3E%3Cpath fill-rule='evenodd' d='M18.53,26.35 C14.59,33.92 7.72,37.43 0.06,39.95 C0.20,39.73 0.32,39.50 0.46,39.28 C2.93,35.52 4.98,31.56 6.13,27.19 C7.28,22.85 7.38,18.49 6.38,14.11 C5.28,9.30 3.09,4.97 0.44,0.84 C0.27,0.59 0.11,0.34 0.00,0.00 C3.83,1.92 7.58,3.98 11.00,6.58 C14.48,9.22 16.98,12.68 19.25,16.41 C19.53,16.26 19.75,16.14 19.96,16.01 C25.57,12.48 31.36,9.29 37.49,6.72 C42.98,4.42 48.64,2.67 54.57,1.90 C66.47,0.35 77.19,3.23 86.74,10.48 C91.70,14.24 95.91,18.74 99.71,23.63 C100.00,23.99 100.00,24.24 99.75,24.62 C93.84,33.56 85.86,39.79 75.59,42.94 C68.81,45.02 61.88,45.37 54.87,44.33 C44.91,42.87 35.93,38.93 27.67,33.31 C24.76,31.33 22.04,29.05 19.23,26.91 C19.05,26.77 18.87,26.62 18.53,26.35 Z M77.11,15.57 C74.58,15.60 72.58,17.55 72.57,20.01 C72.56,22.47 74.61,24.52 77.06,24.52 C79.60,24.51 81.62,22.49 81.60,19.99 C81.58,17.56 79.55,15.56 77.11,15.57 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Petite icône feuille "végé & healthy" ----------------------------------- */
.icon-leaf {
  display: inline-block;
  width: 0.95em;
  height: 0.84em;
  vertical-align: -0.05em;
  background-color: var(--bbm-green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 88.2'%3E%3Cpath d='M13.79,85.89 C16.55,79.20 19.12,72.58 22.01,66.10 C26.84,55.25 33.63,45.73 42.49,37.81 C45.88,34.78 50.78,29.82 50.78,29.82 C39.27,35.05 30.19,43.13 23.00,53.46 C17.16,61.85 7.84,82.08 7.84,82.08 C7.84,82.08 6.60,79.88 6.14,78.83 C1.55,68.35 0.00,57.43 1.46,46.08 C2.39,38.77 4.84,32.04 9.25,26.09 C12.16,22.15 15.76,18.88 19.61,15.87 C28.57,8.85 38.86,5.09 49.99,3.41 C64.27,1.25 78.62,0.00 93.08,0.30 C95.34,0.35 97.61,0.31 100.00,0.31 C99.26,1.27 98.55,2.20 97.84,3.12 C92.71,9.75 89.93,17.43 87.83,25.43 C85.75,33.36 83.82,41.34 81.42,49.17 C78.25,59.51 72.92,68.59 64.68,75.81 C58.42,81.28 51.17,84.73 43.10,86.52 C37.03,87.87 30.88,88.20 24.69,87.60 C21.51,87.29 14.45,86.08 13.79,85.89 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 88.2'%3E%3Cpath d='M13.79,85.89 C16.55,79.20 19.12,72.58 22.01,66.10 C26.84,55.25 33.63,45.73 42.49,37.81 C45.88,34.78 50.78,29.82 50.78,29.82 C39.27,35.05 30.19,43.13 23.00,53.46 C17.16,61.85 7.84,82.08 7.84,82.08 C7.84,82.08 6.60,79.88 6.14,78.83 C1.55,68.35 0.00,57.43 1.46,46.08 C2.39,38.77 4.84,32.04 9.25,26.09 C12.16,22.15 15.76,18.88 19.61,15.87 C28.57,8.85 38.86,5.09 49.99,3.41 C64.27,1.25 78.62,0.00 93.08,0.30 C95.34,0.35 97.61,0.31 100.00,0.31 C99.26,1.27 98.55,2.20 97.84,3.12 C92.71,9.75 89.93,17.43 87.83,25.43 C85.75,33.36 83.82,41.34 81.42,49.17 C78.25,59.51 72.92,68.59 64.68,75.81 C58.42,81.28 51.17,84.73 43.10,86.52 C37.03,87.87 30.88,88.20 24.69,87.60 C21.51,87.29 14.45,86.08 13.79,85.89 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Intitulé de sous-catégorie dans une liste (ex : « végé & healthy » dans plats) */
.menu-list__divider {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 900;
  font-style: normal;
  font-size: 1.6rem;
  color: var(--bbm-green);
  margin: 0.6rem 0 0.4rem;
}

/* Encadré (formule du midi, cocktails bbm, happy hour...) -------------- */
.callout {
  border: 3px solid var(--bbm-red);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  margin: 1.6rem 0;
}

.callout__title {
  font-weight: 900;
  font-style: normal;
  color: var(--bbm-red);
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
}

.callout--plain .menu-item {
  border-bottom-color: rgba(227, 6, 19, 0.25);
}

.callout__lead {
  font-weight: 700;
  font-style: italic;
  margin-bottom: 0.5rem;
}

/* Bandeau prix unique (ex : "5€ happy cocktails") ----------------------- */
.price-banner {
  background: var(--bbm-red);
  color: var(--bbm-white);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin: 1.6rem 0;
  text-align: center;
}

.price-banner__price {
  font-weight: 900;
  font-size: 2rem;
  display: block;
}

.price-banner__title {
  font-weight: 900;
  font-style: italic;
  font-size: 1.15rem;
  display: block;
  margin-top: 0.1rem;
}

.price-banner__desc {
  font-weight: 300;
  font-style: italic;
  font-size: 0.9rem;
  margin-top: 0.5rem;
  opacity: 0.92;
}

/* -------------------------------------------------------------
   7. Tableau des vins
   ------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 2.75rem;
}

.wine-table {
  width: 100%;
  min-width: 320px;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.wine-table caption {
  text-align: left;
  font-weight: 900;
  font-size: 1.9rem;
  color: var(--bbm-black);
  padding-bottom: 0.9rem;
}

.wine-table th {
  font-weight: 700;
  font-style: normal;
  color: var(--bbm-red);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
  border-left: 1px solid var(--bbm-red);
  padding: 0 0.3rem 0.5rem;
  vertical-align: bottom;
  width: 3.4rem;
}

.wine-table th:first-child {
  border-left: none;
  width: auto;
}

.wine-table td {
  border-top: 1px solid rgba(13, 13, 13, 0.12);
  padding: 0.7rem 0.3rem;
  vertical-align: top;
}

.wine-table tbody tr:first-child td {
  border-top: none;
}

.wine-table td.wine-name {
  border-left: none;
  padding-left: 0;
  text-align: left;
}

.wine-table td.wine-price {
  border-left: 1px solid var(--bbm-red);
  text-align: center;
  font-weight: 900;
  color: var(--bbm-red);
  font-size: 0.95rem;
  white-space: nowrap;
}

.wine__title {
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: 0.98rem;
  line-height: 1.15;
}

.wine__meta {
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--bbm-grey);
  margin-top: 0.15rem;
}

.wine__meta em {
  font-style: italic;
  text-transform: none;
  color: var(--bbm-black);
}

.legal-note {
  font-style: italic;
  font-weight: 300;
  font-size: 0.78rem;
  color: var(--bbm-grey);
  margin-top: 2rem;
  line-height: 1.5;
}

/* -------------------------------------------------------------
   8. Thème rouge plein (page brunch)
   ------------------------------------------------------------- */
.theme-red {
  background: var(--bbm-red);
  color: var(--bbm-black);
}

.theme-red .menu-item__price {
  color: var(--bbm-black);
}

.theme-red .icon-heart {
  background-color: var(--bbm-black);
}

.theme-red .icon-leaf {
  background-color: var(--bbm-black);
}

/* -------------------------------------------------------------
   9. Pied de page / navigation retour
   ------------------------------------------------------------- */
.page-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(13, 13, 13, 0.15);
  text-align: center;
}

.theme-red .page-footer {
  border-top-color: rgba(13, 13, 13, 0.3);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 900;
  font-style: italic;
  font-size: 1rem;
  color: var(--bbm-red);
}

.theme-red .back-link {
  color: var(--bbm-black);
}

.back-link svg {
  width: 1em;
  height: 1em;
}

/* -------------------------------------------------------------
   10. Utilitaires
   ------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}