/* ── Dot Navigator latéral - Setharkk Growth ───────────────
   Nav verticale à GAUCHE avec labels visibles en permanence.
   z-index 60 : entre nav top (50) et chatbot (999998+) */

#shkk-dot-nav{
  position:fixed;
  left:24px;
  top:50%;
  transform:translateY(-50%);
  z-index:60;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:14px 10px;
  background:rgba(20,17,15,.55);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  box-shadow:
    0 8px 32px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.04);
}

#shkk-dot-nav .dot-nav-title{
  font-family:var(--mono);
  font-size:9px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.35);
  padding:4px 12px 8px;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:4px;
}

#shkk-dot-nav a{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  padding:7px 12px 7px 10px;
  border-radius:10px;
  text-decoration:none;
  transition:background .2s ease, color .2s ease;
  cursor:pointer;
}

#shkk-dot-nav a::before{
  content:"";
  flex-shrink:0;
  width:8px;height:8px;
  border-radius:50%;
  background:transparent;
  border:1.5px solid rgba(212,167,71,.4);
  transition:all .25s ease;
}

#shkk-dot-nav .dot-label{
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.01em;
  color:rgba(255,255,255,.6);
  white-space:nowrap;
  transition:color .2s ease;
}

#shkk-dot-nav a:hover{
  background:rgba(212,167,71,.08);
}
#shkk-dot-nav a:hover::before{
  border-color:var(--gold);
}
#shkk-dot-nav a:hover .dot-label{
  color:var(--ink);
}

#shkk-dot-nav a.is-active{
  background:rgba(212,167,71,.12);
}
#shkk-dot-nav a.is-active::before{
  background:var(--gold);
  border-color:var(--gold);
  box-shadow:0 0 0 0 rgba(212,167,71,.5);
  animation:shkk-dot-ring 2.4s ease-out infinite;
}
#shkk-dot-nav a.is-active .dot-label{
  color:var(--gold);
}

@keyframes shkk-dot-ring{
  0%  {box-shadow:0 0 0 0 rgba(212,167,71,.55)}
  100%{box-shadow:0 0 0 10px rgba(212,167,71,0)}
}

#shkk-dot-nav a:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* Mobile et tablette : caché */
@media (max-width:1024px){
  #shkk-dot-nav{display:none}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  #shkk-dot-nav a,
  #shkk-dot-nav a::before,
  #shkk-dot-nav .dot-label{transition:none}
  #shkk-dot-nav a.is-active::before{animation:none}
}