:root { --nav-h: 68px; }
  .gk-nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:100;
    display:flex;align-items:center;justify-content:space-between;padding:0 24px;
    background:var(--overlay-bg,rgba(255,255,255,.92));backdrop-filter:blur(18px);
    border-bottom:1px solid var(--border,rgba(0,0,0,.08))}
  .gk-nav-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--text);text-decoration:none}
  .gk-nav-center{display:flex;align-items:stretch;gap:2px;height:100%}
  /* Right cluster — every button (lang / theme / connect / crank /
     signed-in auth trigger) shares the same .gk-nav-btn baseline now,
     so the cluster just lays them out with a tight gap. The auth
     trigger's filled-pill carve-out was retired 2026-05-04 (ADR 0018
     addendum #4). */
  .gk-nav-actions{display:flex;align-items:center;gap:2px;height:100%}

  /* Le Monde-style stacked button: icon on top, tiny label below.
     Applies uniformly to every link in the center cluster AND every
     action button on the right (lang, theme, pinned features…). */
  .gk-nav-link, .gk-nav-btn {
    position: relative;  /* anchor the ::before hover/active pill */
    display: inline-flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px;
    /* min-height = 36px = touch-target floor. Center buttons with
       icon+label stacked render at ~39px; right-cluster icon-only
       buttons hit exactly 36px. The visible hover/active background
       is decoupled from this via ::before below — rendered at a fixed
       36px regardless of button height — so the painted rectangle is
       uniform across both clusters (ADR 0018 navigation contract,
       addendum 2026-05-04 #3). */
    min-width: 44px; min-height: 36px; padding: 4px 6px;
    background: transparent; border: none; cursor: pointer;
    color: var(--text2, #64748b);
    text-decoration: none; font-family: inherit;
    font-size: 10px; font-weight: 600;
    letter-spacing: .2px; line-height: 1.1;
    border-radius: var(--radius-sm, 8px);
    transition: color .15s;
  }
  /* Background pill — fixed 36px tall, centered vertically inside the
     button regardless of the button's actual content height. Drives
     hover (transient) and is-active (persistent) painting. Sits behind
     the icon/label via z-index so transparent gear strokes don't smear. */
  .gk-nav-link::before, .gk-nav-btn::before {
    content: ''; position: absolute;
    top: 50%; left: 0; right: 0; height: 36px;
    transform: translateY(-50%);
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    transition: background .15s;
    z-index: 0;
  }
  .gk-nav-link > *, .gk-nav-btn > * { position: relative; z-index: 1; }
  /* Hover (transient), focus-visible (keyboard navigation, same paint
     as hover so Tab users see the same affordance), and active
     (persistent) all paint the same pseudo-pill — sticky-hover idiom
     (= "you are here"). Active additionally tints the text/icon with
     --accent. Selector list covers both clusters: .gk-nav-link (center)
     AND .gk-nav-btn (right — including the features crank when on
     /features). */
  .gk-nav-link:hover::before, .gk-nav-btn:hover::before,
  .gk-nav-link:focus-visible::before, .gk-nav-btn:focus-visible::before,
  .gk-nav-link.is-active::before, .gk-nav-link[aria-current="page"]::before,
  .gk-nav-btn.is-active::before, .gk-nav-btn[aria-current="page"]::before {
    background: var(--surface-hover, rgba(0,0,0,.05));
  }
  .gk-nav-link:hover, .gk-nav-btn:hover {
    color: var(--text, #1a1a2e);
    text-decoration: none;  /* see `<a>:hover` UA-underline note */
  }
  /* Suppress focus rings on nav buttons. The pill (hover/active) IS
     the affordance — adding a separate outline on top renders a
     second rectangle outside the pill and looks like "double bg".
     Keyboard a11y is preserved by the pill itself: the focused button
     gets the same surface-hover tint via :hover-equivalent state in
     all modern browsers; users who Tab through see the pill move. */
  .gk-nav-link:focus, .gk-nav-btn:focus,
  .gk-nav-link:focus-visible, .gk-nav-btn:focus-visible { outline: none; }
  .gk-nav-link i, .gk-nav-btn i {
    font-size: 16px; line-height: 1;
    margin: 0 !important;  /* override any inline margin-right shipped from older markup */
  }
  /* Anon connect CTA — ADR 0018 Addendum #7 (supersedes #6). Three-
     state ladder for every right-cluster sibling:
       rest:   transparent pseudo-pill (geometry only, ink-color icon)
       hover:  --surface-hover fill (Addendum #3)
       active/CTA: full --accent fill, on-accent ink
     Anon connect is permanently in the active/CTA state — it's the
     row's primary action. The full fill makes it the unmissable
     hot spot, identical visual weight to FR/EN's active pill. */
  .gk-nav-btn--cta-anon { color: #fff; }
  .gk-nav-btn--cta-anon::before {
    background: var(--accent, #e07a5f);
    opacity: 1;
  }
  .gk-nav-btn--cta-anon:hover { color: #fff; }
  .gk-nav-btn--cta-anon:hover::before {
    background: var(--accent-hover, var(--accent, #c96a50));
  }

  /* Features crank — gear rotates continuously while hovered, returns
     to 0deg smoothly on hover-out. Scoped via .fa-gear so the lang
     globe / theme moon / connect door icons in the same cluster don't
     pick up the animation. */
  .gk-nav-btn .fa-gear { transition: transform .35s ease; }
  .gk-nav-btn:hover .fa-gear { animation: gk-crank-spin 2s linear infinite; }
  @keyframes gk-crank-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  /* Lang "next-locale" hint — absolute-positioned so the icon stays at
     the button's centroid instead of being pushed up by the label
     beneath it. Keeps icon Y-baseline identical across lang/theme/
     connect even though only lang carries a hint. Pointer-events:none
     so the hint never steals click focus from the button. */
  .gk-nav-btn--has-hint { position: relative; }
  .gk-lang-hint {
    position: absolute; left: 0; right: 0; bottom: 1px;
    text-align: center; font-size: 8.5px; font-weight: 700;
    letter-spacing: .4px; line-height: 1;
    color: var(--text3, #94a3b8);
    pointer-events: none;
  }
  /* Active state — accent ink on text + icon, complementing the
     persistent pill painted by ::before above. `i` is targeted
     explicitly because FontAwesome icons usually inherit `color` but
     some products override it on `i`. Both clusters covered. */
  .gk-nav-link.is-active, .gk-nav-link[aria-current="page"],
  .gk-nav-link.is-active i, .gk-nav-link[aria-current="page"] i,
  .gk-nav-btn.is-active, .gk-nav-btn[aria-current="page"],
  .gk-nav-btn.is-active i, .gk-nav-btn[aria-current="page"] i {
    color: var(--accent, #3b82f6);
  }

  /* Lang switch — show the <span data-lang="X"> that matches <html lang>. */
  .tr > [data-lang] { display: none; }
  html[lang="fr"] .tr > [data-lang="fr"],
  html[lang="en"] .tr > [data-lang="en"] { display: inline; }
  /* Fallback when no lang set — default to French. */
  html:not([lang="fr"]):not([lang="en"]) .tr > [data-lang="fr"] { display: inline; }

  /* Per-feature header shortcut — feat-color ink on text + icon only.
     The pill background is the SAME shared --surface-hover that every
     other nav-link gets (via the base .gk-nav-link::before rule
     above). One pill style for every center button kills the
     cascade-conflict that produced the "double bg" complaint. */
  .gk-nav-feat-header { color: var(--feat-color, var(--text2, #64748b)); }
  .gk-nav-feat-header:hover { color: var(--feat-color, var(--text)); }
  .gk-nav-feat-header i { color: var(--feat-color, inherit); }
  /* Selected pinned shortcut — feat-color ink on text + icon. Pill
     comes from the base .is-active rule (--surface-hover); per-feat
     differentiation is the text/icon colour, not the pill tint. */
  .gk-nav-feat-header.is-active,
  .gk-nav-feat-header.is-active i {
    color: var(--feat-color, var(--accent, #3b82f6));
  }

  /* Features entry — accent-coloured. */
  .gk-nav-link--features { color: var(--accent, #3b82f6); }
  .gk-nav-link--features:hover { color: var(--accent-hover, var(--accent, #3b82f6)); }
  .gk-nav-link--features i { color: var(--accent, #3b82f6); }

  /* Long nav labels truncate so a 12-char product name doesn't blow up the row. */
  .gk-nav-link > span,
  .gk-nav-btn > span {
    max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* ── Tablets ── Slim down padding; labels stay (that's the whole
     point of this layout). Hide pinned-feature shortcuts to keep the
     bar from overflowing on 7-9 inch screens. */
  @media (max-width: 900px) {
    .gk-nav-feat-header { display: none; }
    .gk-nav-link, .gk-nav-btn { min-width: 48px; padding: 4px 6px; }
  }

  /* ── Phones ── Tighten the bar and the auth pill, but keep icons +
     labels for every action button. */
  @media (max-width: 640px) {
    :root { --nav-h: 60px; }
    .gk-nav { padding: 0 12px; gap: 4px; }
    .gk-nav-brand .gk-gradient,
    .gk-nav-brand span { display: none; }
    .gk-nav-brand svg { width: 30px; height: 30px; }
    .gk-nav-link, .gk-nav-btn { min-width: 44px; padding: 3px 5px; font-size: 9.5px; }
    .gk-nav-link i, .gk-nav-btn i { font-size: 14px; }
    /* Auth pill: keep avatar + logout, drop firstname + role text. */
    .gk-auth--out .gk-auth-text { display: none; }
    .gk-auth--out .gk-auth-main { padding: 0; }
    .gk-auth-av { width: 28px; height: 28px; font-size: 12px; }
    .gk-auth-out { width: 26px; height: 26px; font-size: 13px; }
  }

  /* ── Very small phones ── extra-tight tracking. */
  @media (max-width: 380px) {
    .gk-nav { padding: 0 8px; }
    .gk-nav-brand svg { width: 26px; height: 26px; }
    .gk-nav-link, .gk-nav-btn { min-width: 40px; padding: 3px 4px; }
  }