Une adresse pour chaque écran, de vrais liens pour y aller

Routeur pur (fragment vers écran et inversement) et navigation sur
hashchange : aide et ses questions, glossaire et ses termes, à propos,
menu, mes parties et chaque partie, vue d'une position avec « Jouer à
partir d'ici » et « Retour à ma partie », « Copier le lien de la
position ».

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

web/app.css

@@ -1165,14 +1165,14 @@ html.landscape .banner {
   bottom: var(--space-2);
 }
 
-/* L'aide reste une page qu'on fait défiler. */
-html.landscape.help-open,
-html.landscape.help-open body {
+/* L'aide et la vue d'une position restent des pages qu'on fait défiler. */
+html.landscape.page-open,
+html.landscape.page-open body {
   height: auto;
   overflow: visible;
 }
 
-html.landscape.help-open body {
+html.landscape.page-open body {
   padding: 0 var(--space-4);
   background: var(--background);
 }
@@ -1306,7 +1306,7 @@ html.rotated .banner {
 }
 
 .about {
-  margin-top: var(--space-8);
+  margin-top: var(--space-2);
   font-size: 15px;
   line-height: 20px;
   color: var(--muted);
@@ -1316,3 +1316,208 @@ html.rotated .banner {
   user-select: text;
   -webkit-user-select: text;
 }
+
+#help-back {
+  margin-top: var(--space-4);
+}
+
+/* Les onglets de l'aide : des liens, l'onglet courant souligné en brique. */
+.help-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  margin-top: var(--space-4);
+  border-bottom: 1px solid var(--border);
+}
+
+.help-tabs a {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  padding: 0 var(--space-3);
+  font-weight: 500;
+  color: var(--muted);
+  text-decoration: none;
+  border-bottom: 3px solid transparent;
+}
+
+.help-tabs a[aria-current="page"] {
+  font-weight: 700;
+  color: var(--text);
+  border-bottom-color: var(--accent);
+}
+
+.help-notice:empty {
+  display: none;
+}
+
+/* Une question de l'aide : son titre est un lien qui l'ouvre (son adresse),
+ * ou la referme quand elle est ouverte. */
+.question {
+  border-bottom: 1px solid var(--border);
+}
+
+.help .question h3 {
+  margin: 0;
+}
+
+.question h3 a {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+  min-height: 52px;
+  padding: var(--space-2) 0;
+  color: var(--text);
+  text-decoration: none;
+}
+
+.question h3 a::after {
+  content: "";
+  flex: none;
+  width: 9px;
+  height: 9px;
+  margin: 0 6px 4px auto;
+  border-right: 2px solid var(--muted);
+  border-bottom: 2px solid var(--muted);
+  transform: rotate(45deg);
+}
+
+.question.open h3 a::after {
+  margin-bottom: -4px;
+  transform: rotate(-135deg);
+}
+
+.answer {
+  padding-bottom: var(--space-3);
+}
+
+/* Le terme ouvert par son adresse (#/glossaire/<terme>). */
+.glossary dt a {
+  color: var(--text);
+  text-decoration: none;
+}
+
+.glossary dt.current,
+.glossary dt.current + dd {
+  margin-inline: calc(-1 * var(--space-4));
+  padding-inline: var(--space-4);
+  background: var(--accent-soft);
+}
+
+/* -------------------------------------------------- Liens et boutons */
+
+/* Un lien qui mène à un écran, avec l'allure d'un bouton. */
+a.button {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--button-height);
+  padding: 0 20px;
+  font-weight: 700;
+  color: var(--on-accent);
+  text-decoration: none;
+  background: var(--accent);
+  border: 2px solid var(--accent);
+  border-radius: var(--radius-pill);
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+a.button.secondary {
+  color: var(--text);
+  background: transparent;
+  border-color: var(--border-strong);
+}
+
+a.button:active {
+  transform: translateY(1px);
+  filter: brightness(0.94);
+}
+
+a.icon-button,
+a.item,
+a.link-button {
+  text-decoration: none;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+a.link-button {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: underline;
+}
+
+.infoline .copy-link {
+  color: var(--accent);
+}
+
+/* Zone de texte de la copie de repli (presse-papiers), hors de l'écran. */
+.offscreen {
+  position: fixed;
+  top: 0;
+  left: -10000px;
+  opacity: 0;
+}
+
+/* ------------------------------------------------ Vue d'une position */
+
+.position-view {
+  max-width: var(--page-width);
+  margin: 0 auto;
+  padding-bottom: var(--space-6);
+}
+
+.position-title {
+  margin: var(--space-6) 0 var(--space-2);
+  font-size: 24px;
+  line-height: 30px;
+}
+
+.position-message:empty {
+  display: none;
+}
+
+.position-board {
+  margin: var(--space-2) 0;
+}
+
+/* En paysage, le plateau tient dans la hauteur de l'écran. */
+html.landscape .position-board {
+  width: min(100%, calc(80vh * 640 / 520));
+  height: auto;
+  margin-inline: auto;
+  aspect-ratio: 640 / 520;
+}
+
+.position-detail {
+  margin: var(--space-2) 0 var(--space-4);
+  font-size: 15px;
+  line-height: 20px;
+  color: var(--muted);
+}
+
+.position-actions {
+  display: grid;
+  grid-template-columns: 1fr 1.6fr;
+  gap: var(--space-2);
+}
+
+.position-actions > * {
+  min-width: 0;
+}
+
+.position-copy {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin-top: var(--space-3);
+}
+
+.position-copy .icon {
+  width: 20px;
+  height: 20px;
+}

web/index.html

@@ -29,9 +29,11 @@
     <img class="logo-light" src="icons/logo-horizontal-couleur.svg" alt="Ustagammon">
     <img class="logo-dark" src="icons/logo-horizontal-sombre.svg" alt="Ustagammon">
   </h1>
-  <button id="help-button" type="button" class="icon-button labelled"></button>
+  <!-- Ce qui mène à un autre écran est un lien vers son adresse (ADR 0013,
+       amendement) ; les actions sont des boutons. -->
+  <a id="help-button" href="#/aide" class="icon-button labelled"></a>
   <button id="fullscreen-button" type="button" class="icon-button labelled"></button>
-  <button id="menu-button" type="button" class="icon-button labelled"></button>
+  <a id="menu-button" href="#/menu" class="icon-button labelled"></a>
 </header>
 
 <main id="game" class="game">
@@ -46,7 +48,7 @@
     <div id="pip-bubble" class="bubble" role="dialog" aria-labelledby="pip-bubble-term" hidden>
       <p id="pip-bubble-term" class="bubble-term"></p>
       <p class="bubble-text"></p>
-      <button type="button" class="link-button"></button>
+      <a class="link-button" href="#/glossaire"></a>
     </div>
   </div>
   <div id="strip-player" class="strip">
@@ -58,6 +60,7 @@
   <div class="infoline">
     <p id="info" class="info" aria-live="polite"></p>
     <button id="replay" type="button" class="icon-button replay" hidden></button>
+    <button id="copy-link" type="button" class="icon-button copy-link" hidden></button>
   </div>
   <p id="prompt" class="prompt" aria-live="polite"></p>
   <div class="spacer"></div>
@@ -79,11 +82,31 @@
   <noscript><p>Ustagammon a besoin de JavaScript.</p></noscript>
 </main>
 
-<section id="help" class="help" hidden>
-  <button id="help-back" type="button" class="secondary"></button>
+<!-- L'aide : un onglet par adresse (#/aide, #/glossaire, #/a-propos). -->
+<section id="help" class="help page" hidden>
+  <a id="help-back" href="#/" class="button secondary"></a>
+  <nav id="help-tabs" class="help-tabs">
+    <a href="#/aide" data-screen="help"></a>
+    <a href="#/glossaire" data-screen="glossary"></a>
+    <a href="#/a-propos" data-screen="about"></a>
+  </nav>
   <div id="help-content"></div>
 </section>
 
+<!-- Une position partagée (#/position/<Position ID>/<Match ID>), non
+     jouable. -->
+<section id="position-view" class="position-view page" aria-labelledby="position-title" hidden>
+  <h2 id="position-title" class="position-title"></h2>
+  <p id="position-message" class="position-message" role="status"></p>
+  <svg id="position-board" class="board position-board" role="img" xmlns="http://www.w3.org/2000/svg"></svg>
+  <p id="position-detail" class="position-detail"></p>
+  <div class="position-actions">
+    <a id="position-back" href="#/" class="button secondary"></a>
+    <button id="position-play" type="button"></button>
+  </div>
+  <button id="position-copy" type="button" class="secondary position-copy"></button>
+</section>
+
 <!-- Menu : une feuille qui monte du bas. -->
 <div id="menu-veil" class="veil sheet-veil" hidden>
   <div id="menu" class="sheet" role="dialog" aria-modal="true" aria-labelledby="menu-title">
@@ -93,9 +116,10 @@
       <button id="menu-close" type="button" class="icon-button"></button>
     </div>
     <button id="menu-new-game" type="button" class="item"></button>
-    <button id="menu-games" type="button" class="item"></button>
+    <a id="menu-games" href="#/parties" class="item"></a>
+    <button id="menu-copy-link" type="button" class="item"></button>
     <button id="menu-fullscreen" type="button" class="item"></button>
-    <button id="menu-help" type="button" class="item"></button>
+    <a id="menu-help" href="#/aide" class="item"></a>
     <button id="menu-theme" type="button" class="item"><span class="item-label"></span><span class="item-value"></span></button>
     <button id="menu-vibrations" type="button" class="item" role="switch"><span class="item-label"></span><span class="switch" aria-hidden="true"></span></button>
     <button id="menu-screen-on" type="button" class="item" role="switch"><span class="item-label"></span><span class="switch" aria-hidden="true"></span></button>