/* Coquille du site : barre du haut, barre latérale, arborescence. Couleurs de repère propres à ces éléments :
   elles sont toujours doublées d'un libellé ou d'une forme. */
:root { --kd-blue: #2457d6; --kd-violet: #6d3fd1; --kd-green: #0f8a5f; --kd-amber: #9a5b00; --kd-red: #c4302b; --kd-teal: #0e7c86;
  --tr-skill: var(--kd-blue); --tr-guard: var(--kd-red); --tr-hook: var(--kd-amber); --tr-rule: var(--kd-green); --tr-bin: var(--kd-teal);
  --tr-config: var(--kd-violet); --tr-doc: var(--kw-mut); --tr-local: var(--kw-dim); --kd-top-h: 56px; --kd-side-w: 264px; }
[data-theme="dark"] { --kd-blue: #7aa7ff; --kd-violet: #b79bff; --kd-green: #5fd3a2; --kd-amber: #f5b94a; --kd-red: #ff8585; --kd-teal: #4fd1d9; }
html { scroll-padding-top: calc(var(--kd-top-h) + 16px); }

.kd-dot { display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: var(--dot, var(--kw-mut)); vertical-align: 1px; }

/* ---------- barre du haut ---------- */
.kd-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; height: var(--kd-top-h); padding: 0 clamp(14px, 2vw, 24px); background: var(--kw-glass); backdrop-filter: blur(10px); border-bottom: 1px solid var(--kw-rule-soft); }
.kd-spacer { flex: 1; }
.kd-menu { display: none; width: 40px; height: 40px; padding: 0; align-items: center; justify-content: center; background: transparent; color: var(--kw-fg); border: 1px solid var(--kw-rule); border-radius: 8px; }
.kd-menu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* ---------- mise en page ---------- */
.kd-layout { display: grid; grid-template-columns: var(--kd-side-w) minmax(0, 1fr); max-width: 1480px; margin: 0 auto; }
.kd-main { min-width: 0; padding: 0 clamp(16px, 3vw, 48px) 48px; }
.kd-main .kw-container { width: 100%; max-width: 1040px; margin-inline: 0; }
.kd-side { position: sticky; top: var(--kd-top-h); align-self: start; height: calc(100vh - var(--kd-top-h)); overflow-y: auto; padding: 20px 14px 40px clamp(14px, 2vw, 24px); border-right: 1px solid var(--kw-rule-soft); scrollbar-width: thin; }
.kd-sg h2 { display: flex; align-items: center; margin: 22px 0 6px 10px; font: 600 12px/1.3 Geist, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--kw-mut); }
.kd-sg:first-child h2 { margin-top: 4px; }
.kd-sg ul, .kd-toc { list-style: none; margin: 0; padding: 0; }
.kd-sg a { display: block; padding: 6px 10px; border-radius: 6px; font-size: 14px; line-height: 1.4; color: var(--kw-body); text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.kd-sg a:hover { background: var(--kw-tint); color: var(--kw-fg); }
.kd-sg a[aria-current="page"], .kd-sg a.is-active { background: var(--kw-raise); color: var(--kw-fg); font-weight: 600; }
.kd-toc { margin: 2px 0 6px 14px; padding-left: 10px; border-left: 1px solid var(--kw-rule); }
.kd-toc a { padding: 4px 10px; font-size: 13px; color: var(--kw-mut); }
.kd-scrim { display: none; }

@media (max-width: 1023px) {
  .kd-layout { display: block; }
  .kd-menu { display: inline-flex; }
  .kd-side { position: fixed; z-index: 50; inset: var(--kd-top-h) auto 0 0; width: min(86vw, 320px); height: auto; padding-top: 16px; background: var(--kw-bg); transform: translateX(-102%); transition: transform .25s var(--kw-ease); }
  .side-open .kd-side { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); }
  .kd-scrim { position: fixed; inset: var(--kd-top-h) 0 0 0; z-index: 45; }
  .side-open .kd-scrim { display: block; }
}
@media (prefers-reduced-motion: reduce) { .kd-side { transition: none; } }
@media print { .kd-top, .kd-side { display: none; } .kd-layout { display: block; } }

/* ---------- arborescence ---------- */
.tr { margin-top: 32px; }
.tr-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--kw-rule); border-radius: 10px; }
.tr-tabs button { padding: 7px 14px; border: 0; border-radius: 7px; background: transparent; color: var(--kw-body); font-size: 14px; }
.tr-tabs button[aria-selected="true"] { background: var(--kw-invert-bg); color: var(--kw-invert-fg); font-weight: 600; }
.tr-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 18px 0 12px; }
.tr-mods, .tr-act { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-only { flex-basis: 100%; margin: 4px 0 0; font-size: 12px; color: var(--kw-mut); }
.tr-lbl { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; font-size: 13px; color: var(--kw-mut); }
.tr-lbl .kd-pic { width: 16px; height: 16px; margin: 0; color: var(--kd-teal); }
.tr-chip { padding: 4px 10px; border: 1px solid var(--kw-rule); border-radius: 6px; background: transparent; color: var(--kw-mut); font: 500 12px/1.4 'Geist Mono', monospace; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.tr-chip[aria-pressed="true"] { background: var(--kw-raise); color: var(--kw-fg); border-color: var(--kw-dim); }
.tr-btn { padding: 5px 12px; border: 1px solid var(--kw-rule); border-radius: 8px; background: transparent; color: var(--kw-body); font-size: 13px; }
.tr-btn:hover, .tr-chip:hover { background: var(--kw-tint); }
.tr-body { padding: 8px; border: 1px solid var(--kw-rule); border-radius: 12px; background: var(--kw-brick); }
.tr-row { display: grid; grid-template-columns: 18px auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 6px 10px; border-radius: 8px; font-size: 14px; }
.tr-row svg { width: 18px; height: 18px; fill: none; stroke: var(--kw-mut); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tr-n { font: 500 13px/1.4 'Geist Mono', monospace; color: var(--kw-fg); white-space: nowrap; }
.tr-n a { text-decoration: none; }
.tr-n a:hover { text-decoration: underline; }
.tr-d { color: var(--kw-body); font-size: 13.5px; line-height: 1.45; }
.tr-r { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.tr-m { padding: 1px 8px; border-radius: 999px; background: var(--kw-tint); color: var(--kw-mut); font: 400 11px/1.6 'Geist Mono', monospace; }
.tr-l { padding: 1px 4px; color: var(--kw-body); font-size: 12.5px; text-underline-offset: 3px; }
.tr-l:hover { color: var(--kw-fg); }
@media (hover: hover) { .tr-file:hover, .tr-dir > summary:hover { background: var(--kw-tint); } }
.tr-dir > summary { cursor: pointer; list-style: none; }
.tr-dir > summary::-webkit-details-marker { display: none; }
.tr-dir > summary .tr-n::before { content: "›"; display: inline-block; margin-right: 8px; color: var(--kw-mut); transition: transform .18s ease; }
.tr-dir[open] > summary .tr-n::before { transform: rotate(90deg); }
.tr-kids { margin: 2px 0 4px 17px; padding-left: 12px; border-left: 1px solid var(--kw-rule); }
.tr-dir[open] > .tr-kids { animation: tr-in .26s var(--kw-ease) both; }
.tr-local > summary .tr-n, .tr-local .tr-n { color: var(--kw-mut); }
.tr-k-skill svg { stroke: var(--tr-skill); } .tr-k-guard svg { stroke: var(--tr-guard); } .tr-k-hook svg { stroke: var(--tr-hook); }
.tr-k-rule svg { stroke: var(--tr-rule); } .tr-k-bin svg { stroke: var(--tr-bin); } .tr-k-config svg { stroke: var(--tr-config); }
.tr-k-doc svg { stroke: var(--tr-doc); } .tr-k-local svg { stroke: var(--tr-local); stroke-dasharray: 2.5 2.5; }
.tr-k-guard .tr-n { color: var(--tr-guard); } .tr-k-skill .tr-n { color: var(--tr-skill); }
.tr-off { display: none !important; }
.tr-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--kw-mut); }
.tr-legend li { display: inline-flex; align-items: center; gap: 8px; }
.tr-key { width: 12px; height: 12px; border-radius: 3px; background: var(--c, var(--kw-mut)); display: inline-block; }
.tr-key.tr-k-skill { --c: var(--tr-skill); } .tr-key.tr-k-guard { --c: var(--tr-guard); } .tr-key.tr-k-hook { --c: var(--tr-hook); }
.tr-key.tr-k-rule { --c: var(--tr-rule); } .tr-key.tr-k-bin { --c: var(--tr-bin); } .tr-key.tr-k-config { --c: var(--tr-config); }
.tr-key.tr-k-doc { --c: var(--tr-doc); } .tr-key.tr-k-local { background: transparent; border: 1.5px dashed var(--tr-local); }
@keyframes tr-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .tr-row { grid-template-columns: 18px minmax(0, 1fr); } .tr-d, .tr-r { grid-column: 2; justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) { .tr-dir[open] > .tr-kids { animation: none; } .tr-dir > summary .tr-n::before { transition: none; } }

.tr-modnote { margin: 0 0 12px; min-height: 20px; font-size: 13px; color: var(--kw-mut); }

.kd-ico { width: 16px; height: 16px; margin-right: 8px; flex: none; fill: none; stroke: var(--dot, var(--kw-mut)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tr-row .kd-pic { margin: 0; vertical-align: 0; stroke: currentColor; stroke-width: 1.8; }
.tr-row .kd-pic.pic-fill { fill: currentColor; stroke: none; }

/* transitions entre pages (navigateurs qui les gèrent) : fondu du contenu, barre et menu restent en place */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .kd-top { view-transition-name: kd-top; }
  .kd-side { view-transition-name: kd-side; }
  ::view-transition-old(root) { animation: kd-vt-out .16s ease both; }
  ::view-transition-new(root) { animation: kd-vt-in .3s ease both; }
  @keyframes kd-vt-out { to { opacity: 0; } }
  @keyframes kd-vt-in { from { opacity: 0; } }
  @keyframes kd-head-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  main.pc-wrap > .kd-eyebrow { animation: kd-head-in .5s cubic-bezier(.22, 1, .36, 1) both; }
  main.pc-wrap > .kw-page-title { animation: kd-head-in .55s .06s cubic-bezier(.22, 1, .36, 1) both; }
  html { scroll-behavior: smooth; }
}

/* coloration syntaxique des blocs de code (faite à la génération) */
:root { --sx-k: #7cb7ff; --sx-s: #86d9a0; --sx-n: #f5b45e; --sx-b: #c4a5ff; --sx-c: #8b8b94; --sx-f: #5eead4; --sx-v: #f5b45e; --sx-p: #8b8b94; --sx-a: #f472b6; --sx-h: var(--kw-fg); }
:root[data-theme="light"] { --sx-k: #1d63c4; --sx-s: #14803c; --sx-n: #b45309; --sx-b: #6d3fd1; --sx-c: #6b7280; --sx-f: #0f766e; --sx-v: #b45309; --sx-p: #6b7280; --sx-a: #be185d; }
.sx-k { color: var(--sx-k); } .sx-s { color: var(--sx-s); } .sx-n { color: var(--sx-n); } .sx-b { color: var(--sx-b); }
.sx-c { color: var(--sx-c); font-style: italic; } .sx-f { color: var(--sx-f); } .sx-v { color: var(--sx-v); }
.sx-p { color: var(--sx-p); } .sx-a { color: var(--sx-a); font-weight: 600; } .sx-h { color: var(--sx-h); font-weight: 600; }

/* pictogrammes des concepts (src/pictos.py), communs à toutes les pages */
.kd-pic{width:18px;height:18px;margin-right:8px;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kd-pic.pic-fill{fill:currentColor;stroke:none}
.kd-pic.p-shield{color:var(--tr-guard)}.kd-pic.p-sword{color:var(--tr-skill)}.kd-pic.p-hook{color:var(--tr-hook)}.kd-pic.p-agent{color:var(--kd-violet)}
.kd-pic.p-code{color:var(--kd-teal)}.kd-pic.p-book{color:var(--kd-amber)}

/* termes du glossaire : soulignés en pointillés, infobulle au survol et au focus */
a.gl { position: relative; color: inherit; text-decoration: underline dotted; text-decoration-color: var(--kw-mut); text-underline-offset: 3px; cursor: help; }
a.gl:hover, a.gl:focus-visible { text-decoration-color: currentColor; }
/* la bulle n'existe qu'au survol : invisible mais présente, elle élargissait la page près du bord droit */
a.gl:hover::after, a.gl:focus-visible::after { content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; width: max-content;
  max-width: min(320px, 78vw); padding: 10px 12px; border-radius: 8px; background: var(--kw-invert-bg); color: var(--kw-invert-fg);
  font: 400 13px/1.5 Geist, system-ui, sans-serif; white-space: normal; text-align: left; pointer-events: none; animation: gl-tip .15s ease both; }
@keyframes gl-tip { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
a.gl.gl-r:hover::after, a.gl.gl-r:focus-visible::after { left: auto; right: 0; }
@media (prefers-reduced-motion: reduce) { a.gl:hover::after, a.gl:focus-visible::after { animation: none; } }
/* page glossaire */
.gl-lead { margin: 0 0 20px; }
.gl-search { width: 100%; max-width: 520px; margin: 0 0 22px; padding: 9px 12px; border: 1px solid var(--kw-rule); border-radius: 8px; background: transparent; color: var(--kw-fg); font: 14px Geist, system-ui, sans-serif; }
.kw .gl-lex-h { font: 600 20px/1.3 Geist, system-ui, sans-serif; margin: 48px 0 6px; }
.gl-lex { border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.gl-lex th { text-align: left; font: 400 11px "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--kw-mut); padding: 8px 24px 8px 0; border-bottom: 1px solid var(--kw-rule); }
.gl-lex td { padding: 8px 24px 8px 0; border-top: 1px solid var(--kw-rule-soft); color: var(--kw-body); }
.gl-lex td:first-child { color: var(--kw-fg); font-weight: 500; }
.gl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.gl-item { padding: 16px; border: 1px solid var(--kw-rule); border-radius: 12px; scroll-margin-top: 80px; }
.gl-item:target { border-color: var(--kd-violet); background: var(--kw-raise); }
.gl-item h2 { margin: 0; font: 600 17px/1.3 Geist, system-ui, sans-serif; }
.gl-en { display: block; margin-top: 2px; font: 12px 'Geist Mono', monospace; color: var(--kw-mut); }
.gl-item p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--kw-body); }
.gl-kwa { color: var(--kw-fg) !important; }
/* page « Avant de commencer » */
.bg-steps { list-style: none; margin: 32px 0 0; padding: 0; counter-reset: bg; }
.bg-steps > li { counter-increment: bg; margin: 0 0 40px; }
.bg-steps > li > h2::before { content: counter(bg) " · "; color: var(--kw-mut); font-weight: 400; }
.bg-steps .pc-list { padding-left: 18px; }
.bg-agents { margin: 16px 0; }
.bg-agents .kd-card p { font-size: 14px; }
.bg-steps .kd-note { font: 13px/1.5 Geist, system-ui, sans-serif; letter-spacing: 0; color: var(--kw-mut); }
.bg-agents .kd-card p { margin: 10px 0 6px; }
/* lecteur commun (shell.player, src/player.js) */
.kp { display: inline-flex; align-items: center; gap: 8px; }
.kp-btn, .kp-play { display: inline-grid; place-items: center; border-radius: 50%; cursor: pointer; padding: 0;
  transition: background-color .2s ease, transform .15s ease, opacity .2s ease, box-shadow .2s ease; }
.kp-btn { width: 40px; height: 40px; border: 1px solid var(--kw-rule); background: transparent; color: var(--kw-fg); }
.kp-btn.kp-sm { width: 34px; height: 34px; }
.kp-play { width: 48px; height: 48px; border: 0; background: var(--kw-invert-bg); color: var(--kw-invert-fg); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .45); }
.kp svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kp-btn.kp-sm svg { width: 15px; height: 15px; }
.kp-play svg { width: 20px; height: 20px; }
.kp-i-play path { fill: currentColor; stroke: currentColor; stroke-width: 1.5; }
.kp-i-pause { display: none; } .kp-i-pause path { stroke-width: 2.6; }
.kp-play[aria-pressed="true"] .kp-i-play { display: none; } .kp-play[aria-pressed="true"] .kp-i-pause { display: block; }
.kp-btn:hover:not(:disabled) { background: var(--kw-raise); transform: translateY(-1px); }
.kp-play:hover:not(:disabled) { transform: translateY(-1px) scale(1.04); }
.kp-btn:active:not(:disabled), .kp-play:active:not(:disabled) { transform: scale(.96); }
.kp-btn:disabled { opacity: .35; cursor: default; }
.kp-count { min-width: 52px; text-align: center; font: 500 12.5px 'Geist Mono', monospace; color: var(--kw-mut); }
.kp-count:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .kp-btn, .kp-play { transition: none; } }