/* Céos — a Read the Docs-like layout: sidebar, content, « Sur cette page ». */

:root {
  --sidebar-bg: #343131;
  --sidebar-head: #2980b9;
  --sidebar-text: #d9d9d9;
  --sidebar-current: #fcfcfc;
  --text: #404040;
  --muted: #6a6a6a;
  --link: #2980b9;
  --link-visited: #9b59b6;
  --bg: #fcfcfc;
  --border: #e1e4e5;
  --definition: #2980b9;
  --axiom: #8e44ad;
  --theorem: #27ae60;
  --tip-bg: #2b2b2b;
  --tip-text: #f5f5f5;
  --sidebar-width: 300px;
  --toc-width: 240px;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 "Lato", "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  overflow-y: auto;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  font-size: 0.92rem;
}

.site-title {
  display: block;
  padding: 1rem 1.2rem;
  background: var(--sidebar-head);
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
}

.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar > ul { padding: 0.8rem 0; }
.sidebar li a { display: block; padding: 0.35rem 1.2rem; color: var(--sidebar-text); }
.sidebar li li a { padding-left: 2.2rem; }
.sidebar li li li a { padding-left: 3.2rem; }
.sidebar li.open > a { color: var(--sidebar-current); }
.sidebar li.current > a { background: var(--sidebar-current); color: var(--text); font-weight: bold; }
.sidebar li a:hover { text-decoration: none; background: rgba(255, 255, 255, 0.08); }
.sidebar li.current > a:hover { background: var(--sidebar-current); }

/* ── Content ─────────────────────────────────────────────────────────────── */

.content {
  margin-left: var(--sidebar-width);
  margin-right: var(--toc-width);
  padding: 2rem 3rem 4rem;
  max-width: calc(860px + 6rem);
}

h1 { font-size: 2rem; margin: 0 0 1rem; color: #222; }
h2 { font-size: 1.5rem; margin: 2.2rem 0 1rem; color: #222; border-bottom: 1px solid var(--border); }
.intro { font-size: 1.05rem; color: var(--muted); margin-bottom: 1.5rem; }

.anchor { visibility: hidden; margin-left: 0.4rem; color: var(--muted); font-size: 0.8em; }
h2:hover .anchor, .statement header:hover .anchor { visibility: visible; }

/* ── Statements ──────────────────────────────────────────────────────────── */

.statement {
  margin: 1.2rem 0;
  padding: 0.8rem 1.1rem;
  border-left: 4px solid var(--definition);
  background: #f3f6f6;
  scroll-margin-top: 1rem;
}
.statement:target { background: #fffbe6; }
.kind-axiom { border-left-color: var(--axiom); }
.kind-theorem, .kind-corollary { border-left-color: var(--theorem); }

.statement header { margin-bottom: 0.4rem; }
.statement .kind { font-weight: bold; color: var(--definition); }
.kind-axiom .kind { color: var(--axiom); }
.kind-theorem .kind, .kind-corollary .kind { color: var(--theorem); }
.statement .title { font-weight: bold; }
.statement .title::before { content: "— "; font-weight: normal; color: var(--muted); }
.statement p { margin: 0.4rem 0; }

.proof { margin-top: 0.6rem; }
.proof-label { font-style: italic; }
.todo { color: var(--muted); font-style: italic; }

/* ── Formulas (first pass: HTML text) ────────────────────────────────────── */

.math { font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", serif; font-size: 1.08em; white-space: nowrap; }
.math .var { font-style: italic; }
.math .var.upright { font-style: normal; }
.math .text { font-family: "Lato", "Helvetica Neue", Arial, sans-serif; font-size: 0.93em; }
.math a.sym { color: inherit; border-bottom: 1px dotted var(--link); }
.math a.sym:hover { color: var(--link); text-decoration: none; }
.sym.nopage { border-bottom: 1px dotted #c0392b; }
.unknown { color: #c0392b; }

/* ── Hovers ──────────────────────────────────────────────────────────────── */

[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 10;
  width: max-content;
  max-width: min(26rem, 80vw);
  margin-top: 0.3rem;
  padding: 0.5rem 0.7rem;
  border-radius: 4px;
  background: var(--tip-bg);
  color: var(--tip-text);
  font: 0.85rem/1.45 "Lato", "Helvetica Neue", Arial, sans-serif;
  font-style: normal;
  white-space: pre-line;
  pointer-events: none;
}

/* ── « Sur cette page » ──────────────────────────────────────────────────── */

.toc {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--toc-width);
  max-height: 100vh;
  overflow-y: auto;
  padding: 2rem 1rem;
  font-size: 0.85rem;
}
.toc-title { margin: 0 0 0.5rem; font-weight: bold; text-transform: uppercase; font-size: 0.75rem; color: var(--muted); }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc ul ul { padding-left: 0.8rem; margin-bottom: 0.4rem; }
.toc li a { display: block; padding: 0.15rem 0; color: var(--text); }
.toc li a:hover { color: var(--link); }
.toc-kind { color: var(--muted); }

.chapter-contents .entry ul { list-style: none; padding-left: 1rem; }
.chapter-contents h2 { font-size: 1.25rem; }

/* ── Small screens ───────────────────────────────────────────────────────── */

.nav-toggle, .nav-button { display: none; }

@media (max-width: 1200px) {
  .toc { display: none; }
  .content { margin-right: 0; }
}

@media (max-width: 768px) {
  .nav-button {
    display: block;
    padding: 0.8rem 16px;
    background: var(--sidebar-head);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
  }
  .sidebar { display: none; position: static; width: auto; }
  .nav-toggle:checked ~ .sidebar { display: block; }
  .content { margin-left: 0; padding: 1.2rem 16px 3rem; }
  .math { white-space: normal; }
}