/**
 * Topbar standard newzkriva — partagé entre toutes les pages publiques.
 * Calqué sur .zk-search de shell.css.
 *
 * Tokenisé sur les variables du design system (--color-*, émises par
 * assets/css/tailwind/compiled.css et re-mappées par thème dans
 * assets/css/_zk_new/tokens.css). Les fallbacks = palette light historique,
 * pour les pages qui ne chargent pas le build Tailwind (avis, tarifs…).
 */

.zk-tb {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in oklab, var(--color-bg, #FAF8F4) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line, #E5E0D6);
  font-family: var(--font-body, 'Geist', system-ui, sans-serif);
}
.zk-tb-wrap {
  max-width: 1280px; margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex; align-items: center;
  gap: clamp(14px, 1.8vw, 24px); /* se resserre avant de faire déborder les CTA */
}
@media (min-width: 1024px) { .zk-tb-wrap { padding: 0 40px; } }

/* Brand */
.zk-tb-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex-shrink: 0; }
.zk-tb-logo-img {
  height: 36px;
  width: auto;
  display: block;
  transition: opacity .15s;
}
.zk-tb-brand:hover .zk-tb-logo-img { opacity: .85; }
.zk-tb-sub {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-ink-3, #807A70); font-weight: 500;
  margin-left: 12px; padding-left: 12px;
  border-left: 1px solid var(--color-line, #E5E0D6);
  white-space: nowrap;
}
@media (max-width: 639px) { .zk-tb-sub { display: none; } .zk-tb-logo-img { height: 30px; } }
/* Zone serrée : la nav est visible mais la largeur reste juste → on libère le sous-titre et le ⌘K */
@media (min-width: 1024px) and (max-width: 1199px) {
  .zk-tb-sub { display: none; }
  .zk-tb-kbd { display: none; }
}

/* Nav */
.zk-tb-nav { display: none; align-items: center; gap: clamp(12px, 1.6vw, 24px); }
@media (min-width: 1024px) { .zk-tb-nav { display: flex; } }
.zk-tb-link {
  font-size: 13px; color: var(--color-ink-2, #4A4640); text-decoration: none;
  white-space: nowrap; /* jamais de libellé sur 2 lignes, quelle que soit la place */
  position: relative; padding: 4px 0;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .35s ease, color .15s ease;
}
.zk-tb-link:hover { background-size: 100% 1px; color: var(--color-ink, #1A1612); }
.zk-tb-link.is-active { color: var(--color-ink, #1A1612); font-weight: 500; }
.zk-tb-link.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -22px;
  height: 2px; background: var(--color-accent, #B8804A);
}

/* Search (calqué sur .zk-search de shell.css) */
.zk-tb-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--color-bg-sunken, #F2EFE9);
  padding: 7px 12px;
  border-radius: 99px;
  font-size: 13px; color: var(--color-ink-3, #807A70);
  flex: 0 1 280px; max-width: 280px; min-width: 120px;
  margin-left: auto;
  border: 1px solid transparent;
  transition: border-color .15s, background .15s;
}
.zk-tb-search:focus-within { border-color: var(--color-accent, #B8804A); background: var(--color-bg-elev, #FFFFFF); }
.zk-tb-search svg { flex-shrink: 0; color: var(--color-ink-3, #807A70); }
.zk-tb-search input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: none;
  color: var(--color-ink, #1A1612); font: inherit;
}
.zk-tb-search input::placeholder { color: var(--color-ink-3, #807A70); }
.zk-tb-search input:focus::placeholder { color: var(--color-ink-4, #B5AFA3); }
.zk-tb-kbd {
  font-size: 10px;
  padding: 1px 6px;
  border: 1px solid var(--color-line-2, #D4CEC0);
  border-radius: 4px;
  color: var(--color-ink-3, #807A70);
  background: var(--color-bg-elev, #FFFFFF);
  flex-shrink: 0;
}
/* Mobile : la recherche reste disponible, repliée en loupe ; elle s'ouvre
   au toucher (le script de la topbar donne le focus) et reprend la largeur
   disponible tant que le champ a le focus. */
@media (max-width: 768px) {
  .zk-tb-search {
    flex: 0 0 36px; width: 36px; min-width: 36px; height: 36px;
    padding: 0; justify-content: center;
    border-radius: 99px; cursor: pointer;
    transition: flex-basis .2s ease, max-width .2s ease, border-color .15s, background .15s;
  }
  .zk-tb-search input { width: 0; flex: 0 0 0; opacity: 0; padding: 0; }
  .zk-tb-kbd { display: none; }
  .zk-tb-search:focus-within {
    flex: 1 1 auto; width: auto; max-width: none;
    padding: 0 12px; justify-content: flex-start;
    cursor: text;
  }
  .zk-tb-search:focus-within input { width: auto; flex: 1 1 auto; opacity: 1; }
  /* Pendant la saisie, les boutons de droite cèdent la place au champ. */
  .zk-tb-search:focus-within ~ .zk-tb-right { display: none; }
}

/* Right CTA */
.zk-tb-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.zk-tb-cta {
  display: inline-flex; align-items: center;
  padding: 0 14px; height: 36px; border-radius: 6px;
  background: var(--color-ink, #1A1612); color: var(--color-bg, #FAF8F4);
  font-size: 13px; font-weight: 500;
  text-decoration: none; transition: background .15s;
}
.zk-tb-cta:hover { background: var(--color-ink-2, #4A4640); }
.zk-tb-cta--ghost {
  background: transparent; color: var(--color-ink, #1A1612); border: 1px solid var(--color-line, #E5E0D6);
}
.zk-tb-cta--ghost:hover { background: var(--color-bg-sunken, #F2EFE9); }

/* Menu mobile (< 1024 px : la nav est masquée) — 2026-09-11. Les pages
   Joutes, Blog, Forum, Cénacles n'avaient AUCUN chemin vers les autres
   rubriques au téléphone. Un bouton à gauche du logo ouvre ce panneau. */
.zk-tb-burger {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 36px; height: 36px; margin-left: -6px;
  border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  color: var(--color-ink-2, #4A4640);
}
.zk-tb-burger:hover,
.zk-tb-burger[aria-expanded="true"] { background: var(--color-bg-sunken, #F2EFE9); color: var(--color-ink, #1A1612); }
.zk-tb-burger:focus-visible { outline: 2px solid var(--color-accent, #B8804A); outline-offset: 2px; }
.zk-tb-menu {
  display: grid; gap: 2px; padding: 8px 16px 14px;
  border-top: 1px solid var(--color-line, #E5E0D6);
  background: var(--color-bg, #FAF8F4);
}
.zk-tb-menu[hidden] { display: none; }
.zk-tb-menu-link {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px;
  border-radius: 8px; font-size: 15px; text-decoration: none;
  color: var(--color-ink-2, #4A4640);
}
.zk-tb-menu-link:hover { background: var(--color-bg-sunken, #F2EFE9); color: var(--color-ink, #1A1612); }
.zk-tb-menu-link.is-active { color: var(--color-ink, #1A1612); font-weight: 600; box-shadow: inset 3px 0 0 var(--color-accent, #B8804A); }
@media (min-width: 1024px) { .zk-tb-burger, .zk-tb-menu { display: none !important; } }