/* ═══════════════════════════════════════════════════════════════════════
   KHUMEIA V13 - Effet "hacker" sobre pour le lien de navigation actif
   ─────────────────────────────────────────────────────────────────────
   Cible : <a> dans .nav-links (nav globale) et .nav-page (ancres internes)
   Activation : la classe .is-active est posée par khumeia-hacker.js sur
                le lien correspondant à la page ou à la section visible.

   Charte respectée : palette ivoire / terracotta / ambre déjà définie
   par chaque page (variables --rouge, --ambre, --choco-d, --taupe).
   Aucun import de police externe (Cormorant/Raleway/Montserrat déjà
   chargées par les pages). Monospace système uniquement.

   Sobriété : pas d'animation infinie, pas de glitch permanent. Seul
   un curseur "_" clignote (1Hz) - typique terminal, peu intrusif.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --hk-mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  --hk-prompt:var(--ambre,#E89E45);    /* préfixe ">" en orange ambré */
  --hk-active:var(--ambre,#E89E45);    /* texte du lien actif en orange */
  --hk-highlight:rgba(232,158,69,.12); /* surbrillance très légère */
}

/* ───────── Lien actif (nav globale + nav d'ancres) ─────────
   Version discrète : couleur ambre/orange, préfixe ">" et légère
   surbrillance de fond. Aucun soulignement. */
.nav-links a.is-active,
.nav-page a.is-active{
  position:relative;
  color:var(--hk-active) !important;
  font-family:var(--hk-mono);
  font-weight:500;
  letter-spacing:.04em;
  padding:.15em .55em .15em .85em;
  border-radius:3px;
  background-color:var(--hk-highlight);
  transition:color .18s ease, background-color .18s ease;
}

/* Préfixe ">" - pas dans le DOM, donc copier/coller propre */
.nav-links a.is-active::before,
.nav-page a.is-active::before{
  content:'>';
  position:absolute;left:0;top:50%;transform:translateY(-52%);
  color:var(--hk-prompt);
  font-family:var(--hk-mono);
  font-weight:600;
  font-size:.95em;
  opacity:.85;
}

/* Curseur "_" désactivé - version discrète demandée par l'utilisateur.
   Pour le réactiver : décommenter ce bloc.
.nav-links a.is-active::after,
.nav-page a.is-active::after{
  content:'_';
  display:inline-block;
  margin-left:.15em;
  color:var(--hk-active);
  font-family:var(--hk-mono);
  font-weight:600;
  animation:hk-blink 1s steps(2,end) infinite;
}
@keyframes hk-blink{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}
*/

/* Soulignement retiré sur demande - la surbrillance + le préfixe suffisent
   à signaler le lien actif sans alourdir la nav. */

/* Glitch retiré pour rester discret. */

/* ───────── Variante : lien actif sur fond foncé (hero, footer) ─────────
   Détection automatique via parent .on-dark si on veut l'utiliser
   ailleurs. Sur la nav classique (fond ivoire), inutile. */
.on-dark .nav-links a.is-active,
.on-dark .nav-page a.is-active{
  color:var(--ambre-c,#F2BD7E) !important;
}
.on-dark .nav-links a.is-active::before,
.on-dark .nav-page a.is-active::before{
  color:var(--ambre,#E89E45);
}

/* ───────── Accessibilité : respect du reduced-motion ───────── */
@media (prefers-reduced-motion: reduce){
  .nav-links a.is-active::after,
  .nav-page a.is-active::after{
    animation:none;
    opacity:.7;
  }
  .nav-links a.is-active:hover,
  .nav-page a.is-active:hover{
    animation:none;
  }
}

/* ───────── Mobile : on garde l'effet, on raccourcit le padding ───────── */
@media (max-width: 720px){
  .nav-links a.is-active,
  .nav-page a.is-active{
    padding-left:.7em;
    padding-right:.4em;
  }
}