/* =========================================
   NAVBAR — Barre de navigation sticky
   Uniquement sur .page-boissons (mobile)
   ========================================= */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;

  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px 16px;

  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* 1. La navbar reste toujours en haut, transparente par défaut */
.page-boissons .navbar {
  background: transparent;
  border-bottom: 1px solid transparent;
  overflow-x: hidden; /* Empêche de scroller dans le vide quand le menu est caché */
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* 2. Au scroll, la navbar prend son fond blanc et le scroll est réactivé */
.page-boissons .navbar.navbar--visible {
  background: white;
  border-bottom: 1px solid rgba(10, 82, 142, 0.12);
  overflow-x: auto;
}

/* 3. Les icônes ont toujours un fond blanc pour rester lisibles (comme sur la-carte) */
.page-boissons .navbar-chip--icon {
  background: white;
}

/* 4. Le séparateur et les liens texte sont cachés et décalés vers le haut par défaut */
.page-boissons .navbar-separator,
.page-boissons .navbar-chip:not(.navbar-chip--icon) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

/* 5. Au scroll, les liens texte descendent et s'affichent */
.page-boissons .navbar.navbar--visible .navbar-separator,
.page-boissons .navbar.navbar--visible .navbar-chip:not(.navbar-chip--icon) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.navbar::-webkit-scrollbar {
  display: none;
}

/* Chips texte */
.navbar-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 20px;
  border: 1.5px solid rgba(10, 82, 142, 0.3);
  font-family: var(--font-main);
  font-size: 0.82em;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s;
}

.page-carte .navbar-chip {
  background: white;
}

.navbar-chip:active {
  background-color: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  transition: none;
}

/* Chips icônes */
.navbar-chip--icon {
  padding: 5px 10px;
  border-color: var(--color-accent);
}

.navbar-chip--icon img {
  display: block;
  filter: invert(67%) sepia(57%) saturate(600%) hue-rotate(3deg) brightness(98%) contrast(92%);
}

/* Séparateur vertical */
.page-boissons .navbar-separator {
  width: 1px;
  height: 20px;
  background: rgba(10, 82, 142, 0.2);
  flex-shrink: 0;
}

/* Fondu droit fixe, indépendant du scroll de la navbar */
.navbar-fade {
  position: fixed;
  top: 0;
  right: 0;
  width: 48px;
  z-index: 201;
  pointer-events: none;
  background: linear-gradient(to right, transparent, white);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease, height 0.25s ease;
}

.navbar-fade--visible {
  opacity: 1;
  visibility: visible;

}

/* État actif dynamique (géré par le JS) */
.page-boissons .navbar-chip.navbar-chip--active {
  background-color: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}



/* Desktop : on garde uniquement les icônes fixes en haut à gauche */
@media (min-width: 701px) {
  /* La navbar reste en place mais devient transparente et ne bloque pas les clics */
  .navbar, 
  .page-boissons .navbar.navbar--visible {
    background: transparent !important;
    border-color: transparent !important;
    pointer-events: none; /* Permet de cliquer sur le contenu de la page au travers du vide */
  }

  /* On masque les liens textes et le séparateur */
  .navbar-separator,
  .navbar-chip:not(.navbar-chip--icon) {
    display: none !important;
  }

  /* On réactive le clic UNIQUEMENT sur les boutons icônes */
  .navbar-chip--icon {
    pointer-events: auto;
  }

  /* On masque le fondu (dégradé blanc) à droite s'il existe */
  .navbar-fade {
    display: none !important;
  }
}