[CesarWatrin]

Ce qui change

La période (30 jours à 36 mois), les dates et la recherche s'appliquent à toutes les pages, mais elles restaient en haut de la page : il fallait remonter pour en changer. Sur les grands écrans, elles passent dans une colonne à droite, qui reste visible quand la page défile. Cette colonne occupe l'espace vide qu'il y avait à droite du contenu.

• À partir de 1536 px : les filtres sont empilés dans une colonne collante de 256 px à droite du contenu, sous le titre « Filtres ». Les périodes forment une liste verticale, puis viennent le bouton « Dates » et la recherche.
  • La période affichée prend la teinte claire de la page courante dans la barre latérale de gauche, au lieu du fond noir. Les dates choisies aussi, puisqu'elles remplacent la période.
  • 256 px, c'est la largeur qu'il faut pour afficher en entier le texte d'aide de la recherche, à côté de la place que le navigateur réserve à son bouton d'effacement.
  • Le panneau des dates s'ouvre vers la page, pour ne pas sortir de l'écran.
• Largeur du contenu : la colonne reste réservée sur les pages sans filtres (bilan, palmarès, méthode), pour que le contenu ne change pas de largeur d'une page à l'autre. À 1536 px, le contenu est exactement aussi large qu'à côté de la barre latérale à 1280 px, une largeur que tout le dashboard supporte déjà. À 1920 px, il garde sa largeur maximale actuelle.
• En dessous de 1536 px : rien ne change, les filtres restent en haut de la page, sans titre.

Le CSS porte l'essentiel du changement (site/style.css, une media query). Le HTML ne gagne que le titre « Filtres », caché aux lecteurs d'écran puisque la barre d'outils porte déjà ce nom ; app.js est intact. Le README et les règles du site décrivent la nouvelle disposition.

Plan de test

• npm run check et npm test (119 tests)
• Aperçu local avec les données publiées, rechiffrées avec un mot de passe jetable et un faux déclencheur de synchro :
  • 1920 px : colonne à droite, toujours visible quand la page défile, texte d'aide de la recherche en entier, contenu à sa largeur maximale actuelle, pas de défilement horizontal
  • 1536 px : contenu aussi large qu'à 1280 px sur main ; les tableaux qui défilent horizontalement sont les mêmes qu'à 1280 px sur main
  • Période affichée et dates choisies : teinte claire, comme la page courante
  • Panneau des dates ouvert dans la colonne : il s'ouvre vers la page
  • « À débloquer » : la recherche seule ; « Analyse » : la période seule ; bilan et méthode : sans filtres, même largeur de contenu
  • 1280 px et 390 px : inchangés
  • Modes clair et sombre, console vide

🤖 Generated with Claude Code