/* ============================================================
   404CTF writeups - Composants d'article
   glossaire · schémas SVG · flow · étapes · références
   ============================================================ */

/* ---- Glossaire (Lecture guidée) ---- */
.glossary { display: grid; gap: 10px; margin: 22px 0 8px; }
.gl-item {
  display: grid; grid-template-columns: minmax(120px, 200px) 28px 1fr;
  align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
}
.gl-term { font-family: var(--font-mono); font-weight: 600; font-size: 14px; color: var(--ink); }
.gl-arrow { color: var(--accent); font-family: var(--font-mono); text-align: center; }
.gl-def { color: var(--ink-2); font-size: 15.5px; }
.gl-def strong { color: var(--ink); }

/* ---- Schémas (SVG) ---- */
.schema {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 22px 18px 16px;
}
.schema svg { width: 100%; max-width: 460px; display: block; margin: 0 auto; color: var(--ink); overflow: visible; }
.schema text { font-family: var(--font-mono); }

/* circuit */
.schema .wire line { stroke: var(--ink-2); stroke-width: 2; }
.schema .ket text { fill: var(--muted); font-size: 15px; text-anchor: middle; }
.schema .gate rect { fill: var(--surface-2); stroke: var(--accent); stroke-width: 2; }
.schema .gate text { fill: var(--accent-ink); font-weight: 700; font-size: 19px; text-anchor: middle; }
.schema .out text { fill: var(--accent-ink); font-size: 15px; text-anchor: start; }

/* householder reflection */
.schema .plane { stroke: var(--border-strong); stroke-width: 2; }
.schema .plane-lbl { fill: var(--faint); font-size: 12px; text-anchor: end; }
.schema .vec { stroke: var(--ink); stroke-width: 2.4; }
.schema .ah { fill: var(--ink); }
.schema .vec-a, .schema .vecA { stroke: var(--accent); stroke-width: 2.4; }
.schema .ahA { fill: var(--accent); }
.schema .vlbl { fill: var(--ink); font-size: 14px; font-weight: 600; }
.schema .vlblA { fill: var(--accent-ink); font-size: 14px; font-weight: 600; }
.schema .org { fill: var(--ink); }
.schema .dim line { stroke: var(--faint); stroke-width: 1.5; }

/* ---- Flow (porte composite) ---- */
.flow {
  display: flex; align-items: stretch; gap: 0; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 22px 18px;
}
.flow-box {
  flex: 1; min-width: 110px; text-align: center;
  display: flex; flex-direction: column; gap: 5px; justify-content: center;
  padding: 16px 12px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border);
}
.flow-box.accent { background: var(--accent-12); border-color: var(--accent-28); }
.flow-box b { font-family: var(--font-mono); font-size: 19px; font-weight: 700; color: var(--ink); }
.flow-box.accent b { color: var(--accent-ink); }
.flow-box span { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.flow-arrow {
  flex: 0 0 56px; position: relative; display: grid; place-items: center;
}
.flow-arrow::before {
  content: ""; position: absolute; left: 10px; right: 18px; top: 50%; height: 2px; background: var(--border-strong);
}
.flow-arrow::after {
  content: ""; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  border: 6px solid transparent; border-left-color: var(--border-strong); border-right: 0;
}
.flow-op {
  position: relative; z-index: 1; font-family: var(--font-mono); font-weight: 700; font-size: 13px;
  color: var(--accent-ink); background: var(--surface); padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--accent-28);
}

/* ---- Étapes numérotées ---- */
.steps { list-style: none; margin: 22px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.steps li {
  display: flex; gap: 13px; align-items: flex-start; margin: 0;
  padding: 16px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
}
.step-n {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 14px;
  color: var(--on-accent); background: var(--accent);
}
.steps li > div b { display: block; font-size: 15px; margin-bottom: 2px; }
.steps li > div p { margin: 0; font-size: 14px; color: var(--ink-2); }

/* ---- Références ---- */
.refs { list-style: none; padding: 0; margin: 18px 0; counter-reset: ref; }
.refs li {
  position: relative; padding: 14px 16px 14px 46px; margin: 0 0 10px;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border);
  font-size: 14.5px; color: var(--ink-2); line-height: 1.55;
}
.refs li::before {
  counter-increment: ref; content: "[" counter(ref) "]";
  position: absolute; left: 14px; top: 14px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent-ink);
}
.refs strong { color: var(--ink); font-weight: 600; }