/* ============================================================
   MY VTC GO — city-bar-index.css
   Barre de navigation fixe en bas — pages INDEX uniquement
   4 boutons : Metz · Thionville · Luxembourg · Amnéville
   ============================================================ */

.city-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 480;
  display: flex; align-items: stretch; height: 52px;
  background: rgba(15,15,18,0.85);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border-top: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 -4px 30px rgba(0,0,0,0.55);
}
.city-bar-btn {
  flex: 1; display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 7px; color: rgba(192,192,192,0.65); font-family: var(--font);
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; border-right: 1px solid rgba(255,255,255,0.06);
  transition: color .2s, background .2s;
}
.city-bar-btn:last-child { border-right: none; }
.city-bar-btn svg { width: 14px; height: 14px; stroke: currentColor; flex-shrink: 0; }
.city-bar-btn:hover, .city-bar-btn:active { color: #D4D4D4; background: rgba(255,255,255,0.016); }

@media (max-width: 768px) {
  .city-bar { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .city-bar::-webkit-scrollbar { display: none; }
  .city-bar-btn { flex-shrink: 0; flex: none; min-width: 72px;
                  padding: 0 8px; gap: 5px; font-size: 9px;
                  scroll-snap-align: start; }
  .city-bar-btn svg { width: 13px; height: 13px; }
}