feat(footer): "mediation numérique" button

src/app/footer/footer.component.html

-<div class="footer" fxLayout="row" fxLayoutAlign="center">
-  <div fxLayout="row">
+<div class="footer">
+  <div class="links">
     <!--a class="clickable text-align-center" routerLink="/page/accessibilite" i18n>Accessibilité</a-->
     <a class="clickable text-align-center" routerLink="/legal-notice" i18n>Mentions légales</a>
     <a class="clickable text-align-center" routerLink="/newsletter" i18n>Newsletter</a>
@@ -7,14 +7,21 @@
     <a class="clickable text-align-center" routerLink="/contact" i18n>Contact</a>
     <a class="clickable text-align-center" routerLink="/page/qui-sommes-nous" i18n>Qui sommes-nous ?</a>
   </div>
-  <a
-    class="metro-link"
-    href="https://www.grandlyon.com"
-    title="Accéder au site de la Métropole de Lyon (nouvelle fenêtre)"
-    target="_blank"
-    rel="noopener noreferrer"
-  >
-    <img class="logo-grand-lyon" src="/assets/logos/ic_metro.svg" alt />
-    <p class="metro-title" i18n>Un site de la Métropole de Lyon</p>
-  </a>
+
+  <div class="right">
+    <button class="mediationButton" (click)="goToMediation()">
+      <img src="/assets/ico/telephone.svg" alt="telephone" />
+      Mediation numérique
+    </button>
+    <a
+      class="metro-link"
+      href="https://www.grandlyon.com"
+      title="Accéder au site de la Métropole de Lyon (nouvelle fenêtre)"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <img class="logo-grand-lyon" src="/assets/logos/ic_metro.svg" alt />
+      <p class="metro-title" i18n>Un site de la Métropole de Lyon</p>
+    </a>
+  </div>
 </div>

src/app/footer/footer.component.scss

@@ -7,12 +7,16 @@
   height: $footer-height;
   background-color: black;
   display: flex;
-  align-items: center !important;
-  justify-content: space-between !important;
-  padding: 0px 22px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1.5rem;
+
+  .links {
+    display: flex;
+    gap: 10px;
+  }
   a {
     color: $white;
-    margin: 0px 0px 0px 10px;
     text-decoration: none;
     @include lato-regular-12;
     &:hover {
@@ -20,7 +24,7 @@
     }
     &:not(:last-child)::after {
       content: '•';
-      margin: 0px 0px 0px 10px;
+      margin-left: 10px;
       display: inline-block;
     }
   }
@@ -29,6 +33,25 @@
     width: 22px;
   }
 
+  .right {
+    display: flex;
+    gap: 1rem;
+    .mediationButton {
+      @include lato-regular-12;
+      padding: 0 16px 0 8px;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      background-color: $grey-5;
+      border-radius: 8px;
+      border: 1px solid #000;
+      cursor: pointer;
+      &:hover {
+        transform: scale(1.01);
+      }
+    }
+  }
+
   @media #{$large-phone} {
     display: none !important;
     font-size: 0.75em;

src/app/footer/footer.component.ts

 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-footer',
@@ -6,5 +7,9 @@ import { Component } from '@angular/core';
   styleUrls: ['./footer.component.scss'],
 })
 export class FooterComponent {
-  constructor() {}
+  constructor(private router: Router) {}
+
+  public goToMediation(): void {
+    this.router.navigate(['/orientation'], { state: { mediationNumerique: true } });
+  }
 }

src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss

@@ -4,9 +4,8 @@
 @import '../../../../../assets/scss/breakpoint';
 
 .progressBar {
-  height: #{$progressBar-height};
   max-width: 980px;
-  margin: 16px auto 0 auto;
+  margin: 1rem auto;
 
   @media #{$tablet} {
     margin: 0px 4px;

src/app/form/orientation-form-view/orientation-form-view.component.ts

@@ -69,6 +69,12 @@ export class OrientationFormViewComponent implements OnInit, AfterContentChecked
     } else {
       this.profile = await this.profileService.getProfile();
     }
+
+    if (history.state.mediationNumerique) {
+      this.currentStep = 0;
+      this.needType = this.needEnum.learnSkills;
+      this.setCurrentNeedType(NeedsType.learnSkills);
+    }
   }
 
   ngAfterContentChecked() {

src/assets/ico/telephone.svg

+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 9.125H14.75C14.7495 8.62787 14.5518 8.15125 14.2003 7.79972C13.8488 7.4482 13.3721 7.2505 12.875 7.25V6C13.7035 6.00099 14.4978 6.33055 15.0836 6.91639C15.6694 7.50222 15.999 8.2965 16 9.125Z" fill="#DA3635"/>
+<path d="M18.4999 9.125H17.2499C17.2486 7.96508 16.7872 6.85306 15.967 6.03287C15.1468 5.21269 14.0348 4.75132 12.8749 4.75V3.5C14.3662 3.50165 15.796 4.09482 16.8505 5.14935C17.9051 6.20389 18.4982 7.63367 18.4999 9.125ZM17.2499 19.125H17.1437C4.8624 18.4187 3.11865 8.05625 2.8749 4.89375C2.8368 4.39797 2.9972 3.90736 3.32081 3.52983C3.64443 3.1523 4.10475 2.91878 4.60053 2.88063C4.65011 2.87688 4.6999 2.875 4.7499 2.875H8.04365C8.294 2.87476 8.53865 2.94969 8.74592 3.0901C8.95319 3.23051 9.11352 3.42992 9.20615 3.6625L10.1561 6C10.2476 6.22722 10.2703 6.4763 10.2214 6.71631C10.1725 6.95631 10.0542 7.17667 9.88115 7.35L8.5499 8.69375C8.757 9.87583 9.32264 10.9656 10.1701 11.8153C11.0176 12.665 12.1059 13.2335 13.2874 13.4438L14.6437 12.1C14.8196 11.9288 15.042 11.8133 15.2832 11.7677C15.5244 11.7221 15.7736 11.7486 15.9999 11.8438L18.3562 12.7875C18.5852 12.8831 18.7807 13.0446 18.9176 13.2517C19.0545 13.4587 19.1267 13.7018 19.1249 13.95V17.25C19.1249 17.7473 18.9274 18.2242 18.5757 18.5758C18.2241 18.9275 17.7472 19.125 17.2499 19.125ZM4.7499 4.125C4.66782 4.12475 4.5865 4.14068 4.51058 4.17186C4.43466 4.20304 4.36562 4.24887 4.30741 4.30673C4.2492 4.36459 4.20295 4.43336 4.17132 4.50909C4.13968 4.58483 4.12327 4.66605 4.12303 4.74813C4.12303 4.76563 4.12365 4.78292 4.1249 4.8C4.4124 8.5 6.25615 17.25 17.2124 17.875C17.3778 17.8849 17.5404 17.8287 17.6644 17.7188C17.7884 17.6088 17.8637 17.4542 17.8736 17.2887L17.8749 17.25V13.95L15.5187 13.0062L13.7249 14.7875L13.4249 14.75C7.9874 14.0688 7.2499 8.63125 7.2499 8.575L7.2124 8.275L8.9874 6.48125L8.0499 4.125H4.7499Z" fill="#DA3635"/>
+</svg>