/* notebook.css — pages de TP d'ITC rendues depuis un notebook Jupyter par
   tooling/sync-notebooks.py (bloc `html`, fragment content/tp-*.html).

   Tout s'appuie sur les variables de style.css (--surface, --border, --accent,
   --muted…) : le thème sombre suit sans rien redéclarer. Structure du fragment :

     <article class="notebook">
       <nav class="nb-files">  boutons : notebook, PDF, matériel, page jumelle
       <div class="nb-md prose">  une cellule Markdown (typo .prose du moteur)
       <div class="nb-cell">      une cellule de code
         <pre class="nb-code">      la source, colorée par Pygments
         <div class="nb-output">    ses sorties (texte, image, HTML)
*/

/* Le fragment prend la largeur de la page (--maxw) : les tables de résultats
   et le code ont besoin de place. Les cellules Markdown réutilisent la typo
   .prose du moteur, dont on lève seulement la largeur de 42rem. */
.notebook { max-width: var(--maxw); }
.notebook .prose { max-width: none; }
.notebook .nb-md + .nb-md { margin-top: 1rem; }

/* ---- Fichiers du TP ---------------------------------------------------- */
.nb-files {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1.75rem;
}

/* ---- Cellule de code --------------------------------------------------- */
.nb-cell { margin: 1rem 0 1.25rem; }
.nb-code,
.nb-output {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86rem;
  line-height: 1.5;
  tab-size: 4;
}
.nb-code {
  padding: .8rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  overflow-x: auto;
}
.nb-code code { background: none; border: none; padding: 0; font-size: inherit; }

/* ---- Sorties ----------------------------------------------------------- */
.nb-output {
  position: relative;
  margin-top: .35rem;
  padding: .8rem 1rem .6rem;
  background: color-mix(in srgb, var(--surface) 55%, var(--bg));
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
}
.nb-output::before {
  content: "sortie";
  display: block;
  margin-bottom: .3rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.nb-stream { margin: 0; white-space: pre; }
.nb-stream + .nb-stream { margin-top: .5rem; }
.nb-stderr { color: var(--warn); }
.nb-error { color: var(--danger); }
.nb-image { display: block; max-width: 100%; height: auto; margin: .25rem 0; }
.nb-html table { border-collapse: collapse; margin: .25rem 0; }
.nb-html th, .nb-html td { border: 1px solid var(--border); padding: .3rem .6rem; }

/* ---- Coloration Pygments (classes courtes de HtmlFormatter) ------------
   Cinq familles seulement, sur les couleurs du thème : le code reste lisible
   sans devenir un sapin de Noël. */
.nb-code .k, .nb-code .kn, .nb-code .kc, .nb-code .kd, .nb-code .kp,
.nb-code .kr, .nb-code .kt, .nb-code .ow { color: var(--accent); font-weight: 600; }
.nb-code .s, .nb-code .s1, .nb-code .s2, .nb-code .sa, .nb-code .sb,
.nb-code .sd, .nb-code .se, .nb-code .sh, .nb-code .si, .nb-code .sx,
.nb-code .sr, .nb-code .ss { color: var(--ok); }
.nb-code .c, .nb-code .c1, .nb-code .cm, .nb-code .ch, .nb-code .cp,
.nb-code .cs { color: var(--muted); font-style: italic; }
.nb-code .m, .nb-code .mi, .nb-code .mf, .nb-code .mh, .nb-code .mo,
.nb-code .mb, .nb-code .il { color: var(--warn); }
.nb-code .nb, .nb-code .bp, .nb-code .nf, .nb-code .fm, .nb-code .nc,
.nb-code .nd, .nb-code .ne { color: var(--text); font-weight: 500; }
.nb-code .o, .nb-code .p, .nb-code .n { color: var(--text); }

/* ---- Téléphone --------------------------------------------------------- */
@media (max-width: 36rem) {
  .nb-code, .nb-output { padding: .65rem .75rem; font-size: .8rem; }
  .nb-cell { margin: .75rem 0 1rem; }
}