@@ -8,6 +8,8 @@ name: Documents
 # un numéro (`01-…`, `1-…`) ou par une lettre (`A-…`, `B-…`), pris dans l'ordre.
 # Chaque chapitre est précédé d'une page d'intercalaire portant son titre de
 # premier niveau. S'il n'y a aucun chapitre, le PDF ne contient que le Readme.
+# Les blocs repliables (`<details>`) sont déplacés, dépliés, dans une annexe
+# qui ferme le document ; un renvoi numéroté les remplace dans le texte.
 #
 # Les diapositives (PDF, PPTX, et leurs variantes `-white` sans le style
 # sombre) ne sont produites que si `slides.md` existe à la racine. Sinon ces
@@ -536,6 +538,172 @@ jobs:
             exit 1
           fi
 
+      # Un bloc `<details>` se replie dans le navigateur, mais sur papier il n'y
+      # a rien à déplier : Chrome imprime le seul résumé (« Voir la réponse »),
+      # et la réponse disparaît du PDF. Chaque bloc est donc déplacé, déplié,
+      # dans une annexe en fin de document. À sa place, un renvoi cliquable
+      # porte son numéro (« Voir la réponse → annexe 3 »), de quoi le retrouver
+      # aussi sur une version imprimée. Chaque entrée d'annexe porte le titre de
+      # la section d'où elle vient et renvoie au texte ; les entrées sont
+      # regroupées sous le titre de leur chapitre, sans quoi les « Vous
+      # faites » ou « Exercice » de chaque chapitre ne se distingueraient plus.
+      #
+      # Seuls les blocs qui ouvrent leur ligne sont déplacés, les blocs
+      # imbriqués restant avec leur parent. Tout `<details>` resté en place
+      # reçoit l'attribut `open` : il s'imprime au moins déplié. Les blocs de
+      # code ne sont pas touchés — un cours de HTML peut y citer `<details>`.
+      #
+      # L'étape passe avant les crédits, qui doivent rester la dernière section.
+      - name: Déplacer les blocs repliables en annexe
+        run: |
+          cat > build/details-to-annex.js <<'JS'
+          const fs = require('fs');
+
+          const [, , mdPath] = process.argv;
+
+          const FENCE = /^\s*(```|~~~)/;
+          const count = (re, s) => (s.match(re) || []).length;
+          const OPEN = /<details\b/gi;
+          const CLOSE = /<\/details\s*>/gi;
+
+          const unescapeHtml = (s) =>
+            s.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
+
+          // Tout <details> hors bloc de code s'imprime déplié.
+          const forceOpen = (lines) => {
+            let fenced = false;
+            return lines.map((line) => {
+              if (FENCE.test(line)) {
+                fenced = !fenced;
+                return line;
+              }
+              return fenced ? line : line.replace(/<details\b(?![^>]*\bopen\b)/gi, '<details open');
+            });
+          };
+
+          const body = [];
+          const annexes = [];
+          let inFence = false;
+          let chapter = '';
+          let section = '';
+          let block = null;
+
+          // Le bloc complet est dans `block.lines` : il part en annexe, un
+          // renvoi prend sa place.
+          const move = () => {
+            const n = annexes.length + 1;
+            let summary = 'Voir le détail';
+
+            let raw = block.lines.join('\n');
+            raw = raw.replace(/<details\b[^>]*>/i, '');
+            // Le résumé du bloc suit directement la balise ouvrante : un
+            // <summary> plus loin appartient à un bloc imbriqué.
+            raw = raw.replace(/^\s*<summary\b[^>]*>([\s\S]*?)<\/summary\s*>/i, (m, text) => {
+              if (text.trim()) summary = text.trim();
+              return '';
+            });
+            // La dernière balise fermante est celle du bloc : les précédentes
+            // appartiennent aux blocs imbriqués.
+            const end = raw.search(/<\/details\s*>(?![\s\S]*<\/details\s*>)/i);
+            if (end >= 0) raw = raw.slice(0, end) + raw.slice(end).replace(/<\/details\s*>/i, '');
+
+            // Un bloc indenté (dans un élément de liste) est ramené en marge.
+            const content = raw
+              .split('\n')
+              .map((line) => (line.startsWith(block.indent) ? line.slice(block.indent.length) : line))
+              .join('\n')
+              .replace(/^\s*\n|\n\s*$/g, '');
+
+            annexes.push({ n, summary, chapter: block.chapter, title: block.section || summary, content });
+            body.push(
+              `${block.indent}<p class="renvoi-annexe" id="pdf-renvoi-${n}"><a href="#pdf-annexe-${n}">${summary} → annexe ${n}</a></p>`,
+              '',
+            );
+            block = null;
+          };
+
+          for (const line of fs.readFileSync(mdPath, 'utf8').split('\n')) {
+            if (block) {
+              block.lines.push(line);
+              if (FENCE.test(line)) {
+                block.fenced = !block.fenced;
+                continue;
+              }
+              if (block.fenced) continue;
+              block.depth += count(OPEN, line) - count(CLOSE, line);
+              if (block.depth <= 0) move();
+              continue;
+            }
+
+            if (FENCE.test(line)) inFence = !inFence;
+            if (inFence || FENCE.test(line)) {
+              body.push(line);
+              continue;
+            }
+
+            // Le chapitre courant (dernier intercalaire) et sa section (dernier
+            // titre). Le Readme, avant tout intercalaire, n'a pas de chapitre.
+            const heading = line.match(/^#{1,6}\s+(.*?)(\s+#+)?\s*$/);
+            if (heading) section = heading[1];
+            const divider = line.match(/<div class="intercalaire"[^>]*><span>(.*)<\/span><\/div>/);
+            if (divider) {
+              chapter = unescapeHtml(divider[1]);
+              section = '';
+            }
+
+            if (/^\s*<details\b/i.test(line)) {
+              block = {
+                lines: [line],
+                depth: count(OPEN, line) - count(CLOSE, line),
+                indent: line.match(/^\s*/)[0],
+                chapter,
+                section,
+                fenced: false,
+              };
+              if (block.depth <= 0) move();
+              continue;
+            }
+
+            body.push(line);
+          }
+
+          if (block) {
+            console.log(`::warning::<details> jamais refermé (section « ${block.section || block.chapter} ») : laissé en place.`);
+            body.push(...block.lines);
+          }
+
+          const out = [...body];
+          if (annexes.length) {
+            out.push('', '<div class="intercalaire" id="pdf-annexes"><span>Annexes</span></div>', '');
+            let current = '';
+            for (const { n, chapter: from, title, content } of annexes) {
+              // Un titre de chapitre à chaque changement de chapitre ; ses
+              // entrées descendent alors d'un niveau.
+              if (from && from !== current) out.push(`## ${from}`, '');
+              current = from;
+              out.push(
+                `<a id="pdf-annexe-${n}"></a>`,
+                '',
+                `${from ? '###' : '##'} Annexe ${n} — ${title}`,
+                '',
+                `<p class="retour-annexe"><a href="#pdf-renvoi-${n}">↩ Retour au texte</a></p>`,
+                '',
+                content,
+                '',
+              );
+            }
+          }
+
+          fs.writeFileSync(mdPath, forceOpen(out).join('\n'));
+
+          console.log(`Blocs <details> déplacés en annexe : ${annexes.length}`);
+          for (const { n, summary, chapter: from, title } of annexes) {
+            console.log(`  ${n}. ${from ? `${from} › ` : ''}${title} (« ${summary} »)`);
+          }
+          JS
+
+          node build/details-to-annex.js build/support-de-cours.md
+
       # Les chemins des images locales (`./res/logo.png`) sont écrits depuis la
       # racine du dépôt, où vivent le Readme et les chapitres. Le support, lui,
       # est assemblé et converti dans `build/`, et md-to-pdf y résout ces
@@ -843,6 +1011,15 @@ jobs:
             line-height: 1.35;
             max-width: 80%;
           }
+          /* Le renvoi qui remplace un bloc <details>, et le retour depuis
+             l'annexe : discrets, pour ne pas se confondre avec le texte. */
+          .renvoi-annexe,
+          .retour-annexe {
+            font-style: italic;
+          }
+          .retour-annexe {
+            font-size: 0.9em;
+          }
           /* Diagrammes mermaid, rendus en SVG à leur taille naturelle : jamais
              plus larges que la colonne, ni plus hauts que la zone imprimable
              (253 mm, marge de sécurité comprise). Une image ne se coupe pas :
@@ -859,6 +1036,21 @@ jobs:
             break-inside: avoid;
             page-break-inside: avoid;
           }
+          /* Un tableau ne se coupe pas : s'il ne tient pas en bas de page, il
+             passe entier à la suivante. Seul un tableau plus haut qu'une page
+             se coupe encore, et alors entre deux lignes, jamais au milieu
+             d'une ligne. */
+          table,
+          tr {
+            break-inside: avoid;
+            page-break-inside: avoid;
+          }
+          /* Un titre reste avec ce qui le suit : sans cela, un tableau renvoyé
+             à la page suivante laisserait son titre seul en bas de page. */
+          h1, h2, h3, h4, h5, h6 {
+            break-after: avoid;
+            page-break-after: avoid;
+          }
           CSS
 
           npx --yes "md-to-pdf@${MD_TO_PDF_VERSION}" support-de-cours.md \