Rendre la barre cumulative identique, pliée ou dépliée

Elle s'épaississait en mode plié, au motif qu'elle y était seule sur sa
ligne. Mais plier un couloir ne change rien à ce que cette barre
représente : la voir changer d'aspect au pli laissait croire à deux
objets différents.

Elle garde donc partout la hauteur de sa version dépliée, plus mince
qu'une barre de phase — puisqu'elle voisine avec elles dès que le projet
est déplié, et qu'elle ne se glisse pas.

`--hauteur-cumulative` remonte dans `:root` : la barre et le fantôme qui
la double sont frères et non imbriqués, la variable doit donc vivre
au-dessus des deux.

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

README.md

@@ -97,9 +97,10 @@ par les champs du panneau de détail.
   un statut, des notes libres. Une phase peut être un **jalon** (une date unique, rendue en losange).
 - **Une frise commune**, les projets empilés en couloirs, pour les comparer d'un coup d'œil.
 - **Une barre cumulative par projet**, segmentée en teintes selon le statut de chaque phase : la
-  forme d'ensemble, toujours visible sur la ligne du projet. Elle ne se glisse pas.
+  forme d'ensemble, toujours visible sur la ligne du projet et toujours rendue pareil. Elle ne se
+  glisse pas.
 - **Couloirs pliables** : déplié, chaque phase occupe sa ligne sous la barre cumulative ; plié, il
-  ne reste que celle-ci, en plus épais.
+  ne reste que celle-ci.
 - **Manipulation directe** : glisser une barre pour la décaler, tirer ses bords pour changer sa
   durée. Les barres s'accrochent au lundi ; pour une date exacte, on passe par le panneau de détail.
 - **Planning de référence** : une fois le planning validé, on le fige. La frise affiche alors une

css/style.css

@@ -23,6 +23,9 @@
   --aujourdhui: #ef4444;
 
   --hauteur-barre: 26px;
+  /* Barre cumulative d'un projet, et fantôme qui la double. Ils sont frères,
+     pas imbriqués : la variable doit donc vivre au-dessus des deux. */
+  --hauteur-cumulative: 9px;
   --hauteur-ligne: 38px;
   --hauteur-entete: 66px; /* trois bandes de 22 px : année, mois, semaine */
   /* Doit rester en accord avec `LARGEUR_LIBELLES.defaut` (app.js), sur lequel
@@ -697,15 +700,18 @@ button[aria-pressed="true"] {
 /* --- barre cumulative d'un projet ---------------------------------------- */
 
 /* Barre unique segmentée par phase, affichée que le projet soit plié ou
-   déplié. Lecture seule : voir docs/decisions.md, section 8. */
+   déplié, et rendue à l'identique dans les deux cas — c'est le même objet, il
+   n'a pas à changer d'aspect quand on ouvre le couloir.
+   Volontairement plus mince qu'une barre de phase : elle voisine avec elles
+   dès que le projet est déplié, et ne se glisse pas.
+   Lecture seule : voir docs/decisions.md, section 8. */
 .barre-cumulative {
   position: absolute;
-  top: calc((var(--hauteur-ligne) - var(--hauteur-barre)) / 2);
+  top: calc((var(--hauteur-ligne) - var(--hauteur-cumulative)) / 2);
-  height: var(--hauteur-barre);
+  height: var(--hauteur-cumulative);
-  border-radius: 4px;
+  border-radius: 3px;
   overflow: hidden;
   display: flex;
-  box-shadow: var(--ombre);
   background: color-mix(in srgb, var(--couleur-projet) 15%, var(--surface));
   cursor: default;
   z-index: 2;
@@ -735,17 +741,6 @@ button[aria-pressed="true"] {
   opacity: 0.85;
 }
 
-/* Dépliée, la barre cumulative coiffe les phases du projet : elle s'amincit
-   pour ne pas se faire passer pour l'une d'elles — elle ne se glisse pas. */
-.barre-cumulative--fine {
-  --hauteur-cumulative: 9px;
-
-  top: calc((var(--hauteur-ligne) - var(--hauteur-cumulative)) / 2);
-  height: var(--hauteur-cumulative);
-  border-radius: 3px;
-  box-shadow: none;
-}
-
 /* --- barre fantôme de référence ------------------------------------------ */
 
 .fantome {
@@ -766,11 +761,12 @@ button[aria-pressed="true"] {
   z-index: 1;
 }
 
-/* Le fantôme suit la barre qu'il double : sous une barre cumulative amincie,
+/* Le fantôme suit la barre qu'il double. Sous la barre cumulative, plus mince
-   il flotterait sinon dans le vide. Déclaré après `.fantome`, dont il partage
+   qu'une barre de phase, il flotterait sinon dans le vide. Déclaré après
-   la spécificité — l'ordre est ce qui le fait gagner. */
+   `.fantome`, dont il partage la spécificité — l'ordre est ce qui le fait
-.fantome--fin {
+   gagner. */
-  top: calc((var(--hauteur-ligne) + 9px) / 2);
+.fantome--cumulatif {
+  top: calc((var(--hauteur-ligne) + var(--hauteur-cumulative)) / 2);
   height: 4px;
 }
 

docs/decisions.md

@@ -104,8 +104,14 @@ sur les phases.
 
 **Elle est affichée que le projet soit plié ou déplié.** Elle ne l'était d'abord qu'en mode plié, ce
 qui obligeait à replier pour savoir où en était le projet entier — donc à perdre la vue qu'on était
-en train d'éditer. Dépliée, elle voisine avec les barres de phases : elle s'amincit alors pour qu'on
+en train d'éditer.
-ne la prenne pas pour l'une d'elles, et le fantôme de référence s'amincit avec elle.
+
+**Et elle est rendue à l'identique dans les deux cas.** Une première version l'épaississait en mode
+plié, au motif qu'elle y était seule sur sa ligne. C'était une erreur : plier un couloir ne change
+rien à ce que cette barre représente, et la voir changer d'aspect au pli laissait croire à deux
+objets différents. Elle garde donc partout la même hauteur, plus mince qu'une barre de phase —
+puisqu'elle voisine avec elles dès que le projet est déplié, et qu'elle ne se glisse pas. Le fantôme
+de référence se cale dessous, d'où sa variante `--cumulatif`.
 
 ## 9. Accroche à la semaine
 

js/timeline.js

@@ -568,10 +568,7 @@ function construireBarreCumulative(projet, echelle) {
   if (!bornes) return null;
 
   const conteneur = document.createElement('div');
-  // Dépliée, elle voisine avec les barres de phases : elle s'amincit pour
+  conteneur.className = 'barre-cumulative';
-  // qu'on ne la prenne pas pour l'une d'elles et qu'on n'essaie pas de la
-  // glisser. Pliée, elle est seule sur sa ligne et porte toute l'information.
-  conteneur.className = `barre-cumulative${projet.collapsed ? '' : ' barre-cumulative--fine'}`;
   conteneur.style.left = `${echelle.x(bornes.start)}px`;
   conteneur.style.width = `${echelle.largeurDe(bornes.start, bornes.end)}px`;
 
@@ -605,9 +602,9 @@ function construireFantome(projet, echelle) {
   if (!reference) return null;
 
   const fantome = document.createElement('div');
-  // Le fantôme se cale sous la barre qu'il double : il doit suivre celle-ci
+  // Se cale sous la barre cumulative, plus mince qu'une barre de phase : sans
-  // quand elle s'amincit, sans quoi il flotterait sous elle.
+  // cette variante, il flotterait dans le vide sous elle.
-  fantome.className = `fantome${projet.collapsed ? '' : ' fantome--fin'}`;
+  fantome.className = 'fantome fantome--cumulatif';
   fantome.style.left = `${echelle.x(reference.start)}px`;
   fantome.style.width = `${echelle.largeurDe(reference.start, reference.end)}px`;
   fantome.title = `Référence : ${formaterDateLongue(reference.start)} → ${formaterDateLongue(reference.end)}`;