/* ============================================================
   WOUGGO V2 — Bottom Navigation — pill flottant
   Surcharge components.css — utilise !important où nécessaire
   ============================================================ */

/* ── Conteneur ────────────────────────────────────────────── */
.bottom-nav {
  position: fixed !important;
  bottom: 16px !important;
  left: 16px !important;
  right: 16px !important;
  height: 66px !important;
  background: #ffffff !important;
  border-top: none !important;
  border-radius: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  z-index: 200 !important;
  padding: 0 10px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
}

body { padding-bottom: 96px; }

/* ── Item inactif — cercle crème ──────────────────────────── */
.bottom-nav .bottom-nav__item {
  flex: none !important;
  flex-direction: row !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  border-radius: 50% !important;
  background: #f5ede9 !important;
  color: #532822 !important;
  padding: 0 !important;
  gap: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  text-decoration: none !important;
  position: relative !important;
  transition: transform 0.15s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

.bottom-nav .bottom-nav__item:active {
  transform: scale(0.90) !important;
}

/* ── Icône SVG inactif ────────────────────────────────────── */
.bottom-nav .bnav-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

.bottom-nav .bnav-icon svg {
  width: 21px !important;
  height: 21px !important;
  stroke: #532822 !important;
  fill: none !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
}

/* ── Item ACTIF — cercle orange ───────────────────────────── */
.bottom-nav .bottom-nav__item.active {
  background: #F97316 !important;
  border-radius: 50% !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  gap: 0 !important;
  justify-content: center !important;
  color: #ffffff !important;
}

.bottom-nav .bottom-nav__item.active .bnav-icon svg {
  stroke: #ffffff !important;
}

/* Label masqué */
.bnav-label { display: none !important; }

/* ── FAB central — même niveau que les autres ─────────────── */
.bottom-nav .bottom-nav__item.bnav-center {
  background: #F97316 !important;
  border-radius: 50% !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.bottom-nav .bnav-fab {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  background: transparent !important;
  border-radius: 50% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}

.bottom-nav .bnav-fab svg {
  width: 21px !important;
  height: 21px !important;
  transform: translateY(1px);  /* compense la queue de la bulle message */
  stroke: #ffffff !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.bottom-nav .bottom-nav__item.bnav-center:active {
  transform: scale(0.90) !important;
}

/* ── Badge ────────────────────────────────────────────────── */
.bottom-nav .bottom-nav__badge {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  background: #EF4444 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 16px !important;
  height: 16px !important;
  border-radius: 99px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 3px !important;
}

/* ── Desktop ──────────────────────────────────────────────── */
@media (min-width: 768px) {
  .bottom-nav { display: none !important; }
  body { padding-bottom: 0; }
}


/* ============================================================
   MOBILE HEADER — identique à inscription.html
   ============================================================ */

/* Masqué par défaut (desktop) */
.mobile-header {
  display: none !important;
}

@media (max-width: 767px) {
  /* Afficher le mobile-header */
  .mobile-header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: .875rem 1.25rem;
    background: #fff;
    border-bottom: 1px solid #E5E7EB;
    position: sticky;
    top: 0;
    z-index: 50;
  }

  /* Masquer les headers desktop sur mobile */
  .flux-header,
  .chat-header {
    display: none !important;
  }
}