Recette design : consigne en texte nu, cases d'arrivée en triangle et anneau, flèches sous les pions, panneau de fin structuré

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

web/app.css

@@ -135,7 +135,7 @@
   --topbar-height: 60px;
   --strip-height: 44px;
   --infoline-height: 44px;
-  --prompt-height: 74px;
+  --prompt-height: 50px;
   --actions-height: 76px;
 
   color-scheme: light;
@@ -579,23 +579,21 @@ button:disabled {
   color: var(--accent);
 }
 
-/* La consigne du moment : ce qui doit ressortir de l'écran. Hauteur fixe
- * (deux lignes) ; fond d'accent léger quand c'est au joueur. */
+/* La consigne du moment : ce qui doit ressortir de l'écran. Texte nu,
+ * 17 px gras, sur une hauteur réservée de deux lignes ; rien quand il n'y a
+ * rien à dire. La teinte « c'est à vous » est celle du bandeau du joueur. */
 .prompt {
   flex: none;
   height: var(--prompt-height);
-  margin: 0;
-  padding: var(--space-3) var(--space-4);
+  margin: var(--space-2) 0 0;
+  padding: 0 12px;
   overflow: hidden;
   font-weight: 700;
-  background: var(--accent-soft);
-  border-radius: var(--radius-md);
 }
 
-.prompt.neutral,
-body.busy .prompt {
+.prompt.neutral {
   font-weight: 400;
-  background: var(--surface-sunken);
+  color: var(--muted);
 }
 
 /* L'ordinateur réfléchit : trois points qui apparaissent l'un après
@@ -798,6 +796,32 @@ body.busy .prompt {
   font-weight: 700;
 }
 
+.panel p:empty {
+  display: none;
+}
+
+/* Fin de partie : surtitre, titre de 24 px, puis le détail des points. */
+.panel .overline {
+  margin: 0 0 var(--space-1);
+  font-size: 13px;
+  line-height: 16px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.panel .panel-title {
+  margin-bottom: var(--space-1);
+  font-size: 24px;
+  line-height: 30px;
+}
+
+.panel .panel-detail {
+  font-size: 17px;
+  line-height: 25px;
+  font-weight: 400;
+}
+
 .panel-actions {
   display: flex;
   gap: var(--space-2);
@@ -979,15 +1003,25 @@ body.busy .prompt {
 /* Le dernier coup de l'ordinateur (couleur laiton, charte) : une flèche par
  * demi-coup, les pions arrivés et frappés entourés, un pion fantôme là où
  * un pion est parti. */
+/* Épaisseur des flèches : attribut stroke-width (2,5 px à l'écran,
+ * geometry.ts) ; elles passent sous les pions. */
 .trace-arrow {
   stroke: var(--last-move);
-  stroke-width: 5;
   stroke-linecap: round;
   opacity: 0.85;
 }
 
 .trace-head { fill: var(--last-move); }
 
+/* Où le pion touché se posera : un anneau pointillé, comme les fantômes du
+ * coup de l'ordinateur, en brique. */
+.landing {
+  fill: none;
+  stroke: var(--highlight);
+  stroke-width: 3;
+  stroke-dasharray: 6 5;
+}
+
 .trace-landed,
 .trace-hit {
   fill: none;

web/index.html

@@ -116,7 +116,9 @@
      sur un voile. -->
 <div id="panel-veil" class="veil" hidden>
   <div id="panel" class="panel" role="dialog" aria-modal="true" aria-labelledby="panel-text">
-    <p id="panel-text"></p>
+    <p id="panel-overline" class="overline"></p>
+    <p id="panel-text" class="panel-title"></p>
+    <p id="panel-detail" class="panel-detail"></p>
     <div class="panel-actions">
       <button id="panel-secondary" type="button" class="secondary"></button>
       <button id="panel-primary" type="button"></button>