Élargir le panneau en glissant son bord

Trois cent quarante pixels suffisaient à des champs de date ; ils ne suffisent
pas à une liste imbriquée, où chaque niveau mange une indentation.

Le panneau reçoit donc la même poignée que la colonne des libellés (décision
18) : même geste, même double-clic de remise à zéro, même mémorisation dans
`localStorage`. Le code de glisser, jusque-là écrit pour la seule colonne, est
paramétré par le sens et la largeur qu'il pilote plutôt que dupliqué.

Une largeur unique pour les deux panneaux : ce qu'on élargit est le volet, pas
l'un ou l'autre de ses contenus. La largeur voulue et la largeur appliquée sont
deux variables distinctes, faute de quoi réduire un instant la fenêtre ferait
perdre le réglage.

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

css/style.css

@@ -31,6 +31,9 @@
   /* Doit rester en accord avec `LARGEUR_LIBELLES.defaut` (app.js), sur lequel
      retombe le double-clic de la poignée. */
   --largeur-libelles: 300px;
+  /* Même règle, pour `LARGEUR_PANNEAU.defaut`. Les deux panneaux la partagent :
+     ce qu'on élargit est le volet, pas l'un ou l'autre de ses contenus. */
+  --largeur-panneau: 380px;
 
   --rayon: 6px;
   --ombre: 0 1px 2px rgb(15 23 42 / 0.08);
@@ -814,8 +817,8 @@ button[aria-pressed="true"] {
   top: 0;
   right: 0;
   bottom: 0;
-  width: 340px;
-  max-width: 90vw;
+  width: var(--largeur-panneau);
+  max-width: 100vw;
   background: var(--surface);
   border-left: 1px solid var(--bordure);
   box-shadow: -4px 0 16px rgb(15 23 42 / 0.12);
@@ -824,6 +827,38 @@ button[aria-pressed="true"] {
   flex-direction: column;
 }
 
+/* Poignée de largeur, sur le bord gauche. Jumelle de `.poignee-colonne` : même
+   épaisseur, même trait d'accent au survol, même curseur. Ce qui change est le
+   bord auquel elle s'accroche, puisque le panneau est ancré à droite. */
+.poignee-panneau {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -4px;
+  width: 9px;
+  cursor: col-resize;
+  z-index: 1;
+}
+
+.poignee-panneau::after {
+  content: "";
+  position: absolute;
+  inset: 0 4px;
+  background: var(--accent);
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+
+.poignee-panneau:hover::after,
+.poignee-panneau:focus-visible::after,
+.poignee-panneau[data-glisse="true"]::after {
+  opacity: 1;
+}
+
+.poignee-panneau:focus-visible {
+  outline: none;
+}
+
 /* Le panneau reçoit le focus à l'ouverture pour que le clavier le suive, mais
    il n'est pas un contrôle : un anneau de focus autour de tout le panneau
    n'apprendrait rien et attirerait l'œil loin du champ à remplir. */