Rendre les notes d'une phase consultables depuis la vue par mois

Elles n'étaient accessibles que dans l'infobulle de la ligne, où l'on ne pense
pas à aller les chercher et d'où l'on ne peut rien copier. Or une note est
précisément ce qu'on va lire quand on fait le point — « pourquoi cette phase
est-elle bloquée ».

Un triangle en tête de ligne les déplie en dessous, sur les phases qui en
portent. C'est celui qui plie un projet sur la frise, au même endroit et avec
la même rotation : ce qui s'apprend d'un côté vaut de l'autre. La gouttière se
lit ainsi d'un coup d'œil comme la liste de ce qui a quelque chose à dire.

Toute la ligne déplie, pas seulement le triangle. Une première version faisait
de l'intitulé lui-même le bouton, avec un chevron à sa suite : la cible était
trop petite pour un geste aussi banal, et rien ne justifiait cette parcimonie
dans une vue où le clic n'a aucun autre effet. Le triangle reste comme
indicateur plutôt que comme cible, le curseur et le fond au survol disent que
la ligne réagit. Les lignes sans notes, elles, ne réagissent pas : promettre un
geste qui ne fait rien est pire que ne rien promettre.

Il n'en reste pas moins un vrai button : la ligne n'est pas focusable, c'est
donc le seul chemin clavier vers les notes.

Les notes restent repliées par défaut pour deux raisons. La densité d'abord :
trois lignes sous chaque intitulé étalent un mois sur deux écrans et ruinent la
lecture en diagonale. Et parce qu'une phase sur trois seulement en porte, les
afficher d'office donnerait des lignes de hauteurs inégales, ce qui casse
l'alignement des colonnes sur lequel repose tout le balayage du regard.

L'état déplié vit dans le DOM et nulle part ailleurs : il ne survit pas à un
changement de filtre, qui reconstruit la liste. Le remonter dans l'état de
l'application achèterait cher une continuité que personne ne réclame — quand la
liste change, on la relit.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

css/style.css

@@ -1150,7 +1150,7 @@ button[aria-pressed="true"] {
    l'espace disponible se déverse à sa droite plutôt qu'au milieu de la ligne. */
 .mois-entree {
   display: grid;
-  grid-template-columns: 16px 124px minmax(0, 200px) 172px minmax(0, 1fr) 86px;
+  grid-template-columns: 14px 16px 124px minmax(0, 200px) 172px minmax(0, 1fr) 86px;
   align-items: center;
   gap: 10px;
   padding: 6px 2px;
@@ -1161,6 +1161,18 @@ button[aria-pressed="true"] {
   background: var(--surface);
 }
 
+/* Toute la ligne déplie ses notes, ce qui doit se voir avant le clic : le
+   curseur et le fond qui s'appuie au survol le disent, le triangle de la
+   gouttière dit ce qui va se passer. Les lignes sans notes ne réagissent pas —
+   promettre un geste qui ne fait rien est pire que ne rien promettre. */
+.mois-entree--commentee {
+  cursor: pointer;
+}
+
+.mois-entree--commentee:hover {
+  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
+}
+
 /* Reprise des formes de la frise : une barre pour une tâche, un losange pour un
    jalon, et les mêmes textures de statut — c'est le même objet vu autrement. */
 .mois-entree__marque {
@@ -1222,6 +1234,48 @@ button[aria-pressed="true"] {
   font-weight: 600;
 }
 
+/* Triangle de dépli des notes, en gouttière. C'est le même bouton que celui qui
+   plie un projet sur la frise (`.plier`), au même endroit et avec le même
+   geste ; il en reprend donc l'aspect, en un peu plus lisible — ici il est seul
+   dans sa colonne, là-bas il jouxte le nom du projet.
+   Les lignes sans notes gardent la case, vide, pour que les colonnes suivantes
+   ne se décalent pas d'une ligne à l'autre. */
+.mois-entree__plier {
+  justify-self: center;
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--texte-doux);
+  transition: transform 0.15s;
+}
+
+/* La case des lignes sans notes est un `span` vide : elle réserve la colonne,
+   elle ne se clique pas. */
+button.mois-entree__plier {
+  cursor: pointer;
+}
+
+.mois-entree__plier[aria-expanded="true"] {
+  transform: rotate(90deg);
+}
+
+.mois-entree__plier:hover {
+  color: var(--texte);
+}
+
+/* Les notes prennent une seconde rangée, en retrait de la gouttière et de la
+   marque — les colonnes sont nommées par leur rang, ce qui laisse la grille
+   faire le calcul, là où un retrait en pixels aurait recopié des largeurs et se
+   serait désaccordé à la première retouche. */
+.mois-entree__notes {
+  grid-column: 3 / -1;
+  margin: 2px 0 6px;
+  white-space: pre-wrap;
+  color: var(--texte-doux);
+}
+
 /* Le projet passe devant la phase, mais reste en retrait : il situe, il n'est
    pas ce qu'on cherche. Le contraste sépare les deux colonnes de texte mieux
    qu'un filet ne le ferait. */