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/css/src/_index.scss

@@ -1,3 +1,7 @@
 .projects-index summary {
   cursor: pointer;
 }
+
+.projects-index li.filtered-out {
+  display: none;
+}

assets/css/src/_main.scss

@@ -2,8 +2,7 @@
 
 @font-face {
   font-family: "neue-haas-grotesk-display";
-  src:
-    url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3")
+  src: url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3")
       format("woff2"),
     url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3")
       format("woff"),
@@ -17,8 +16,7 @@
 
 @font-face {
   font-family: "neue-haas-grotesk-display";
-  src:
-    url("https://use.typekit.net/af/db1ce7/00000000000000007735bb5e/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3")
+  src: url("https://use.typekit.net/af/db1ce7/00000000000000007735bb5e/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3")
       format("woff2"),
     url("https://use.typekit.net/af/db1ce7/00000000000000007735bb5e/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3")
       format("woff"),
@@ -121,6 +119,10 @@ nav {
     a {
       text-decoration: none;
     }
+
+    button.active {
+      text-decoration: underline;
+    }
   }
 }
 
@@ -138,6 +140,10 @@ nav {
   margin: var(--body-margin) var(--body-margin) var(--body-margin) 0;
   left: calc(var(--index-width) + var(--body-margin));
   text-align: right;
+
+  picture {
+    display: contents;
+  }
 }
 
 button.prev {
@@ -267,9 +273,8 @@ button.next {
   display: grid;
   grid-template-columns:
     calc(3 / 6 * var(--index-width) - var(--body-margin))
-    calc(2 / 6 * var(--index-width) - var(--body-margin)) calc(
-      1 / 6 * var(--index-width) - var(--body-margin)
-    );
+    calc(2 / 6 * var(--index-width) - var(--body-margin)) calc(1 / 6 *
+        var(--index-width) - var(--body-margin));
   gap: var(--body-margin);
   pointer-events: all;
   padding-bottom: var(--line-height-S);

assets/css/style.css

@@ -118,6 +118,9 @@ nav.filter-menu {
 nav.filter-menu a {
   text-decoration: none;
 }
+nav.filter-menu button.active {
+  text-decoration: underline;
+}
 
 /* PROJECT SLIDESHOW */
 .project-slideshow {
@@ -134,6 +137,9 @@ nav.filter-menu a {
   left: calc(var(--index-width) + var(--body-margin));
   text-align: right;
 }
+.project-slideshow picture {
+  display: contents;
+}
 
 button.prev {
   position: absolute;
@@ -582,6 +588,14 @@ dialog#mobile-menu-content::backdrop {
   float: left;
 }
 
+.projects-index summary {
+  cursor: pointer;
+}
+
+.projects-index li.filtered-out {
+  display: none;
+}
+
 @media screen and (max-width: 1000px) {
   :root {
     --slider-height: 50vh;

assets/css/style.scss

@@ -2,4 +2,5 @@
 @import "src/_main.scss";
 @import "src/_nav.scss";
 @import "src/_home.scss";
+@import "src/_index.scss";
 @import "src/_mobile.scss";