feat: add file display to forms and recap pages

- Live file preview on all file inputs (file-field partial, edit template):
  thumbnails for images, emoji icons for PDF/video/zip/vtt, filename + size
- New file-preview.js wired via $extraJs in add.php / edit.php and direct
  <script> in partage/index.php; $extraJs support added to head.php
- admin/recapitulatif.php: replace plain table with rich file list — image
  thumbnails linked to media.php, type badges, human-readable size, date
- partage/recapitulatif.php: full rewrite — shows thesis metadata + files
  list with same rich display (no media links for student privacy)
- form.css: new sections for .file-preview-list (live preview) and
  .recap-file-list / .recap-dl / .partage-recap (recap pages)

app/public/assets/js/file-preview.js

@@ -0,0 +1,96 @@
+/**
+ * Live file-input preview.
+ * For every <input type="file" data-preview="CONTAINER_ID"> found on the page,
+ * renders a list of selected files with thumbnails (images) or file-type icons
+ * (PDFs, videos, archives…) and the filename + size.
+ */
+(function () {
+  'use strict';
+
+  const ICON = {
+    pdf:   '📄',
+    video: '🎬',
+    zip:   '🗜️',
+    vtt:   '💬',
+    image: '🖼️',
+    other: '📎',
+  };
+
+  function iconFor(file) {
+    const t = file.type;
+    if (t.startsWith('image/'))      return ICON.image;
+    if (t === 'application/pdf')     return ICON.pdf;
+    if (t.startsWith('video/'))      return ICON.video;
+    if (t === 'application/zip' || t === 'application/x-zip-compressed') return ICON.zip;
+    if (file.name.endsWith('.vtt'))  return ICON.vtt;
+    return ICON.other;
+  }
+
+  function humanSize(bytes) {
+    if (bytes >= 1073741824) return (bytes / 1073741824).toFixed(2) + ' GB';
+    if (bytes >= 1048576)   return (bytes / 1048576).toFixed(2) + ' MB';
+    if (bytes >= 1024)      return (bytes / 1024).toFixed(1) + ' KB';
+    return bytes + ' B';
+  }
+
+  function renderPreview(input, container) {
+    container.innerHTML = '';
+    const files = Array.from(input.files);
+    if (!files.length) return;
+
+    files.forEach(function (file) {
+      const item = document.createElement('div');
+      item.className = 'fp-item';
+
+      if (file.type.startsWith('image/')) {
+        const img = document.createElement('img');
+        img.className = 'fp-thumb';
+        img.alt = file.name;
+        const reader = new FileReader();
+        reader.onload = function (e) { img.src = e.target.result; };
+        reader.readAsDataURL(file);
+        item.appendChild(img);
+      } else {
+        const icon = document.createElement('span');
+        icon.className = 'fp-icon';
+        icon.textContent = iconFor(file);
+        item.appendChild(icon);
+      }
+
+      const meta = document.createElement('span');
+      meta.className = 'fp-meta';
+      meta.innerHTML =
+        '<span class="fp-name">' + escHtml(file.name) + '</span>' +
+        '<span class="fp-size">' + humanSize(file.size) + '</span>';
+      item.appendChild(meta);
+
+      container.appendChild(item);
+    });
+  }
+
+  function escHtml(str) {
+    return str
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
+
+  function init() {
+    document.querySelectorAll('input[type="file"][data-preview]').forEach(function (input) {
+      var containerId = input.getAttribute('data-preview');
+      var container   = document.getElementById(containerId);
+      if (!container) return;
+
+      input.addEventListener('change', function () {
+        renderPreview(input, container);
+      });
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();