feat: add custom 404 page rendered via the site layout

TODO.md

@@ -7,3 +7,40 @@
 - [x] Fix language metadata link using wrong `query=` param instead of dedicated `language=` filter
 - [x] Sort TFE files by display category on public page (note d'intention → TFE → image → video → audio → website → annexes)
 - [x] Fix CSV import: VALUES had 24 ? placeholders but execute array has 23 values → 27 total for 26 columns
+- [x] Add custom 404 page: render through layout with dedicated not-found.css, register in build, return HTTP 404
+- [x] Remove "Mo" option from duration — keep only minutes and pages
+- [x] Combine pages and minutes as separate fields (both can be set simultaneously)
+- [x] Fix minutes input visibility (can't see what's typed)
+- [x] Add `has_annexes` checkbox to form + DB column
+- [x] Display duration on admin backoffice recap page
+- [x] Update public TFE page duration display for new combined format
+- [x] Fix `handleAutosaveResponse is not defined` — load `autosave-handler.js` on about_page edit view
+- [x] Fix `handleAutosaveResponse is not defined` in admin add/edit — function was scoped inside IIFE bundle, not on window
+- [x] Fix search result cards: title and author always below image/gradient, remove text overlay on placeholder gradient
+- [x] Change search results to 10 per page with HTMX pagination (no-JS fallback preserved)
+- [x] Bump to 15 results/page, make results area vertically scrollable, sticky pagination at viewport bottom
+- [x] Fix HTMX targetError: move #search-results wrapper inside fragment so it survives outerHTML swaps
+- [x] Add range counter to results header (e.g. "1–15 sur 112 résultats")
+- [x] Collapsible filter controls with <details>/<summary> + active filter badge on mobile
+- [x] Responsive paginator: hide first/last buttons on mobile, smaller touch targets
+- [x] Compact range counter on mobile: "1–15 / 112" instead of full "1–15 sur 112 résultats"
+- [x] Remove orientation display from search result card meta
+- [x] Add bulk select/delete to tmp cleanup dialog (like admin/index.php pattern)
+- [x] Move cleanup UI from modal to dedicated page (like add.php/edit.php)
+- [x] Replace <details> with <fieldset>/<legend> in cleanup fragments (like contenus.php)
+- [x] Standardise test group recipes: lint-php, lint-css, lint-js, test + add fix recipe + make lint pass clean
+- [x] Remove Mot de passe column from acces.php, add key.svg icon button in Actions to copy password to clipboard, reorder actions (URL/password/edit/toggle/archive), switch URL icon to link-simple.svg
+- [x] Fix CC2r: removed hidden seeds (were stale/overriding user input), render initial licence-choice from \$formData; Interne want_license unchecked clears CC2r+licence, switching from other modes preserves values; CC2r independent toggle; licence dropdown has no-licence placeholder
+- [x] Dans le formulaire admin, le contact privé ne se sauvegarde pas.
+- [x] Remove "Rendre le contact visible publiquement sur la fiche du TFE" from admin add/edit forms
+- [x] Auto-show contact on public TFE page when contact_visible is filled (no checkbox needed)
+- [x] Fix file size limits: align all layers (JS/FilepondHandler/ThesisFileHandler/validate-fragment) — video/audio 5 GB, default 500 MB, PDF 100 MB; fix JS fileValidateSizeFilter gate bug that rejected AV files >1 GB despite 8 GB per-ext cap
+- [x] Fix: deleting contact groups in apropos form not persisted (no change event after DOM removal, autosave never triggered)
+- [x] Improve h1, h2, h3 size difference in base.css heading scale
+- [x] Rework TFE page desktop layout: two columns 35vw/1fr, left = author/title/meta/synopsis, right = files, media 100% width; columns scroll independently, content fits 100vw; no bottom padding on main; add &scrollbar=0 to PDF iframe URLs
+- [x] 'Promoteur·ice ULB' remplacé par 'Promoteur·ice université' (changement juste l'étiquette)
+- [x] PDF viewer: fix page navigation buttons (prev/next) — build toolbar after canvases exist & query canvases fresh in scroll handler
+- [x] PDF viewer: render pages smaller by default (0.85× scale)
+- [x] PDF viewer: add dark transparent violet background behind pages when expanded
+- [x] pdf-viewer: expand to fill right column (not whole page), center pages, freeze column on expand
+- [x] pdf-viewer: fix toolbar width (align-self:stretch), hide sibling file items when expanded

app/public/assets/css/not-found.css

@@ -0,0 +1,53 @@
+/* ============================================================
+   404 — Page non trouvée
+   ============================================================ */
+
+.page-not-found {
+	min-height: 0;
+}
+
+.not-found {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	gap: var(--space-m);
+	padding: var(--space-3xl) var(--space-l);
+}
+
+.not-found-code {
+	font-family: var(--font-display);
+	font-size: clamp(4rem, 20vw, 10rem);
+	line-height: 1;
+	margin: 0;
+	color: var(--accent-primary);
+	opacity: 0.9;
+}
+
+.not-found-title {
+	font-size: var(--step-3);
+	margin: 0;
+}
+
+.not-found-text {
+	max-width: 36ch;
+	margin: 0;
+	color: var(--text-secondary);
+}
+
+.not-found-link {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--space-3xs);
+	margin-top: var(--space-s);
+}
+
+.not-found-caret {
+	transition: transform 120ms ease;
+}
+
+.not-found-link:hover .not-found-caret {
+	transform: translateX(-2px);
+}

app/src/Dispatcher.php

@@ -70,7 +70,12 @@ class Dispatcher
         $route = $this->matchRoute();
         if (!$route) {
             http_response_code(404);
-            echo '<h1>404 — Page non trouvée</h1>';
+            $this->render('public/not-found', [
+                'pageTitle'    => 'Page non trouvée',
+                'metaDescription' => '',
+                'bodyClass'    => 'page-not-found',
+                'extraCss'     => ['/assets/dist/not-found.min.css'],
+            ]);
             return;
         }
 

app/templates/public/not-found.php

@@ -0,0 +1,15 @@
+<?php
+/**
+ * 404 — Page non trouvée
+ */
+?>
+<main class="page-content not-found" id="main-content">
+    <p class="not-found-code" aria-hidden="true">404</p>
+    <h1 class="not-found-title">Page non trouvée</h1>
+    <p class="not-found-text">
+        La page que vous cherchez n'existe pas ou a été déplacée.
+    </p>
+    <p>
+        <a class="not-found-link" href="/"><?= icon('arrow-circle-left', 0, 'not-found-caret') ?> Retour à l'accueil</a>
+    </p>
+</main>

scripts/build-css.mjs

@@ -129,6 +129,7 @@ async function main() {
     "tfe.css",
     "repertoire.css",
     "content-page.css",
+    "not-found.css",
     "system.css",
     "file-access.css",
   ];