/* src/styles-nav.css — shared bottom nav + burger menu (injected by src/nav.js).
   Replaces the old `.nav` block that used to live in styles.css. Navy/cyan theme
   matching the landing + the approved mockup. Included by events.html + news.html
   (and later realestate.html). The call button keeps its LOCKED classes
   (.nav__call / .nav__call-badge / .ico-call / .ico-end / .nav__call-label + the
   is-live state) — voice.js toggles them unchanged; only the styling here is new.
   Chrome layout only; real content styling stays in styles.css / styles-news.css. */

#gnav {
  --gn-navy: #0A1830; --gn-panel: #0C1D3A; --gn-panel2: #0F2547;
  --gn-cyan: #3AD0EC; --gn-blue: #2C6FE0; --gn-text: #E9EFF8; --gn-muted: #93A6C2;
  --gn-line: rgba(255, 255, 255, .11); --gn-green: #25C26B; --gn-green2: #12A150;
  --gn-red: #F0483E; --gn-red2: #D5342B; --gn-ease: cubic-bezier(.22, 1, .36, 1);
  --gn-grad: linear-gradient(120deg, var(--gn-cyan), var(--gn-blue));
}

/* ---- bottom nav (5 slots: Home · Filter · Call FAB · Save · Menu) ---- */
#gnav .nav {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 100%; max-width: var(--phone-w, 430px); height: var(--nav-h, 72px);
  z-index: 6; padding: 0 8px 10px; box-sizing: border-box;
  display: grid; grid-template-columns: 1fr 1fr 84px 1fr 1fr; align-items: end;
  background: linear-gradient(to top, rgba(6, 12, 24, .96) 62%, rgba(6, 12, 24, 0));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  font-family: inherit;
}
#gnav .nav::before { content: ""; position: absolute; left: 8px; right: 8px; top: 12px; height: 1px; background: var(--gn-line); }

#gnav .nav__item {
  -webkit-tap-highlight-color: transparent; background: transparent; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px 4px;
  color: var(--gn-muted); font: inherit; transition: color .16s var(--gn-ease); text-decoration: none;
}
#gnav .nav__item:hover { color: var(--gn-text); }
#gnav .nav__item.is-active { color: var(--gn-cyan); }
#gnav .nav__label { font-size: 11px; font-weight: 600; letter-spacing: .01em; }
#gnav .gic { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 2; }
#gnav .gic-wrap { position: relative; display: inline-flex; }

/* filter badge (events only) */
#gnav .nav__filter-badge {
  position: absolute; top: -5px; right: -7px; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 9px; background: var(--gn-cyan); color: #04121f; font-size: 9.5px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
#gnav .nav__filter-badge[hidden] { display: none; }

/* save toggle state */
#gnav .nav__item--save.saved { color: var(--gn-cyan); }
#gnav .nav__item--save.saved .gic { fill: var(--gn-cyan); }

/* burger → X */
#gnav .gburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 23px; height: 23px; }
#gnav .gburger span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; margin: 0 auto; transition: transform .28s var(--gn-ease), opacity .2s; }
body.gmenu-open #gnav .nav__item--menu { color: var(--gn-cyan); }
body.gmenu-open #gnav .gburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.gmenu-open #gnav .gburger span:nth-child(2) { opacity: 0; }
body.gmenu-open #gnav .gburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- call FAB (LOCKED markup/classes; new elevated styling) ---- */
#gnav .nav__call {
  position: relative; justify-self: center; align-self: end;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: transparent; border: 0; padding: 0; cursor: pointer; font: inherit;
  -webkit-tap-highlight-color: transparent;
}
#gnav .nav__call-badge {
  /* 27 Oct, Rossi: "it might be best to shift it down by 5-10px" — the button rose 18px above the menu's
     edge, which is what forced the long fade above it; 8px lower, so the fade can be half as thick */
  width: 56px; height: 56px; border-radius: 50%; transform: translateY(-10px); display: grid; place-items: center;
  background: linear-gradient(150deg, var(--gn-green), var(--gn-green2));
  box-shadow: 0 12px 26px -8px rgba(37, 194, 107, .6), 0 0 0 6px rgba(37, 194, 107, .12);
  transition: background .2s var(--gn-ease), box-shadow .25s var(--gn-ease), transform .12s var(--gn-ease);
}
#gnav .nav__call:active .nav__call-badge { transform: translateY(-10px) scale(.94); }
#gnav .nav__call-icon { width: 25px; height: 25px; fill: #fff; }
#gnav .nav__call .ico-end { display: none; }
#gnav .nav__call.is-live .ico-call { display: none; }
#gnav .nav__call.is-live .ico-end { display: block; }
#gnav .nav__call.is-live .nav__call-badge {
  background: linear-gradient(150deg, var(--gn-red), var(--gn-red2));
  box-shadow: 0 12px 26px -8px rgba(240, 72, 62, .6), 0 0 0 6px rgba(240, 72, 62, .14);
}
#gnav .nav__call-label { transform: translateY(-6px);   /* follows the badge, 8px lower (27 Oct), so the gap under it is unchanged */ font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #8FE9BE; }
#gnav .nav__call.is-live .nav__call-label { color: #F4A7A1; }
#gnav .nav__call[disabled] { opacity: .7; cursor: default; }

/* ---- scrim + burger sheet ---- */
#gnav .gscrim {
  position: fixed; inset: 0; z-index: 40; background: rgba(3, 7, 14, .55); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--gn-ease);
}
body.gmenu-open #gnav .gscrim { opacity: 1; pointer-events: auto; }
#gnav .gsheet {
  position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 101%); z-index: 41;
  width: 100%; max-width: var(--phone-w, 430px); max-height: 95vh; max-height: 95svh; overflow-y: auto; box-sizing: border-box;   /* 95% like every phone sheet (Rossi, 29 Oct); svh so a keyboard never shrinks it */
  background: linear-gradient(180deg, var(--gn-panel), var(--gn-navy));
  border-top: 1px solid var(--gn-line); border-radius: 22px 22px 0 0;
  padding: 10px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  transition: transform .34s var(--gn-ease); box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, .7); color: var(--gn-text);
}
body.gmenu-open #gnav .gsheet { transform: translate(-50%, 0); }
#gnav .gsheet__grab { width: 38px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .22); margin: 2px auto 12px; }
#gnav .gsheet__head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 4px; }
#gnav .gsheet__head h2 { font-family: 'Bricolage Grotesque', 'Inter', sans-serif; font-weight: 600; font-size: 19px; letter-spacing: -.02em; margin: 0; }
#gnav .gsheet__x { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--gn-line); background: transparent; color: var(--gn-muted); cursor: pointer; display: grid; place-items: center; transition: color .15s, border-color .15s; }
#gnav .gsheet__x:hover { color: var(--gn-text); border-color: rgba(255, 255, 255, .24); }
#gnav .gsheet__x svg { width: 16px; height: 16px; }

/* user row */
#gnav .guser { display: flex; align-items: center; gap: 12px; padding: 12px 8px; margin: 6px 0 4px; }
#gnav .guser__avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--gn-grad); color: #04121f; font-weight: 700; font-size: 16px; font-family: 'Bricolage Grotesque', 'Inter', sans-serif; }
#gnav .guser__who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
#gnav .guser__n { font-weight: 600; font-size: 14.5px; color: var(--gn-text); }
#gnav .guser__e { font-size: 12.5px; color: var(--gn-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* saved destination row */
#gnav .gsaved-row {
  -webkit-tap-highlight-color: transparent; width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 14px; padding: 14px 12px; border-radius: 14px; margin: 2px 0;
  background: rgba(58, 208, 236, .06); border: 1px solid rgba(58, 208, 236, .2); color: var(--gn-text); font: inherit;
  transition: background .15s var(--gn-ease);
}
#gnav .gsaved-row:hover { background: rgba(58, 208, 236, .11); }
#gnav .gsaved-row .gic { width: 22px; height: 22px; stroke: var(--gn-cyan); }
#gnav .gsaved-row__txt { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
#gnav .gsaved-row__t { font-weight: 600; font-size: 15.5px; }
#gnav .gsaved-row__s { font-size: 12px; color: var(--gn-muted); }
#gnav .gsaved-row__count { font-family: 'Bricolage Grotesque', 'Inter', sans-serif; font-weight: 700; font-size: 13px; color: var(--gn-cyan); background: rgba(58, 208, 236, .12); border: 1px solid rgba(58, 208, 236, .3); min-width: 26px; text-align: center; padding: 3px 8px; border-radius: 20px; }
#gnav .gchev { width: 18px; height: 18px; stroke: var(--gn-muted); fill: none; stroke-width: 2; }

/* sections + rows */
#gnav .gsec { margin-top: 12px; }
#gnav .gsec__label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6E80A0; padding: 0 8px; margin-bottom: 4px; }
#gnav .grow {
  -webkit-tap-highlight-color: transparent; width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  box-sizing: border-box;   /* 26 Oct: width 100% plus its padding ran 20px past the sheet's edge, the "ACTUEL" tag with it */
  display: flex; align-items: center; gap: 14px; padding: 13px 10px; border-radius: 12px; color: var(--gn-text);
  font: inherit; font-size: 15.5px; font-weight: 500; text-decoration: none; transition: background .14s var(--gn-ease);
}
#gnav .grow:hover { background: rgba(255, 255, 255, .05); }
#gnav .grow[hidden] { display: none; }   /* 30 Oct: "Inviter des proches" is for signed-in people only */
#gnav .grow .gic { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.9; }
#gnav .grow__grow { flex: 1; }
/* (31 Oct) a second, quieter line under a row's label: "Zin sur WhatsApp" / "Lier ce compte en un geste" */
#gnav .grow__sub { display: block; font-size: 12px; font-weight: 400; color: var(--gn-muted); margin-top: 1px; }
#gnav .grow.current { color: var(--gn-cyan); }
#gnav .grow.is-soon { opacity: .6; }
#gnav .grow.danger:hover { background: rgba(240, 72, 62, .08); }
#gnav .grow.danger:hover .gic { color: var(--gn-red); }
#gnav .gtag { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--gn-cyan); border: 1px solid rgba(58, 208, 236, .34); background: rgba(58, 208, 236, .08); padding: 3px 9px; border-radius: 20px; }
#gnav .gtag--soon { color: var(--gn-muted); border-color: var(--gn-line); background: rgba(255, 255, 255, .04); }
#gnav .gdivider { height: 1px; background: var(--gn-line); margin: 12px 6px 2px; }

/* save toast */
#gnav .gtoast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h, 72px) + 18px); transform: translate(-50%, 10px); z-index: 42;
  opacity: 0; pointer-events: none; padding: 9px 16px; border-radius: 24px; white-space: nowrap;
  background: rgba(8, 18, 38, .92); border: 1px solid rgba(58, 208, 236, .4); backdrop-filter: blur(10px);
  font-size: 13px; font-weight: 600; color: var(--gn-text); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .7);
  transition: opacity .25s var(--gn-ease), transform .25s var(--gn-ease);
}
#gnav .gtoast.show { opacity: 1; transform: translate(-50%, 0); }

/* news category chips: brief highlight when the nav Filter button points at them */
.news-cats.gflash { animation: gflash 0.9s var(--gn-ease, ease); }
@keyframes gflash { 0%, 100% { box-shadow: none; } 40% { box-shadow: 0 0 0 2px rgba(58, 208, 236, .5); } }

#gnav :focus-visible { outline: 2px solid var(--gn-cyan); outline-offset: 2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { #gnav * { transition: none !important; animation: none !important; } }