feat: add custom 404 page rendered via the site layout

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>