/* === NAHIBU HEADER === */

.nh-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 243, 0.88);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--nh-line);
  transition: background var(--t-base) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}

[data-theme="dark"] .nh-header {
  background: rgba(15, 20, 41, 0.92);
  border-bottom-color: var(--nh-line);
}

.nh-header-inner {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  position: relative;
}

/* Logo (vertical lockup : helix + Nahibu + Microbiome Profiling) */
.nh-logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity var(--t-fast) var(--ease-out);
}
.nh-logo:hover { opacity: 0.85; }
.nh-logo-img {
  height: 50px;
  width: auto;
  display: block;
}
/* Light/Dark swap — version navy en clair, blanche en sombre */
.nh-logo-dark { display: none; }
[data-theme="dark"] .nh-logo-light { display: none; }
[data-theme="dark"] .nh-logo-dark  { display: block; }

/* === DESKTOP NAV (Home + 6 catégories) === */
.nh-nav {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  min-width: 0;
}

.nh-nav-link {
  --nh-cat-color: var(--nh-cyan-700);
  --nh-cat-soft:  var(--nh-cyan-50);
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 13px;
  font: 500 13.5px/1 var(--nh-sans);
  letter-spacing: 0.005em;
  color: var(--nh-ink-2);
  border-radius: var(--r-pill);
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
  text-decoration: none;
  position: relative;
  white-space: nowrap;
}

/* Mapping couleur par catégorie via CSS vars (utilise les ink variants pour AA contrast) */
.nh-nav-link[data-cat="science"]      { --nh-cat-color: var(--nh-science-ink);      --nh-cat-soft: var(--nh-science-soft); }
.nh-nav-link[data-cat="alimentation"] { --nh-cat-color: var(--nh-alimentation-ink); --nh-cat-soft: var(--nh-alimentation-soft); }
.nh-nav-link[data-cat="recettes"]     { --nh-cat-color: var(--nh-recettes-ink);     --nh-cat-soft: var(--nh-recettes-soft); }
.nh-nav-link[data-cat="lifestyle"]    { --nh-cat-color: var(--nh-lifestyle-ink);    --nh-cat-soft: var(--nh-lifestyle-soft); }
.nh-nav-link[data-cat="sante"]        { --nh-cat-color: var(--nh-sante-ink);        --nh-cat-soft: var(--nh-sante-soft); }
.nh-nav-link[data-cat="nahibu"]       { --nh-cat-color: var(--nh-nahibu-ink);       --nh-cat-soft: var(--nh-nahibu-soft); }

/* Hover : pill rempli (couleur soft) + texte dans la couleur cat + petit trait sous le texte */
.nh-nav-link:hover {
  color: var(--nh-cat-color);
  background: var(--nh-cat-soft);
}
.nh-nav-link:hover::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--nh-cat-color);
  transform: translateX(-50%);
  animation: nhUnderlineIn 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* État actif (page courante) — même style que hover, font-weight bumped */
.nh-nav-link[aria-current="page"] {
  color: var(--nh-cat-color);
  background: var(--nh-cat-soft);
  font-weight: 600;
}
.nh-nav-link[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--nh-cat-color);
  transform: translateX(-50%);
}

@keyframes nhUnderlineIn {
  from { width: 0; opacity: 0; }
  to   { width: 18px; opacity: 1; }
}

/* Dark mode : fond translucide blanc à la place de pastel saturé (qui clashe sur fond navy) */
[data-theme="dark"] .nh-nav-link {
  color: var(--nh-ink-2);
}
[data-theme="dark"] .nh-nav-link:hover,
[data-theme="dark"] .nh-nav-link[aria-current="page"] {
  background: rgba(255, 255, 255, 0.06);
  color: var(--nh-cat-color);
}
/* Dark mode : override --nh-cat-color par data-cat avec variantes claires.
   Les couleurs --nh-X-ink (#1a2a55, #4f43c7, etc.) sont optimisées pour fond pastel light
   et tombent à 1.3-3.0:1 sur fond paper dark (#0c1023) → FAIL WCAG AA en hover/active.
   Variants ci-dessous : tous passent 7-10:1 sur #0c1023.
   Couvre desktop (.nh-nav-link) ET mobile floor 2 (.nh-cat-nav-link). */
[data-theme="dark"] .nh-nav-link[data-cat="science"],
[data-theme="dark"] .nh-cat-nav-link[data-cat="science"]      { --nh-cat-color: #a89cf0; }
[data-theme="dark"] .nh-nav-link[data-cat="alimentation"],
[data-theme="dark"] .nh-cat-nav-link[data-cat="alimentation"] { --nh-cat-color: #7ad4a0; }
[data-theme="dark"] .nh-nav-link[data-cat="recettes"],
[data-theme="dark"] .nh-cat-nav-link[data-cat="recettes"]     { --nh-cat-color: #f0a878; }
[data-theme="dark"] .nh-nav-link[data-cat="lifestyle"],
[data-theme="dark"] .nh-cat-nav-link[data-cat="lifestyle"]    { --nh-cat-color: #4dd0ea; }
[data-theme="dark"] .nh-nav-link[data-cat="sante"],
[data-theme="dark"] .nh-cat-nav-link[data-cat="sante"]        { --nh-cat-color: #f098a8; }
[data-theme="dark"] .nh-nav-link[data-cat="nahibu"],
[data-theme="dark"] .nh-cat-nav-link[data-cat="nahibu"]       { --nh-cat-color: #9cb5f0; }

/* Resserrement entre 881 et 1100px */
@media (max-width: 1100px) {
  .nh-nav-link { padding: 0 9px; font-size: 12.5px; }
}

/* === HEADER ACTIONS (right) === */
.nh-header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
}

/* === CTA pill — INCHANGÉ === */
.nh-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 5px 5px 18px;
  background: var(--nh-navy-900);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--t-fast) var(--ease-out);
}
.nh-cta-label {
  font: 600 13.5px/1 var(--nh-sans);
  letter-spacing: 0.01em;
  color: #fff;
}
.nh-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--nh-cyan-600);
  color: var(--nh-navy-900);
  flex-shrink: 0;
}
.nh-cta-pill:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(20,34,74,.22); }
.nh-cta-pill:hover .nh-cta-icon { background: var(--nh-cyan-500); }

[data-theme="dark"] .nh-cta-pill { background: #1b2c5b; }
[data-theme="dark"] .nh-cta-icon { background: var(--nh-cyan-500); color: #0c1023; }

/* === EN switch — INCHANGÉ === */
.nh-lang-switch {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 11px;
  font: 500 11.5px/1 var(--nh-sans);
  letter-spacing: 0.07em;
  color: var(--nh-ink-3);
  border: 1px solid var(--nh-line);
  border-radius: 999px;
  text-decoration: none;
  transition: all var(--t-fast) var(--ease-out);
}
.nh-lang-switch:hover {
  color: var(--nh-ink);
  border-color: var(--nh-line-strong);
  background: var(--nh-paper-2);
}
[data-theme="dark"] .nh-lang-switch {
  border-color: rgba(255,255,255,0.12);
  color: var(--nh-ink-3);
}
[data-theme="dark"] .nh-lang-switch:hover {
  background: rgba(255,255,255,0.07);
  color: var(--nh-ink);
}

/* Smart nav: hide on scroll down (DESKTOP — full header). Mobile = floor-1 only, voir @media. */
.nh-header.is-hidden { transform: translateY(-100%); }

/* ───────────────────────────────────────────────────────────────────
   ÉTAGE 2 — CAT-NAV mobile (≤880px). Caché par défaut (desktop).
   Toggle thème fixe à gauche + nav catégories scrollable horizontalement.
   Pas sticky : en flux normal → scroll-away naturel quand on descend.
   ─────────────────────────────────────────────────────────────────── */
.nh-cat-nav-wrap {
  display: none; /* visible uniquement sur mobile, voir @media */
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE HEADER — 2 étages (≤880px). Desktop strictement inchangé.

   Étage 1 (.nh-header-inner) : sticky top:0
     [Logo Nahibu] ──────────────────── [CTA Tester le microbiote]

   Étage 2 (.nh-cat-nav-wrap) : en flux (NOT sticky)
     [☀ toggle fixe] [Science Alim Recettes Life Santé Nahibu →]
       └── scroll horizontal natif, snap-start, scrollbar masquée

   Comportement scroll : floor 1 reste collé, floor 2 disparaît vers le haut.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  /* NOTE : position:sticky inutilisable ici car body+html ont overflow-x:hidden (base.css)
     qui force implicitement overflow-y:auto (spec CSS). Cela casse position:sticky.
     → on utilise position:fixed sur le wrapper WP, indépendant du contexte overflow.
     Compensation : body { padding-top } dynamique (JS smart-nav.js) pour éviter que
     le contenu soit recouvert par le header fixe. */
  header.wp-block-template-part {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    z-index: 100;
    background: rgba(250, 248, 243, 0.92);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid var(--nh-line);
  }
  [data-theme="dark"] header.wp-block-template-part {
    background: rgba(15, 20, 41, 0.94);
  }
  /* Compensation : on pousse le contenu en dessous du header fixe (116px = 60 + 56). */
  body { padding-top: 116px; }
  /* Quand floor 2 est caché (.is-floor2-hidden via JS), on réduit le padding pour coller
     le contenu sous floor 1 (60px). Transition smooth. */
  body.nh-floor2-hidden { padding-top: 60px; }
  body { transition: padding-top var(--t-base) var(--ease-out); }

  /* .nh-header redevient static sur mobile (sa propre sticky est désactivée pour éviter double-sticky).
     Son backdrop/blur passent au wrapper ci-dessus. */
  .nh-header {
    position: static;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
  }
  [data-theme="dark"] .nh-header { background: transparent; }

  /* Floor 1 height réduit pour mobile (60px au lieu de 76 desktop) */
  .nh-header-inner {
    height: 60px;
    gap: var(--s-3);
  }

  /* Smart-nav (.is-hidden) : désactivé sur mobile, le hide-on-scroll est géré sur floor 2 spécifiquement */
  .nh-header.is-hidden { transform: none; }
  header.wp-block-template-part.is-hidden { transform: none; }

  /* Floor 2 : transition pour hide-on-scroll-down (collapsed via JS .is-floor2-hidden sur le wrap) */
  .nh-cat-nav-wrap {
    transition: transform var(--t-base) var(--ease-out),
                opacity var(--t-base) var(--ease-out),
                height var(--t-base) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
    transform: translateY(0);
    opacity: 1;
    overflow: hidden;
  }
  .nh-cat-nav-wrap.is-floor2-hidden {
    height: 0 !important;
    opacity: 0;
    border-bottom-color: transparent;
    pointer-events: none;
  }

  /* Logo : gauche, plus petit */
  .nh-logo {
    min-height: 44px;
    padding: 2px 0;
  }
  .nh-logo-img { height: 32px; }

  /* Desktop nav cachée (centrée 7 items) */
  .nh-nav { display: none; }

  /* Cluster actions mobile : EN switch caché (réapparaît en floor 2). Theme toggle
     visible, bumpé à 44×44 pour tap target WCAG 2.5.5 + cohérence visuelle à côté du CTA pill. */
  .nh-header-actions > .nh-lang-switch { display: none; }
  .nh-header-actions > .nh-theme-toggle {
    width: 44px;
    height: 44px;
  }

  /* CTA pill : garde le label + ≥44px tap target (WCAG 2.5.5) */
  .nh-cta-pill {
    padding: 5px 5px 5px 14px;
    min-height: 44px;
  }
  .nh-cta-label { font-size: 12.5px; }
  .nh-cta-icon { width: 30px; height: 30px; }

  /* ─── ÉTAGE 2 : cat-nav (fixed via parent, height 56px = 44 pills + 6 breathing each side) ─── */
  .nh-cat-nav-wrap {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    height: 56px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 0 var(--s-3) 0 var(--s-4);
    background: var(--nh-paper);
    border-bottom: 1px solid var(--nh-line);
    position: relative;
  }
  [data-theme="dark"] .nh-cat-nav-wrap {
    background: var(--nh-paper);
    border-bottom-color: var(--nh-line);
  }

  /* EN switch floor-2 : ancré gauche, ne scroll pas. 44px = WCAG 2.5.5 strict */
  .nh-lang-switch--floor2 {
    flex-shrink: 0;
    height: 44px;
    min-width: 44px;
    padding: 0 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--nh-line);
    background: transparent;
    color: var(--nh-ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 500 12px/1 var(--nh-sans);
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: border-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out);
  }
  .nh-lang-switch--floor2:hover,
  .nh-lang-switch--floor2:focus-visible {
    border-color: var(--nh-line-strong);
    color: var(--nh-ink);
    outline: none;
  }
  [data-theme="dark"] .nh-lang-switch--floor2 {
    border-color: rgba(255,255,255,0.12);
    color: var(--nh-ink-2);
  }
  [data-theme="dark"] .nh-lang-switch--floor2:hover {
    border-color: rgba(255,255,255,0.22);
    color: var(--nh-ink);
    background: rgba(255,255,255,0.04);
  }

  /* Conteneur scroll horizontal des catégories */
  .nh-cat-nav {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;       /* CRITIQUE : permet au flex item de shrink en dessous du content min-width
                           sinon les pills (flex-shrink:0) forcent le parent et le viewport à grandir */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 6px var(--s-7) 6px var(--s-2); /* padding-right large pour le fade indicator */
    /* mask de fondu côté droit pour suggérer le scroll */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
  }
  .nh-cat-nav::-webkit-scrollbar { display: none; }

  /* Pills catégories — chaque cat dans sa couleur (44px tap zone WCAG 2.5.5 strict) */
  .nh-cat-nav-link {
    --nh-cat-color: var(--nh-cyan-700);
    --nh-cat-soft:  var(--nh-cyan-50);
    flex-shrink: 0;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--nh-line);
    border-radius: var(--r-pill);
    background: transparent;
    font: 500 13px/1 var(--nh-sans);
    letter-spacing: 0.005em;
    color: var(--nh-cat-color);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out);
  }
  .nh-cat-nav-link[data-cat="science"]      { --nh-cat-color: var(--nh-science-ink);      --nh-cat-soft: var(--nh-science-soft); }
  .nh-cat-nav-link[data-cat="alimentation"] { --nh-cat-color: var(--nh-alimentation-ink); --nh-cat-soft: var(--nh-alimentation-soft); }
  .nh-cat-nav-link[data-cat="recettes"]     { --nh-cat-color: var(--nh-recettes-ink);     --nh-cat-soft: var(--nh-recettes-soft); }
  .nh-cat-nav-link[data-cat="lifestyle"]    { --nh-cat-color: var(--nh-lifestyle-ink);    --nh-cat-soft: var(--nh-lifestyle-soft); }
  .nh-cat-nav-link[data-cat="sante"]        { --nh-cat-color: var(--nh-sante-ink);        --nh-cat-soft: var(--nh-sante-soft); }
  .nh-cat-nav-link[data-cat="nahibu"]       { --nh-cat-color: var(--nh-nahibu-ink);       --nh-cat-soft: var(--nh-nahibu-soft); }

  .nh-cat-nav-link:active {
    transform: scale(0.97);
    background: var(--nh-cat-soft);
  }

  /* État page courante : pill remplie soft + texte saturé + bold */
  .nh-cat-nav-link[aria-current="page"] {
    background: var(--nh-cat-soft);
    border-color: transparent;
    font-weight: 600;
  }

  /* Dark mode : bordures et fonds adaptés */
  [data-theme="dark"] .nh-cat-nav-link {
    border-color: rgba(255,255,255,0.12);
    color: var(--nh-cat-color);
  }
  [data-theme="dark"] .nh-cat-nav-link[aria-current="page"] {
    background: rgba(255,255,255,0.06);
    color: var(--nh-cat-color);
    border-color: transparent;
  }
}

/* Narrow phones (≤480px) : compact floor 1 davantage */
@media (max-width: 480px) {
  .nh-header-inner { gap: var(--s-3); }
  .nh-cta-pill { padding: 5px 5px 5px 12px; }
  .nh-cta-label { font-size: 12px; letter-spacing: 0.005em; }
  .nh-cta-icon { width: 28px; height: 28px; }
  .nh-cat-nav-wrap { padding-left: var(--s-3); }
}

/* Ultra-small (≤360px) : on garde tout lisible mais super compact */
@media (max-width: 360px) {
  .nh-logo-img { height: 28px; }
  .nh-cta-pill { padding: 5px 5px 5px 10px; }
  .nh-cta-label { font-size: 11px; }
  .nh-cta-icon { width: 26px; height: 26px; }
  .nh-cat-nav-link { padding: 0 12px; font-size: 12.5px; }
}