/*
================================================================================
  ◎ DEMO KXCLOUD — SIDEBAR CONTEXTE (ADR-007, dossier 05 §4)
  Fichier  : /opt/cortex/demo/src/css/components/sidebar.css
  Rôle     : Ancrage de contexte — étroite, sombre, icônes filaires 24px,
             highlight par pilule Mousse. Se replie en tab bar basse < 1024px.
================================================================================
*/

.sidebar {
  background-color: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-g2) 0;
  gap: var(--space-g2);
}

/* ── SCEAU (monogramme d'atelier) ──────────────────────────────────────────── */
.sidebar-seal {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--ink-on-dark);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-md);
  user-select: none;
}

/* ── NAVIGATION FILAIRE ────────────────────────────────────────────────────── */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-z1);
  flex: 1;
}

.side-link {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--ink-on-dark-muted);
  border-radius: var(--radius-pill);
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition:
    background-color var(--duration-z3) ease,
    color var(--duration-z3) ease;
}

.side-link svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.5; /* filaire — tracé à la plume */
}

.side-link:hover {
  color: var(--ink-on-dark);
  background-color: var(--bg-sidebar-raise);
}

.side-link:active {
  transform: scale(0.94); /* réponse haptique — transform seul */
}

/* Highlight actif : pilule Mousse, label en encre (WCAG 7.7:1) */
.side-link[aria-current="page"] {
  background-color: var(--signal);
  color: var(--ink);
}

/* ── PASTILLE D'ÉTAT (online — famille Mousse unique) ──────────────────────── */
.sidebar-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background-color: var(--signal);
  box-shadow: 0 0 12px oklch(0.74 0.11 128 / 0.55);
  animation: status-breath calc(var(--duration-z1) * 6) ease-in-out infinite;
}

.sidebar-status .label-technical {
  color: var(--ink-on-dark-muted);
  writing-mode: vertical-rl;
  letter-spacing: 0.18em;
}

@keyframes status-breath {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ── DÉCLINAISON TAB BAR (mobile) — mêmes liens, posés à plat ──────────────── */
.tabbar .side-link {
  width: 48px;
  height: 48px;
}

/* Tactile (v66.8) : le survol ne « reste pas allumé » après le tap dans
   la barre basse ; le lien actif garde sa pilule Mousse, le tap son scale. */
@media (hover: none) {
  .tabbar .side-link:hover {
    background-color: transparent;
    color: var(--ink-on-dark-muted);
  }
  .tabbar .side-link[aria-current="page"]:hover {
    background-color: var(--signal);
    color: var(--ink);
  }
}

/* ── MASQUAGE MOBILE — DANS le composant, EN FIN de fichier (v66.7) ────────
   La règle vit ici et pas ailleurs : ce fichier redéclare .sidebar
   { display:flex } plus haut, et une feuille chargée après layout.css
   l'emportait à spécificité égale (une media query n'ajoute AUCUNE
   spécificité) — d'où le liseré fantôme. aside.sidebar (0,1,1) + dernière
   position = victoire par le poids ET par l'ordre. Le calque fixe est
   aussi désarmé (position/painting). Seule la tab bar basse subsiste. */
@media (max-width: 1023px) {
  aside.sidebar {
    display: none;
    position: static;
    width: 0;
    padding: 0;
    border: none;
    background: none;
  }
}