Fix meta-row color regression, show Services/Activities as icon tags

The gray color from the previous commit landed on .gpx-popup__meta (the
whole row, label and value both) instead of just .gpx-popup__meta-label —
only the label was supposed to be muted, the value should read as normal
text same as the description above it.

While in there: Services/Activities were showing park4night's own raw,
comma-separated codes ("animaux, point_eau, wc_public"), which don't mean
anything to a reader on their own. PARK4NIGHT_TAGS (icons.js) maps the
codes p4n2gpx's exports actually use to a human label and, where the
National Park Service's icon set (already used for POI_ICONS) has a
reasonable match, a small icon — formatTags (gpx.js) renders each as an
icon+label tag instead of raw text. A code not in that table just falls
back to its own raw text, so nothing is ever hidden.

public/css/style.css

@@ -458,7 +458,6 @@ html, body {
   margin-top: 8px;
   padding-top: 6px;
   border-top: 1px solid #eee;
-  color: #888;
   font-size: 12px;
   line-height: 1.5;
 }
@@ -468,9 +467,36 @@ html, body {
 }
 
 .gpx-popup__meta-label {
+  color: #888;
   margin-right: 4px;
 }
 
+.gpx-popup__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  margin-top: 2px;
+}
+
+.gpx-popup__tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.gpx-popup__tag-icon {
+  display: flex;
+  width: 13px;
+  height: 13px;
+  color: #555;
+  flex-shrink: 0;
+}
+
+.gpx-popup__tag-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
 .gpx-popup__link {
   margin-top: 6px;
   font-size: 12px;