@import url("fonts.css");

/* ==========================================================================
   Architecture distribuée & Big Data — feuille de style
   Direction : « bleu d'architecte ». Le sujet, ce sont des plans de systèmes ;
   la page se lit comme un plan technique. Typographie IBM Plex — clin d'œil
   assumé : IBM a construit System R et inventé SQL (chapitre 4).
   ========================================================================== */

:root {
  /* Palette — papier bleuté d'atelier, encre marine, cobalt structurel,
     ambre pour la chaleur (shuffle, pièges), vert-de-gris pour l'acquis. */
  --paper:      #e9eef4;
  --surface:    #f6f8fb;
  --surface-2:  #dfe6ef;
  --ink:        #0e1626;
  --ink-soft:   #46566e;
  --ink-faint:  #7d8ca3;
  --cobalt:     #1f4fd8;
  --cobalt-dim: #dbe3fb;
  --amber:      #b45613;
  --amber-dim:  #f7e6d4;
  --teal:       #12706180;
  --teal-solid: #0f6558;
  --teal-dim:   #d5eae5;
  --rule:       #c3cedb;
  --rule-soft:  #d8e0ea;
  --shadow:     0 1px 2px rgba(14, 22, 38, .06), 0 8px 24px rgba(14, 22, 38, .05);

  --display: "IBM Plex Sans Condensed", "Helvetica Neue", sans-serif;
  --body:    "IBM Plex Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --rail: 17.5rem;
  --measure: 40rem;
  --radius: 3px; /* presque nul : c'est un plan, pas une carte */
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #0c1220;
    --surface:    #131c2e;
    --surface-2:  #1b2740;
    --ink:        #dfe7f2;
    --ink-soft:   #9fb0c8;
    --ink-faint:  #6c7f9a;
    --cobalt:     #7d9bff;
    --cobalt-dim: #1c2a4d;
    --amber:      #e5a05e;
    --amber-dim:  #33261a;
    --teal-solid: #4cc0ab;
    --teal-dim:   #12302c;
    --rule:       #2a3852;
    --rule-soft:  #1e2a41;
    --shadow:     0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
}

/* Le sélecteur de thème doit gagner dans les deux sens. */
:root[data-theme="light"] {
  --paper: #e9eef4; --surface: #f6f8fb; --surface-2: #dfe6ef;
  --ink: #0e1626; --ink-soft: #46566e; --ink-faint: #7d8ca3;
  --cobalt: #1f4fd8; --cobalt-dim: #dbe3fb;
  --amber: #b45613; --amber-dim: #f7e6d4;
  --teal-solid: #0f6558; --teal-dim: #d5eae5;
  --rule: #c3cedb; --rule-soft: #d8e0ea;
  --shadow: 0 1px 2px rgba(14, 22, 38, .06), 0 8px 24px rgba(14, 22, 38, .05);
}
:root[data-theme="dark"] {
  --paper: #0c1220; --surface: #131c2e; --surface-2: #1b2740;
  --ink: #dfe7f2; --ink-soft: #9fb0c8; --ink-faint: #6c7f9a;
  --cobalt: #7d9bff; --cobalt-dim: #1c2a4d;
  --amber: #e5a05e; --amber-dim: #33261a;
  --teal-solid: #4cc0ab; --teal-dim: #12302c;
  --rule: #2a3852; --rule-soft: #1e2a41;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
}

/* ── Socle ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.65 var(--body);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cobalt); text-underline-offset: .18em; text-decoration-thickness: 1px; }

:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--cobalt); color: #fff; }

/* ── Le log : navigation latérale ──────────────────────────────────────────
   Les chapitres sont des offsets dans un log append-only, reliés par une
   ligne de « lineage » : lue = pleine, non lue = creuse. La navigation
   raconte le cours (chap. 10 : lineage d'un RDD, chap. 15 : log-based broker).
   ------------------------------------------------------------------------ */

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail);
  background: var(--surface);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  z-index: 40;
}

.rail__head {
  padding: 1.35rem 1.25rem 1rem;
  border-bottom: 1px solid var(--rule-soft);
}

.rail__title {
  margin: 0;
  font: 700 1.0625rem/1.15 var(--display);
  letter-spacing: -.01em;
}
.rail__title a { color: inherit; text-decoration: none; }
.rail__title a:hover { color: var(--cobalt); }

.rail__sub {
  margin: .3rem 0 0;
  font: 500 .6875rem/1.3 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.search {
  margin: .85rem 0 0;
  position: relative;
}
.search input {
  width: 100%;
  padding: .45rem .6rem .45rem 1.8rem;
  font: 400 .8125rem var(--body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.search input::placeholder { color: var(--ink-faint); }
.search__icon {
  position: absolute; left: .55rem; top: 50%; translate: 0 -50%;
  width: .85rem; height: .85rem; color: var(--ink-faint); pointer-events: none;
}

.rail__scroll { overflow-y: auto; flex: 1; padding: .75rem 0 2rem; }

.log { list-style: none; margin: 0; padding: 0; }

.log__group {
  font: 600 .625rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 1.1rem 1.25rem .5rem 3.05rem;
}
.log__group:first-child { padding-top: .35rem; }

.log__item { position: relative; }

.log__link {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: .55rem;
  align-items: baseline;
  padding: .38rem 1rem .38rem 1.25rem;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .8438rem;
  line-height: 1.35;
  border-left: 2px solid transparent;
}
.log__link:hover { background: var(--surface-2); color: var(--ink); }
.log__link[aria-current="page"] {
  background: var(--cobalt-dim);
  color: var(--ink);
  font-weight: 500;
  border-left-color: var(--cobalt);
}

.log__offset {
  font: 500 .6875rem/1.6 var(--mono);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.log__link[aria-current="page"] .log__offset { color: var(--cobalt); }

/* Ligne de lineage reliant les offsets */
.log__item::before {
  content: "";
  position: absolute;
  left: 2.02rem;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--rule);
}
.log__item:first-of-type::before { top: .7rem; }
.log__item:last-of-type::before  { bottom: calc(100% - .7rem); }

.log__item::after {
  content: "";
  position: absolute;
  left: 1.72rem; top: .62rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--rule);
  transition: background .18s, border-color .18s;
}
.log__item[data-read="1"]::after { background: var(--teal-solid); border-color: var(--teal-solid); }
.log__item[data-current="1"]::after { background: var(--cobalt); border-color: var(--cobalt); }

.rail__foot {
  border-top: 1px solid var(--rule-soft);
  padding: .7rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  font: 500 .6875rem var(--mono);
  color: var(--ink-faint);
}

.ghost {
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font: 500 .6875rem var(--mono);
  letter-spacing: .04em;
  padding: .28rem .5rem;
  cursor: pointer;
}
.ghost:hover { border-color: var(--cobalt); color: var(--cobalt); }

/* ── Zone de contenu ───────────────────────────────────────────────────── */

.main { margin-left: var(--rail); min-height: 100vh; }

.wrap {
  max-width: calc(var(--measure) + 12rem);
  margin: 0 auto;
  padding: 3.5rem 3rem 6rem;
}

.chapter { max-width: var(--measure); }

/* Bandeau de chapitre */
.chaphead { margin-bottom: 2.5rem; }

.eyebrow {
  font: 600 .6875rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cobalt);
  margin: 0 0 .8rem;
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}

h1 {
  font: 700 clamp(2rem, 1.4rem + 2.4vw, 2.9rem)/1.06 var(--display);
  letter-spacing: -.022em;
  margin: 0 0 .7rem;
  text-wrap: balance;
}

.chaphead__lede {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 34rem;
}

h2 {
  font: 600 1.5rem/1.2 var(--display);
  letter-spacing: -.012em;
  margin: 3.2rem 0 .9rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-soft);
  scroll-margin-top: 1.5rem;
}

h3 {
  font: 600 1.0625rem/1.3 var(--body);
  letter-spacing: -.005em;
  margin: 2rem 0 .55rem;
}

p { margin: 0 0 1.05rem; }
.chapter > p, .chapter li { max-width: var(--measure); }

strong { font-weight: 600; }

ul, ol { margin: 0 0 1.15rem; padding-left: 1.15rem; }
li { margin-bottom: .4rem; }
li::marker { color: var(--ink-faint); }

code {
  font: 400 .875em/1.5 var(--mono);
  background: var(--surface-2);
  padding: .1em .32em;
  border-radius: 2px;
  overflow-wrap: break-word;
}

/* ── Blocs de code ─────────────────────────────────────────────────────── */

.code {
  margin: 1.5rem 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.code__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .42rem .75rem;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--surface-2);
  font: 500 .6875rem var(--mono);
  color: var(--ink-faint);
  letter-spacing: .04em;
}
.code__copy {
  background: none; border: none; cursor: pointer;
  color: var(--ink-faint); font: 500 .6875rem var(--mono);
  padding: .1rem .25rem; border-radius: 2px;
}
.code__copy:hover { color: var(--cobalt); }
.code pre {
  margin: 0;
  padding: .85rem .95rem;
  overflow-x: auto;
  font: 400 .8125rem/1.7 var(--mono);
  tab-size: 2;
}
.code code { background: none; padding: 0; font-size: inherit; }

/* Coloration syntaxique */
.tok-kw   { color: var(--cobalt); font-weight: 500; }
.tok-str  { color: var(--teal-solid); }
.tok-num  { color: var(--amber); }
.tok-com  { color: var(--ink-faint); font-style: italic; }
.tok-fn   { color: var(--ink); font-weight: 500; }
.tok-out  { color: var(--ink-faint); }

/* ── Encadrés ──────────────────────────────────────────────────────────── */

.note {
  margin: 1.6rem 0;
  padding: .95rem 1.1rem;
  border-left: 3px solid var(--rule);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .9375rem;
}
.note > :last-child { margin-bottom: 0; }
.note__label {
  display: block;
  font: 600 .6563rem/1 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}

.note--retenir { border-left-color: var(--teal-solid); background: var(--teal-dim); }
.note--retenir .note__label { color: var(--teal-solid); }
.note--piege   { border-left-color: var(--amber); background: var(--amber-dim); }
.note--piege .note__label { color: var(--amber); }
.note--vrai    { border-left-color: var(--cobalt); background: var(--cobalt-dim); }
.note--vrai .note__label { color: var(--cobalt); }

.note ul { margin-bottom: 0; }

/* ── Tableaux ──────────────────────────────────────────────────────────── */

.tablewrap { overflow-x: auto; margin: 1.6rem 0; }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: .875rem;
}
th, td {
  text-align: left;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
th {
  font: 600 .6875rem/1.3 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
tbody tr:hover { background: var(--surface); }

/* ── Figures / schémas ─────────────────────────────────────────────────── */

.figure {
  margin: 2rem 0;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.figure figcaption {
  margin-top: .9rem;
  padding-top: .7rem;
  border-top: 1px solid var(--rule-soft);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Jetons réutilisés dans les SVG */
.svg-node  { fill: var(--surface-2); stroke: var(--rule); }
.svg-lbl   { fill: var(--ink); font: 500 11px var(--mono); }
.svg-sub   { fill: var(--ink-faint); font: 400 10px var(--mono); }
.svg-line  { stroke: var(--rule); fill: none; }
.svg-hot   { fill: var(--amber); }
.svg-cool  { fill: var(--cobalt); }

/* ── Quiz ──────────────────────────────────────────────────────────────── */

.quiz {
  margin: 3rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}
.quiz__q { margin-bottom: 1.7rem; }
.quiz__q > p { font-weight: 500; margin-bottom: .7rem; }
.quiz__num {
  font: 500 .75rem var(--mono);
  color: var(--ink-faint);
  margin-right: .4rem;
}
.quiz__opts { list-style: none; padding: 0; margin: 0; }
.quiz__opts li { margin-bottom: .4rem; }

.opt {
  display: flex; gap: .6rem; align-items: flex-start;
  width: 100%;
  text-align: left;
  padding: .5rem .7rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink);
  font: 400 .9375rem/1.45 var(--body);
  cursor: pointer;
}
.opt:hover:not(:disabled) { border-color: var(--cobalt); }
.opt:disabled { cursor: default; }
.opt__key {
  font: 500 .75rem/1.5 var(--mono);
  color: var(--ink-faint);
  flex-shrink: 0;
}
.opt[data-state="right"] { border-color: var(--teal-solid); background: var(--teal-dim); }
.opt[data-state="right"] .opt__key { color: var(--teal-solid); }
.opt[data-state="wrong"] { border-color: var(--amber); background: var(--amber-dim); }
.opt[data-state="wrong"] .opt__key { color: var(--amber); }

.quiz__why {
  margin: .6rem 0 0;
  padding: .6rem .75rem;
  background: var(--surface);
  border-left: 2px solid var(--rule);
  font-size: .875rem;
  color: var(--ink-soft);
}
.quiz__why[hidden] { display: none; }

.quiz__score {
  font: 500 .8125rem var(--mono);
  color: var(--ink-soft);
  padding: .6rem 0 0;
}

/* ── Pied de chapitre : navigation ─────────────────────────────────────── */

.chapnav {
  display: flex; gap: 1rem; justify-content: space-between;
  margin-top: 3.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.chapnav a {
  flex: 1 1 0;
  display: block;
  padding: .8rem .95rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
}
.chapnav a:hover { border-color: var(--cobalt); }
.chapnav a:last-child { text-align: right; }
.chapnav span {
  display: block;
  font: 500 .6563rem var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .25rem;
}
.chapnav strong { font: 600 .9375rem/1.3 var(--body); }

/* ── Accueil ───────────────────────────────────────────────────────────── */

.hero { max-width: 44rem; margin-bottom: 1rem; }
.hero h1 {
  font-size: clamp(2.3rem, 1.5rem + 3.2vw, 3.6rem);
  margin-bottom: 1rem;
}
.hero__lede { font-size: 1.125rem; color: var(--ink-soft); max-width: 34rem; }

/* Signature : la bande de shuffle. Un flux de données se hache en trois
   partitions et atterrit sur trois nœuds — la thèse du cours en une image. */
.shuffle {
  margin: 2.5rem 0 3rem;
  padding: 1.5rem 1.25rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.shuffle svg { display: block; width: 100%; height: auto; }
.shuffle__cap {
  margin-top: 1rem; padding-top: .75rem;
  border-top: 1px solid var(--rule-soft);
  font: 500 .6875rem var(--mono);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-faint);
}

.chip { animation: chipflow 6s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes chipflow {
  0%      { opacity: 0; transform: translateX(-40px); }
  8%      { opacity: 1; }
  38%     { transform: translateX(0); }
  46%     { transform: translateX(0); }
  78%     { opacity: 1; }
  100%    { opacity: 0; transform: translateX(0) translateY(var(--drop, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .chip { animation: none; opacity: 1; }
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .85rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.grid li { margin: 0; }

.card {
  display: block;
  height: 100%;
  padding: 1rem 1.05rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--cobalt); transform: translateY(-1px); }
.card__off {
  font: 500 .6875rem var(--mono);
  color: var(--cobalt);
  letter-spacing: .06em;
}
.card__title {
  display: block;
  font: 600 1rem/1.25 var(--body);
  margin: .35rem 0 .3rem;
}
.card__desc { font-size: .8438rem; line-height: 1.45; color: var(--ink-soft); }

/* ── Résultats de recherche ────────────────────────────────────────────── */

.hits { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.hits li { margin-bottom: .6rem; }
.hit {
  display: block; padding: .75rem .9rem;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); text-decoration: none; color: var(--ink);
}
.hit:hover { border-color: var(--cobalt); }
.hit__where { font: 500 .6875rem var(--mono); color: var(--cobalt); }
.hit__text { display: block; font-size: .875rem; color: var(--ink-soft); margin-top: .25rem; }
.hit mark { background: var(--amber-dim); color: var(--ink); padding: 0 .12em; }

/* ── Glossaire ─────────────────────────────────────────────────────────── */

.gloss { margin: 1.5rem 0 0; }
.gloss dt {
  font: 600 .9375rem var(--body);
  margin-top: 1.1rem;
}
.gloss dd {
  margin: .25rem 0 0;
  color: var(--ink-soft);
  font-size: .9375rem;
}

/* ── Barre mobile ──────────────────────────────────────────────────────── */

.topbar { display: none; }

@media (max-width: 60rem) {
  .topbar {
    display: flex; align-items: center; gap: .75rem;
    position: sticky; top: 0; z-index: 50;
    padding: .6rem .9rem;
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
  }
  .topbar__title { font: 700 .9375rem var(--display); flex: 1; }

  .rail {
    transform: translateX(-100%);
    transition: transform .22s ease;
    width: min(20rem, 86vw);
    box-shadow: var(--shadow);
  }
  .rail[data-open="1"] { transform: none; }

  .main { margin-left: 0; }
  .wrap { padding: 2rem 1.25rem 4rem; }

  .scrim {
    position: fixed; inset: 0; z-index: 39;
    background: rgba(8, 14, 26, .45);
    border: 0;
  }
  .chapnav { flex-direction: column; }
  .chapnav a:last-child { text-align: left; }
}

/* ── Impression ────────────────────────────────────────────────────────── */

@media print {
  .rail, .topbar, .chapnav, .code__copy, .quiz__opts { display: none; }
  .main { margin-left: 0; }
  .wrap { max-width: none; padding: 0; }
  body { background: #fff; color: #000; font-size: 11pt; }
  h2 { page-break-after: avoid; }
  .figure, .note, .code { page-break-inside: avoid; }
  .quiz__why { display: block !important; }
}