Revoir l'ergonomie des panneaux et de la colonne des projets

Les panneaux d'édition étaient modaux et la colonne de gauche tronquait
tout ce qu'elle portait. Sept corrections, mesurées sur data/exemple.json.

Panneaux
- Le voile qui recouvrait la page disparaît : la frise reste manipulable
  pendant l'édition, et cliquer une autre barre y bascule la sélection.
  Il rendait aussi le raccourci flèches inatteignable, le focus partant
  dans le champ « Nom » sans qu'on puisse cliquer ailleurs pour en sortir.
- Un clic dans une zone inerte referme le panneau : ce que rendait le
  voile, sans le calque qui figeait la frise.
- Les paramètres d'un projet quittent le <dialog> modal pour le même
  panneau qu'une phase, avec la même édition au fil de la saisie.
  « Nouveau projet » crée donc le projet aussitôt, comme le fait déjà
  l'ajout d'une phase : plus aucune création ne passe par un formulaire.

Colonne des projets
- Le nom ne disposait que de 56 px sur 250, et « client » s'affichait
  « c. ». Les commandes passent en surimpression au survol, les tags
  cèdent en bloc derrière un compteur, et le nom cède en dernier.
- La colonne se redimensionne, largeur conservée dans localStorage.
- L'œil disparaît : il faisait doublon avec l'entrée « Masquer » du menu.
  Un « + » le remplace, l'ajout d'une phase étant l'action la plus
  fréquente, et le nom du projet devient cliquable — il portait déjà un
  curseur « main » sans aucune action derrière.
- Plus de commande « Ajouter un jalon » : un jalon est une phase dont on
  coche la case, pas un autre objet.

Frise
- Le nom d'une phase reste accroché au bord visible quand sa barre
  s'enfonce sous la colonne.
- Cliquer un nom de phase hors écran ramène la frise sur elle.
- La barre cumulative d'un projet s'affiche aussi quand il est déplié,
  amincie pour ne pas se faire passer pour une barre de phase.

Arbitrages consignés dans docs/decisions.md, sections 8 et 17 à 21.

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

README.md

@@ -33,12 +33,26 @@ cp data/exemple.json data/projets.json
 
 ## Prise en main
 
-Chaque projet porte trois commandes dans la colonne de gauche :
+**Nouveau projet** crée le projet aussitôt, sous un nom provisoire, et ouvre ses paramètres avec
+ce nom présélectionné : on tape simplement par-dessus. Il n'y a aucun formulaire à valider — ni
+ici, ni pour une phase. Tout s'applique au fil de la saisie, et un projet créé par erreur se
+supprime depuis son propre panneau.
 
-- **le triangle** plie et déplie son couloir ;
-- **l'œil** le masque de la frise sans le supprimer ;
-- **`⋯`** ouvre son menu : ajouter une phase ou un jalon, renommer, changer la couleur et les
-  tags, figer la référence, supprimer le projet. Un clic droit sur le libellé ouvre le même menu.
+Dans la colonne de gauche, le **triangle** plie et déplie le couloir d'un projet, et un clic sur
+son **nom** ouvre ses paramètres : nom, couleur, tags. Deux commandes apparaissent au survol de
+la ligne, sur son bord droit :
+
+- **`+`** ajoute une phase à la suite de la dernière, et ouvre son panneau de détail ;
+- **`⋯`** ouvre le menu du projet : ajouter une phase, plier, masquer de la frise, renommer,
+  figer la référence, supprimer. Un clic droit sur le libellé ouvre le même menu.
+
+Il n'y a pas de commande séparée pour créer un **jalon** : c'est une phase dont on coche la case
+« Jalon » dans le panneau, ce qui ramène sa fin sur son début. La bascule joue dans les deux sens
+à tout moment.
+
+La colonne se **redimensionne** en glissant la ligne qui la sépare de la frise, en haut à
+gauche : un double-clic revient à la largeur d'origine. Cette largeur est propre au navigateur,
+elle n'est pas enregistrée dans le planning.
 
 Une fois un projet en place :
 
@@ -47,9 +61,12 @@ Une fois un projet en place :
 | Glisser le corps d'une barre | Décale la phase, durée conservée |
 | Glisser le bord d'une barre | Change la date de début ou de fin |
 | Clic sur une barre ou son nom | Ouvre le panneau de détail |
+| Clic sur une autre barre, panneau ouvert | Bascule le panneau sur cette phase |
+| Clic sur un nom de phase hors écran | Ramène la frise sur elle |
 | `←` `→` | Décale d'un jour la phase sélectionnée |
 | `Maj` + `←` `→` | Allonge ou raccourcit d'un jour |
 | `Échap` | Annule le glisser en cours, ou ferme le panneau |
+| Clic dans une zone vide | Ferme le panneau ouvert |
 | `Maj` + molette | Fait défiler la frise horizontalement |
 | `↑` `↓` dans un menu | Parcourt les entrées |
 
@@ -79,8 +96,10 @@ par les champs du panneau de détail.
 - **Plusieurs projets**, chacun décomposé en **phases** ayant un nom, des dates de début et de fin,
   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.
-- **Couloirs pliables** : déplié, on voit chaque phase sur sa ligne ; plié, le projet devient une
-  barre unique segmentée en teintes, qui donne la forme d'ensemble sans le détail.
+- **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.
+- **Couloirs pliables** : déplié, chaque phase occupe sa ligne sous la barre cumulative ; plié, il
+  ne reste que celle-ci, en plus épais.
 - **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
@@ -142,8 +161,9 @@ Node suffit.
 | `js/storage.js` | Dialogue avec le serveur, sauvegarde debouncée, indicateur d'état |
 | `js/timeline.js` | Rendu de la frise : échelle, couloirs, barres, jalons, pli/dépli |
 | `js/drag.js` | Glisser et redimensionner les barres |
-| `js/detail.js` | Panneau de détail |
-| `js/menu.js` | Menu contextuel et boîtes de dialogue |
+| `js/detail.js` | Panneau de détail d'une phase |
+| `js/projet.js` | Panneau des paramètres d'un projet : nom, couleur, tags |
+| `js/menu.js` | Menu contextuel et dialogue de confirmation |
 | `js/app.js` | Amorçage, état en mémoire, câblage des événements |
 
 Le rendu utilise des éléments DOM positionnés en absolu, pas de SVG ni de bibliothèque Gantt.