/* ======================================================
   NOVTINIS — NAV MOBILE CLIENT : BASE COMMUNE
   ------------------------------------------------------
   Une seule base CSS :
   .nt-client-bottom-nav-h145

   Chaque page garde ses propres liens.
   Toutes les navs client ont le même formatage.
   Hauteur compacte : 58px.
====================================================== */

html body .nt-client-bottom-nav-h145 {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -4px !important;
  z-index: 1100 !important;
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  padding: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  background: rgba(255,255,255,.97) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(226,232,240,.9) !important;
  box-shadow: 0 -6px 18px rgba(15,23,42,.055) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  overflow: visible !important;
  transform: none !important;
}

/* Liens */
html body .nt-client-bottom-nav-h145 .nt-client-bottom-nav-link-h145,
html body .nt-client-bottom-nav-h145 .app-bottom-link {
  position: relative !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  color: #64748b !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Noto Sans Khmer", "Segoe UI", sans-serif !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  overflow: visible !important;
}

/* États */
html body .nt-client-bottom-nav-h145 .nt-client-bottom-nav-link-h145:hover,
html body .nt-client-bottom-nav-h145 .nt-client-bottom-nav-link-h145:focus,
html body .nt-client-bottom-nav-h145 .nt-client-bottom-nav-link-h145.is-active,
html body .nt-client-bottom-nav-h145 .app-bottom-link:hover,
html body .nt-client-bottom-nav-h145 .app-bottom-link:focus,
html body .nt-client-bottom-nav-h145 .app-bottom-link.is-active {
  color: #2563eb !important;
}

/* Icônes */
html body .nt-client-bottom-nav-h145 .nt-client-bottom-nav-icon-h145,
html body .nt-client-bottom-nav-h145 .app-bottom-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: currentColor !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

html body .nt-client-bottom-nav-h145 .nt-client-bottom-nav-icon-h145 svg,
html body .nt-client-bottom-nav-h145 .app-bottom-icon svg {
  width: 21px !important;
  height: 21px !important;
  display: block !important;
  fill: currentColor !important;
  color: currentColor !important;
}

/* Labels */
html body .nt-client-bottom-nav-h145 .nt-client-bottom-nav-label-h145,
html body .nt-client-bottom-nav-h145 .app-bottom-label {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 10.5px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  color: currentColor !important;
  white-space: nowrap !important;
  text-align: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* ======================================================
   Bouton central commun : Offres / Ajouter / Scan
====================================================== */

html body .nt-client-bottom-nav-h145 .nt-client-bottom-nav-center-h145 {
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  overflow: visible !important;
}

html body .nt-client-bottom-nav-h145 .nt-client-bottom-nav-center-h145:hover,
html body .nt-client-bottom-nav-h145 .nt-client-bottom-nav-center-h145:focus,
html body .nt-client-bottom-nav-h145 .nt-client-bottom-nav-center-h145.is-active {
  color: #fff !important;
}

/* Cercle orange */
html body .nt-client-bottom-nav-h145 .nt-client-bottom-nav-center-icon-h145,
html body .nt-client-bottom-nav-h145 .nt-client-bottom-nav-center-h145 > .app-bottom-icon {
  position: relative !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  max-width: 58px !important;
  max-height: 58px !important;
  margin: -22px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #ff4b35, #ff6a2a) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(255,75,53,.24) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  overflow: hidden !important;
  line-height: 1 !important;
  transform: none !important;
  z-index: 2 !important;
}

/* Symbole central */
html body .nt-client-bottom-nav-h145 .nt-client-bottom-nav-center-symbol-h145 {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  transform: none !important;
  color: #fff !important;
}

html body .nt-client-bottom-nav-h145 .nt-client-bottom-nav-center-symbol-h145 svg,
html body .nt-client-bottom-nav-h145 .nt-client-bottom-nav-center-symbol-h145 img {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  fill: currentColor !important;
  color: #fff !important;
  object-fit: contain !important;
}

html body .nt-client-bottom-nav-h145 .nt-client-bottom-nav-center-symbol-h145 img {
  filter: brightness(0) invert(1) !important;
}

/* Label central */
html body .nt-client-bottom-nav-h145 .nt-client-bottom-nav-center-icon-h145 .app-bottom-label,
html body .nt-client-bottom-nav-h145 .nt-client-bottom-nav-center-icon-h145 .nt-client-bottom-nav-label-h145 {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 54px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: none !important;
}

html body,
html body.home,
html body.front-page {
  padding-bottom: max(64px, env(safe-area-inset-bottom)) !important;
}

@media (max-width: 390px) {
  html body .nt-client-bottom-nav-h145 .nt-client-bottom-nav-label-h145,
  html body .nt-client-bottom-nav-h145 .app-bottom-label {
    font-size: 9.8px !important;
  }

  html body .nt-client-bottom-nav-h145 .nt-client-bottom-nav-center-icon-h145 .app-bottom-label,
  html body .nt-client-bottom-nav-h145 .nt-client-bottom-nav-center-icon-h145 .nt-client-bottom-nav-label-h145 {
    font-size: 10px !important;
  }
}


/* NOVTINIS — Garde-fou visibilité navigation basse client */
nav.nt-client-bottom-nav-h145,
nav.app-bottom-nav.nt-client-bottom-nav-h145 {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}


/* ======================================================
   AUTORITÉ FINALE — UNE SEULE NAV BASSE POUR TOUTES LES PAGES
   Le modèle visuel est celui de la page d’accueil.
====================================================== */

html body nav.app-bottom-nav.nt-client-bottom-nav-h145 {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  border-radius: 0 !important;
  transform: none !important;
}

html body nav.app-bottom-nav.nt-client-bottom-nav-h145 > a,
html body nav.app-bottom-nav.nt-client-bottom-nav-h145 > button {
  font: inherit !important;
}

html body nav.app-bottom-nav.nt-client-bottom-nav-h145 > button {
  outline: 0 !important;
}


/* ======================================================
   POSITIONNEMENT STRICT COMMUN
   ------------------------------------------------------
   Aucune page ne doit déplacer les icônes ou les libellés.
   Les cinq cellules utilisent exactement la même géométrie.
====================================================== */

html body nav.app-bottom-nav.nt-client-bottom-nav-h145 {
  bottom: -4px !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  padding: 0 !important;
  border-top: 1px solid rgba(226,232,240,.9) !important;
  box-shadow: 0 -6px 18px rgba(15,23,42,.055) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

html body nav.app-bottom-nav.nt-client-bottom-nav-h145
> .nt-client-bottom-nav-link-h145 {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  box-sizing: border-box !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  transform: none !important;
  vertical-align: middle !important;
}

html body nav.app-bottom-nav.nt-client-bottom-nav-h145
> .nt-client-bottom-nav-link-h145:not(
  .nt-client-bottom-nav-center-h145
)
> .nt-client-bottom-nav-icon-h145 {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 22px !important;
  align-self: center !important;
  transform: none !important;
}

html body nav.app-bottom-nav.nt-client-bottom-nav-h145
> .nt-client-bottom-nav-link-h145:not(
  .nt-client-bottom-nav-center-h145
)
> .nt-client-bottom-nav-label-h145 {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  height: 11px !important;
  min-height: 11px !important;
  max-height: 11px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 11px !important;
  flex: 0 0 11px !important;
  align-self: center !important;
  transform: none !important;
}

html body nav.app-bottom-nav.nt-client-bottom-nav-h145
.nt-client-bottom-nav-icon-h145 svg {
  position: static !important;
  margin: 0 !important;
  transform: none !important;
  vertical-align: top !important;
}


/* Desktop : la navigation basse reste un outil mobile. */
@media (min-width: 900px) {
  html body,
  html body.home,
  html body.front-page { padding-bottom: 0 !important; }

  nav.nt-client-bottom-nav-h145,
  nav.app-bottom-nav.nt-client-bottom-nav-h145 { display: none !important; }
}