/* TradyGo — Shared mobile navigation styling.
 *
 * Used by:
 *  • mobile-nav.js (auto-injected on every secondary page)
 *  • index.html (uses the same `.mobile-burger` + `.mobile-menu` classes)
 *
 * The CSS is mobile-first: <= 920px shows the burger + dropdown; above that
 * the burger is hidden so the desktop nav remains intact.
 */

/* ── Burger button ─────────────────────────────────────────────────── */
.mobile-burger{
  display:none;                /* Hidden on desktop */
  align-items:center;
  justify-content:center;
  width:42px;height:42px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:10px;
  background:rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.85);
  cursor:pointer;
  margin-left:8px;
  transition:background .15s ease, border-color .15s ease;
  flex-shrink:0;
}
.mobile-burger:hover{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.18);
}
.mobile-burger.is-open{
  background:rgba(62,207,142,0.12);
  border-color:rgba(62,207,142,0.4);
  color:#3ECF8E;
}
.mobile-burger svg{ display:block; }

/* ── Slide-down menu panel ─────────────────────────────────────────── */
.mobile-menu{
  display:none;                /* Hidden until mobile breakpoint */
  position:fixed;
  top:64px;left:0;right:0;
  /* iOS Safari fix: 100vh INCLUDES the bottom toolbar, so the menu
     would end UNDER the Safari toolbar and the language picker at the
     bottom was unreachable (real bug report, screenshot Feb 2026).
     `100dvh` (dynamic viewport height) adapts to Safari's shrinking
     viewport. Older browsers fall back to the original 100vh rule. */
  max-height:calc(100vh - 64px);
  max-height:calc(100dvh - 64px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:rgba(5,8,13,0.97);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,0.05);
  /* iOS safe-area buffer: respect the home indicator + Safari toolbar
     so the last menu item (language picker) is always tappable. */
  padding:20px 22px max(48px, calc(env(safe-area-inset-bottom) + 32px)) 22px;
  z-index:998;
  transform:translateY(-12px);
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  transition:opacity .18s ease, transform .22s ease, visibility 0s linear .22s;
}
.mobile-menu.open{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  visibility:visible;
  transition:opacity .18s ease, transform .22s ease, visibility 0s linear 0s;
}
.mobile-menu a{
  display:block;
  padding:14px 4px;
  font-weight:500;
  font-size:16px;
  color:rgba(255,255,255,0.85);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:color .12s ease, padding-left .15s ease;
}
.mobile-menu a:last-of-type{ border-bottom:none; }
.mobile-menu a:hover{ color:#fff; padding-left:8px; }
.mobile-menu a.is-active{
  color:#3ECF8E;
  font-weight:600;
}
.mobile-menu a.is-active::before{
  content:"";
  display:inline-block;
  width:6px;height:6px;
  background:#3ECF8E;
  border-radius:50%;
  margin-right:10px;
  vertical-align:middle;
  box-shadow:0 0 8px #3ECF8E;
}
.mobile-menu .mobile-menu-footer{
  margin-top:12px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,0.10);
  color:#3ECF8E;
  font-weight:600;
}
.mobile-menu .mobile-menu-footer.is-active{
  color:#3ECF8E;
}

/* Prevent body scroll when menu is open */
body.tg-mobile-menu-open{ overflow:hidden; }

/* ── Show burger + menu only on mobile ─────────────────────────────── */
@media (max-width: 920px){
  .mobile-burger{ display:inline-flex; }
  .mobile-menu{ display:block; }

  /* Hide duplicate desktop language selector on mobile — the new
     dropdown inside the menu makes it redundant and saves precious
     header space on small screens. */
  .lang-selector,
  .lang-selector-placeholder{ display:none !important; }

  /* "Retour à l'accueil" link is redundant on mobile: the burger menu
     already exposes "Accueil" / "Home". Keeping it in the header would
     overlap with the brand name on small viewports. */
  .nav-back{ display:none !important; }

  /* CTA buttons in the navbar shrink to fit cleanly with the burger. */
  .nav-cta,
  .nav-inner .btn-primary,
  .nav-inner a.btn{
    padding:8px 14px !important;
    font-size:13px !important;
  }

  /* Hide the desktop "Mon compte" button on mobile — already present in
     the burger menu footer (mobile-nav.js), so it would be a duplicate
     and would crowd the header on narrow viewports. */
  .nav-mon-compte-btn{ display:none !important; }
}

/* On very small viewports (iPhone SE etc.), make sure the dropdown doesn't
   overflow horizontally and offer a tiny extra bottom safe-area buffer. */
@media (max-width: 420px){
  .mobile-menu{
    padding:18px 18px max(56px, calc(env(safe-area-inset-bottom) + 40px)) 18px;
  }
}