From a83dc1c74e8e45aeea51aad3d066d3fadb8c84b6 Mon Sep 17 00:00:00 2001
From: Pontoporeia <pontoporeia@happyngreen.fr>
Date: Thu, 30 Apr 2026 13:07:09 +0200
Subject: [PATCH] feat: multi-type file upload with sort order, labels, and
 expanded MIME support
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- DB migration 007: add sort_order + display_label to thesis_files
- Database: getThesisFiles ordered by sort_order; insertThesisFile accepts label/order;
  new reorderThesisFiles() and updateThesisFileLabel() methods
- ThesisCreateController + ThesisEditController: expand allowed MIME/exts to include
  audio (mp3/ogg/wav/flac/aac/m4a), video (webm/mov/ogv), image (gif/webp),
  archives (tar/gz), any-ext via octet-stream; max size raised to 500 MB;
  accept file_labels[] and file_orders[] POST fields; detectFileType() helper
- MediaController: expanded MIME allowlist; HTTP Range support for audio/video;
  force-download for unknown types; inline for known displayable types
- fieldset-files.php: sortable queue UI with SortableJS, per-file labels, 500 MB hint
- templates/admin/edit.php: existing files as sortable list with drag handles,
  type icons, label inputs, delete checkboxes, hidden sort-order fields
- file-upload-queue.js: new JS replacing file-preview.js — sortable new-file queue,
  per-file labels, hidden order fields on submit, backward-compat legacy preview
- tfe.php: renders audio (<audio>), all video formats, images, PDF, and
  download-only 'other' files; reads display_label; sorted by sort_order
- tfe.css + form.css: styles for audio player, download files, sortable queue,
  drag handles, file type badges, label inputs
- .htaccess + .user.ini: upload_max_filesize=512M / post_max_size=520M
---
 TODO.md                                       | 153 ++--------
 .../007_thesis_files_sort_and_label.sql       |  16 +
 app/public/.htaccess                          |  17 ++
 app/public/.user.ini                          |   6 +
 app/public/admin/add.php                      |   2 +-
 app/public/admin/edit.php                     |   2 +-
 app/public/assets/css/form.css                | 216 ++++++++++++++
 app/public/assets/css/tfe.css                 |  47 +++
 app/public/assets/js/file-upload-queue.js     | 276 ++++++++++++++++++
 app/public/partage/index.php                  |   3 +-
 app/src/Controllers/MediaController.php       | 127 ++++++--
 .../Controllers/ThesisCreateController.php    |  80 +++--
 app/src/Controllers/ThesisEditController.php  |  72 ++++-
 app/src/Database.php                          |  46 ++-
 app/templates/admin/edit.php                  |  71 +++--
 .../partials/form/fieldset-files.php          |  48 ++-
 app/templates/public/tfe.php                  | 118 ++++----
 17 files changed, 1026 insertions(+), 274 deletions(-)
 create mode 100644 app/migrations/applied/007_thesis_files_sort_and_label.sql
 create mode 100644 app/public/.htaccess
 create mode 100644 app/public/.user.ini
 create mode 100644 app/public/assets/js/file-upload-queue.js

diff --git a/TODO.md b/TODO.md
index 0afdf8b..67409d4 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,131 +1,28 @@
-# TODO
+# XAMXAM TODO
 
-## Admin area cleanup
+## File Upload & Display System
 
-- [x] Combine `acces-etudiante.php` + `file-access.php` into `acces.php` (two `<section>` blocks)
-- [x] Move `system.php` content into `parametres.php` (system section + logs section)
-- [x] Use `<section>` for sections, `<fieldset>` only where form fields are present
-- [x] Redirect legacy URLs (acces-etudiante.php, file-access.php, system.php) with 301
-- [x] Update action redirects to point to new pages
-- [x] Update admin nav header (merged 3 items → 2)
+- [x] **DB migration 007** — add `sort_order` and `display_label` columns to `thesis_files`
+- [x] **Database.php** — `getThesisFiles` ordered by `sort_order ASC`; `insertThesisFile` accepts `display_label` + `sort_order`; new `reorderThesisFiles()` and `updateThesisFileLabel()` methods
+- [x] **ThesisCreateController** — expand MIME/ext allowlist (audio: mp3/ogg/wav/flac/aac/m4a; video: webm/mov/ogv; image: gif/webp; archives: tar/gz; any-ext via octet-stream); raise max size to 500 MB; accept `file_labels[]` and `file_orders[]` POST fields; `detectFileType()` helper
+- [x] **ThesisEditController** — same expansions; handle `file_sort_order[]`, `file_label[id]` POST fields; reorder + label-update methods called; `detectFileType()` helper
+- [x] **MediaController** — expanded MIME allowlist; HTTP Range support for audio/video seeking; force-download for "other" types; inline display for known displayable types
+- [x] **fieldset-files.php** (shared partial) — replaced old multi-file input with sortable queue UI using SortableJS; per-file label inputs; wide accept attribute; 500 MB hint
+- [x] **templates/admin/edit.php** — existing files rendered as sortable list with drag handles, file type icons, label inputs, delete checkboxes; hidden `file_sort_order[]` inputs; new-file queue widget
+- [x] **file-upload-queue.js** — new JS: sortable queue for new uploads (SortableJS), per-file label fields, hidden order fields injected on submit; existing-file drag-sort; backward-compatible legacy preview for cover/banner inputs
+- [x] **tfe.php** (public template) — handles audio (`<audio>`), video (all exts), image, PDF, "other" (download link); reads `display_label`; files already sorted by `sort_order`
+- [x] **tfe.css** — styles for `.tfe-audio`, `.tfe-download-file`, `.tfe-download-link`
+- [x] **form.css** — styles for `.tfe-file-queue`, `.fq-item`, `.admin-file-list-item` (sortable), drag handles, label inputs, ghost class
+- [x] **PHP upload limits** — `.htaccess` + `.user.ini` in `public/` with `upload_max_filesize=512M` / `post_max_size=520M`
+- [x] **add.php / edit.php / partage/index.php** — use `sortable.min.js` + `file-upload-queue.js` instead of `file-preview.js`
 
-## Bug fixes
-
-- [x] Fix `$enabledAccessTypes` undefined / `array_map()` TypeError on edit page — controller was fetching `getAccessTypes()` instead of `getEnabledFormAccessTypes()` and returning it under the wrong key
-- [x] Fix fatal TypeError: `old()` called with wrong arity in `jury-fieldset.php` partial under partage context — removed `?: null` coercions so `$juryPresident`/`$juryPromoteur` are `''` not `null`, keeping `$addMode` false
-- [x] Fix `$formData` destroyed by included partials (`fieldset-academic.php`, `fieldset-metadata.php`, `fieldset-licence-explanation.php` were incorrectly unsetting `$formData`/wrong variable in caller scope)
-
-## Form help blocks — sortable admin UI
-
-- [x] Migration 005: add `sort_order` column to `form_help_blocks`
-- [x] `Database::getAllFormHelpBlocks()` — ORDER BY sort_order, expose sort_order in returned data
-- [x] `Database::reorderFormHelpBlocks(array $keys)` — persist new order
-- [x] `actions/form-help-reorder.php` — HTMX POST handler (CSRF-protected, 204 response)
-- [x] `templates/admin/contenus.php` — replace table with two-panel layout:
-  - Left: SortableJS + htmx drag-and-drop card list
-  - Right: static form structure reference (fieldsets + inputs)
-- [x] CSS in admin.css: `.fhb-*` classes for layout, cards, ghost/chosen/drag states
-- [x] `schema.sql` — updated `form_help_blocks` DDL with `sort_order`
-- [x] Vendor SortableJS 1.15.2 into `assets/js/sortable.min.js` (remove CDN dependency)
-
-## Bug fixes (continued)
-
-- [x] Fix missing favicon tags in `partage/recapitulatif.php`
-- [x] Fix fatal `Class "SmtpRelay" not found` in `StudentEmail.php` — add `require_once SmtpRelay.php` before `StudentEmail.php` in `partage/index.php`
-
-- [x] Add missing favicon tags to all three `<head>` blocks in `partage/index.php` (error page, password gate, main form)
-
-## Rename posterg → xamxam throughout codebase
-
-- [x] Rename `nginx/posterg.conf` → `nginx/xamxam.conf` (+ `.conf.reference`)
-- [x] Update nginx conf: `server_name`, log paths, htpasswd path, header comments
-- [x] Update `justfile`: SSH host alias, group, DB filename, conf path, tmp paths
-- [x] Update `scripts/deploy-server.sh`: group, conf paths, site names, URLs
-- [x] Update `scripts/setup-server.sh`: APP_DIR, APP_GROUP, comments
-- [x] Update `scripts/manage-admin-users.sh`: htpasswd path
-- [x] Update `scripts/migrate.sh`: DB filename
-- [x] Update `scripts/setup-dev.sh`: DB filename
-- [x] Update `scripts/copy_crash_logs.sh`: log filenames, hostname
-- [x] Update `README.md`: SSH host, paths, DB name
-- [x] Update `nginx/README.md`, `nginx/SETUP.md`, and all `nginx/docs/*.md`
-- [x] Update PHP source: `Database.php`, `SystemController.php`, `MediaController.php`, `LiveReloadController.php`, `SmtpRelay.php`, `live-reload.php`, export actions
-- [x] Update `app/migrations/run.php`, `app/tests/README.md`, `app/storage/README.md`
-- [x] Replace all remaining "Post-ERG" branding with "XAMXAM" (scripts, PHP source, schema, docs)
-- [x] `deploy-server.sh`: remove legacy `sites-enabled/posterg` symlink to fix duplicate `limit_req_zone` nginx error
-- [x] `deploy-server.sh`: auto-migrate `.htpasswd-posterg` → `.htpasswd-xamxam` if new file absent
-- [x] `deploy-server.sh`: auto-migrate `posterg.db` → `xamxam.db` if new DB missing/empty; remove legacy file
-- [x] `deploy-server.sh`: clean up legacy posterg nginx configs and prune old backups
-- [x] Rename local `storage/posterg.db` → `storage/xamxam.db`
-
-## LDAP auth migration (pending client access)
-
-- [ ] Get LDAP server hostname, port, service-account DN+password, base DN, user attr, group DN from client
-- [ ] Verify TCP reachability from XAMXAM VM to LDAP server (port 636)
-- [ ] See `docs/LDAP_AUTH_PLAN.md` for full phase-by-phase plan
-
-## SMTP transport security hardening
-
-- [x] Enable TLS peer verification (`verify_peer`, `verify_peer_name`, `peer_name`) on both `smtpSend` and `smtpProbe` — removes MITM vulnerability from `verify_peer: false`
-- [x] Add `caBundlePath()` — resolves system CA bundle path (php.ini → Debian/RHEL/Alpine candidates → PHP built-in fallback)
-- [x] Set SSL context options explicitly on socket before `stream_socket_enable_crypto()` for STARTTLS (both probe and send paths)
-- [x] Add `sanitiseEnvelope()` — strips CR/LF from envelope addresses to prevent SMTP command injection
-- [x] Fix RFC 5321 §4.5.2 dot-stuffing: replace `preg_replace` with correct CRLF-normalise → `str_replace("\r\n.", "\r\n..")` sequence
-
-## SMTP notify_email fix
-
-- [x] Migration 006: add `notify_email` column to `smtp_settings`
-- [x] `SmtpRelay::getSettings()` — include `notify_email` in SELECT + defaults
-- [x] `SmtpRelay::updateSettings()` — persist `notify_email`
-- [x] `SmtpRelay::getNotifyEmail()` — returns `notify_email` ?? `from_email`
-- [x] `request-access.php` — use `getNotifyEmail()` instead of `from_email` for admin notifications
-- [x] `actions/settings.php` — wire `smtp_notify_email` POST field
-- [x] Template: add "Adresse de notification admin" field to SMTP form
-- [x] `schema.sql` — updated DDL
-
-## SMTP credential validation
-
-- [x] Add `SmtpProbeException` with `field` property for structured error classification
-- [x] Add `SmtpRelay::test()` — returns `{ok, error, field}` with field = input id to highlight
-- [x] `smtpProbe()` throws typed exceptions per failure point:
-  - connect fail → name resolution error → `smtp_host`
-  - connect fail → port refused → `smtp_port`
-  - connect fail → timeout → `smtp_host`
-  - bad greeting / timeout after connect → `smtp_host` / `smtp_port`
-  - STARTTLS not supported / TLS negotiation fail → `smtp_encryption`
-  - AUTH rejected, code 535 → `smtp_password`; other auth failures → `smtp_username`
-- [x] `actions/settings.php`: store `$_SESSION['_flash_smtp_field']` on probe failure
-- [x] `parametres.php` controller: consume + clear `_flash_smtp_field` into `$smtpErrorField`
-- [x] Template: `aria-invalid`, `aria-describedby`, inline `<small class="param-field-error">` per field
-- [x] JS: scroll + focus the offending field on page load
-- [x] CSS: red `border-bottom` on `[aria-invalid]`, `.param-field-error` error text style
-
-## Répertoire layout
-
-- [x] Make column headings sticky/non-scrollable; only `ul` scrolls per column
-- [x] Remove padding from `.search-main` and `.repertoire-index`
-- [x] Minimal horizontal padding inside columns (`var(--space-2xs)`)
-- [x] Align all column headings to the same baseline row (2-row grid via `display: contents`)
-
-## SMTP 550 recipient-rejected handling
-
-- [x] Add `SmtpSendException` — carries `smtpCode` + `smtpResponse`; `isRecipientRejected()` for 550–554
-- [x] `smtpSend()` `$expect` closure throws `SmtpSendException` (with code) instead of plain `RuntimeException`
-- [x] `SmtpRelay::send()` re-throws `SmtpSendException` so callers can react
-- [x] `request-access.php` (new auto-approve): catch 550 → roll back token + approval, return HTTP 422 with user-facing message
-- [x] `request-access.php` (resend path): catch 550 → return HTTP 422 instead of silent "access approved"
-- [x] `StudentEmail::sendConfirmation()`: catch `SmtpSendException` → log + return false (submission must not be aborted)
-- [x] `admin/actions/access-request.php`: catch `SmtpSendException` after approval → flash warning distinguishing recipient-rejected vs transient
-- [x] `docs/SMTP_550_POSTFIX_FIX.md` — report for Postfix admin (diagnosis, 3 fix options, verification steps)
-
-## CSS refactor
-
-- [x] Move semantic HTML element baseline styles into common.css
-  - `fieldset` (background, border, padding, radius)
-  - `legend` (font, weight, color, transform)
-  - `small` (size, color, display, margin)
-  - `table`, `th`, `td` (collapse, sizing, spacing)
-  - `dialog` + `::backdrop`
-  - `details > summary`
-- [x] Remove duplicated rules from admin.css, form.css, system.css, file-access.css
-- [x] Fix file-access.css to use real design tokens (was using undefined --border, --surface, --accent, etc.)
-- [x] Remove redundant @import url("./variables.css") from admin.css, system.css, file-access.css
+## Previously completed
+- [x] Multi-file upload for thesis files (basic)
+- [x] File access restriction system (email approval workflow)
+- [x] Share link system for student submission
+- [x] Admin CRUD for theses
+- [x] Public TFE detail page with file display
+- [x] Search and repertoire
+- [x] Tag management
+- [x] Form help blocks
+- [x] SMTP notification
diff --git a/app/migrations/applied/007_thesis_files_sort_and_label.sql b/app/migrations/applied/007_thesis_files_sort_and_label.sql
new file mode 100644
index 0000000..2947120
--- /dev/null
+++ b/app/migrations/applied/007_thesis_files_sort_and_label.sql
@@ -0,0 +1,16 @@
+-- Migration 007: Add sort_order and display_label to thesis_files
+-- Also expand file type enum to cover audio and generic other types.
+
+ALTER TABLE thesis_files ADD COLUMN sort_order  INTEGER NOT NULL DEFAULT 0;
+ALTER TABLE thesis_files ADD COLUMN display_label TEXT;
+
+-- Back-fill sort_order from existing insertion order so ORDER BY sort_order
+-- is consistent with the old ORDER BY uploaded_at behaviour.
+UPDATE thesis_files SET sort_order = (
+    SELECT COUNT(*) FROM thesis_files tf2
+    WHERE tf2.thesis_id = thesis_files.thesis_id
+      AND (tf2.sort_order < thesis_files.sort_order
+           OR (tf2.sort_order = 0 AND tf2.uploaded_at < thesis_files.uploaded_at)
+           OR (tf2.sort_order = 0 AND tf2.uploaded_at = thesis_files.uploaded_at AND tf2.id < thesis_files.id))
+) + 1
+WHERE sort_order = 0;
diff --git a/app/public/.htaccess b/app/public/.htaccess
new file mode 100644
index 0000000..267147d
--- /dev/null
+++ b/app/public/.htaccess
@@ -0,0 +1,17 @@
+# PHP upload limits for large thesis files (PDFs, video, audio)
+<IfModule mod_php.c>
+    php_value upload_max_filesize 512M
+    php_value post_max_size       520M
+    php_value memory_limit        256M
+    php_value max_execution_time  300
+</IfModule>
+# mod_php8 variant
+<IfModule mod_php8.c>
+    php_value upload_max_filesize 512M
+    php_value post_max_size       520M
+    php_value memory_limit        256M
+    php_value max_execution_time  300
+</IfModule>
+
+# Prevent directory listing
+Options -Indexes
diff --git a/app/public/.user.ini b/app/public/.user.ini
new file mode 100644
index 0000000..17526c2
--- /dev/null
+++ b/app/public/.user.ini
@@ -0,0 +1,6 @@
+; PHP upload limits — applies when served via PHP-FPM (nginx)
+upload_max_filesize = 512M
+post_max_size       = 520M
+memory_limit        = 256M
+max_execution_time  = 300
+max_input_time      = 300
diff --git a/app/public/admin/add.php b/app/public/admin/add.php
index 06149b2..b87325b 100644
--- a/app/public/admin/add.php
+++ b/app/public/admin/add.php
@@ -46,7 +46,7 @@ function wasSelected($key, $value) {
 $isAdmin = true;
 $bodyClass = 'admin-body';
 $extraCss  = ['/assets/css/form.css'];
-$extraJs   = ['/assets/js/file-preview.js'];
+$extraJs   = ['/assets/js/sortable.min.js', '/assets/js/file-upload-queue.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 cf1c3ea..d5bf83c 100644
--- a/app/public/admin/edit.php
+++ b/app/public/admin/edit.php
@@ -28,7 +28,7 @@ try {
 
 $isAdmin = true; $bodyClass = 'admin-body';
 $extraCss  = ['/assets/css/form.css'];
-$extraJs   = ['/assets/js/file-preview.js'];
+$extraJs   = ['/assets/js/sortable.min.js', '/assets/js/file-upload-queue.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/assets/css/form.css b/app/public/assets/css/form.css
index 74689d9..ae3d95d 100644
--- a/app/public/assets/css/form.css
+++ b/app/public/assets/css/form.css
@@ -585,6 +585,222 @@ label:has(+ div > input:required)::after {
     color: var(--text-tertiary);
 }
 
+/* ── TFE file upload queue (.tfe-file-queue) ────────────────────────────── */
+
+.admin-files-fieldgroup {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3xs);
+}
+
+.tfe-file-picker {
+    font-size: var(--step--1);
+    background: transparent;
+    border: 1px dashed var(--border-primary);
+    padding: var(--space-3xs) var(--space-2xs);
+    border-radius: 3px;
+    cursor: pointer;
+    font-family: inherit;
+    width: 100%;
+}
+
+.tfe-file-picker:hover {
+    border-color: var(--accent-primary);
+}
+
+.sortable-list {
+    list-style: none;
+    margin: var(--space-2xs) 0 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2xs);
+}
+
+/* New-file queue items */
+.tfe-file-queue {
+    min-height: 0;
+}
+
+.tfe-queue-empty {
+    font-size: var(--step--2);
+    color: var(--text-tertiary);
+    margin: var(--space-3xs) 0 0;
+}
+
+.tfe-file-queue:not(:empty) + .tfe-queue-empty {
+    display: none;
+}
+
+.fq-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: var(--space-3xs) var(--space-xs);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-primary);
+    border-radius: 4px;
+    min-width: 0;
+}
+
+.fq-drag-handle,
+.admin-file-drag-handle {
+    cursor: grab;
+    color: var(--text-tertiary);
+    font-size: 1.1rem;
+    line-height: 1;
+    padding: 0 var(--space-3xs);
+    flex-shrink: 0;
+    user-select: none;
+}
+
+.fq-drag-handle:active,
+.admin-file-drag-handle:active {
+    cursor: grabbing;
+}
+
+.fq-ghost,
+.sortable-ghost {
+    opacity: 0.4;
+    background: var(--accent-muted, #f0f0f0);
+}
+
+.fq-icon {
+    font-size: 1.3rem;
+    line-height: 1;
+    flex-shrink: 0;
+    width: 2rem;
+    text-align: center;
+}
+
+.fq-info {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3xs);
+    flex: 1;
+    min-width: 0;
+}
+
+.fq-name {
+    font-size: var(--step--1);
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.fq-size {
+    font-size: var(--step--2);
+    color: var(--text-tertiary);
+}
+
+.fq-label,
+.admin-file-label-input {
+    font-size: var(--step--2);
+    font-family: inherit;
+    background: transparent;
+    border: none;
+    border-bottom: 1px solid var(--border-primary);
+    padding: 2px 0;
+    width: 100%;
+    color: var(--text-primary);
+    border-radius: 0;
+}
+
+.fq-label:focus,
+.admin-file-label-input:focus {
+    outline: none;
+    border-bottom-color: var(--accent-primary);
+}
+
+.fq-remove {
+    flex-shrink: 0;
+}
+
+/* ── Existing-files list (edit form) ─────────────────────────────────────── */
+
+.admin-file-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+}
+
+.admin-file-list-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: var(--space-3xs) var(--space-xs);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-primary);
+    border-radius: 4px;
+    min-width: 0;
+}
+
+.admin-file-icon-col {
+    font-size: 1.2rem;
+    line-height: 1;
+    flex-shrink: 0;
+    width: 1.8rem;
+    text-align: center;
+}
+
+.admin-file-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1;
+    min-width: 0;
+}
+
+.admin-file-name {
+    font-size: var(--step--1);
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--text-primary);
+}
+
+a.admin-file-name {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+
+a.admin-file-name:hover {
+    color: var(--accent-primary);
+}
+
+.admin-file-meta-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2xs);
+    flex-wrap: wrap;
+}
+
+.admin-file-type-badge {
+    font-size: var(--step--2);
+    padding: 1px 5px;
+    background: var(--bg-primary);
+    border: 1px solid var(--border-primary);
+    border-radius: 3px;
+    color: var(--text-secondary);
+    white-space: nowrap;
+}
+
+.admin-file-size {
+    font-size: var(--step--2);
+    color: var(--text-tertiary);
+}
+
+.admin-file-delete {
+    flex-shrink: 0;
+    margin-left: auto;
+    white-space: nowrap;
+}
+
 /* ── Recap file list (admin & partage recapitulatif) ────────────────────── */
 .recap-file-list {
     list-style: none;
diff --git a/app/public/assets/css/tfe.css b/app/public/assets/css/tfe.css
index cb5ce05..12e2736 100644
--- a/app/public/assets/css/tfe.css
+++ b/app/public/assets/css/tfe.css
@@ -151,6 +151,53 @@ aside figcaption {
     margin: var(--space-3xs) 0 0;
 }
 
+/* Audio player */
+.tfe-audio {
+    width: 100%;
+    margin: 0;
+    display: block;
+}
+
+/* Download-only files */
+.tfe-download-file {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: var(--space-s) var(--space-m);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-primary);
+    border-radius: 6px;
+    flex-wrap: wrap;
+}
+
+.tfe-download-link {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    font-size: var(--step--1);
+    font-weight: 500;
+    color: var(--text-primary);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    word-break: break-all;
+}
+
+.tfe-download-link:hover {
+    color: var(--accent-primary);
+}
+
+.tfe-download-icon {
+    font-size: 1.3rem;
+    line-height: 1;
+    flex-shrink: 0;
+}
+
+.tfe-download-size {
+    font-size: var(--step--2);
+    color: var(--text-tertiary);
+    margin-left: auto;
+}
+
 .tfe-pdf-fallback a {
     color: var(--text-primary);
     text-decoration: underline;
diff --git a/app/public/assets/js/file-upload-queue.js b/app/public/assets/js/file-upload-queue.js
new file mode 100644
index 0000000..60f5b27
--- /dev/null
+++ b/app/public/assets/js/file-upload-queue.js
@@ -0,0 +1,276 @@
+/**
+ * file-upload-queue.js
+ *
+ * Powers two UI features:
+ *
+ *  1. TFE multi-file upload queue (#tfe-file-queue)
+ *     - Renders each selected file as a sortable row with icon, name, size
+ *       and an optional label input.
+ *     - Drag-to-reorder via SortableJS.
+ *     - Injects hidden `file_labels[]` and `file_orders[]` inputs so PHP
+ *       receives per-file label and intended sort-order data.
+ *     - Works for both the add/partage form (pure new uploads) and the edit
+ *       form (new uploads only; existing-file sort is handled server-side).
+ *
+ *  2. Legacy single-file previews (data-preview="CONTAINER_ID")
+ *     - Backward-compatible with cover-image and banner inputs.
+ */
+(function () {
+  'use strict';
+
+  /* ── Helpers ──────────────────────────────────────────────────────────── */
+
+  const ICONS = {
+    pdf:   '📄',
+    video: '🎬',
+    audio: '🔊',
+    zip:   '🗜️',
+    vtt:   '💬',
+    image: '🖼️',
+    other: '📎',
+  };
+
+  function iconFor(file) {
+    const t = file.type || '';
+    const n = file.name.toLowerCase();
+    if (t.startsWith('image/'))                                        return ICONS.image;
+    if (t === 'application/pdf' || n.endsWith('.pdf'))                 return ICONS.pdf;
+    if (t.startsWith('video/') || /\.(mp4|webm|mov|ogv)$/.test(n))    return ICONS.video;
+    if (t.startsWith('audio/') || /\.(mp3|ogg|oga|wav|flac|aac|m4a)$/.test(n)) return ICONS.audio;
+    if (t === 'application/zip' || /\.(zip|tar|gz|tgz)$/.test(n))     return ICONS.zip;
+    if (n.endsWith('.vtt'))                                             return ICONS.vtt;
+    return ICONS.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 esc(str) {
+    return str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+
+  /* ── DataTransfer-backed file list ────────────────────────────────────── */
+  // We keep a parallel array so we can freely re-order and remove files
+  // then reconstruct a proper FileList via DataTransfer when needed.
+
+  function syncInputFiles(input, fileArray) {
+    try {
+      const dt = new DataTransfer();
+      fileArray.forEach(f => dt.items.add(f));
+      input.files = dt.files;
+    } catch (e) {
+      // DataTransfer not available in older browsers — graceful degradation.
+    }
+  }
+
+  /* ── TFE file queue ───────────────────────────────────────────────────── */
+
+  function initFileQueue() {
+    const picker   = document.getElementById('tfe-files-input');
+    const queue    = document.getElementById('tfe-file-queue');
+    const empty    = document.getElementById('tfe-file-queue-empty');
+
+    if (!picker || !queue) return;
+
+    // Array parallel to the visual queue
+    let fileArray = [];
+
+    // Keep SortableJS instance reference
+    let sortable = null;
+    if (typeof Sortable !== 'undefined') {
+      sortable = Sortable.create(queue, {
+        animation: 150,
+        handle:    '.fq-drag-handle',
+        ghostClass: 'fq-ghost',
+        onEnd: () => reorderFiles(),
+      });
+    }
+
+    picker.addEventListener('change', function () {
+      const newFiles = Array.from(picker.files);
+      fileArray = fileArray.concat(newFiles);
+      renderQueue();
+      // Reset input so the same file can be selected again if needed
+      picker.value = '';
+    });
+
+    function renderQueue() {
+      queue.innerHTML = '';
+
+      if (fileArray.length === 0) {
+        empty.style.display = '';
+        syncInputFiles(picker, []);
+        return;
+      }
+      empty.style.display = 'none';
+
+      fileArray.forEach(function (file, idx) {
+        const li = document.createElement('li');
+        li.className = 'fq-item';
+        li.setAttribute('data-idx', idx);
+
+        li.innerHTML =
+          '<span class="fq-drag-handle" title="Réordonner">⠿</span>' +
+          '<span class="fq-icon">' + iconFor(file) + '</span>' +
+          '<span class="fq-info">' +
+            '<span class="fq-name">' + esc(file.name) + '</span>' +
+            '<span class="fq-size">' + humanSize(file.size) + '</span>' +
+            '<input type="text" class="fq-label admin-file-label-input" ' +
+                   'placeholder="Légende / description (optionnel)">' +
+          '</span>' +
+          '<button type="button" class="admin-btn-remove fq-remove" aria-label="Retirer ' + esc(file.name) + '">✕</button>';
+
+        // Remove button
+        li.querySelector('.fq-remove').addEventListener('click', function () {
+          fileArray.splice(idx, 1);
+          renderQueue();
+        });
+
+        queue.appendChild(li);
+      });
+
+      syncInputFiles(picker, fileArray);
+      injectHiddenFields();
+    }
+
+    function reorderFiles() {
+      // Re-sync fileArray to match current DOM order
+      const items   = Array.from(queue.querySelectorAll('.fq-item'));
+      const newArr  = items.map(li => fileArray[parseInt(li.getAttribute('data-idx'), 10)]);
+      fileArray = newArr;
+      // Re-render to update data-idx attributes
+      renderQueue();
+    }
+
+    function injectHiddenFields() {
+      // Remove previous hidden fields
+      const form = picker.closest('form');
+      if (!form) return;
+      form.querySelectorAll('.fq-hidden-label, .fq-hidden-order').forEach(el => el.remove());
+
+      // Inject current labels and order indices
+      // We use the queue DOM (post-sort) as the source of truth.
+      const items = Array.from(queue.querySelectorAll('.fq-item'));
+      items.forEach(function (li, sortedIdx) {
+        const labelVal = li.querySelector('.fq-label').value;
+
+        const lInput = document.createElement('input');
+        lInput.type  = 'hidden';
+        lInput.name  = 'file_labels[]';
+        lInput.value = labelVal;
+        lInput.className = 'fq-hidden-label';
+        form.appendChild(lInput);
+
+        const oInput = document.createElement('input');
+        oInput.type  = 'hidden';
+        oInput.name  = 'file_orders[]';
+        oInput.value = sortedIdx + 1;
+        oInput.className = 'fq-hidden-order';
+        form.appendChild(oInput);
+      });
+    }
+
+    // Before form submit, inject hidden fields so labels are up-to-date
+    const form = picker.closest('form');
+    if (form) {
+      form.addEventListener('submit', function () {
+        syncInputFiles(picker, fileArray);
+        injectHiddenFields();
+      });
+    }
+  }
+
+  /* ── Existing-files sortable (edit form only) ─────────────────────────── */
+
+  function initExistingFilesSortable() {
+    const list = document.getElementById('existing-files-sortable');
+    if (!list || typeof Sortable === 'undefined') return;
+
+    Sortable.create(list, {
+      animation: 150,
+      handle:    '.admin-file-drag-handle',
+      ghostClass: 'fq-ghost',
+      onEnd: function () {
+        // Update the hidden file_sort_order[] inputs to reflect new order
+        const items = list.querySelectorAll('.admin-file-list-item[data-file-id]');
+        list.querySelectorAll('input[name="file_sort_order[]"]').forEach(el => el.remove());
+        items.forEach(function (li) {
+          const inp = document.createElement('input');
+          inp.type  = 'hidden';
+          inp.name  = 'file_sort_order[]';
+          inp.value = li.getAttribute('data-file-id');
+          li.prepend(inp);
+        });
+      },
+    });
+  }
+
+  /* ── Legacy single-file preview (data-preview="CONTAINER_ID") ─────────── */
+
+  function initLegacyPreviews() {
+    document.querySelectorAll('input[type="file"][data-preview]').forEach(function (input) {
+      // Skip the TFE multi-file picker (handled by queue above)
+      if (input.id === 'tfe-files-input') return;
+
+      const containerId = input.getAttribute('data-preview');
+      const container   = document.getElementById(containerId);
+      if (!container) return;
+
+      input.addEventListener('change', function () {
+        renderLegacyPreview(input, container);
+      });
+    });
+  }
+
+  function renderLegacyPreview(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">' + esc(file.name) + '</span>' +
+        '<span class="fp-size">' + humanSize(file.size) + '</span>';
+      item.appendChild(meta);
+      container.appendChild(item);
+    });
+  }
+
+  /* ── Bootstrap ────────────────────────────────────────────────────────── */
+
+  function init() {
+    initFileQueue();
+    initExistingFilesSortable();
+    initLegacyPreviews();
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();
diff --git a/app/public/partage/index.php b/app/public/partage/index.php
index 48a9150..dccc2ac 100644
--- a/app/public/partage/index.php
+++ b/app/public/partage/index.php
@@ -244,7 +244,8 @@ 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/file-preview.js') ?>" defer></script>
+        <script src="<?= App::assetV('/assets/js/sortable.min.js') ?>" defer></script>
+        <script src="<?= App::assetV('/assets/js/file-upload-queue.js') ?>" defer></script>
     </head>
     <body class="student-body">
         <main id="main-content">
diff --git a/app/src/Controllers/MediaController.php b/app/src/Controllers/MediaController.php
index 432c4cb..748cd12 100644
--- a/app/src/Controllers/MediaController.php
+++ b/app/src/Controllers/MediaController.php
@@ -68,47 +68,128 @@ class MediaController
         $finfo    = new finfo(FILEINFO_MIME_TYPE);
         $mimeType = $finfo->file($realFull);
 
-        $allowedMimes = [
-            'image/jpeg',
-            'image/png',
-            'image/gif',
-            'application/pdf',
-            'video/mp4',
-            'application/zip',
-            'text/vtt',       // WebVTT caption sidecar files
-        ];
-
         // finfo may return 'text/plain' for WebVTT files on some systems;
         // re-classify by extension so we don't block them.
-        if ($mimeType === 'text/plain' && strtolower(pathinfo($realFull, PATHINFO_EXTENSION)) === 'vtt') {
+        $ext = strtolower(pathinfo($realFull, PATHINFO_EXTENSION));
+        if ($mimeType === 'text/plain' && $ext === 'vtt') {
             $mimeType = 'text/vtt';
         }
+        // finfo may return application/octet-stream for valid downloadable files
+        // that have known extensions — allow them through.
+        $knownDownloadExts = ['zip','tar','gz','tgz','mp3','ogg','oga','wav','flac','aac','m4a',
+                              'webm','ogv','mov','gif','webp','pdf','vtt'];
 
-        if (!in_array($mimeType, $allowedMimes, true)) {
+        $allowedMimes = [
+            // Images
+            'image/jpeg', 'image/png', 'image/gif', 'image/webp',
+            // Documents
+            'application/pdf',
+            // Video
+            'video/mp4', 'video/webm', 'video/ogg', 'video/quicktime',
+            // Audio
+            'audio/mpeg', 'audio/mp3', 'audio/ogg', 'audio/wav',
+            'audio/flac', 'audio/aac', 'audio/x-m4a', 'audio/mp4',
+            // Captions
+            'text/vtt',
+            // Archives
+            'application/zip', 'application/x-zip-compressed',
+            'application/x-tar', 'application/gzip',
+            // Generic binary (allowed when ext is known)
+            'application/octet-stream',
+        ];
+
+        $isAllowed = in_array($mimeType, $allowedMimes, true)
+                  || in_array($ext, $knownDownloadExts, true);
+
+        if (!$isAllowed) {
             http_response_code(403);
             exit;
         }
 
-        // 5. Send response headers
+        // 5. Determine if download was explicitly requested
+        $forceDownload = !empty($_GET['download']) && $_GET['download'] === '1';
+
+        // File types that should be displayed inline by default
+        $inlineExts = ['jpg','jpeg','png','gif','webp','pdf','mp4','webm','ogv','mov',
+                       'mp3','ogg','oga','wav','flac','aac','m4a','vtt'];
+        $inline = in_array($ext, $inlineExts, true) && !$forceDownload;
+
+        // 6. Send response headers
         header('Content-Type: ' . $mimeType);
         header('Content-Length: ' . filesize($realFull));
         header('X-Content-Type-Options: nosniff');
 
-        $ext = strtolower(pathinfo($realFull, PATHINFO_EXTENSION));
-
-        if (in_array($ext, ['jpg', 'jpeg', 'png', 'gif'], true)) {
-            header('Cache-Control: public, max-age=604800');
-        } elseif ($ext === 'pdf') {
-            header('Cache-Control: public, max-age=86400');
-            header('Content-Disposition: inline');
-        } elseif ($ext === 'vtt') {
+        if ($ext === 'vtt') {
             header('Content-Type: text/vtt; charset=utf-8');
             header('Cache-Control: public, max-age=86400');
+        } elseif (in_array($ext, ['jpg','jpeg','png','gif','webp'], true)) {
+            header('Cache-Control: public, max-age=604800');
+            if (!$forceDownload) header('Content-Disposition: inline');
+        } elseif ($ext === 'pdf') {
+            header('Cache-Control: public, max-age=86400');
+            header('Content-Disposition: ' . ($forceDownload ? 'attachment' : 'inline'));
+        } elseif (in_array($ext, ['mp4','webm','ogv','mov'], true)) {
+            // Video: no cache-control range requests should work
+            header('Accept-Ranges: bytes');
+            header('Cache-Control: public, max-age=86400');
+        } elseif (in_array($ext, ['mp3','ogg','oga','wav','flac','aac','m4a'], true)) {
+            header('Accept-Ranges: bytes');
+            header('Cache-Control: public, max-age=86400');
         } else {
+            // Unknown / other: force download
+            $safeFilename = preg_replace('/[^A-Za-z0-9._-]/', '_', basename($realFull));
+            header('Content-Disposition: attachment; filename="' . $safeFilename . '"');
             header('Cache-Control: private, no-store');
         }
 
-        // 6. Stream file
-        readfile($realFull);
+        // 7. Stream file (with range support for media)
+        if (in_array($ext, ['mp4','webm','ogv','mov','mp3','ogg','oga','wav','flac','aac','m4a'], true)) {
+            $this->streamWithRange($realFull, $mimeType);
+        } else {
+            readfile($realFull);
+        }
+    }
+
+    /**
+     * Stream a file with HTTP Range support (required for HTML5 audio/video seeking).
+     */
+    private function streamWithRange(string $path, string $mimeType): void
+    {
+        $size  = filesize($path);
+        $start = 0;
+        $end   = $size - 1;
+
+        if (isset($_SERVER['HTTP_RANGE'])) {
+            $range = $_SERVER['HTTP_RANGE'];
+            if (!preg_match('/bytes=\d*-\d*/', $range)) {
+                header('HTTP/1.1 416 Range Not Satisfiable');
+                header('Content-Range: bytes */' . $size);
+                exit;
+            }
+            [, $range] = explode('=', $range, 2);
+            [$start, $end] = array_pad(explode('-', $range, 2), 2, '');
+            $start = ($start === '') ? 0          : (int)$start;
+            $end   = ($end   === '') ? $size - 1  : (int)$end;
+            if ($end >= $size) $end = $size - 1;
+            if ($start > $end) { http_response_code(416); exit; }
+
+            header('HTTP/1.1 206 Partial Content');
+            header('Content-Range: bytes ' . $start . '-' . $end . '/' . $size);
+            header('Content-Length: ' . ($end - $start + 1));
+        } else {
+            header('Content-Length: ' . $size);
+        }
+
+        $fp = fopen($path, 'rb');
+        if ($fp === false) { http_response_code(500); exit; }
+        fseek($fp, $start);
+        $remaining = $end - $start + 1;
+        while ($remaining > 0 && !feof($fp)) {
+            $chunk = fread($fp, min(8192, $remaining));
+            if ($chunk === false) break;
+            echo $chunk;
+            $remaining -= strlen($chunk);
+        }
+        fclose($fp);
     }
 }
diff --git a/app/src/Controllers/ThesisCreateController.php b/app/src/Controllers/ThesisCreateController.php
index 16b89dc..378b118 100644
--- a/app/src/Controllers/ThesisCreateController.php
+++ b/app/src/Controllers/ThesisCreateController.php
@@ -20,16 +20,42 @@
 class ThesisCreateController
 {
     /** Maximum allowed file size for thesis files (bytes). */
-    private const MAX_FILE_SIZE = 50 * 1024 * 1024; // 50 MB
+    private const MAX_FILE_SIZE = 500 * 1024 * 1024; // 500 MB
 
     /** MIME types accepted for thesis files. */
     private const ALLOWED_MIME_TYPES = [
-        'image/jpeg', 'image/png', 'application/pdf',
-        'video/mp4', 'application/zip', 'text/vtt',
+        // Images
+        'image/jpeg', 'image/png', 'image/gif', 'image/webp',
+        // Documents
+        'application/pdf',
+        // Video
+        'video/mp4', 'video/webm', 'video/ogg', 'video/quicktime',
+        // Audio
+        'audio/mpeg', 'audio/mp3', 'audio/ogg', 'audio/wav',
+        'audio/flac', 'audio/aac', 'audio/x-m4a', 'audio/mp4',
+        // Captions
+        'text/vtt',
+        // Archives / other downloadables
+        'application/zip', 'application/x-zip-compressed',
+        'application/x-tar', 'application/gzip',
+        'application/octet-stream',
     ];
 
     /** File extensions accepted for thesis files. */
-    private const ALLOWED_EXTENSIONS = ['jpg', 'jpeg', 'png', 'pdf', 'mp4', 'zip', 'vtt'];
+    private const ALLOWED_EXTENSIONS = [
+        // Images
+        'jpg', 'jpeg', 'png', 'gif', 'webp',
+        // Documents
+        'pdf',
+        // Video
+        'mp4', 'webm', 'ogv', 'mov',
+        // Audio
+        'mp3', 'ogg', 'oga', 'wav', 'flac', 'aac', 'm4a',
+        // Captions
+        'vtt',
+        // Archives / other
+        'zip', 'tar', 'gz', 'tgz',
+    ];
 
     private Database $db;
 
@@ -159,7 +185,7 @@ class ThesisCreateController
         // ── 5. File uploads (outside transaction — filesystem ops) ────────────
         $this->handleCoverUpload($thesisId, $files['couverture'] ?? null);
         $this->db->handleBannerUpload($thesisId, $files['banner'] ?? null);
-        $this->handleThesisFiles($thesisId, $data['annee'], $identifier, $files['files'] ?? null, $data['auteurName']);
+        $this->handleThesisFiles($thesisId, $data['annee'], $identifier, $files['files'] ?? null, $data['auteurName'], $post);
 
         return $thesisId;
     }
@@ -370,7 +396,7 @@ class ThesisCreateController
      * @param array|null $uploads     Multi-file $_FILES entry (may be null).
      * @param string     $authorName  Author name for folder and file naming.
      */
-    private function handleThesisFiles(int $thesisId, int $year, string $identifier, ?array $uploads, string $authorName): void
+    private function handleThesisFiles(int $thesisId, int $year, string $identifier, ?array $uploads, string $authorName, array $post = []): void
     {
         if (!$uploads || !is_array($uploads['name'] ?? null)) {
             return;
@@ -385,6 +411,10 @@ class ThesisCreateController
             mkdir($uploadDir, 0755, true);
         }
 
+        // Per-file labels and sort orders submitted alongside the upload inputs
+        $fileLabels = $post['file_labels'] ?? [];
+        $fileOrders = $post['file_orders'] ?? [];
+
         $count = count($uploads['name']);
         for ($i = 0; $i < $count; $i++) {
             if (($uploads['error'][$i] ?? UPLOAD_ERR_NO_FILE) === UPLOAD_ERR_NO_FILE) {
@@ -404,10 +434,15 @@ class ThesisCreateController
             if ($mimeType === 'text/plain' && $ext === 'vtt') {
                 $mimeType = 'text/vtt';
             }
+            // application/octet-stream is a valid fallback for arbitrary downloadable files
+            if ($mimeType === 'application/octet-stream' && !in_array($ext, self::ALLOWED_EXTENSIONS, true)) {
+                error_log("ThesisCreateController: 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("ThesisCreateController: invalid file type {$uploads['name'][$i]} ($mimeType), skipping");
+                && !in_array($ext, self::ALLOWED_EXTENSIONS, true)) {
+                error_log("ThesisCreateController: invalid file type {$uploads['name'][$i]} ($mimeType / $ext), skipping");
                 continue;
             }
 
@@ -437,14 +472,10 @@ class ThesisCreateController
 
             chmod($targetPath, 0644);
 
-            $fileType = 'other';
-            if ($ext === 'vtt') {
-                $fileType = 'caption';
-            } elseif (stripos($originalName, 'annex') !== false) {
-                $fileType = 'annex';
-            } elseif ($ext === 'pdf') {
-                $fileType = 'main';
-            }
+            $fileType = $this->detectFileType($mimeType, $ext, $originalName);
+
+            $label     = trim($fileLabels[$i] ?? '');
+            $sortOrder = isset($fileOrders[$i]) ? (int)$fileOrders[$i] : null;
 
             $relPath = "theses/{$year}/{$folderName}/" . $targetName;
             $this->db->insertThesisFile(
@@ -453,12 +484,27 @@ class ThesisCreateController
                 $relPath,
                 basename($originalName),
                 $uploads['size'][$i],
-                $mimeType
+                $mimeType,
+                $label !== '' ? $label : null,
+                $sortOrder
             );
             error_log("ThesisCreateController: file uploaded → $targetName ($fileType)");
         }
     }
 
+    /**
+     * Determine the logical file_type from MIME type, extension, and original filename.
+     */
+    private function detectFileType(string $mimeType, string $ext, string $originalName): string
+    {
+        if ($ext === 'vtt' || $mimeType === 'text/vtt') return 'caption';
+        if (str_starts_with($mimeType, 'audio/') || in_array($ext, ['mp3','ogg','oga','wav','flac','aac','m4a'], true)) return 'audio';
+        if (str_starts_with($mimeType, 'video/') || in_array($ext, ['mp4','webm','ogv','mov'], true)) return 'video';
+        if ($mimeType === 'application/pdf' || $ext === 'pdf') return 'main';
+        if (str_starts_with($mimeType, 'image/') || in_array($ext, ['jpg','jpeg','png','gif','webp'], true)) return 'image';
+        return 'other';
+    }
+
     // ── Private: input helpers ────────────────────────────────────────────────
 
     /**
diff --git a/app/src/Controllers/ThesisEditController.php b/app/src/Controllers/ThesisEditController.php
index 07f2071..81552f9 100644
--- a/app/src/Controllers/ThesisEditController.php
+++ b/app/src/Controllers/ThesisEditController.php
@@ -275,6 +275,20 @@ class ThesisEditController
             }
         }
 
+        // ── Reorder existing files ────────────────────────────────────────────
+        if (!empty($post['file_sort_order']) && is_array($post['file_sort_order'])) {
+            $this->db->reorderThesisFiles($thesisId, $post['file_sort_order']);
+        }
+
+        // ── Update display labels for existing files ──────────────────────────
+        if (!empty($post['file_label']) && is_array($post['file_label'])) {
+            foreach ($post['file_label'] as $fileId => $label) {
+                $fileId = (int)$fileId;
+                if ($fileId <= 0) continue;
+                $this->db->updateThesisFileLabel($fileId, $thesisId, trim($label) ?: null);
+            }
+        }
+
         // ── New thesis files upload ───────────────────────────────────────────
         if (!empty($files['files']['name'][0])) {
             $this->handleThesisFiles($thesisId, $post, $files['files']);
@@ -293,16 +307,34 @@ class ThesisEditController
     private function handleThesisFiles(int $thesisId, array $post, array $uploads): void
     {
         $allowedMimes = [
-            'image/jpeg', 'image/png', 'application/pdf',
-            'video/mp4', 'application/zip', 'text/vtt',
+            'image/jpeg', 'image/png', 'image/gif', 'image/webp',
+            'application/pdf',
+            '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', 'pdf', 'mp4', 'zip', 'vtt'];
-        $maxBytes    = 50 * 1024 * 1024; // 50 MB
+        $allowedExts = [
+            'jpg', 'jpeg', 'png', 'gif', 'webp',
+            'pdf',
+            'mp4', 'webm', 'ogv', 'mov',
+            'mp3', 'ogg', 'oga', 'wav', 'flac', 'aac', 'm4a',
+            'vtt',
+            'zip', 'tar', 'gz', 'tgz',
+        ];
+        $maxBytes = 500 * 1024 * 1024; // 500 MB
 
         $year       = (int)($post['année'] ?? date('Y'));
         $authorName = trim($post['auteurice'] ?? 'unknown');
         $authorSlug = $this->generateAuthorSlug($authorName);
 
+        // Per-file labels and sort orders submitted alongside the upload inputs
+        $fileLabels = $post['file_labels'] ?? [];
+        $fileOrders = $post['file_orders'] ?? [];
+
         // Reuse existing folder if possible
         $existingFiles = $this->db->getThesisFiles($thesisId);
         $uploadDir  = null;
@@ -342,8 +374,9 @@ class ThesisEditController
                 $mimeType = 'text/vtt';
             }
 
-            if (!in_array($mimeType, $allowedMimes, true) || !in_array($ext, $allowedExts, true)) {
-                error_log("ThesisEditController: invalid type {$uploads['name'][$i]} ($mimeType), skipping");
+            // Allow any ext-matched file even if finfo returns application/octet-stream
+            if (!in_array($mimeType, $allowedMimes, true) && !in_array($ext, $allowedExts, true)) {
+                error_log("ThesisEditController: invalid type {$uploads['name'][$i]} ($mimeType / $ext), skipping");
                 continue;
             }
 
@@ -370,17 +403,34 @@ class ThesisEditController
 
             chmod($targetPath, 0644);
 
-            $fileType = 'other';
-            if ($ext === 'vtt')                                  $fileType = 'caption';
-            elseif (stripos($originalName, 'annex') !== false)  $fileType = 'annex';
-            elseif ($ext === 'pdf')                             $fileType = 'main';
+            $fileType  = $this->detectFileType($mimeType, $ext, $originalName);
+            $label     = trim($fileLabels[$i] ?? '');
+            $sortOrder = isset($fileOrders[$i]) ? (int)$fileOrders[$i] : null;
 
             $relPath = "theses/{$year}/{$folderName}/" . $candidate;
-            $this->db->insertThesisFile($thesisId, $fileType, $relPath, basename($originalName), $uploads['size'][$i], $mimeType);
+            $this->db->insertThesisFile(
+                $thesisId, $fileType, $relPath,
+                basename($originalName), $uploads['size'][$i], $mimeType,
+                $label !== '' ? $label : null,
+                $sortOrder
+            );
             error_log("ThesisEditController: uploaded → $candidate ($fileType)");
         }
     }
 
+    /**
+     * Determine the logical file_type from MIME type, extension, and original filename.
+     */
+    private function detectFileType(string $mimeType, string $ext, string $originalName): string
+    {
+        if ($ext === 'vtt' || $mimeType === 'text/vtt') return 'caption';
+        if (str_starts_with($mimeType, 'audio/') || in_array($ext, ['mp3','ogg','oga','wav','flac','aac','m4a'], true)) return 'audio';
+        if (str_starts_with($mimeType, 'video/') || in_array($ext, ['mp4','webm','ogv','mov'], true)) return 'video';
+        if ($mimeType === 'application/pdf' || $ext === 'pdf') return 'main';
+        if (str_starts_with($mimeType, 'image/') || in_array($ext, ['jpg','jpeg','png','gif','webp'], true)) return 'image';
+        return 'other';
+    }
+
     // ── Private: string helpers ───────────────────────────────────────────────
 
     private function generateAuthorSlug(string $authorName): string
diff --git a/app/src/Database.php b/app/src/Database.php
index a07bb8f..657f9e3 100644
--- a/app/src/Database.php
+++ b/app/src/Database.php
@@ -188,10 +188,11 @@ class Database {
     }
 
     /**
-     * Get files associated with a thesis
+     * Get files associated with a thesis, ordered by sort_order then upload time.
+     * Covers the new sort_order column added in migration 007.
      */
     public function getThesisFiles($thesisId) {
-        $sql = "SELECT * FROM thesis_files WHERE thesis_id = :thesis_id ORDER BY file_type, uploaded_at";
+        $sql = "SELECT * FROM thesis_files WHERE thesis_id = :thesis_id ORDER BY sort_order ASC, uploaded_at ASC";
         $stmt = $this->pdo->prepare($sql);
         $stmt->bindValue(':thesis_id', $thesisId, PDO::PARAM_INT);
         $stmt->execute();
@@ -1733,17 +1734,48 @@ class Database {
     }
 
     /**
-     * Insert a thesis file record
+     * Insert a thesis file record.
+     * sort_order defaults to (max existing sort_order + 1) for the thesis.
      */
-    public function insertThesisFile($thesisId, $fileType, $filePath, $fileName, $fileSize, $mimeType) {
+    public function insertThesisFile($thesisId, $fileType, $filePath, $fileName, $fileSize, $mimeType, ?string $displayLabel = null, ?int $sortOrder = null) {
+        if ($sortOrder === null) {
+            $maxStmt = $this->pdo->prepare(
+                "SELECT COALESCE(MAX(sort_order), 0) FROM thesis_files WHERE thesis_id = ?"
+            );
+            $maxStmt->execute([$thesisId]);
+            $sortOrder = (int)$maxStmt->fetchColumn() + 1;
+        }
         $stmt = $this->pdo->prepare("
-            INSERT INTO thesis_files (thesis_id, file_type, file_path, file_name, file_size, mime_type)
-            VALUES (?, ?, ?, ?, ?, ?)
+            INSERT INTO thesis_files (thesis_id, file_type, file_path, file_name, file_size, mime_type, display_label, sort_order)
+            VALUES (?, ?, ?, ?, ?, ?, ?, ?)
         ");
-        $stmt->execute([$thesisId, $fileType, $filePath, $fileName, $fileSize, $mimeType]);
+        $stmt->execute([$thesisId, $fileType, $filePath, $fileName, $fileSize, $mimeType, $displayLabel, $sortOrder]);
         return $this->pdo->lastInsertId();
     }
 
+    /**
+     * Persist a new sort order for thesis files.
+     * $order is an array of file IDs in the desired order.
+     * Only files belonging to $thesisId are updated (safety guard).
+     */
+    public function reorderThesisFiles(int $thesisId, array $order): void {
+        $stmt = $this->pdo->prepare(
+            "UPDATE thesis_files SET sort_order = ? WHERE id = ? AND thesis_id = ?"
+        );
+        foreach ($order as $i => $fileId) {
+            $stmt->execute([$i + 1, (int)$fileId, $thesisId]);
+        }
+    }
+
+    /**
+     * Update the display_label for a thesis file.
+     */
+    public function updateThesisFileLabel(int $fileId, int $thesisId, ?string $label): void {
+        $this->pdo->prepare(
+            "UPDATE thesis_files SET display_label = ? WHERE id = ? AND thesis_id = ?"
+        )->execute([$label ?: null, $fileId, $thesisId]);
+    }
+
     /**
      * Delete a single thesis file record by its ID and optionally remove the
      * file from disk.  Returns the file_path that was deleted (or null if not
diff --git a/app/templates/admin/edit.php b/app/templates/admin/edit.php
index 04dfafd..0e45125 100644
--- a/app/templates/admin/edit.php
+++ b/app/templates/admin/edit.php
@@ -94,27 +94,56 @@
                     <?php endif; ?>
                     <input type="file" id="couverture" name="couverture" accept="image/jpeg,image/png" data-preview="fp-couverture">
                     <div id="fp-couverture" class="file-preview-list" aria-live="polite"></div>
-                    <small><?= empty($currentCover) ? 'JPG, PNG. Max 10 MB.' : 'Laisser vide pour conserver la couverture actuelle. JPG, PNG. Max 10 MB.' ?></small>
+                    <small><?= empty($currentCover) ? 'JPG, PNG. Max 20 MB.' : 'Laisser vide pour conserver la couverture actuelle. JPG, PNG. Max 20 MB.' ?></small>
                 </div>
             </div>
 
-            <!-- Existing thesis files -->
-            <?php $thesisFilesList = array_filter($currentFiles, fn($f) => $f['file_type'] !== 'cover'); ?>
+            <!-- Existing thesis files — sortable, 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 class="admin-file-list">
-                    <?php foreach ($thesisFilesList as $f): ?>
-                    <li class="admin-file-list-item">
+                <small style="display:block;margin-bottom:var(--space-2xs);color:var(--text-tertiary)">
+                    Glissez-déposez les lignes pour réordonner les fichiers sur la page publique.
+                </small>
+                <ul id="existing-files-sortable" class="admin-file-list sortable-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'                      => '💬',
+                            default                                                        => '📎',
+                        };
+                    ?>
+                    <li class="admin-file-list-item" data-file-id="<?= (int)$f['id'] ?>">
+                        <!-- Hidden field carries sort order (updated by JS) -->
+                        <input type="hidden" name="file_sort_order[]" value="<?= (int)$f['id'] ?>">
+
+                        <span class="admin-file-drag-handle" title="Réordonner">⠿</span>
+
+                        <span class="admin-file-icon-col"><?= $fIcon ?></span>
+
                         <span class="admin-file-info">
-                            <span class="admin-file-type">[<?= htmlspecialchars($f['file_type']) ?>]</span>
-                            <a href="/media.php?path=<?= urlencode($f['file_path']) ?>" target="_blank" rel="noopener">
+                            <a href="/media.php?path=<?= urlencode($f['file_path']) ?>" target="_blank" rel="noopener" class="admin-file-name">
                                 <?= htmlspecialchars($f['file_name'] ?? basename($f['file_path'])) ?>
                             </a>
-                            <?php if (!empty($f['file_size'])): ?>
-                            <small>(<?= number_format($f['file_size'] / 1024 / 1024, 2) ?> MB)</small>
-                            <?php endif; ?>
+                            <span class="admin-file-meta-row">
+                                <span class="admin-file-type-badge"><?= htmlspecialchars($fType) ?></span>
+                                <?php if (!empty($f['file_size'])): ?>
+                                <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
@@ -126,14 +155,18 @@
             <?php endif; ?>
 
             <!-- New thesis files -->
-            <div class="admin-form-group">
-                <label for="files">Ajouter des fichiers du TFE :</label>
+            <div class="admin-form-group admin-files-fieldgroup">
+                <label>Ajouter des fichiers du TFE :</label>
                 <div class="admin-file-input">
-                    <input type="file" id="files" name="files[]" multiple
-                           accept=".pdf,.jpg,.jpeg,.png,.mp4,.zip,.vtt"
-                           data-preview="fp-files">
-                    <div id="fp-files" class="file-preview-list" aria-live="polite"></div>
-                    <small>PDF, JPG, PNG, MP4, ZIP. Max 50 MB par fichier. Pour les vidéos, un fichier .vtt de sous-titres peut être joint.</small>
+                    <input type="file" id="tfe-files-input"
+                           name="files[]" multiple
+                           accept=".pdf,.jpg,.jpeg,.png,.gif,.webp,.mp4,.webm,.mov,.ogv,.mp3,.ogg,.oga,.wav,.flac,.aac,.m4a,.zip,.tar,.gz,.vtt"
+                           class="tfe-file-picker">
+                    <small class="admin-file-hint">
+                        Types acceptés : PDF · JPG/PNG/GIF/WEBP · MP4/WebM/MOV (vidéo) · MP3/OGG/WAV/FLAC (audio) · ZIP/TAR (archives) · autres fichiers (téléchargement uniquement). Max 500 MB par fichier.
+                    </small>
+                    <ul id="tfe-file-queue" class="tfe-file-queue sortable-list" aria-label="Nouveaux fichiers (réordonnable)"></ul>
+                    <p id="tfe-file-queue-empty" class="tfe-queue-empty">Aucun nouveau fichier sélectionné.</p>
                 </div>
             </div>
 
@@ -152,7 +185,7 @@
                     <?php endif; ?>
                     <input type="file" name="banner" id="banner" accept="image/jpeg,image/png,image/webp" data-preview="fp-banner">
                     <div id="fp-banner" class="file-preview-list" aria-live="polite"></div>
-                    <small><?= empty($thesis['banner_path']) ? 'JPG, PNG ou WEBP. Format paysage recommandé (4:1). Max 5 MB.' : 'Laisser vide pour conserver la bannière actuelle. JPG, PNG ou WEBP. Format paysage recommandé (4:1). Max 5 MB.' ?></small>
+                    <small><?= empty($thesis['banner_path']) ? 'JPG, PNG ou WEBP. Format paysage recommandé (4:1). Max 20 MB.' : 'Laisser vide pour conserver la bannière actuelle. JPG, PNG ou WEBP. Format paysage recommandé (4:1). Max 20 MB.' ?></small>
                 </div>
             </div>
         </fieldset>
diff --git a/app/templates/partials/form/fieldset-files.php b/app/templates/partials/form/fieldset-files.php
index 4ae4973..092289c 100644
--- a/app/templates/partials/form/fieldset-files.php
+++ b/app/templates/partials/form/fieldset-files.php
@@ -2,9 +2,11 @@
 /**
  * Shared partial — "Fichiers" fieldset (add / student submission mode).
  *
- * This renders simple upload inputs with no existing-file management (that is
- * handled by the edit-specific template). For the edit form, include the
- * edit-specific files section directly in the template instead of this partial.
+ * Renders upload inputs for cover image, banner image, and TFE files.
+ * TFE files support multiple file types (PDF, image, audio, video, other),
+ * drag-to-reorder via SortableJS, and per-file label input.
+ *
+ * For the edit form, the existing-files management is inline in edit.php.
  *
  * Variables consumed: none beyond APP_ROOT (always available).
  */
@@ -12,7 +14,41 @@
 <fieldset>
     <legend>Fichiers</legend>
 
-    <?php $name = 'couverture'; $label = 'Image de couverture :'; $accept = 'image/jpeg,image/png'; $hint = 'JPG, PNG. Taille max : 10 MB.'; include APP_ROOT . '/templates/partials/form/file-field.php'; ?>
-    <?php $name = 'banner'; $label = 'Image bannière (accueil) :'; $accept = 'image/jpeg,image/png,image/webp'; $hint = 'JPG, PNG ou WEBP. Format paysage recommandé (4:1). Max 5 MB.'; include APP_ROOT . '/templates/partials/form/file-field.php'; ?>
-    <?php $name = 'files'; $label = 'Fichiers du TFE :'; $accept = '.pdf,.jpg,.jpeg,.png,.mp4,.zip,.vtt'; $hint = 'PDF, JPG, PNG, MP4, ZIP. Max 50 MB par fichier. Pour les vidéos, un fichier .vtt de sous-titres peut être joint (il sera associé automatiquement à la vidéo correspondante).'; $multiple = true; include APP_ROOT . '/templates/partials/form/file-field.php'; ?>
+    <?php
+    $name = 'couverture';
+    $label = 'Image de couverture :';
+    $accept = 'image/jpeg,image/png';
+    $hint = 'JPG, PNG. Taille max : 20 MB.';
+    include APP_ROOT . '/templates/partials/form/file-field.php';
+    ?>
+
+    <?php
+    $name = 'banner';
+    $label = 'Image bannière (accueil) :';
+    $accept = 'image/jpeg,image/png,image/webp';
+    $hint = 'JPG, PNG ou WEBP. Format paysage recommandé (4:1). Max 20 MB.';
+    include APP_ROOT . '/templates/partials/form/file-field.php';
+    ?>
+
+    <!-- TFE files — multi-file, sortable, with per-file labels -->
+    <div class="admin-form-group admin-files-fieldgroup">
+        <label>Fichiers du TFE :</label>
+        <div class="admin-file-input">
+            <input type="file" id="tfe-files-input"
+                   name="files[]" multiple
+                   accept=".pdf,.jpg,.jpeg,.png,.gif,.webp,.mp4,.webm,.mov,.ogv,.mp3,.ogg,.oga,.wav,.flac,.aac,.m4a,.zip,.tar,.gz,.vtt"
+                   class="tfe-file-picker">
+            <small class="admin-file-hint">
+                Types acceptés : PDF · JPG/PNG/GIF/WEBP · MP4/WebM/MOV (vidéo) · MP3/OGG/WAV/FLAC (audio) · ZIP/TAR (archives) · autres fichiers (téléchargement uniquement).
+                Max 500 MB par fichier.
+                Les fichiers <code>.vtt</code> sont des sous-titres et seront associés automatiquement à la vidéo précédente.
+            </small>
+
+            <!-- Sortable file queue — populated by JS -->
+            <ul id="tfe-file-queue" class="tfe-file-queue sortable-list" aria-label="Fichiers sélectionnés (réordonnable)">
+                <!-- Items injected by file-upload-queue.js -->
+            </ul>
+            <p id="tfe-file-queue-empty" class="tfe-queue-empty">Aucun fichier sélectionné.</p>
+        </div>
+    </div>
 </fieldset>
diff --git a/app/templates/public/tfe.php b/app/templates/public/tfe.php
index 76dabef..08b262c 100644
--- a/app/templates/public/tfe.php
+++ b/app/templates/public/tfe.php
@@ -371,80 +371,78 @@
             <?php elseif (!empty($data["files"])): ?>
                 <?php foreach ($data["files"] as $file): ?>
                     <?php
-                    $ext = strtolower(
-                        pathinfo($file["file_path"], PATHINFO_EXTENSION),
-                    );
-                    $fileType = $file["file_type"] ?? "";
-                    if ($ext === "vtt") {
-                        continue;
-                    }
-                    if ($fileType === "cover") {
-                        continue;
+                    $ext      = strtolower(pathinfo($file["file_path"] ?? '', PATHINFO_EXTENSION));
+                    $fileType = $file["file_type"] ?? '';
+
+                    // Skip helper/internal types
+                    if ($ext === 'vtt' || $fileType === 'caption') continue;
+                    if ($fileType === 'cover') continue;
+
+                    // Determine display category
+                    $isImage = in_array($ext, ['jpg','jpeg','png','gif','bmp','webp'], true) || $fileType === 'image';
+                    $isVideo = in_array($ext, ['mp4','webm','mov','ogv'], true)              || $fileType === 'video';
+                    $isAudio = in_array($ext, ['mp3','ogg','oga','wav','flac','aac','m4a'], true) || $fileType === 'audio';
+                    $isPdf   = ($ext === 'pdf') || $fileType === 'main';
+                    $isOther = !($isImage || $isVideo || $isAudio || $isPdf);
+
+                    $_vttPath = null;
+                    if ($isVideo) {
+                        $_vttPath = $captionFiles[$_videoIndex] ?? null;
+                        $_videoIndex++;
                     }
+
+                    $caption  = !empty($file["display_label"]) ? $file["display_label"] : ($file["description"] ?? '');
+                    $mediaUrl = '/media?path=' . urlencode($file["file_path"]);
+                    $fileName = htmlspecialchars($file["file_name"] ?? basename($file["file_path"]));
                     ?>
                     <figure>
-                        <?php if ($ext === "pdf"): ?>
-                            <iframe src="/media?path=<?= urlencode(
-                                $file["file_path"],
-                            ) ?>"
+                        <?php if ($isPdf): ?>
+                            <iframe src="<?= $mediaUrl ?>"
                                     width="100%" height="700px"
                                     style="border:none"
-                                    title="<?= htmlspecialchars(
-                                        $file["original_name"] ??
-                                            basename($file["file_path"]),
-                                    ) ?>">
+                                    title="<?= $fileName ?>">
                             </iframe>
                             <p class="tfe-pdf-fallback">
-                                <a href="/media?path=<?= urlencode(
-                                    $file["file_path"],
-                                ) ?>&download=1">
-                                    Télécharger le PDF
-                                </a>
+                                <a href="<?= $mediaUrl ?>&download=1">Télécharger le PDF</a>
                             </p>
-                        <?php elseif (
-                            in_array($ext, [
-                                "jpg",
-                                "jpeg",
-                                "png",
-                                "gif",
-                                "bmp",
-                                "webp",
-                            ])
-                        ): ?>
-                            <img src="/media?path=<?= urlencode(
-                                $file["file_path"],
-                            ) ?>"
-                                 alt="<?= htmlspecialchars(
-                                     !empty($file["description"])
-                                         ? $file["description"]
-                                         : $data["title"] .
-                                             " — " .
-                                             ($data["authors"] ?? ""),
-                                 ) ?>">
-                        <?php elseif ($ext === "mp4"): ?>
-                            <?php
-                            $_vttPath = $captionFiles[$_videoIndex] ?? null;
-                            $_videoIndex++;
-                            ?>
+                        <?php elseif ($isImage): ?>
+                            <img src="<?= $mediaUrl ?>"
+                                 alt="<?= htmlspecialchars($caption !== '' ? $caption : $data['title'] . ' — ' . ($data['authors'] ?? '')) ?>">
+                        <?php elseif ($isVideo): ?>
                             <video width="100%" controls>
-                                <source src="/media?path=<?= urlencode(
-                                    $file["file_path"],
-                                ) ?>" type="video/mp4">
+                                <source src="<?= $mediaUrl ?>" type="video/<?= htmlspecialchars($ext === 'mov' ? 'mp4' : $ext) ?>">
                                 <?php if ($_vttPath): ?>
                                 <track kind="captions"
-                                       src="/media?path=<?= urlencode(
-                                           $_vttPath,
-                                       ) ?>"
-                                       srclang="fr"
-                                       label="Sous-titres"
-                                       default>
+                                       src="/media?path=<?= urlencode($_vttPath) ?>"
+                                       srclang="fr" label="Sous-titres" default>
                                 <?php endif; ?>
                             </video>
+                        <?php elseif ($isAudio): ?>
+                            <audio controls class="tfe-audio">
+                                <source src="<?= $mediaUrl ?>" type="audio/<?= htmlspecialchars(match($ext) {
+                                    'mp3'        => 'mpeg',
+                                    'ogg', 'oga' => 'ogg',
+                                    'wav'        => 'wav',
+                                    'flac'       => 'flac',
+                                    'aac'        => 'aac',
+                                    'm4a'        => 'mp4',
+                                    default      => $ext,
+                                }) ?>">
+                                Votre navigateur ne supporte pas la lecture audio.
+                            </audio>
+                        <?php else: /* other — download only */ ?>
+                            <div class="tfe-download-file">
+                                <a href="<?= $mediaUrl ?>&download=1" class="tfe-download-link">
+                                    <span class="tfe-download-icon">📎</span>
+                                    <span><?= $fileName ?></span>
+                                </a>
+                                <?php if (!empty($file['file_size'])): ?>
+                                <small class="tfe-download-size"><?= number_format($file['file_size'] / 1024 / 1024, 2) ?> MB</small>
+                                <?php endif; ?>
+                            </div>
                         <?php endif; ?>
-                        <?php if (!empty($file["description"])): ?>
-                            <figcaption><?= htmlspecialchars(
-                                $file["description"],
-                            ) ?></figcaption>
+                        <?php if ($caption !== '' && !$isOther): ?>
+                            <figcaption><?= htmlspecialchars($caption) ?></figcaption>
                         <?php endif; ?>
                     </figure>
                 <?php endforeach; ?>