feat: refonte UX page /matches — révision carte par carte

- Remplace la table trop large par une carte de révision centrée
- Une paire à la fois : noms wrappés, score, prix moyens
- Valider/Rejeter via fetch() sans rechargement de page
- Passage automatique à la paire suivante après chaque action
- Compteurs mis à jour en temps réel (en attente/validées/rejetées)
- Message de fin avec lien vers /compare quand tout est traité
- Ajout tests pytest pour la page /matches

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

tickettracker/web/static/style.css

@@ -71,7 +71,90 @@
 .score-medium { background: #fff3cd; color: #856404; }
 .score-low    { background: #f8d7da; color: #721c24; }
 
-/* Boutons valider/rejeter dans la table matches */
+/* ── Carte de révision match (page /matches) ── */
+
+.match-card {
+    max-width: 780px;
+    margin: 0 auto;
+    padding: 1.5rem 2rem;
+}
+
+/* Barre de progression + score */
+.match-progress {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.25rem;
+    font-size: 0.9rem;
+    color: var(--pico-muted-color);
+}
+
+/* Les deux colonnes Picnic / Leclerc */
+.match-sides {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    gap: 1rem;
+    align-items: center;
+    margin-bottom: 1.75rem;
+}
+
+.match-side {
+    background: var(--pico-card-background-color, #f8f9fa);
+    border-radius: 8px;
+    padding: 1rem 1.25rem;
+    min-height: 120px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.match-side-picnic  { border-left: 4px solid #4a9eff; }
+.match-side-leclerc { border-left: 4px solid #ff6b35; }
+
+.match-store-label {
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--pico-muted-color);
+}
+
+/* Nom du produit : petit, word-wrap pour les noms longs */
+.match-name {
+    font-size: 0.95rem;
+    font-weight: 600;
+    line-height: 1.35;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+}
+
+.match-price {
+    font-size: 0.85rem;
+    color: var(--pico-muted-color);
+    margin-top: auto;
+}
+
+.match-vs {
+    font-size: 1.4rem;
+    color: var(--pico-muted-color);
+    text-align: center;
+    user-select: none;
+}
+
+/* Boutons d'action */
+.match-buttons {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+}
+
+.match-buttons button {
+    flex: 1;
+    max-width: 280px;
+    margin: 0;
+}
+
+/* Garder .btn-validate / .btn-reject pour rétrocompat éventuelle */
 .btn-validate {
     background: var(--pico-primary);
     color: white;