/* =================================================================
   MARS — BOTTOM NAV : FIX (à ajouter à la fin de responsive.css
   ou de style.css — ce bloc override tout ce qui précède)
   =================================================================
   Objectifs :
   1. La nav est TOUJOURS fixée en bas, jamais dans le flux.
   2. Elle ne recouvre JAMAIS le contenu : le body/pages réservent
      l'espace via padding-bottom.
   3. Elle respecte safe-area (iPhone notch/home indicator).
   4. Elle se cache (ou se décale) automatiquement quand le clavier
      est ouvert → n'interfère pas avec les formulaires.
   5. Elle ne bloque PAS le scroll ni les taps sur les éléments
      dessous (pas de z-index qui pète, pas de transparence qui
      absorbe les clics).
   ================================================================= */

/* ---- 1. POSITIONNEMENT FIXE ---- */
.bottom-nav {
  /* Fixé à la fenêtre, pas au flux. Indestructible. */
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;

  /* Au-dessus du contenu mais EN-DESSOUS des modals. */
  z-index: 100;

  /* Respect du safe-area sur tous les iPhones et Android */
  padding-bottom: env(safe-area-inset-bottom, 0px);

  /* Hauteur fixe et prévisible */
  height: calc(72px + env(safe-area-inset-bottom, 0px));

  /* Layout interne */
  display: flex;
  align-items: center;
  justify-content: space-around;

  /* Style (garde ton style MARS) */
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--m-steel, #3A3A3A);

  /* Important : GPU layer, pas de repaint au scroll */
  transform: translateZ(0);
  will-change: transform;

  /* Transition douce pour le cas clavier / cache */
  transition: transform 0.22s ease-out;
}

/* ---- 2. ESPACE RÉSERVÉ SUR TOUTES LES PAGES ---- */
/* Le contenu ne doit JAMAIS passer derrière la nav. */
body,
.page,
.page-content,
main {
  /* 72px nav + safe-area + un peu de respiration (12px) */
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 12px) !important;
}

/* Exception : pages fullscreen (auth, onboarding) où la nav est
   cachée — override avec .no-bottom-nav sur le body */
body.no-bottom-nav {
  padding-bottom: 0 !important;
}
body.no-bottom-nav .bottom-nav {
  display: none;
}

/* ---- 3. HIT TARGETS — 60px min ---- */
.nav-item {
  flex: 1;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--m-accent-dark, #A3A39E);
  border-radius: 12px;
  margin: 4px 2px;
  position: relative;
  cursor: pointer;
  /* Tap response sans highlight bleu pourri */
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease;
}
.nav-item:active {
  background: rgba(25, 230, 57, 0.06);
}
.nav-item.active {
  color: var(--m-accent, #F5F5F0);
  background: rgba(25, 230, 57, 0.08);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: var(--m-accent-green, #19E639);
  border-radius: 0 0 3px 3px;
}
.nav-item .label {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;   /* remonté de 9.6 à 10 */
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
}

/* ---- 4. FAB (+) — toujours au centre, safe-area-aware ---- */
.nav-add-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--m-accent-green-2, #2ECC71), var(--m-accent-green, #19E639));
  border: 3px solid var(--m-black, #0A0A0A);
  color: #061a0a;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  /* Se soulève au-dessus de la nav-line sans déborder */
  margin-top: -18px;
  box-shadow: 0 8px 24px -4px rgba(25, 230, 57, 0.5);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-add-btn:active {
  transform: scale(0.94);
}

/* ---- 5. CACHE-AUTOMATIQUE AU CLAVIER ---- */
/* Quand un input est focus sur mobile, iOS/Android réduit la
   viewport height. On utilise ça pour détecter le clavier et
   glisser la nav hors écran. */
@media (max-height: 500px) and (max-width: 900px) {
  .bottom-nav {
    transform: translateY(100%);
    pointer-events: none;
  }
  body,
  .page,
  .page-content,
  main {
    padding-bottom: 12px !important;
  }
}

/* Alternative — classe posée en JS quand un input form est focus */
body.keyboard-open .bottom-nav {
  transform: translateY(100%);
  pointer-events: none;
}
body.keyboard-open {
  padding-bottom: 12px !important;
}

/* ---- 6. MODALS / BOTTOM SHEETS — toujours AU-DESSUS de la nav ---- */
.modal,
.modal-overlay,
.bottom-sheet,
.bottom-sheet-scrim {
  z-index: 600 !important; /* > 100 de la nav, > guided tour wizard (500) */
}

/* Les bottom sheets doivent aussi réserver safe-area */
.bottom-sheet {
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* ---- 7. TRÈS PETITS ÉCRANS (iPhone SE, Galaxy Fold plié) ---- */
@media (max-width: 360px) {
  .bottom-nav {
    height: calc(66px + env(safe-area-inset-bottom, 0px));
  }
  .nav-item {
    min-height: 56px;
  }
  .nav-item .label {
    font-size: 9.5px;
  }
  .nav-add-btn {
    width: 52px;
    height: 52px;
    margin-top: -16px;
  }
  body,
  .page,
  .page-content,
  main {
    padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px) + 10px) !important;
  }
}