Écran unique « Synthèse Kms » fusionnant résumés et montants réglés

- Nouvelle page Synthèse Kms (/synthese-kms) : sélecteur temporel en
  mode année seule + véhicule + Afficher, barème appliqué, tableau 12
  mois (km, remb. réel du mois, indication 80%, montant réglé
  saisissable, export PDF mensuel), ligne TOTAL (km annuel, montant
  réel, total réglé, export PDF annuel), bouton Enregistrer global
  (seuls les montants modifiés), auto-affichage à l'arrivée. Aucun
  nouvel endpoint (composition d'endpoints existants).
- Suppression des écrans « Résumé mensuel », « Résumé annuel » et
  « Montants réglés » (routes et liens de menu retirés).
- SelecteurTemporelComponent : mode « année seule » (Input/Output
  dédiés) et repli automatique au clic sur le niveau le plus bas.
- Pleine largeur des écrans Trajets, Carnet d'adresses et Synthèse Kms
  (Specs conserve sa largeur de lecture).
- Liste des trajets : boutons d'action déplacés en début de ligne
  (après la poignée, avant A/R), alignés à droite.
- Specs (requirements/design-requirements/design) synchronisées :
  glossaire Synthèse_Kms, Exigences 3/4/13/14 adaptées, critères 12.25-27.

frontend/src/app/features/synthese-kms/synthese-kms.component.scss

@@ -0,0 +1,143 @@
+.synthese-kms {
+  padding: 1.5rem;
+}
+
+h1 {
+  font-size: 1.4rem;
+  margin: 0;
+  color: var(--couleur-anthracite);
+}
+
+/* En-tête : titre à gauche, zone de critères à droite (comme le carnet d'adresses). */
+.synthese-kms__entete {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.selection {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 1rem;
+}
+
+.champ {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.champ label {
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.champ select {
+  padding: 0.5rem;
+  border: 1px solid #bbb;
+  border-radius: 6px;
+  font-size: 0.95rem;
+}
+
+.btn-principal {
+  padding: 0.55rem 1.25rem;
+  background: var(--couleur-bleu);
+  color: #fff;
+  border: 1px solid var(--couleur-bleu);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.95rem;
+
+  &:hover:not(:disabled) {
+    background: var(--couleur-orange);
+    border-color: var(--couleur-orange);
+  }
+
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+}
+
+.btn-secondaire {
+  padding: 0.4rem 0.9rem;
+  background: #fff;
+  color: #1565c0;
+  border: 1px solid #1565c0;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.9rem;
+
+  &:hover:not(:disabled) {
+    background: var(--couleur-orange);
+    border-color: var(--couleur-orange);
+    color: #fff;
+  }
+
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+}
+
+.bareme {
+  margin: 0.5rem 0 1rem;
+  color: #333;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 0.5rem;
+}
+
+table.synthese {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.92rem;
+
+  th,
+  td {
+    padding: 0.5rem 0.6rem;
+    border-bottom: 1px solid #eee;
+    text-align: left;
+  }
+
+  th.num,
+  td.num {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+
+  thead th {
+    background: #f5f5f5;
+    border-bottom: 1px solid #ccc;
+  }
+
+  td input {
+    width: 7rem;
+    padding: 0.35rem 0.4rem;
+    border: 1px solid #bbb;
+    border-radius: 4px;
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+
+  tfoot .total {
+    font-weight: 700;
+
+    td {
+      border-top: 2px solid #ccc;
+      border-bottom: none;
+    }
+  }
+}
+
+.vide {
+  color: #666;
+  font-style: italic;
+}