/* Add here all your CSS customizations */

/* =========================================================
   MENU — compact & convivial  (Aux Délices du Mont)
   Ajouté par-dessus common/styles.css — non destructif.
   Couleur de marque : #2A62B7
   ========================================================= */

/* --- Onglets du menu : boutons "pilules" --- */
ul.selecton {
  border-bottom: none !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding-left: 0;
  margin-bottom: 40px;
}
ul.selecton li { margin: 0; }
ul.selecton li > a {
  display: inline-block;
  padding: 8px 18px !important;
  margin: 0 !important;
  border: 2px solid #2A62B7;
  border-radius: 30px !important;
  color: #2A62B7;
  font-size: .9em;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
ul.selecton li:hover > a,
ul.selecton li > a.active {
  background: #2A62B7;
  color: #fff;
  border-radius: 30px !important;
  box-shadow: 0 4px 12px rgba(42, 98, 183, .25);
}

/* --- Sous-titres de section (Frites / Poutines) --- */
.food-menu .menu-subhead {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 12px;
}
.food-menu .menu-subhead h3 {
  margin: 0;
  font-size: 1.25em;
  color: #2A62B7;
  white-space: nowrap;
}
.food-menu .menu-subhead .line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, rgba(42, 98, 183, .5), transparent);
}
.food-menu .menu-legend {
  margin: -6px 0 14px;
  color: #888;
  font-size: .9em;
}

/* --- Ligne d'item compacte --- */
.food-menu .menu-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 6px;
  border-bottom: 1px dashed #e3e3e3;
  transition: background .15s ease;
}
.food-menu .menu-row:hover { background: #f3f7ff; }
.menu-name {
  flex: 1 1 auto;
  font-weight: 600;
  color: #333;
  line-height: 1.35;
}
.menu-name em {
  font-style: normal;
  font-weight: 400;
  font-size: .82em;
  color: #8a8a8a;
}
.menu-price {
  flex: 0 0 auto;
  font-weight: 700;
  color: #2A62B7;
  white-space: nowrap;
}

/* --- Colonnes de tailles (pizza 4 / poutine 3) --- */
.menu-sizes {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 6px;
  font-weight: 700;
  color: #2A62B7;
}
.menu-sizes > span { width: 54px; text-align: right; }
.menu-row--head { border-bottom: 2px solid #2A62B7; }
.menu-row--head .menu-name { color: #999; }
.menu-row--head .menu-sizes > span { color: #999; font-size: .9em; }

/* --- Petit écran : rester lisible et dans l'écran --- */
@media (max-width: 575px) {
  ul.selecton li > a { padding: 7px 14px !important; font-size: .82em; }
  .menu-sizes > span { width: 44px; font-size: .82rem; }
  .menu-name { font-size: .95rem; }
  .food-menu .menu-row { padding: 6px 2px; }
}