/* navigation.css — Navigation : barre d'onglets du bas, bouton flottant (+) */

/* ===== BOTTOM NAV ===== */
#bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--nav-height);
  background: var(--white);
  border-top: 1px solid var(--color-border);
  display: flex; z-index: 100;
  box-shadow: 0 -2px 8px rgba(0,0,0,.06);
}

#nav-indicator {
  position: absolute;
  top: 0; left: 0;
  width: 25%;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--color-primary);
  transform: translateX(0%);
  transition: transform .28s cubic-bezier(.4,0,.2,1), background-color .2s ease;
  pointer-events: none;
}

.nav-tab {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  background: transparent; border: none; cursor: pointer;
  color: var(--color-light);
  transition: color .15s;
  padding: 4px 0;
}
.nav-icon { font-size: 1.4rem; line-height: 1; transition: transform .15s; }
.nav-label { font-size: .65rem; font-weight: 600; letter-spacing: .02em; }

.nav-tab.active { color: var(--color-primary); }
.nav-tab.active .nav-icon { transform: scale(1.15); }
.nav-tab[data-type="escalade-gv"].active { color: var(--color-gv); }
.nav-tab[data-type="escalade"].active   { color: var(--color-escalade); }
.nav-tab[data-type="canyon"].active     { color: var(--color-canyon); }
.nav-tab[data-type="rando"].active      { color: var(--color-rando); }
.nav-tab[data-type="sae"].active        { color: var(--color-sae); }
.nav-tab[data-tool="sonnette"].active   { color: var(--color-sonnette); }
.nav-tab[data-tool="carte"].active      { color: var(--color-carte); }
.nav-tab[data-tool="stats"].active      { color: var(--color-stats); }

.nav-icon .nav-svg-icon {
  width: 22px; height: 22px;
  display: block;
}
.nav-tab[data-tool] .nav-icon {
  display: flex; align-items: center; justify-content: center;
  height: 22px;
}
/* Icônes dessinées des onglets outils : toujours dans leur couleur, comme les émojis
   des onglets d'activité (le libellé reste gris tant que l'onglet n'est pas actif) */
.nav-tab[data-tool="carte"] .nav-svg-icon    { color: var(--color-carte); }
.nav-tab[data-tool="sonnette"] .nav-svg-icon { color: var(--color-sonnette); }
.nav-tab[data-tool="stats"] .nav-svg-icon    { color: var(--color-stats); }

/* Onglet "outil" actif : le FAB d'ajout de fiche/sortie n'a pas de sens */
body.tool-mode #fab-container { display: none; }

/* ===== FAB ===== */
#fab-container {
  position: fixed; bottom: calc(var(--nav-height) + 12px); right: 16px;
  z-index: 200;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}

#fab-btn {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-500), var(--orange-600));
  color: var(--white); border: none; cursor: pointer;
  font-size: 1.8rem; font-weight: 300; line-height: 1;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s, background .2s;
}
#fab-btn:active, #fab-btn.open { transform: rotate(45deg); background: linear-gradient(135deg,var(--red-500),var(--red-600)); }

#fab-menu {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
#fab-menu.hidden { display: none; }

.fab-item {
  display: flex; align-items: center; gap: 10px;
  opacity: 0;
  transform: translateY(10px) scale(.96);
  transition: opacity .18s ease, transform .18s ease;
}
#fab-menu.open .fab-item { opacity: 1; transform: translateY(0) scale(1); }
#fab-menu.open .fab-item:nth-child(2) { transition-delay: .04s; }
.fab-label {
  background: var(--white); color: var(--color-text);
  font-size: .82rem; font-weight: 600;
  padding: 6px 14px; border-radius: 20px;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}
.fab-sub {
  width: 46px; height: 46px; border-radius: 50%;
  border: none; cursor: pointer; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform .15s;
}
.fab-sub:active { transform: scale(.9); }
.fab-sub.green { background: var(--green-500); color: var(--white); }
.fab-sub.blue  { background: var(--blue-500); color: var(--white); }