Fusion de main (progression, 1h) dans plateau-soigne

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

web/app.css

@@ -1903,10 +1903,31 @@ html.bare .topbar {
   line-height: 20px;
 }
 
-.home-progress:empty {
+/* La ligne de progression : un lien vers #/progression (1h), haut de
+ * 44 px pour le doigt, en caption. */
+.home-progress {
+  display: flex;
+  gap: var(--space-1);
+  align-items: center;
+  min-height: 44px;
+  text-decoration: none;
+}
+
+.home-progress[hidden] {
   display: none;
 }
 
+.home-progress-text {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.home-progress .icon {
+  flex: none;
+  width: 16px;
+  height: 16px;
+}
+
 .home-footer {
   display: flex;
   gap: 10px;
@@ -3549,6 +3570,120 @@ html.landscape .summary-panel > .summary-end {
 .curve-band { fill: transparent; cursor: pointer; }
 .curve-band.selected { fill: var(--accent); fill-opacity: 0.08; }
 
+/* La progression (#/progression, 1h) : le titre, la phrase du maître, la
+ * courbe du taux d'erreur, puis les parties (charte, ecrans-etape-1.md,
+ * « 1h »). Les cartes reprennent celles de l'analyse. */
+.progression-title {
+  margin: var(--space-3) 0 var(--space-2);
+  font-size: 32px;
+  line-height: 36px;
+  font-weight: 800;
+  letter-spacing: -0.01em;
+}
+
+.progression-summary {
+  margin: 0 0 var(--space-4);
+  font-size: 17px;
+  line-height: 24px;
+}
+
+.progression-summary:empty {
+  display: none;
+}
+
+.progression-curve {
+  display: block;
+  width: 100%;
+  height: 168px;
+  font-family: var(--font-sans);
+}
+
+/* Le dernier point, plus gros, à l'encre du texte ; en verdict-good
+ * seulement si le taux baisse (le vert dit « mieux », jamais « dernier »). */
+.progression-dot { fill: var(--text); }
+.progression-dot.better { fill: var(--verdict-good); }
+.progression-value { fill: var(--muted); font-size: 13px; }
+.progression-value.last { fill: var(--text); font-weight: 700; }
+.progression-value.better { fill: var(--verdict-good); }
+
+.progression .link-button {
+  display: inline-flex;
+  align-items: center;
+}
+
+.progression-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin: 0 0 var(--space-4);
+}
+
+/* Sans partie terminée : « Nouvelle partie », pleine largeur en portrait. */
+@media (orientation: portrait) {
+  .progression-empty .button {
+    flex: 1;
+  }
+}
+
+.progression-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  margin: var(--space-2) 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.progression-item {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+}
+
+/* Une ligne, un seul lien vers le bilan : résultat et date à gauche, taux
+ * en gras, puis le chevron. */
+.progression-game {
+  display: flex;
+  gap: var(--space-3);
+  align-items: center;
+  min-height: 56px;
+  padding: var(--space-2) var(--space-3);
+  color: inherit;
+  text-decoration: none;
+}
+
+.progression-game > .icon {
+  flex: none;
+  width: 20px;
+  height: 20px;
+  color: var(--muted);
+}
+
+.progression-text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.progression-rate {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  align-items: flex-end;
+  text-align: right;
+}
+
+.progression-rate strong {
+  font-size: 22px;
+  line-height: 26px;
+  font-variant-numeric: tabular-nums;
+}
+
+.progression-rate.pending {
+  font-size: 13px;
+  color: var(--muted);
+}
+
 /* Le visualiseur : « ‹ Coup 7 sur 24 · 6-1 › », le plateau d'avant le
  * coup, la phrase du maître, votre coup contre celui du maître. */
 .viewer-nav {

web/index.html

@@ -110,6 +110,10 @@
      app/src/ui/analysis-view.ts. -->
 <section id="analysis" class="analysis page" hidden></section>
 
+<!-- La progression (#/progression) : la courbe du taux d'erreur et les
+     parties terminées, construite par app/src/ui/progression-view.ts. -->
+<section id="progression" class="analysis progression page" hidden></section>
+
 <!-- L'aide : un onglet par adresse (#/aide, #/glossaire, #/a-propos). -->
 <section id="help" class="help page" hidden>
   <!-- La barre haute de l'aide reste en vue quand la page défile. -->