/* MakiDL — menus partagés (top + latéral)
   Un seul langage d’état actif pour tout le site.
   Actif = « éclairé » (glow), pas un pavé jaune plat + texte noir. */

:root {
  --makidl-cyan: #22D3EE;
  --makidl-glow: #FBBF24;
  --makidl-glow-hot: #FDE68A;
  --makidl-ink: #0B1220;
  --makidl-line: #334155;
  --makidl-muted: #94A3B8;
}

/* —— Menu haut (topnav) —— */
.nav-links a[aria-current="page"],
.nav-links a.is-on {
  color: var(--makidl-ink);
  font-weight: 800;
  background:
    linear-gradient(180deg, rgba(251, 191, 36, 0.55), rgba(251, 191, 36, 0.28));
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.55),
    0 0 18px rgba(251, 191, 36, 0.35);
  text-shadow: 0 0 12px rgba(253, 230, 138, 0.55);
  border-radius: 4px;
  padding: 4px 10px;
}

.nav-links a[aria-current="page"]::after,
.nav-links a.is-on::after {
  display: none !important;
}

/* —— Menu latéral sombre (guides / hub) —— */
.makidl-side,
.rail,
.guides-side {
  --side-line: var(--makidl-line);
  --side-muted: var(--makidl-muted);
  --side-cyan: var(--makidl-cyan);
  --side-glow: var(--makidl-glow);
}

.makidl-side ol,
.makidl-side ul,
.rail ol,
.guides-side .guide-chapters {
  list-style: none;
  margin: 0 -22px;
  padding: 0;
}

.makidl-side a,
.rail a,
.guides-side .guide-chapters a {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 22px;
  border-top: 1px solid var(--side-line);
  color: var(--side-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  transition: color 0.15s ease, background 0.15s ease, text-shadow 0.15s ease, box-shadow 0.15s ease;
}

.makidl-side a span,
.rail a span,
.guides-side .guide-chapters a span,
.guides-side .guide-chapters li span {
  color: var(--side-cyan);
  font-family: "Bricolage Grotesque", "IBM Plex Sans JP", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.45);
}

.makidl-side a:hover,
.rail a:hover,
.guides-side .guide-chapters a:hover {
  color: #fff;
}

.makidl-side a:hover span,
.rail a:hover span,
.guides-side .guide-chapters a:hover span {
  color: var(--side-cyan);
  text-shadow: 0 0 14px rgba(34, 211, 238, 0.75);
}

.makidl-side a.is-on,
.rail a.is-on,
.guides-side .guide-chapters a.is-on {
  color: #fff;
  font-weight: 800;
  border-top-color: transparent;
  background:
    linear-gradient(90deg, rgba(251, 191, 36, 0.42) 0%, rgba(251, 191, 36, 0.14) 42%, transparent 100%),
    radial-gradient(90% 160% at 8% 50%, rgba(251, 191, 36, 0.38), transparent 68%);
  box-shadow:
    inset 4px 0 0 var(--makidl-glow-hot),
    inset 0 0 36px rgba(251, 191, 36, 0.22),
    0 0 22px rgba(251, 191, 36, 0.18);
  text-shadow: 0 0 14px rgba(255, 248, 220, 0.45);
}

.makidl-side a.is-on::before,
.rail a.is-on::before,
.guides-side .guide-chapters a.is-on::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 45%, transparent);
}

.makidl-side a.is-on span,
.rail a.is-on span,
.guides-side .guide-chapters a.is-on span {
  color: var(--makidl-glow-hot);
  text-shadow:
    0 0 6px #FBBF24,
    0 0 14px rgba(251, 191, 36, 1),
    0 0 28px rgba(251, 191, 36, 0.7),
    0 0 42px rgba(245, 158, 11, 0.45);
}