Plateau : glisser-déposer, double toucher, clavier, raccourcis et filet des pions

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

web/app.css

@@ -412,10 +412,42 @@ button:disabled {
 }
 
 .icon-button.labelled {
+  position: relative;
   width: 60px;
   height: 52px;
 }
 
+/* Raccourci clavier d'un bouton, en petite touche (interaction.md) :
+ * seulement quand un clavier est détecté (classe keyboard, app.ts). */
+.shortcut {
+  display: none;
+}
+
+.keyboard .shortcut {
+  display: inline-block;
+  min-width: 1.6em;
+  padding: 0 4px;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 18px;
+  text-align: center;
+  border: 1px solid currentColor;
+  border-radius: 4px;
+  opacity: 0.8;
+}
+
+/* Barre haute : la touche en coin, sans changer la taille du bouton. */
+.keyboard .icon-button.labelled .shortcut {
+  position: absolute;
+  top: 0;
+  right: 2px;
+  min-width: 0;
+  padding: 0 3px;
+  line-height: 15px;
+  background: var(--background);
+}
+
 .icon-button .label {
   font-size: 13px;
   line-height: 15px;
@@ -958,7 +990,9 @@ a.notation {
   aspect-ratio: 640 / 520;
   user-select: none;
   -webkit-user-select: none;
-  touch-action: manipulation;
+  /* Le doigt fait glisser les pions : le plateau ne fait ni défiler ni
+   * zoomer la page (glisser-déposer, double toucher ; charte, 1i). */
+  touch-action: none;
   -webkit-tap-highlight-color: transparent;
   font-family: var(--font-sans);
   /* Alegreya Sans dessine par défaut des chiffres elzéviriens (de hauteurs
@@ -996,8 +1030,8 @@ a.notation {
   stroke: var(--checker-computer-edge);
 }
 
-/* Filet intérieur des pions (bundle.css), prêt pour le jour où le plateau
- * le dessine. */
+/* Filet intérieur des pions (bundle.css), l'écho du logo : un cercle aux
+ * trois cinquièmes du rayon, dessiné avec chaque pion (board-view.ts). */
 .checker-ring {
   fill: none;
   stroke-width: 1.5;
@@ -1016,6 +1050,34 @@ a.notation {
   stroke-width: 6;
 }
 
+/* Glisser-déposer (charte, 1i) : le pion parti laisse un fantôme en
+ * pointillés ; le pion glissé, agrandi, passe devant tout. */
+.drag-origin .checker {
+  fill: none;
+  stroke: var(--highlight);
+  stroke-width: 2.5;
+  stroke-dasharray: 5 4;
+}
+
+.drag-origin .checker-ring,
+.drag-origin .checker-count {
+  display: none;
+}
+
+.drag-piece { pointer-events: none; }
+
+.checker.dragged {
+  stroke: var(--highlight);
+  stroke-width: 4;
+}
+
+/* Clavier : le pion ou la case d'arrivée choisis aux flèches. */
+.key-focus {
+  fill: none;
+  stroke: var(--focus);
+  stroke-width: 3;
+}
+
 /* Tailles des chiffres du plateau : attribut font-size, calculé par
  * geometry.ts (13 px au moins à l'écran). */
 .checker-count {