/* ======================================================
   NOVTINIS — LOT 110 : NAVIGATION BASSE MOBILE HARMONISÉE
   ------------------------------------------------------
   - Les liens restent propres à chaque contexte/page.
   - Une seule géométrie commune pour toutes les navs client.
   - Échelle fluide entre petits smartphones et Pixel 10 Pro.
   - Safe-area incluse une seule fois.
   - Les espaces commerçant dédiés restent hors périmètre.
====================================================== */

@media (max-width: 899px) {
  html {
    --nt-client-nav-height: clamp(64px, 17vw, 70px);
    --nt-client-nav-label-size: clamp(10px, 2.9vw, 12px);
    --nt-client-nav-center-size: clamp(58px, 15vw, 62px);
    --nt-client-nav-center-shift: clamp(-24px, -5.8vw, -21px);
  }

  html body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304),
  html body nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304) {
    position: fixed !important;
    inset: auto 0 0 !important;
    z-index: 1100 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: calc(var(--nt-client-nav-height) + env(safe-area-inset-bottom)) !important;
    min-height: calc(var(--nt-client-nav-height) + env(safe-area-inset-bottom)) !important;
    max-height: calc(var(--nt-client-nav-height) + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    padding: 0 0 env(safe-area-inset-bottom) !important;
    border: 0 !important;
    border-top: 1px solid rgba(226, 232, 240, .9) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 -6px 18px rgba(15, 23, 42, .055) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
  }

  html[lang^="km"] body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304),
  html[lang^="km"] body nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304) {
    font-family: "Noto Sans Khmer", system-ui, sans-serif !important;
  }

  html body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  > .nt-client-bottom-nav-link-h145,
  html body nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  > .nt-client-bottom-nav-link-h145 {
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    height: var(--nt-client-nav-height) !important;
    min-height: var(--nt-client-nav-height) !important;
    max-height: var(--nt-client-nav-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #64748b !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
    font: inherit !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  /* Lot 125 : sur écran tactile, :focus/:hover ne représentent pas l’onglet
     réellement actif. Les conserver en bleu faisait apparaître deux onglets
     actifs pendant une navigation réseau. */
  html body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  > .nt-client-bottom-nav-link-h145.is-active,
  html body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  > .nt-client-bottom-nav-link-h145[aria-current="page"],
  html body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  > .nt-client-bottom-nav-link-h145.is-navigation-pending {
    color: #2563eb !important;
  }

  html body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  > .nt-client-bottom-nav-link-h145:focus {
    outline: none !important;
  }

  html body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  > .nt-client-bottom-nav-link-h145:focus-visible {
    outline: 2px solid rgba(37, 99, 235, .38) !important;
    outline-offset: -4px !important;
  }

  @media (hover: hover) and (pointer: fine) {
    html body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
    > .nt-client-bottom-nav-link-h145:hover {
      color: #2563eb !important;
    }
  }

  html body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  > .nt-client-bottom-nav-link-h145:not(.nt-client-bottom-nav-center-h145)
  > .nt-client-bottom-nav-icon-h145 {
    position: static !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;
    color: currentColor !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 22px !important;
    line-height: 1 !important;
    transform: none !important;
  }

  html body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  .nt-client-bottom-nav-icon-h145 svg {
    position: static !important;
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    min-height: 21px !important;
    max-width: 21px !important;
    max-height: 21px !important;
    margin: 0 !important;
    display: block !important;
    fill: currentColor !important;
    color: currentColor !important;
    transform: none !important;
  }

  html body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  .nt-client-bottom-nav-label-h145,
  html body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  .app-bottom-label {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 12px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: currentColor !important;
    font-family: inherit !important;
    font-size: calc(var(--nt-client-nav-label-size) + var(--nt-km-font-boost, 0px)) !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  html[lang^="km"] body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  .nt-client-bottom-nav-label-h145,
  html[lang^="km"] body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  .app-bottom-label {
    font-size: calc(clamp(11.5px, 3.15vw, 13px) + var(--nt-km-font-boost, 0px)) !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
  }

  /* Bouton central commun : Offres / Ajouter. */
  html body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  > .nt-client-bottom-nav-center-h145 {
    color: #fff !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  html body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  > .nt-client-bottom-nav-center-h145.is-active,
  html body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  > .nt-client-bottom-nav-center-h145[aria-current="page"],
  html body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  > .nt-client-bottom-nav-center-h145.is-navigation-pending {
    color: #fff !important;
  }

  html body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  .nt-client-bottom-nav-center-icon-h145,
  html body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  .nt-client-bottom-nav-center-h145 > .app-bottom-icon {
    position: relative !important;
    width: var(--nt-client-nav-center-size) !important;
    height: var(--nt-client-nav-center-size) !important;
    min-width: var(--nt-client-nav-center-size) !important;
    min-height: var(--nt-client-nav-center-size) !important;
    max-width: var(--nt-client-nav-center-size) !important;
    max-height: var(--nt-client-nav-center-size) !important;
    margin: var(--nt-client-nav-center-shift) 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;
  }

  html body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  .nt-client-bottom-nav-center-symbol-h145,
  html body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  .nt-client-bottom-nav-center-symbol-h145 svg,
  html body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  .nt-client-bottom-nav-center-symbol-h145 img {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    min-height: 23px !important;
    max-width: 23px !important;
    max-height: 23px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    fill: currentColor !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    object-fit: contain !important;
    transform: none !important;
  }

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

  html body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  .nt-client-bottom-nav-center-icon-h145 .nt-client-bottom-nav-label-h145,
  html body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  .nt-client-bottom-nav-center-icon-h145 .app-bottom-label {
    max-width: calc(var(--nt-client-nav-center-size) - 6px) !important;
    min-height: 0 !important;
    color: #fff !important;
    font-size: calc(var(--nt-client-nav-label-size) + var(--nt-km-font-boost, 0px)) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    pointer-events: none !important;
  }

  html[lang^="km"] body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  .nt-client-bottom-nav-center-icon-h145 .nt-client-bottom-nav-label-h145,
  html[lang^="km"] body nav.app-bottom-nav.nt-client-bottom-nav-h145:not(.nt-client-bottom-nav-merchant-h304)
  .nt-client-bottom-nav-center-icon-h145 .app-bottom-label {
    font-size: calc(clamp(11px, 3vw, 12.5px) + var(--nt-km-font-boost, 0px)) !important;
    line-height: 1.15 !important;
  }

  /* La feuille n'est chargée que sur les pages qui rendent la navigation. */
  html body {
    padding-bottom: calc(var(--nt-client-nav-height) + 6px + env(safe-area-inset-bottom)) !important;
  }
}

@media (min-width: 900px) {
  html body nav.nt-client-bottom-nav-h145,
  html body nav.app-bottom-nav.nt-client-bottom-nav-h145 {
    display: none !important;
  }
}


/* ======================================================
   LOT 358 — CANDIDAT 103 — SAFE BOTTOM PRIVÉ FACTORISÉ
   ------------------------------------------------------
   La bottom-nav réserve déjà sa hauteur réelle au niveau du body
   (+6 px). Les écrans privés ajoutent seulement 30 px de confort
   dans leur conteneur de contenu : au total, le dernier contrôle
   peut remonter à ~36 px au-dessus de la barre, sans grand vide.
   Une seule règle commune remplace les réserves historiques 70–150 px.
====================================================== */
@media (max-width: 899px) {
  html {
    --nt-private-content-bottom-gap: 30px;
    --nt-private-scroll-bottom-safe: calc(var(--nt-client-nav-height, 70px) + 36px + env(safe-area-inset-bottom));
  }

  /* Mon compte / Espace membre / sous-pages Compte. */
  html body .seva-account-page > .seva-account-shell > .seva-account-content,
  html body .seva-account-page > .seva-account-shell > .nt-account-detail-v2-page {
    padding-bottom: var(--nt-private-content-bottom-gap) !important;
    scroll-padding-bottom: var(--nt-private-scroll-bottom-safe) !important;
  }

  /* Favoris lorsqu'il est ouvert comme sous-espace privé. */
  html body .fav-app.nt-favorites-account-context {
    padding-bottom: var(--nt-private-content-bottom-gap) !important;
    scroll-padding-bottom: var(--nt-private-scroll-bottom-safe) !important;
  }

  /* Dashboard Novtiniseur propriétaire uniquement. */
  html body .nt-novtiniseur-dashboard-page.is-owner-dashboard .nt-novtiniseur-dashboard-shell {
    padding-bottom: var(--nt-private-content-bottom-gap) !important;
    scroll-padding-bottom: var(--nt-private-scroll-bottom-safe) !important;
  }

  /* Espace commerçant : anciennes et nouvelles vues partagent la même réserve. */
  html body .merchant-page:not(.nt-merchant-modern-page) {
    padding-bottom: 0 !important;
  }
  html body .merchant-page:not(.nt-merchant-modern-page) > .merchant-shell {
    padding-bottom: var(--nt-private-content-bottom-gap) !important;
    scroll-padding-bottom: var(--nt-private-scroll-bottom-safe) !important;
  }
  html body .nt-merchant-modern-page {
    padding-bottom: 0 !important;
  }
  html body .nt-merchant-modern-page .nt-merchant-modern-content {
    padding-bottom: var(--nt-private-content-bottom-gap) !important;
    scroll-padding-bottom: var(--nt-private-scroll-bottom-safe) !important;
  }


  /* Modifier la fiche commerçant : même contrat de fin de scroll. */
  html body .nt-edit-page:not(.is-community-contribution-mode) {
    padding-bottom: 0 !important;
    scroll-padding-bottom: var(--nt-private-scroll-bottom-safe) !important;
  }
  html body .nt-edit-page:not(.is-community-contribution-mode) > .nt-edit-card {
    padding-bottom: var(--nt-private-content-bottom-gap) !important;
  }

  /* Contenus & présentation (service Fiche avancée) : même contrat privé. */
  html body .nt-fiche-pro-page.nt-fiche-pro-page--modern {
    padding-bottom: 0 !important;
    scroll-padding-bottom: var(--nt-private-scroll-bottom-safe) !important;
  }
  html body .nt-fiche-pro-page.nt-fiche-pro-page--modern > .nt-fiche-pro-card {
    padding-bottom: var(--nt-private-content-bottom-gap) !important;
  }
}