feat(site): keep the filters in a sticky column on the right of wide screens

.claude/rules/site.md

@@ -149,8 +149,11 @@ paths:
 - Colors are tokens on `:root`, redefined for dark mode (system preference and `data-theme`). Data series use
   `--series-1` (blue), `--series-2` (orange), `--series-3` (green), a palette checked for color blindness; text never
   takes a series color. Repository types are labelled front, back, mobile or full-stack.
-- Layout: a sidebar from 1280 px, a top bar below. Tables fit at 1080 px without horizontal scrolling. Check 1920,
-  1280, 1080 and 390 px (phone), light and dark.
+- Layout: a sidebar from 1280 px, a top bar below. From 1536 px the filters (`[data-filters]`) move from the top of
+  the page to a sticky column on its right, under the name « Filtres », the period shown tinted like the current page
+  of the sidebar; the column stays on the pages without filters so that the content keeps its width;
+  beside it the content is as wide as beside the sidebar at 1280 px, so whatever fits there fits there too. Tables
+  fit at 1080 px without horizontal scrolling. Check 1920, 1536, 1280, 1080 and 390 px (phone), light and dark.
 - Hiding: the `hidden` attribute, which a rule of `style.css` makes win over any `display`; never a class of its own.
 - Motion: pages enter with `.is-entering` and a staggered `--delay`; everything stops under
   `prefers-reduced-motion`.

.claude/rules/workflow.md

@@ -32,7 +32,7 @@
     from `.env` (never written in a command nor printed), swaps `syncTrigger` for a fake one and encrypts it again with
     a throwaway password.
   - Link the `site/` files into that folder and serve it with `PORT=<port> node scripts/serve.mjs`.
-  - Check 1920, 1280, 1080 and 390 px, light and dark mode, and an empty console.
+  - Check 1920, 1536, 1280, 1080 and 390 px, light and dark mode, and an empty console.
 - The README and the "Méthode" page follow any change of behavior or definition.
 
 ## Shared resources

README.md

@@ -8,7 +8,8 @@ Site statique sans build ni dépendance, déployé sur GitHub Pages par un workf
 chaque minute et anime les compteurs quand de nouvelles PR, merges ou reviews arrivent.
 
 Le dashboard est découpé en pages, dans une barre latérale (une barre en haut sur les écrans étroits). La période et
-la recherche s'appliquent à toutes. Tous les délais ne comptent que les heures ouvrées, du lundi au vendredi de 9 h à
+la recherche s'appliquent à toutes : sur les grands écrans (1536 px et plus), elles quittent le haut de la page pour
+une colonne à droite, qui reste à portée quand la page défile. Tous les délais ne comptent que les heures ouvrées, du lundi au vendredi de 9 h à
 18 h, heure de Paris ; un jour en compte 9. Seules les durées des exécutions de CI restent en temps réel :
 
 - **Vue d'ensemble** : l'activité du jour, puis celle de la période en trois volets, livraison (PR ouvertes et

site/index.html

@@ -178,6 +178,8 @@ <h1 data-route-title>Vue d’ensemble</h1>
         </header>
 
         <div class="filters" role="toolbar" aria-label="Filtres" data-filters>
+          <!-- Shown in the column of wide screens only; the toolbar already has its name. -->
+          <p class="filters-title" aria-hidden="true">Filtres</p>
           <div class="segmented" role="radiogroup" aria-label="Période" data-periods>
             <button type="button" role="radio" data-period="30d">30 jours</button>
             <button type="button" role="radio" data-period="90d">90 jours</button>

site/style.css

@@ -706,6 +706,17 @@ h3 {
   margin-bottom: 20px;
 }
 
+/* The name of the filters, over their column on wide screens; at the top of the page they need none. */
+.filters-title {
+  display: none;
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
 .segmented {
   display: inline-flex;
   padding: 3px;
@@ -865,6 +876,80 @@ h3 {
   font: inherit;
 }
 
+/* With room to spare on the right, the filters, which apply to every page, leave the top of the page for a column of
+   their own that stays in view as the page scrolls. The column stays on the pages without filters, so that the page
+   keeps its width from one to the next. The content is never narrower than beside the sidebar at 1280 px (968 px),
+   nor wider than without the column (1240 px); the column is wide enough for the placeholder of the search beside
+   the room the browser keeps for its clear button. */
+@media (min-width: 1536px) {
+  .page {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 256px;
+    align-content: start;
+    column-gap: 24px;
+    max-width: calc(40px + 1240px + 24px + 256px + 16px);
+    padding-right: 16px;
+  }
+
+  .page > :not(.filters) {
+    grid-column: 1;
+  }
+
+  .filters {
+    position: sticky;
+    z-index: 6;
+    top: 32px;
+    grid-column: 2;
+    grid-row: 1 / span 4;
+    align-self: start;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    gap: 10px;
+    margin: 0;
+  }
+
+  .filters-title {
+    display: block;
+    padding: 0 4px;
+  }
+
+  .segmented {
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .segmented button {
+    padding: 7px 12px;
+    font-weight: 500;
+    text-align: left;
+  }
+
+  /* In a column like the pages of the sidebar, the period shown looks like the current page: a light tint. So do
+     picked dates, which replace it. */
+  .segmented button[aria-checked='true'],
+  .date-range.is-active summary {
+    border-color: var(--border);
+    background: color-mix(in srgb, var(--series-1) 12%, transparent);
+    color: var(--text-primary);
+    font-weight: 500;
+  }
+
+  .date-range.is-active summary svg {
+    color: var(--series-1);
+  }
+
+  .filters .search {
+    flex: none;
+    width: 100%;
+  }
+
+  /* The column ends near the right edge: the panel opens towards the page. */
+  .date-range-panel {
+    right: 0;
+    left: auto;
+  }
+}
+
 button:focus-visible,
 input:focus-visible,
 a:focus-visible,