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>

assets/js/project-toggle.js

@@ -1,13 +1,29 @@
 const allProjects = document.querySelectorAll(".projects-index li");
 
+function selectProject(slug) {
+  if (!slug) {
+    allProjects.forEach((p) => p.classList.remove("selected", "unselected"));
+    return;
+  }
+  const target = [...allProjects].find((p) => p.dataset.slug === slug);
+  if (!target) return;
+  allProjects.forEach((p) => {
+    p.classList.add("unselected");
+    p.classList.remove("selected");
+  });
+  target.classList.add("selected");
+  target.classList.remove("unselected");
+}
+
 allProjects.forEach((project) => {
   project.addEventListener("click", () => {
-    allProjects.forEach((unselected) => {
-      unselected.classList.add("unselected");
-      unselected.classList.remove("selected");
+    allProjects.forEach((p) => {
+      p.classList.add("unselected");
+      p.classList.remove("selected");
     });
     project.classList.add("selected");
     project.classList.remove("unselected");
+    Router.setParam("project", project.dataset.slug);
   });
 });
 
@@ -18,19 +34,20 @@ projectTogglers.forEach((button) => {
     const parentLi = button.closest("li");
     if (parentLi.classList.contains("selected")) {
       event.stopPropagation();
-      allProjects.forEach((project) => {
-        project.classList.remove("unselected");
-        parentLi.classList.remove("selected");
-      });
+      allProjects.forEach((p) => p.classList.remove("unselected"));
+      parentLi.classList.remove("selected");
+      Router.setParam("project", null);
     }
   });
 });
 
 const allProjectsCloser = document.querySelector(".all-projects-closer");
 
-allProjectsCloser.addEventListener("click", (event) => {
-  allProjects.forEach((project) => {
-    project.classList.remove("selected");
-    project.classList.remove("unselected");
-  });
+allProjectsCloser.addEventListener("click", () => {
+  allProjects.forEach((p) => p.classList.remove("selected", "unselected"));
+  Router.setParam("project", null);
 });
+
+window.addEventListener("routechange", () => selectProject(Router.getParam("project")));
+
+selectProject(Router.getParam("project"));