count carpool areas on the accordion badge

themes/mms43/assets/css/main.css

@@ -2268,6 +2268,23 @@ a {
   margin-right: 0.75rem;
 }
 
+/* Secondary count on the Covoiturage accordion: how many carpooling areas
+   were found. Outlined rather than filled so it reads as extra information
+   next to the trip count, and orange to tie it to the map markers. */
+.accordion-badge-areas {
+  background-color: transparent;
+  border: 1.5px solid var(--color-highlight);
+  color: var(--color-highlight);
+  gap: 0.2rem;
+  padding: 0 0.45rem;
+  min-width: 0;
+}
+
+.accordion-badge-areas svg {
+  flex-shrink: 0;
+}
+
+
 .accordion-arrow {
   width: 24px;
   height: 24px;

themes/mms43/layouts/_partials/search-results.html

@@ -121,11 +121,20 @@
     </div>
 
     <!-- Covoiturage -->
-    <div class="result-accordion" x-data="{ open: false }"
+    <div class="result-accordion"
+         x-data="{ open: false, get areaCount() { return (results.carpool_areas?.departure?.number || 0) + (results.carpool_areas?.arrival?.number || 0); } }"
          x-init="$watch('open', value => value ? showCarpoolAreaMarkers() : hideCarpoolAreaMarkers())">
       <button type="button" class="accordion-header" @click="open = !open" :class="{ 'active': open }">
         <span class="accordion-title">Covoiturage</span>
         <span class="accordion-badge" x-text="results.carpools?.number || 0"></span>
+        <span class="accordion-badge accordion-badge-areas" x-show="areaCount" x-cloak
+              :title="areaCount + ' aire' + (areaCount > 1 ? 's' : '') + ' de covoiturage à proximité'">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M15 10.5a3 3 0 1 1 -6 0a3 3 0 0 1 6 0z"/>
+            <path d="M19.5 10.5c0 7.142 -7.5 11.25 -7.5 11.25s-7.5 -4.108 -7.5 -11.25a7.5 7.5 0 1 1 15 0z"/>
+          </svg>
+          <span x-text="areaCount"></span>
+        </span>
         {{ if $iconArrow }}
           <img src="{{ $iconArrow.RelPermalink }}" alt="" class="accordion-arrow" :class="{ 'open': open }" />
         {{ end }}