Dessiner l'horizon sur la frise, l'éditer et le glisser

La barre d'un projet envisagé est pâle et hachurée, aux bords fondus.
Elle se glisse et se redimensionne comme une phase, mais accrochée au
mois : le geste existe, il ne permet pas de poser une date qu'on n'a
pas. Le panneau ajoute deux champs de mois et trois crans.

Une barre « Afficher » filtre par état, disjonctive là où celle des
tags est conjonctive — d'où des boutons carrés et non des pastilles.
Les écartés en sont décochés au départ.

Engager démarre au premier jour de l'horizon, et clore un projet
demande confirmation quand il reste des phases à écraser.

Au passage : releasePointerCapture peut lever quand le pointeur a
disparu, ce qui sautait l'application du geste. Le nettoyage en est
maintenant isolé.

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

index.html

@@ -54,6 +54,22 @@
       <p class="outils__etat" id="etat-sauvegarde" role="status" aria-live="polite"></p>
     </header>
 
+    <!--
+      Filtre par état, masqué tant que tous les projets sont dans le même : lui
+      aussi n'apparaît que le jour où il sert.
+
+      Il ne se comporte pas comme celui des tags, et c'est pourquoi il ne lui
+      ressemble pas. Un projet porte plusieurs tags mais un seul état : cocher un
+      tag de plus resserre la sélection, cocher un état de plus l'élargit. D'où
+      « Afficher » ici et « Filtrer » en dessous, et deux formes distinctes —
+      sans quoi la même case voudrait dire deux choses opposées selon la ligne
+      où elle se trouve.
+    -->
+    <div class="etats" id="etats" hidden role="group" aria-label="Afficher par état">
+      <span class="filtres__titre">Afficher</span>
+      <div class="etats__liste" id="etats-liste"></div>
+    </div>
+
     <!--
       Barre de filtres, masquée tant qu'aucun projet ne porte de tag : elle
       n'apparaît que le jour où elle sert à quelque chose.
@@ -107,8 +123,13 @@
       </button>
     </p>
 
+    <!--
+      Deux tamis peuvent vider la vue — les tags cochés, les états décochés — et
+      celui qui les a resserrés ne sait pas toujours lequel a fini par tout
+      emporter. Le bouton relâche donc les deux d'un coup.
+    -->
     <p class="vide" id="message-filtre" hidden>
-      Aucun projet ne porte tous les tags sélectionnés.<br />
+      Aucun projet ne passe les filtres en cours.<br />
       <button type="button" id="effacer-filtres-vide">Tout afficher</button>
     </p>
 
@@ -215,11 +236,48 @@
         <button type="button" id="fermer-panneau-projet" aria-label="Fermer">&times;</button>
       </div>
       <form class="panneau__corps" id="formulaire-projet">
+        <!--
+          Où en est le projet dans son cycle de vie. En lecture seule : l'état
+          se déduit des données, il ne se choisit pas dans une liste. Les deux
+          qui s'actent — terminer, écarter — sont dans le menu ⋯ du projet, avec
+          les autres décisions qu'on ne prend qu'une fois.
+        -->
+        <p class="panneau__etat" id="panneau-projet-etat"></p>
+
         <label>
           Nom
           <input type="text" name="name" required autocomplete="off" />
         </label>
 
+        <!--
+          Horizon : l'ancrage temporel d'un projet envisagé, au mois. Le bloc
+          disparaît dès que le projet a une phase — ce sont elles qui commandent
+          alors son emprise (docs/decisions.md, section 27).
+        -->
+        <fieldset class="horizon" id="panneau-projet-horizon" hidden>
+          <legend>Horizon</legend>
+          <div class="horizon__intervalle">
+            <label>
+              De
+              <input type="month" name="horizonStart" autocomplete="off" />
+            </label>
+            <label>
+              à
+              <input type="month" name="horizonEnd" autocomplete="off" />
+            </label>
+          </div>
+          <!--
+            Un horizon se repousse par crans et jamais au jour : c'est ce qui
+            garde l'imprécision visible. Les mêmes crans dans les deux sens.
+          -->
+          <div class="horizon__crans" id="panneau-projet-crans">
+            <button type="button" data-cran="-3" title="Avancer de trois mois">−3&nbsp;mois</button>
+            <button type="button" data-cran="3" title="Repousser de trois mois">+3&nbsp;mois</button>
+            <button type="button" data-cran="12" title="Repousser d'un an">+1&nbsp;an</button>
+          </div>
+          <p class="horizon__aide" id="panneau-projet-horizon-aide"></p>
+        </fieldset>
+
         <fieldset class="couleurs">
           <legend>Couleur du couloir</legend>
           <div id="panneau-projet-couleurs"></div>
@@ -245,6 +303,16 @@
 
         <p class="panneau__erreur" id="erreur-projet" role="alert" hidden></p>
 
+        <!--
+          Les deux actes du cycle de vie. Ils sont aussi dans le menu ⋯, avec les
+          autres décisions qu'on ne prend qu'une fois — mais c'est ici qu'on lit
+          l'état du projet, donc ici qu'on cherche à en changer.
+        -->
+        <div class="panneau__actions panneau__actions--cycle">
+          <button type="button" id="terminer-projet"></button>
+          <button type="button" id="ecarter-projet"></button>
+        </div>
+
         <div class="panneau__actions">
           <button type="button" id="supprimer-projet" class="bouton--danger">
             Supprimer le projet