feat(directions): add bike routing

.github/workflows/android-deploy.yml

@@ -21,6 +21,7 @@ jobs:
           echo "GPF_key=${{ secrets.GPF_key }}" > .env
           echo "signalement_url=${{ secrets.SIGNALEMENT_URL }}" >> .env
           echo "osm_bearer_token=${{ secrets.OSM_BEARER_TOKEN }}" >> .env
+          echo "geovelo_key=${{ secrets.GEOVELO_KEY }}" >> .env
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

.github/workflows/ios-deploy.yml

@@ -21,6 +21,7 @@ jobs:
           echo "GPF_key=${{ secrets.GPF_key }}" > .env
           echo "signalement_url=${{ secrets.SIGNALEMENT_URL }}" >> .env
           echo "osm_bearer_token=${{ secrets.OSM_BEARER_TOKEN }}" >> .env
+          echo "geovelo_key=${{ secrets.GEOVELO_KEY }}" >> .env
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

src/css/directions-results.css

@@ -65,16 +65,22 @@
   background-image: url("assets/directions/voiture.svg");
 }
 
+#directionsSummaryTransportVelo {
+  background-image: url("assets/directions/velo.svg");
+}
+
 .lblDirectionsSummaryTransport {
   width: 30px;
   height: 30px;
   display: inline-block;
   background-repeat: no-repeat;
   background-position: left;
+  flex-shrink: 0;
 }
 
 #directionsSummaryComputation {
-  font-size: 12px;
+  color: var(--mid-grey);
+  font-family: "Open Sans Semibold";
 }
 
 .lblDirectionsSummaryComputation {
@@ -104,14 +110,14 @@
   cursor: pointer;
   text-align: right;
   width: 75px;
-  background-image: url("assets/directions/invisible.svg");
+  background-image: url("assets/directions/details.svg");
   background-repeat: no-repeat;
-  background-position: 8px;
+  background-position: 15px;
   color: var(--dark-green);
 }
 
 #directionsDetails input[id="directionsShowDetail"]:checked + label {
-  background-image: url("assets/directions/visible.svg");
+  background-image: url("assets/directions/details-o.svg");
   background-color: var(--dark-green);
   color: white;
 }
@@ -233,7 +239,12 @@
   font-family: "Fira Sans Semibold";
 }
 
-
+.divPositionAdressOriginInfo.geovelolink {
+  text-decoration: none;
+  background-image: url(assets/directions/link-play.svg);
+  background-size: 16px;
+  background-position: center right 16px;
+}
 
 @media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
   #directionsListDetails {