Rendre lisibles le statut et la date imposée

Statut : quatre boutons peints de leur texture, si bien que le panneau
sert enfin de légende. « En cours » se raye et « terminé » redevient vif
— la trame les distingue, la teinte n'a plus à le faire.

Date imposée : un cadre tireté cerne la forme entière. Les taquets
tombaient sous les poignées de redimensionnement et disparaissaient sur
une barre courte. Son libellé passe dans le modèle, ce qui la fait
apparaître dans la vue par mois, qui la taisait.

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

index.html

@@ -177,7 +177,13 @@
           Jalon (une seule date, affichée en losange)
         </label>
 
-        <div class="champ-double">
+        <!--
+          Le bloc se cerne du cadre tireté d'une date imposée quand la case
+          ci-dessous est cochée : elle agit sur ces deux champs-là, sa
+          conséquence doit se voir là où elle joue. Même dessin que sur la barre
+          de la frise — ce qui s'apprend d'un côté se relit de l'autre.
+        -->
+        <div class="champ-double" id="champ-dates">
           <label>
             Début
             <input type="date" name="start" required />
@@ -198,15 +204,48 @@
           Date imposée (déléguée, contractuelle ou réglementaire)
         </label>
 
-        <label>
-          Statut
-          <select name="status">
-            <option value="todo">À venir</option>
-            <option value="doing">En cours</option>
-            <option value="done">Terminé</option>
-            <option value="blocked">Bloqué</option>
-          </select>
-        </label>
+        <!--
+          Quatre boutons plutôt qu'une liste déroulante, chacun peint de la
+          texture qu'il donne à la barre sur la frise. Le panneau devient ainsi
+          sa propre légende, au seul moment où l'on en a besoin — celui du choix
+          —, et sans coûter d'espace permanent au planning. Une liste déroulante
+          cachait trois valeurs sur quatre, n'en montrait aucune texture, et
+          demandait deux clics là où il en faut un.
+
+          Les quatre `input` partagent le nom `status` : `formulaire.status`
+          reste ce qu'il était pour detail.js, une valeur qui se lit et s'écrit.
+        -->
+        <fieldset class="statuts">
+          <legend>Statut</legend>
+          <!--
+            Les quatre choix vivent dans un `div` et non directement sous le
+            `fieldset` : un `legend` n'est pas un enfant comme les autres, et les
+            navigateurs le sortent du flux de son parent — le mettre en grille
+            aurait fait dépendre la mise en page d'un cas particulier.
+          -->
+          <div class="statuts__choix">
+            <label class="statut statut--todo">
+              <input type="radio" name="status" value="todo" />
+              <span class="statut__marque"></span>
+              À venir
+            </label>
+            <label class="statut statut--doing">
+              <input type="radio" name="status" value="doing" />
+              <span class="statut__marque"></span>
+              En cours
+            </label>
+            <label class="statut statut--done">
+              <input type="radio" name="status" value="done" />
+              <span class="statut__marque"></span>
+              Terminé
+            </label>
+            <label class="statut statut--blocked">
+              <input type="radio" name="status" value="blocked" />
+              <span class="statut__marque"></span>
+              Bloqué
+            </label>
+          </div>
+        </fieldset>
 
         <!--
           Les notes sont bâties par `notes.js` : aperçu markdown, barre d'outils