:root{
  --fgn-bg: rgba(255,255,255,.92);
  --fgn-text: #9ca3af;
  --fgn-active: #111827;
  --fgn-primary: #111827;
  --fgn-soft: rgba(17,24,39,.07);
  --fgn-bottom-gap: calc(106px + env(safe-area-inset-bottom));
}
.fuegup-global-nav{
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  right: max(14px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 99999;
  height: 68px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  background: var(--fgn-bg);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-radius: 26px;
  box-shadow: 0 18px 55px rgba(15, 23, 42, .13);
  box-sizing: border-box;
}
.fgn-item{
  min-width: 0;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--fgn-text);
  text-decoration: none !important;
  border-radius: 18px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 500;
  transition: transform .18s ease, background .18s ease, color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.fgn-item i{font-size:18px;line-height:1;}
.fgn-item span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%;}
.fgn-item.is-active{color:var(--fgn-active);background:var(--fgn-soft);}
.fgn-item:active{transform:scale(.96);}

/* Réserve d'espace globale : évite que le contenu de page soit caché par la nav.
   On force aussi un fond neutre pour éviter la rupture de couleur visible dans
   l'espace créé sous les apps Fuegup. */
html.fuegup-nav-ready body,
body:has(.fuegup-global-nav){
  padding-bottom: var(--fgn-bottom-gap) !important;
  box-sizing: border-box;
  background: #f7f7f8;
}

/* Les pages Fuegup gardent le même fond jusqu'en bas de l'écran. */
html.fuegup-nav-ready .fg-app,
html.fuegup-nav-ready .fg-main,
html.fuegup-nav-ready .fg-events-app,
body:has(.fuegup-global-nav) .fg-app,
body:has(.fuegup-global-nav) .fg-main,
body:has(.fuegup-global-nav) .fg-events-app{
  background: #f7f7f8;
}

/* Compatibilité avec les bottom sheets / popups Fuegup.
   Important : on ne laisse plus les sheets dépasser de l'écran.
   La navigation réserve l'espace bas, puis la sheet scrolle elle-même. */
html.fuegup-nav-ready .fg-event-sheet,
html.fuegup-nav-ready .fg-modal,
html.fuegup-nav-ready .fg-filters-modal .fg-modal,
body:has(.fuegup-global-nav) .fg-event-sheet,
body:has(.fuegup-global-nav) .fg-modal,
body:has(.fuegup-global-nav) .fg-filters-modal .fg-modal{
  box-sizing: border-box;
  max-height: calc(100dvh - var(--fgn-bottom-gap) - 18px) !important;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(34px, env(safe-area-inset-bottom)) !important;
  scroll-padding-bottom: calc(var(--fgn-bottom-gap) + 24px);
}

/* Fallback pour les navigateurs sans dvh. */
@supports not (height: 100dvh){
  html.fuegup-nav-ready .fg-event-sheet,
  html.fuegup-nav-ready .fg-modal,
  html.fuegup-nav-ready .fg-filters-modal .fg-modal,
  body:has(.fuegup-global-nav) .fg-event-sheet,
  body:has(.fuegup-global-nav) .fg-modal,
  body:has(.fuegup-global-nav) .fg-filters-modal .fg-modal{
    max-height: calc(100vh - var(--fgn-bottom-gap) - 18px) !important;
  }
}

/* Si une popup contient une barre d'actions sticky en bas, on évite qu'elle soit
   visuellement collée au menu global. */
html.fuegup-nav-ready .fg-event-actions,
html.fuegup-nav-ready .fg-modal-actions,
body:has(.fuegup-global-nav) .fg-event-actions,
body:has(.fuegup-global-nav) .fg-modal-actions{
  margin-bottom: max(14px, env(safe-area-inset-bottom));
}

@media (min-width: 900px){
  .fuegup-global-nav.is-mobile-only{display:none;}
  html.fuegup-nav-ready body:has(.fuegup-global-nav.is-mobile-only),
  body:has(.fuegup-global-nav.is-mobile-only){padding-bottom:0 !important;}
  html.fuegup-nav-ready .fg-event-sheet,
  html.fuegup-nav-ready .fg-modal,
  html.fuegup-nav-ready .fg-filters-modal .fg-modal,
  body:has(.fuegup-global-nav) .fg-event-sheet,
  body:has(.fuegup-global-nav) .fg-modal,
  body:has(.fuegup-global-nav) .fg-filters-modal .fg-modal{
    padding-bottom: 32px !important;
  }
}

@supports not selector(:has(*)){
  html.fuegup-nav-ready body{padding-bottom:var(--fgn-bottom-gap) !important;}
  @media (min-width:900px){html.fuegup-nav-ready body{padding-bottom:0 !important;}}
}