/* Le wrapper ajouté autour de LA TABLE: la barre apparaît juste sous le tableau */
.jfi-lunch-scroll-wrapper {
  width: 100%;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  margin-top: 6px; /* petit espace sous la table */
  padding-bottom: 2px; /* pour ne pas masquer la barre par le contenu voisin */
}

/* Compat BoldBuilder: s’assurer que le scroll reste actif dans cette zone */
.bt_bb_section .jfi-lunch-scroll-wrapper,
.bt_bb_row .jfi-lunch-scroll-wrapper,
.bt_bb_column .jfi-lunch-scroll-wrapper,
.bt_bb_wrapper .jfi-lunch-scroll-wrapper,
.bt_bb_inner .jfi-lunch-scroll-wrapper {
  overflow-x: auto !important;
}

/* La table doit pouvoir dépasser pour déclencher le scroll */
.jfi-lunch-scroll-wrapper > table {
  width: max-content;              /* largeur intrinsèque */
  min-width: 820px;                /* ajuste selon tes colonnes */
  table-layout: auto;
  border-collapse: separate;
  white-space: normal;             /* texte des menus multi-lignes lisible */
}

/* Confort de lecture */
.jfi-lunch-scroll-wrapper > table th,
.jfi-lunch-scroll-wrapper > table td {
  min-width: 160px;
  padding: 10px;
  vertical-align: top;
  text-align: left;
}

@media (max-width: 900px) {
  .jfi-lunch-scroll-wrapper > table { font-size: 15px; }
  .jfi-lunch-scroll-wrapper > table th small { font-size: 12px; }
}