From 13d26ded66e43ef4397c96338b8c22279bfa2f2e Mon Sep 17 00:00:00 2001
From: Pontoporeia <pontoporeia@happyngreen.fr>
Date: Sun, 10 May 2026 17:16:25 +0200
Subject: [PATCH] Replace HTMX+PHP file upload queues with client-side JS

Drops the session-backed HTMX incremental upload system in favour of a
single JS module that manages `File` objects client-side and injects
them into `FormData` on submit.

Key changes:

* `file-upload-queue.js`: client-side queues with validation, reorder
  (SortableJS), removal, dirty-state tracking, and fetch-based submit
  with manual redirect handling
* `fichiers-fragment.php`: empty queue containers for JS-managed queues;
  HTMX format switching still works with queue rehydration after swap;
  annexe uploads now support multiple files
* Form UI cleanup: moved existing files and cover preview into the
  `Fichiers` fieldset (edit mode); removed redundant queue labels while
  keeping labels for single-file inputs (`couverture`,
  `note d'intention`); added delete buttons for existing files
* `ThesisFileHandler.php`: added
  `handleTfeQueueFiles()`/`handleAnnexeQueueFiles()` reading from
  `$_FILES['queue_file']`; introduced `extractFilesSubArray()` for
  nested upload arrays; removed session-based queue handling
* `ThesisCreateController.php` &
  `ThesisEditController.php`: switched to extracted
  `['queue_file']` uploads
* `beforeunload-guard.js`: now also watches
  `window.__xamxamDirty`
* Deleted obsolete PHP upload/remove/reorder queue endpoints for
  `partage` and `admin`
* Cleaned up route dispatch in `partage/index.php`
* Misc form and styling updates in templates/CSS
* Added `docs/cms-migration-plan.html`
---
 TODO.md                                       |    6 +-
 app/public/admin/add.php                      |    2 +-
 app/public/admin/edit.php                     |    2 +-
 app/public/admin/remove-tfe-file.php          |   12 -
 app/public/admin/upload-tfe-file.php          |   12 -
 app/public/assets/css/form.css                |   19 +
 app/public/assets/js/beforeunload-guard.js    |    5 +-
 app/public/assets/js/file-upload-queue.js     |  479 ++++++-
 app/public/partage/fichiers-fragment.php      |  316 ++--
 app/public/partage/index.php                  |   15 +-
 app/public/partage/remove-tfe-file.php        |   47 -
 app/public/partage/tfe-queue-helper.php       |   78 -
 app/public/partage/upload-tfe-file.php        |  119 --
 .../Controllers/ThesisCreateController.php    |   27 +-
 app/src/Controllers/ThesisEditController.php  |   32 +-
 app/src/Controllers/ThesisFileHandler.php     |  262 ++--
 app/templates/admin/acces.php                 |   13 +
 .../partials/form/fieldset-files.php          |    2 +-
 app/templates/partials/form/form.php          |  102 --
 docs/cms-migration-plan.html                  | 1266 +++++++++++++++++
 20 files changed, 2063 insertions(+), 753 deletions(-)
 delete mode 100644 app/public/admin/remove-tfe-file.php
 delete mode 100644 app/public/admin/upload-tfe-file.php
 delete mode 100644 app/public/partage/remove-tfe-file.php
 delete mode 100644 app/public/partage/tfe-queue-helper.php
 delete mode 100644 app/public/partage/upload-tfe-file.php
 create mode 100644 docs/cms-migration-plan.html

diff --git a/TODO.md b/TODO.md
index 2c0f2cc..7410efc 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,7 +1,3 @@
 # TODO
 
-- [x] Fix cross-field validation contamination — wrap file-field.php in <form> to scope hx-include
-- [x] Add inline MIME/size validation to upload-tfe-file.php
-- [x] Add inline validation wrappers to PeerTube video/audio and direct video/audio inputs
-- [x] Fix validator fallback: if field_name key missing in $_FILES, try first available file
-- [x] Fix file-field.php admin_mode using $adminMode variable instead of undefined ADMIN_MODE constant
+- [x] Replace HTMX+PHP file upload queues with client-side JS
diff --git a/app/public/admin/add.php b/app/public/admin/add.php
index 2584de0..96232bb 100644
--- a/app/public/admin/add.php
+++ b/app/public/admin/add.php
@@ -55,7 +55,7 @@ function wasSelected($key, $value) {
 $isAdmin = true;
 $bodyClass = 'admin-body';
 $extraCss  = ['/assets/css/form.css'];
-$extraJs   = ['/assets/js/file-upload-queue.js', '/assets/js/beforeunload-guard.js'];
+$extraJs   = ['/assets/js/sortable.min.js', '/assets/js/file-upload-queue.js', '/assets/js/beforeunload-guard.js'];
 require_once APP_ROOT . '/templates/head.php';
 include APP_ROOT . '/templates/header.php';
 include APP_ROOT . '/templates/admin/add.php';
diff --git a/app/public/admin/edit.php b/app/public/admin/edit.php
index 10e88b5..9326cbf 100644
--- a/app/public/admin/edit.php
+++ b/app/public/admin/edit.php
@@ -40,7 +40,7 @@ try {
 
 $isAdmin = true; $bodyClass = 'admin-body';
 $extraCss  = ['/assets/css/form.css'];
-$extraJs   = ['/assets/js/file-upload-queue.js', '/assets/js/beforeunload-guard.js'];
+$extraJs   = ['/assets/js/sortable.min.js', '/assets/js/file-upload-queue.js', '/assets/js/beforeunload-guard.js'];
 require_once APP_ROOT . '/templates/head.php';
 include APP_ROOT . '/templates/header.php';
 include APP_ROOT . '/templates/admin/edit.php';
diff --git a/app/public/admin/remove-tfe-file.php b/app/public/admin/remove-tfe-file.php
deleted file mode 100644
index e34a813..0000000
--- a/app/public/admin/remove-tfe-file.php
+++ /dev/null
@@ -1,12 +0,0 @@
-<?php
-/**
- * remove-tfe-file.php (admin)
- *
- * Admin-gated wrapper for the remove-tfe-file fragment.
- */
-require_once __DIR__ . '/../../bootstrap.php';
-require_once __DIR__ . '/../../src/AdminAuth.php';
-App::boot();
-AdminAuth::requireLogin();
-
-require_once __DIR__ . '/../partage/remove-tfe-file.php';
diff --git a/app/public/admin/upload-tfe-file.php b/app/public/admin/upload-tfe-file.php
deleted file mode 100644
index 9156071..0000000
--- a/app/public/admin/upload-tfe-file.php
+++ /dev/null
@@ -1,12 +0,0 @@
-<?php
-/**
- * upload-tfe-file.php (admin)
- *
- * Admin-gated wrapper for the upload-tfe-file fragment.
- */
-require_once __DIR__ . '/../../bootstrap.php';
-require_once __DIR__ . '/../../src/AdminAuth.php';
-App::boot();
-AdminAuth::requireLogin();
-
-require_once __DIR__ . '/../partage/upload-tfe-file.php';
diff --git a/app/public/assets/css/form.css b/app/public/assets/css/form.css
index 4911274..69f2263 100644
--- a/app/public/assets/css/form.css
+++ b/app/public/assets/css/form.css
@@ -641,6 +641,25 @@
   flex-shrink: 0;
 }
 
+.fq-drag-handle {
+  flex-shrink: 0;
+  cursor: grab;
+  color: var(--text-tertiary);
+  font-size: 1.1rem;
+  line-height: 1;
+  padding: 0 var(--space-3xs);
+  user-select: none;
+  touch-action: none;
+}
+
+.fq-drag-handle:active {
+  cursor: grabbing;
+}
+
+.fq-container {
+  /* wrapper div emitted by renderQueueFragment */
+}
+
 /* ── Existing-files list (edit form) ─────────────────────────────────────── */
 
 .admin-file-list {
diff --git a/app/public/assets/js/beforeunload-guard.js b/app/public/assets/js/beforeunload-guard.js
index 6f908ec..f75e969 100644
--- a/app/public/assets/js/beforeunload-guard.js
+++ b/app/public/assets/js/beforeunload-guard.js
@@ -2,6 +2,7 @@
  * Beforeunload guard — prompts the user before navigating away from unsaved changes.
  *
  * Attach to any form with a data-beforeunload-guard attribute.
+ * Also watches window.__xamxamDirty (set by file-upload-queue.js).
  * No effect when JavaScript is unavailable (form posts normally).
  */
 (() => {
@@ -13,11 +14,11 @@
     for (const form of forms) {
         form.addEventListener('input', () => { dirty = true; });
         form.addEventListener('change', () => { dirty = true; });
-        form.addEventListener('submit', () => { dirty = false; });
+        form.addEventListener('submit', () => { dirty = false; window.__xamxamDirty = false; });
     }
 
     window.addEventListener('beforeunload', (e) => {
-        if (dirty) {
+        if (dirty || window.__xamxamDirty) {
             e.preventDefault();
         }
     });
diff --git a/app/public/assets/js/file-upload-queue.js b/app/public/assets/js/file-upload-queue.js
index 89f9374..713d31e 100644
--- a/app/public/assets/js/file-upload-queue.js
+++ b/app/public/assets/js/file-upload-queue.js
@@ -1,17 +1,31 @@
 /**
  * file-upload-queue.js
  *
- * Provides single-file previews for file inputs with the data-preview attribute
- * (couverture, note_intention, annexes, etc.).
+ * Client-side file upload queues for TFE, Video, Audio, and Annexe files.
+ * Replaces the old HTMX+PHP session-backed queue system.
  *
- * The multi-file TFE queue is rendered server-side via HTMX fragments
- * (upload-tfe-file.php / remove-tfe-file.php).
+ * Queues:
+ *   tfe    — main thesis files (multi-format)
+ *   video  — video files (non-PeerTube path)
+ *   audio  — audio files (non-PeerTube path)
+ *   annexe — annex files
  *
- * Exposes window.XamxamInitFileUploads() so HTMX fragments can re-bind
- * after swap without a global event listener.
+ * Architecture:
+ *   1. Intercept 'change' on all .tfe-file-picker inputs.
+ *   2. Validate MIME/extension/size client-side.
+ *   3. Store File objects in window.__xamxamQueues.
+ *   4. Render queue UI with SortableJS drag-to-reorder.
+ *   5. On form submit: inject all queued files into FormData and POST normally.
+ *
+ * The queue containers are rendered server-side by fichiers-fragment.php
+ * as empty <ul> elements with standard IDs.  This script populates them.
  */
-window.XamxamInitFileUploads = function () {
-	console.log("[file-upload-queue] XamxamInitFileUploads called");
+
+(function () {
+	"use strict";
+
+	// ── Constants ──────────────────────────────────────────────────────────
+
 	var ICON = {
 		pdf: "\uD83D\uDCC4",
 		video: "\uD83C\uDFAC",
@@ -22,15 +36,46 @@ window.XamxamInitFileUploads = function () {
 		other: "\uD83D\uDCCE",
 	};
 
+	var QUEUE_TYPES = ["tfe", "video", "audio", "annexe"];
+
+	var ALLOWED_BY_TYPE = {
+		tfe: {
+			exts: ["jpg","jpeg","png","gif","webp","pdf","mp4","webm","ogv","mov","mp3","ogg","oga","wav","flac","aac","m4a","vtt","zip","tar","gz","tgz"],
+			maxSize: function (f) { return (/\.pdf$/i.test(f.name) ? 100 : 500) * 1024 * 1024; },
+		},
+		video: {
+			exts: ["mp4","webm","ogv","mov"],
+			maxSize: function () { return 500 * 1024 * 1024; },
+		},
+		audio: {
+			exts: ["mp3","ogg","oga","wav","flac","aac","m4a"],
+			maxSize: function () { return 500 * 1024 * 1024; },
+		},
+		annexe: {
+			exts: ["pdf","zip","tar","gz","tgz"],
+			maxSize: function () { return 500 * 1024 * 1024; },
+		},
+	};
+
+	// ── State ──────────────────────────────────────────────────────────────
+
+	if (!window.__xamxamQueues) {
+		window.__xamxamQueues = {};
+	}
+	var queues = window.__xamxamQueues;
+	QUEUE_TYPES.forEach(function (qt) {
+		if (!Array.isArray(queues[qt])) queues[qt] = [];
+	});
+
+	// ── Helpers ────────────────────────────────────────────────────────────
+
 	function iconFor(file) {
-		var t = file.type || "",
-			n = file.name.toLowerCase();
+		var t = (file.type || "").toLowerCase(),
+			n = (file.name || "").toLowerCase();
 		if (/^image\//.test(t)) return ICON.image;
 		if (t === "application/pdf" || /\.pdf$/.test(n)) return ICON.pdf;
-		if (/^video\//.test(t) || /\.(mp4|webm|mov|ogv)$/.test(n))
-			return ICON.video;
-		if (/^audio\//.test(t) || /\.(mp3|ogg|oga|wav|flac|aac|m4a)$/.test(n))
-			return ICON.audio;
+		if (/^video\//.test(t) || /\.(mp4|webm|mov|ogv)$/.test(n)) return ICON.video;
+		if (/^audio\//.test(t) || /\.(mp3|ogg|oga|wav|flac|aac|m4a)$/.test(n)) return ICON.audio;
 		if (/\.(zip|tar|gz|tgz)$/.test(n)) return ICON.zip;
 		if (/\.vtt$/.test(n)) return ICON.vtt;
 		return ICON.other;
@@ -52,58 +97,356 @@ window.XamxamInitFileUploads = function () {
 		});
 	}
 
-	// ── Single-file previews (data-preview attribute) ────────────────────
-	document
-		.querySelectorAll('input[type="file"][data-preview]')
-		.forEach(function (input) {
-			if (input.id === "tfe-files-input") return;
-			console.log(
-				"[file-upload-queue] binding preview for",
-				input.id,
-				"multiple=",
-				input.multiple,
-			);
-			var container = document.getElementById(
-				input.getAttribute("data-preview"),
-			);
-			if (!container) return;
-			input.onchange = function () {
-				container.innerHTML = "";
-				Array.from(input.files).forEach(function (file) {
-					var item = document.createElement("div");
-					item.className = "fp-item";
-					if (/^image\//.test(file.type)) {
-						var img = document.createElement("img");
-						img.className = "fp-thumb";
-						img.alt = file.name;
-						var reader = new FileReader();
-						reader.onload = function (e) {
-							img.src = e.target.result;
-						};
-						reader.readAsDataURL(file);
-						item.appendChild(img);
-					} else {
-						var ic = document.createElement("span");
-						ic.className = "fp-icon";
-						ic.textContent = iconFor(file);
-						item.appendChild(ic);
-					}
-					var meta = document.createElement("span");
-					meta.className = "fp-meta";
-					meta.innerHTML =
-						'<span class="fp-name">' +
-						esc(file.name) +
-						'</span><span class="fp-size">' +
-						humanSize(file.size) +
-						"</span>";
-					item.appendChild(meta);
-					container.appendChild(item);
-				});
-			};
-		});
-};
+	function ext(fn) {
+		var m = fn.match(/\.([^./]+)$/);
+		return m ? m[1].toLowerCase() : "";
+	}
 
-// Bootstrap on page load
-if (document.readyState === "loading")
-	document.addEventListener("DOMContentLoaded", window.XamxamInitFileUploads);
-else window.XamxamInitFileUploads();
+	function genFileId() {
+		return "fq_" + Math.random().toString(36).slice(2, 10) + "_" + Date.now().toString(36);
+	}
+
+	// ── Validation ─────────────────────────────────────────────────────────
+
+	function validateFile(file, queueType) {
+		var rules = ALLOWED_BY_TYPE[queueType];
+		if (!rules) return "Type de file d'attente inconnu.";
+
+		var fileExt = ext(file.name);
+		if (fileExt && rules.exts.indexOf(fileExt) === -1) {
+			return "Type de fichier non accepté : ." + fileExt + " (" + file.name + ")";
+		}
+
+		var max = rules.maxSize(file);
+		if (file.size > max) {
+			var maxMb = Math.round(max / 1024 / 1024);
+			return "Fichier trop volumineux (" + (file.size / 1024 / 1024).toFixed(1) + " MB). Maximum : " + maxMb + " MB.";
+		}
+
+		return null;
+	}
+
+	// ── Rendering ──────────────────────────────────────────────────────────
+
+	function getQueueContainerId(qt) {
+		return {
+			tfe:    "tfe-file-queue-container",
+			video:  "video-file-queue-container",
+			audio:  "audio-file-queue-container",
+			annexe: "annexe-file-queue-container",
+		}[qt];
+	}
+
+	function getQueueUlId(qt) {
+		return {
+			tfe:    "tfe-file-queue",
+			video:  "video-file-queue",
+			audio:  "audio-file-queue",
+			annexe: "annexe-file-queue",
+		}[qt];
+	}
+
+	function getEmptyId(qt) {
+		return {
+			tfe:    "tfe-file-queue-empty",
+			video:  "video-file-queue-empty",
+			audio:  "audio-file-queue-empty",
+			annexe: "annexe-file-queue-empty",
+		}[qt];
+	}
+
+	function renderQueue(queueType) {
+		var container = document.getElementById(getQueueContainerId(queueType));
+		if (!container) return;
+
+		var files = queues[queueType];
+		var ulId   = getQueueUlId(queueType);
+		var emptyId  = getEmptyId(queueType);
+
+		var html = '<ul id="' + ulId + '" class="tfe-file-queue" aria-label="Fichiers sélectionnés">';
+		for (var i = 0; i < files.length; i++) {
+			var f  = files[i];
+			var ic = iconFor(f);
+			var id = f.__xamxamId || "";
+			html += '<li class="fq-item" data-fq-id="' + id + '">' +
+				'<span class="fq-drag-handle" aria-hidden="true">&#8942;</span>' +
+				'<span class="fq-icon">' + ic + '</span>' +
+				'<span class="fq-info">' +
+				'<span class="fq-name">' + esc(f.name) + '</span>' +
+				'<span class="fq-size">' + humanSize(f.size) + '</span>' +
+				'</span>' +
+				'<button type="button" class="admin-btn-remove fq-remove"' +
+				' aria-label="Retirer ' + esc(f.name) + '"' +
+				' data-action="xamxam-remove"' +
+				' data-queue="' + queueType + '"' +
+				' data-file-id="' + id + '">&#x2715;</button>' +
+				'</li>';
+		}
+		html += '</ul>';
+
+		var emptyStyle = files.length > 0 ? ' style="display:none"' : '';
+		html += '<p id="' + emptyId + '" class="tfe-queue-empty"' + emptyStyle + '>Aucun fichier sélectionné.</p>';
+
+		container.innerHTML = html;
+
+		// Wire Sortable
+		if (window.Sortable && files.length > 1) {
+			var list = container.querySelector("ul.tfe-file-queue");
+			if (list) {
+				Sortable.create(list, {
+					handle: ".fq-drag-handle",
+					animation: 150,
+					onEnd: function () {
+						reorderFromDOM(queueType);
+					},
+				});
+			}
+		}
+
+		// Mark form as dirty
+		markDirty();
+	}
+
+	function reorderFromDOM(queueType) {
+		var container = document.getElementById(getQueueContainerId(queueType));
+		if (!container) return;
+		var ids = Array.from(container.querySelectorAll("[data-fq-id]")).map(function (li) { return li.dataset.fqId; });
+		var files = queues[queueType];
+		var byId = {};
+		files.forEach(function (f) { byId[f.__xamxamId] = f; });
+		var reordered = ids.map(function (id) { return byId[id]; }).filter(Boolean);
+		files.forEach(function (f) {
+			if (reordered.indexOf(f) === -1) reordered.push(f);
+		});
+		queues[queueType] = reordered;
+		markDirty();
+	}
+
+	// ── Operations ─────────────────────────────────────────────────────────
+
+	function addFiles(queueType, newFiles) {
+		var errors = [];
+		var addedFiles = [];
+		for (var i = 0; i < newFiles.length; i++) {
+			var err = validateFile(newFiles[i], queueType);
+			if (err) {
+				errors.push(err);
+			} else {
+				newFiles[i].__xamxamId = genFileId();
+				addedFiles.push(newFiles[i]);
+			}
+		}
+
+		if (addedFiles.length > 0) {
+			queues[queueType] = queues[queueType].concat(addedFiles);
+			renderQueue(queueType);
+		}
+
+		return errors;
+	}
+
+	function removeFile(queueType, fileId) {
+		var idx = -1;
+		for (var i = 0; i < queues[queueType].length; i++) {
+			if (queues[queueType][i].__xamxamId === fileId) { idx = i; break; }
+		}
+		if (idx >= 0) {
+			queues[queueType].splice(idx, 1);
+			renderQueue(queueType);
+		}
+	}
+
+	// ── FormData injection on submit ───────────────────────────────────────
+
+	function injectQueuesIntoFormData(form, nativeFormData) {
+		var fd = nativeFormData || new FormData();
+		QUEUE_TYPES.forEach(function (qt) {
+			var files = queues[qt];
+			for (var i = 0; i < files.length; i++) {
+				fd.append("queue_file[" + qt + "][]", files[i], files[i].name);
+			}
+		});
+
+		// Append queue order hints so the server can validate user ordering
+		QUEUE_TYPES.forEach(function (qt) {
+			var ids = queues[qt].map(function (f) { return f.__xamxamId; });
+			if (ids.length > 0) {
+				fd.append("queue_order[" + qt + "]", JSON.stringify(ids));
+			}
+		});
+
+		return fd;
+	}
+
+	// ── Dirty tracking integration ─────────────────────────────────────────
+
+	function markDirty() {
+		// Set a global flag that beforeunload-guard.js can check
+		window.__xamxamDirty = true;
+	}
+
+	function markClean() {
+		window.__xamxamDirty = false;
+	}
+
+	// ── Validate callback for inline validation fragments ──────────────────
+
+	function showValidationMsg(input, msg) {
+		// Find the .file-validation-msg element scoped to this input's form
+		var form = input.closest(".file-validation-form");
+		var msgEl = form ? form.querySelector(".file-validation-msg") : null;
+		if (msgEl) {
+			msgEl.innerHTML = '<span class="file-validation-error">' + esc(msg) + '</span>';
+		}
+	}
+
+	function clearValidationMsg(input) {
+		var form = input.closest(".file-validation-form");
+		var msgEl = form ? form.querySelector(".file-validation-msg") : null;
+		if (msgEl) {
+			msgEl.innerHTML = "";
+		}
+	}
+
+	// ── Binding ────────────────────────────────────────────────────────────
+
+	function bindQueueInputs() {
+		document.querySelectorAll(".tfe-file-picker").forEach(function (input) {
+			if (input.dataset.xamxamBound) return;
+			input.dataset.xamxamBound = "1";
+
+			var queueType = null;
+			// Determine queue type from input attributes
+			if (input.id === "tfe-files-input") queueType = "tfe";
+			else if (input.id === "video-files-input") queueType = "video";
+			else if (input.id === "audio-files-input") queueType = "audio";
+			else if (input.id === "annexe-files-input") queueType = "annexe";
+			else if (input.getAttribute("hx-vals")) {
+				// Legacy: try to parse from hx-vals
+				try {
+					var vals = JSON.parse(input.getAttribute("hx-vals"));
+					if (vals && vals.queue_type && QUEUE_TYPES.indexOf(vals.queue_type) >= 0) {
+						queueType = vals.queue_type;
+					}
+				} catch (_) { /* ignore */ }
+			}
+
+			if (!queueType) return;
+
+			input.addEventListener("change", function () {
+				clearValidationMsg(input);
+				var files = Array.from(input.files || []);
+				var errors = addFiles(queueType, files);
+				if (errors.length > 0) {
+					showValidationMsg(input, errors.join("; "));
+				}
+				// Reset file input so the same file can be re-selected
+				input.value = "";
+			});
+		});
+	}
+
+	/**
+	 * Delegate click events for remove buttons (these are regenerated on
+	 * every renderQueue call, so live delegation is needed).
+	 */
+	function bindRemoveButtons() {
+		document.addEventListener("click", function (e) {
+			var btn = e.target.closest("button[data-action='xamxam-remove']");
+			if (!btn) return;
+			e.preventDefault();
+			var qt = btn.getAttribute("data-queue");
+			var fid = btn.getAttribute("data-file-id");
+			if (qt && fid) removeFile(qt, fid);
+		});
+	}
+
+	// ── Form submit interception ───────────────────────────────────────────
+
+	function bindFormSubmit() {
+		document.querySelectorAll("form[data-beforeunload-guard]").forEach(function (form) {
+			if (form.dataset.xamxamFormBound) return;
+			form.dataset.xamxamFormBound = "1";
+
+			form.addEventListener("submit", function (e) {
+				var hasFiles = QUEUE_TYPES.some(function (qt) { return queues[qt].length > 0; });
+				if (!hasFiles) return; // Normal submit
+
+				// Check if the form can accept multipart
+				if (form.enctype !== "multipart/form-data") return;
+
+				e.preventDefault();
+
+				// Build FormData from form fields + inject queued files
+				var fd = new FormData(form);
+
+				// Remove stale file input artifacts (consumed by change handler)
+				QUEUE_TYPES.forEach(function (qt) {
+					fd.delete("tfe");
+					fd.delete("video");
+					fd.delete("audio");
+					fd.delete("annexe");
+				});
+
+				fd = injectQueuesIntoFormData(form, fd);
+
+				markClean();
+
+				// Use fetch so we can inspect the response before navigation.
+				// The server either redirects (302 → we navigate to that URL)
+				// or returns the form page with errors (200 → replace the page).
+				fetch(form.getAttribute("action") || "", {
+					method: "POST",
+					body: fd,
+					redirect: "manual",
+				}).then(function (resp) {
+					if (resp.type === "opaqueredirect" || resp.status === 302 || resp.status === 301) {
+						// Browser redirect — navigate the whole page
+						window.location.href = resp.headers.get("Location") || form.getAttribute("action");
+						return;
+					}
+					// Success or error — render the HTML response
+					return resp.text();
+				}).then(function (html) {
+					if (!html) return;
+					document.open();
+					document.write(html);
+					document.close();
+					// Re-bind after DOM replacement (for error re-renders)
+					setTimeout(window.XamxamInitFileUploads, 0);
+				}).catch(function () {
+					// Network error — fall back to native submit
+					form.submit();
+				});
+			});
+		});
+	}
+
+	// ── Public API (called by HTMX afterSwap scripts) ──────────────────────
+
+	window.XamxamInitFileUploads = function () {
+		bindQueueInputs();
+	};
+
+	window.XamxamInitQueues = function () {
+		// Re-render all queues from in-memory state (used when format switching
+		// replaces the queues container via HTMX).
+		QUEUE_TYPES.forEach(function (qt) {
+			var container = document.getElementById(getQueueContainerId(qt));
+			if (container && queues[qt].length > 0) {
+				renderQueue(qt);
+			}
+		});
+	};
+
+	// ── Bootstrap ──────────────────────────────────────────────────────────
+
+	bindRemoveButtons();
+	bindFormSubmit();
+
+	if (document.readyState === "loading") {
+		document.addEventListener("DOMContentLoaded", window.XamxamInitFileUploads);
+	} else {
+		window.XamxamInitFileUploads();
+	}
+})();
diff --git a/app/public/partage/fichiers-fragment.php b/app/public/partage/fichiers-fragment.php
index eac5247..1b96664 100644
--- a/app/public/partage/fichiers-fragment.php
+++ b/app/public/partage/fichiers-fragment.php
@@ -6,18 +6,19 @@
  * Called on every format checkbox change so the Fichiers fieldset adapts.
  *
  * Fixed inputs (always present in #format-fichiers-block):
- *   1. Image de couverture (optional)
- *   2. Note d'intention (PDF, required unless adminMode)
- *   3. TFE — multi-file upload (required unless adminMode)
- *   4. Annexes checkbox + file input
+ *   1. Image de couverture (optional)     — single file, plain input
+ *   2. Note d'intention (PDF, required)   — single file, plain input
+ *   3. TFE — multi-file JS queue          — client-side, orderable
+ *   4. Annexes checkbox + JS queue        — client-side, orderable
  *
- * Format-specific extra inputs (separate #format-extras-block so toggling
- * formats does not destroy file queue state):
+ * Format-specific extra inputs (#format-extras-block):
  *   - Site web   → URL field only
- *   - Vidéo      → PeerTube upload or direct file input
- *   - Audio      → PeerTube upload or direct file input
- *   - (all others: Écriture, Performance, Objet éditorial, Installation, Autre)
- *     → no extra input needed beyond the standard TFE file upload
+ *   - Vidéo      → PeerTube single upload  OR  multi-file JS queue
+ *   - Audio      → PeerTube single upload  OR  multi-file JS queue
+ *
+ * File queues are managed entirely client-side by file-upload-queue.js.
+ * This fragment only provides the empty container elements and the file
+ * picker inputs.
  *
  * Expected POST:
  *   formats[]       — array of selected format_type IDs
@@ -59,7 +60,6 @@ $hasVideo   = $videoId   && in_array($videoId,   $selectedFormats, true);
 $hasAudio   = $audioId   && in_array($audioId,   $selectedFormats, true);
 $hasImage   = $imageId   && in_array($imageId,   $selectedFormats, true);
 
-// Show standard file inputs unless *only* Site web is selected
 $hasNonWebFormat = !empty(array_filter(
     $selectedFormats,
     fn($id) => $id !== $siteWebId
@@ -89,8 +89,8 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
         <fieldset class="admin-checkbox-group"
                   <?= !$adminMode ? 'required aria-required="true"' : '' ?>
                   hx-post="<?= htmlspecialchars($hxPost) ?>"
-                  hx-target="#format-extras-block"
-                  hx-select="#format-extras-block"
+                  hx-target="#format-fichiers-block"
+                  hx-select="#format-fichiers-block"
                   hx-trigger="change"
                   hx-include="this, [name='website_url'], [name='admin_mode'], [name='edit_mode'], [name='_cover'], [name='has_annexes']"
                   hx-swap="outerHTML">
@@ -116,28 +116,92 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
 <fieldset>
     <legend>Fichiers</legend>
 
+    <?php
+    // Existing files + cover preview (edit mode only, initial render — not re-sent on HTMX swaps)
+    $_efiles = $currentFiles ?? [];
+    $_cover  = $_POST['_cover'] ?? null;
+    if ($editMode && (!empty($_efiles) || $_cover)):
+    ?>
+    <div class="admin-form-group">
+        <ul id="existing-files-sortable" class="admin-file-list">
+            <?php
+            // ── Couverture preview ──
+            if ($_cover): ?>
+            <li class="admin-file-list-item">
+                <span class="admin-file-icon-col">🖼️</span>
+                <span class="admin-file-info">
+                    <span class="admin-file-name">Couverture</span>
+                    <span class="admin-file-meta-row">
+                        <img src="/media?path=<?= urlencode($_cover) ?>"
+                             alt="Couverture actuelle" style="max-height:120px;border-radius:var(--radius);margin-top:var(--space-3xs);">
+                    </span>
+                    <label class="admin-checkbox-label" style="margin-top:var(--space-3xs);">
+                        <input type="checkbox" name="remove_cover" value="1"> Supprimer
+                    </label>
+                </span>
+            </li>
+            <?php endif; ?>
+            <?php
+            // ── Existing files ──
+            $_thesisFilesList = array_values(array_filter($_efiles, fn($f) => $f["file_type"] !== "cover"));
+            foreach ($_thesisFilesList as $_f):
+                $_fExt = strtolower(pathinfo($_f["file_path"] ?? "", PATHINFO_EXTENSION));
+                $_fType = $_f["file_type"] ?? "other";
+                $_fIcon = match (true) {
+                    $_fType === "main" || $_fExt === "pdf" => "📄",
+                    in_array($_fExt, ["jpg","jpeg","png","gif","webp"]) => "🖼️",
+                    $_fType === "video" || in_array($_fExt, ["mp4","webm","mov","ogv"]) => "🎬",
+                    $_fType === "audio" || in_array($_fExt, ["mp3","ogg","wav","flac","aac","m4a"]) => "🔊",
+                    $_fType === "caption" || $_fExt === "vtt" => "💬",
+                    $_fType === "website" => "🌐",
+                    default => "📎",
+                };
+                $_fIsExternal = str_starts_with($_f["file_path"] ?? "", "http://") || str_starts_with($_f["file_path"] ?? "", "https://");
+                $_fLinkHref = $_fIsExternal ? htmlspecialchars($_f["file_path"]) : "/media?path=" . urlencode($_f["file_path"]);
+            ?>
+            <li class="admin-file-list-item" data-file-id="<?= (int)$_f["id"] ?>">
+                <input type="hidden" name="file_sort_order[]" value="<?= (int)$_f["id"] ?>">
+                <span class="admin-file-icon-col"><?= $_fIcon ?></span>
+                <span class="admin-file-info">
+                    <a href="<?= $_fLinkHref ?>" target="_blank" rel="noopener" class="admin-file-name">
+                        <?= htmlspecialchars($_f["file_name"] ?? basename($_f["file_path"])) ?>
+                    </a>
+                    <span class="admin-file-meta-row">
+                        <span class="admin-file-type-badge"><?= htmlspecialchars($_fType) ?></span>
+                        <?php if (!empty($_f["file_size"]) && $_f["file_size"] > 0): ?>
+                        <span class="admin-file-size"><?= number_format($_f["file_size"] / 1024 / 1024, 2) ?> MB</span>
+                        <?php endif; ?>
+                    </span>
+                    <input type="text" name="file_label[<?= (int)$_f["id"] ?>]"
+                           value="<?= htmlspecialchars($_f["display_label"] ?? "") ?>"
+                           placeholder="Légende / description (optionnel)"
+                           class="admin-file-label-input">
+                </span>
+                <input type="hidden" name="delete_files[]" value="<?= (int)$_f["id"] ?>" disabled>
+                <button type="button"
+                        class="admin-btn-remove fq-remove"
+                        onclick="this.previousElementSibling.disabled=false;this.closest('li').style.opacity='0.4';this.disabled=true;"
+                        aria-label="Supprimer <?= htmlspecialchars($_f["file_name"] ?? basename($_f["file_path"])) ?>">&#x2715;</button>
+            </li>
+            <?php endforeach; ?>
+        </ul>
+    </div>
+    <?php endif; ?>
+
     <!-- ── 1. Couverture (always) ── -->
     <div>
     <?php
     $_cover = $_POST['_cover'] ?? null;
-    if ($editMode && $_cover): ?>
-    <div class="admin-banner-preview">
-        <img src="/media?path=<?= urlencode($_cover) ?>"
-             alt="Couverture actuelle" style="max-height:180px;">
-        <label class="admin-checkbox-label">
-            <input type="checkbox" name="remove_cover" value="1"> Supprimer la couverture
-        </label>
-    </div>
-    <?php endif;
-    $name     = 'couverture';
-    $label    = 'Image de couverture (optionnel) :';
-    $accept   = 'image/jpeg,image/png,image/webp';
-    $hint     = ($editMode && $_cover)
-        ? 'Laisser vide pour conserver la couverture actuelle. JPG, PNG ou WEBP. Max 20 MB.'
-        : 'JPG, PNG ou WEBP. Format 4:3 recommandé. Max 20 MB.';
-    $required = false;
-    $id       = 'couverture';
-    include APP_ROOT . '/templates/partials/form/file-field.php';
+    // Only show upload field in add mode or when no existing cover
+    if (!$editMode || !$_cover):
+        $name     = 'couverture';
+        $label    = 'Image de couverture (optionnel)';
+        $accept   = 'image/jpeg,image/png,image/webp';
+        $hint     = 'JPG, PNG ou WEBP. Format 4:3 recommandé. Max 20 MB.';
+        $required = false;
+        $id       = 'couverture';
+        include APP_ROOT . '/templates/partials/form/file-field.php';
+    endif;
     unset($_cover);
     ?>
     </div>
@@ -146,9 +210,9 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
     <div>
     <?php
     $name     = 'note_intention';
-    $label    = 'Note d\'intention :';
+    $label    = 'Note d\'intention';
     $accept   = '.pdf';
-    $hint     = 'PDF uniquement. Max 100 MB. Si votre fichier est trop lourd, compressez-le avec <a href="https://www.bentopdf.com" target="_blank" rel="noopener">bentopdf.com</a>.';
+    $hint     = 'PDF uniquement. Max 100 MB. Si votre fichier est trop lourd, compressez-le avec <a href="https://www.bentopdf.com" target="_blank" rel="noopener">bentopdf.com</a>.';
     $hintRaw  = true;
     $required = !$adminMode;
     $id       = 'note_intention';
@@ -156,55 +220,29 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
     ?>
     </div>
 
-    <!-- ── 3. TFE (always) ── -->
+    <!-- ── 3. TFE — multi-file client-side JS queue (always) ── -->
     <div class="admin-form-group admin-files-fieldgroup">
-        <label>TFE<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?> :</label>
+        <label for="tfe-files-input">TFE<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
         <div class="admin-file-input">
-            <?php
-            $tfeUploadUrl = $adminMode ? '/admin/upload-tfe-file.php' : '/partage/upload-tfe-file';
-            $tfeRemoveUrl = $adminMode ? '/admin/remove-tfe-file.php' : '/partage/remove-tfe-file';
-            $tfeValidateUrl = $adminMode ? '/admin/validate-file-fragment.php' : '/partage/validate-file-fragment';
-            ?>
-            <!-- Inline validation form (scoped) -->
-            <form class="file-validation-form"
-                  hx-post="<?= htmlspecialchars($tfeValidateUrl) ?>"
-                  hx-encoding="multipart/form-data"
-                  hx-trigger="change from:#tfe-files-input"
-                  hx-target="find .file-validation-msg"
-                  hx-swap="innerHTML"
-                  hx-sync="replace">
-                <input type="hidden" name="field_name" value="tfe">
-                <input type="hidden" name="admin_mode" value="<?= $adminMode ? '1' : '0' ?>">
-                <input type="file" id="tfe-files-input"
-                       name="tfe"
-                       accept=".pdf,.jpg,.jpeg,.png,.gif,.webp,.mp4,.webm,.ogv,.mov,.mp3,.ogg,.oga,.wav,.flac,.aac,.m4a,.vtt,.zip,.tar,.gz,.tgz"
-                       class="tfe-file-picker"
-                       hx-encoding="multipart/form-data"
-                       hx-post="<?= htmlspecialchars($tfeUploadUrl) ?>"
-                       hx-target="#tfe-file-queue-container"
-                       hx-select="#tfe-file-queue-container"
-                       hx-swap="outerHTML"
-                       hx-trigger="change"
-                       hx-include="[name='csrf_token'], [name='admin_mode']">
-                <div class="file-validation-msg" aria-live="polite"></div>
-            </form>
+            <input type="file" id="tfe-files-input"
+                   name="tfe"
+                   accept=".pdf,.jpg,.jpeg,.png,.gif,.webp,.mp4,.webm,.ogv,.mov,.mp3,.ogg,.oga,.wav,.flac,.aac,.m4a,.vtt,.zip,.tar,.gz,.tgz"
+                   class="tfe-file-picker"
+                   <?= !$adminMode ? 'required' : '' ?>>
             <progress id="tfe-upload-progress" value="0" max="100" style="display:none;width:100%;margin-top:var(--space-3xs);"></progress>
             <small class="admin-file-hint">
-                PDF (max 100 MB) · Images (JPG/PNG/GIF/WEBP).
+                PDF (max 100 MB) · Images (JPG/PNG/GIF/WEBP). Glissez pour réordonner.
                 PDFs trop lourds ? <a href="https://www.bentopdf.com" target="_blank" rel="noopener">https://bentopdf.com/</a>
             </small>
-            <div id="tfe-file-queue-container">
-                <?php
-                // Render initial queue state from session
-                $initialUploads = $_SESSION['tfe_uploads'] ?? [];
-                require_once APP_ROOT . '/public/partage/tfe-queue-helper.php';
-                renderQueueFragment($initialUploads, $tfeRemoveUrl);
-                ?>
+            <!-- Queue container — populated by file-upload-queue.js -->
+            <div id="tfe-file-queue-container" class="fq-container" data-queue-type="tfe">
+                <ul id="tfe-file-queue" class="tfe-file-queue" aria-label="Fichiers sélectionnés"></ul>
+                <p id="tfe-file-queue-empty" class="tfe-queue-empty">Aucun fichier sélectionné.</p>
             </div>
         </div>
     </div>
 
-    <!-- ── Annexes ── -->
+    <!-- ── 4. Annexes — multi-file client-side JS queue ── -->
     <div id="annexes-input-block">
         <div class="admin-form-group">
             <label class="admin-checkbox-label">
@@ -220,25 +258,31 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
             </label>
         </div>
         <?php if ($hasAnnexesChecked): ?>
-        <div>
-        <?php
-        $name     = 'annexes';
-        $label    = 'Annexes :';
-        $accept   = '.pdf,.zip,.tar,.gz';
-        $hint     = 'PDF ou archives ZIP/TAR. Max 500 MB.';
-        $required = !$adminMode;
-        $multiple = true;
-        include APP_ROOT . '/templates/partials/form/file-field.php';
-        ?>
+        <div class="admin-form-group admin-files-fieldgroup">
+            <label for="annexe-files-input">Annexes<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
+            <div class="admin-file-input">
+                <input type="file" id="annexe-files-input"
+                       name="annexe" multiple
+                       accept=".pdf,.zip,.tar,.gz"
+                       class="tfe-file-picker"
+                       <?= !$adminMode ? 'required' : '' ?>>
+                <small class="admin-file-hint">PDF ou archives ZIP/TAR. Max 500 MB. Glissez pour réordonner.</small>
+                <!-- Queue container — populated by file-upload-queue.js -->
+                <div id="annexe-file-queue-container" class="fq-container" data-queue-type="annexe">
+                    <ul id="annexe-file-queue" class="tfe-file-queue" aria-label="Annexes sélectionnées"></ul>
+                    <p id="annexe-file-queue-empty" class="tfe-queue-empty">Aucun fichier sélectionné.</p>
+                </div>
+            </div>
         </div>
+        <script>if(window.XamxamInitQueues)window.XamxamInitQueues();</script>
         <?php endif; ?>
     </div>
 
-    <!-- ── Format-specific extras (swappable, inside Fichiers fieldset) ── -->
+    <!-- ── Format-specific extras (swappable) ── -->
     <div id="format-extras-block" style="display:flex;flex-direction:column;gap:var(--space-s);">
         <?php if ($hasSiteWeb): ?>
         <div class="admin-form-group">
-            <label for="website_url">URL du site<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?> :</label>
+            <label for="website_url">URL du site<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
             <div class="admin-file-input">
                 <input type="url" id="website_url" name="website_url"
                        value="<?= $websiteUrl ?>"
@@ -252,43 +296,29 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
         <?php if ($hasVideo): ?>
         <?php if ($peerTubeEnabled): ?>
         <div class="admin-form-group">
-            <label for="peertube_video">Fichier vidéo (PeerTube)<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?> :</label>
-            <div class="admin-file-input"
-                 hx-post="<?= htmlspecialchars($tfeValidateUrl) ?>"
-                 hx-encoding="multipart/form-data"
-                 hx-trigger="change from:#peertube_video"
-                 hx-target="find .file-validation-msg"
-                 hx-swap="innerHTML"
-                 hx-sync="replace"
-                 hx-include="find [name='field_name'], find [name='admin_mode'], #peertube_video">
-                <input type="hidden" name="field_name" value="tfe">
-                <input type="hidden" name="admin_mode" value="<?= $adminMode ? '1' : '0' ?>">
+            <label for="peertube_video">Vidéo PeerTube<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
+            <div class="admin-file-input">
                 <input type="file" id="peertube_video" name="peertube_video"
                        accept="video/mp4,video/webm,video/ogg,video/quicktime,.mp4,.webm,.ogv,.mov"
                        <?= !$adminMode ? 'required' : '' ?>>
-                <div class="file-validation-msg" aria-live="polite"></div>
-                <small>MP4, WebM ou MOV. La vidéo sera hébergée sur PeerTube et intégrée
-                comme lecteur embarqué sur la page du TFE. Max 500 MB.</small>
+                <small>MP4, WebM ou MOV. La vidéo sera hébergée sur PeerTube. Max 500 MB.</small>
             </div>
         </div>
         <?php else: ?>
-        <div class="admin-form-group">
-            <label for="tfe-video-upload">Fichier vidéo<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?> :</label>
-            <div class="admin-file-input"
-                 hx-post="<?= htmlspecialchars($tfeValidateUrl) ?>"
-                 hx-encoding="multipart/form-data"
-                 hx-trigger="change from:#tfe-video-upload"
-                 hx-target="find .file-validation-msg"
-                 hx-swap="innerHTML"
-                 hx-sync="replace"
-                 hx-include="find [name='field_name'], find [name='admin_mode'], #tfe-video-upload">
-                <input type="hidden" name="field_name" value="tfe">
-                <input type="hidden" name="admin_mode" value="<?= $adminMode ? '1' : '0' ?>">
-                <input type="file" id="tfe-video-upload" name="files[]"
+        <div class="admin-form-group admin-files-fieldgroup">
+            <label for="video-files-input">Vidéo<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
+            <div class="admin-file-input">
+                <input type="file" id="video-files-input"
+                       name="video"
                        accept="video/mp4,video/webm,video/ogg,video/quicktime,.mp4,.webm,.ogv,.mov"
+                       class="tfe-file-picker"
                        <?= !$adminMode ? 'required' : '' ?>>
-                <div class="file-validation-msg" aria-live="polite"></div>
-                <small>MP4, WebM ou MOV. Max 500 MB.</small>
+                <small class="admin-file-hint">MP4, WebM ou MOV. Max 500 MB par fichier. Glissez pour réordonner.</small>
+                <!-- Queue container — populated by file-upload-queue.js -->
+                <div id="video-file-queue-container" class="fq-container" data-queue-type="video">
+                    <ul id="video-file-queue" class="tfe-file-queue" aria-label="Fichiers sélectionnés"></ul>
+                    <p id="video-file-queue-empty" class="tfe-queue-empty">Aucun fichier sélectionné.</p>
+                </div>
             </div>
         </div>
         <?php endif; ?>
@@ -297,66 +327,40 @@ $hasAnnexesChecked = !empty($_POST['has_annexes']);
         <?php if ($hasAudio): ?>
         <?php if ($peerTubeEnabled): ?>
         <div class="admin-form-group">
-            <label for="peertube_audio">Fichier audio (PeerTube)<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?> :</label>
-            <div class="admin-file-input"
-                 hx-post="<?= htmlspecialchars($tfeValidateUrl) ?>"
-                 hx-encoding="multipart/form-data"
-                 hx-trigger="change from:#peertube_audio"
-                 hx-target="find .file-validation-msg"
-                 hx-swap="innerHTML"
-                 hx-sync="replace"
-                 hx-include="find [name='field_name'], find [name='admin_mode'], #peertube_audio">
-                <input type="hidden" name="field_name" value="tfe">
-                <input type="hidden" name="admin_mode" value="<?= $adminMode ? '1' : '0' ?>">
+            <label for="peertube_audio">Audio PeerTube<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
+            <div class="admin-file-input">
                 <input type="file" id="peertube_audio" name="peertube_audio"
                        accept="audio/mpeg,audio/ogg,audio/wav,audio/flac,audio/aac,audio/mp4,.mp3,.ogg,.oga,.wav,.flac,.aac,.m4a"
                        <?= !$adminMode ? 'required' : '' ?>>
-                <div class="file-validation-msg" aria-live="polite"></div>
-                <small>MP3, OGG, WAV, FLAC ou AAC. Le fichier sera hébergé sur PeerTube et intégré
-                comme lecteur embarqué sur la page du TFE. Max 500 MB.</small>
+                <small>MP3, OGG, WAV, FLAC ou AAC. Le fichier sera hébergé sur PeerTube. Max 500 MB.</small>
             </div>
         </div>
         <?php else: ?>
-        <div class="admin-form-group">
-            <label for="tfe-audio-upload">Fichier audio<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?> :</label>
-            <div class="admin-file-input"
-                 hx-post="<?= htmlspecialchars($tfeValidateUrl) ?>"
-                 hx-encoding="multipart/form-data"
-                 hx-trigger="change from:#tfe-audio-upload"
-                 hx-target="find .file-validation-msg"
-                 hx-swap="innerHTML"
-                 hx-sync="replace"
-                 hx-include="find [name='field_name'], find [name='admin_mode'], #tfe-audio-upload">
-                <input type="hidden" name="field_name" value="tfe">
-                <input type="hidden" name="admin_mode" value="<?= $adminMode ? '1' : '0' ?>">
-                <input type="file" id="tfe-audio-upload" name="files[]"
+        <div class="admin-form-group admin-files-fieldgroup">
+            <label for="audio-files-input">Audio<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
+            <div class="admin-file-input">
+                <input type="file" id="audio-files-input"
+                       name="audio"
                        accept="audio/mpeg,audio/ogg,audio/wav,audio/flac,audio/aac,audio/mp4,.mp3,.ogg,.oga,.wav,.flac,.aac,.m4a"
+                       class="tfe-file-picker"
                        <?= !$adminMode ? 'required' : '' ?>>
-                <div class="file-validation-msg" aria-live="polite"></div>
-                <small>MP3, OGG, WAV, FLAC ou AAC. Max 500 MB.</small>
+                <small class="admin-file-hint">MP3, OGG, WAV, FLAC ou AAC. Max 500 MB par fichier. Glissez pour réordonner.</small>
+                <!-- Queue container — populated by file-upload-queue.js -->
+                <div id="audio-file-queue-container" class="fq-container" data-queue-type="audio">
+                    <ul id="audio-file-queue" class="tfe-file-queue" aria-label="Fichiers sélectionnés"></ul>
+                    <p id="audio-file-queue-empty" class="tfe-queue-empty">Aucun fichier sélectionné.</p>
+                </div>
             </div>
         </div>
         <?php endif; ?>
         <?php endif; ?>
+
+        <script>if(window.XamxamInitQueues)window.XamxamInitQueues();</script>
     </div>
 
 </fieldset><!-- /Fichiers -->
 
 <script>
 if(window.XamxamInitFileUploads)window.XamxamInitFileUploads();
-// TFE upload progress bar
-(function(){
-  var input = document.getElementById('tfe-files-input');
-  var prog = document.getElementById('tfe-upload-progress');
-  if (!input || !prog) return;
-  input.addEventListener('htmx:xhr:progress', function(evt) {
-    prog.style.display = '';
-    prog.setAttribute('value', evt.detail.loaded / evt.detail.total * 100);
-  });
-  input.addEventListener('htmx:afterRequest', function() {
-    prog.style.display = 'none';
-    prog.setAttribute('value', 0);
-  });
-})();
 </script>
 </div><!-- #format-fichiers-block -->
diff --git a/app/public/partage/index.php b/app/public/partage/index.php
index 160f054..60693a0 100644
--- a/app/public/partage/index.php
+++ b/app/public/partage/index.php
@@ -43,21 +43,7 @@ if ($slug === 'validate-file-fragment' && $_SERVER['REQUEST_METHOD'] === 'POST')
     exit;
 }
 
-// Special route: /partage/upload-tfe-file (HTMX fragment — upload single TFE file)
-if ($slug === 'upload-tfe-file' && $_SERVER['REQUEST_METHOD'] === 'POST') {
-    App::boot();
-    App::verifyCsrf();
-    require_once __DIR__ . '/upload-tfe-file.php';
-    exit;
-}
 
-// Special route: /partage/remove-tfe-file (HTMX fragment — remove single TFE file)
-if ($slug === 'remove-tfe-file' && $_SERVER['REQUEST_METHOD'] === 'POST') {
-    App::boot();
-    App::verifyCsrf();
-    require_once __DIR__ . '/remove-tfe-file.php';
-    exit;
-}
 
 // Special route: /partage/fichiers-fragment (HTMX fragment — format-aware fichiers block)
 if ($slug === 'fichiers-fragment' && $_SERVER['REQUEST_METHOD'] === 'POST') {
@@ -387,6 +373,7 @@ function renderShareLinkForm(string $slug, array $link): void
         <meta name="theme-color" content="#ffffff">
         <link rel="stylesheet" href="<?= App::assetV('/assets/css/common.css') ?>">
         <link rel="stylesheet" href="<?= App::assetV('/assets/css/form.css') ?>">
+        <script src="<?= App::assetV('/assets/js/sortable.min.js') ?>" defer></script>
         <script src="<?= App::assetV('/assets/js/file-upload-queue.js') ?>" defer></script>
         <script src="<?= App::assetV('/assets/js/beforeunload-guard.js') ?>" defer></script>
         <script src="<?= App::assetV('/assets/js/htmx.min.js') ?>" defer></script>
diff --git a/app/public/partage/remove-tfe-file.php b/app/public/partage/remove-tfe-file.php
deleted file mode 100644
index edbc49a..0000000
--- a/app/public/partage/remove-tfe-file.php
+++ /dev/null
@@ -1,47 +0,0 @@
-<?php
-/**
- * remove-tfe-file.php (partage)
- *
- * HTMX fragment: removes a file from the TFE upload queue (session + temp
- * directory) and returns the updated queue HTML fragment.
- *
- * Expected POST:
- *   index  — the numeric index of the file to remove
- */
-
-require_once __DIR__ . '/../../bootstrap.php';
-App::boot();
-App::verifyCsrf();
-
-$index = isset($_POST['index']) ? (int)$_POST['index'] : -1;
-$uploads = $_SESSION['tfe_uploads'] ?? [];
-
-if ($index < 0 || $index >= count($uploads)) {
-    http_response_code(400);
-    echo '<p class="tfe-queue-empty">Index invalide.</p>';
-    exit;
-}
-
-// ── Delete temp file ───────────────────────────────────────────────────────
-$entry = $uploads[$index];
-$absPath = STORAGE_ROOT . '/' . $entry['tmp_path'];
-if (file_exists($absPath)) {
-    unlink($absPath);
-}
-
-// ── Remove from session ────────────────────────────────────────────────────
-array_splice($_SESSION['tfe_uploads'], $index, 1);
-
-// ── Clean up empty temp directory ──────────────────────────────────────────
-$sessionId = session_id();
-$tempDir   = STORAGE_ROOT . '/uploads/' . $sessionId;
-$_SESSION['tfe_uploads'] = array_values($_SESSION['tfe_uploads']);
-
-if (empty($_SESSION['tfe_uploads']) && is_dir($tempDir)) {
-    // Remove dir only if empty (rmdir fails if not empty, which is fine)
-    @rmdir($tempDir);
-}
-
-// ── Render updated queue ───────────────────────────────────────────────────
-require_once __DIR__ . '/tfe-queue-helper.php';
-renderQueueFragment($_SESSION['tfe_uploads'], '/partage/remove-tfe-file');
diff --git a/app/public/partage/tfe-queue-helper.php b/app/public/partage/tfe-queue-helper.php
deleted file mode 100644
index ce5b332..0000000
--- a/app/public/partage/tfe-queue-helper.php
+++ /dev/null
@@ -1,78 +0,0 @@
-<?php
-/**
- * Shared fragment helper for rendering the TFE file upload queue.
- *
- * Used by both upload-tfe-file.php and remove-tfe-file.php.
- *
- * @param array  $uploads   Array of ['tmp_path', 'orig_name', 'size', 'mime']
- * @param string $removeUrl URL endpoint for removing files (e.g. '/partage/remove-tfe-file')
- */
-
-function renderQueueFragment(array $uploads, string $removeUrl = '/partage/remove-tfe-file'): void
-{
-    $ICON = [
-        'pdf'   => "\u{1F4C4}",
-        'video' => "\u{1F3AC}",
-        'audio' => "\u{1F50A}",
-        'zip'   => "\u{1F5DC}\u{FE0F}",
-        'vtt'   => "\u{1F4AC}",
-        'image' => "\u{1F5BC}\u{FE0F}",
-        'other' => "\u{1F4CE}",
-    ];
-
-    $iconFor = function (string $name, string $mime) use ($ICON): string {
-        if (str_starts_with($mime, 'image/')) return $ICON['image'];
-        if ($mime === 'application/pdf' || str_ends_with(strtolower($name), '.pdf')) return $ICON['pdf'];
-        if (str_starts_with($mime, 'video/') || preg_match('/\.(mp4|webm|mov|ogv)$/i', $name)) return $ICON['video'];
-        if (str_starts_with($mime, 'audio/') || preg_match('/\.(mp3|ogg|oga|wav|flac|aac|m4a)$/i', $name)) return $ICON['audio'];
-        if (preg_match('/\.(zip|tar|gz|tgz)$/i', $name)) return $ICON['zip'];
-        if (preg_match('/\.vtt$/i', $name)) return $ICON['vtt'];
-        return $ICON['other'];
-    };
-
-    $humanSize = function (int $b): string {
-        return $b >= 1073741824
-            ? number_format($b / 1073741824, 2) . ' GB'
-            : ($b >= 1048576
-                ? number_format($b / 1048576, 2) . ' MB'
-                : ($b >= 1024
-                    ? number_format($b / 1024, 1) . ' KB'
-                    : $b . ' B'));
-    };
-
-    if (empty($uploads)) {
-        echo '<ul id="tfe-file-queue" class="tfe-file-queue"'
-           . ' aria-label="Fichiers sélectionnés"></ul>'
-           . "\n"
-           . '<p id="tfe-file-queue-empty" class="tfe-queue-empty">'
-           . 'Aucun fichier sélectionné.</p>';
-        return;
-    }
-
-    echo '<ul id="tfe-file-queue" class="tfe-file-queue"'
-       . ' aria-label="Fichiers sélectionnés">';
-    foreach ($uploads as $idx => $f) {
-        $icon = $iconFor($f['orig_name'], $f['mime']);
-        $name = htmlspecialchars($f['orig_name']);
-        $size = $humanSize($f['size']);
-        echo '<li class="fq-item">'
-           . '<span class="fq-icon">' . $icon . '</span>'
-           . '<span class="fq-info">'
-           . '<span class="fq-name">' . $name . '</span>'
-           . '<span class="fq-size">' . $size . '</span>'
-           . '</span>'
-           . '<button type="button" class="admin-btn-remove fq-remove"'
-           . ' aria-label="Retirer ' . $name . '"'
-           . ' hx-post="' . htmlspecialchars($removeUrl) . '"'
-           . ' hx-target="#tfe-file-queue-container"'
-           . ' hx-select="#tfe-file-queue-container"'
-           . ' hx-swap="outerHTML"'
-           . ' hx-vals=\'{"index":' . $idx . '}\''
-           . ' hx-include="[name=\'csrf_token\']"'
-           . '>&#x2715;</button>'
-           . '</li>';
-    }
-    echo '</ul>';
-    echo '<p id="tfe-file-queue-empty" class="tfe-queue-empty" style="display:none">'
-       . 'Aucun fichier sélectionné.</p>';
-}
diff --git a/app/public/partage/upload-tfe-file.php b/app/public/partage/upload-tfe-file.php
deleted file mode 100644
index c526c59..0000000
--- a/app/public/partage/upload-tfe-file.php
+++ /dev/null
@@ -1,119 +0,0 @@
-<?php
-/**
- * upload-tfe-file.php (partage)
- *
- * HTMX fragment: receives a single file upload, stores it in a session-scoped
- * temp directory, appends it to the TFE upload queue, and returns the updated
- * queue HTML fragment.
- *
- * Expected POST:
- *   file  — the uploaded file (single file, not array)
- *
- * Session structure:
- *   $_SESSION['tfe_uploads'] = [
- *     ['tmp_path' => '...', 'orig_name' => '...', 'size' => ..., 'mime' => '...'],
- *     ...
- *   ]
- */
-
-require_once __DIR__ . '/../../bootstrap.php';
-App::boot();
-App::verifyCsrf();
-
-// ── Validate upload ────────────────────────────────────────────────────────
-$upload = $_FILES['tfe'] ?? null;
-if (!$upload || !isset($upload['error']) || $upload['error'] !== UPLOAD_ERR_OK) {
-    http_response_code(400);
-    echo '<p class="tfe-queue-empty">Erreur lors du téléchargement.</p>';
-    exit;
-}
-
-// ── MIME + size validation ─────────────────────────────────────────────────
-$adminMode = ($_POST['admin_mode'] ?? '0') === '1';
-$finfo     = new \finfo(FILEINFO_MIME_TYPE);
-$mimeType  = $finfo->file($upload['tmp_name']);
-$ext       = strtolower(pathinfo($upload['name'], PATHINFO_EXTENSION));
-
-if ($mimeType === 'text/plain' && $ext === 'vtt') {
-    $mimeType = 'text/vtt';
-}
-
-$allowedMimes = [
-    'application/pdf',
-    'image/jpeg', 'image/png', 'image/gif', 'image/webp',
-    'video/mp4', 'video/webm', 'video/ogg', 'video/quicktime',
-    'audio/mpeg', 'audio/mp3', 'audio/ogg', 'audio/wav',
-    'audio/flac', 'audio/aac', 'audio/x-m4a', 'audio/mp4',
-    'text/vtt',
-    'application/zip', 'application/x-zip-compressed',
-    'application/x-tar', 'application/gzip',
-    'application/octet-stream',
-];
-$allowedExts = [
-    'jpg', 'jpeg', 'png', 'gif', 'webp', 'pdf',
-    'mp4', 'webm', 'ogv', 'mov',
-    'mp3', 'ogg', 'oga', 'wav', 'flac', 'aac', 'm4a',
-    'vtt', 'zip', 'tar', 'gz', 'tgz',
-];
-
-$mimeOk = in_array($mimeType, $allowedMimes, true)
-       || ($mimeType === 'application/octet-stream' && in_array($ext, $allowedExts, true))
-       || in_array($ext, $allowedExts, true);
-
-if (!$mimeOk && !$adminMode) {
-    http_response_code(400);
-    echo '<p class="tfe-queue-empty">Type de fichier non accepté : ' . htmlspecialchars($upload['name']) . '</p>';
-    exit;
-}
-
-$maxSize = ($mimeType === 'application/pdf' || $ext === 'pdf') ? 100 * 1024 * 1024 : 500 * 1024 * 1024;
-if ($upload['size'] > $maxSize && !$adminMode) {
-    $maxMb = round($maxSize / 1024 / 1024);
-    http_response_code(400);
-    echo '<p class="tfe-queue-empty">Fichier trop volumineux (' . round($upload['size'] / 1024 / 1024, 1) . ' MB). Maximum : ' . $maxMb . ' MB.</p>';
-    exit;
-}
-
-// ── Session temp directory ─────────────────────────────────────────────────
-$sessionId  = session_id();
-$tempDir    = STORAGE_ROOT . '/uploads/' . $sessionId;
-if (!is_dir($tempDir)) {
-    mkdir($tempDir, 0755, true);
-}
-
-// ── Move uploaded file to temp ─────────────────────────────────────────────
-$origName  = basename($upload['name']);
-$ext       = strtolower(pathinfo($origName, PATHINFO_EXTENSION));
-
-// Generate a unique temp name to avoid collisions
-$uniqueId  = bin2hex(random_bytes(8));
-$tmpName   = 'tmp_' . $uniqueId . ($ext ? '.' . $ext : '');
-$tmpPath   = $tempDir . '/' . $tmpName;
-
-if (!move_uploaded_file($upload['tmp_name'], $tmpPath)) {
-    http_response_code(500);
-    echo '<p class="tfe-queue-empty">Erreur lors de la sauvegarde du fichier.</p>';
-    exit;
-}
-
-chmod($tmpPath, 0644);
-
-// Determine MIME type
-$finfo    = new \finfo(FILEINFO_MIME_TYPE);
-$mimeType = $finfo->file($tmpPath);
-
-// ── Store in session ───────────────────────────────────────────────────────
-if (!isset($_SESSION['tfe_uploads']) || !is_array($_SESSION['tfe_uploads'])) {
-    $_SESSION['tfe_uploads'] = [];
-}
-
-$_SESSION['tfe_uploads'][] = [
-    'tmp_path'  => 'uploads/' . $sessionId . '/' . $tmpName,
-    'orig_name' => $origName,
-    'size'      => $upload['size'],
-    'mime'      => $mimeType,
-];
-
-// ── Render updated queue ───────────────────────────────────────────────────
-require_once __DIR__ . '/tfe-queue-helper.php';
-renderQueueFragment($_SESSION['tfe_uploads'], '/partage/remove-tfe-file');
diff --git a/app/src/Controllers/ThesisCreateController.php b/app/src/Controllers/ThesisCreateController.php
index d43a0b7..4c32069 100644
--- a/app/src/Controllers/ThesisCreateController.php
+++ b/app/src/Controllers/ThesisCreateController.php
@@ -197,14 +197,17 @@ class ThesisCreateController
         $this->handleCoverUpload($thesisId, $files['couverture'] ?? null, $folderPath, $filePrefix);
         $this->handleNoteIntentionUpload($thesisId, $files['note_intention'] ?? null, $folderPath, $filePrefix);
 
-        // TFE files come from session temp (incremental upload via HTMX)
-        $sessionUploads = $_SESSION['tfe_uploads'] ?? [];
-        $nextNum = $this->handleTfeFilesFromSession($thesisId, $sessionUploads, $folderPath, $filePrefix, 1);
-        // Clear session uploads after successful commit
-        $this->cleanupSessionUploads();
+        // TFE files from client-side JS queue (FormData)
+        $queueFiles = $files['queue_file'] ?? [];
+        $qTfe    = $this->extractFilesSubArray($queueFiles, 'tfe');
+        $qVideo  = $this->extractFilesSubArray($queueFiles, 'video');
+        $qAudio  = $this->extractFilesSubArray($queueFiles, 'audio');
+        $qAnnexe = $this->extractFilesSubArray($queueFiles, 'annexe');
 
-        $this->handleAnnexeFiles($thesisId, $files['annexes'] ?? null, $folderPath, $filePrefix, $post);
-        // PeerTube file rows don't go on disk, but the uploads themselves are processed separately
+        $nextNum = $this->handleTfeQueueFiles($thesisId, $qTfe, $folderPath, $filePrefix, 1);
+        $nextNum = $this->handleTfeQueueFiles($thesisId, $qVideo, $folderPath, $filePrefix, $nextNum);
+        $nextNum = $this->handleTfeQueueFiles($thesisId, $qAudio, $folderPath, $filePrefix, $nextNum);
+        $this->handleAnnexeQueueFiles($thesisId, $qAnnexe, $folderPath, $filePrefix);
 
         // ── 5b. PeerTube video / audio uploads ────────────────────────────────
         $this->handlePeerTubeUpload($thesisId, $data['titre'], $files, 'peertube_video');
@@ -518,10 +521,14 @@ class ThesisCreateController
         $exemplaireErg  = !empty($post['exemplaire_erg']);
         $cc2r = !empty($post['cc2r']);
 
-        // Annexes validation: if has_annexes is checked, at least one annexe file must be provided
+        // Annexes validation: if has_annexes is checked, queue_file[annexe] must have at least one file
         $hasAnnexes = !empty($post['has_annexes']);
-        if (!$adminMode && $hasAnnexes && empty($_FILES['annexes']['name'][0])) {
-            throw new Exception('Veuillez fournir au moins un fichier d\'annexe.');
+        if (!$adminMode && $hasAnnexes) {
+            $queueAnnexes = $this->extractFilesSubArray($files['queue_file'] ?? [], 'annexe');
+            $hasAnnexeFiles = is_array($queueAnnexes['name'] ?? null) && count(array_filter($queueAnnexes['name'])) > 0;
+            if (!$hasAnnexeFiles) {
+                throw new Exception('Veuillez fournir au moins un fichier d\'annexe.');
+            }
         }
 
         return compact(
diff --git a/app/src/Controllers/ThesisEditController.php b/app/src/Controllers/ThesisEditController.php
index 63afb2a..cb8b9e5 100644
--- a/app/src/Controllers/ThesisEditController.php
+++ b/app/src/Controllers/ThesisEditController.php
@@ -411,22 +411,28 @@ class ThesisEditController
             }
         }
 
-        // ── New TFE files upload (from session via HTMX incremental upload) ──
-        $sessionUploads = $_SESSION['tfe_uploads'] ?? [];
-        if (!empty($sessionUploads)) {
-            // Count existing TFE files to determine starting number
-            $tfeCount = 0;
-            foreach ($existingFiles as $f) {
-                if (!in_array($f['file_type'] ?? '', ['cover', 'note_intention', 'website', 'annex', 'caption'], true)
-                    && !str_starts_with($f['file_path'] ?? '', 'http')) {
-                    $tfeCount++;
-                }
+        // ── New TFE/video/audio files upload (from client-side JS queue) ──
+        $queueFiles = $files['queue_file'] ?? [];
+        $qTfe    = $this->extractFilesSubArray($queueFiles, 'tfe');
+        $qVideo  = $this->extractFilesSubArray($queueFiles, 'video');
+        $qAudio  = $this->extractFilesSubArray($queueFiles, 'audio');
+        $qAnnexe = $this->extractFilesSubArray($queueFiles, 'annexe');
+
+        $tfeCount = 0;
+        foreach ($existingFiles as $f) {
+            if (!in_array($f['file_type'] ?? '', ['cover', 'note_intention', 'website', 'annex', 'caption'], true)
+                && !str_starts_with($f['file_path'] ?? '', 'http')) {
+                $tfeCount++;
             }
-            $this->handleTfeFilesFromSession($thesisId, $sessionUploads, $folderPath, $filePrefix, $tfeCount + 1);
-            $this->cleanupSessionUploads();
         }
 
-        // ── New annexe files upload ────────────────────────────────────────────
+        $startNum = $tfeCount + 1;
+        $startNum = $this->handleTfeQueueFiles($thesisId, $qTfe, $folderPath, $filePrefix, $startNum);
+        $startNum = $this->handleTfeQueueFiles($thesisId, $qVideo, $folderPath, $filePrefix, $startNum);
+        $this->handleTfeQueueFiles($thesisId, $qAudio, $folderPath, $filePrefix, $startNum);
+        $this->handleAnnexeQueueFiles($thesisId, $qAnnexe, $folderPath, $filePrefix);
+
+        // Legacy annexe files (direct upload, non-queue path — kept for backwards compat)
         if (isset($files['annexes']) && is_array($files['annexes']['name'] ?? null)) {
             $this->handleAnnexeFiles($thesisId, $files['annexes'], $folderPath, $filePrefix, $post);
         }
diff --git a/app/src/Controllers/ThesisFileHandler.php b/app/src/Controllers/ThesisFileHandler.php
index 1d01f17..7affc34 100644
--- a/app/src/Controllers/ThesisFileHandler.php
+++ b/app/src/Controllers/ThesisFileHandler.php
@@ -304,20 +304,40 @@ trait ThesisFileHandler
     }
 
     /**
-     * Process TFE file uploads from session-stored temp paths.
+     * Extract a flat $_FILES-style sub-array from PHP's nested upload structure.
      *
-     * Used when files are uploaded incrementally via HTMX fragments (upload-tfe-file.php)
-     * rather than submitted in a single multipart form.
+     * PHP normalises FormData names like "queue_file[tfe][]" into:
+     *   $_FILES['queue_file']['name']['tfe'] = [file1, file2, ...]
+     *   $_FILES['queue_file']['tmp_name']['tfe'] = [/tmp/..., /tmp/...]
+     * This helper extracts ['tfe'] → ['name' => [...], 'tmp_name' => [...], ...]
+     */
+    protected function extractFilesSubArray(array $parent, string $key): ?array
+    {
+        if (!isset($parent['name'][$key]) || !is_array($parent['name'][$key])) {
+            return null;
+        }
+        $result = [];
+        foreach (['name', 'tmp_name', 'error', 'size', 'type'] as $field) {
+            $result[$field] = $parent[$field][$key] ?? [];
+        }
+        return $result;
+    }
+
+    /**
+     * Process TFE file uploads from client-side JS queue (FormData).
+     *
+     * Files arrive via $_FILES['queue_file'] with PHP-nested key extraction.
+     * They are written in the order the user specified (preserved in FormData order).
      *
      * @param int        $thesisId
-     * @param array      $uploads    Array of ['orig_name', 'size', 'mime', 'tmp_path']
+     * @param array|null $uploads    Flat $_FILES-style array with 'name', 'tmp_name', etc.
      * @param string     $folderPath
      * @param string     $filePrefix
      * @param int        $startNum
      */
-    protected function handleTfeFilesFromSession(int $thesisId, array $uploads, string $folderPath, string $filePrefix, int $startNum = 1): int
+    protected function handleTfeQueueFiles(int $thesisId, ?array $uploads, string $folderPath, string $filePrefix, int $startNum = 1): int
     {
-        if (empty($uploads)) {
+        if (!$uploads || !is_array($uploads['name'] ?? null)) {
             return $startNum;
         }
 
@@ -326,77 +346,146 @@ trait ThesisFileHandler
             mkdir($dir, 0755, true);
         }
 
-        $files = [];
-        foreach ($uploads as $f) {
-            $mimeType = $f['mime'];
-            $absPath  = STORAGE_ROOT . '/' . $f['tmp_path'];
+        // Build entries, validate, and classify
+        $files    = [];
+        $vttQueue = [];
+        $count    = count($uploads['name']);
 
-            if (!file_exists($absPath)) {
-                error_log("ThesisFileHandler: session temp file missing {$f['tmp_path']}, skipping");
+        for ($i = 0; $i < $count; $i++) {
+            if (($uploads['error'][$i] ?? UPLOAD_ERR_NO_FILE) !== UPLOAD_ERR_OK) {
                 continue;
             }
 
-            $ext = strtolower(pathinfo($f['orig_name'], PATHINFO_EXTENSION));
+            $finfo    = new \finfo(FILEINFO_MIME_TYPE);
+            $mimeType = $finfo->file($uploads['tmp_name'][$i]);
+            $ext      = strtolower(pathinfo($uploads['name'][$i], PATHINFO_EXTENSION));
+
+            if ($mimeType === 'text/plain' && $ext === 'vtt') {
+                $mimeType = 'text/vtt';
+            }
+            if ($mimeType === 'application/octet-stream' && !in_array($ext, self::ALLOWED_EXTENSIONS, true)) {
+                error_log("ThesisFileHandler: queue file extension not allowed {$uploads['name'][$i]} ($ext), skipping");
+                continue;
+            }
+            if (!in_array($mimeType, self::ALLOWED_MIME_TYPES, true)
+                && !in_array($ext, self::ALLOWED_EXTENSIONS, true)) {
+                error_log("ThesisFileHandler: invalid queue file type {$uploads['name'][$i]} ($mimeType / $ext), skipping");
+                continue;
+            }
+
+            $isPdf     = ($mimeType === 'application/pdf' || $ext === 'pdf');
+            $sizeLimit = $isPdf ? self::MAX_PDF_SIZE : self::MAX_FILE_SIZE;
+            if ($uploads['size'][$i] > $sizeLimit) {
+                error_log("ThesisFileHandler: queue file too large {$uploads['name'][$i]} (" . round($uploads['size'][$i] / 1024 / 1024) . ' MB), skipping');
+                continue;
+            }
+
+            $entry = [
+                'mimeType'  => $mimeType,
+                'ext'       => $ext,
+                'size'      => $uploads['size'][$i],
+                'tmpName'   => $uploads['tmp_name'][$i],
+                'origName'  => $uploads['name'][$i],
+                'label'     => '',
+                'sortOrder' => null,
+                'fileType'  => $this->detectFileType($mimeType, $ext),
+            ];
+
+            // VTTs are collected and paired with their preceding video
+            if ($entry['fileType'] === 'caption') {
+                $vttQueue[] = $entry;
+            } else {
+                $files[] = $entry;
+            }
+        }
+
+        // Files are written in the order they arrived (user-specified via JS queue order).
+        // VTTs are inserted immediately after the video they follow.
+        $num        = $startNum;
+        $videosSeen = 0;
+
+        foreach ($files as $f) {
+            $this->writeTfeFile($f, $thesisId, $dir, $folderPath, $filePrefix, $num);
+            $num++;
+
+            if ($f['fileType'] === 'video' && isset($vttQueue[$videosSeen])) {
+                $this->writeTfeFile($vttQueue[$videosSeen], $thesisId, $dir, $folderPath, $filePrefix, $num);
+                $num++;
+                $videosSeen++;
+            } elseif ($f['fileType'] === 'video') {
+                $videosSeen++;
+            }
+        }
+
+        // Orphaned VTTs (no preceding video in this batch)
+        for ($i = $videosSeen; $i < count($vttQueue); $i++) {
+            $this->writeTfeFile($vttQueue[$i], $thesisId, $dir, $folderPath, $filePrefix, $num);
+            $num++;
+        }
+
+        return $num;
+    }
+
+    /**
+     * Process annexe file uploads from client-side JS queue (FormData).
+     *
+     * Files arrive via $_FILES['queue_file']['annexe'].
+     *
+     * @param int        $thesisId
+     * @param array|null $uploads    $_FILES['queue_file']['annexe']-style array
+     * @param string     $folderPath
+     * @param string     $filePrefix
+     */
+    protected function handleAnnexeQueueFiles(int $thesisId, ?array $uploads, string $folderPath, string $filePrefix): void
+    {
+        if (!$uploads || !is_array($uploads['name'] ?? null)) {
+            return;
+        }
+
+        $dir = STORAGE_ROOT . '/' . $folderPath;
+        if (!is_dir($dir)) {
+            mkdir($dir, 0755, true);
+        }
+
+        $num   = 1;
+        $count = count($uploads['name']);
+        for ($i = 0; $i < $count; $i++) {
+            if (($uploads['error'][$i] ?? UPLOAD_ERR_NO_FILE) !== UPLOAD_ERR_OK) {
+                continue;
+            }
+
+            $finfo    = new \finfo(FILEINFO_MIME_TYPE);
+            $mimeType = $finfo->file($uploads['tmp_name'][$i]);
+            $ext      = strtolower(pathinfo($uploads['name'][$i], PATHINFO_EXTENSION));
 
             if ($mimeType === 'text/plain' && $ext === 'vtt') {
                 $mimeType = 'text/vtt';
             }
 
-            $files[] = [
-                'mimeType'  => $mimeType,
-                'ext'       => $ext,
-                'size'      => $f['size'],
-                'origName'  => $f['orig_name'],
-                'label'     => '',
-                'sortOrder' => null,
-                'hierarchy' => $this->tfeHierarchyRank($mimeType, $ext),
-                'fileType'  => $this->detectFileType($mimeType, $ext),
-                // Pass the absolute path so writeTfeFile knows where to copy from
-                'srcPath'   => $absPath,
-            ];
-        }
+            $padded     = sprintf('%02d', $num);
+            $targetName = $filePrefix . '_ANNEXE_' . $padded . '.' . $ext;
+            $targetPath = $dir . $targetName;
 
-        // Sort by hierarchy rank
-        usort($files, fn($a, $b) => $a['hierarchy'] - $b['hierarchy']);
-
-        $videoCount = 0;
-        $vttQueue   = [];
-
-        foreach ($files as $f) {
-            if ($f['fileType'] === 'video') {
-                $videoCount++;
-            }
-        }
-
-        $num = $startNum;
-
-        foreach ($files as $f) {
-            if ($f['fileType'] === 'caption') {
-                $vttQueue[] = $f;
+            if (!move_uploaded_file($uploads['tmp_name'][$i], $targetPath)) {
+                error_log("ThesisFileHandler: failed to move queue annexe {$uploads['name'][$i]}");
                 continue;
             }
 
-            if ($f['fileType'] === 'video') {
-                $this->writeTfeFileFromSrc($f, $thesisId, $dir, $folderPath, $filePrefix, $num);
-                $num++;
+            chmod($targetPath, 0644);
+            $relPath = $folderPath . $targetName;
 
-                if (!empty($vttQueue)) {
-                    $vtt = array_shift($vttQueue);
-                    $this->writeTfeFileFromSrc($vtt, $thesisId, $dir, $folderPath, $filePrefix, $num);
-                    $num++;
-                }
-            } else {
-                $this->writeTfeFileFromSrc($f, $thesisId, $dir, $folderPath, $filePrefix, $num);
-                $num++;
-            }
-        }
-
-        foreach ($vttQueue as $vtt) {
-            $this->writeTfeFileFromSrc($vtt, $thesisId, $dir, $folderPath, $filePrefix, $num);
+            $this->db->insertThesisFile(
+                $thesisId, 'annex',
+                $relPath,
+                basename($uploads['name'][$i]),
+                $uploads['size'][$i],
+                $mimeType,
+                null,
+                null
+            );
+            error_log("ThesisFileHandler: annexe (queue) moved → $targetName");
             $num++;
         }
-
-        return $num;
     }
 
     /**
@@ -517,60 +606,9 @@ trait ThesisFileHandler
         error_log("ThesisFileHandler: TFE uploaded → $targetName ({$f['fileType']})");
     }
 
-    /**
-     * Write a single TFE file from a source path (session temp) to the thesis folder.
-     * Used by handleTfeFilesFromSession instead of move_uploaded_file.
-     */
-    protected function writeTfeFileFromSrc(array $f, int $thesisId, string $dir, string $folderPath, string $filePrefix, int $num): void
-    {
-        $padded     = sprintf('%02d', $num);
-        $targetName = $filePrefix . '_TFE_' . $padded . '.' . $f['ext'];
-        $targetPath = $dir . $targetName;
 
-        if (!rename($f['srcPath'], $targetPath)) {
-            // Fallback: copy + unlink
-            if (!copy($f['srcPath'], $targetPath)) {
-                error_log("ThesisFileHandler: failed to move session TFE {$f['origName']}");
-                return;
-            }
-            unlink($f['srcPath']);
-        }
 
-        chmod($targetPath, 0644);
-        $relPath = $folderPath . $targetName;
 
-        $this->db->insertThesisFile(
-            $thesisId, $f['fileType'],
-            $relPath,
-            basename($f['origName']),
-            $f['size'],
-            $f['mimeType'],
-            $f['label'] !== '' ? $f['label'] : null,
-            $f['sortOrder']
-        );
-        error_log("ThesisFileHandler: TFE (session) moved → $targetName ({$f['fileType']})");
-    }
-
-    /**
-     * Clean up session upload temp files and clear the session entry.
-     * Call after successful commit of TFE files.
-     */
-    protected function cleanupSessionUploads(): void
-    {
-        $sessionId = session_id();
-        $tempDir   = STORAGE_ROOT . '/uploads/' . $sessionId;
-
-        // Remove any remaining files in the temp dir
-        if (is_dir($tempDir)) {
-            $files = glob($tempDir . '/*');
-            foreach ($files as $file) {
-                @unlink($file);
-            }
-            @rmdir($tempDir);
-        }
-
-        unset($_SESSION['tfe_uploads']);
-    }
 
     /**
      * Assign a hierarchy rank for sorting TFE files.
diff --git a/app/templates/admin/acces.php b/app/templates/admin/acces.php
index ff2d3ee..bd61c48 100644
--- a/app/templates/admin/acces.php
+++ b/app/templates/admin/acces.php
@@ -246,6 +246,19 @@
 +%%%%%%% diff from: somsyvxz 249f7943 "Bulk bar anti-shift, tags icons, AP no-wrap, credits reorder" (rebased revision)
 +\\\\\\\        to: yrpmtrsy 21452e6f "fix: scoped HTMX file validation, add validation to TFE/PeerTube inputs" (rebased revision)
 ++                        $linkName = $link['name'] ?? '';
+++                        $linkExpiresVal = $link['expires_at'] ? date('Y-m-d\TH:i', strtotime($link['expires_at'])) : '';
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% diff from: yrpmtrsy 21452e6f "fix: scoped HTMX file validation, add validation to TFE/PeerTube inputs" (rebased revision)
+\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\        to: somsyvxz 249f7943 "Bulk bar anti-shift, tags icons, AP no-wrap, credits reorder" (rebased revision)
+-                        $linkName = $link['name'] ?? '';
+-                        $linkExpiresVal = $link['expires_at'] ? date('Y-m-d\TH:i', strtotime($link['expires_at'])) : '';
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% diff from: somsyvxz 14a3cd10 "Bulk bar anti-shift, tags icons, AP no-wrap, credits reorder" (rebase destination)
+\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\        to: utnzmtom dc313ab2 "Replace HTMX+PHP file upload queues with client-side JS" (rebased revision)
+                         $linkName = $link['name'] ?? '';
+                         $linkExpiresVal = $link['expires_at'] ? date('Y-m-d\TH:i', strtotime($link['expires_at'])) : '';
+                         $linkLockedYear = $link['locked_year'] ?? null;
++%%%%%%% diff from: somsyvxz 249f7943 "Bulk bar anti-shift, tags icons, AP no-wrap, credits reorder" (rebased revision)
++\\\\\\\        to: ownwlmpo c4c4c8c2 "Replace HTMX+PHP file upload queues with client-side JS" (rebased revision)
+++                        $linkName = $link['name'] ?? '';
 ++                        $linkExpiresVal = $link['expires_at'] ? date('Y-m-d\TH:i', strtotime($link['expires_at'])) : '';
                     ?>
                     <tr class="admin-table-row" onclick="event.stopPropagation(); window.open('/partage/<?= urlencode($link['slug']) ?>', '_blank')" style="cursor:pointer">
diff --git a/app/templates/partials/form/fieldset-files.php b/app/templates/partials/form/fieldset-files.php
index 8971b68..dea56c0 100644
--- a/app/templates/partials/form/fieldset-files.php
+++ b/app/templates/partials/form/fieldset-files.php
@@ -48,7 +48,7 @@ $adminMode = $adminMode ?? false;
 
             <!-- File queue — populated by JS -->
             <ul id="tfe-file-queue" class="tfe-file-queue" aria-label="Fichiers sélectionnés">
-                <!-- Queue rendered server-side via HTMX (upload-tfe-file) -->
+                <!-- File queue rendered client-side by file-upload-queue.js -->
             </ul>
             <p id="tfe-file-queue-empty" class="tfe-queue-empty">Aucun fichier sélectionné.</p>
         </div>
diff --git a/app/templates/partials/form/form.php b/app/templates/partials/form/form.php
index 79a5e55..9f7bdb9 100644
--- a/app/templates/partials/form/form.php
+++ b/app/templates/partials/form/form.php
@@ -338,109 +338,7 @@ $checkedFormatsForSiteWeb = $checkedFormatsForSiteWeb ?? [];
         unset($_savedPost);
         ?>
 
-        <!-- Edit-only: existing files management -->
-        <div id="edit-existing-files-block">
-            <!-- Existing thesis files — with labels -->
-            <?php $thesisFilesList = array_values(
-                array_filter(
-                    $currentFiles,
-                    fn($f) => $f["file_type"] !== "cover",
-                ),
-            ); ?>
-            <?php if (!empty($thesisFilesList)): ?>
-            <div class="admin-form-group">
-                <label>Fichiers du TFE existants :</label>
-                <ul id="existing-files-sortable" class="admin-file-list">
-                    <?php foreach ($thesisFilesList as $f):
 
-                        $fExt = strtolower(
-                            pathinfo($f["file_path"] ?? "", PATHINFO_EXTENSION),
-                        );
-                        $fType = $f["file_type"] ?? "other";
-                        $fIcon = match (true) {
-                            $fType === "main" || $fExt === "pdf" => "📄",
-                            in_array($fExt, [
-                                "jpg",
-                                "jpeg",
-                                "png",
-                                "gif",
-                                "webp",
-                            ])
-                                => "🖼️",
-                            $fType === "video" ||
-                                in_array($fExt, ["mp4", "webm", "mov", "ogv"])
-                                => "🎬",
-                            $fType === "audio" ||
-                                in_array($fExt, [
-                                    "mp3",
-                                    "ogg",
-                                    "wav",
-                                    "flac",
-                                    "aac",
-                                    "m4a",
-                                ])
-                                => "🔊",
-                            $fType === "caption" || $fExt === "vtt" => "💬",
-                            $fType === "website" => "🌐",
-                            default => "📎",
-                        };
-                        $isExternalUrl =
-                            str_starts_with($f["file_path"] ?? "", "http://") ||
-                            str_starts_with($f["file_path"] ?? "", "https://");
-                        $fLinkHref = $isExternalUrl
-                            ? htmlspecialchars($f["file_path"])
-                            : "/media?path=" . urlencode($f["file_path"]);
-                        ?>
-                    <li class="admin-file-list-item" data-file-id="<?= (int) $f[
-                        "id"
-                    ] ?>">
-                        <input type="hidden" name="file_sort_order[]" value="<?= (int) $f[
-                            "id"
-                        ] ?>">
-
-                        <span class="admin-file-icon-col"><?= $fIcon ?></span>
-                        <span class="admin-file-info">
-                            <a href="<?= $fLinkHref ?>" target="_blank" rel="noopener" class="admin-file-name">
-                                <?= htmlspecialchars(
-                                    $f["file_name"] ??
-                                        basename($f["file_path"]),
-                                ) ?>
-                            </a>
-                            <span class="admin-file-meta-row">
-                                <span class="admin-file-type-badge"><?= htmlspecialchars(
-                                    $fType,
-                                ) ?></span>
-                                <?php if (
-                                    !empty($f["file_size"]) &&
-                                    $f["file_size"] > 0
-                                ): ?>
-                                <span class="admin-file-size"><?= number_format(
-                                    $f["file_size"] / 1024 / 1024,
-                                    2,
-                                ) ?> MB</span>
-                                <?php endif; ?>
-                            </span>
-                            <input type="text" name="file_label[<?= (int) $f[
-                                "id"
-                            ] ?>]"
-                                   value="<?= htmlspecialchars(
-                                       $f["display_label"] ?? "",
-                                   ) ?>"
-                                   placeholder="Légende / description (optionnel)"
-                                   class="admin-file-label-input">
-                        </span>
-                        <label class="admin-checkbox-label admin-file-delete">
-                            <input type="checkbox" name="delete_files[]" value="<?= (int) $f[
-                                "id"
-                            ] ?>"> Supprimer
-                        </label>
-                    </li>
-                    <?php
-                    endforeach; ?>
-                </ul>
-            </div>
-            <?php endif; ?>
-        </div><!-- #edit-existing-files-block -->
 <?php endif; ?>
 
         <!-- ═══════════════════ Métadonnées complémentaires ═══════════════════
diff --git a/docs/cms-migration-plan.html b/docs/cms-migration-plan.html
new file mode 100644
index 0000000..981d4d8
--- /dev/null
+++ b/docs/cms-migration-plan.html
@@ -0,0 +1,1266 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>XAMXAM — CMS Migration Plan</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      --bg:        #f8f7f4;
+      --surface:   #ffffff;
+      --border:    #e2dfd9;
+      --text:      #1a1a1a;
+      --muted:     #6b6b6b;
+      --accent:    #2563eb;
+      --accent-bg: #eff6ff;
+      --warn:      #d97706;
+      --warn-bg:   #fffbeb;
+      --danger:    #dc2626;
+      --danger-bg: #fef2f2;
+      --ok:        #16a34a;
+      --ok-bg:     #f0fdf4;
+      --radius:    8px;
+      --shadow:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
+    }
+
+    body {
+      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.65;
+      font-size: 15px;
+    }
+
+    /* ── Layout ── */
+    .page-header {
+      background: var(--text);
+      color: #fff;
+      padding: 3rem 2rem 2.5rem;
+    }
+    .page-header h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; margin-bottom: .4rem; }
+    .page-header .subtitle { color: #aaa; font-size: .95rem; }
+    .page-header .meta { margin-top: 1rem; display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: .85rem; color: #888; }
+    .page-header .meta span strong { color: #ccc; }
+
+    .toc {
+      background: var(--surface);
+      border-bottom: 1px solid var(--border);
+      padding: .75rem 2rem;
+      font-size: .85rem;
+      display: flex; gap: 1rem; flex-wrap: wrap;
+      position: sticky; top: 0; z-index: 10;
+    }
+    .toc a { color: var(--accent); text-decoration: none; white-space: nowrap; }
+    .toc a:hover { text-decoration: underline; }
+
+    main { max-width: 1060px; margin: 0 auto; padding: 2.5rem 2rem 5rem; }
+
+    section { margin-bottom: 3.5rem; }
+    section:first-child { margin-top: .5rem; }
+
+    h2 {
+      font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em;
+      border-bottom: 2px solid var(--border);
+      padding-bottom: .5rem; margin-bottom: 1.5rem;
+      scroll-margin-top: 60px;
+    }
+    h3 { font-size: 1.05rem; font-weight: 600; margin: 1.5rem 0 .6rem; }
+    h4 { font-size: .9rem; font-weight: 600; margin: 1rem 0 .4rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
+
+    p { margin-bottom: .8rem; }
+    ul, ol { padding-left: 1.4rem; margin-bottom: .8rem; }
+    li { margin-bottom: .35rem; }
+
+    /* ── Cards / callouts ── */
+    .card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 1.25rem 1.5rem;
+      box-shadow: var(--shadow);
+      margin-bottom: 1rem;
+    }
+    .callout {
+      border-radius: var(--radius);
+      padding: 1rem 1.25rem;
+      margin-bottom: 1rem;
+      border-left: 4px solid;
+    }
+    .callout.info  { background: var(--accent-bg); border-color: var(--accent); }
+    .callout.warn  { background: var(--warn-bg);   border-color: var(--warn); }
+    .callout.danger{ background: var(--danger-bg); border-color: var(--danger); }
+    .callout.ok    { background: var(--ok-bg);     border-color: var(--ok); }
+    .callout-title { font-weight: 700; margin-bottom: .3rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
+    .callout.info  .callout-title { color: var(--accent); }
+    .callout.warn  .callout-title { color: var(--warn); }
+    .callout.danger .callout-title { color: var(--danger); }
+    .callout.ok    .callout-title { color: var(--ok); }
+
+    /* ── CMS comparison grid ── */
+    .cms-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
+      gap: 1rem;
+      margin-bottom: 1.5rem;
+    }
+    .cms-card {
+      background: var(--surface);
+      border: 2px solid var(--border);
+      border-radius: var(--radius);
+      padding: 1.5rem;
+      position: relative;
+    }
+    .cms-card.recommended {
+      border-color: var(--accent);
+    }
+    .badge {
+      display: inline-block;
+      font-size: .7rem; font-weight: 700; letter-spacing: .06em;
+      text-transform: uppercase; padding: .2rem .55rem;
+      border-radius: 99px; margin-bottom: .75rem;
+    }
+    .badge.recommended { background: var(--accent); color: #fff; }
+    .badge.alt         { background: #e5e7eb; color: #374151; }
+    .badge.not-suitable{ background: #fee2e2; color: #991b1b; }
+    .cms-card h3 { margin-top: 0; font-size: 1.1rem; }
+    .cms-card .tagline { color: var(--muted); font-size: .85rem; margin-bottom: .75rem; }
+    .pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; margin-top: .75rem; }
+    .pros-cons h4 { margin: 0 0 .3rem; font-size: .78rem; }
+    .pros-cons ul { font-size: .82rem; padding-left: 1.1rem; margin: 0; }
+    .pros-cons li { margin-bottom: .25rem; }
+
+    /* ── Feature mapping table ── */
+    .feature-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
+    .feature-table th {
+      background: #f1f0ed; text-align: left;
+      padding: .55rem .85rem; font-size: .78rem; font-weight: 600;
+      text-transform: uppercase; letter-spacing: .05em;
+      border-bottom: 2px solid var(--border);
+    }
+    .feature-table td {
+      padding: .55rem .85rem;
+      border-bottom: 1px solid var(--border);
+      vertical-align: top;
+    }
+    .feature-table tr:last-child td { border-bottom: none; }
+    .feature-table tr:hover td { background: #fafafa; }
+    .tag {
+      display: inline-block; font-size: .72rem; font-weight: 600;
+      padding: .15rem .45rem; border-radius: 4px; white-space: nowrap;
+    }
+    .tag.native  { background: var(--ok-bg);     color: var(--ok); }
+    .tag.plugin  { background: var(--accent-bg);  color: var(--accent); }
+    .tag.custom  { background: var(--warn-bg);    color: var(--warn); }
+    .tag.drop    { background: var(--danger-bg);  color: var(--danger); }
+
+    /* ── Timeline ── */
+    .timeline { position: relative; padding-left: 2rem; }
+    .timeline::before {
+      content: ''; position: absolute; left: .55rem; top: .5rem; bottom: 0;
+      width: 2px; background: var(--border);
+    }
+    .phase {
+      position: relative; margin-bottom: 1.75rem;
+    }
+    .phase::before {
+      content: ''; position: absolute; left: -1.67rem; top: .45rem;
+      width: 12px; height: 12px; border-radius: 50%;
+      border: 2px solid var(--accent); background: var(--surface);
+    }
+    .phase-header { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .4rem; }
+    .phase-num { font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--accent); letter-spacing: .07em; }
+    .phase-duration { font-size: .8rem; color: var(--muted); }
+    .phase h3 { font-size: 1rem; margin: 0; }
+    .phase ul { font-size: .88rem; margin-top: .4rem; }
+
+    /* ── Effort table ── */
+    .effort-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
+    .effort-table th {
+      background: #f1f0ed; text-align: left;
+      padding: .5rem .85rem; font-size: .78rem; font-weight: 600;
+      text-transform: uppercase; letter-spacing: .05em;
+      border-bottom: 2px solid var(--border);
+    }
+    .effort-table td { padding: .5rem .85rem; border-bottom: 1px solid var(--border); }
+    .effort-table tfoot td { font-weight: 700; background: #f8f7f4; }
+    .effort-table .bar-cell { width: 140px; }
+    .bar-wrap { background: #e5e7eb; border-radius: 99px; height: 8px; }
+    .bar { height: 8px; border-radius: 99px; background: var(--accent); }
+
+    /* ── Architecture diagram (ASCII) ── */
+    .arch-diagram {
+      background: #1a1a2e; color: #a8d8ea;
+      font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+      font-size: .8rem; line-height: 1.55;
+      border-radius: var(--radius); padding: 1.5rem 2rem;
+      overflow-x: auto; white-space: pre;
+    }
+
+    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
+    @media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } .pros-cons { grid-template-columns: 1fr; } }
+
+    /* ── Invoice ── */
+    .invoice {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      box-shadow: var(--shadow);
+      overflow: hidden;
+      font-size: .88rem;
+    }
+    .invoice-header {
+      background: var(--text); color: #fff;
+      padding: 1.5rem 2rem;
+      display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
+    }
+    .invoice-header .from { font-size: .8rem; color: #aaa; line-height: 1.7; }
+    .invoice-header .from strong { color: #fff; display: block; font-size: 1rem; margin-bottom: .2rem; }
+    .invoice-header .inv-meta { text-align: right; font-size: .8rem; color: #aaa; line-height: 1.7; }
+    .invoice-header .inv-meta strong { color: #fff; display: block; font-size: 1rem; margin-bottom: .2rem; }
+    .invoice-to { padding: 1.25rem 2rem; border-bottom: 1px solid var(--border); background: #fafaf8; }
+    .invoice-to .label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: .3rem; }
+    .invoice-to p { margin: 0; line-height: 1.6; color: var(--text); }
+    .invoice-lines { width: 100%; border-collapse: collapse; }
+    .invoice-lines th {
+      background: #f1f0ed; text-align: left;
+      padding: .55rem 1.25rem; font-size: .75rem; font-weight: 600;
+      text-transform: uppercase; letter-spacing: .06em;
+      border-bottom: 2px solid var(--border);
+    }
+    .invoice-lines th.num { text-align: right; }
+    .invoice-lines td { padding: .6rem 1.25rem; border-bottom: 1px solid var(--border); vertical-align: top; }
+    .invoice-lines td.num { text-align: right; white-space: nowrap; }
+    .invoice-lines tr:last-child td { border-bottom: none; }
+    .invoice-lines tr.section-head td {
+      background: #f8f7f4; font-weight: 600; font-size: .78rem;
+      text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
+      padding: .4rem 1.25rem;
+    }
+    .invoice-totals { border-top: 2px solid var(--border); }
+    .invoice-totals table { width: 100%; border-collapse: collapse; }
+    .invoice-totals td { padding: .5rem 1.25rem; }
+    .invoice-totals td:first-child { color: var(--muted); }
+    .invoice-totals td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
+    .invoice-totals tr.grand td { background: #1a1a1a; color: #fff; font-size: 1rem; font-weight: 700; }
+    .invoice-totals tr.grand td:last-child { color: #fff; }
+    .invoice-footer { padding: 1rem 1.25rem; color: var(--muted); font-size: .78rem; border-top: 1px solid var(--border); line-height: 1.7; }
+
+    code { font-family: monospace; background: #f1f0ed; padding: .1em .4em; border-radius: 3px; font-size: .88em; }
+    strong { font-weight: 600; }
+  </style>
+</head>
+<body>
+
+<header class="page-header">
+  <h1>XAMXAM — CMS Migration Plan</h1>
+  <p class="subtitle">Implementation plan for rebuilding the ERG thesis repository on a commercially available CMS</p>
+  <div class="meta">
+    <span><strong>Date</strong> May 2026</span>
+    <span><strong>Scope</strong> Full feature-equivalent rebuild</span>
+    <span><strong>Recommended stack</strong> Strapi v5 + Next.js 15</span>
+    <span><strong>Estimated timeline</strong> 18–24 weeks</span>
+  </div>
+</header>
+
+<nav class="toc">
+  <strong style="color:#888;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;align-self:center">Jump to →</strong>
+  <a href="#overview">Overview</a>
+  <a href="#cms-choice">CMS Choice</a>
+  <a href="#architecture">Architecture</a>
+  <a href="#features">Feature Map</a>
+  <a href="#requirements">Requirements</a>
+  <a href="#timeline">Timeline</a>
+  <a href="#effort">Effort &amp; Cost</a>
+  <a href="#invoice">Invoice example</a>
+  <a href="#tradeoffs">Trade-offs</a>
+  <a href="#not-included">Not included</a>
+</nav>
+
+<main>
+
+<!-- ─────────────────────────────────── OVERVIEW ─────────────────────────────────── -->
+<section id="overview">
+  <h2>1. Project Overview</h2>
+
+  <p>
+    <strong>XAMXAM</strong> (formerly Posterg) is the thesis/TFE (<em>Travail de Fin d'Études</em>) repository
+    for the <strong>ERG — École de Recherche Graphique</strong> in Brussels. It is a purpose-built PHP 8.4 +
+    SQLite3 application deployed behind nginx.
+  </p>
+
+  <div class="two-col">
+    <div class="card">
+      <h3>Current tech stack</h3>
+      <ul>
+        <li>PHP 8.4, SQLite 3, nginx</li>
+        <li>Custom MVC (no framework)</li>
+        <li>HTMX for partial rendering</li>
+        <li>No npm / no build step</li>
+        <li>rsync deployment (no git on server)</li>
+        <li>Single-server, single-file database</li>
+      </ul>
+    </div>
+    <div class="card">
+      <h3>What the system does</h3>
+      <ul>
+        <li>Public browseable + searchable thesis catalogue</li>
+        <li>Admin panel: create / edit / publish / export theses</li>
+        <li>Student submission via one-time share links</li>
+        <li>Controlled file serving (PDFs, images, video, audio)</li>
+        <li>PeerTube video upload integration</li>
+        <li>SMTP email notifications with encrypted credentials</li>
+        <li>Audit log, maintenance mode, CSV/DB export</li>
+        <li>Access control: open / restricted (cookie token) / forbidden</li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="callout info">
+    <div class="callout-title">Scope of this plan</div>
+    The goal is a <strong>feature-equivalent rebuild</strong> using an off-the-shelf CMS — meaning the ERG
+    team would no longer need to maintain bespoke PHP controllers, database migrations, or a custom admin panel.
+    Custom code is minimised to integrations that no CMS ships out-of-the-box (share links, restricted
+    file access, PeerTube upload).
+  </div>
+</section>
+
+<!-- ──────────────────────────────── CMS CHOICE ─────────────────────────────────── -->
+<section id="cms-choice">
+  <h2>2. CMS Choice</h2>
+
+  <p>Three commercially available CMS products were evaluated against XAMXAM's requirements.</p>
+
+  <div class="cms-grid">
+
+    <div class="cms-card recommended">
+      <span class="badge recommended">Recommended</span>
+      <h3>Strapi v5</h3>
+      <p class="tagline">Headless Node.js CMS — self-hosted, open-source core</p>
+      <div class="pros-cons">
+        <div>
+          <h4>Pros</h4>
+          <ul>
+            <li>Rich relation fields (authors, jury, files, tags) built-in</li>
+            <li>Admin panel generated from content-type schema</li>
+            <li>Role-based access control (admin vs. student roles)</li>
+            <li>Media library with upload providers</li>
+            <li>REST + GraphQL API out-of-the-box</li>
+            <li>Lifecycle hooks for custom logic</li>
+            <li>Plugin system for custom routes</li>
+            <li>SQLite supported (small team, single server)</li>
+          </ul>
+        </div>
+        <div>
+          <h4>Cons</h4>
+          <ul>
+            <li>JavaScript/Node.js — different from current PHP stack</li>
+            <li>Separate frontend required (Next.js or similar)</li>
+            <li>Share-link submission portal = custom plugin</li>
+            <li>File-access tokens = custom plugin</li>
+            <li>PeerTube upload = custom plugin</li>
+            <li>More moving parts than current single-PHP-server setup</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="cms-card">
+      <span class="badge alt">Alternative</span>
+      <h3>Kirby CMS 4</h3>
+      <p class="tagline">Flat-file PHP CMS — familiar language, no database required</p>
+      <div class="pros-cons">
+        <div>
+          <h4>Pros</h4>
+          <ul>
+            <li>PHP — same language as today</li>
+            <li>Flexible content blueprints</li>
+            <li>Custom routes and hooks</li>
+            <li>Panel (admin UI) with custom sections</li>
+            <li>Lightweight, no extra runtime</li>
+          </ul>
+        </div>
+        <div>
+          <h4>Cons</h4>
+          <ul>
+            <li>Flat-file (YAML/Markdown) — poor fit for relational thesis data</li>
+            <li>No built-in user roles for student submission</li>
+            <li>Search, pagination, and filtering need custom code</li>
+            <li>Virtually all the complex logic still needs writing</li>
+            <li>Comercial licence required ($199/site)</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="cms-card">
+      <span class="badge not-suitable">Not suitable</span>
+      <h3>WordPress</h3>
+      <p class="tagline">PHP CMS + plugin ecosystem</p>
+      <div class="pros-cons">
+        <div>
+          <h4>Pros</h4>
+          <ul>
+            <li>Familiar to many users</li>
+            <li>Large plugin ecosystem</li>
+          </ul>
+        </div>
+        <div>
+          <h4>Cons</h4>
+          <ul>
+            <li>Content model too blog-centric for thesis metadata</li>
+            <li>Custom post types + ACF = heavyweight approach</li>
+            <li>Student submission portal not in any standard plugin</li>
+            <li>Security attack surface is substantial</li>
+            <li>Performance tuning overhead for file serving</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="callout ok">
+    <div class="callout-title">Verdict</div>
+    <strong>Strapi v5</strong> is the best match. Its content-type system maps naturally to the thesis data
+    model (relations, media, nested metadata). The admin panel is generated automatically from the schema.
+    Custom plugins cover the three features not provided by any CMS out-of-the-box: share links, restricted
+    file access, and PeerTube upload.
+  </div>
+</section>
+
+<!-- ─────────────────────────────── ARCHITECTURE ────────────────────────────────── -->
+<section id="architecture">
+  <h2>3. Proposed Architecture</h2>
+
+  <pre class="arch-diagram">
+  ┌──────────────────────────────────────────────────────────────────────┐
+  │                          nginx (reverse proxy)                        │
+  │        /          → Next.js (port 3000)                               │
+  │        /admin      → Strapi admin UI (port 1337/admin)                │
+  │        /api        → Strapi REST API (port 1337/api)                  │
+  │        /partage/:slug → Next.js (student submission route)            │
+  └──────────────────────────────────────────────────────────────────────┘
+          │                         │
+          ▼                         ▼
+  ┌──────────────────┐    ┌──────────────────────────────────────────┐
+  │   Next.js 15      │    │           Strapi v5 (Node.js)            │
+  │  (public site +   │    │                                          │
+  │  student portal)  │◄──►│  Content Types: Thesis, Author,          │
+  │                   │    │  Supervisor, Tag, Format, Language,      │
+  │  - Home page      │    │  ShareLink, AccessToken, SiteSettings    │
+  │  - TFE detail     │    │                                          │
+  │  - Search         │    │  Plugins:                                │
+  │  - /partage form  │    │   • share-link  (custom routes + logic)  │
+  │  - File proxy     │    │   • file-access (token + cookie auth)    │
+  └──────────────────┘    │   • peertube    (upload integration)     │
+                           │                                          │
+                           │  Media: local upload provider            │
+                           │  Database: SQLite (or PostgreSQL)        │
+                           └──────────────────────────────────────────┘
+                                         │
+                                         ▼
+                           ┌──────────────────────────┐
+                           │  Storage (outside webroot) │
+                           │  /var/www/xamxam/uploads/  │
+                           │  (TFE PDFs, covers,        │
+                           │   annexes, video, audio)   │
+                           └──────────────────────────┘
+  </pre>
+
+  <h3>Key decisions</h3>
+  <ul>
+    <li><strong>SQLite is kept</strong> — Strapi supports it natively. Migration to PostgreSQL is a one-line config change if needed later.</li>
+    <li><strong>Files are never directly web-accessible</strong> — Next.js <code>/api/media/[...path]</code> proxies file requests, enforcing access-type checks (same as current <code>media.php</code>).</li>
+    <li><strong>Strapi admin panel replaces the custom PHP admin</strong> — thesis CRUD, jury management, share-link management, settings, and audit log all live there.</li>
+    <li><strong>Next.js App Router</strong> handles the public site and the <code>/partage/:slug</code> student submission portal.</li>
+    <li><strong>Single server deployment</strong> — both processes (<code>strapi start</code>, <code>next start</code>) run behind nginx, same as current setup.</li>
+  </ul>
+</section>
+
+<!-- ──────────────────────────────── FEATURE MAP ────────────────────────────────── -->
+<section id="features">
+  <h2>4. Feature Map</h2>
+
+  <p>
+    Tags: <span class="tag native">native</span> = ships out-of-the-box with the CMS,
+    <span class="tag plugin">plugin</span> = available via an existing Strapi plugin or npm package,
+    <span class="tag custom">custom</span> = needs bespoke code,
+    <span class="tag drop">drop</span> = intentionally not reproduced (replaced or unnecessary).
+  </p>
+
+  <table class="feature-table">
+    <thead>
+      <tr>
+        <th>Feature (current XAMXAM)</th>
+        <th>CMS equivalent</th>
+        <th>Coverage</th>
+        <th>Notes</th>
+      </tr>
+    </thead>
+    <tbody>
+      <!-- Public site -->
+      <tr>
+        <td colspan="4" style="background:#f8f7f4;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:#6b6b6b">Public site</td>
+      </tr>
+      <tr>
+        <td>Home page — latest year, random order, year filter</td>
+        <td>Next.js page fetching Strapi <code>/api/theses</code></td>
+        <td><span class="tag native">native</span></td>
+        <td>Strapi REST supports sort, filter, populate. Random order via <code>RANDOM()</code> is a custom sort plugin or a shuffle in Next.js.</td>
+      </tr>
+      <tr>
+        <td>Paginated browse (24/page)</td>
+        <td>Strapi pagination params (<code>pagination[page]</code>)</td>
+        <td><span class="tag native">native</span></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Full-text search (title, author, keyword, year, orientation)</td>
+        <td>Strapi filters + Next.js search page</td>
+        <td><span class="tag native">native</span></td>
+        <td>Strapi's <code>$containsi</code> operator covers basic search. For true FTS, add the <code>strapi-plugin-fuzzy-search</code> package.</td>
+      </tr>
+      <tr>
+        <td>Rate limiting on search</td>
+        <td>nginx <code>limit_req_zone</code> or Strapi middleware</td>
+        <td><span class="tag plugin">plugin</span></td>
+        <td><code>koa-ratelimit</code> as a Strapi middleware.</td>
+      </tr>
+      <tr>
+        <td>TFE detail page with all metadata</td>
+        <td>Next.js dynamic route <code>/tfe/[id]</code></td>
+        <td><span class="tag native">native</span></td>
+        <td>Use <code>populate[]=authors&populate[]=jury&populate[]=files</code> etc.</td>
+      </tr>
+      <tr>
+        <td>OG / Twitter Card meta tags</td>
+        <td>Next.js <code>generateMetadata()</code></td>
+        <td><span class="tag native">native</span></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Email obfuscation for author contact</td>
+        <td>Client-side JS decode or Next.js server component</td>
+        <td><span class="tag custom">custom</span></td>
+        <td>~10 lines of logic. No CMS ships this.</td>
+      </tr>
+      <tr>
+        <td>Maintenance mode</td>
+        <td>Next.js middleware redirect + flag env var</td>
+        <td><span class="tag custom">custom</span></td>
+        <td>Simple; <code>MAINTENANCE=1</code> → middleware returns 503 page.</td>
+      </tr>
+
+      <!-- File serving -->
+      <tr>
+        <td colspan="4" style="background:#f8f7f4;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:#6b6b6b">File serving &amp; access control</td>
+      </tr>
+      <tr>
+        <td>Controlled file proxy (PDFs, images, video, audio)</td>
+        <td>Next.js API route <code>/api/media/[...path]</code></td>
+        <td><span class="tag custom">custom</span></td>
+        <td>Replicates current <code>media.php</code>. Streams file, validates MIME, enforces access type.</td>
+      </tr>
+      <tr>
+        <td>Access types: open / restricted / forbidden</td>
+        <td>Strapi <code>access_type</code> relation + media proxy</td>
+        <td><span class="tag custom">custom</span></td>
+        <td>Strapi stores the type; the proxy enforces it.</td>
+      </tr>
+      <tr>
+        <td>Cookie-based restricted access tokens</td>
+        <td>Custom <code>file-access</code> Strapi plugin</td>
+        <td><span class="tag custom">custom</span></td>
+        <td>Generates signed tokens, stores in DB, sets <code>HttpOnly</code> cookies. Same logic as current <code>FileAccessController.php</code>.</td>
+      </tr>
+      <tr>
+        <td>File labels, sort order per thesis</td>
+        <td>Strapi relation with pivot fields</td>
+        <td><span class="tag native">native</span></td>
+        <td>Strapi allows custom fields on many-to-many pivot tables (v5 "dynamic zones" or custom join table).</td>
+      </tr>
+
+      <!-- Admin panel -->
+      <tr>
+        <td colspan="4" style="background:#f8f7f4;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:#6b6b6b">Admin panel</td>
+      </tr>
+      <tr>
+        <td>Thesis CRUD (create / edit / delete)</td>
+        <td>Strapi admin content manager</td>
+        <td><span class="tag native">native</span></td>
+        <td>All fields configured in content-type schema. No PHP to write.</td>
+      </tr>
+      <tr>
+        <td>Publish / unpublish thesis</td>
+        <td>Strapi draft &amp; publish system</td>
+        <td><span class="tag native">native</span></td>
+        <td>Toggle on the content entry. Matches current <code>is_published</code> flag.</td>
+      </tr>
+      <tr>
+        <td>Author management (name, email, contact visibility)</td>
+        <td>Strapi <code>Author</code> content type with relation</td>
+        <td><span class="tag native">native</span></td>
+        <td>Authors are a separate content type, reusable across theses.</td>
+      </tr>
+      <tr>
+        <td>Jury management (role, interne/externe/ULB)</td>
+        <td>Strapi <code>Supervisor</code> type + pivot role field</td>
+        <td><span class="tag native">native</span></td>
+        <td>Role dropdown (president / promoteur / lecteur) on the relation. ULB flag as boolean.</td>
+      </tr>
+      <tr>
+        <td>File upload queue with drag-reorder</td>
+        <td>Strapi Media Library + custom admin plugin UI</td>
+        <td><span class="tag custom">custom</span></td>
+        <td>Strapi's built-in media library handles upload. Drag-reorder with a custom "sort_order" component needs a small admin UI plugin (~1–2 days).</td>
+      </tr>
+      <tr>
+        <td>PeerTube video/audio upload</td>
+        <td>Custom <code>peertube</code> Strapi plugin</td>
+        <td><span class="tag custom">custom</span></td>
+        <td>Replicates <code>PeerTubeService.php</code>. OAuth2 password grant, credential encryption, token refresh on 401. ~3–5 days.</td>
+      </tr>
+      <tr>
+        <td>Share-link management (create, toggle, archive)</td>
+        <td>Custom <code>share-link</code> Strapi plugin</td>
+        <td><span class="tag custom">custom</span></td>
+        <td>Custom content type + admin panel list view. Slug generation, optional password hash, expiry, usage count. ~3–4 days.</td>
+      </tr>
+      <tr>
+        <td>CSV export</td>
+        <td>Custom Strapi controller or admin plugin action</td>
+        <td><span class="tag custom">custom</span></td>
+        <td>~1 day. Strapi lifecycle hooks make CSV generation straightforward.</td>
+      </tr>
+      <tr>
+        <td>Database / file archive export</td>
+        <td>Custom Strapi controller (zip SQLite + storage dir)</td>
+        <td><span class="tag custom">custom</span></td>
+        <td>~1 day. Identical logic to current <code>ExportController.php</code>.</td>
+      </tr>
+      <tr>
+        <td>Audit log</td>
+        <td>Strapi <code>strapi-plugin-audit-log</code> or custom</td>
+        <td><span class="tag plugin">plugin</span></td>
+        <td>Community plugin <code>strapi-audit-log</code> covers create/update/delete. Custom entries for share-link events.</td>
+      </tr>
+      <tr>
+        <td>Admin login (htpasswd + PHP session)</td>
+        <td>Strapi native JWT-based admin auth</td>
+        <td><span class="tag native">native</span></td>
+        <td>nginx <code>auth_basic</code> layer can remain as a second factor if desired.</td>
+      </tr>
+      <tr>
+        <td>Site settings (SMTP, PeerTube, help text)</td>
+        <td>Strapi Single-Type <code>SiteSettings</code></td>
+        <td><span class="tag native">native</span></td>
+        <td>Single-Type entries allow one-off config records. Encrypted fields via Strapi lifecycle hooks.</td>
+      </tr>
+      <tr>
+        <td>SMTP send with encrypted password</td>
+        <td>Custom Strapi service + <code>nodemailer</code></td>
+        <td><span class="tag plugin">plugin</span></td>
+        <td><code>@strapi/provider-email-nodemailer</code> for delivery. AES encryption of the stored password via a lifecycle hook.</td>
+      </tr>
+      <tr>
+        <td>Inline form help text (configurable per field)</td>
+        <td>Strapi Single-Type <code>FormHelp</code> + admin UI</td>
+        <td><span class="tag native">native</span></td>
+        <td>Store help blocks as a Single-Type with one entry per field. Renders in the Next.js form.</td>
+      </tr>
+      <tr>
+        <td>Import from CSV / legacy data</td>
+        <td>Custom Strapi import script (run once)</td>
+        <td><span class="tag custom">custom</span></td>
+        <td>One-time migration. ~3–5 days depending on data quality.</td>
+      </tr>
+
+      <!-- Student submission -->
+      <tr>
+        <td colspan="4" style="background:#f8f7f4;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:#6b6b6b">Student submission portal (/partage)</td>
+      </tr>
+      <tr>
+        <td>Share-link access (slug + optional password)</td>
+        <td>Next.js <code>/partage/[slug]</code> + Strapi <code>/api/share-links/:slug/validate</code></td>
+        <td><span class="tag custom">custom</span></td>
+        <td>Custom Strapi route validates slug, checks password, expiry, usage count. Issues a JWT session for the student.</td>
+      </tr>
+      <tr>
+        <td>Student TFE submission form</td>
+        <td>Next.js form + Strapi <code>/api/share-links/:slug/submit</code></td>
+        <td><span class="tag custom">custom</span></td>
+        <td>Replicates the full <code>/partage/index.php</code> form. All validation server-side in Strapi. ~4–6 days.</td>
+      </tr>
+      <tr>
+        <td>Incremental file upload queue with reorder</td>
+        <td>Next.js client-side queue + Strapi upload endpoint</td>
+        <td><span class="tag custom">custom</span></td>
+        <td>Client-side JS queue (as planned in <code>TODO.md</code>). Submits FormData on final form submit. Same plan as the current in-progress refactor.</td>
+      </tr>
+      <tr>
+        <td>Email confirmation on submission</td>
+        <td>Strapi lifecycle hook → nodemailer</td>
+        <td><span class="tag plugin">plugin</span></td>
+        <td>On thesis creation event, fire email via the nodemailer provider.</td>
+      </tr>
+      <tr>
+        <td>Summary / recap page</td>
+        <td>Next.js <code>/partage/[slug]/recap</code></td>
+        <td><span class="tag custom">custom</span></td>
+        <td>Renders after successful submission. ~0.5 days.</td>
+      </tr>
+
+      <!-- Misc -->
+      <tr>
+        <td colspan="4" style="background:#f8f7f4;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:#6b6b6b">Lookup data &amp; taxonomy</td>
+      </tr>
+      <tr>
+        <td>Orientations, AP programs, finality types, languages, formats, license types</td>
+        <td>Strapi content types (or Enumeration fields)</td>
+        <td><span class="tag native">native</span></td>
+        <td>All managed via Strapi admin. Relations from the Thesis type.</td>
+      </tr>
+      <tr>
+        <td>Tags / keywords (free-text, multi-value)</td>
+        <td>Strapi <code>Tag</code> content type with many-to-many</td>
+        <td><span class="tag native">native</span></td>
+        <td>Autocomplete in admin via Strapi's default relation field.</td>
+      </tr>
+    </tbody>
+  </table>
+</section>
+
+<!-- ─────────────────────────────── REQUIREMENTS ─────────────────────────────────── -->
+<section id="requirements">
+  <h2>5. Requirements</h2>
+
+  <div class="two-col">
+    <div>
+      <h3>Functional requirements</h3>
+      <ol>
+        <li>Public catalogue: browse, paginate, filter by year / orientation / keyword</li>
+        <li>Full-text search across title, author, synopsis, keywords</li>
+        <li>TFE detail page: all metadata, files (gated by access type), jury composition</li>
+        <li>Three file access tiers: open, restricted (cookie token), forbidden</li>
+        <li>Admin: full thesis lifecycle (draft → published → archived)</li>
+        <li>Admin: manage all lookup tables (orientations, formats, languages, licences…)</li>
+        <li>Admin: share-link CRUD (create, toggle, set password, set expiry, archive)</li>
+        <li>Admin: audit log of all content changes</li>
+        <li>Admin: CSV export and full database/file archive download</li>
+        <li>Admin: configurable SMTP relay with encrypted credential storage</li>
+        <li>Admin: configurable PeerTube integration (instance URL, credentials, channel, privacy)</li>
+        <li>Admin: inline form help text, configurable per field</li>
+        <li>Student portal: access via share link, optional password gate</li>
+        <li>Student portal: multi-file upload queue with reorder and removal</li>
+        <li>Student portal: full thesis submission form with inline validation</li>
+        <li>Student portal: email confirmation on successful submission</li>
+        <li>Maintenance mode toggle (admin-accessible while public site is blocked)</li>
+        <li>OG / Twitter Card meta tags on all public pages</li>
+        <li>WCAG 2.1 AA accessibility on public pages and student form</li>
+      </ol>
+    </div>
+    <div>
+      <h3>Non-functional requirements</h3>
+      <ol>
+        <li><strong>Security:</strong> no uploaded file is ever directly web-accessible; all served via authenticated proxy</li>
+        <li><strong>Security:</strong> SMTP and PeerTube passwords encrypted at rest (AES-256)</li>
+        <li><strong>Security:</strong> CSRF protection on all forms</li>
+        <li><strong>Security:</strong> rate limiting on public search and share-link validation endpoints</li>
+        <li><strong>Performance:</strong> cover images batch-loaded; ISR (Next.js Incremental Static Regen) for public pages</li>
+        <li><strong>Deployment:</strong> single VPS, two processes (Strapi + Next.js) behind nginx</li>
+        <li><strong>Database:</strong> SQLite for parity with current setup; PostgreSQL upgrade path must be supported</li>
+        <li><strong>Backups:</strong> existing <code>just deploy-db</code> + rsync workflow preserved or equivalent provided</li>
+        <li><strong>Internationalisation:</strong> UI in French; content supports multilingual entries (fr, nl, en)</li>
+        <li><strong>Maintainability:</strong> no custom admin UI beyond what Strapi's plugin API supports; avoid forks of the CMS core</li>
+      </ol>
+
+      <h3>Dependencies &amp; integrations</h3>
+      <ul>
+        <li>PeerTube instance (existing, ERG-hosted)</li>
+        <li>SMTP relay (existing ERG mail server)</li>
+        <li>nginx (existing, config updated for new port routing)</li>
+        <li>Existing SQLite database (migrated via one-time import script)</li>
+        <li>Existing file storage directory (copied to new upload path)</li>
+      </ul>
+    </div>
+  </div>
+</section>
+
+<!-- ─────────────────────────────────── TIMELINE ─────────────────────────────────── -->
+<section id="timeline">
+  <h2>6. Delivery Timeline</h2>
+
+  <p>Estimated at <strong>1 developer, full-time</strong>. Reduce scope or add a second dev to compress.</p>
+
+  <div class="timeline">
+
+    <div class="phase">
+      <div class="phase-header">
+        <span class="phase-num">Phase 1</span>
+        <h3>Foundation &amp; Data Model</h3>
+        <span class="phase-duration">3 weeks</span>
+      </div>
+      <ul>
+        <li>Initialise Strapi v5 project with SQLite</li>
+        <li>Define all content types: <code>Thesis</code>, <code>Author</code>, <code>Supervisor</code>, <code>ThesisFile</code>, <code>Tag</code>, <code>Orientation</code>, <code>ApProgram</code>, <code>FinalityType</code>, <code>Language</code>, <code>FormatType</code>, <code>LicenseType</code>, <code>AccessType</code>, <code>SiteSettings</code>, <code>FormHelp</code></li>
+        <li>Configure relations and pivot fields (jury role, author order, file sort_order, file label)</li>
+        <li>Enable Draft &amp; Publish on <code>Thesis</code></li>
+        <li>Write data migration script: read SQLite → POST to Strapi API</li>
+        <li>Migrate all files to Strapi upload directory</li>
+        <li>Validate migrated data in admin panel</li>
+        <li><strong>Deliverable:</strong> Strapi running locally with full existing dataset</li>
+      </ul>
+    </div>
+
+    <div class="phase">
+      <div class="phase-header">
+        <span class="phase-num">Phase 2</span>
+        <h3>Public Site (Next.js)</h3>
+        <span class="phase-duration">4 weeks</span>
+      </div>
+      <ul>
+        <li>Initialise Next.js 15 App Router project</li>
+        <li>Home page: latest year random grid + year filter + pagination</li>
+        <li>Search page: full-text across all fields, filter controls</li>
+        <li>TFE detail page: all metadata sections, jury composition, file list</li>
+        <li>File proxy route <code>/api/media/[...path]</code> with access-type enforcement</li>
+        <li>OG / Twitter meta tags via <code>generateMetadata()</code></li>
+        <li>CSS port from current design (reuse existing <code>public.css</code>, <code>tfe.css</code>)</li>
+        <li>Email obfuscation component</li>
+        <li>Maintenance mode middleware</li>
+        <li><strong>Deliverable:</strong> public site feature-complete, pixel-comparable to current</li>
+      </ul>
+    </div>
+
+    <div class="phase">
+      <div class="phase-header">
+        <span class="phase-num">Phase 3</span>
+        <h3>Restricted Access + File Access Tokens</h3>
+        <span class="phase-duration">1 week</span>
+      </div>
+      <ul>
+        <li>Strapi <code>file-access</code> plugin: custom route <code>POST /api/file-access/request</code></li>
+        <li>Token generation, storage in <code>file_access_tokens</code> table, cookie issuance</li>
+        <li>File proxy reads cookie, validates token against DB</li>
+        <li>Access request form in Next.js TFE detail page</li>
+        <li>Admin panel: view / revoke tokens per thesis</li>
+        <li><strong>Deliverable:</strong> restricted file access parity with current</li>
+      </ul>
+    </div>
+
+    <div class="phase">
+      <div class="phase-header">
+        <span class="phase-num">Phase 4</span>
+        <h3>Student Submission Portal</h3>
+        <span class="phase-duration">4 weeks</span>
+      </div>
+      <ul>
+        <li>Strapi <code>share-link</code> plugin: content type + slug generation + validate/submit routes</li>
+        <li>Next.js <code>/partage/[slug]</code>: slug gate, optional password form</li>
+        <li>Student submission form: all fields (title, subtitle, authors, jury, synopsis, keywords, formats, languages, licence, files)</li>
+        <li>Client-side file upload queue (TFE, annexes, cover, video, audio) with drag-reorder, MIME/size validation</li>
+        <li>Server-side validation replicating current <code>ThesisCreateController</code> logic</li>
+        <li>Email confirmation via nodemailer on submission</li>
+        <li>Recap / summary page</li>
+        <li>Admin panel: share-link list with create / toggle / archive / set-password actions</li>
+        <li><strong>Deliverable:</strong> student portal fully functional end-to-end</li>
+      </ul>
+    </div>
+
+    <div class="phase">
+      <div class="phase-header">
+        <span class="phase-num">Phase 5</span>
+        <h3>Admin Completions</h3>
+        <span class="phase-duration">3 weeks</span>
+      </div>
+      <ul>
+        <li>PeerTube plugin: settings form, OAuth2 token management, upload action on thesis edit</li>
+        <li>CSV export endpoint</li>
+        <li>Database + files archive download endpoint</li>
+        <li>Audit log plugin (or configure <code>strapi-audit-log</code>)</li>
+        <li>Admin file-reorder UI plugin (drag handles on thesis media list)</li>
+        <li>SMTP settings + test-send + encrypted storage via lifecycle hook</li>
+        <li>FormHelp single-type admin UI + rendering in student form</li>
+        <li><strong>Deliverable:</strong> all admin features present, team can self-manage</li>
+      </ul>
+    </div>
+
+    <div class="phase">
+      <div class="phase-header">
+        <span class="phase-num">Phase 6</span>
+        <h3>QA, Hardening &amp; Cutover</h3>
+        <span class="phase-duration">3 weeks</span>
+      </div>
+      <ul>
+        <li>Security review: headers, rate limiting, CSRF, upload validation, path traversal</li>
+        <li>WCAG 2.1 AA audit on public pages and student form</li>
+        <li>Performance: ISR on TFE pages, cover image optimisation (Next.js <code>Image</code>)</li>
+        <li>nginx config update for new port routing</li>
+        <li>Staging deploy: run both old and new in parallel; team acceptance testing</li>
+        <li>Production cutover: deploy new stack, migrate DB + files, update DNS if needed</li>
+        <li>Post-cutover monitoring (1 week watch period)</li>
+        <li><strong>Deliverable:</strong> production running on new stack</li>
+      </ul>
+    </div>
+
+  </div>
+
+  <div class="card" style="margin-top:1rem">
+    <strong>Total: 18 weeks (approx. 4.5 months)</strong> at 1 full-time developer.
+    Add 4–6 weeks buffer for stakeholder review cycles, scope additions, or part-time availability.
+    Realistic end-to-end: <strong>22–24 weeks from kickoff to production</strong>.
+  </div>
+</section>
+
+<!-- ─────────────────────────────────── EFFORT ─────────────────────────────────── -->
+<section id="effort">
+  <h2>7. Effort Breakdown</h2>
+
+  <table class="effort-table">
+    <thead>
+      <tr>
+        <th>Area</th>
+        <th>Est. days</th>
+        <th class="bar-cell">Relative effort</th>
+        <th>Main tasks</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Data model &amp; migration</td>
+        <td>10</td>
+        <td class="bar-cell"><div class="bar-wrap"><div class="bar" style="width:55%"></div></div></td>
+        <td>Schema definition, migration script, data validation</td>
+      </tr>
+      <tr>
+        <td>Public site (Next.js)</td>
+        <td>15</td>
+        <td class="bar-cell"><div class="bar-wrap"><div class="bar" style="width:83%"></div></div></td>
+        <td>All public pages, file proxy, metadata, CSS port</td>
+      </tr>
+      <tr>
+        <td>File access control plugin</td>
+        <td>5</td>
+        <td class="bar-cell"><div class="bar-wrap"><div class="bar" style="width:28%"></div></div></td>
+        <td>Token generation, cookie auth, admin revoke view</td>
+      </tr>
+      <tr>
+        <td>Student submission portal</td>
+        <td>18</td>
+        <td class="bar-cell"><div class="bar-wrap"><div class="bar" style="width:100%"></div></div></td>
+        <td>Share-link plugin, student form, file queue, email confirm</td>
+      </tr>
+      <tr>
+        <td>Admin completions</td>
+        <td>14</td>
+        <td class="bar-cell"><div class="bar-wrap"><div class="bar" style="width:78%"></div></div></td>
+        <td>PeerTube plugin, exports, audit log, SMTP, file reorder UI</td>
+      </tr>
+      <tr>
+        <td>QA, security &amp; cutover</td>
+        <td>13</td>
+        <td class="bar-cell"><div class="bar-wrap"><div class="bar" style="width:72%"></div></div></td>
+        <td>Security review, WCAG, performance, staging, production deploy</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td>Total</td>
+        <td>75 days (~15 weeks)</td>
+        <td class="bar-cell"></td>
+        <td>+ 3–4 weeks buffer = 18–19 weeks</td>
+      </tr>
+    </tfoot>
+  </table>
+
+  <div class="callout warn" style="margin-top:1.25rem">
+    <div class="callout-title">Cost note</div>
+    Strapi Community Edition is free / open-source. Strapi Cloud (hosted) starts at $29/month.
+    For self-hosted (current VPS setup), <strong>no licence fee applies</strong>.
+    Next.js is MIT. The only paid dependency is a Vercel deployment (optional — self-hosted Node.js is free).
+    Total additional infrastructure cost: <strong>$0/month on existing VPS</strong>.
+  </div>
+</section>
+
+<!-- ──────────────────────────────── INVOICE ─────────────────────────────────────── -->
+<section id="invoice">
+  <h2>8. Invoice Example — Junior Solo Developer</h2>
+
+  <p>
+    The figures below illustrate what a realistic invoice from a junior freelance developer might look like
+    for this project. Assumptions: <strong>€350/day</strong> (junior solo rate, Western Europe),
+    75 billable days of work spread across 18–19 weeks, with a 10% contingency buffer added as a separate
+    line item. VAT at 21% (Belgian standard rate, adjust for your jurisdiction).
+  </p>
+
+  <div class="invoice">
+    <div class="invoice-header">
+      <div class="from">
+        <strong>Dev Freelance — Jane Doe</strong>
+        Rue de l'Exemple 12<br>
+        1000 Bruxelles<br>
+        TVA: BE 0123.456.789<br>
+        jane@example.dev
+      </div>
+      <div class="inv-meta">
+        <strong>FACTURE / INVOICE</strong>
+        N° 2026-042<br>
+        Date: 10 mai 2026<br>
+        Échéance: 10 juin 2026<br>
+        Réf client: ERG / XAMXAM
+      </div>
+    </div>
+
+    <div class="invoice-to">
+      <div class="label">Facturé à / Billed to</div>
+      <p>
+        <strong>École de Recherche Graphique (ERG)</strong><br>
+        Rue du Page 87, 1050 Bruxelles<br>
+        TVA: BE 0400.000.000
+      </p>
+    </div>
+
+    <table class="invoice-lines">
+      <thead>
+        <tr>
+          <th style="width:45%">Description</th>
+          <th class="num" style="width:12%">Jours</th>
+          <th class="num" style="width:15%">Taux jour</th>
+          <th class="num" style="width:14%">Total HT</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr class="section-head"><td colspan="4">Phase 1 — Data model &amp; migration</td></tr>
+        <tr>
+          <td>Définition des content-types Strapi (Thesis, Author, Supervisor, Tag, etc.) + relations et champs pivot</td>
+          <td class="num">5</td>
+          <td class="num">350 €</td>
+          <td class="num">1 750 €</td>
+        </tr>
+        <tr>
+          <td>Script de migration SQLite → Strapi API + transfert des fichiers, validation des données</td>
+          <td class="num">5</td>
+          <td class="num">350 €</td>
+          <td class="num">1 750 €</td>
+        </tr>
+
+        <tr class="section-head"><td colspan="4">Phase 2 — Site public (Next.js)</td></tr>
+        <tr>
+          <td>Page d'accueil, filtres par année, pagination (24/page)</td>
+          <td class="num">3</td>
+          <td class="num">350 €</td>
+          <td class="num">1 050 €</td>
+        </tr>
+        <tr>
+          <td>Page de recherche (filtres titre / auteur / mot-clé / année / orientation)</td>
+          <td class="num">3</td>
+          <td class="num">350 €</td>
+          <td class="num">1 050 €</td>
+        </tr>
+        <tr>
+          <td>Page de détail TFE (métadonnées, jury, fichiers, OG tags)</td>
+          <td class="num">4</td>
+          <td class="num">350 €</td>
+          <td class="num">1 400 €</td>
+        </tr>
+        <tr>
+          <td>Proxy de fichiers <code>/api/media/[…path]</code> + contrôle d'accès + port CSS</td>
+          <td class="num">5</td>
+          <td class="num">350 €</td>
+          <td class="num">1 750 €</td>
+        </tr>
+
+        <tr class="section-head"><td colspan="4">Phase 3 — Accès restreint aux fichiers</td></tr>
+        <tr>
+          <td>Plugin Strapi <code>file-access</code> (tokens, cookies, révocation admin)</td>
+          <td class="num">5</td>
+          <td class="num">350 €</td>
+          <td class="num">1 750 €</td>
+        </tr>
+
+        <tr class="section-head"><td colspan="4">Phase 4 — Portail étudiant (/partage)</td></tr>
+        <tr>
+          <td>Plugin Strapi <code>share-link</code> (génération slug, validation, routes submit)</td>
+          <td class="num">5</td>
+          <td class="num">350 €</td>
+          <td class="num">1 750 €</td>
+        </tr>
+        <tr>
+          <td>Formulaire de dépôt étudiant (Next.js) — tous les champs, validation serveur</td>
+          <td class="num">6</td>
+          <td class="num">350 €</td>
+          <td class="num">2 100 €</td>
+        </tr>
+        <tr>
+          <td>File upload queue côté client (tri, suppression, validation MIME/taille)</td>
+          <td class="num">4</td>
+          <td class="num">350 €</td>
+          <td class="num">1 400 €</td>
+        </tr>
+        <tr>
+          <td>Email de confirmation (nodemailer) + page de récapitulatif</td>
+          <td class="num">3</td>
+          <td class="num">350 €</td>
+          <td class="num">1 050 €</td>
+        </tr>
+
+        <tr class="section-head"><td colspan="4">Phase 5 — Completions admin</td></tr>
+        <tr>
+          <td>Plugin PeerTube (OAuth2, upload vidéo/audio, chiffrement credentials)</td>
+          <td class="num">4</td>
+          <td class="num">350 €</td>
+          <td class="num">1 400 €</td>
+        </tr>
+        <tr>
+          <td>Export CSV + archive DB/fichiers</td>
+          <td class="num">2</td>
+          <td class="num">350 €</td>
+          <td class="num">700 €</td>
+        </tr>
+        <tr>
+          <td>Audit log, SMTP chiffré, FormHelp, UI tri fichiers</td>
+          <td class="num">4</td>
+          <td class="num">350 €</td>
+          <td class="num">1 400 €</td>
+        </tr>
+        <tr>
+          <td>Gestion share-links dans le panel admin (liste, toggle, archive, mot de passe)</td>
+          <td class="num">4</td>
+          <td class="num">350 €</td>
+          <td class="num">1 400 €</td>
+        </tr>
+
+        <tr class="section-head"><td colspan="4">Phase 6 — QA, sécurité &amp; mise en production</td></tr>
+        <tr>
+          <td>Audit sécurité (headers, rate-limiting, CSRF, upload, path traversal)</td>
+          <td class="num">3</td>
+          <td class="num">350 €</td>
+          <td class="num">1 050 €</td>
+        </tr>
+        <tr>
+          <td>Audit accessibilité WCAG 2.1 AA (site public + formulaire étudiant)</td>
+          <td class="num">2</td>
+          <td class="num">350 €</td>
+          <td class="num">700 €</td>
+        </tr>
+        <tr>
+          <td>Configuration nginx, déploiement staging, tests d'acceptation, mise en production</td>
+          <td class="num">4</td>
+          <td class="num">350 €</td>
+          <td class="num">1 400 €</td>
+        </tr>
+        <tr>
+          <td>Monitoring post-lancement (1 semaine), corrections mineures incluses</td>
+          <td class="num">4</td>
+          <td class="num">350 €</td>
+          <td class="num">1 400 €</td>
+        </tr>
+
+        <tr class="section-head"><td colspan="4">Réserve</td></tr>
+        <tr>
+          <td>Contingence 10 % — imprévus, retours client, ajustements de scope</td>
+          <td class="num">7.5</td>
+          <td class="num">350 €</td>
+          <td class="num">2 625 €</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div class="invoice-totals">
+      <table>
+        <tr>
+          <td>Sous-total HT (75 jours × 350 €)</td>
+          <td>26 250 €</td>
+        </tr>
+        <tr>
+          <td>Contingence 10 % (7.5 jours × 350 €)</td>
+          <td>2 625 €</td>
+        </tr>
+        <tr>
+          <td>Total HT</td>
+          <td>28 875 €</td>
+        </tr>
+        <tr>
+          <td>TVA 21 %</td>
+          <td>6 063.75 €</td>
+        </tr>
+        <tr class="grand">
+          <td>TOTAL TTC</td>
+          <td>34 938.75 €</td>
+        </tr>
+      </table>
+    </div>
+
+    <div class="invoice-footer">
+      <strong>Conditions de paiement :</strong> 30 jours net. Paiement par virement bancaire.<br>
+      <strong>Jalons de facturation suggérés :</strong> 30 % à la signature — 30 % à la livraison de la phase 2 (site public) — 30 % à la livraison de la phase 4 (portail étudiant) — 10 % à la mise en production.<br>
+      <strong>Note :</strong> Ce devis est indicatif. Le tarif journalier d'un développeur junior en Belgique se situe typiquement entre <strong>300 € et 450 €/jour</strong>. Un profil senior (550–850 €/jour) réduirait la durée d'environ 20–30 %. Les licences logicielles (Strapi Community, Next.js, Node.js) sont gratuites. Aucun coût d'hébergement supplémentaire si le VPS existant est conservé.
+    </div>
+  </div>
+</section>
+
+<!-- ──────────────────────────────── TRADE-OFFS ──────────────────────────────────── -->
+<section id="tradeoffs">
+  <h2>9. Trade-offs vs. Current Custom Build</h2>
+
+  <div class="two-col">
+    <div class="card">
+      <h3 style="color:var(--ok)">What you gain</h3>
+      <ul>
+        <li><strong>No bespoke admin panel maintenance</strong> — Strapi generates the CRUD UI from schema; adding a field to a thesis takes 2 minutes in the GUI, not 30 lines of PHP</li>
+        <li><strong>Schema changes are safe</strong> — Strapi manages migrations automatically; no hand-written <code>.sql</code> files</li>
+        <li><strong>REST + GraphQL API out-of-the-box</strong> — a future mobile app, integration, or external catalogue can consume the API immediately</li>
+        <li><strong>Media Library UI</strong> — upload, rename, and organise files through a proper UI with thumbnails</li>
+        <li><strong>Role-based access control built-in</strong> — adding a new admin user takes seconds; no <code>htpasswd</code> management</li>
+        <li><strong>Community plugins</strong> for audit log, search, email — maintained by others</li>
+        <li><strong>Upgrade path to PostgreSQL</strong> — one config line; no schema rewrite</li>
+        <li><strong>TypeScript end-to-end</strong> — type safety from API response to rendered component</li>
+      </ul>
+    </div>
+    <div class="card">
+      <h3 style="color:var(--danger)">What you lose / accept</h3>
+      <ul>
+        <li><strong>Operational simplicity</strong> — two processes (Strapi + Next.js) instead of one PHP server; slightly more to monitor and deploy</li>
+        <li><strong>PHP familiarity</strong> — custom plugins are JavaScript/TypeScript; the team needs to learn (or hire for) Node.js</li>
+        <li><strong>Smaller codebase for simple tasks</strong> — a 20-line PHP controller becomes a Strapi plugin with boilerplate. The abstraction is a net win at scale, but adds friction for tiny changes</li>
+        <li><strong>Strapi CMS upgrades</strong> — major version upgrades (v4→v5 was breaking) require effort; the team is now on a CMS release cadence</li>
+        <li><strong>Node.js on the server</strong> — higher baseline memory (~150MB for Strapi) vs. PHP's per-request model (~20MB)</li>
+        <li><strong>HTMX hypermedia patterns lost</strong> — replaced by conventional React client-side interactivity; not a functional loss, but a philosophical one for the current codebase's author</li>
+      </ul>
+    </div>
+  </div>
+</section>
+
+<!-- ──────────────────────────────── NOT INCLUDED ────────────────────────────────── -->
+<section id="not-included">
+  <h2>10. What Is Not Included (Out of Scope)</h2>
+
+  <div class="callout warn">
+    <div class="callout-title">Intentionally deferred or dropped</div>
+    <ul style="margin-bottom:0">
+      <li><strong>LDAP integration</strong> — documented in <code>LDAP_SPEC.md</code> but not currently implemented; deferred to a post-launch phase. Strapi's Users &amp; Permissions plugin supports LDAP via a third-party provider when ready.</li>
+      <li><strong>Redesign</strong> — this plan reproduces the current design and UX faithfully. No visual redesign is included.</li>
+      <li><strong>Multi-tenancy / multi-school</strong> — not a current requirement. Strapi supports this but it would be a separate project.</li>
+      <li><strong>Full-text search indexing (Elasticsearch / Meilisearch)</strong> — Strapi's built-in filter-based search is sufficient at ERG's dataset size (~hundreds of theses). Meilisearch integration can be added as a plugin later if needed.</li>
+      <li><strong>Video player / streaming</strong> — current app embeds PeerTube's existing player via URL; that behaviour is preserved. No custom video player is built.</li>
+      <li><strong>Strapi Cloud deployment</strong> — plan assumes self-hosted on the existing ERG VPS. Cloud hosting is a drop-in option at any point.</li>
+    </ul>
+  </div>
+
+  <h3>Migration data quality risks</h3>
+  <div class="callout danger">
+    <div class="callout-title">Data migration risks to verify before Phase 1</div>
+    <ul style="margin-bottom:0">
+      <li>SQLite views (<code>v_theses_full</code>, <code>v_theses_public</code>) aggregate denormalised strings (comma-separated authors etc.) — the migration script must split these back into proper relations</li>
+      <li>Banner/cover path consolidation (<code>027_drop_banner_path.sql</code> pending) — resolve pending migrations before migrating data</li>
+      <li>Legacy artefacts in <code>oui/non</code> fields (<code>025_fix_oui_non_artefacts.sql</code> pending) — same</li>
+      <li>Encrypted SMTP password — must be decrypted during migration (requires the current <code>Crypto.php</code> key) and re-encrypted by Strapi lifecycle hook</li>
+    </ul>
+  </div>
+</section>
+
+</main>
+</body>
+</html>