Index > filter menu fonctionnel + router URL + opti images

- Filtre actif reflété dans ?filter= (pushState), restauré au chargement et sur popstate
- Projet ouvert reflété dans ?project= (pushState), restauré au chargement et sur popstate
- router.js : helpers setParam/getParam + dispatch routechange sur popstate
- Opti images projet : snippet picture, srcset 500-1800w JPEG+WebP, sizes 50vw/>1000px / 100vw mobile
- SCSS : picture { display: contents } dans .project-slideshow, .filtered-out, button.active

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

site/templates/index.php

@@ -2,12 +2,12 @@
 
 <nav class="filter-menu">
     <?php foreach ($categories as $key => $category): ?>
-        <a href=""><?= $category ?></a>
+        <button data-filter="<?= Str::slug($category)  ?>"><?= $category ?></button>
     <?php endforeach; ?>
 </nav>
 <ul class="projects-index">
     <?php foreach ($page->children()->listed()->sortBy('date', 'desc') as $project): ?>
-        <li>
+        <li data-category="<?= Str::slug($project->category()) ?>" data-slug="<?= $project->slug() ?>">
             <div class="fix">
                 <button class="project-toggler grid">
                         <span> <?= $project->shownTitle() ?> </span>
@@ -19,7 +19,13 @@
             <section class="toggle">
                 <div class="project-slideshow">
                     <?php foreach ($project->images() as $image): ?>
-                        <img <?= e($image->indexOf() === 0, 'class="active"') ?> src="<?= $image->url() ?>">
+                        <?php snippet('picture', [
+                            'file'       => $image,
+                            'srcsetName' => 'project-slideshow',
+                            'sizes'      => '(min-width: 1000px) 50vw, 100vw',
+                            'lazy'       => $image->indexOf() !== 0,
+                            'class'      => $image->indexOf() === 0 ? 'active' : null,
+                        ]) ?>
                     <?php endforeach; ?>
                     <button class="prev"></button>
                     <button class="next"></button>
@@ -32,7 +38,9 @@
     <button class="all-projects-closer"></button>
 </ul>
 
+<script src="/assets/js/router.js"></script>
 <script src="/assets/js/project-slideshow.js"></script>
 <script src="/assets/js/project-toggle.js"></script>
+<script src="/assets/js/filter-menu.js"></script>
 <?php snippet('footer') ?>