From a38b929207e0543857867efa355c7c014e96a99e Mon Sep 17 00:00:00 2001
From: Etienne LOUPIAS <eloupias@grandlyon.com>
Date: Mon, 7 Feb 2022 15:51:35 +0100
Subject: [PATCH 01/27] feat(nginx): new conf for PWA handling

---
 nginx/dev.conf   |  3 +--
 ngsw-config.json | 10 ++++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/nginx/dev.conf b/nginx/dev.conf
index d99a0f6f5..ea0c2185e 100644
--- a/nginx/dev.conf
+++ b/nginx/dev.conf
@@ -48,8 +48,7 @@ server {
   }
 
   location /api {
-    rewrite ^/api/(.*) /$1 break;
-    proxy_pass http://service-ram:3000/api;
+    proxy_pass http://service-ram:3000;
   }
 
   location /base-adresse/base-adresse-nationale/streets {
diff --git a/ngsw-config.json b/ngsw-config.json
index e5b82fb2a..100ac9f30 100644
--- a/ngsw-config.json
+++ b/ngsw-config.json
@@ -28,6 +28,16 @@
         "maxAge": "12h",
         "timeout": "5s"
       }
+    },
+    {
+      "name": "api",
+      "urls": ["/api/**"],
+      "cacheConfig": {
+        "strategy": "freshness",
+        "maxSize": 10000,
+        "maxAge": "12h",
+        "timeout": "5s"
+      }
     }
   ]
 }
-- 
GitLab


From b4c323c464ef361b0568af56d550c8a4953be2e1 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Mon, 7 Feb 2022 16:16:54 +0100
Subject: [PATCH 02/27] fix(news): change updated date display to created date

---
 .../post/components/post-details/post-details.component.html    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/post/components/post-details/post-details.component.html b/src/app/post/components/post-details/post-details.component.html
index 8877f2920..77ad01ad1 100644
--- a/src/app/post/components/post-details/post-details.component.html
+++ b/src/app/post/components/post-details/post-details.component.html
@@ -21,7 +21,7 @@
       <div fxLayout="column" class="informations">
         <div>{{ post.author }}</div>
         <div>
-          {{ post.updated_at | date: 'dd MMM y' }}
+          {{ post.created_at | date: 'dd MMM y' }}
         </div>
       </div>
     </div>
-- 
GitLab


From 6d2ada7c02b4c1efdb83c0f2e2770a385f4856a2 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Mon, 7 Feb 2022 17:57:29 +0100
Subject: [PATCH 03/27] fix(news): created date in post list

---
 src/app/post/components/post-card/post-card.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/post/components/post-card/post-card.component.html b/src/app/post/components/post-card/post-card.component.html
index 22ebc401e..67b2a52c3 100644
--- a/src/app/post/components/post-card/post-card.component.html
+++ b/src/app/post/components/post-card/post-card.component.html
@@ -30,7 +30,7 @@
     <div fxLayout="column" class="informations">
       <div>{{ post.author }}</div>
       <div>
-        {{ post.updated_at | date: 'd MMM y' }}
+        {{ post.created_at | date: 'd MMM y' }}
       </div>
     </div>
   </div>
-- 
GitLab


From 51ffbb429cbf546c44765cf7f80e37e2dae48d0c Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Mon, 7 Feb 2022 18:13:28 +0100
Subject: [PATCH 04/27] fix(admin): broken link in structure was making admin
 panel crash

---
 .../administred-structures.component.html                       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/admin/components/manage-users/administred-structures/administred-structures.component.html b/src/app/admin/components/manage-users/administred-structures/administred-structures.component.html
index 5943c0250..1755b8225 100644
--- a/src/app/admin/components/manage-users/administred-structures/administred-structures.component.html
+++ b/src/app/admin/components/manage-users/administred-structures/administred-structures.component.html
@@ -1,5 +1,5 @@
 <div id="structure-list" *ngIf="structures.data.structures && structures.data.structures.length != 0">
   <p *ngFor="let structure of structures.data.structures">
-    <a href="/acteurs?id={{ structure._id }}" target="_blank">{{ structure.structureName }}</a>
+    <a *ngIf="structure" href="/acteurs?id={{ structure._id }}" target="_blank">{{ structure.structureName }}</a>
   </p>
 </div>
-- 
GitLab


From cc3c16c34682f8baaed15caaf8ba70a91ecf4024 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Wed, 9 Feb 2022 07:56:11 +0000
Subject: [PATCH 05/27] feat(carto): put selected and hover marker on top of
 the others

---
 src/app/map/components/map.component.scss | 6 ++++++
 src/app/map/services/marker.ts            | 4 ++--
 src/assets/scss/_z-index.scss             | 1 +
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
index 2da18137b..a78caaa5c 100644
--- a/src/app/map/components/map.component.scss
+++ b/src/app/map/components/map.component.scss
@@ -5,6 +5,7 @@
 @import '../../../assets/scss/shapes';
 @import '../../../assets/scss/buttons';
 @import '../../../assets/scss/breakpoint';
+@import '../../../assets/scss/z-index';
 
 .map-wrapper {
   border-radius: 6px;
@@ -86,6 +87,7 @@
     }
   }
   &:hover {
+    z-index: calc($map-selected-marker - 1) !important;
     svg {
       fill: $blue-hover;
       &.mdm {
@@ -160,3 +162,7 @@
 .body-wrap {
   height: 400px;
 }
+
+::ng-deep .on-top-marker {
+  z-index: $map-selected-marker !important;
+}
diff --git a/src/app/map/services/marker.ts b/src/app/map/services/marker.ts
index b33008e4e..fb940ba4c 100644
--- a/src/app/map/services/marker.ts
+++ b/src/app/map/services/marker.ts
@@ -8,14 +8,14 @@ export const markerIcon = divIcon({
   popupAnchor: [0, -48],
 });
 export const markerIconActive = divIcon({
-  className: null,
+  className: 'on-top-marker',
   html: '<svg width="48" height="48"><use xlink:href="assets/ico/sprite.svg#map-markerSelected"></use></svg>',
   iconSize: [48, 48],
   iconAnchor: [24, 48],
   popupAnchor: [0, -48],
 });
 export const markerIconHover = divIcon({
-  className: null,
+  className: 'on-top-marker',
   html: '<svg width="48" height="48"><use xlink:href="assets/ico/sprite.svg#map-markerHover"></use></svg>',
   iconSize: [48, 48],
   iconAnchor: [24, 48],
diff --git a/src/assets/scss/_z-index.scss b/src/assets/scss/_z-index.scss
index fc1ca81b6..956dfa77b 100644
--- a/src/assets/scss/_z-index.scss
+++ b/src/assets/scss/_z-index.scss
@@ -1,3 +1,4 @@
+$map-selected-marker: 600;
 // Phone view
 $btn-phone-switch-map-list-z-index: 1002;
 $menu-phone-z-index: 1003;
-- 
GitLab


From b9a67640b4c7aae589019ae57330d734e5ce3300 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Wed, 9 Feb 2022 10:55:07 +0000
Subject: [PATCH 06/27] feat(cicd): rework on automation. Add feature and tag
 build. Better handling of dependencie proxy

---
 .gitlab-ci.yml | 76 ++++++++++++++++++++++----------------------------
 Dockerfile     |  5 ++--
 2 files changed, 37 insertions(+), 44 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 4fce8137e..b04457137 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -3,20 +3,33 @@ stages:
   - build
   - deploy
 
+default:
+  services:
+    - name: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/docker:18.09-dind
+      alias: docker
+
+variables:
+  DOCKER_TLS_CERTDIR: ''
+  DOCKER_HOST: tcp://docker:2375/
+  DOCKER_DRIVER: overlay2
+  DEPENDENCY_PROXY: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/
+
 build_branch:
   image: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/docker:18.09
-  services:
-    - docker:18.09-dind
   stage: build
+  except:
+    - master
+    - recette
+    - dev
   script:
     - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
-    - docker build --pull -t "$CI_REGISTRY_IMAGE:$CI_COMMIT_REF_SLUG" --build-arg conf=prod .
-    - docker push "$CI_REGISTRY_IMAGE:$CI_COMMIT_REF_SLUG"
+    - docker build --pull -t "$CI_REGISTRY_IMAGE/feat:$CI_COMMIT_REF_SLUG" --build-arg conf=prod .
+    - docker push "$CI_REGISTRY_IMAGE/feat:$CI_COMMIT_REF_SLUG"
 
 build:
   image: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/docker:18.09
   services:
-    - docker:18.09-dind
+    - ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/:18.09-dind
   stage: build
   only:
     - master
@@ -26,30 +39,29 @@ build:
     - docker build --pull -t "$CI_REGISTRY_IMAGE:$CI_COMMIT_REF_SLUG" --build-arg conf=prod .
     - docker push "$CI_REGISTRY_IMAGE:$CI_COMMIT_REF_SLUG"
 
-build_dev:
+build-release:
   image: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/docker:18.09
   services:
-    - docker:18.09-dind
+    - ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/:18.09-dind
   stage: build
   only:
-    - dev
+    - tags
   script:
     - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
-    - docker build --pull -t "$CI_REGISTRY_IMAGE:dev" --build-arg conf=dev .
-    - docker push "$CI_REGISTRY_IMAGE:dev"
+    - docker build --pull -t "$CI_REGISTRY_IMAGE/tags:$CI_COMMIT_TAG" --build-arg conf=prod .
+    - docker push "$CI_REGISTRY_IMAGE/tags:$CI_COMMIT_TAG"
 
-build_json_server:
+build_dev:
   image: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/docker:18.09
   services:
-    - docker:18.09-dind
+    - ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/docker:18.09-dind
   stage: build
   only:
     - dev
   script:
     - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
-    - docker build --pull -t "$CI_REGISTRY_IMAGE:json_server"  ./api/
-    - docker push "$CI_REGISTRY_IMAGE:json_server"
-  when: manual
+    - docker build --pull -t "$CI_REGISTRY_IMAGE:dev" --build-arg conf=dev .
+    - docker push "$CI_REGISTRY_IMAGE:dev"
 
 deploy_dev:
   stage: deploy
@@ -63,19 +75,9 @@ deploy_dev:
     - docker-compose pull web-app
     - docker-compose up -d web-app
     - docker system prune -a -f
-
-deploy_mobile:
-  stage: deploy
-  tags:
-    - deploy
-  only:
-    - mobile
-  script:
-    - cd /home/mps/ram
-    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
-    - docker-compose pull web-app
-    - docker-compose up -d web-app
-    - docker system prune -a -f
+  environment:
+    name: dev
+    url: https://resin-dev.grandlyon.com
 
 deploy_rec:
   stage: deploy
@@ -89,6 +91,10 @@ deploy_rec:
     - docker-compose pull web-app-rec
     - docker-compose up -d web-app-rec
     - docker system prune -a -f
+  when: manual
+  environment:
+    name: rec
+    url: https://resin-rec.grandlyon.com
 
 # code_analysis:
 #   image: skilldlabs/sonar-scanner:3.4.0
@@ -121,17 +127,3 @@ mr:
   script:
     - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
     - docker build --pull -t "$CI_REGISTRY_IMAGE:dev" --build-arg conf=dev .
-
-# Job for auto building pwa in case of issue
-# Juste create a new branche 'pwa'
-pwa-build:
-  image: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/docker:18.09
-  services:
-    - docker:18.09-dind
-  stage: build
-  only:
-    - feat/poc-pwa
-  script:
-    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
-    - docker build --pull -t "$CI_REGISTRY_IMAGE:pwa" --build-arg conf=dev .
-    - docker push "$CI_REGISTRY_IMAGE:pwa"
diff --git a/Dockerfile b/Dockerfile
index 493f745e9..ed43a52e7 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,5 +1,6 @@
 # Stage 0, based on Node.js, to build and compile Angular
-FROM node:14.18-slim as build
+ARG DEPENDENCY_PROXY=
+FROM ${DEPENDENCY_PROXY}node:14.18-slim as build
 
 WORKDIR /app
 
@@ -24,7 +25,7 @@ ARG conf
 RUN npm run build:prod
 
 # Stage 1, based on Nginx, to have only the compiled app
-FROM nginx
+FROM ${DEPENDENCY_PROXY}nginx
 
 # copy artifact build from the 'build environment'
 RUN apt-get update
-- 
GitLab


From c15012fc12aaa9d43e27d273d75b12f77ac90e44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marl=C3=A8ne=20SIMONDANT?= <msimondant@grandlyon.com>
Date: Wed, 9 Feb 2022 14:43:35 +0000
Subject: [PATCH 07/27] Feat(searchResults): Add page descriptions

---
 src/app/carto/carto.component.ts                     |  9 ++++++++-
 src/app/contact/contact.component.ts                 | 10 +++++++++-
 .../orientation-form/orientation-form.component.ts   |  9 ++++++++-
 src/app/legal-notice/legal-notice.component.ts       | 11 +++++++----
 src/app/page/models/page.model.ts                    |  1 +
 src/app/page/page.component.ts                       | 12 +++++++++++-
 src/index.html                                       |  3 ++-
 7 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/src/app/carto/carto.component.ts b/src/app/carto/carto.component.ts
index 52857d854..3c6d3289a 100644
--- a/src/app/carto/carto.component.ts
+++ b/src/app/carto/carto.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Meta } from '@angular/platform-browser';
 const { DateTime } = require('luxon');
 import * as _ from 'lodash';
 
@@ -30,7 +31,8 @@ export class CartoComponent implements OnInit {
   constructor(
     private structureService: StructureService,
     private geoJsonService: GeojsonService,
-    private activatedRoute: ActivatedRoute
+    private activatedRoute: ActivatedRoute,
+    private meta: Meta
   ) {}
 
   ngOnInit(): void {
@@ -45,6 +47,11 @@ export class CartoComponent implements OnInit {
     if (history.state.data) {
       this.currentStructure = new Structure(history.state.data);
     }
+
+    this.meta.updateTag({
+      name: 'description',
+      content: 'Recense tous les lieux, accompagnements et ateliers de médiation numérique de la Métropole de Lyon.',
+    });
   }
 
   public getStructures(filters: Filter[]): void {
diff --git a/src/app/contact/contact.component.ts b/src/app/contact/contact.component.ts
index 367ec8eca..c2e9bfcc4 100644
--- a/src/app/contact/contact.component.ts
+++ b/src/app/contact/contact.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
+import { Meta } from '@angular/platform-browser';
 import { ContactMessage } from '../models/contact-message.model';
 import { AuthService } from '../services/auth.service';
 import { ContactService } from '../services/contact.service';
@@ -23,7 +24,8 @@ export class ContactComponent implements OnInit {
     private router: Router,
     private authService: AuthService,
     private notificationService: NotificationService,
-    public utils: Utils
+    public utils: Utils,
+    private meta: Meta
   ) {}
 
   ngOnInit(): void {
@@ -37,6 +39,12 @@ export class ContactComponent implements OnInit {
       subject: ['', Validators.required],
       message: ['', Validators.required],
     });
+
+    this.meta.updateTag({
+      name: 'description',
+      content:
+        "Formulaire pour contacter Rés'IN, le Réseau des acteurs de l'inclusion numérique de la métropole de Lyon",
+    });
   }
 
   public get isLoggedIn(): boolean {
diff --git a/src/app/form/orientation-form/orientation-form.component.ts b/src/app/form/orientation-form/orientation-form.component.ts
index a76082df7..59b8b6513 100644
--- a/src/app/form/orientation-form/orientation-form.component.ts
+++ b/src/app/form/orientation-form/orientation-form.component.ts
@@ -1,6 +1,7 @@
 import { stringify } from '@angular/compiler/src/util';
 import { Component, EventEmitter, HostListener, OnInit, Output } from '@angular/core';
 import { AbstractControl, Form, FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Meta } from '@angular/platform-browser';
 import { GeoJson } from '../../map/models/geojson.model';
 import { Address } from '../../models/address.model';
 import { OrientationFormFilters } from '../../models/orientation-filter.object';
@@ -79,13 +80,19 @@ export class OrientationFormComponent implements OnInit {
     private routerListener: RouterListenerService,
     private searchService: SearchService,
     private structureService: StructureService,
-    private geoJsonService: GeojsonService
+    private geoJsonService: GeojsonService,
+    private meta: Meta
   ) {}
 
   ngOnInit(): void {
     this.orientationForm = this.createOrientationForm(new OrientationFormFilters());
     this.setValidationsForm();
     this.setCategories();
+    this.meta.updateTag({
+      name: 'description',
+      content:
+        "Permet aux professionnels d'être aidés dans l'accompagnement d'un usager en fragilité numérique pour trouver une réponse adaptée.",
+    });
   }
 
   private async setCategories(): Promise<void> {
diff --git a/src/app/legal-notice/legal-notice.component.ts b/src/app/legal-notice/legal-notice.component.ts
index 8e018f4ab..e211a7642 100644
--- a/src/app/legal-notice/legal-notice.component.ts
+++ b/src/app/legal-notice/legal-notice.component.ts
@@ -1,15 +1,18 @@
 import { Component, OnInit } from '@angular/core';
+import { Meta } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-legal-notice',
   templateUrl: './legal-notice.component.html',
-  styleUrls: ['./legal-notice.component.scss']
+  styleUrls: ['./legal-notice.component.scss'],
 })
 export class LegalNoticeComponent implements OnInit {
-
-  constructor() { }
+  constructor(private meta: Meta) {}
 
   ngOnInit(): void {
+    this.meta.updateTag({
+      name: 'description',
+      content: "Mentions légales de Rés'IN, le Réseau des acteurs de l'inclusion numérique de la métropole de Lyon",
+    });
   }
-
 }
diff --git a/src/app/page/models/page.model.ts b/src/app/page/models/page.model.ts
index 3ee682538..ce9655c60 100644
--- a/src/app/page/models/page.model.ts
+++ b/src/app/page/models/page.model.ts
@@ -10,6 +10,7 @@ export class Page {
   feature_image: string;
   html: string;
   safeHtml: SafeHtml;
+  meta_description: string;
 
   constructor(obj?: any) {
     Object.assign(this, obj);
diff --git a/src/app/page/page.component.ts b/src/app/page/page.component.ts
index 7f29dce26..3915c1523 100644
--- a/src/app/page/page.component.ts
+++ b/src/app/page/page.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { DomSanitizer } from '@angular/platform-browser';
+import { Meta } from '@angular/platform-browser';
 import packageJson from '../../../package.json';
 import { Page } from './models/page.model';
 import { PageService } from './services/page.service';
@@ -17,7 +18,12 @@ export class PageComponent implements OnInit {
   private slugPage: string;
   private quiSommesNous = PageEnum.quiSommesNous;
 
-  constructor(private sanitizer: DomSanitizer, private route: ActivatedRoute, private pageService: PageService) {}
+  constructor(
+    private sanitizer: DomSanitizer,
+    private route: ActivatedRoute,
+    private pageService: PageService,
+    private meta: Meta
+  ) {}
 
   ngOnInit(): void {
     this.route.params.subscribe((routeParams) => {
@@ -25,6 +31,10 @@ export class PageComponent implements OnInit {
       this.pageService.getPage(this.slugPage).subscribe((page) => {
         this.page = page.pages[0];
         this.page.safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.page.html);
+        this.meta.updateTag({
+          name: 'description',
+          content: this.page.meta_description,
+        });
       });
       // Display version number in 'About' page only
       this.slugPage == this.quiSommesNous ? (this.version = packageJson.version) : (this.version = '');
diff --git a/src/index.html b/src/index.html
index 9a66f6a01..78caed151 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,10 +11,11 @@
     <meta name="title" content="Rés'In | Réseau des acteurs de l'inclusion numérique de la métropole de Lyon" />
     <meta
       name="description"
-      content="Retrouver tous les lieux de la médiation numérique de la métropole mais aussi les actualités, projets, ressources, études et appels à projet liès à l'inclusion numérique..."
+      content="Dédiée aux acteurs de l'inclusion numérique de la Métropole de Lyon, Rés'IN recense tous les lieux qui propose une offre de médiation numérique sur le territoire et vise à permettre une meilleure orientation des usagers. Actualités, appels à projets, outils et ressources en ligne sont également proposés pour faciliter l'accompagnement des personnes en fragilité numérique."
     />
     <meta name="image" content="https://resin.grandlyon.com/assets/logos/resin-logo-1024x512.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="google-site-verification" content="gam2SZSqu_MO1xoHwcvhqPCXNsXf60qxXPalwPVKfLM" />
 
     <!-- Open Graph general -->
     <meta property="og:title" content="Rés'In | Réseau des acteurs de l'inclusion numérique de la métropole de Lyon" />
-- 
GitLab


From 758b3193f1263bb31bf46d45a67b136e5fcdaa9f Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Wed, 9 Feb 2022 15:48:59 +0100
Subject: [PATCH 08/27] feat(carto): enable pop-up autopan for markers in order
 to have a better display on small screen

---
 src/app/map/services/map.service.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/app/map/services/map.service.ts b/src/app/map/services/map.service.ts
index 9db3a9ef4..93b07319c 100644
--- a/src/app/map/services/map.service.ts
+++ b/src/app/map/services/map.service.ts
@@ -35,9 +35,7 @@ export class MapService {
     });
 
     if (tooltip) {
-      marker.bindPopup(tooltip, {
-        autoPan: false,
-      });
+      marker.bindPopup(tooltip);
 
       // handle icon change when unselect
       marker.getPopup().on('remove', (evt) => {
-- 
GitLab


From 0d9f2fca8ed2ee8aca43d839f8ceb69053f7359a Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Wed, 9 Feb 2022 15:51:07 +0100
Subject: [PATCH 09/27] fix(cicd): fix deploy issue after variables adding

---
 .gitlab-ci.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index b04457137..ce1aca325 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -65,6 +65,7 @@ build_dev:
 
 deploy_dev:
   stage: deploy
+  variables: {}
   tags:
     - deploy
   only:
@@ -81,6 +82,7 @@ deploy_dev:
 
 deploy_rec:
   stage: deploy
+  variables: {}
   tags:
     - deploy
   only:
-- 
GitLab


From 74c091f0486b2f7db555b825c15189b32967e581 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Wed, 9 Feb 2022 15:55:31 +0100
Subject: [PATCH 10/27] fix(cicd): job build issue on service

---
 .gitlab-ci.yml | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index ce1aca325..af06c12f3 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -28,8 +28,6 @@ build_branch:
 
 build:
   image: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/docker:18.09
-  services:
-    - ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/:18.09-dind
   stage: build
   only:
     - master
@@ -41,8 +39,6 @@ build:
 
 build-release:
   image: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/docker:18.09
-  services:
-    - ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/:18.09-dind
   stage: build
   only:
     - tags
@@ -53,8 +49,6 @@ build-release:
 
 build_dev:
   image: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/docker:18.09
-  services:
-    - ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/docker:18.09-dind
   stage: build
   only:
     - dev
-- 
GitLab


From 2461c64b7a88dd2f6cd5f90ad530be726c5537da Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Wed, 9 Feb 2022 15:35:35 +0000
Subject: [PATCH 11/27] fix(cicd): variable usage was making deploy job fail

---
 .gitlab-ci.yml | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index af06c12f3..b40915a21 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -9,12 +9,13 @@ default:
       alias: docker
 
 variables:
-  DOCKER_TLS_CERTDIR: ''
-  DOCKER_HOST: tcp://docker:2375/
-  DOCKER_DRIVER: overlay2
   DEPENDENCY_PROXY: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/
 
 build_branch:
+  variables:
+    DOCKER_TLS_CERTDIR: ''
+    DOCKER_HOST: tcp://docker:2375/
+    DOCKER_DRIVER: overlay2
   image: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/docker:18.09
   stage: build
   except:
@@ -27,6 +28,10 @@ build_branch:
     - docker push "$CI_REGISTRY_IMAGE/feat:$CI_COMMIT_REF_SLUG"
 
 build:
+  variables:
+    DOCKER_TLS_CERTDIR: ''
+    DOCKER_HOST: tcp://docker:2375/
+    DOCKER_DRIVER: overlay2
   image: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/docker:18.09
   stage: build
   only:
@@ -38,6 +43,10 @@ build:
     - docker push "$CI_REGISTRY_IMAGE:$CI_COMMIT_REF_SLUG"
 
 build-release:
+  variables:
+    DOCKER_TLS_CERTDIR: ''
+    DOCKER_HOST: tcp://docker:2375/
+    DOCKER_DRIVER: overlay2
   image: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/docker:18.09
   stage: build
   only:
@@ -48,6 +57,10 @@ build-release:
     - docker push "$CI_REGISTRY_IMAGE/tags:$CI_COMMIT_TAG"
 
 build_dev:
+  variables:
+    DOCKER_TLS_CERTDIR: ''
+    DOCKER_HOST: tcp://docker:2375/
+    DOCKER_DRIVER: overlay2
   image: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/docker:18.09
   stage: build
   only:
@@ -59,7 +72,6 @@ build_dev:
 
 deploy_dev:
   stage: deploy
-  variables: {}
   tags:
     - deploy
   only:
@@ -76,7 +88,6 @@ deploy_dev:
 
 deploy_rec:
   stage: deploy
-  variables: {}
   tags:
     - deploy
   only:
@@ -114,9 +125,11 @@ deploy_rec:
 #       -Dsonar.login=${SONAR_TOKEN}
 
 mr:
+  variables:
+    DOCKER_TLS_CERTDIR: ''
+    DOCKER_HOST: tcp://docker:2375/
+    DOCKER_DRIVER: overlay2
   image: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/docker:18.09
-  services:
-    - docker:18.09-dind
   stage: build
   only:
     - merge_requests
-- 
GitLab


From 020c192182d3d275ecfecd27cdc59bdabe1e0387 Mon Sep 17 00:00:00 2001
From: Etienne LOUPIAS <eloupias@grandlyon.com>
Date: Thu, 10 Feb 2022 15:04:28 +0100
Subject: [PATCH 12/27] feat(post): display attachment in post

---
 src/assets/scss/_ghost.scss | 68 +++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)

diff --git a/src/assets/scss/_ghost.scss b/src/assets/scss/_ghost.scss
index 15de6a5c2..548ed6c46 100644
--- a/src/assets/scss/_ghost.scss
+++ b/src/assets/scss/_ghost.scss
@@ -85,6 +85,74 @@ $margin-post: 20px;
       margin-right: auto;
     }
   }
+  ::ng-deep .kg-file-card {
+    margin-top: 6vmin;
+    ::ng-deep .kg-file-card-container {
+      display: flex;
+      justify-content: space-between;
+      color: inherit;
+      padding: 6px;
+      border: 1px solid rgb(124 139 154/25%);
+      border-radius: 3px;
+      text-decoration: none;
+      ::ng-deep .kg-file-card-contents {
+        margin: 4px 8px;
+        ::ng-deep .kg-file-card-title + .kg-file-card-caption {
+          margin-top: -3px;
+        }
+        ::ng-deep .kg-file-card-title {
+          font-size: 1.15em;
+          line-height: 1.3em;
+        }
+        ::ng-deep .kg-file-card-caption,
+        .kg-file-card-filesize {
+          font-weight: normal;
+          font-size: 0.95em;
+          opacity: 0.6;
+        }
+        ::ng-deep .kg-file-card-filesize {
+          display: inline-block;
+        }
+        ::ng-deep .kg-file-card-metadata {
+          font-size: 0.825em;
+          margin-top: 4px;
+          ::ng-deep .kg-file-card-filename {
+            display: inline;
+            font-weight: 500;
+          }
+          ::ng-deep .kg-file-card-filesize:before {
+            display: inline-block;
+            content: '\2022';
+            margin-right: 4px;
+          }
+        }
+      }
+      ::ng-deep .kg-file-card-icon {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 80px;
+      }
+      ::ng-deep .kg-file-card-icon:before {
+        position: absolute;
+        display: block;
+        content: '';
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: currentColor;
+        opacity: 0.06;
+        border-radius: 2px;
+      }
+      ::ng-deep .kg-file-card-icon svg {
+        width: 24px;
+        height: 24px;
+        color: $red;
+      }
+    }
+  }
   ::ng-deep .kg-bookmark-card {
     margin-top: 30px;
     font: inherit;
-- 
GitLab


From 1761f7412c9b2645925a6ed925a585fdae8326f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marl=C3=A8ne=20SIMONDANT?= <msimondant@grandlyon.com>
Date: Thu, 10 Feb 2022 17:39:37 +0000
Subject: [PATCH 13/27] feat(previewImages): Manage post preview image
 independantly from post details images

---
 .../components/post-details/post-details.component.html   | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/app/post/components/post-details/post-details.component.html b/src/app/post/components/post-details/post-details.component.html
index 77ad01ad1..685c3b626 100644
--- a/src/app/post/components/post-details/post-details.component.html
+++ b/src/app/post/components/post-details/post-details.component.html
@@ -15,9 +15,7 @@
       <div *ngIf="!post.tags[0]" fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px">
         <span>Infos</span>
       </div>
-      <div fxLayout="row" class="title">
-        {{ post.title }}
-      </div>
+      <div fxLayout="row" class="title">{{ post.title }}</div>
       <div fxLayout="column" class="informations">
         <div>{{ post.author }}</div>
         <div>
@@ -25,10 +23,6 @@
         </div>
       </div>
     </div>
-
-    <div fxLayout="row" class="article-image" *ngIf="post.feature_image">
-      <img class="image" alt="image about the news" [src]="post.feature_image" />
-    </div>
     <div fxLayout="row" class="description">
       <div [innerHtml]="post.safeHtml"></div>
     </div>
-- 
GitLab


From 055e9cbe0db90f9409192d7d03b6363ee0f9a2a3 Mon Sep 17 00:00:00 2001
From: Marlene Simondant <msimondant@grandlyon.com>
Date: Fri, 11 Feb 2022 10:32:03 +0100
Subject: [PATCH 14/27] fix(posts): remove image width forced to 100% in post
 details

---
 src/app/post/components/post-details/post-details.component.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/post/components/post-details/post-details.component.scss b/src/app/post/components/post-details/post-details.component.scss
index 71b1f8516..b2d99bb65 100644
--- a/src/app/post/components/post-details/post-details.component.scss
+++ b/src/app/post/components/post-details/post-details.component.scss
@@ -30,7 +30,6 @@
 
 .description {
   ::ng-deep img {
-    width: 100%;
     height: 100%;
   }
   ::ng-deep figure {
-- 
GitLab


From ed857c5ca45086ac30a4f1977ac5ae524b15161a Mon Sep 17 00:00:00 2001
From: Marlene Simondant <msimondant@grandlyon.com>
Date: Tue, 15 Feb 2022 13:38:38 +0100
Subject: [PATCH 15/27] feat(reset-password): add notification when reset email
 is sent

---
 src/app/reset-password/reset-password.component.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/app/reset-password/reset-password.component.ts b/src/app/reset-password/reset-password.component.ts
index 627cff9ba..4744261e9 100644
--- a/src/app/reset-password/reset-password.component.ts
+++ b/src/app/reset-password/reset-password.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AuthService } from '../services/auth.service';
+import { NotificationService } from '../services/notification.service';
 
 @Component({
   selector: 'app-reset-password',
@@ -21,7 +22,8 @@ export class ResetPasswordComponent implements OnInit {
     private formBuilder: FormBuilder,
     private authService: AuthService,
     private router: Router,
-    private activatedRoute: ActivatedRoute
+    private activatedRoute: ActivatedRoute,
+    private notificationService: NotificationService
   ) {}
 
   ngOnInit(): void {
@@ -50,6 +52,10 @@ export class ResetPasswordComponent implements OnInit {
     this.loading = true;
     this.authService.resetPassword(this.f.email.value).subscribe(
       () => {
+        this.notificationService.showSuccess(
+          'Un mail de confirmation de modification de votre mot de passe vous a été envoyé.',
+          ''
+        );
         this.router.navigate(['']);
       },
       () => {
-- 
GitLab


From c889c571ff5ad10ac79ecd71ea397a725b7d157a Mon Sep 17 00:00:00 2001
From: Augustin LECONTE <["ext.sopra.aleconte@grandlyon.com"]>
Date: Thu, 17 Feb 2022 16:50:17 +0000
Subject: [PATCH 16/27] feat/US51-beneficiary-orientation

---
 package-lock.json                             | 140 +++++
 src/app/carto/carto.component.scss            |   2 +-
 .../footer-form/footer-form.component.html    |   2 +-
 .../footer-form/footer-form.component.scss    |   5 +-
 .../form/footer-form/footer-form.component.ts |   7 +-
 .../structure-detail-print.component.html     |  79 +--
 .../structure-detail-print.component.scss     |  14 +-
 .../structure-print-header.component.html     | 126 ++---
 .../structure-print-header.component.scss     |  49 +-
 .../structure-print-header.component.ts       |   3 +-
 .../orientation-form.component.html           | 485 ++++++++----------
 .../orientation-form.component.scss           | 286 ++++++++---
 .../orientation-form.component.ts             | 134 +++--
 .../form/orientation-form/pageType.enum.ts    |   4 +-
 .../form/structure-form/form.component.scss   |  15 +-
 src/app/form/structure-form/form.component.ts |   1 +
 src/app/header/header.component.html          |   8 +-
 src/app/map/components/layers.enum.ts         |   5 +
 src/app/map/components/map.component.html     |   9 +-
 src/app/map/components/map.component.scss     |  23 +-
 src/app/map/components/map.component.ts       |  58 ++-
 src/app/map/components/markerType.enum.ts     |   1 +
 src/app/map/components/zoomLevel.enum.ts      |   6 +
 src/app/map/services/map.service.ts           |  72 +--
 src/app/map/services/marker.ts                |   6 +
 src/app/models/address.model.ts               |   1 +
 src/app/models/orientation-filter.object.ts   |   3 +-
 .../newsletter-subscription.component.scss    |   2 +-
 .../address-autocomplete.component.ts         |   1 +
 .../svg-icon/svg-icon.component.scss          |   4 +
 .../components/card/card.component.html       |  87 ++--
 .../components/card/card.component.scss       |  41 +-
 .../structure-details.component.scss          |   8 +-
 .../structure-details.component.ts            |  19 -
 .../structure-list/models/category.model.ts   |   1 +
 src/app/structure-list/models/filter.model.ts |   2 +
 .../structure-list.component.html             |   1 +
 .../structure-list.component.scss             |   5 +
 src/app/utils/utils.ts                        |  11 +
 src/assets/form/sprite.svg                    |  30 ++
 src/assets/ico/sprite.svg                     |   7 +
 src/assets/logos/grandLyonLaMetropole.svg     |  29 ++
 src/assets/scss/_color.scss                   |   2 +
 src/assets/scss/_icons.scss                   | 124 ++++-
 44 files changed, 1222 insertions(+), 696 deletions(-)
 create mode 100644 src/app/map/components/layers.enum.ts
 create mode 100644 src/app/map/components/zoomLevel.enum.ts
 create mode 100644 src/assets/logos/grandLyonLaMetropole.svg

diff --git a/package-lock.json b/package-lock.json
index 820b6fdb1..4423b9a74 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9878,6 +9878,12 @@
         "vary": "^1"
       }
     },
+    "corser": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
+      "integrity": "sha1-jtolLsqrWEDc2XXOuQ2TcMgZ/4c=",
+      "dev": true
+    },
     "cosmiconfig": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
@@ -12074,6 +12080,12 @@
       "integrity": "sha512-7kIufnBqdsBGcSZLPJwqHT3yhk1QTsSlFsVD3kx5ixH/AlgBs9yM1q6DPhXZ8f8gtdqgh7N7/5btRLpQsS2gHw==",
       "dev": true
     },
+    "he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true
+    },
     "hosted-git-info": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.0.2.tgz",
@@ -12095,6 +12107,15 @@
         "wbuf": "^1.1.0"
       }
     },
+    "html-encoding-sniffer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+      "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+      "dev": true,
+      "requires": {
+        "whatwg-encoding": "^2.0.0"
+      }
+    },
     "html-entities": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz",
@@ -12257,6 +12278,78 @@
         }
       }
     },
+    "http-server": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.0.tgz",
+      "integrity": "sha512-5lYsIcZtf6pdR8tCtzAHTWrAveo4liUlJdWc7YafwK/maPgYHs+VNP6KpCClmUnSorJrARVMXqtT055zBv11Yg==",
+      "dev": true,
+      "requires": {
+        "basic-auth": "^2.0.1",
+        "chalk": "^4.1.2",
+        "corser": "^2.0.1",
+        "he": "^1.2.0",
+        "html-encoding-sniffer": "^3.0.0",
+        "http-proxy": "^1.18.1",
+        "mime": "^1.6.0",
+        "minimist": "^1.2.5",
+        "opener": "^1.5.1",
+        "portfinder": "^1.0.28",
+        "secure-compare": "3.0.1",
+        "union": "~0.5.0",
+        "url-join": "^4.0.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "http-signature": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
@@ -14746,6 +14839,12 @@
       "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==",
       "dev": true
     },
+    "opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "dev": true
+    },
     "optionator": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
@@ -16694,6 +16793,12 @@
         "get-assigned-identifiers": "^1.1.0"
       }
     },
+    "secure-compare": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
+      "integrity": "sha1-8aAymzCLIh+uN7mXTz1XjQypmeM=",
+      "dev": true
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -18196,6 +18301,15 @@
         }
       }
     },
+    "union": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
+      "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==",
+      "dev": true,
+      "requires": {
+        "qs": "^6.4.0"
+      }
+    },
     "unique-filename": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
@@ -18316,6 +18430,12 @@
         "punycode": "^2.1.0"
       }
     },
+    "url-join": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
+      "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==",
+      "dev": true
+    },
     "url-parse-lax": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
@@ -18733,6 +18853,26 @@
       "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
       "dev": true
     },
+    "whatwg-encoding": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+      "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+      "dev": true,
+      "requires": {
+        "iconv-lite": "0.6.3"
+      },
+      "dependencies": {
+        "iconv-lite": {
+          "version": "0.6.3",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+          "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+          "dev": true,
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3.0.0"
+          }
+        }
+      }
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
diff --git a/src/app/carto/carto.component.scss b/src/app/carto/carto.component.scss
index eb5f97b21..3fcf8948f 100644
--- a/src/app/carto/carto.component.scss
+++ b/src/app/carto/carto.component.scss
@@ -29,7 +29,7 @@
   height: calc(100vh - #{$header-height} - #{$footer-height});
   @media #{$tablet} {
     padding: 0;
-    height: 100%;
+    height: calc(100vh - #{$header-height});
   }
 }
 .btnSwitch {
diff --git a/src/app/form/footer-form/footer-form.component.html b/src/app/form/footer-form/footer-form.component.html
index 6157b4a2c..84e1517f2 100644
--- a/src/app/form/footer-form/footer-form.component.html
+++ b/src/app/form/footer-form/footer-form.component.html
@@ -1,5 +1,5 @@
 <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center">
-  <button class="btn-primary small previous" (click)="goToPreviousPage()">
+  <button *ngIf="displayPreviousButton" class="btn-primary small previous" (click)="goToPreviousPage()">
     <div class="rowBtn" fxLayout="row" fxLayoutAlign="center center">
       <svg class="chevronLeft" aria-hidden="true">
         <use [attr.xlink:href]="'assets/form/sprite.svg#chevronLeft'"></use>
diff --git a/src/app/form/footer-form/footer-form.component.scss b/src/app/form/footer-form/footer-form.component.scss
index 6ebf95c44..61ae2b385 100644
--- a/src/app/form/footer-form/footer-form.component.scss
+++ b/src/app/form/footer-form/footer-form.component.scss
@@ -3,8 +3,9 @@
 
 .btn-primary {
   &.previous {
-    background-color: initial;
+    background-color: $white;
     color: $grey-2;
+    border: solid $grey-4 1px;
   }
   &.next {
     .rowBtn {
@@ -25,6 +26,6 @@
 .chevronRight {
   height: 24px;
   width: 24px;
-  stroke: inherit;
+  // stroke: inherit;
   margin-left: 10px;
 }
diff --git a/src/app/form/footer-form/footer-form.component.ts b/src/app/form/footer-form/footer-form.component.ts
index 15a5456ff..12736e3ac 100644
--- a/src/app/form/footer-form/footer-form.component.ts
+++ b/src/app/form/footer-form/footer-form.component.ts
@@ -5,18 +5,17 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
   templateUrl: './footer-form.component.html',
   styleUrls: ['./footer-form.component.scss'],
 })
-export class FooterFormComponent implements OnInit {
+export class FooterFormComponent {
   @Input() isValid: boolean;
   @Input() btnName: string[];
+  @Input() displayPreviousButton: boolean = true;
   @Output() nextPage = new EventEmitter<any>();
   @Output() previousPage = new EventEmitter<any>();
-  constructor() {}
-
-  ngOnInit(): void {}
 
   public goToNextPage(): void {
     this.nextPage.emit();
   }
+
   public goToPreviousPage(): void {
     this.previousPage.emit();
   }
diff --git a/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.html b/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.html
index b6e592955..7d7ed3c9e 100644
--- a/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.html
+++ b/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.html
@@ -3,12 +3,7 @@
   <div fxLayout="row" class="structure-details-block" fxLayoutAlign="baseline baseline" fxLayoutGap="8px">
     <div fxLayout="column" fxLayoutGap="10px" fxFlex="100%">
       <div fxLayout="column" class="no-margin" fxLayoutAlign="space-between start">
-        <h2 class="bold">{{ structure.structureName }}</h2>
-      </div>
-      <div fxLayout="row" fxLayoutAlign="space-between center">
-        <div class="typeInformationHeader" fxLayout="column">
-          <h3>{{ structure.getLabelTypeStructure() }}</h3>
-        </div>
+        <h3 class="bold">{{ structure.structureName }}</h3>
       </div>
       <div class="mobile-column">
         <div fxLayout="column" fxFlex="50%">
@@ -16,63 +11,10 @@
             <app-svg-icon [type]="'ico'" [icon]="'adress'" [title]="'Adresse'"></app-svg-icon>
             <p>{{ structure.address.numero }} {{ structure.address.street }}, {{ structure.address.commune }}</p>
           </div>
-          <div *ngIf="structure.website" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
-            <app-svg-icon [type]="'ico'" [icon]="'web'" [title]="'Site web'"></app-svg-icon>
-            <a
-              target="_blank"
-              class="custom-link"
-              rel="noopener noreferrer"
-              [href]="structure.website.includes('http') ? structure.website : 'http://' + structure.website"
-              >{{ structure.website | url }}</a
-            >
-          </div>
-          <div *ngIf="structure.hasSocialNetwork()" fxLayout="row" fxLayoutAlign="none baseline" fxLayoutGap="13px">
-            <app-svg-icon [type]="'ico'" [icon]="'network'"></app-svg-icon>
-            <div fxLayout="row" fxLayoutAlign="none baseline" fxLayoutGap="8px">
-              <a
-                *ngIf="structure.facebook"
-                target="_blank"
-                class="custom-link"
-                rel="noopener noreferrer"
-                [href]="'http://' + structure.facebook"
-              >
-                <app-svg-icon [type]="'ico'" [icon]="'facebook'" [title]="'Facebook'"></app-svg-icon
-              ></a>
-              <a
-                *ngIf="structure.twitter"
-                target="_blank"
-                class="custom-link"
-                rel="noopener noreferrer"
-                [href]="'http://' + structure.twitter"
-              >
-                <app-svg-icon [type]="'ico'" [icon]="'twitter'" [title]="'Twitter'"></app-svg-icon
-              ></a>
-              <a
-                *ngIf="structure.instagram"
-                target="_blank"
-                class="custom-link"
-                rel="noopener noreferrer"
-                [href]="'http://' + structure.instagram"
-              >
-                <app-svg-icon [type]="'ico'" [icon]="'instagram'" [title]="'Instagram'"></app-svg-icon
-              ></a>
-              <a
-                *ngIf="structure.linkedin"
-                target="_blank"
-                class="custom-link"
-                rel="noopener noreferrer"
-                [href]="'http://' + structure.linkedin"
-              >
-                <app-svg-icon [type]="'ico'" [icon]="'linkedin'" [title]="'Linkedin'"></app-svg-icon
-              ></a>
-            </div>
-          </div>
           <div *ngIf="structure.contactPhone" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
             <app-svg-icon [type]="'ico'" [icon]="'tel'" [title]="'Téléphone'"></app-svg-icon>
             <p>{{ structure.contactPhone | phone }}</p>
           </div>
-        </div>
-        <div fxLayout="column" fxFlex="50%">
           <div
             *ngIf="structure.contactMail && structure.contactMail !== 'unknown@unknown.com'"
             fxLayout="row"
@@ -82,23 +24,8 @@
             <app-svg-icon [type]="'ico'" [iconClass]="'grey-1'" [icon]="'email'" [title]="'Email'"></app-svg-icon>
             <p>{{ structure.contactMail }}</p>
           </div>
-          <div *ngIf="structure.hasPassNumeric()" fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
-            <app-svg-icon [type]="'ico'" [icon]="'pass'" [title]="'Pass numérique'"></app-svg-icon>
-            <p>agréé Pass Numérique</p>
-          </div>
-          <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
-            <app-svg-icon [type]="'ico'" [icon]="'calendar'"></app-svg-icon>
-            <p>Mise à jour le {{ structure.updatedAt | date: 'mediumDate' }}</p>
-          </div>
         </div>
       </div>
-
-      <div>
-        {{ structure.description }}
-      </div>
-      <div class="info">
-        {{ structure.lockdownActivity }}
-      </div>
     </div>
   </div>
   <!-- Accueil -->
@@ -119,7 +46,9 @@
               <h4>{{ day.key | day }}</h4>
               <div class="opening-time" fxLayout="row" fxLayoutAlign="none flex-end">
                 <div *ngFor="let timeRange of day.value.time; let isFirst = first">
-                  <p *ngIf="isFirst && timeRange.opening">de {{ timeRange.formatOpeningDate() }} à {{ timeRange.formatClosingDate() }}</p>
+                  <p *ngIf="isFirst && timeRange.opening">
+                    de {{ timeRange.formatOpeningDate() }} à {{ timeRange.formatClosingDate() }}
+                  </p>
                   <p *ngIf="!isFirst && timeRange.opening">
                     et de {{ timeRange.formatOpeningDate() }} à {{ timeRange.formatClosingDate() }}
                   </p>
diff --git a/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss b/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss
index 8e3d713f5..155566070 100644
--- a/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss
+++ b/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss
@@ -10,15 +10,10 @@ a {
 }
 
 .structrue-details-container {
-  border-right: solid 1px $grey-4;
-  page-break-after: always;
-  background-color: $white;
-  top: 0;
-  left: 0;
   max-width: 980px;
-  width: 100%;
-  margin-bottom: 50px;
-  padding: 10px 24px;
+  width: 64%;
+  margin-top: 1%;
+  float: right;
   @media #{$tablet} {
     width: calc(100% - 2 * 24px);
     position: inherit;
@@ -34,7 +29,6 @@ a {
 
 .structrue-details-container > .structure-details-block {
   padding: 0px 0px 24px 0;
-  border-bottom: 1px dashed $grey-2;
   .subtitle {
     text-transform: uppercase;
     @include cn-bold-16;
@@ -132,7 +126,7 @@ p,
   height: 25px;
   border-radius: 20px;
   padding: 5px 15px;
-  color: white;
+  color: $white;
   border-style: none;
   margin-top: 15px;
   background: #348899;
diff --git a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.html b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.html
index b1c83faf2..616b544b1 100644
--- a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.html
+++ b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.html
@@ -1,67 +1,77 @@
 <div class="print-header" fxLayout="column">
-  <div class="header-print" fxLayout="row" fxLayoutAlign="space-between center">
-    <h3>Fiche d'orientation</h3>
-    <h4 class="typeInformationHeader">{{ date }}</h4>
-  </div>
-
-  <!-- Name -->
-  <div *ngIf="beneficiaryName">
-    <p class="bold">{{ beneficiaryName }}</p>
-  </div>
-
-  <!-- Accompaniment -->
-  <div *ngIf="structureAccompaniment">
-    <div class="typeInformationHeader">Orienté par</div>
-    <div class="contactAccompaniment" fxLayout="row" fxLayoutAlign="space-between center">
-      <div class="bold">{{ structureAccompaniment }}</div>
-      <!-- Contact -->
-      <div class="bold" *ngIf="contactAccompaniment">{{ contactAccompaniment }}</div>
-    </div>
-  </div>
-
-  <!-- Needs -->
-  <div *ngIf="equipments.length > 0">
-    <p class="typeInformationHeader">Besoins en matériel</p>
-    <div fxLayout="row wrap" fxLayoutGap="16px">
-      <div *ngFor="let equipmentTag of equipments" class="tags-cloud" fxLayout="row">
-        {{ equipmentTag.text ? equipmentTag.text : equipmentTag.value }}
+  <div class="header-print">
+    <div class="header-infos">
+      <svg aria-hidden="true" aria-hidden="true">
+        <use [attr.xlink:href]="'assets/form/sprite.svg#grandLyonLaMetropole'"></use>
+      </svg>
+      <div class="header-title">
+        <div>RES’IN : Réseau des acteurs de l'inclusion numérique de la Métropole de Lyon</div>
+        <h3>Fiche d'orientation</h3>
       </div>
     </div>
+    <p class="typeInformationHeader date">{{ date }}</p>
   </div>
-  <div *ngIf="formations.length > 0">
-    <p class="typeInformationHeader">Besoins en formation</p>
-    <div fxLayout="row wrap" fxLayoutGap="16px">
-      <div *ngFor="let formationTag of formations" class="tags-cloud" fxLayout="row">
-        {{ formationTag.text ? formationTag.text : formationTag.value }}
-      </div>
-    </div>
-  </div>
-  <div *ngIf="assistances.length > 0">
-    <p class="typeInformationHeader">Besoins d'accompagnement</p>
-    <div fxLayout="row wrap" fxLayoutGap="16px">
-      <div *ngFor="let assistanceTag of assistances" class="tags-cloud" fxLayout="row">
-        {{ assistanceTag.text ? assistanceTag.text : assistanceTag.value }}
+
+  <div class="informations">
+    <div class="helper">
+      <!-- Accompaniment -->
+      <div *ngIf="structureAccompaniment">
+        <div class="typeInformationHeader">{{ 'Orienté par' | uppercase }}</div>
+        <p class="bold">{{ structureAccompaniment }}</p>
+        <!-- Contact -->
+        <p class="bold" *ngIf="contactAccompaniment">{{ contactAccompaniment }}</p>
+        <p class="bold" *ngIf="contactAccompanimentPhone">{{ contactAccompanimentPhone }}</p>
       </div>
     </div>
-  </div>
-  <div *ngIf="specificNeeds.length > 0">
-    <div class="typeInformationHeader">Besoins spécifiques'</div>
-    <div fxLayout="row wrap" fxLayoutGap="16px">
-      <div *ngFor="let specificNeed of specificNeeds" class="tags-cloud" fxLayout="row">
-        {{ specificNeed.text ? specificNeed.text : specificNeed.value }}
-      </div>
+    <div class="beneficiary">
+      <div class="typeInformationHeader">{{ 'Bénéficiaire' | uppercase }}</div>
+      <!-- Name -->
+      <table>
+        <tr>
+          <td class="typeInformationHeader">Nom</td>
+          <td class="bold">{{ beneficiaryName }}</td>
+        </tr>
+        <tr *ngIf="equipments.length > 0">
+          <td class="typeInformationHeader">Besoin(s) en matériel</td>
+          <td class="bold">
+            <div *ngFor="let equipmentTag of equipments">
+              {{ equipmentTag.text ? equipmentTag.text : equipmentTag.value }}
+            </div>
+          </td>
+        </tr>
+        <tr *ngIf="formations.length > 0">
+          <td class="typeInformationHeader">Besoin(s) en formation</td>
+          <td class="bold">
+            <div *ngFor="let formationTag of formations">
+              {{ formationTag.text ? formationTag.text : formationTag.value }}
+            </div>
+          </td>
+        </tr>
+        <tr *ngIf="assistances.length > 0">
+          <td class="typeInformationHeader">Besoin(s) d'accompagnement</td>
+          <td class="bold">
+            <div *ngFor="let assistanceTag of assistances">
+              {{ assistanceTag.text ? assistanceTag.text : assistanceTag.value }}
+            </div>
+          </td>
+        </tr>
+        <tr *ngIf="specificNeeds.length > 0">
+          <td class="typeInformationHeader">Besoin(s) spécifiques</td>
+          <td class="bold">
+            <div *ngFor="let specificNeed of specificNeeds">
+              {{ specificNeed.text ? specificNeed.text : specificNeed.value }}
+            </div>
+          </td>
+        </tr>
+        <tr *ngIf="beneficiaryPassNumeric">
+          <td class="typeInformationHeader">Pass Numérique</td>
+          <td class="bold">Oui</td>
+        </tr>
+        <tr *ngIf="beneficiaryNeedCommentary">
+          <td class="typeInformationHeader">Informations</td>
+          <td class="bold">{{ beneficiaryNeedCommentary }}</td>
+        </tr>
+      </table>
     </div>
   </div>
-
-  <!-- Pass Numeric -->
-  <div *ngIf="beneficiaryPassNumeric" class="inputRow" fxLayout="row" fxLayoutGap="13px">
-    <app-svg-icon [type]="'ico'" [icon]="'passNumeric'"></app-svg-icon>
-    <p class="bold">Pass Numérique</p>
-  </div>
-
-  <!-- Comments -->
-  <div *ngIf="beneficiaryNeedCommentary">
-    <div class="typeInformationHeader">Informations à destination de la structure</div>
-    <p>{{ beneficiaryNeedCommentary }}</p>
-  </div>
 </div>
diff --git a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.scss b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.scss
index 0c9a98b49..b9cce0c61 100644
--- a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.scss
+++ b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.scss
@@ -9,6 +9,30 @@
   margin-top: 20px;
   margin-bottom: 20px;
   width: 100%;
+  border-bottom: solid black 1px;
+}
+
+.header-infos {
+  height: 80px;
+  display: flex;
+
+  .header-title {
+    width: 70%;
+    float: left;
+  }
+
+  h3 {
+    margin-top: 3px;
+  }
+
+  svg {
+    max-width: fit-content;
+    width: 30%;
+  }
+}
+
+.date {
+  float: right;
 }
 
 .print-header {
@@ -20,6 +44,10 @@
   @include cn-bold-16;
   margin-bottom: 5px;
   color: $grey-3;
+  &.date {
+    color: $grey-3;
+    font-style: italic;
+  }
 }
 
 .contactAccompaniment {
@@ -33,7 +61,7 @@
   height: 28px;
   border-radius: 20px;
   padding: 5px 15px;
-  color: white;
+  color: $white;
   border-style: none;
   margin-top: 5px;
   background: #348899;
@@ -58,3 +86,22 @@
     text-align: right;
   }
 }
+
+.informations {
+  width: 100%;
+  display: flex;
+  .helper {
+    max-height: 300px;
+    background-color: $grey-6;
+    width: 30%;
+    height: fit-content;
+    padding: 2%;
+  }
+
+  .beneficiary {
+    background-color: $grey-6;
+    margin-left: 2%;
+    padding: 2%;
+    width: 70%;
+  }
+}
diff --git a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.ts b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.ts
index 20c827dec..ee7b51cf1 100644
--- a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.ts
+++ b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.ts
@@ -1,9 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { Structure } from '../../../../models/structure.model';
 import * as _ from 'lodash';
 import { ActivatedRoute } from '@angular/router';
 import { PrintService } from '../../../../shared/service/print.service';
-import Module from 'module';
 import { Filter } from '../../../../structure-list/models/filter.model';
 @Component({
   selector: 'app-structure-print-header',
@@ -16,6 +14,7 @@ export class StructurePrintHeaderComponent implements OnInit {
   @Input() public structureAccompaniment: string;
   @Input() public beneficiaryPassNumeric: boolean;
   @Input() public contactAccompaniment: string | null;
+  @Input() public contactAccompanimentPhone: string | null;
   @Input() public filters: Filter[];
 
   public date: string;
diff --git a/src/app/form/orientation-form/orientation-form.component.html b/src/app/form/orientation-form/orientation-form.component.html
index 02e379de3..04a8a0500 100644
--- a/src/app/form/orientation-form/orientation-form.component.html
+++ b/src/app/form/orientation-form/orientation-form.component.html
@@ -1,10 +1,10 @@
-<div *ngIf="!multiPrint" class="form" fxLayout="column">
+<div id="body" *ngIf="!multiPrint" class="form" fxLayout="column">
   <app-modal-confirmation
     [openned]="showConfirmationModal"
     [content]="'Il vous faudra de nouveau remplir le formulaire si vous quittez'"
     (closed)="hasRedirectionAccepted($event)"
   ></app-modal-confirmation>
-  <div class="content">
+  <div class="progress-container">
     <div class="progressBar" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="20px">
       <label [ngClass]="{ validate: currentPage == nbPagesForm }" for="progressForm"
         >{{ progressStatus | number: '1.0-0' }}%
@@ -16,6 +16,8 @@
         [value]="progressStatus"
       ></progress>
     </div>
+  </div>
+  <div class="content" *ngIf="currentPage != pageTypeEnum.structuresSelection">
     <!-- BESOIN BENEFICIAIRE -->
     <div *ngIf="currentPage == pageTypeEnum.beneficiaryNeed" class="page">
       <div class="titleInfo">
@@ -23,7 +25,7 @@
         Merci de remplir ces quelques questions qui vous permettront d'identifier le lieu à proximité le plus adapté.
       </div>
       <div class="title">
-        <h3>De quoi le bénéficiaire a-t-il besoin ?</h3>
+        <h3>Quels sont les besoins du bénéficiaire ?</h3>
       </div>
       <div class="collapse" [ngClass]="{ notCollapsed: !showEquipments }">
         <div fxLayout="column">
@@ -119,73 +121,8 @@
             </div>
           </div>
           <div *ngIf="showFormation" class="tags">
-            <p class="titleCateg">{{ baseSkillssReferentiel.name }}</p>
-            <button
-              *ngFor="let choice of baseSkillssReferentiel.modules"
-              (click)="updateChoice(choice.id, 'formation')"
-              [ngClass]="{ selectedChoice: isInArray(choice.id, 'formation') }"
-            >
-              <div fxLayout="row" fxLayoutAlign=" center">
-                <svg class="validate" aria-hidden="true">
-                  <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
-                </svg>
-                <div class="textBtn">
-                  {{ choice.text }}
-                </div>
-              </div>
-            </button>
-
-            <p class="titleCateg">{{ accessRightsReferentiel.name }}</p>
-            <button
-              *ngFor="let choice of accessRightsReferentiel.modules"
-              (click)="updateChoice(choice.id, 'formation')"
-              [ngClass]="{ selectedChoice: isInArray(choice.id, 'formation') }"
-            >
-              <div fxLayout="row" fxLayoutAlign=" center">
-                <svg class="validate" aria-hidden="true">
-                  <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
-                </svg>
-                <div class="textBtn">
-                  {{ choice.text }}
-                </div>
-              </div>
-            </button>
-
-            <p class="titleCateg">{{ digitalCultureSecuritysReferentiel.name }}</p>
-            <button
-              *ngFor="let choice of digitalCultureSecuritysReferentiel.modules"
-              (click)="updateChoice(choice.id, 'formation')"
-              [ngClass]="{ selectedChoice: isInArray(choice.id, 'formation') }"
-            >
-              <div fxLayout="row" fxLayoutAlign=" center">
-                <svg class="validate" aria-hidden="true">
-                  <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
-                </svg>
-                <div class="textBtn">
-                  {{ choice.text }}
-                </div>
-              </div>
-            </button>
-
-            <p class="titleCateg">{{ parentingHelpsReferentiel.name }}</p>
-            <button
-              *ngFor="let choice of parentingHelpsReferentiel.modules"
-              (click)="updateChoice(choice.id, 'formation')"
-              [ngClass]="{ selectedChoice: isInArray(choice.id, 'formation') }"
-            >
-              <div fxLayout="row" fxLayoutAlign=" center">
-                <svg class="validate" aria-hidden="true">
-                  <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
-                </svg>
-                <div class="textBtn">
-                  {{ choice.text }}
-                </div>
-              </div>
-            </button>
-
-            <p class="titleCateg">{{ socialAndProfessionalsReferentiel.name }}</p>
             <button
-              *ngFor="let choice of socialAndProfessionalsReferentiel.modules"
+              *ngFor="let choice of formations"
               (click)="updateChoice(choice.id, 'formation')"
               [ngClass]="{ selectedChoice: isInArray(choice.id, 'formation') }"
             >
@@ -193,139 +130,62 @@
                 <svg class="validate" aria-hidden="true">
                   <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
                 </svg>
-                <div class="textBtn">
-                  {{ choice.text }}
-                </div>
+                <div class="textBtn">{{ choice.name }} ({{ choice.surname }}...)</div>
               </div>
             </button>
           </div>
         </div>
       </div>
     </div>
-    <!-- NUMERIC PASS -->
-    <div *ngIf="currentPage == pageTypeEnum.beneficiaryPassNumeric" class="page">
-      <div class="title">
-        <h3>Le bénéficiaire possède-t-il un Pass numérique ?</h3>
-      </div>
-      <app-radio-form
-        [selectedOption]="getOrientationControl('passNumeric').value"
-        [horizontal]="true"
-        (selectedEvent)="onRadioBtnChange('passNumeric', $event)"
-      >
-      </app-radio-form>
-    </div>
     <!-- PROFIL BENEFICIAIRE -->
     <div *ngIf="currentPage == pageTypeEnum.beneficiaryInfo" class="page">
       <div class="title">
-        <h3>Autour de quelle adresse chercher une structure ?</h3>
+        <h3>Quel est le profil du bénéficiaire ?</h3>
       </div>
-      <div class="form-group" fxLayout="column">
-        <label for="address">Adresse</label>
-
+      <div class="section">
+        <label>Nom</label>
         <div class="inputRow" fxLayout="row" fxLayoutGap="13px">
-          <app-address-autocomplete
-            [address]="getOrientationControl('address').valid ? getOrientationControl('address').value : null"
-            (inputAddress)="setAddressBeneficiary()"
-            (selectedAddress)="setAddressBeneficiary($event)"
-          ></app-address-autocomplete>
-          <app-svg-icon
-            *ngIf="getOrientationControl('address').valid && !isLoading"
-            [iconClass]="'validation'"
-            [type]="'form'"
-            [icon]="'validate'"
-            class="validateIcon"
-          ></app-svg-icon>
-          <div *ngIf="!getOrientationControl('address').valid && !isLoading" (click)="getAddress()">
-            <app-svg-icon [type]="'ico'" [icon]="'locateMe'" class="markerIcon"></app-svg-icon>
-          </div>
-          <div *ngIf="isLoading">
-            <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
-          </div>
+          <input
+            type="text"
+            [value]="getOrientationControl('beneficiaryName').value"
+            (input)="setBeneficiaryName($event.target.value)"
+            class="form-input"
+          />
         </div>
       </div>
-      <div class="title">
-        <h3>Le bénéficiaire a-t-il un profil spécifique ?</h3>
-        <p class="notRequired">facultatif</p>
+      <div class="section">
+        <label>Possède-t-il un Pass numérique ?</label>
+        <app-radio-form [horizontal]="true" (selectedEvent)="onRadioBtnChange('passNumeric', $event)"> </app-radio-form>
       </div>
-
-      <div class="tags">
-        <button
-          *ngFor="let choice of specificProfile.modules"
-          (click)="updateChoice(choice.id, 'specificProfile')"
-          [ngClass]="{ selectedChoice: isInArray(choice.id, 'specificProfile') }"
-        >
-          <div fxLayout="row" fxLayoutAlign=" center">
-            <svg class="validate" aria-hidden="true">
-              <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
-            </svg>
-            <div class="textBtn">
-              {{ choice.text }}
+      <div class="section">
+        <label>A-t-il un profil spécifique ?</label>
+        <div class="tags">
+          <button
+            (click)="updateChoice(null, 'specificProfile')"
+            [ngClass]="{ selectedChoice: isEmpty('specificProfile') }"
+          >
+            <div fxLayout="row" fxLayoutAlign=" center">
+              <svg class="validate" aria-hidden="true">
+                <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
+              </svg>
+              <div class="textBtn">Aucun</div>
             </div>
-          </div>
-        </button>
-      </div>
-    </div>
-    <!-- STRUCTURE SEARCH -->
-    <div *ngIf="currentPage == pageTypeEnum.structuresSelection" class="page">
-      Filtres séléctionnés
-      <div fxLayout="row wrap" fxLayoutGap="16px">
-        <div *ngFor="let filter of filters" class="tags-cloud" fxLayout="row" (click)="removeFilter(filter)">
-          {{ filter.text ? filter.text : filter.value }}
-          <app-svg-icon [type]="'ico'" [icon]="'delete'" [iconColor]="'white'"></app-svg-icon>
-        </div>
-        <div
-          *ngFor="let uncheckedFilter of uncheckedFilters"
-          class="tags-cloud unchecked"
-          fxLayout="row"
-          (click)="restoreFilter(uncheckedFilter)"
-        >
-          {{ uncheckedFilter.text ? uncheckedFilter.text : uncheckedFilter.value }}
-          <app-svg-icon [type]="'ico'" [icon]="'validate'" [iconColor]="'white'"></app-svg-icon>
-        </div>
-      </div>
-      <div fxLayout="row" class="content-container">
-        <div class="nbStructure-panel left-pane" [ngClass]="{ mapPhone: isMapPhone == true }">
-          <div class="nbStructuresLabel" [ngPlural]="structuresList.length">
-            <ng-template ngPluralCase="0">0 structure trouvée</ng-template>
-            <ng-template ngPluralCase="1">1 structure trouvée</ng-template>
-            <ng-template ngPluralCase="other">{{ structuresList.length }} structures trouvées</ng-template>
-          </div>
-          <div id="listCard" (mouseleave)="mouseLeave()">
-            <app-card
-              *ngFor="let structure of structuresList"
-              [structure]="structure"
-              [isOrientation]="true"
-              [isSelected]="isInPrintList(structure._id)"
-              (addToList)="addToList($event, structure)"
-              (hover)="handleCardHover($event)"
-              (showDetails)="showDetails($event)"
-            ></app-card>
-            <p *ngIf="structureList && structureList.length <= 0">
-              Il n'y a aucune réponse correspondant à votre recherche
-            </p>
-          </div>
-        </div>
-        <div class="btnSwitch">
-          <app-button
-            [style]="'roundedButton'"
-            [text]="isMapPhone ? 'Liste' : 'Carte'"
-            [iconBtn]="isMapPhone ? 'liste' : 'map-marker'"
-            (action)="switchMapList()"
-          ></app-button>
+          </button>
+          <button
+            *ngFor="let choice of specificProfile.modules"
+            (click)="updateChoice(choice.id, 'specificProfile')"
+            [ngClass]="{ selectedChoice: isInArray(choice.id, 'specificProfile') }"
+          >
+            <div fxLayout="row" fxLayoutAlign=" center">
+              <svg class="validate" aria-hidden="true">
+                <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
+              </svg>
+              <div class="textBtn">
+                {{ choice.text }}
+              </div>
+            </div>
+          </button>
         </div>
-        <app-map
-          [structures]="structuresList"
-          [structuresToPrint]="structuresToPrint"
-          [toogleToolTipId]="displayMapMarkerId"
-          [selectedMarkerId]="selectedMarkerId"
-          [locate]="locate"
-          (locatationTrigger)="locatationTrigger($event)"
-          (selectedStructure)="showDetails($event)"
-          [isMapPhone]="isMapPhone"
-          [searchedValue]="searchedValue"
-          class="right-pane deep-map"
-          [ngClass]="{ mapPhone: isMapPhone == true }"
-        ></app-map>
       </div>
     </div>
     <!-- BENEFICIARY ACCOMPANIMENT -->
@@ -333,59 +193,95 @@
       <div class="title">
         <h3>Qui oriente le bénéficiaire ?</h3>
       </div>
-      <label>Votre structure (MDM, Caf, Pôle Emploi...)</label>
-      <div class="inputRow" fxLayout="row" fxLayoutGap="13px">
-        <input
-          type="text"
-          [value]="getOrientationControl('structureAccompaniment').value"
-          (input)="setStructureAccompaniment($event.target.value)"
-          class="form-input"
-        />
+      <div class="section">
+        <label>De quelle structure êtes-vous ? (MDM, Caf, Pôle Emploi...)</label>
+        <div class="inputRow" fxLayout="row" fxLayoutGap="13px">
+          <input
+            type="text"
+            [value]="getOrientationControl('structureAccompaniment').value"
+            (input)="setStructureAccompaniment($event.target.value)"
+            class="form-input"
+          />
+        </div>
       </div>
-
-      <div class="title">
-        <h3>Comment contacter cette structure ?</h3>
+      <div class="section">
+        <label>Courriel de votre structure</label>
         <p class="notRequired">facultatif</p>
+        <div class="inputRow" fxLayout="row" fxLayoutGap="13px">
+          <input
+            type="text"
+            [value]="getOrientationControl('contactAccompanimentEmail').value"
+            placeholder="exemple: prenom.nom@grandlyon.com"
+            (input)="setContactAccompanimentEmail($event.target.value)"
+            class="form-input"
+          />
+          <app-svg-icon
+            *ngIf="
+              getOrientationControl('contactAccompanimentEmail').valid &&
+              getOrientationControl('contactAccompanimentEmail').value
+            "
+            [iconClass]="'validation'"
+            [type]="'form'"
+            [icon]="'validate'"
+          ></app-svg-icon>
+          <app-svg-icon
+            *ngIf="
+              getOrientationControl('contactAccompanimentEmail').invalid &&
+              getOrientationControl('contactAccompanimentEmail').value
+            "
+            [iconClass]="'validation'"
+            [type]="'form'"
+            [icon]="'notValidate'"
+          ></app-svg-icon>
+        </div>
       </div>
-      <label>Contact (email ou n° de téléphone)</label>
-      <div class="inputRow" fxLayout="row" fxLayoutGap="13px">
-        <input
-          type="text"
-          [value]="getOrientationControl('contactAccompaniment').value"
-          (input)="setContactAccompaniment($event.target.value)"
-          class="form-input"
-        />
-      </div>
-
-      <div class="title">
-        <h3>Qui est le bénéficiaire ?</h3>
+      <div class="section">
+        <label>Téléphone de votre structure</label>
         <p class="notRequired">facultatif</p>
-      </div>
-      <label>Nom du bénéficiaire</label>
-      <div class="inputRow" fxLayout="row" fxLayoutGap="13px">
-        <input
-          type="text"
-          [value]="getOrientationControl('beneficiaryName').value"
-          (input)="setBeneficiaryName($event.target.value)"
-          class="form-input"
-        />
+        <div class="inputRow" fxLayout="row" fxLayoutGap="13px">
+          <input
+            type="text"
+            [value]="getOrientationControl('contactAccompanimentPhone').value"
+            (input)="setContactAccompanimentPhone($event.target.value)"
+            class="form-input"
+          />
+          <app-svg-icon
+            *ngIf="
+              getOrientationControl('contactAccompanimentPhone').value &&
+              getOrientationControl('contactAccompanimentPhone').valid
+            "
+            [iconClass]="'validation'"
+            [type]="'form'"
+            [icon]="'validate'"
+          ></app-svg-icon>
+          <app-svg-icon
+            *ngIf="
+              getOrientationControl('contactAccompanimentPhone').invalid &&
+              getOrientationControl('contactAccompanimentPhone').value
+            "
+            [iconClass]="'validation'"
+            [type]="'form'"
+            [icon]="'notValidate'"
+          ></app-svg-icon>
+        </div>
       </div>
     </div>
     <!-- BENEFICIARY NEEDS COMMENTARY -->
     <div *ngIf="currentPage == pageTypeEnum.beneficiaryNeedCommentary" class="page">
       <div class="title">
-        <h3>Précisez le besoin</h3>
-        <p class="notRequired">facultatif</p>
+        <h3>Avez-vous des précisions à apporter ?</h3>
+        <p class="notRequired lg">facultatif</p>
       </div>
-      <label>Ces informations sont à destination de la structure</label>
+      <label>Ces informations accompagneront la fiche d'orientation du bénéficiaire</label>
       <div class="textareaBlock" fxLayout="column">
         <textarea
           rows="8"
           maxlength="500"
+          placeholder="Exemple: le bénéficiaire n'a pas d'adresse e-mail"
           [value]="getOrientationControl('beneficiaryNeedCommentary').value"
           (input)="setBeneficiaryNeedCommentary($event.target.value)"
         ></textarea>
-        <p>
+        <p class="textarea-char">
           {{
             getOrientationControl('beneficiaryNeedCommentary').value
               ? getOrientationControl('beneficiaryNeedCommentary').value.length
@@ -394,15 +290,43 @@
         </p>
       </div>
     </div>
+    <!-- ADDRESS SEARCH -->
+    <div *ngIf="currentPage == pageTypeEnum.beneficiaryAddress" class="page">
+      <div class="title">
+        <h3>Autour de quelle adresse chercher une structure ?</h3>
+        <p class="notRequired lg">facultatif</p>
+      </div>
+      <div class="form-group" fxLayout="column">
+        <div class="inputRow" fxLayout="row" fxLayoutGap="13px">
+          <app-address-autocomplete
+            [address]="getOrientationControl('address').valid ? getOrientationControl('address').value : null"
+            (inputAddress)="setAddressBeneficiary()"
+            (selectedAddress)="setAddressBeneficiary($event)"
+          ></app-address-autocomplete>
+          <app-svg-icon
+            *ngIf="getOrientationControl('address').valid && !isLoading"
+            [iconClass]="'validation'"
+            [type]="'form'"
+            [icon]="'validate'"
+            class="validateIcon"
+          ></app-svg-icon>
+        </div>
+      </div>
+    </div>
     <!-- PRINT RESULTS -->
-    <div *ngIf="currentPage == pageTypeEnum.printResults" class="page">
+    <div *ngIf="currentPage == pageTypeEnum.printResults" class="last-page">
       <div class="title">
         <app-structure-print-header
-          [beneficiaryNeedCommentary]="getOrientationControl('beneficiaryNeedCommentary').value"
-          [beneficiaryName]="getOrientationControl('beneficiaryName').value"
-          [structureAccompaniment]="getOrientationControl('structureAccompaniment').value"
-          [beneficiaryPassNumeric]="getOrientationControl('passNumeric').value"
-          [contactAccompaniment]="getOrientationControl('contactAccompaniment').value"
+          [beneficiaryNeedCommentary]="
+            getOrientationControl('beneficiaryNeedCommentary')
+              ? getOrientationControl('beneficiaryNeedCommentary').value
+              : ''
+          "
+          [beneficiaryName]="getOrientationControl('beneficiaryName')?.value"
+          [structureAccompaniment]="getOrientationControl('structureAccompaniment')?.value"
+          [beneficiaryPassNumeric]="getOrientationControl('passNumeric')?.value"
+          [contactAccompaniment]="getOrientationControl('contactAccompanimentEmail')?.value"
+          [contactAccompanimentPhone]="getOrientationControl('contactAccompanimentPhone')?.value"
           [filters]="filters"
         ></app-structure-print-header>
 
@@ -413,49 +337,94 @@
       </div>
     </div>
   </div>
-  <!-- FOOTER AVEC SUIVANT / PRECEDENT ET VALIDATION -->
-  <div *ngIf="currentPage == 0" class="footer desktop" fxLayout="column" fxLayoutAlign="space-between">
-    <div fxLayout="row" fxLayoutAlign="center center">
-      <app-footer-form
-        [btnName]="['Précédent', 'Suivant']"
-        (previousPage)="previousUrl()"
-        (nextPage)="nextPage()"
-        [isValid]="isPageValid"
-      ></app-footer-form>
+  <!-- STRUCTURE SEARCH -->
+  <div *ngIf="currentPage == pageTypeEnum.structuresSelection" class="carto">
+    <div class="left-col" [ngClass]="{ mapPhone: isMapPhone == true }">
+      <div class="filters">
+        <span class="filters-title">Filtre(s) séléctionné(s)</span>
+        <div fxLayout="row wrap" fxLayoutGap="4px">
+          <div
+            class="tags-cloud"
+            *ngFor="let filter of filters"
+            [class.unchecked]="!filter.checked"
+            fxLayout="row"
+            (click)="checkFilter(filter)"
+          >
+            <app-svg-icon
+              *ngIf="filter.checked"
+              [type]="'ico'"
+              [icon]="'validate'"
+              [iconColor]="'white'"
+            ></app-svg-icon>
+            <app-svg-icon *ngIf="!filter.checked" [type]="'ico'" [icon]="'delete'" [iconColor]="'white'"></app-svg-icon>
+            <div>{{ filter.text ? filter.text : filter.value }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="nbStructuresLabel" [ngPlural]="structuresList.length">
+        <ng-template ngPluralCase="0">0 structure</ng-template>
+        <ng-template ngPluralCase="1">1 structure</ng-template>
+        <ng-template ngPluralCase="other">{{ structuresList.length }} structures</ng-template>
+      </div>
+      <div fxLayout="row" class="content-container">
+        <div class="nbStructure-panel left-pane">
+          <div id="listCard" (mouseleave)="mouseLeave()">
+            <app-card
+              *ngFor="let structure of structuresList"
+              [structure]="structure"
+              [isOrientation]="true"
+              [isSelected]="isInPrintList(structure._id)"
+              (addToList)="addToList($event, structure)"
+              (hover)="handleCardHover($event)"
+              (showDetails)="showDetails($event)"
+              class="structure-card"
+            ></app-card>
+            <p *ngIf="structureList && structureList.length <= 0">
+              Il n'y a aucune réponse correspondant à votre recherche
+            </p>
+          </div>
+        </div>
+      </div>
     </div>
-  </div>
-  <div *ngIf="currentPage != 0 && currentPage != pageTypeEnum.printResults" class="footer desktop">
-    <div fxLayout="row" fxLayoutAlign="center center">
-      <app-footer-form
-        [btnName]="['Précédent', 'Suivant']"
-        (previousPage)="previousPage()"
-        (nextPage)="nextPage()"
-        [isValid]="isPageValid"
-      ></app-footer-form>
+    <div class="btnSwitch">
+      <app-button
+        [style]="'roundedButton'"
+        [text]="isMapPhone ? 'Liste' : 'Carte'"
+        [iconBtn]="isMapPhone ? 'liste' : 'map-marker'"
+        (action)="switchMapList()"
+      ></app-button>
     </div>
-  </div>
-  <div *ngIf="currentPage == pageTypeEnum.printResults" class="footer desktop">
-    <div fxLayout="row" fxLayoutAlign="center center">
-      <app-footer-form
-        [btnName]="['Précédent', 'Imprimer']"
-        (previousPage)="previousPage()"
-        (nextPage)="runMultiPrint(true)"
-        [isValid]="isPageValid"
-      ></app-footer-form>
+    <div class="right-col" [ngClass]="{ mapPhone: isMapPhone == true }">
+      <app-map
+        [isOrientationForm]="true"
+        [structures]="structuresList"
+        [structuresToPrint]="structuresToPrint"
+        [toogleToolTipId]="displayMapMarkerId"
+        [selectedMarkerId]="selectedMarkerId"
+        [locate]="locate"
+        (locatationTrigger)="locatationTrigger($event)"
+        (selectedStructure)="showDetails($event)"
+        [isMapPhone]="isMapPhone"
+        [searchedValue]="userLocation"
+        (onOrientationButtonClick)="addToList($event, structure)"
+        class="right-pane deep-map"
+        [ngClass]="{ mapPhone: isMapPhone == true }"
+      ></app-map>
     </div>
   </div>
-
-  <div *ngIf="currentPage != 0 && currentPage != pageTypeEnum.printResults" class="footer phone">
+  <!-- FOOTER AVEC SUIVANT / PRECEDENT ET VALIDATION -->
+  <div *ngIf="currentPage != pageTypeEnum.printResults" class="form-footer">
     <div fxLayout="row" fxLayoutAlign="center center">
       <app-footer-form
         [btnName]="['Précédent', 'Suivant']"
         (previousPage)="previousPage()"
+        [displayPreviousButton]="currentPage !== pageTypeEnum.beneficiaryNeed"
         (nextPage)="nextPage()"
         [isValid]="isPageValid"
       ></app-footer-form>
     </div>
   </div>
-  <div *ngIf="currentPage == pageTypeEnum.printResults" class="footer phone">
+  <div *ngIf="currentPage == pageTypeEnum.printResults" class="form-footer">
     <div fxLayout="row" fxLayoutAlign="center center">
       <app-footer-form
         [btnName]="['Précédent', 'Imprimer']"
diff --git a/src/app/form/orientation-form/orientation-form.component.scss b/src/app/form/orientation-form/orientation-form.component.scss
index dbeffc59d..b83f7a12b 100644
--- a/src/app/form/orientation-form/orientation-form.component.scss
+++ b/src/app/form/orientation-form/orientation-form.component.scss
@@ -4,61 +4,24 @@
 @import '../../../assets/scss/color';
 @import '../../../assets/scss/typography';
 
-.title {
-  margin-top: 20px;
-}
-
 .body-wrap {
   height: 400px;
 }
 
-.left-pane {
-  width: 529px;
-  min-width: 500px;
-  height: 600px;
-  overflow: auto;
-  overflow-x: hidden;
-  padding: 0 25px 0 0;
-  @media #{$tablet} {
-    width: 100%;
-    min-width: unset;
-    &.mapPhone {
-      display: none !important;
-    }
-  }
-}
-
-.right-pane {
-  width: 400px;
-  max-height: 400px;
-  padding: 0 16px;
-  @media #{$tablet} {
-    display: none;
-    &.mapPhone {
-      display: block;
-    }
-    width: 100%;
-    padding: 0;
-  }
-}
-
-.deep-map ::ng-deep #map {
-  height: 380px;
-}
-
 .tags-cloud {
+  cursor: pointer;
   font-style: normal;
   justify-content: center;
   align-items: center;
   height: 28px;
   border-radius: 20px;
-  padding: 5px 15px;
-  color: white;
+  padding: 4px 12px;
+  color: $white;
   border-style: none;
-  margin-top: 15px;
-  background: #348899;
+  margin-top: 4px;
+  background: $blue;
   &.unchecked {
-    background: #bdbdbd;
+    background: $grey-4;
   }
 }
 
@@ -89,42 +52,38 @@
 }
 
 .nbStructuresLabel {
-  color: $white;
   @include cn-regular-16;
-  display: grid;
-  align-items: center;
+  display: flex;
+  text-align: center;
   height: 32px;
-  background-color: $grey-4;
-  padding-left: 9px;
+  color: $grey-3;
   width: 100%;
+  align-items: center;
+  @media #{$large-phone} {
+    padding-left: unset;
+  }
+}
+
+.nbStructuresLabel::before,
+.nbStructuresLabel::after {
+  border-top: 0.0625em solid;
+  content: '';
+  flex: 1;
+  margin: 0 0.5em;
 }
 
-.footer {
+.form-footer {
   padding: 17px 0;
   width: 100%;
-  max-width: 960px;
-  margin: 20px auto;
   text-align: center;
-  &.desktop {
-    @media #{$tablet} {
-      display: none;
-    }
-  }
-
-  &.phone {
-    display: none;
-    @media #{$tablet} {
-      margin: 0 auto;
-      border-top: 1px solid $grey-4;
-      display: block;
-    }
-  }
+  z-index: calc($btn-phone-switch-map-list-z-index - 1);
+  background: $grey-6;
 }
 
 .btnSwitch {
   position: fixed;
   left: 50%;
-  bottom: $footer-height + 5px;
+  bottom: 0;
   transform: translate(-50%, -50%);
   margin: 0 auto;
   display: none;
@@ -132,25 +91,200 @@
     display: block;
     opacity: 0.8;
     z-index: $btn-phone-switch-map-list-z-index;
+    margin-bottom: 60px;
   }
-  @media #{$large-phone} {
+}
+
+#body {
+  background-color: $grey-6;
+}
+
+.content {
+  min-height: 450px;
+  background-color: $white;
+  margin-left: 25%;
+  margin-right: 24%;
+
+  @media #{$tablet} {
+    width: 100%;
+    height: 100vh !important;
+    margin: 0;
+    border-bottom: $grey-4 solid 1px;
+    min-height: unset;
+  }
+
+  p {
+    &.notRequired {
+      font-size: 14px;
+      margin-top: 0px;
+      font-style: italic;
+      color: $secondary-color;
+
+      &.lg {
+        font-size: 17px;
+      }
+    }
   }
 }
 
-.loader-gif {
-  @media #{$desktop} {
-    width: 20%;
+.content-container {
+  width: 97%;
+  float: right;
+  height: 58vh;
+  padding: unset;
+  // height: 100%;
+  @media #{$tablet} {
+    height: 57vh !important;
   }
-  @media #{$large-desktop} {
-    width: 20%;
+
+  @media #{$desktop} {
+    height: 100%;
   }
-  @media #{$large-phone} {
-    width: 100%;
+
+  ::ng-deep .structure-card .structure {
+    margin-right: 16px;
   }
-  @media #{$small-phone} {
-    width: 100%;
+  ::ng-deep .structure-card:last-child .structure {
+    border-bottom: unset !important;
   }
+}
+
+::ng-deep #search-address {
+  width: 400px !important;
   @media #{$phone} {
+    width: 250px !important;
+  }
+}
+
+.progress-container {
+  margin-top: 1%;
+  margin-left: 25.5%;
+  width: 50%;
+  @media #{$tablet} {
+    margin: 0 16px;
+    width: calc(100% - 32px);
+  }
+  .progressBar {
+    height: #{$progressBar-height};
+    progress {
+      height: 6px;
+      border-radius: 7px;
+      &::-webkit-progress-bar {
+        background-color: $white-1;
+      }
+      &::-webkit-progress-value {
+        background-color: $secondary-color;
+        border-radius: 12px;
+      }
+      &.validate {
+        &::-webkit-progress-value {
+          background-color: $green-1;
+        }
+      }
+    }
+  }
+}
+
+.title {
+  margin-top: 20px;
+  padding-bottom: 3%;
+}
+
+.last-page {
+  width: 96%;
+  margin-left: 2%;
+}
+
+.page {
+  float: left;
+  padding-top: 2%;
+  padding-bottom: 5%;
+
+  textarea {
+    margin-top: 1%;
+  }
+
+  .textarea-char {
+    font-style: italic;
+    color: $grey-3;
+  }
+
+  .section {
+    margin-top: 0.5%;
+  }
+
+  @media #{$tablet} {
+    width: calc(100vw - 32px);
+  }
+}
+
+.left-pane {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  overflow-x: hidden;
+  @media #{$tablet} {
     width: 100%;
+    min-width: unset;
+  }
+}
+
+.carto {
+  display: flex;
+  float: left;
+  min-height: 500px;
+  width: 100%;
+  border-bottom: $grey-4 solid 1px;
+
+  @media #{$tablet} {
+    min-height: 50vh;
+  }
+
+  .left-col {
+    padding-left: 16px;
+    margin-left: 1%;
+    background-color: $white;
+    padding-right: 16px;
+    width: 30%;
+    @media #{$tablet} {
+      width: 100%;
+      min-width: unset;
+      height: 100vh;
+      &.mapPhone {
+        display: none !important;
+      }
+    }
+  }
+
+  .right-col {
+    width: 67%;
+    padding-left: 2%;
+    padding-right: 2%;
+    margin-bottom: 2%;
+    @media #{$tablet} {
+      display: none;
+      height: 100vh;
+      &.mapPhone {
+        display: block;
+      }
+      width: 100%;
+      padding: 0;
+    }
+  }
+
+  .filters {
+    margin-bottom: 1%;
+    margin-top: 7%;
+    .filters-title {
+      color: $grey-3;
+    }
+  }
+}
+
+input {
+  width: 400px;
+  &.email-placeholder::placeholder {
+    color: $white-2;
+    font-style: italic;
   }
 }
diff --git a/src/app/form/orientation-form/orientation-form.component.ts b/src/app/form/orientation-form/orientation-form.component.ts
index 59b8b6513..7f6b8721d 100644
--- a/src/app/form/orientation-form/orientation-form.component.ts
+++ b/src/app/form/orientation-form/orientation-form.component.ts
@@ -16,6 +16,8 @@ import { Filter } from '../../structure-list/models/filter.model';
 import { Module } from '../../structure-list/models/module.model';
 import { SearchService } from '../../structure-list/services/search.service';
 import { PageTypeEnum } from './pageType.enum';
+import { Utils } from '../../utils/utils';
+import { CustomRegExp } from '../../utils/CustomRegExp';
 
 @Component({
   selector: 'app-orientation-form',
@@ -30,6 +32,9 @@ export class OrientationFormComponent implements OnInit {
   public isMapPhone = false;
   public isLoading = false;
 
+  // Map auto locate with address
+  public userLocation = [];
+
   public orientationForm: FormGroup;
 
   // Page and progress var
@@ -52,11 +57,11 @@ export class OrientationFormComponent implements OnInit {
 
   public numberAssistanceChecked;
   public filters: Filter[] = [];
-  public uncheckedFilters: Filter[] = [];
 
   public equipments: Module[] = [];
   public assistance: Module[] = [];
   public formation: Module[] = [];
+  public selectedFormations: Category[] = [];
   public baseSkillssReferentiel: Category;
   public accessRightsReferentiel: Category;
   public digitalCultureSecuritysReferentiel: Category;
@@ -81,7 +86,8 @@ export class OrientationFormComponent implements OnInit {
     private searchService: SearchService,
     private structureService: StructureService,
     private geoJsonService: GeojsonService,
-    private meta: Meta
+    private meta: Meta,
+    public utils: Utils
   ) {}
 
   ngOnInit(): void {
@@ -102,6 +108,7 @@ export class OrientationFormComponent implements OnInit {
     });
     const categs = await this.searchService.getCategoriesTraining().toPromise();
     categs.forEach((categ) => {
+      this.selectedFormations.push(categ);
       categ.modules.forEach((module) => {
         this.formation.push(module);
       });
@@ -157,8 +164,15 @@ export class OrientationFormComponent implements OnInit {
         commune: new FormControl('', Validators.required),
       }),
       structureAccompaniment: new FormControl(orientationFormFilters.structureAccompaniment, Validators.required),
-      contactAccompaniment: new FormControl(orientationFormFilters.contactAccompaniment),
-      beneficiaryName: new FormControl(orientationFormFilters.beneficiaryName),
+      contactAccompanimentPhone: new FormControl(
+        orientationFormFilters.contactAccompanimentPhone,
+        Validators.pattern(CustomRegExp.PHONE)
+      ),
+      contactAccompanimentEmail: new FormControl(
+        orientationFormFilters.contactAccompanimentEmail,
+        Validators.pattern(CustomRegExp.EMAIL)
+      ),
+      beneficiaryName: new FormControl(orientationFormFilters.beneficiaryName, Validators.required),
       beneficiaryNeedCommentary: new FormControl(orientationFormFilters.beneficiaryNeedCommentary),
     });
   }
@@ -176,31 +190,18 @@ export class OrientationFormComponent implements OnInit {
     if (this.currentPage === this.nbPagesForm - 1) {
       this.validateForm();
     } else {
-      if (
-        this.currentPage === this.pageTypeEnum.beneficiaryNeed &&
-        this.orientationForm.get('assistance').value.length + this.orientationForm.get('formation').value.length == 0 &&
-        this.orientationForm.get('equipments').value.length > 0
-      ) {
-        this.noPassNumeric = true;
-        this.getOrientationControl('passNumeric').setValue(false);
-
-        this.currentPage++;
-        this.progressStatus += 100 / this.nbPagesForm;
-      }
       this.currentPage++;
       this.progressStatus += 100 / this.nbPagesForm;
       this.updatePageValid();
+      document.getElementsByClassName('content')[0].scrollTo(0, 0);
     }
   }
 
   public previousPage(): void {
     // Check if going to the first page
     if (this.currentPage === 0) {
-      //go back to home ? previous page
+      this.previousUrl();
     } else {
-      if (this.currentPage === this.pageTypeEnum.beneficiaryInfo && this.noPassNumeric) {
-        this.currentPage--;
-      }
       this.currentPage--;
       this.progressStatus -= 100 / this.nbPagesForm;
       this.setStructuresAndCoord();
@@ -231,19 +232,24 @@ export class OrientationFormComponent implements OnInit {
           this.orientationForm.get('formation').value.length >
         0,
     };
-    this.pagesValidation[PageTypeEnum.beneficiaryPassNumeric] = {
-      valid: this.getOrientationControl('passNumeric').valid,
+    this.pagesValidation[PageTypeEnum.beneficiaryInfo] = {
+      valid:
+        this.getOrientationControl('passNumeric').value != null &&
+        this.getOrientationControl('beneficiaryName').value &&
+        this.getOrientationControl('beneficiaryName').value.length != 0,
     };
-    this.pagesValidation[PageTypeEnum.beneficiaryInfo] = { valid: this.orientationForm.get('address').valid };
     this.pagesValidation[PageTypeEnum.beneficiaryAccompaniment] = {
       valid:
         this.getOrientationControl('structureAccompaniment').valid &&
-        this.getOrientationControl('contactAccompaniment').valid &&
-        this.getOrientationControl('beneficiaryName').valid,
+        this.getOrientationControl('contactAccompanimentPhone').valid &&
+        this.getOrientationControl('contactAccompanimentEmail').valid,
     };
     this.pagesValidation[PageTypeEnum.beneficiaryNeedCommentary] = {
       valid: this.getOrientationControl('beneficiaryNeedCommentary').valid,
     };
+    this.pagesValidation[PageTypeEnum.beneficiaryAddress] = {
+      valid: true,
+    };
     this.pagesValidation[PageTypeEnum.printResults] = { valid: true };
     this.pagesValidation[PageTypeEnum.structuresSelection] = { valid: this.structuresToPrint.length > 0 };
 
@@ -292,7 +298,18 @@ export class OrientationFormComponent implements OnInit {
   }
 
   public updateChoice(choice: string, controlName: string): void {
-    this.onCheckChange(!this.isInArray(choice, controlName), controlName, choice);
+    if (choice == null) this.unCheckAll(controlName);
+    else this.onCheckChange(!this.isInArray(choice, controlName), controlName, choice);
+  }
+
+  public isEmpty(formControlName: string): boolean {
+    const formArray: FormArray = this.orientationForm.get(formControlName) as FormArray;
+    return formArray.length < 1;
+  }
+
+  public unCheckAll(formControlName: string) {
+    const formArray: FormArray = this.orientationForm.get(formControlName) as FormArray;
+    formArray.clear();
   }
 
   public onCheckChange(event: boolean, formControlName: string, value: string): void {
@@ -322,8 +339,10 @@ export class OrientationFormComponent implements OnInit {
       this.getOrientationControl('address').get('numero').setValue(address.numero);
       this.getOrientationControl('address').get('street').setValue(address.street);
       this.getOrientationControl('address').get('commune').setValue(address.commune);
+      this.userLocation = address.coordinates;
     } else {
       this.orientationForm.get('address').reset();
+      this.userLocation = null;
     }
     this.setValidationsForm();
   }
@@ -333,8 +352,13 @@ export class OrientationFormComponent implements OnInit {
     this.setValidationsForm();
   }
 
-  public setContactAccompaniment(contact: string): void {
-    this.getOrientationControl('contactAccompaniment').setValue(contact);
+  public setContactAccompanimentPhone(phone: string): void {
+    this.getOrientationControl('contactAccompanimentPhone').setValue(this.utils.modifyPhoneValue(phone));
+    this.setValidationsForm();
+  }
+
+  public setContactAccompanimentEmail(email: string): void {
+    this.getOrientationControl('contactAccompanimentEmail').setValue(email);
     this.setValidationsForm();
   }
 
@@ -365,7 +389,7 @@ export class OrientationFormComponent implements OnInit {
       this.filters.push(new Filter('equipmentsAndServices', element, this.findEquipmentName(element)));
     });
     this.orientationForm.get('formation').value.forEach((element) => {
-      this.orientationForm.get('formation');
+      this.findTrainingCategoryForSkill(element);
       // Put higher cat like accessRight and so on here
       this.filters.push(
         new Filter(
@@ -375,15 +399,6 @@ export class OrientationFormComponent implements OnInit {
         )
       );
     });
-
-    // todo - fix
-    this.removeDoublonFilters();
-  }
-
-  public removeDoublonFilters(): void {
-    this.uncheckedFilters.forEach((elem) => {
-      this.filters = this.filters.filter((filter) => filter.value != elem.value);
-    });
     this.setStructuresAndCoord();
   }
 
@@ -410,34 +425,10 @@ export class OrientationFormComponent implements OnInit {
 
   public findTrainingCategoryForSkill(skill): any {
     let infos = { categ: '', name: '' };
-    this.baseSkillssReferentiel.modules.forEach((elem) => {
+    this.selectedFormations.forEach((elem) => {
       if (elem.id === skill) {
-        infos.categ = this.baseSkillssReferentiel.id;
-        infos.name = elem.text;
-      }
-    });
-    this.accessRightsReferentiel.modules.forEach((elem) => {
-      if (elem.id === skill) {
-        infos.categ = this.accessRightsReferentiel.id;
-        infos.name = elem.text;
-      }
-    });
-    this.parentingHelpsReferentiel.modules.forEach((elem) => {
-      if (elem.id === skill) {
-        infos.categ = this.parentingHelpsReferentiel.id;
-        infos.name = elem.text;
-      }
-    });
-    this.socialAndProfessionalsReferentiel.modules.forEach((elem) => {
-      if (elem.id === skill) {
-        infos.categ = this.socialAndProfessionalsReferentiel.id;
-        infos.name = elem.text;
-      }
-    });
-    this.digitalCultureSecuritysReferentiel.modules.forEach((elem) => {
-      if (elem.id === skill) {
-        infos.categ = this.digitalCultureSecuritysReferentiel.id;
-        infos.name = elem.text;
+        infos.categ = '';
+        infos.name = elem.name;
       }
     });
     return infos;
@@ -447,7 +438,7 @@ export class OrientationFormComponent implements OnInit {
     this.geoJsonService
       .getCoord(this.orientationForm.value.address.numero, this.orientationForm.value.address.street, '69000')
       .subscribe((res) => {
-        this.structureService.getStructures(this.filters).subscribe((data) => {
+        this.structureService.getStructures(this.filters.filter((elem) => elem.checked == true)).subscribe((data) => {
           data.map((structure) => {
             structure.distance = parseInt(
               this.geoJsonService.getDistance(
@@ -501,15 +492,10 @@ export class OrientationFormComponent implements OnInit {
     this.showStructureDetails = false;
   }
 
-  public removeFilter(filter: Filter): void {
-    this.filters = this.filters.filter((elem) => elem != filter);
-    this.uncheckedFilters.push(filter);
-    this.setStructuresAndCoord();
-  }
-
-  public restoreFilter(filter: Filter): void {
-    this.uncheckedFilters = this.uncheckedFilters.filter((elem) => elem != filter);
-    this.filters.push(filter);
+  public checkFilter(filter: Filter): void {
+    this.filters.forEach((element) => {
+      if (element == filter) element.checked = !element.checked;
+    });
     this.setStructuresAndCoord();
   }
 
diff --git a/src/app/form/orientation-form/pageType.enum.ts b/src/app/form/orientation-form/pageType.enum.ts
index 1a0fc933a..e7f68bb8e 100644
--- a/src/app/form/orientation-form/pageType.enum.ts
+++ b/src/app/form/orientation-form/pageType.enum.ts
@@ -1,9 +1,9 @@
 export enum PageTypeEnum {
   beneficiaryNeed,
-  beneficiaryPassNumeric,
   beneficiaryInfo,
-  structuresSelection,
   beneficiaryAccompaniment,
   beneficiaryNeedCommentary,
+  beneficiaryAddress,
+  structuresSelection,
   printResults,
 }
diff --git a/src/app/form/structure-form/form.component.scss b/src/app/form/structure-form/form.component.scss
index 79d9304e1..1fabc2e2c 100644
--- a/src/app/form/structure-form/form.component.scss
+++ b/src/app/form/structure-form/form.component.scss
@@ -19,7 +19,7 @@ h4 {
 }
 
 .form {
-  background: white;
+  background: $white;
   width: 100vw;
   height: calc(var(--vh, 1vh) * 100 - #{$header-height} - #{$footer-height});
   top: #{$header-height};
@@ -46,7 +46,7 @@ h4 {
     display: none;
     @media #{$tablet} {
       margin: 0 auto;
-      border-top: 1px solid $grey-4;
+      //border-top: 1px solid $grey-4;
       display: block;
     }
   }
@@ -96,7 +96,6 @@ h4 {
     ) !important; // -1px because of header border
   }
   @media #{$tablet} {
-    height: 100%;
     &.editMode {
       .page {
         height: calc(
@@ -131,11 +130,6 @@ h4 {
   .page {
     max-width: 960px;
     margin: auto;
-    @media #{$tablet} {
-      height: calc(
-        100vh - #{$header-height-phone} - #{$progressBar-height} - #{$footer-height-phone} - 1px
-      ); // -1px because of header border
-    }
     height: auto;
     color: $grey-1;
     &.home {
@@ -307,7 +301,7 @@ h4 {
 
 input {
   &.email-placeholder::placeholder {
-    color: #cacccb;
+    color: $white-2;
     font-style: italic;
   }
   &.phone {
@@ -335,6 +329,9 @@ img {
   border: 1px solid $grey-4;
   border-radius: 4px;
   margin-bottom: 13px;
+  @media #{$small-phone} {
+    width: 95% !important;
+  }
   @media #{$tablet} {
     width: 296px;
   }
diff --git a/src/app/form/structure-form/form.component.ts b/src/app/form/structure-form/form.component.ts
index c454231a2..d0b4d04ad 100644
--- a/src/app/form/structure-form/form.component.ts
+++ b/src/app/form/structure-form/form.component.ts
@@ -744,6 +744,7 @@ export class FormComponent implements OnInit {
       } else {
         this.currentPage++;
         this.progressStatus += 100 / this.nbPagesForm;
+        document.getElementsByClassName('content')[0].scrollTo(0, 0);
         this.updatePageValid();
       }
     }
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 51dd7c81d..bdf85fe6b 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -38,8 +38,12 @@
       <div fxLayout="column" class="right-header" fxLayoutAlign="none baseline" fxLayoutGap="5vw">
         <a routerLink="/news" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Actualités</a>
         <a routerLink="/acteurs" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Cartographie de acteurs</a>
-        <a routerLink="/orientation" [routerLinkActive]="'active'" i18n>Orienter un bénéficiaire</a>
-        <a routerLink="/page/qui-sommes-nous" [routerLinkActive]="'active'" i18n>Qui sommes-nous ?</a>
+        <a routerLink="/orientation" [routerLinkActive]="'active'" (click)="closeMenu()" i18n
+          >Orienter un bénéficiaire</a
+        >
+        <a routerLink="/page/qui-sommes-nous" [routerLinkActive]="'active'" (click)="closeMenu()" i18n
+          >Qui sommes-nous ?</a
+        >
         <a *ngIf="isAdmin" routerLink="/admin" [routerLinkActive]="'active'" (click)="closeMenu()">Administration</a>
       </div>
     </div>
diff --git a/src/app/map/components/layers.enum.ts b/src/app/map/components/layers.enum.ts
new file mode 100644
index 000000000..3878af93c
--- /dev/null
+++ b/src/app/map/components/layers.enum.ts
@@ -0,0 +1,5 @@
+export enum Layers {
+  mdm = 'mdm',
+  user = 'user',
+  structure = 'structure',
+}
diff --git a/src/app/map/components/map.component.html b/src/app/map/components/map.component.html
index 3af397dbb..1c4483bc5 100644
--- a/src/app/map/components/map.component.html
+++ b/src/app/map/components/map.component.html
@@ -1,3 +1,10 @@
 <div class="map-wrapper">
-  <div id="map" class="body-wrap" leaflet [leafletOptions]="mapOptions" (leafletMapReady)="onMapReady($event)"></div>
+  <div
+    id="map"
+    class="body-wrap"
+    [ngClass]="{ orientation: isOrientationForm }"
+    leaflet
+    [leafletOptions]="mapOptions"
+    (leafletMapReady)="onMapReady($event)"
+  ></div>
 </div>
diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
index a78caaa5c..bac0c2f7f 100644
--- a/src/app/map/components/map.component.scss
+++ b/src/app/map/components/map.component.scss
@@ -23,6 +23,9 @@
   @media #{$large-phone} {
     height: calc(100vh - #{$header-height} - 28px);
   }
+  &.orientation {
+    height: calc(96vh - #{$header-height} - #{$footer-height} - 68px);
+  }
 }
 
 ::ng-deep .leaflet-popup-close-button {
@@ -132,15 +135,33 @@
   .pop-up {
     text-align: center;
     padding-top: 20px;
+    &.orientation {
+      padding: 0;
+      text-align: -webkit-center;
+    }
 
     button {
       @include btn-search-filter;
       @include cn-bold-14;
       font-size: 16px;
     }
+
+    .orientationButton {
+      display: flex;
+      padding: 10px 20px;
+      border-radius: 20px;
+      margin: 0 4px;
+      color: $black;
+      background-color: $white;
+      border: solid 1px $grey-3;
+      min-width: 120px;
+    }
   }
   span {
-    display: inline-block;
+    margin-right: 4px;
+    &.eye {
+      margin-right: 11px;
+    }
   }
 }
 ::ng-deep .leaflet-popup-content-wrapper {
diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts
index de1990809..f844d5d69 100644
--- a/src/app/map/components/map.component.ts
+++ b/src/app/map/components/map.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, HostListener, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, HostListener, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { latLng, MapOptions, geoJSON, tileLayer, Map, latLngBounds, layerGroup } from 'leaflet';
 import { Structure } from '../../models/structure.model';
 import { GeojsonService } from '../../services/geojson.service';
@@ -9,6 +9,7 @@ import { MarkerType } from './markerType.enum';
 import metropole from '../../../assets/geojson/metropole.json';
 import L from 'leaflet';
 import 'leaflet.locatecontrol';
+import { ZoomLevel } from './zoomLevel.enum';
 
 @Component({
   selector: 'app-map',
@@ -16,14 +17,16 @@ import 'leaflet.locatecontrol';
   styleUrls: ['./map.component.scss'],
 })
 export class MapComponent implements OnChanges {
+  @Input() public isOrientationForm = false;
   @Input() public structures: Structure[] = [];
   @Input() public structuresToPrint: Structure[] = [];
   @Input() public toogleToolTipId: string;
   @Input() public selectedMarkerId: string;
   @Input() public isMapPhone: boolean;
   @Input() public locate = false;
-  @Input() public searchedValue: string;
-  @Output() selectedStructure: EventEmitter<Structure> = new EventEmitter<Structure>();
+  @Input() public searchedValue: string | [number, number];
+  @Output() public selectedStructure: EventEmitter<Structure> = new EventEmitter<Structure>();
+  @Output() public onOrientationButtonClick: EventEmitter<Structure> = new EventEmitter<Structure>();
   @Output() locatationTrigger: EventEmitter<boolean> = new EventEmitter<boolean>();
   private lc; // Locate control
   private currentStructure: Structure;
@@ -45,6 +48,10 @@ export class MapComponent implements OnChanges {
     if (event.target.classList.contains('btnShowDetails')) {
       this.selectedStructure.emit(this.currentStructure);
     }
+    if (event.target.classList.contains('add')) {
+      this.onOrientationButtonClick.emit(this.currentStructure);
+      this.getStructuresPositions(this.structures);
+    }
   }
 
   constructor(private mapService: MapService, private geoJsonService: GeojsonService) {
@@ -119,7 +126,7 @@ export class MapComponent implements OnChanges {
 
     if (changes.structuresToPrint) {
       if (changes.structuresToPrint.currentValue < changes.structuresToPrint.previousValue) {
-        this.mapService.setUnactiveMarker(
+        this.mapService?.setUnactiveMarker(
           this.toogleToolTipId,
           this.getMarkerTypeByStructureId(changes.structuresToPrint.previousValue)
         );
@@ -144,6 +151,15 @@ export class MapComponent implements OnChanges {
     );
   }
 
+  /**
+   * Create a user position marcker and center the map on it with a zoom level defined in ZoomLevel
+   * @param coords {[number, number]} Map center position
+   */
+  public centerOnCoordinates(coords: [number, number]): void {
+    this.mapService.createMarker(coords[1], coords[0], MarkerType.user, 'userLocation').addTo(this.map);
+    this.map.setView(new L.LatLng(coords[1], coords[0]), ZoomLevel.userPosition);
+  }
+
   /**
    * Get structures positions and add marker corresponding to those positons on the map
    */
@@ -174,7 +190,7 @@ export class MapComponent implements OnChanges {
    * @returns {MarkerType}
    */
   private getMarkerType(structure: Structure): MarkerType {
-    return structure.labelsQualifications.includes('conseillerNumFranceServices')
+    return structure?.labelsQualifications?.includes('conseillerNumFranceServices')
       ? MarkerType.conseillerFrance
       : MarkerType.structure;
   }
@@ -230,12 +246,18 @@ export class MapComponent implements OnChanges {
       '</h1>' +
       '<p>' +
       structure.getLabelTypeStructure() +
-      '</p><div>' +
-      '<span class="ico-dot-' +
-      cssAvailabilityClass +
-      '"></span><span>' +
-      structure.openDisplay() +
-      '</span></div><div class="pop-up"><button type="button" class="btnShowDetails">Voir</button></div>'
+      '</p>' +
+      (this.isOrientationForm
+        ? ''
+        : '<div>' +
+          '<span class="ico-dot-' +
+          cssAvailabilityClass +
+          '"></span><span>' +
+          structure.openDisplay() +
+          '</span></div>') +
+      (this.isOrientationForm
+        ? '<div class="pop-up orientation"><button type="button" class="orientationButton btnShowDetails"><span class="ico-gg-eye-alt eye"></span>Voir</button></div>'
+        : '<div class="pop-up"><button type="button" class="btnShowDetails">Voir</button></div>')
     );
   }
 
@@ -254,6 +276,12 @@ export class MapComponent implements OnChanges {
     this.map.on('locationfound', () => {
       this.locatationTrigger.emit(true);
     });
+
+    if (this.searchedValue) {
+      if (Array.isArray(this.searchedValue)) {
+        this.centerOnCoordinates(this.searchedValue);
+      }
+    }
   }
 
   /**
@@ -268,15 +296,15 @@ export class MapComponent implements OnChanges {
     layerGroup();
     const carteLayer = tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
       attribution: '&copy; <a href="https://carto.com/attributions">CARTO</a>',
-      maxZoom: 19,
+      maxZoom: ZoomLevel.max,
     });
     // Center is set on townhall
     // Zoom is blocked on 11 to prevent people to zoom out from metropole
     this.mapOptions = {
       center: latLng(45.764043, 4.835659),
-      maxZoom: 19,
-      zoom: 12,
-      minZoom: 10,
+      maxZoom: ZoomLevel.max,
+      zoom: ZoomLevel.regular,
+      minZoom: ZoomLevel.min,
       layers: [carteLayer],
     };
   }
diff --git a/src/app/map/components/markerType.enum.ts b/src/app/map/components/markerType.enum.ts
index 9d6c395c7..ade600852 100644
--- a/src/app/map/components/markerType.enum.ts
+++ b/src/app/map/components/markerType.enum.ts
@@ -2,4 +2,5 @@ export enum MarkerType {
   structure = 0,
   mdm = 1,
   conseillerFrance = 2,
+  user = 3,
 }
diff --git a/src/app/map/components/zoomLevel.enum.ts b/src/app/map/components/zoomLevel.enum.ts
new file mode 100644
index 000000000..fe020b772
--- /dev/null
+++ b/src/app/map/components/zoomLevel.enum.ts
@@ -0,0 +1,6 @@
+export enum ZoomLevel {
+  min = 10,
+  regular = 12,
+  userPosition = 15,
+  max = 19,
+}
diff --git a/src/app/map/services/map.service.ts b/src/app/map/services/map.service.ts
index 93b07319c..c65d92585 100644
--- a/src/app/map/services/map.service.ts
+++ b/src/app/map/services/map.service.ts
@@ -1,17 +1,15 @@
 import { Injectable } from '@angular/core';
 import { DivIcon, divIcon, Map, Marker } from 'leaflet';
+import { Layers } from '../components/layers.enum';
 import { MarkerType } from '../components/markerType.enum';
 import {
   markerIcon,
   markerIconActive,
   markerIconAddedToList,
-  markerIconFranceService,
-  markerIconFranceServiceActive,
-  markerIconFranceServiceAddedToList,
-  markerIconFranceServiceHover,
   markerIconHover,
   markerIconMdm,
   markerIconMdmActive,
+  userLocationIcon,
 } from './marker';
 @Injectable({
   providedIn: 'root',
@@ -51,51 +49,63 @@ export class MapService {
 
   private getLayerAttributton(markerType: MarkerType): string {
     if (markerType === MarkerType.mdm) {
-      return 'mdm';
+      return Layers.mdm;
+    } else if (markerType === MarkerType.user) {
+      return Layers.user;
     } else {
-      return 'structure';
+      return Layers.structure;
     }
   }
 
   // Note: Marke IconFranceService has been removed temporarly on order to rework on buisness needs.
   // This comment is applied for the next 4 methods
   private getMarkerIcon(markerType: MarkerType): DivIcon {
-    if (markerType === MarkerType.mdm) {
-      return markerIconMdm;
-    } else if (markerType === MarkerType.conseillerFrance) {
-      // return markerIconFranceService;
-      return markerIcon;
-    } else {
-      return markerIcon;
+    switch (markerType) {
+      case MarkerType.mdm:
+        return markerIconMdm;
+      case MarkerType.conseillerFrance:
+        return markerIcon;
+      case MarkerType.user:
+        return userLocationIcon;
+      default:
+        return markerIcon;
     }
   }
 
   private getActiveMarkerIcon(markerType: MarkerType): DivIcon {
-    if (markerType === MarkerType.mdm) {
-      return markerIconMdmActive;
-    } else if (markerType === MarkerType.conseillerFrance) {
-      // return markerIconFranceServiceActive;
-      return markerIconActive;
-    } else {
-      return markerIconActive;
+    switch (markerType) {
+      case MarkerType.mdm:
+        return markerIconMdmActive;
+      case MarkerType.conseillerFrance:
+        // return markerIconFranceServiceActive;
+        return markerIconActive;
+      case MarkerType.user:
+        return userLocationIcon;
+      default:
+        return markerIconActive;
     }
   }
 
   private getAddedToListMarkerIcon(markerType: MarkerType): DivIcon {
-    if (markerType === MarkerType.conseillerFrance) {
-      // return markerIconFranceServiceAddedToList;
-      return markerIconAddedToList;
-    } else {
-      return markerIconAddedToList;
+    switch (markerType) {
+      case MarkerType.conseillerFrance:
+        // return markerIconFranceServiceAddedToList;
+        return markerIconAddedToList;
+      case MarkerType.user:
+        return userLocationIcon;
+      default:
+        return markerIconAddedToList;
     }
   }
 
   private getHoverMarkerIcon(markerType: MarkerType): DivIcon {
-    if (markerType === MarkerType.conseillerFrance) {
-      // return markerIconFranceServiceHover;
-      return markerIconHover;
-    } else {
-      return markerIconHover;
+    switch (markerType) {
+      case MarkerType.conseillerFrance:
+        return markerIconHover;
+      case MarkerType.user:
+        return userLocationIcon;
+      default:
+        return markerIconHover;
     }
   }
 
@@ -161,7 +171,7 @@ export class MapService {
     MapService.markersList = {};
     if (map) {
       map.eachLayer((layer) => {
-        if (layer instanceof Marker && layer.options.attribution !== 'mdm') {
+        if (layer instanceof Marker && layer.options.attribution == Layers.structure) {
           map.removeLayer(layer);
         }
       });
diff --git a/src/app/map/services/marker.ts b/src/app/map/services/marker.ts
index fb940ba4c..e458b0b9d 100644
--- a/src/app/map/services/marker.ts
+++ b/src/app/map/services/marker.ts
@@ -28,6 +28,12 @@ export const markerIconAddedToList = divIcon({
   iconAnchor: [24, 48],
   popupAnchor: [0, -48],
 });
+export const userLocationIcon = divIcon({
+  className: null,
+  html: '<svg width="34" height="34"><use xlink:href="assets/ico/sprite.svg#user-location"></use></svg>',
+  iconSize: [34, 34],
+  iconAnchor: [17, 0],
+});
 export const markerIconMdm = divIcon({
   className: null,
   html:
diff --git a/src/app/models/address.model.ts b/src/app/models/address.model.ts
index d04d83abe..0b30ddc1c 100644
--- a/src/app/models/address.model.ts
+++ b/src/app/models/address.model.ts
@@ -2,4 +2,5 @@ export class Address {
   numero: string = null;
   street: string = null;
   commune: string = null;
+  coordinates? = [];
 }
diff --git a/src/app/models/orientation-filter.object.ts b/src/app/models/orientation-filter.object.ts
index 48a52e4ac..49fe9ca54 100644
--- a/src/app/models/orientation-filter.object.ts
+++ b/src/app/models/orientation-filter.object.ts
@@ -7,7 +7,8 @@ export class OrientationFormFilters {
   handicap: boolean;
   passNumeric: boolean;
   structureAccompaniment: string;
-  contactAccompaniment: string;
+  contactAccompanimentPhone: string;
+  contactAccompanimentEmail: string;
   beneficiaryName: string;
   beneficiaryNeedCommentary: string;
   address: Address;
diff --git a/src/app/newsletter-subscription/newsletter-subscription.component.scss b/src/app/newsletter-subscription/newsletter-subscription.component.scss
index 4bf4d917c..f3c913b2c 100644
--- a/src/app/newsletter-subscription/newsletter-subscription.component.scss
+++ b/src/app/newsletter-subscription/newsletter-subscription.component.scss
@@ -10,7 +10,7 @@
 }
 
 .form-input {
-  background-color: white;
+  background-color: $white;
   width: 100%;
 }
 
diff --git a/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts b/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts
index 10f2efed1..a1115c3ac 100644
--- a/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts
+++ b/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts
@@ -59,6 +59,7 @@ export class AddressAutocompleteComponent implements OnInit {
     address.numero = hit.properties.housenumber ? hit.properties.housenumber : null;
     address.street = hit.properties.street;
     address.commune = hit.properties.city;
+    address.coordinates = hit.geometry.coordinates;
     const value = this.parseHitToAddress(hit);
     // Set input value
     this.searchAddress.nativeElement.value = value;
diff --git a/src/app/shared/components/svg-icon/svg-icon.component.scss b/src/app/shared/components/svg-icon/svg-icon.component.scss
index bed7e3e0d..0ce39a373 100644
--- a/src/app/shared/components/svg-icon/svg-icon.component.scss
+++ b/src/app/shared/components/svg-icon/svg-icon.component.scss
@@ -51,6 +51,10 @@
     fill: $grey-1;
     stroke: $grey-1;
   }
+  &.green {
+    fill: $green-1;
+    stroke: $green-1;
+  }
 }
 
 svg {
diff --git a/src/app/structure-list/components/card/card.component.html b/src/app/structure-list/components/card/card.component.html
index bfe44fd1a..eae83fda6 100644
--- a/src/app/structure-list/components/card/card.component.html
+++ b/src/app/structure-list/components/card/card.component.html
@@ -1,42 +1,57 @@
-<div class="structure" fxLayout="column" (click)="cardClicked()" (mouseenter)="cardHover()">
-  <div class="headerStructure" fxLayout="row" fxLayoutAlign="space-between baseline" fxLayoutGap="16px">
-    <div fxLayout="column" fxLayoutAlign="end">
-      <span class="structure-name" [ngClass]="{ notClaimed: !isClaimed }">{{ structure.structureName }}</span>
-      <span class="typeStructure">{{ structure.getLabelTypeStructure() }}</span>
-    </div>
-    <div class="distanceStructure" fxLayout="column" fxLayoutAlign="none end">
-      <div *ngIf="!isOrientation">
-        {{ this.structure.address.commune }}
-      </div>
-      <div
-        fxLayout="row"
-        *ngIf="isOrientation && !isSelected"
-        class="selection-button selected"
-        (click)="cardAddToList(); $event.stopPropagation()"
-      >
-        <app-svg-icon [type]="'ico'" [icon]="'add'" [iconColor]="'black'"></app-svg-icon>ajouter à la liste
+<div
+  class="structure"
+  fxLayout="column"
+  (click)="cardClicked()"
+  (mouseenter)="cardHover()"
+  [ngClass]="{ orientation: isOrientation }"
+>
+  <div class="left">
+    <div fxLayout="row" fxLayoutAlign="space-between baseline" fxLayoutGap="16px">
+      <div fxLayout="column" fxLayoutAlign="end">
+        <span class="structure-name" [ngClass]="{ notClaimed: !isClaimed }">{{ structure.structureName }}</span>
+        <span class="typeStructure">{{ structure.getLabelTypeStructure() }}</span>
       </div>
-      <div
-        fxLayout="row"
-        *ngIf="isOrientation && isSelected"
-        class="selection-button to-select"
-        (click)="cardAddToList(); $event.stopPropagation()"
-      >
-        <app-svg-icon [type]="'ico'" [icon]="'validate'" [iconColor]="'white'"></app-svg-icon>
-        retirer de la liste
-      </div>
-      <div *ngIf="structure.distance">
-        {{ this.formatDistance() }}
+      <div class="distanceStructure" fxLayout="column" fxLayoutAlign="none end">
+        <div *ngIf="!isOrientation">
+          {{ this.structure.address.commune }}
+        </div>
       </div>
     </div>
+    <div
+      fxLayout="row"
+      fxLayoutAlign="none flex-end"
+      fxLayoutGap="7px"
+      *ngIf="structure.hasEquipments() && !isOrientation"
+    >
+      <app-svg-icon
+        *ngFor="let equipement of filterOnlyEquipments(structure.equipmentsAndServices)"
+        [type]="'ico'"
+        [iconColor]="'grey'"
+        [icon]="structure.getEquipmentsIcon(equipement)"
+        [title]="structure.getEquipmentsTitle(equipement)"
+      ></app-svg-icon>
+    </div>
+    <div class="distance" *ngIf="structure.distance">
+      {{ this.formatDistance() }}
+    </div>
   </div>
-  <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="7px" *ngIf="structure.hasEquipments()">
-    <app-svg-icon
-      *ngFor="let equipement of filterOnlyEquipments(structure.equipmentsAndServices)"
-      [type]="'ico'"
-      [iconColor]="'grey'"
-      [icon]="structure.getEquipmentsIcon(equipement)"
-      [title]="structure.getEquipmentsTitle(equipement)"
-    ></app-svg-icon>
+  <div class="actions right" *ngIf="isOrientation">
+    <div
+      fxLayout="row"
+      *ngIf="!isSelected"
+      class="selection-button selected"
+      (click)="cardAddToList(); $event.stopPropagation()"
+    >
+      <app-svg-icon class="add-icon" [type]="'ico'" [icon]="'add'" [iconColor]="'green'"></app-svg-icon>Ajouter
+    </div>
+    <div
+      fxLayout="row"
+      *ngIf="isSelected"
+      class="selection-button to-select"
+      (click)="cardAddToList(); $event.stopPropagation()"
+    >
+      <app-svg-icon class="add-icon" [type]="'ico'" [icon]="'validate'" [iconColor]="'white'"></app-svg-icon>
+      Ajouté
+    </div>
   </div>
 </div>
diff --git a/src/app/structure-list/components/card/card.component.scss b/src/app/structure-list/components/card/card.component.scss
index 7b5fb40ae..220adda58 100644
--- a/src/app/structure-list/components/card/card.component.scss
+++ b/src/app/structure-list/components/card/card.component.scss
@@ -30,9 +30,6 @@
     color: $grey-3;
     width: 50%;
   }
-  &:last-child {
-    border-bottom: none;
-  }
 }
 
 .selection-button {
@@ -40,22 +37,44 @@
   font-weight: bold;
   justify-content: center;
   align-items: center;
-  min-width: 180px;
-  height: 30px;
+  min-width: 120px;
+  height: 40px;
   border-radius: 20px;
-  padding: 3px 10px;
-  margin-bottom: 10px;
 }
 
 .selected {
-  border-style: solid;
-  border-width: 2px;
+  border: solid 1px $grey-3;
   background-color: $white;
-  border-color: $black;
   color: $black;
 }
 .to-select {
-  color: white;
+  color: $white;
   border-style: none;
   background: #47c562;
 }
+
+.distance {
+  color: $grey-3;
+}
+
+.add-icon {
+  color: $green-1;
+}
+
+.orientation {
+  flex-direction: row !important;
+
+  .left {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 70%;
+  }
+
+  .right {
+    margin-top: 6%;
+    @media #{$large-phone} {
+      margin-left: unset;
+    }
+  }
+}
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.scss b/src/app/structure-list/components/structure-details/structure-details.component.scss
index de1fd0ab8..2b5a439e1 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.scss
+++ b/src/app/structure-list/components/structure-details/structure-details.component.scss
@@ -22,13 +22,13 @@ a {
   padding: 0px 24px;
   overflow: auto;
   @media #{$tablet} {
-    width: calc(100% - 2 * 24px);
-    position: inherit;
-    height: 100%;
-    overflow: unset;
     .printButton {
       display: none !important;
     }
+
+    .ico-close {
+      margin-left: 16px;
+    }
   }
   .printButton {
     margin-right: 75px;
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.ts b/src/app/structure-list/components/structure-details/structure-details.component.ts
index 5ccbc64f4..cae5b0b60 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.ts
+++ b/src/app/structure-list/components/structure-details/structure-details.component.ts
@@ -94,7 +94,6 @@ export class StructureDetailsComponent implements OnInit {
           this.socialAndProfessionalsReferentiel = referentiel;
         }
       });
-      this.setServiceCategories();
       if (this.printMode) {
         this.printService.onDataReady();
       }
@@ -250,24 +249,6 @@ export class StructureDetailsComponent implements OnInit {
     }
   }
 
-  public setServiceCategories(): void {
-    this.baseSkills = this.structure.baseSkills.map((skill) =>
-      _.find(this.baseSkillssReferentiel.modules, { id: skill })
-    );
-    this.accessRights = this.structure.accessRight.map((rights) =>
-      _.find(this.accessRightsReferentiel.modules, { id: rights })
-    );
-    this.parentingHelp = this.structure.parentingHelp.map((help) =>
-      _.find(this.parentingHelpsReferentiel.modules, { id: help })
-    );
-    this.socialAndProfessional = this.structure.socialAndProfessional.map((skill) =>
-      _.find(this.socialAndProfessionalsReferentiel.modules, { id: skill })
-    );
-    this.digitalCultureSecurity = this.structure.digitalCultureSecurity.map((skill) =>
-      _.find(this.digitalCultureSecuritysReferentiel.modules, { id: skill })
-    );
-  }
-
   public keepOriginalOrder = (a, b) => a.key;
 
   public isBaseSkills(): boolean {
diff --git a/src/app/structure-list/models/category.model.ts b/src/app/structure-list/models/category.model.ts
index 2aa78bbf3..b130dc133 100644
--- a/src/app/structure-list/models/category.model.ts
+++ b/src/app/structure-list/models/category.model.ts
@@ -2,6 +2,7 @@ import { Module } from './module.model';
 
 export class Category {
   name: string;
+  surname: string;
   id: string;
   modules: Module[];
 
diff --git a/src/app/structure-list/models/filter.model.ts b/src/app/structure-list/models/filter.model.ts
index 9ca536124..25d7ff825 100644
--- a/src/app/structure-list/models/filter.model.ts
+++ b/src/app/structure-list/models/filter.model.ts
@@ -2,10 +2,12 @@ export class Filter {
   name: string;
   value: string;
   text?: string;
+  checked: boolean;
 
   constructor(name: string, value: any, text?: string) {
     this.name = name;
     this.value = value.toString();
     this.text = text;
+    this.checked = true;
   }
 }
diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html
index 1b39ec645..9f2fc1b20 100644
--- a/src/app/structure-list/structure-list.component.html
+++ b/src/app/structure-list/structure-list.component.html
@@ -18,6 +18,7 @@
     [structure]="structure"
     (showDetails)="showDetails($event, filters)"
     (hover)="handleCardHover($event)"
+    class="structure-card"
   ></app-card>
   <p *ngIf="structureList && structureList.length <= 0">Il n'y a aucune réponse correspondant à votre recherche</p>
 </div>
diff --git a/src/app/structure-list/structure-list.component.scss b/src/app/structure-list/structure-list.component.scss
index 1817ffba9..56305e76c 100644
--- a/src/app/structure-list/structure-list.component.scss
+++ b/src/app/structure-list/structure-list.component.scss
@@ -12,11 +12,16 @@
   padding-left: 9px;
   margin: 0 16px;
 }
+
 .listCard {
   overflow-y: auto;
   padding: 0 25px;
 }
 
+::ng-deep .structure-card:last-child .structure {
+  border-bottom: unset !important;
+}
+
 @media print {
   .listCard {
     display: none;
diff --git a/src/app/utils/utils.ts b/src/app/utils/utils.ts
index e37ab99dd..a949f40fd 100644
--- a/src/app/utils/utils.ts
+++ b/src/app/utils/utils.ts
@@ -14,4 +14,15 @@ export class Utils {
       form.get(controlName).setValue(phoneNoSpace.replace(/(?!^)(?=(?:\d{2})+$)/g, ' ')); //NOSONAR
     }
   }
+
+  public modifyPhoneValue(phoneNumber: string): string {
+    // Take length of phone number without spaces.
+    const phoneNoSpace = phoneNumber.replace(/\s/g, '');
+    // Check to refresh every 2 number.
+    if (phoneNoSpace.length % 2 === 0) {
+      // Add space every 2 number
+      return phoneNoSpace.replace(/(?!^)(?=(?:\d{2})+$)/g, ' '); //NOSONAR
+    }
+    return phoneNumber;
+  }
 }
diff --git a/src/assets/form/sprite.svg b/src/assets/form/sprite.svg
index 356b83c16..f159036d9 100644
--- a/src/assets/form/sprite.svg
+++ b/src/assets/form/sprite.svg
@@ -382,5 +382,35 @@
 <path fill-rule="evenodd" clip-rule="evenodd" stroke="none" d="M0 9C0 8.44772 0.447715 8 1 8H21C21.5523 8 22 8.44772 22 9V23C22 23.5523 21.5523 24 21 24H14V25.6L16.3685 26.3106C16.7433 26.423 17 26.768 17 27.1593C17 27.6487 16.6033 28.0454 16.1139 28.0454H5.88612C5.39673 28.0454 5 27.6487 5 27.1593C5 26.768 5.25668 26.423 5.63149 26.3106L8 25.6V24H1C0.447716 24 0 23.5523 0 23V9ZM1 9H21V21H1V9Z" fill="#333333"/>
 </symbol>
 
+<symbol id="grandLyonLaMetropole" width="189" height="43" viewBox="0 0 189 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5084_112181)">
+<path d="M14.6188 24.1594C13.8364 25.1028 12.8909 25.8619 11.8386 26.3915C10.7863 26.921 9.64874 27.2102 8.49363 27.2418C7.33852 27.2733 6.18949 27.0467 5.11498 26.5753C4.04046 26.1039 3.06242 25.3974 2.23911 24.4978C0.0358825 22.0532 1.03355e-07 19.6802 7.15522e-08 13.6244C3.9749e-08 7.56856 0.043059 5.19162 2.23911 2.74699C3.03301 1.87136 3.97472 1.17801 5.01036 0.706612C6.04601 0.235214 7.15526 -0.00498298 8.27465 -0.000236215C12.516 -0.000236237 15.7706 3.08541 16.5278 7.82736L14.6977 7.82736C13.9801 4.14051 11.5436 1.80736 8.28541 1.80736C7.4372 1.79871 6.59591 1.97729 5.81047 2.33273C5.02504 2.68816 4.31114 3.21334 3.71031 3.87773C1.96998 5.81273 1.83722 7.86717 1.83722 13.6244C1.83722 19.3816 1.97357 21.452 3.70314 23.3671C4.30384 24.0316 5.01772 24.5569 5.80318 24.9124C6.58864 25.2678 7.43 25.4463 8.27824 25.4375C9.23644 25.4435 10.1839 25.2138 11.0526 24.765C11.9212 24.3161 12.6894 23.6592 13.3019 22.8415C14.3461 21.4122 14.7551 19.8315 14.7551 17.5382L14.7551 15.1294L8.27465 15.1294L8.27465 13.3218L16.5852 13.3218L16.5852 17.7014C16.5852 20.4885 16.0433 22.4792 14.6188 24.1753" fill="#FF0101"/>
+<path d="M31.9782 2.03265L24.8554 2.03265L24.8554 12.8702L31.9782 12.8702C35.0642 12.8702 37.3033 11.1383 37.3033 7.45144C37.3033 3.76459 35.0642 2.03265 31.9782 2.03265ZM37.2674 27.0204L31.501 14.6778L24.8554 14.6778L24.8554 27.0204L23.0254 27.0204L23.0254 0.237L32.2151 0.236999C36.1622 0.236999 39.1333 2.75728 39.1333 7.42357C39.1333 11.4051 36.9624 14.0089 33.5714 14.65L39.4024 27.0324L37.2674 27.0204Z" fill="#FF0101"/>
+<path d="M51.7832 2.93246L46.7308 18.6991L56.8355 18.6991L51.7832 2.93246ZM59.516 27.0164L57.4133 20.5067L46.1531 20.5067L44.0504 27.0164L42.084 27.0164L50.9686 0.236999L52.5977 0.236999L61.4824 27.0324L59.516 27.0164Z" fill="#FF0101"/>
+<path d="M81.4838 27.0166L67.5468 3.72496L67.5468 27.0166L65.7168 27.0166L65.7168 0.221252L67.5468 0.221252L81.4838 23.4413L81.4838 0.221252L83.3175 0.221252L83.3175 27.0166L81.4838 27.0166Z" fill="#FF0101"/>
+<path d="M103.623 4.09904C102.234 2.50644 100.368 2.03265 98.4342 2.03265L92.5996 2.03265L92.5996 25.2088L98.4306 25.2088C100.365 25.2088 102.231 24.7191 103.619 23.1385C105.55 20.9566 105.413 16.2147 105.413 13.2445C105.413 10.2743 105.546 6.28487 103.619 4.08709L103.623 4.09904ZM104.907 24.5599C103.472 26.1525 101.384 27.0045 98.872 27.0045L90.7695 27.0045L90.7695 0.237L98.8755 0.236999C101.387 0.236999 103.487 1.10496 104.911 2.68561C107.355 5.39302 107.251 9.64524 107.251 13.2604C107.251 16.8756 107.355 21.8604 104.911 24.5718L104.907 24.5599Z" fill="#FF0101"/>
+<path d="M112.846 27.0166L112.846 0.221252L117.561 0.221252L117.561 22.3503L128.516 22.3503L128.516 27.0166L112.846 27.0166Z" fill="#333333"/>
+<path d="M138.852 16.0277L138.852 27.0166L134.173 27.0166L134.173 16.0277L126.914 0.221252L132.035 0.221252L136.545 11.027L140.991 0.221252L146.108 0.221252L138.852 16.0277Z" fill="#333333"/>
+<path d="M159.805 6.09478C159.424 5.62814 158.957 5.25868 158.436 5.0119C157.914 4.76512 157.35 4.64691 156.783 4.66543C156.212 4.64699 155.643 4.76508 155.116 5.01168C154.59 5.25829 154.117 5.62767 153.73 6.09478C152.815 7.22154 152.578 8.48367 152.578 13.6198C152.578 18.7559 152.815 20.014 153.73 21.1448C154.117 21.6117 154.59 21.9809 155.117 22.2275C155.643 22.4741 156.212 22.5923 156.783 22.5741C157.35 22.5924 157.914 22.4741 158.435 22.2273C158.957 21.9805 159.424 21.6112 159.805 21.1448C160.72 20.014 160.992 18.7559 160.992 13.6198C160.992 8.48367 160.723 7.22154 159.805 6.09478ZM163.311 24.3101C161.561 26.1934 159.219 27.2467 156.782 27.2467C154.344 27.2467 152.002 26.1934 150.253 24.3101C147.813 21.6026 147.877 18.2502 147.877 13.6238C147.877 8.99728 147.813 5.6608 150.253 2.93747C152.002 1.05412 154.344 0.000793424 156.782 0.000793411C159.219 0.000793399 161.561 1.05412 163.311 2.93747C165.754 5.64487 165.718 8.9933 165.718 13.6238C165.718 18.2542 165.74 21.6026 163.311 24.3101Z" fill="#333333"/>
+<path d="M184.79 27.0166L175.227 10.5731L175.227 27.0166L170.516 27.0166L170.516 0.221252L174.721 0.221252L184.284 16.6289L184.284 0.221252L188.999 0.221252L188.999 27.0166L184.79 27.0166Z" fill="#333333"/>
+<path d="M160.242 35.4745L160.264 35.4745C160.376 35.2188 160.553 35.0047 160.773 34.8578C160.992 34.7108 161.246 34.6374 161.502 34.6464C162.363 34.6464 163.239 35.0445 163.239 37.6524C163.239 39.1414 163.196 40.8575 161.444 40.8575C161.208 40.8618 160.974 40.7976 160.766 40.6712C160.559 40.5449 160.384 40.3607 160.26 40.1368L160.228 40.1368L160.228 42.9995L159.363 42.9995L159.363 34.7658L160.239 34.7658L160.242 35.4745ZM162.324 37.6524C162.324 36.7526 162.324 35.4387 161.226 35.4387C160.128 35.4387 160.246 37.095 160.246 38.0067C160.246 38.803 160.289 40.0651 161.258 40.0651C162.227 40.0651 162.324 39.2569 162.324 37.6643L162.324 37.6524Z" fill="#333333"/>
+<path d="M99.992 39.8734L99.9705 39.8734C99.8752 40.1805 99.6905 40.4438 99.4457 40.6218C99.2008 40.7998 98.9095 40.8825 98.6177 40.8568C97.4766 40.8568 97.1465 40.0406 97.1465 38.8939C97.1465 37.0824 98.7469 37.0027 99.9705 37.0346C99.992 36.2383 100.003 35.3783 99.0627 35.3783C98.9391 35.3673 98.815 35.3884 98.7001 35.44C98.5853 35.4916 98.4828 35.5722 98.401 35.6754C98.3191 35.7786 98.26 35.9016 98.2285 36.0345C98.197 36.1675 98.1939 36.3068 98.2194 36.4414L97.2864 36.4414C97.3295 35.1036 97.9682 34.6417 99.1093 34.6417C100.494 34.6417 100.857 35.438 100.857 36.4414L100.857 39.316C100.86 39.7921 100.896 40.2672 100.964 40.7374L100.006 40.7374L99.992 39.8734ZM98.022 38.9616C98.022 39.5389 98.2768 40.0605 98.8617 40.0605C99.4466 40.0605 100.057 39.6942 99.9705 37.7632C99.1416 37.7791 98.022 37.6995 98.022 38.9656L98.022 38.9616Z" fill="#333333"/>
+<path d="M115.722 40.7375L115.722 36.5968C115.722 35.9916 115.572 35.4382 114.868 35.4382C114.724 35.4407 114.581 35.4776 114.451 35.5462C114.32 35.6149 114.204 35.7138 114.111 35.8363C113.976 36.1038 113.905 36.4056 113.907 36.7123L113.907 40.7336L113.038 40.7336L113.038 36.0075C113.038 35.6094 113.017 35.1794 112.984 34.7653L113.91 34.7653L113.91 35.5099L113.932 35.5099C114.042 35.2248 114.232 34.9868 114.474 34.8311C114.715 34.6755 114.996 34.6105 115.274 34.6459C115.528 34.6248 115.783 34.6862 116.006 34.8226C116.23 34.959 116.413 35.1646 116.533 35.4143C116.652 35.1581 116.838 34.9478 117.067 34.8107C117.295 34.6736 117.556 34.6162 117.814 34.6459C118.381 34.6459 119.285 34.7892 119.285 36.1947L119.285 40.7375L118.41 40.7375L118.41 36.5968C118.41 35.9916 118.263 35.4382 117.556 35.4382C117.438 35.4175 117.317 35.4268 117.203 35.4654C117.088 35.504 116.983 35.5709 116.896 35.6612C116.684 35.9597 116.579 36.3334 116.598 36.7123L116.598 40.7336L115.722 40.7375Z" fill="#333333"/>
+<path d="M125.656 38.063C125.656 39.7313 126.061 40.0538 126.732 40.0538C127.328 40.0538 127.64 39.5203 127.669 38.9191L128.627 38.9191C128.627 40.2449 127.881 40.8461 126.75 40.8461C125.62 40.8461 124.705 40.4479 124.705 37.8281C124.705 36.0763 124.884 34.6429 126.75 34.6429C128.286 34.6429 128.67 35.5786 128.67 37.5534L128.67 38.063L125.656 38.063ZM127.755 37.3304C127.755 35.5905 127.317 35.3795 126.679 35.3795C126.126 35.3795 125.667 35.6741 125.656 37.3304L127.755 37.3304ZM127.97 32.1943L126.575 33.8626L125.857 33.8626L126.808 32.1943L127.97 32.1943Z" fill="#333333"/>
+<path d="M134.605 34.7658L134.605 33.6191L135.481 33.1812L135.481 34.7737L136.654 34.7737L136.654 35.5063L135.481 35.5063L135.481 39.1613C135.481 39.5595 135.481 40.0253 136.281 40.0253C136.346 40.0253 136.482 40.0014 136.676 39.9775L136.676 40.7221C136.389 40.746 136.098 40.8176 135.811 40.8176C134.979 40.8176 134.605 40.4195 134.605 39.7546L134.605 35.4984L133.723 35.4984L133.723 34.7658L134.605 34.7658Z" fill="#333333"/>
+<path d="M143.185 35.674L143.217 35.674C143.576 34.7623 144.028 34.6588 144.879 34.6588L144.879 35.6661L144.646 35.6302C144.568 35.6157 144.49 35.6077 144.412 35.6063C143.443 35.6063 143.196 36.4226 143.196 37.2268L143.196 40.7544L142.32 40.7544L142.32 34.7822L143.196 34.7822L143.185 35.674Z" fill="#333333"/>
+<path d="M149.852 37.84C149.852 36.0882 150.031 34.6548 151.897 34.6548C153.763 34.6548 153.942 36.1001 153.942 37.84C153.942 40.4797 153.034 40.858 151.897 40.858C150.759 40.858 149.852 40.4797 149.852 37.84ZM153.027 37.4419C153.027 35.8095 152.568 35.4511 151.897 35.4511C151.226 35.4511 150.767 35.8055 150.767 37.4419C150.767 39.3809 150.993 40.0816 151.897 40.0816C152.801 40.0816 153.031 39.3649 153.031 37.426L153.027 37.4419Z" fill="#333333"/>
+<path d="M168.586 37.84C168.586 36.0882 168.765 34.6548 170.631 34.6548C172.497 34.6548 172.68 36.1001 172.68 37.84C172.68 40.4797 171.772 40.858 170.631 40.858C169.49 40.858 168.586 40.4797 168.586 37.84ZM171.762 37.4419C171.762 35.8095 171.302 35.4511 170.631 35.4511C169.96 35.4511 169.501 35.8055 169.501 37.4419C169.501 39.3809 169.723 40.0816 170.631 40.0816C171.539 40.0816 171.765 39.3649 171.765 37.426L171.762 37.4419Z" fill="#333333"/>
+<path d="M179.221 40.7386L178.346 40.7386L178.346 32.1983L179.218 32.1983L179.221 40.7386Z" fill="#333333"/>
+<path d="M185.674 38.0618C185.674 39.7301 186.079 40.0526 186.75 40.0526C187.346 40.0526 187.658 39.519 187.687 38.9178L188.645 38.9178C188.645 40.2437 187.898 40.8449 186.768 40.8449C185.638 40.8449 184.723 40.4467 184.723 37.8269C184.723 36.0751 184.902 34.6417 186.768 34.6417C188.304 34.6417 188.688 35.5774 188.688 37.5522L188.688 38.0618L185.674 38.0618ZM187.773 37.3292C187.773 35.5893 187.335 35.3783 186.696 35.3783C186.144 35.3783 185.684 35.6729 185.674 37.3292L187.773 37.3292Z" fill="#333333"/>
+<path d="M92.1236 40.7386L91.248 40.7386L91.248 32.1983L92.1236 32.1983L92.1236 40.7386Z" fill="#333333"/>
+</g>
+<defs>
+<clipPath id="clip0_5084_112181">
+<rect width="189" height="43" fill="white"/>
+</clipPath>
+</defs>
+</symbol>
+
 </svg>
 
diff --git a/src/assets/ico/sprite.svg b/src/assets/ico/sprite.svg
index e7b918e0f..81f91788f 100644
--- a/src/assets/ico/sprite.svg
+++ b/src/assets/ico/sprite.svg
@@ -292,6 +292,13 @@
 <path fill-rule="evenodd" clip-rule="evenodd" d="M17.3405 17.1848C16.2256 17.652 15.5 18.7428 15.5 19.9517V34.6087L22.5 34.6087V30.1087C22.5 29.2802 23.1716 28.6087 24 28.6087C24.8284 28.6087 25.5 29.2802 25.5 30.1087V34.6087L32.5 34.6087V20.0123C32.5 18.7731 31.7381 17.6614 30.5823 17.2143L29.0555 16.6237C28.6291 16.4588 28.246 16.1986 27.9355 15.863L25.4183 13.1419C24.6451 12.3061 23.3312 12.2834 22.5297 13.0921L19.6982 15.9488C19.4206 16.2289 19.0906 16.4515 18.7269 16.6039L17.3405 17.1848ZM25.5 16.1087C25.5 16.9371 24.8284 17.6087 24 17.6087C23.1716 17.6087 22.5 16.9371 22.5 16.1087C22.5 15.2802 23.1716 14.6087 24 14.6087C24.8284 14.6087 25.5 15.2802 25.5 16.1087ZM18.75 27.544C18.0406 27.6631 17.5 28.2801 17.5 29.0233V30.3587H18.75V27.544ZM17.5 33.5233V30.8587H18.75V33.5233H17.5ZM19.25 33.5233V30.8587H20.5V33.5233H19.25ZM20.5 29.0233V30.3587H19.25V27.544C19.9594 27.6631 20.5 28.2801 20.5 29.0233ZM27.5 29.0233C27.5 28.2801 28.0406 27.6631 28.75 27.544V30.3587H27.5V29.0233ZM27.5 30.8587V33.5233H28.75V30.8587H27.5ZM29.25 30.8587V33.5233H30.5V30.8587H29.25ZM30.5 30.3587V29.0233C30.5 28.2801 29.9594 27.6631 29.25 27.544V30.3587H30.5ZM28.75 19.6087C28.0406 19.7277 27.5 20.3447 27.5 21.0879V22.4233H28.75V19.6087ZM27.5 25.5879V22.9233H28.75V25.5879H27.5ZM29.25 25.5879V22.9233H30.5V25.5879H29.25ZM30.5 21.0879V22.4233H29.25V19.6087C29.9594 19.7277 30.5 20.3447 30.5 21.0879ZM22.5 21.0879C22.5 20.3447 23.0406 19.7277 23.75 19.6087V22.4233H22.5V21.0879ZM22.5 22.9233V25.5879H23.75V22.9233H22.5ZM24.25 22.9233V25.5879H25.5V22.9233H24.25ZM25.5 22.4233V21.0879C25.5 20.3447 24.9594 19.7277 24.25 19.6087V22.4233H25.5ZM18.75 19.6087C18.0406 19.7277 17.5 20.3447 17.5 21.0879V22.4233H18.75V19.6087ZM17.5 25.5879V22.9233H18.75V25.5879H17.5ZM19.25 25.5879V22.9233H20.5V25.5879H19.25ZM20.5 21.0879V22.4233H19.25V19.6087C19.9594 19.7277 20.5 20.3447 20.5 21.0879Z" fill="#BD9E6A"/>
 </symbol>
 
+<symbol id="user-location" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="17" cy="17" r="16.5" fill="#ED3939" fill-opacity="0.15" stroke="white"/>
+<circle cx="17" cy="17" r="6" fill="#ED3939"/>
+<path opacity="0.35" d="M19.625 12.9167C18.1502 12.2215 16.7083 12.0417 15.25 12.9167C16.4166 12.9167 18.7694 14.3782 19.3737 15.1918C20.5 16.7084 20.6016 19.0553 20.2083 19.3334C20.4541 19.4724 21.5026 18.3063 21.6666 17C21.8306 15.6948 21.0998 13.6119 19.625 12.9167Z" fill="white"/>
+</symbol>
+
+
 <symbol id="conseillerFranceService" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
 <path d="M24.1752 4.3111L12 11.3612V25.4094L23.5247 45.3111H24.8255L36.3503 25.4094V11.3612L24.1752 4.3111Z"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M24.1752 2L38.3503 10.2083V25.9467L25.9785 47.3111H22.3718L10 25.9467V10.2082L24.1752 2ZM12 25.4094V11.3612L24.1752 4.31111L36.3503 11.3612V25.4094L24.8255 45.3111H23.5247L12 25.4094Z" fill="white"/>
diff --git a/src/assets/logos/grandLyonLaMetropole.svg b/src/assets/logos/grandLyonLaMetropole.svg
new file mode 100644
index 000000000..9d443ffa2
--- /dev/null
+++ b/src/assets/logos/grandLyonLaMetropole.svg
@@ -0,0 +1,29 @@
+<svg width="189" height="43" viewBox="0 0 189 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5084_112181)">
+<path d="M14.6188 24.1594C13.8364 25.1028 12.8909 25.8619 11.8386 26.3915C10.7863 26.921 9.64874 27.2102 8.49363 27.2418C7.33852 27.2733 6.18949 27.0467 5.11498 26.5753C4.04046 26.1039 3.06242 25.3974 2.23911 24.4978C0.0358825 22.0532 1.03355e-07 19.6802 7.15522e-08 13.6244C3.9749e-08 7.56856 0.043059 5.19162 2.23911 2.74699C3.03301 1.87136 3.97472 1.17801 5.01036 0.706612C6.04601 0.235214 7.15526 -0.00498298 8.27465 -0.000236215C12.516 -0.000236237 15.7706 3.08541 16.5278 7.82736L14.6977 7.82736C13.9801 4.14051 11.5436 1.80736 8.28541 1.80736C7.4372 1.79871 6.59591 1.97729 5.81047 2.33273C5.02504 2.68816 4.31114 3.21334 3.71031 3.87773C1.96998 5.81273 1.83722 7.86717 1.83722 13.6244C1.83722 19.3816 1.97357 21.452 3.70314 23.3671C4.30384 24.0316 5.01772 24.5569 5.80318 24.9124C6.58864 25.2678 7.43 25.4463 8.27824 25.4375C9.23644 25.4435 10.1839 25.2138 11.0526 24.765C11.9212 24.3161 12.6894 23.6592 13.3019 22.8415C14.3461 21.4122 14.7551 19.8315 14.7551 17.5382L14.7551 15.1294L8.27465 15.1294L8.27465 13.3218L16.5852 13.3218L16.5852 17.7014C16.5852 20.4885 16.0433 22.4792 14.6188 24.1753" fill="#FF0101"/>
+<path d="M31.9782 2.03265L24.8554 2.03265L24.8554 12.8702L31.9782 12.8702C35.0642 12.8702 37.3033 11.1383 37.3033 7.45144C37.3033 3.76459 35.0642 2.03265 31.9782 2.03265ZM37.2674 27.0204L31.501 14.6778L24.8554 14.6778L24.8554 27.0204L23.0254 27.0204L23.0254 0.237L32.2151 0.236999C36.1622 0.236999 39.1333 2.75728 39.1333 7.42357C39.1333 11.4051 36.9624 14.0089 33.5714 14.65L39.4024 27.0324L37.2674 27.0204Z" fill="#FF0101"/>
+<path d="M51.7832 2.93246L46.7308 18.6991L56.8355 18.6991L51.7832 2.93246ZM59.516 27.0164L57.4133 20.5067L46.1531 20.5067L44.0504 27.0164L42.084 27.0164L50.9686 0.236999L52.5977 0.236999L61.4824 27.0324L59.516 27.0164Z" fill="#FF0101"/>
+<path d="M81.4838 27.0166L67.5468 3.72496L67.5468 27.0166L65.7168 27.0166L65.7168 0.221252L67.5468 0.221252L81.4838 23.4413L81.4838 0.221252L83.3175 0.221252L83.3175 27.0166L81.4838 27.0166Z" fill="#FF0101"/>
+<path d="M103.623 4.09904C102.234 2.50644 100.368 2.03265 98.4342 2.03265L92.5996 2.03265L92.5996 25.2088L98.4306 25.2088C100.365 25.2088 102.231 24.7191 103.619 23.1385C105.55 20.9566 105.413 16.2147 105.413 13.2445C105.413 10.2743 105.546 6.28487 103.619 4.08709L103.623 4.09904ZM104.907 24.5599C103.472 26.1525 101.384 27.0045 98.872 27.0045L90.7695 27.0045L90.7695 0.237L98.8755 0.236999C101.387 0.236999 103.487 1.10496 104.911 2.68561C107.355 5.39302 107.251 9.64524 107.251 13.2604C107.251 16.8756 107.355 21.8604 104.911 24.5718L104.907 24.5599Z" fill="#FF0101"/>
+<path d="M112.846 27.0166L112.846 0.221252L117.561 0.221252L117.561 22.3503L128.516 22.3503L128.516 27.0166L112.846 27.0166Z" fill="#333333"/>
+<path d="M138.852 16.0277L138.852 27.0166L134.173 27.0166L134.173 16.0277L126.914 0.221252L132.035 0.221252L136.545 11.027L140.991 0.221252L146.108 0.221252L138.852 16.0277Z" fill="#333333"/>
+<path d="M159.805 6.09478C159.424 5.62814 158.957 5.25868 158.436 5.0119C157.914 4.76512 157.35 4.64691 156.783 4.66543C156.212 4.64699 155.643 4.76508 155.116 5.01168C154.59 5.25829 154.117 5.62767 153.73 6.09478C152.815 7.22154 152.578 8.48367 152.578 13.6198C152.578 18.7559 152.815 20.014 153.73 21.1448C154.117 21.6117 154.59 21.9809 155.117 22.2275C155.643 22.4741 156.212 22.5923 156.783 22.5741C157.35 22.5924 157.914 22.4741 158.435 22.2273C158.957 21.9805 159.424 21.6112 159.805 21.1448C160.72 20.014 160.992 18.7559 160.992 13.6198C160.992 8.48367 160.723 7.22154 159.805 6.09478ZM163.311 24.3101C161.561 26.1934 159.219 27.2467 156.782 27.2467C154.344 27.2467 152.002 26.1934 150.253 24.3101C147.813 21.6026 147.877 18.2502 147.877 13.6238C147.877 8.99728 147.813 5.6608 150.253 2.93747C152.002 1.05412 154.344 0.000793424 156.782 0.000793411C159.219 0.000793399 161.561 1.05412 163.311 2.93747C165.754 5.64487 165.718 8.9933 165.718 13.6238C165.718 18.2542 165.74 21.6026 163.311 24.3101Z" fill="#333333"/>
+<path d="M184.79 27.0166L175.227 10.5731L175.227 27.0166L170.516 27.0166L170.516 0.221252L174.721 0.221252L184.284 16.6289L184.284 0.221252L188.999 0.221252L188.999 27.0166L184.79 27.0166Z" fill="#333333"/>
+<path d="M160.242 35.4745L160.264 35.4745C160.376 35.2188 160.553 35.0047 160.773 34.8578C160.992 34.7108 161.246 34.6374 161.502 34.6464C162.363 34.6464 163.239 35.0445 163.239 37.6524C163.239 39.1414 163.196 40.8575 161.444 40.8575C161.208 40.8618 160.974 40.7976 160.766 40.6712C160.559 40.5449 160.384 40.3607 160.26 40.1368L160.228 40.1368L160.228 42.9995L159.363 42.9995L159.363 34.7658L160.239 34.7658L160.242 35.4745ZM162.324 37.6524C162.324 36.7526 162.324 35.4387 161.226 35.4387C160.128 35.4387 160.246 37.095 160.246 38.0067C160.246 38.803 160.289 40.0651 161.258 40.0651C162.227 40.0651 162.324 39.2569 162.324 37.6643L162.324 37.6524Z" fill="#333333"/>
+<path d="M99.992 39.8734L99.9705 39.8734C99.8752 40.1805 99.6905 40.4438 99.4457 40.6218C99.2008 40.7998 98.9095 40.8825 98.6177 40.8568C97.4766 40.8568 97.1465 40.0406 97.1465 38.8939C97.1465 37.0824 98.7469 37.0027 99.9705 37.0346C99.992 36.2383 100.003 35.3783 99.0627 35.3783C98.9391 35.3673 98.815 35.3884 98.7001 35.44C98.5853 35.4916 98.4828 35.5722 98.401 35.6754C98.3191 35.7786 98.26 35.9016 98.2285 36.0345C98.197 36.1675 98.1939 36.3068 98.2194 36.4414L97.2864 36.4414C97.3295 35.1036 97.9682 34.6417 99.1093 34.6417C100.494 34.6417 100.857 35.438 100.857 36.4414L100.857 39.316C100.86 39.7921 100.896 40.2672 100.964 40.7374L100.006 40.7374L99.992 39.8734ZM98.022 38.9616C98.022 39.5389 98.2768 40.0605 98.8617 40.0605C99.4466 40.0605 100.057 39.6942 99.9705 37.7632C99.1416 37.7791 98.022 37.6995 98.022 38.9656L98.022 38.9616Z" fill="#333333"/>
+<path d="M115.722 40.7375L115.722 36.5968C115.722 35.9916 115.572 35.4382 114.868 35.4382C114.724 35.4407 114.581 35.4776 114.451 35.5462C114.32 35.6149 114.204 35.7138 114.111 35.8363C113.976 36.1038 113.905 36.4056 113.907 36.7123L113.907 40.7336L113.038 40.7336L113.038 36.0075C113.038 35.6094 113.017 35.1794 112.984 34.7653L113.91 34.7653L113.91 35.5099L113.932 35.5099C114.042 35.2248 114.232 34.9868 114.474 34.8311C114.715 34.6755 114.996 34.6105 115.274 34.6459C115.528 34.6248 115.783 34.6862 116.006 34.8226C116.23 34.959 116.413 35.1646 116.533 35.4143C116.652 35.1581 116.838 34.9478 117.067 34.8107C117.295 34.6736 117.556 34.6162 117.814 34.6459C118.381 34.6459 119.285 34.7892 119.285 36.1947L119.285 40.7375L118.41 40.7375L118.41 36.5968C118.41 35.9916 118.263 35.4382 117.556 35.4382C117.438 35.4175 117.317 35.4268 117.203 35.4654C117.088 35.504 116.983 35.5709 116.896 35.6612C116.684 35.9597 116.579 36.3334 116.598 36.7123L116.598 40.7336L115.722 40.7375Z" fill="#333333"/>
+<path d="M125.656 38.063C125.656 39.7313 126.061 40.0538 126.732 40.0538C127.328 40.0538 127.64 39.5203 127.669 38.9191L128.627 38.9191C128.627 40.2449 127.881 40.8461 126.75 40.8461C125.62 40.8461 124.705 40.4479 124.705 37.8281C124.705 36.0763 124.884 34.6429 126.75 34.6429C128.286 34.6429 128.67 35.5786 128.67 37.5534L128.67 38.063L125.656 38.063ZM127.755 37.3304C127.755 35.5905 127.317 35.3795 126.679 35.3795C126.126 35.3795 125.667 35.6741 125.656 37.3304L127.755 37.3304ZM127.97 32.1943L126.575 33.8626L125.857 33.8626L126.808 32.1943L127.97 32.1943Z" fill="#333333"/>
+<path d="M134.605 34.7658L134.605 33.6191L135.481 33.1812L135.481 34.7737L136.654 34.7737L136.654 35.5063L135.481 35.5063L135.481 39.1613C135.481 39.5595 135.481 40.0253 136.281 40.0253C136.346 40.0253 136.482 40.0014 136.676 39.9775L136.676 40.7221C136.389 40.746 136.098 40.8176 135.811 40.8176C134.979 40.8176 134.605 40.4195 134.605 39.7546L134.605 35.4984L133.723 35.4984L133.723 34.7658L134.605 34.7658Z" fill="#333333"/>
+<path d="M143.185 35.674L143.217 35.674C143.576 34.7623 144.028 34.6588 144.879 34.6588L144.879 35.6661L144.646 35.6302C144.568 35.6157 144.49 35.6077 144.412 35.6063C143.443 35.6063 143.196 36.4226 143.196 37.2268L143.196 40.7544L142.32 40.7544L142.32 34.7822L143.196 34.7822L143.185 35.674Z" fill="#333333"/>
+<path d="M149.852 37.84C149.852 36.0882 150.031 34.6548 151.897 34.6548C153.763 34.6548 153.942 36.1001 153.942 37.84C153.942 40.4797 153.034 40.858 151.897 40.858C150.759 40.858 149.852 40.4797 149.852 37.84ZM153.027 37.4419C153.027 35.8095 152.568 35.4511 151.897 35.4511C151.226 35.4511 150.767 35.8055 150.767 37.4419C150.767 39.3809 150.993 40.0816 151.897 40.0816C152.801 40.0816 153.031 39.3649 153.031 37.426L153.027 37.4419Z" fill="#333333"/>
+<path d="M168.586 37.84C168.586 36.0882 168.765 34.6548 170.631 34.6548C172.497 34.6548 172.68 36.1001 172.68 37.84C172.68 40.4797 171.772 40.858 170.631 40.858C169.49 40.858 168.586 40.4797 168.586 37.84ZM171.762 37.4419C171.762 35.8095 171.302 35.4511 170.631 35.4511C169.96 35.4511 169.501 35.8055 169.501 37.4419C169.501 39.3809 169.723 40.0816 170.631 40.0816C171.539 40.0816 171.765 39.3649 171.765 37.426L171.762 37.4419Z" fill="#333333"/>
+<path d="M179.221 40.7386L178.346 40.7386L178.346 32.1983L179.218 32.1983L179.221 40.7386Z" fill="#333333"/>
+<path d="M185.674 38.0618C185.674 39.7301 186.079 40.0526 186.75 40.0526C187.346 40.0526 187.658 39.519 187.687 38.9178L188.645 38.9178C188.645 40.2437 187.898 40.8449 186.768 40.8449C185.638 40.8449 184.723 40.4467 184.723 37.8269C184.723 36.0751 184.902 34.6417 186.768 34.6417C188.304 34.6417 188.688 35.5774 188.688 37.5522L188.688 38.0618L185.674 38.0618ZM187.773 37.3292C187.773 35.5893 187.335 35.3783 186.696 35.3783C186.144 35.3783 185.684 35.6729 185.674 37.3292L187.773 37.3292Z" fill="#333333"/>
+<path d="M92.1236 40.7386L91.248 40.7386L91.248 32.1983L92.1236 32.1983L92.1236 40.7386Z" fill="#333333"/>
+</g>
+<defs>
+<clipPath id="clip0_5084_112181">
+<rect width="189" height="43" fill="white"/>
+</clipPath>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss
index 7b72d6a99..ad54ee550 100644
--- a/src/assets/scss/_color.scss
+++ b/src/assets/scss/_color.scss
@@ -1,6 +1,8 @@
 //TODO: Clean colors when design is properly setup
 $black: #000000;
 $white: #ffff;
+$white-1: #e5e5e5;
+$white-2: #cacccb;
 /*  GREYS  */
 $grey: #b4bbbf;
 $grey-1: #333333;
diff --git a/src/assets/scss/_icons.scss b/src/assets/scss/_icons.scss
index c93d6aa78..4cc84a175 100644
--- a/src/assets/scss/_icons.scss
+++ b/src/assets/scss/_icons.scss
@@ -61,7 +61,7 @@
     width: 7px;
     height: 7px;
     border-radius: 4px;
-    background-color: white;
+    background-color: $white;
   }
 }
 .ico-dot-available {
@@ -589,3 +589,125 @@
     bottom: -6px;
   }
 }
+
+.ico-gg-eye-alt {
+  position: relative;
+  display: block;
+  transform: scale(var(--ggs, 1));
+  width: 24px;
+  height: 18px;
+  border-bottom-right-radius: 100px;
+  border-bottom-left-radius: 100px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.ico-gg-eye-alt::after,
+.ico-gg-eye-alt::before {
+  content: '';
+  display: block;
+  border-radius: 100px;
+  position: absolute;
+  box-sizing: border-box;
+}
+.ico-gg-eye-alt::after {
+  top: 2px;
+  box-shadow: inset 0 -8px 0 2px $grey-3, inset 0 0 0 2px $grey-3;
+  width: 24px;
+  height: 24px;
+}
+.ico-gg-eye-alt::before {
+  width: 8px;
+  height: 8px;
+  border: 2px solid $grey-3;
+  bottom: 4px;
+  left: 8px;
+  background-color: $grey-3;
+}
+
+.ico-gg-add {
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  color: $green-1;
+  width: 32px;
+  height: 32px;
+}
+.ico-gg-add::after,
+.ico-gg-add::before {
+  content: '';
+  display: block;
+  box-sizing: border-box;
+  position: absolute;
+  width: 14px;
+  height: 2px;
+  background: currentColor;
+  border-radius: 5px;
+  top: 8px;
+  left: 0px;
+}
+.ico-gg-add::after {
+  width: 2px;
+  height: 14px;
+  top: 2px;
+  left: 6px;
+}
+
+.gg-eye-alt {
+  position: relative;
+  display: block;
+  width: 18px;
+  height: 12px;
+  border-bottom-right-radius: 100px;
+  border-bottom-left-radius: 100px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.gg-eye-alt::after,
+.gg-eye-alt::before {
+  content: '';
+  display: block;
+  border-radius: 100px;
+  position: absolute;
+  box-sizing: border-box;
+}
+.gg-eye-alt::after {
+  top: 2px;
+  box-shadow: inset 0 -8px 0 2px, inset 0 0 0 2px;
+  width: 18px;
+  height: 18px;
+}
+.gg-eye-alt::before {
+  width: 2px;
+  height: 2px;
+  border: 2px solid black;
+  bottom: 3px;
+  left: 7px;
+  background-color: black;
+}
+
+.ico-gg-check {
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  transform: scale(var(--ggs, 1));
+  width: 22px;
+  height: 22px;
+  border: 1px solid transparent;
+  border-radius: 100px;
+  color: $white;
+}
+.ico-gg-check::after {
+  content: '';
+  display: block;
+  box-sizing: border-box;
+  position: absolute;
+  left: 5px;
+  top: -3px;
+  width: 7px;
+  height: 12px;
+  border-width: 0 2px 2px 0;
+  border-style: solid;
+  transform-origin: bottom left;
+  transform: rotate(45deg);
+  color: $white;
+}
-- 
GitLab


From 1946312fe8b9e1a025693c53ecea6c08d21e5031 Mon Sep 17 00:00:00 2001
From: Augustin LECONTE <["ext.sopra.aleconte@grandlyon.com"]>
Date: Thu, 17 Feb 2022 17:01:52 +0000
Subject: [PATCH 17/27] feat(orientation-form): change orientation form design

---
 package-lock.json                             | 140 -----
 src/app/carto/carto.component.scss            |   2 +-
 .../footer-form/footer-form.component.html    |   2 +-
 .../footer-form/footer-form.component.scss    |   5 +-
 .../form/footer-form/footer-form.component.ts |   7 +-
 .../structure-detail-print.component.html     |  79 ++-
 .../structure-detail-print.component.scss     |  14 +-
 .../structure-print-header.component.html     | 126 +++--
 .../structure-print-header.component.scss     |  49 +-
 .../structure-print-header.component.ts       |   3 +-
 .../orientation-form.component.html           | 485 ++++++++++--------
 .../orientation-form.component.scss           | 286 +++--------
 .../orientation-form.component.ts             | 134 ++---
 .../form/orientation-form/pageType.enum.ts    |   4 +-
 .../form/structure-form/form.component.scss   |  15 +-
 src/app/form/structure-form/form.component.ts |   1 -
 src/app/header/header.component.html          |   8 +-
 src/app/map/components/layers.enum.ts         |   5 -
 src/app/map/components/map.component.html     |   9 +-
 src/app/map/components/map.component.scss     |  23 +-
 src/app/map/components/map.component.ts       |  58 +--
 src/app/map/components/markerType.enum.ts     |   1 -
 src/app/map/components/zoomLevel.enum.ts      |   6 -
 src/app/map/services/map.service.ts           |  72 ++-
 src/app/map/services/marker.ts                |   6 -
 src/app/models/address.model.ts               |   1 -
 src/app/models/orientation-filter.object.ts   |   3 +-
 .../newsletter-subscription.component.scss    |   2 +-
 .../address-autocomplete.component.ts         |   1 -
 .../svg-icon/svg-icon.component.scss          |   4 -
 .../components/card/card.component.html       |  87 ++--
 .../components/card/card.component.scss       |  41 +-
 .../structure-details.component.scss          |   8 +-
 .../structure-details.component.ts            |  19 +
 .../structure-list/models/category.model.ts   |   1 -
 src/app/structure-list/models/filter.model.ts |   2 -
 .../structure-list.component.html             |   1 -
 .../structure-list.component.scss             |   5 -
 src/app/utils/utils.ts                        |  11 -
 src/assets/form/sprite.svg                    |  30 --
 src/assets/ico/sprite.svg                     |   7 -
 src/assets/logos/grandLyonLaMetropole.svg     |  29 --
 src/assets/scss/_color.scss                   |   2 -
 src/assets/scss/_icons.scss                   | 124 +----
 44 files changed, 696 insertions(+), 1222 deletions(-)
 delete mode 100644 src/app/map/components/layers.enum.ts
 delete mode 100644 src/app/map/components/zoomLevel.enum.ts
 delete mode 100644 src/assets/logos/grandLyonLaMetropole.svg

diff --git a/package-lock.json b/package-lock.json
index 4423b9a74..820b6fdb1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9878,12 +9878,6 @@
         "vary": "^1"
       }
     },
-    "corser": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
-      "integrity": "sha1-jtolLsqrWEDc2XXOuQ2TcMgZ/4c=",
-      "dev": true
-    },
     "cosmiconfig": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
@@ -12080,12 +12074,6 @@
       "integrity": "sha512-7kIufnBqdsBGcSZLPJwqHT3yhk1QTsSlFsVD3kx5ixH/AlgBs9yM1q6DPhXZ8f8gtdqgh7N7/5btRLpQsS2gHw==",
       "dev": true
     },
-    "he": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
-      "dev": true
-    },
     "hosted-git-info": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.0.2.tgz",
@@ -12107,15 +12095,6 @@
         "wbuf": "^1.1.0"
       }
     },
-    "html-encoding-sniffer": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
-      "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
-      "dev": true,
-      "requires": {
-        "whatwg-encoding": "^2.0.0"
-      }
-    },
     "html-entities": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz",
@@ -12278,78 +12257,6 @@
         }
       }
     },
-    "http-server": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.0.tgz",
-      "integrity": "sha512-5lYsIcZtf6pdR8tCtzAHTWrAveo4liUlJdWc7YafwK/maPgYHs+VNP6KpCClmUnSorJrARVMXqtT055zBv11Yg==",
-      "dev": true,
-      "requires": {
-        "basic-auth": "^2.0.1",
-        "chalk": "^4.1.2",
-        "corser": "^2.0.1",
-        "he": "^1.2.0",
-        "html-encoding-sniffer": "^3.0.0",
-        "http-proxy": "^1.18.1",
-        "mime": "^1.6.0",
-        "minimist": "^1.2.5",
-        "opener": "^1.5.1",
-        "portfinder": "^1.0.28",
-        "secure-compare": "3.0.1",
-        "union": "~0.5.0",
-        "url-join": "^4.0.1"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "http-signature": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
@@ -14839,12 +14746,6 @@
       "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==",
       "dev": true
     },
-    "opener": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
-      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
-      "dev": true
-    },
     "optionator": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
@@ -16793,12 +16694,6 @@
         "get-assigned-identifiers": "^1.1.0"
       }
     },
-    "secure-compare": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
-      "integrity": "sha1-8aAymzCLIh+uN7mXTz1XjQypmeM=",
-      "dev": true
-    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -18301,15 +18196,6 @@
         }
       }
     },
-    "union": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
-      "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==",
-      "dev": true,
-      "requires": {
-        "qs": "^6.4.0"
-      }
-    },
     "unique-filename": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
@@ -18430,12 +18316,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "url-join": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
-      "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==",
-      "dev": true
-    },
     "url-parse-lax": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
@@ -18853,26 +18733,6 @@
       "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
       "dev": true
     },
-    "whatwg-encoding": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
-      "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
-      "dev": true,
-      "requires": {
-        "iconv-lite": "0.6.3"
-      },
-      "dependencies": {
-        "iconv-lite": {
-          "version": "0.6.3",
-          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-          "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-          "dev": true,
-          "requires": {
-            "safer-buffer": ">= 2.1.2 < 3.0.0"
-          }
-        }
-      }
-    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
diff --git a/src/app/carto/carto.component.scss b/src/app/carto/carto.component.scss
index 3fcf8948f..eb5f97b21 100644
--- a/src/app/carto/carto.component.scss
+++ b/src/app/carto/carto.component.scss
@@ -29,7 +29,7 @@
   height: calc(100vh - #{$header-height} - #{$footer-height});
   @media #{$tablet} {
     padding: 0;
-    height: calc(100vh - #{$header-height});
+    height: 100%;
   }
 }
 .btnSwitch {
diff --git a/src/app/form/footer-form/footer-form.component.html b/src/app/form/footer-form/footer-form.component.html
index 84e1517f2..6157b4a2c 100644
--- a/src/app/form/footer-form/footer-form.component.html
+++ b/src/app/form/footer-form/footer-form.component.html
@@ -1,5 +1,5 @@
 <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center">
-  <button *ngIf="displayPreviousButton" class="btn-primary small previous" (click)="goToPreviousPage()">
+  <button class="btn-primary small previous" (click)="goToPreviousPage()">
     <div class="rowBtn" fxLayout="row" fxLayoutAlign="center center">
       <svg class="chevronLeft" aria-hidden="true">
         <use [attr.xlink:href]="'assets/form/sprite.svg#chevronLeft'"></use>
diff --git a/src/app/form/footer-form/footer-form.component.scss b/src/app/form/footer-form/footer-form.component.scss
index 61ae2b385..6ebf95c44 100644
--- a/src/app/form/footer-form/footer-form.component.scss
+++ b/src/app/form/footer-form/footer-form.component.scss
@@ -3,9 +3,8 @@
 
 .btn-primary {
   &.previous {
-    background-color: $white;
+    background-color: initial;
     color: $grey-2;
-    border: solid $grey-4 1px;
   }
   &.next {
     .rowBtn {
@@ -26,6 +25,6 @@
 .chevronRight {
   height: 24px;
   width: 24px;
-  // stroke: inherit;
+  stroke: inherit;
   margin-left: 10px;
 }
diff --git a/src/app/form/footer-form/footer-form.component.ts b/src/app/form/footer-form/footer-form.component.ts
index 12736e3ac..15a5456ff 100644
--- a/src/app/form/footer-form/footer-form.component.ts
+++ b/src/app/form/footer-form/footer-form.component.ts
@@ -5,17 +5,18 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
   templateUrl: './footer-form.component.html',
   styleUrls: ['./footer-form.component.scss'],
 })
-export class FooterFormComponent {
+export class FooterFormComponent implements OnInit {
   @Input() isValid: boolean;
   @Input() btnName: string[];
-  @Input() displayPreviousButton: boolean = true;
   @Output() nextPage = new EventEmitter<any>();
   @Output() previousPage = new EventEmitter<any>();
+  constructor() {}
+
+  ngOnInit(): void {}
 
   public goToNextPage(): void {
     this.nextPage.emit();
   }
-
   public goToPreviousPage(): void {
     this.previousPage.emit();
   }
diff --git a/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.html b/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.html
index 7d7ed3c9e..b6e592955 100644
--- a/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.html
+++ b/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.html
@@ -3,7 +3,12 @@
   <div fxLayout="row" class="structure-details-block" fxLayoutAlign="baseline baseline" fxLayoutGap="8px">
     <div fxLayout="column" fxLayoutGap="10px" fxFlex="100%">
       <div fxLayout="column" class="no-margin" fxLayoutAlign="space-between start">
-        <h3 class="bold">{{ structure.structureName }}</h3>
+        <h2 class="bold">{{ structure.structureName }}</h2>
+      </div>
+      <div fxLayout="row" fxLayoutAlign="space-between center">
+        <div class="typeInformationHeader" fxLayout="column">
+          <h3>{{ structure.getLabelTypeStructure() }}</h3>
+        </div>
       </div>
       <div class="mobile-column">
         <div fxLayout="column" fxFlex="50%">
@@ -11,10 +16,63 @@
             <app-svg-icon [type]="'ico'" [icon]="'adress'" [title]="'Adresse'"></app-svg-icon>
             <p>{{ structure.address.numero }} {{ structure.address.street }}, {{ structure.address.commune }}</p>
           </div>
+          <div *ngIf="structure.website" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
+            <app-svg-icon [type]="'ico'" [icon]="'web'" [title]="'Site web'"></app-svg-icon>
+            <a
+              target="_blank"
+              class="custom-link"
+              rel="noopener noreferrer"
+              [href]="structure.website.includes('http') ? structure.website : 'http://' + structure.website"
+              >{{ structure.website | url }}</a
+            >
+          </div>
+          <div *ngIf="structure.hasSocialNetwork()" fxLayout="row" fxLayoutAlign="none baseline" fxLayoutGap="13px">
+            <app-svg-icon [type]="'ico'" [icon]="'network'"></app-svg-icon>
+            <div fxLayout="row" fxLayoutAlign="none baseline" fxLayoutGap="8px">
+              <a
+                *ngIf="structure.facebook"
+                target="_blank"
+                class="custom-link"
+                rel="noopener noreferrer"
+                [href]="'http://' + structure.facebook"
+              >
+                <app-svg-icon [type]="'ico'" [icon]="'facebook'" [title]="'Facebook'"></app-svg-icon
+              ></a>
+              <a
+                *ngIf="structure.twitter"
+                target="_blank"
+                class="custom-link"
+                rel="noopener noreferrer"
+                [href]="'http://' + structure.twitter"
+              >
+                <app-svg-icon [type]="'ico'" [icon]="'twitter'" [title]="'Twitter'"></app-svg-icon
+              ></a>
+              <a
+                *ngIf="structure.instagram"
+                target="_blank"
+                class="custom-link"
+                rel="noopener noreferrer"
+                [href]="'http://' + structure.instagram"
+              >
+                <app-svg-icon [type]="'ico'" [icon]="'instagram'" [title]="'Instagram'"></app-svg-icon
+              ></a>
+              <a
+                *ngIf="structure.linkedin"
+                target="_blank"
+                class="custom-link"
+                rel="noopener noreferrer"
+                [href]="'http://' + structure.linkedin"
+              >
+                <app-svg-icon [type]="'ico'" [icon]="'linkedin'" [title]="'Linkedin'"></app-svg-icon
+              ></a>
+            </div>
+          </div>
           <div *ngIf="structure.contactPhone" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
             <app-svg-icon [type]="'ico'" [icon]="'tel'" [title]="'Téléphone'"></app-svg-icon>
             <p>{{ structure.contactPhone | phone }}</p>
           </div>
+        </div>
+        <div fxLayout="column" fxFlex="50%">
           <div
             *ngIf="structure.contactMail && structure.contactMail !== 'unknown@unknown.com'"
             fxLayout="row"
@@ -24,8 +82,23 @@
             <app-svg-icon [type]="'ico'" [iconClass]="'grey-1'" [icon]="'email'" [title]="'Email'"></app-svg-icon>
             <p>{{ structure.contactMail }}</p>
           </div>
+          <div *ngIf="structure.hasPassNumeric()" fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
+            <app-svg-icon [type]="'ico'" [icon]="'pass'" [title]="'Pass numérique'"></app-svg-icon>
+            <p>agréé Pass Numérique</p>
+          </div>
+          <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
+            <app-svg-icon [type]="'ico'" [icon]="'calendar'"></app-svg-icon>
+            <p>Mise à jour le {{ structure.updatedAt | date: 'mediumDate' }}</p>
+          </div>
         </div>
       </div>
+
+      <div>
+        {{ structure.description }}
+      </div>
+      <div class="info">
+        {{ structure.lockdownActivity }}
+      </div>
     </div>
   </div>
   <!-- Accueil -->
@@ -46,9 +119,7 @@
               <h4>{{ day.key | day }}</h4>
               <div class="opening-time" fxLayout="row" fxLayoutAlign="none flex-end">
                 <div *ngFor="let timeRange of day.value.time; let isFirst = first">
-                  <p *ngIf="isFirst && timeRange.opening">
-                    de {{ timeRange.formatOpeningDate() }} à {{ timeRange.formatClosingDate() }}
-                  </p>
+                  <p *ngIf="isFirst && timeRange.opening">de {{ timeRange.formatOpeningDate() }} à {{ timeRange.formatClosingDate() }}</p>
                   <p *ngIf="!isFirst && timeRange.opening">
                     et de {{ timeRange.formatOpeningDate() }} à {{ timeRange.formatClosingDate() }}
                   </p>
diff --git a/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss b/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss
index 155566070..8e3d713f5 100644
--- a/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss
+++ b/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss
@@ -10,10 +10,15 @@ a {
 }
 
 .structrue-details-container {
+  border-right: solid 1px $grey-4;
+  page-break-after: always;
+  background-color: $white;
+  top: 0;
+  left: 0;
   max-width: 980px;
-  width: 64%;
-  margin-top: 1%;
-  float: right;
+  width: 100%;
+  margin-bottom: 50px;
+  padding: 10px 24px;
   @media #{$tablet} {
     width: calc(100% - 2 * 24px);
     position: inherit;
@@ -29,6 +34,7 @@ a {
 
 .structrue-details-container > .structure-details-block {
   padding: 0px 0px 24px 0;
+  border-bottom: 1px dashed $grey-2;
   .subtitle {
     text-transform: uppercase;
     @include cn-bold-16;
@@ -126,7 +132,7 @@ p,
   height: 25px;
   border-radius: 20px;
   padding: 5px 15px;
-  color: $white;
+  color: white;
   border-style: none;
   margin-top: 15px;
   background: #348899;
diff --git a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.html b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.html
index 616b544b1..b1c83faf2 100644
--- a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.html
+++ b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.html
@@ -1,77 +1,67 @@
 <div class="print-header" fxLayout="column">
-  <div class="header-print">
-    <div class="header-infos">
-      <svg aria-hidden="true" aria-hidden="true">
-        <use [attr.xlink:href]="'assets/form/sprite.svg#grandLyonLaMetropole'"></use>
-      </svg>
-      <div class="header-title">
-        <div>RES’IN : Réseau des acteurs de l'inclusion numérique de la Métropole de Lyon</div>
-        <h3>Fiche d'orientation</h3>
-      </div>
+  <div class="header-print" fxLayout="row" fxLayoutAlign="space-between center">
+    <h3>Fiche d'orientation</h3>
+    <h4 class="typeInformationHeader">{{ date }}</h4>
+  </div>
+
+  <!-- Name -->
+  <div *ngIf="beneficiaryName">
+    <p class="bold">{{ beneficiaryName }}</p>
+  </div>
+
+  <!-- Accompaniment -->
+  <div *ngIf="structureAccompaniment">
+    <div class="typeInformationHeader">Orienté par</div>
+    <div class="contactAccompaniment" fxLayout="row" fxLayoutAlign="space-between center">
+      <div class="bold">{{ structureAccompaniment }}</div>
+      <!-- Contact -->
+      <div class="bold" *ngIf="contactAccompaniment">{{ contactAccompaniment }}</div>
     </div>
-    <p class="typeInformationHeader date">{{ date }}</p>
   </div>
 
-  <div class="informations">
-    <div class="helper">
-      <!-- Accompaniment -->
-      <div *ngIf="structureAccompaniment">
-        <div class="typeInformationHeader">{{ 'Orienté par' | uppercase }}</div>
-        <p class="bold">{{ structureAccompaniment }}</p>
-        <!-- Contact -->
-        <p class="bold" *ngIf="contactAccompaniment">{{ contactAccompaniment }}</p>
-        <p class="bold" *ngIf="contactAccompanimentPhone">{{ contactAccompanimentPhone }}</p>
+  <!-- Needs -->
+  <div *ngIf="equipments.length > 0">
+    <p class="typeInformationHeader">Besoins en matériel</p>
+    <div fxLayout="row wrap" fxLayoutGap="16px">
+      <div *ngFor="let equipmentTag of equipments" class="tags-cloud" fxLayout="row">
+        {{ equipmentTag.text ? equipmentTag.text : equipmentTag.value }}
       </div>
     </div>
-    <div class="beneficiary">
-      <div class="typeInformationHeader">{{ 'Bénéficiaire' | uppercase }}</div>
-      <!-- Name -->
-      <table>
-        <tr>
-          <td class="typeInformationHeader">Nom</td>
-          <td class="bold">{{ beneficiaryName }}</td>
-        </tr>
-        <tr *ngIf="equipments.length > 0">
-          <td class="typeInformationHeader">Besoin(s) en matériel</td>
-          <td class="bold">
-            <div *ngFor="let equipmentTag of equipments">
-              {{ equipmentTag.text ? equipmentTag.text : equipmentTag.value }}
-            </div>
-          </td>
-        </tr>
-        <tr *ngIf="formations.length > 0">
-          <td class="typeInformationHeader">Besoin(s) en formation</td>
-          <td class="bold">
-            <div *ngFor="let formationTag of formations">
-              {{ formationTag.text ? formationTag.text : formationTag.value }}
-            </div>
-          </td>
-        </tr>
-        <tr *ngIf="assistances.length > 0">
-          <td class="typeInformationHeader">Besoin(s) d'accompagnement</td>
-          <td class="bold">
-            <div *ngFor="let assistanceTag of assistances">
-              {{ assistanceTag.text ? assistanceTag.text : assistanceTag.value }}
-            </div>
-          </td>
-        </tr>
-        <tr *ngIf="specificNeeds.length > 0">
-          <td class="typeInformationHeader">Besoin(s) spécifiques</td>
-          <td class="bold">
-            <div *ngFor="let specificNeed of specificNeeds">
-              {{ specificNeed.text ? specificNeed.text : specificNeed.value }}
-            </div>
-          </td>
-        </tr>
-        <tr *ngIf="beneficiaryPassNumeric">
-          <td class="typeInformationHeader">Pass Numérique</td>
-          <td class="bold">Oui</td>
-        </tr>
-        <tr *ngIf="beneficiaryNeedCommentary">
-          <td class="typeInformationHeader">Informations</td>
-          <td class="bold">{{ beneficiaryNeedCommentary }}</td>
-        </tr>
-      </table>
+  </div>
+  <div *ngIf="formations.length > 0">
+    <p class="typeInformationHeader">Besoins en formation</p>
+    <div fxLayout="row wrap" fxLayoutGap="16px">
+      <div *ngFor="let formationTag of formations" class="tags-cloud" fxLayout="row">
+        {{ formationTag.text ? formationTag.text : formationTag.value }}
+      </div>
     </div>
   </div>
+  <div *ngIf="assistances.length > 0">
+    <p class="typeInformationHeader">Besoins d'accompagnement</p>
+    <div fxLayout="row wrap" fxLayoutGap="16px">
+      <div *ngFor="let assistanceTag of assistances" class="tags-cloud" fxLayout="row">
+        {{ assistanceTag.text ? assistanceTag.text : assistanceTag.value }}
+      </div>
+    </div>
+  </div>
+  <div *ngIf="specificNeeds.length > 0">
+    <div class="typeInformationHeader">Besoins spécifiques'</div>
+    <div fxLayout="row wrap" fxLayoutGap="16px">
+      <div *ngFor="let specificNeed of specificNeeds" class="tags-cloud" fxLayout="row">
+        {{ specificNeed.text ? specificNeed.text : specificNeed.value }}
+      </div>
+    </div>
+  </div>
+
+  <!-- Pass Numeric -->
+  <div *ngIf="beneficiaryPassNumeric" class="inputRow" fxLayout="row" fxLayoutGap="13px">
+    <app-svg-icon [type]="'ico'" [icon]="'passNumeric'"></app-svg-icon>
+    <p class="bold">Pass Numérique</p>
+  </div>
+
+  <!-- Comments -->
+  <div *ngIf="beneficiaryNeedCommentary">
+    <div class="typeInformationHeader">Informations à destination de la structure</div>
+    <p>{{ beneficiaryNeedCommentary }}</p>
+  </div>
 </div>
diff --git a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.scss b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.scss
index b9cce0c61..0c9a98b49 100644
--- a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.scss
+++ b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.scss
@@ -9,30 +9,6 @@
   margin-top: 20px;
   margin-bottom: 20px;
   width: 100%;
-  border-bottom: solid black 1px;
-}
-
-.header-infos {
-  height: 80px;
-  display: flex;
-
-  .header-title {
-    width: 70%;
-    float: left;
-  }
-
-  h3 {
-    margin-top: 3px;
-  }
-
-  svg {
-    max-width: fit-content;
-    width: 30%;
-  }
-}
-
-.date {
-  float: right;
 }
 
 .print-header {
@@ -44,10 +20,6 @@
   @include cn-bold-16;
   margin-bottom: 5px;
   color: $grey-3;
-  &.date {
-    color: $grey-3;
-    font-style: italic;
-  }
 }
 
 .contactAccompaniment {
@@ -61,7 +33,7 @@
   height: 28px;
   border-radius: 20px;
   padding: 5px 15px;
-  color: $white;
+  color: white;
   border-style: none;
   margin-top: 5px;
   background: #348899;
@@ -86,22 +58,3 @@
     text-align: right;
   }
 }
-
-.informations {
-  width: 100%;
-  display: flex;
-  .helper {
-    max-height: 300px;
-    background-color: $grey-6;
-    width: 30%;
-    height: fit-content;
-    padding: 2%;
-  }
-
-  .beneficiary {
-    background-color: $grey-6;
-    margin-left: 2%;
-    padding: 2%;
-    width: 70%;
-  }
-}
diff --git a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.ts b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.ts
index ee7b51cf1..20c827dec 100644
--- a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.ts
+++ b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.ts
@@ -1,7 +1,9 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { Structure } from '../../../../models/structure.model';
 import * as _ from 'lodash';
 import { ActivatedRoute } from '@angular/router';
 import { PrintService } from '../../../../shared/service/print.service';
+import Module from 'module';
 import { Filter } from '../../../../structure-list/models/filter.model';
 @Component({
   selector: 'app-structure-print-header',
@@ -14,7 +16,6 @@ export class StructurePrintHeaderComponent implements OnInit {
   @Input() public structureAccompaniment: string;
   @Input() public beneficiaryPassNumeric: boolean;
   @Input() public contactAccompaniment: string | null;
-  @Input() public contactAccompanimentPhone: string | null;
   @Input() public filters: Filter[];
 
   public date: string;
diff --git a/src/app/form/orientation-form/orientation-form.component.html b/src/app/form/orientation-form/orientation-form.component.html
index 04a8a0500..02e379de3 100644
--- a/src/app/form/orientation-form/orientation-form.component.html
+++ b/src/app/form/orientation-form/orientation-form.component.html
@@ -1,10 +1,10 @@
-<div id="body" *ngIf="!multiPrint" class="form" fxLayout="column">
+<div *ngIf="!multiPrint" class="form" fxLayout="column">
   <app-modal-confirmation
     [openned]="showConfirmationModal"
     [content]="'Il vous faudra de nouveau remplir le formulaire si vous quittez'"
     (closed)="hasRedirectionAccepted($event)"
   ></app-modal-confirmation>
-  <div class="progress-container">
+  <div class="content">
     <div class="progressBar" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="20px">
       <label [ngClass]="{ validate: currentPage == nbPagesForm }" for="progressForm"
         >{{ progressStatus | number: '1.0-0' }}%
@@ -16,8 +16,6 @@
         [value]="progressStatus"
       ></progress>
     </div>
-  </div>
-  <div class="content" *ngIf="currentPage != pageTypeEnum.structuresSelection">
     <!-- BESOIN BENEFICIAIRE -->
     <div *ngIf="currentPage == pageTypeEnum.beneficiaryNeed" class="page">
       <div class="titleInfo">
@@ -25,7 +23,7 @@
         Merci de remplir ces quelques questions qui vous permettront d'identifier le lieu à proximité le plus adapté.
       </div>
       <div class="title">
-        <h3>Quels sont les besoins du bénéficiaire ?</h3>
+        <h3>De quoi le bénéficiaire a-t-il besoin ?</h3>
       </div>
       <div class="collapse" [ngClass]="{ notCollapsed: !showEquipments }">
         <div fxLayout="column">
@@ -121,8 +119,73 @@
             </div>
           </div>
           <div *ngIf="showFormation" class="tags">
+            <p class="titleCateg">{{ baseSkillssReferentiel.name }}</p>
+            <button
+              *ngFor="let choice of baseSkillssReferentiel.modules"
+              (click)="updateChoice(choice.id, 'formation')"
+              [ngClass]="{ selectedChoice: isInArray(choice.id, 'formation') }"
+            >
+              <div fxLayout="row" fxLayoutAlign=" center">
+                <svg class="validate" aria-hidden="true">
+                  <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
+                </svg>
+                <div class="textBtn">
+                  {{ choice.text }}
+                </div>
+              </div>
+            </button>
+
+            <p class="titleCateg">{{ accessRightsReferentiel.name }}</p>
+            <button
+              *ngFor="let choice of accessRightsReferentiel.modules"
+              (click)="updateChoice(choice.id, 'formation')"
+              [ngClass]="{ selectedChoice: isInArray(choice.id, 'formation') }"
+            >
+              <div fxLayout="row" fxLayoutAlign=" center">
+                <svg class="validate" aria-hidden="true">
+                  <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
+                </svg>
+                <div class="textBtn">
+                  {{ choice.text }}
+                </div>
+              </div>
+            </button>
+
+            <p class="titleCateg">{{ digitalCultureSecuritysReferentiel.name }}</p>
+            <button
+              *ngFor="let choice of digitalCultureSecuritysReferentiel.modules"
+              (click)="updateChoice(choice.id, 'formation')"
+              [ngClass]="{ selectedChoice: isInArray(choice.id, 'formation') }"
+            >
+              <div fxLayout="row" fxLayoutAlign=" center">
+                <svg class="validate" aria-hidden="true">
+                  <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
+                </svg>
+                <div class="textBtn">
+                  {{ choice.text }}
+                </div>
+              </div>
+            </button>
+
+            <p class="titleCateg">{{ parentingHelpsReferentiel.name }}</p>
+            <button
+              *ngFor="let choice of parentingHelpsReferentiel.modules"
+              (click)="updateChoice(choice.id, 'formation')"
+              [ngClass]="{ selectedChoice: isInArray(choice.id, 'formation') }"
+            >
+              <div fxLayout="row" fxLayoutAlign=" center">
+                <svg class="validate" aria-hidden="true">
+                  <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
+                </svg>
+                <div class="textBtn">
+                  {{ choice.text }}
+                </div>
+              </div>
+            </button>
+
+            <p class="titleCateg">{{ socialAndProfessionalsReferentiel.name }}</p>
             <button
-              *ngFor="let choice of formations"
+              *ngFor="let choice of socialAndProfessionalsReferentiel.modules"
               (click)="updateChoice(choice.id, 'formation')"
               [ngClass]="{ selectedChoice: isInArray(choice.id, 'formation') }"
             >
@@ -130,62 +193,139 @@
                 <svg class="validate" aria-hidden="true">
                   <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
                 </svg>
-                <div class="textBtn">{{ choice.name }} ({{ choice.surname }}...)</div>
+                <div class="textBtn">
+                  {{ choice.text }}
+                </div>
               </div>
             </button>
           </div>
         </div>
       </div>
     </div>
+    <!-- NUMERIC PASS -->
+    <div *ngIf="currentPage == pageTypeEnum.beneficiaryPassNumeric" class="page">
+      <div class="title">
+        <h3>Le bénéficiaire possède-t-il un Pass numérique ?</h3>
+      </div>
+      <app-radio-form
+        [selectedOption]="getOrientationControl('passNumeric').value"
+        [horizontal]="true"
+        (selectedEvent)="onRadioBtnChange('passNumeric', $event)"
+      >
+      </app-radio-form>
+    </div>
     <!-- PROFIL BENEFICIAIRE -->
     <div *ngIf="currentPage == pageTypeEnum.beneficiaryInfo" class="page">
       <div class="title">
-        <h3>Quel est le profil du bénéficiaire ?</h3>
+        <h3>Autour de quelle adresse chercher une structure ?</h3>
       </div>
-      <div class="section">
-        <label>Nom</label>
+      <div class="form-group" fxLayout="column">
+        <label for="address">Adresse</label>
+
         <div class="inputRow" fxLayout="row" fxLayoutGap="13px">
-          <input
-            type="text"
-            [value]="getOrientationControl('beneficiaryName').value"
-            (input)="setBeneficiaryName($event.target.value)"
-            class="form-input"
-          />
+          <app-address-autocomplete
+            [address]="getOrientationControl('address').valid ? getOrientationControl('address').value : null"
+            (inputAddress)="setAddressBeneficiary()"
+            (selectedAddress)="setAddressBeneficiary($event)"
+          ></app-address-autocomplete>
+          <app-svg-icon
+            *ngIf="getOrientationControl('address').valid && !isLoading"
+            [iconClass]="'validation'"
+            [type]="'form'"
+            [icon]="'validate'"
+            class="validateIcon"
+          ></app-svg-icon>
+          <div *ngIf="!getOrientationControl('address').valid && !isLoading" (click)="getAddress()">
+            <app-svg-icon [type]="'ico'" [icon]="'locateMe'" class="markerIcon"></app-svg-icon>
+          </div>
+          <div *ngIf="isLoading">
+            <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
+          </div>
         </div>
       </div>
-      <div class="section">
-        <label>Possède-t-il un Pass numérique ?</label>
-        <app-radio-form [horizontal]="true" (selectedEvent)="onRadioBtnChange('passNumeric', $event)"> </app-radio-form>
+      <div class="title">
+        <h3>Le bénéficiaire a-t-il un profil spécifique ?</h3>
+        <p class="notRequired">facultatif</p>
       </div>
-      <div class="section">
-        <label>A-t-il un profil spécifique ?</label>
-        <div class="tags">
-          <button
-            (click)="updateChoice(null, 'specificProfile')"
-            [ngClass]="{ selectedChoice: isEmpty('specificProfile') }"
-          >
-            <div fxLayout="row" fxLayoutAlign=" center">
-              <svg class="validate" aria-hidden="true">
-                <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
-              </svg>
-              <div class="textBtn">Aucun</div>
-            </div>
-          </button>
-          <button
-            *ngFor="let choice of specificProfile.modules"
-            (click)="updateChoice(choice.id, 'specificProfile')"
-            [ngClass]="{ selectedChoice: isInArray(choice.id, 'specificProfile') }"
-          >
-            <div fxLayout="row" fxLayoutAlign=" center">
-              <svg class="validate" aria-hidden="true">
-                <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
-              </svg>
-              <div class="textBtn">
-                {{ choice.text }}
-              </div>
+
+      <div class="tags">
+        <button
+          *ngFor="let choice of specificProfile.modules"
+          (click)="updateChoice(choice.id, 'specificProfile')"
+          [ngClass]="{ selectedChoice: isInArray(choice.id, 'specificProfile') }"
+        >
+          <div fxLayout="row" fxLayoutAlign=" center">
+            <svg class="validate" aria-hidden="true">
+              <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
+            </svg>
+            <div class="textBtn">
+              {{ choice.text }}
             </div>
-          </button>
+          </div>
+        </button>
+      </div>
+    </div>
+    <!-- STRUCTURE SEARCH -->
+    <div *ngIf="currentPage == pageTypeEnum.structuresSelection" class="page">
+      Filtres séléctionnés
+      <div fxLayout="row wrap" fxLayoutGap="16px">
+        <div *ngFor="let filter of filters" class="tags-cloud" fxLayout="row" (click)="removeFilter(filter)">
+          {{ filter.text ? filter.text : filter.value }}
+          <app-svg-icon [type]="'ico'" [icon]="'delete'" [iconColor]="'white'"></app-svg-icon>
+        </div>
+        <div
+          *ngFor="let uncheckedFilter of uncheckedFilters"
+          class="tags-cloud unchecked"
+          fxLayout="row"
+          (click)="restoreFilter(uncheckedFilter)"
+        >
+          {{ uncheckedFilter.text ? uncheckedFilter.text : uncheckedFilter.value }}
+          <app-svg-icon [type]="'ico'" [icon]="'validate'" [iconColor]="'white'"></app-svg-icon>
+        </div>
+      </div>
+      <div fxLayout="row" class="content-container">
+        <div class="nbStructure-panel left-pane" [ngClass]="{ mapPhone: isMapPhone == true }">
+          <div class="nbStructuresLabel" [ngPlural]="structuresList.length">
+            <ng-template ngPluralCase="0">0 structure trouvée</ng-template>
+            <ng-template ngPluralCase="1">1 structure trouvée</ng-template>
+            <ng-template ngPluralCase="other">{{ structuresList.length }} structures trouvées</ng-template>
+          </div>
+          <div id="listCard" (mouseleave)="mouseLeave()">
+            <app-card
+              *ngFor="let structure of structuresList"
+              [structure]="structure"
+              [isOrientation]="true"
+              [isSelected]="isInPrintList(structure._id)"
+              (addToList)="addToList($event, structure)"
+              (hover)="handleCardHover($event)"
+              (showDetails)="showDetails($event)"
+            ></app-card>
+            <p *ngIf="structureList && structureList.length <= 0">
+              Il n'y a aucune réponse correspondant à votre recherche
+            </p>
+          </div>
+        </div>
+        <div class="btnSwitch">
+          <app-button
+            [style]="'roundedButton'"
+            [text]="isMapPhone ? 'Liste' : 'Carte'"
+            [iconBtn]="isMapPhone ? 'liste' : 'map-marker'"
+            (action)="switchMapList()"
+          ></app-button>
         </div>
+        <app-map
+          [structures]="structuresList"
+          [structuresToPrint]="structuresToPrint"
+          [toogleToolTipId]="displayMapMarkerId"
+          [selectedMarkerId]="selectedMarkerId"
+          [locate]="locate"
+          (locatationTrigger)="locatationTrigger($event)"
+          (selectedStructure)="showDetails($event)"
+          [isMapPhone]="isMapPhone"
+          [searchedValue]="searchedValue"
+          class="right-pane deep-map"
+          [ngClass]="{ mapPhone: isMapPhone == true }"
+        ></app-map>
       </div>
     </div>
     <!-- BENEFICIARY ACCOMPANIMENT -->
@@ -193,95 +333,59 @@
       <div class="title">
         <h3>Qui oriente le bénéficiaire ?</h3>
       </div>
-      <div class="section">
-        <label>De quelle structure êtes-vous ? (MDM, Caf, Pôle Emploi...)</label>
-        <div class="inputRow" fxLayout="row" fxLayoutGap="13px">
-          <input
-            type="text"
-            [value]="getOrientationControl('structureAccompaniment').value"
-            (input)="setStructureAccompaniment($event.target.value)"
-            class="form-input"
-          />
-        </div>
+      <label>Votre structure (MDM, Caf, Pôle Emploi...)</label>
+      <div class="inputRow" fxLayout="row" fxLayoutGap="13px">
+        <input
+          type="text"
+          [value]="getOrientationControl('structureAccompaniment').value"
+          (input)="setStructureAccompaniment($event.target.value)"
+          class="form-input"
+        />
       </div>
-      <div class="section">
-        <label>Courriel de votre structure</label>
+
+      <div class="title">
+        <h3>Comment contacter cette structure ?</h3>
         <p class="notRequired">facultatif</p>
-        <div class="inputRow" fxLayout="row" fxLayoutGap="13px">
-          <input
-            type="text"
-            [value]="getOrientationControl('contactAccompanimentEmail').value"
-            placeholder="exemple: prenom.nom@grandlyon.com"
-            (input)="setContactAccompanimentEmail($event.target.value)"
-            class="form-input"
-          />
-          <app-svg-icon
-            *ngIf="
-              getOrientationControl('contactAccompanimentEmail').valid &&
-              getOrientationControl('contactAccompanimentEmail').value
-            "
-            [iconClass]="'validation'"
-            [type]="'form'"
-            [icon]="'validate'"
-          ></app-svg-icon>
-          <app-svg-icon
-            *ngIf="
-              getOrientationControl('contactAccompanimentEmail').invalid &&
-              getOrientationControl('contactAccompanimentEmail').value
-            "
-            [iconClass]="'validation'"
-            [type]="'form'"
-            [icon]="'notValidate'"
-          ></app-svg-icon>
-        </div>
       </div>
-      <div class="section">
-        <label>Téléphone de votre structure</label>
+      <label>Contact (email ou n° de téléphone)</label>
+      <div class="inputRow" fxLayout="row" fxLayoutGap="13px">
+        <input
+          type="text"
+          [value]="getOrientationControl('contactAccompaniment').value"
+          (input)="setContactAccompaniment($event.target.value)"
+          class="form-input"
+        />
+      </div>
+
+      <div class="title">
+        <h3>Qui est le bénéficiaire ?</h3>
         <p class="notRequired">facultatif</p>
-        <div class="inputRow" fxLayout="row" fxLayoutGap="13px">
-          <input
-            type="text"
-            [value]="getOrientationControl('contactAccompanimentPhone').value"
-            (input)="setContactAccompanimentPhone($event.target.value)"
-            class="form-input"
-          />
-          <app-svg-icon
-            *ngIf="
-              getOrientationControl('contactAccompanimentPhone').value &&
-              getOrientationControl('contactAccompanimentPhone').valid
-            "
-            [iconClass]="'validation'"
-            [type]="'form'"
-            [icon]="'validate'"
-          ></app-svg-icon>
-          <app-svg-icon
-            *ngIf="
-              getOrientationControl('contactAccompanimentPhone').invalid &&
-              getOrientationControl('contactAccompanimentPhone').value
-            "
-            [iconClass]="'validation'"
-            [type]="'form'"
-            [icon]="'notValidate'"
-          ></app-svg-icon>
-        </div>
+      </div>
+      <label>Nom du bénéficiaire</label>
+      <div class="inputRow" fxLayout="row" fxLayoutGap="13px">
+        <input
+          type="text"
+          [value]="getOrientationControl('beneficiaryName').value"
+          (input)="setBeneficiaryName($event.target.value)"
+          class="form-input"
+        />
       </div>
     </div>
     <!-- BENEFICIARY NEEDS COMMENTARY -->
     <div *ngIf="currentPage == pageTypeEnum.beneficiaryNeedCommentary" class="page">
       <div class="title">
-        <h3>Avez-vous des précisions à apporter ?</h3>
-        <p class="notRequired lg">facultatif</p>
+        <h3>Précisez le besoin</h3>
+        <p class="notRequired">facultatif</p>
       </div>
-      <label>Ces informations accompagneront la fiche d'orientation du bénéficiaire</label>
+      <label>Ces informations sont à destination de la structure</label>
       <div class="textareaBlock" fxLayout="column">
         <textarea
           rows="8"
           maxlength="500"
-          placeholder="Exemple: le bénéficiaire n'a pas d'adresse e-mail"
           [value]="getOrientationControl('beneficiaryNeedCommentary').value"
           (input)="setBeneficiaryNeedCommentary($event.target.value)"
         ></textarea>
-        <p class="textarea-char">
+        <p>
           {{
             getOrientationControl('beneficiaryNeedCommentary').value
               ? getOrientationControl('beneficiaryNeedCommentary').value.length
@@ -290,43 +394,15 @@
         </p>
       </div>
     </div>
-    <!-- ADDRESS SEARCH -->
-    <div *ngIf="currentPage == pageTypeEnum.beneficiaryAddress" class="page">
-      <div class="title">
-        <h3>Autour de quelle adresse chercher une structure ?</h3>
-        <p class="notRequired lg">facultatif</p>
-      </div>
-      <div class="form-group" fxLayout="column">
-        <div class="inputRow" fxLayout="row" fxLayoutGap="13px">
-          <app-address-autocomplete
-            [address]="getOrientationControl('address').valid ? getOrientationControl('address').value : null"
-            (inputAddress)="setAddressBeneficiary()"
-            (selectedAddress)="setAddressBeneficiary($event)"
-          ></app-address-autocomplete>
-          <app-svg-icon
-            *ngIf="getOrientationControl('address').valid && !isLoading"
-            [iconClass]="'validation'"
-            [type]="'form'"
-            [icon]="'validate'"
-            class="validateIcon"
-          ></app-svg-icon>
-        </div>
-      </div>
-    </div>
     <!-- PRINT RESULTS -->
-    <div *ngIf="currentPage == pageTypeEnum.printResults" class="last-page">
+    <div *ngIf="currentPage == pageTypeEnum.printResults" class="page">
       <div class="title">
         <app-structure-print-header
-          [beneficiaryNeedCommentary]="
-            getOrientationControl('beneficiaryNeedCommentary')
-              ? getOrientationControl('beneficiaryNeedCommentary').value
-              : ''
-          "
-          [beneficiaryName]="getOrientationControl('beneficiaryName')?.value"
-          [structureAccompaniment]="getOrientationControl('structureAccompaniment')?.value"
-          [beneficiaryPassNumeric]="getOrientationControl('passNumeric')?.value"
-          [contactAccompaniment]="getOrientationControl('contactAccompanimentEmail')?.value"
-          [contactAccompanimentPhone]="getOrientationControl('contactAccompanimentPhone')?.value"
+          [beneficiaryNeedCommentary]="getOrientationControl('beneficiaryNeedCommentary').value"
+          [beneficiaryName]="getOrientationControl('beneficiaryName').value"
+          [structureAccompaniment]="getOrientationControl('structureAccompaniment').value"
+          [beneficiaryPassNumeric]="getOrientationControl('passNumeric').value"
+          [contactAccompaniment]="getOrientationControl('contactAccompaniment').value"
           [filters]="filters"
         ></app-structure-print-header>
 
@@ -337,94 +413,49 @@
       </div>
     </div>
   </div>
-  <!-- STRUCTURE SEARCH -->
-  <div *ngIf="currentPage == pageTypeEnum.structuresSelection" class="carto">
-    <div class="left-col" [ngClass]="{ mapPhone: isMapPhone == true }">
-      <div class="filters">
-        <span class="filters-title">Filtre(s) séléctionné(s)</span>
-        <div fxLayout="row wrap" fxLayoutGap="4px">
-          <div
-            class="tags-cloud"
-            *ngFor="let filter of filters"
-            [class.unchecked]="!filter.checked"
-            fxLayout="row"
-            (click)="checkFilter(filter)"
-          >
-            <app-svg-icon
-              *ngIf="filter.checked"
-              [type]="'ico'"
-              [icon]="'validate'"
-              [iconColor]="'white'"
-            ></app-svg-icon>
-            <app-svg-icon *ngIf="!filter.checked" [type]="'ico'" [icon]="'delete'" [iconColor]="'white'"></app-svg-icon>
-            <div>{{ filter.text ? filter.text : filter.value }}</div>
-          </div>
-        </div>
-      </div>
-      <div class="nbStructuresLabel" [ngPlural]="structuresList.length">
-        <ng-template ngPluralCase="0">0 structure</ng-template>
-        <ng-template ngPluralCase="1">1 structure</ng-template>
-        <ng-template ngPluralCase="other">{{ structuresList.length }} structures</ng-template>
-      </div>
-      <div fxLayout="row" class="content-container">
-        <div class="nbStructure-panel left-pane">
-          <div id="listCard" (mouseleave)="mouseLeave()">
-            <app-card
-              *ngFor="let structure of structuresList"
-              [structure]="structure"
-              [isOrientation]="true"
-              [isSelected]="isInPrintList(structure._id)"
-              (addToList)="addToList($event, structure)"
-              (hover)="handleCardHover($event)"
-              (showDetails)="showDetails($event)"
-              class="structure-card"
-            ></app-card>
-            <p *ngIf="structureList && structureList.length <= 0">
-              Il n'y a aucune réponse correspondant à votre recherche
-            </p>
-          </div>
-        </div>
-      </div>
+  <!-- FOOTER AVEC SUIVANT / PRECEDENT ET VALIDATION -->
+  <div *ngIf="currentPage == 0" class="footer desktop" fxLayout="column" fxLayoutAlign="space-between">
+    <div fxLayout="row" fxLayoutAlign="center center">
+      <app-footer-form
+        [btnName]="['Précédent', 'Suivant']"
+        (previousPage)="previousUrl()"
+        (nextPage)="nextPage()"
+        [isValid]="isPageValid"
+      ></app-footer-form>
     </div>
-    <div class="btnSwitch">
-      <app-button
-        [style]="'roundedButton'"
-        [text]="isMapPhone ? 'Liste' : 'Carte'"
-        [iconBtn]="isMapPhone ? 'liste' : 'map-marker'"
-        (action)="switchMapList()"
-      ></app-button>
+  </div>
+  <div *ngIf="currentPage != 0 && currentPage != pageTypeEnum.printResults" class="footer desktop">
+    <div fxLayout="row" fxLayoutAlign="center center">
+      <app-footer-form
+        [btnName]="['Précédent', 'Suivant']"
+        (previousPage)="previousPage()"
+        (nextPage)="nextPage()"
+        [isValid]="isPageValid"
+      ></app-footer-form>
     </div>
-    <div class="right-col" [ngClass]="{ mapPhone: isMapPhone == true }">
-      <app-map
-        [isOrientationForm]="true"
-        [structures]="structuresList"
-        [structuresToPrint]="structuresToPrint"
-        [toogleToolTipId]="displayMapMarkerId"
-        [selectedMarkerId]="selectedMarkerId"
-        [locate]="locate"
-        (locatationTrigger)="locatationTrigger($event)"
-        (selectedStructure)="showDetails($event)"
-        [isMapPhone]="isMapPhone"
-        [searchedValue]="userLocation"
-        (onOrientationButtonClick)="addToList($event, structure)"
-        class="right-pane deep-map"
-        [ngClass]="{ mapPhone: isMapPhone == true }"
-      ></app-map>
+  </div>
+  <div *ngIf="currentPage == pageTypeEnum.printResults" class="footer desktop">
+    <div fxLayout="row" fxLayoutAlign="center center">
+      <app-footer-form
+        [btnName]="['Précédent', 'Imprimer']"
+        (previousPage)="previousPage()"
+        (nextPage)="runMultiPrint(true)"
+        [isValid]="isPageValid"
+      ></app-footer-form>
     </div>
   </div>
-  <!-- FOOTER AVEC SUIVANT / PRECEDENT ET VALIDATION -->
-  <div *ngIf="currentPage != pageTypeEnum.printResults" class="form-footer">
+
+  <div *ngIf="currentPage != 0 && currentPage != pageTypeEnum.printResults" class="footer phone">
     <div fxLayout="row" fxLayoutAlign="center center">
       <app-footer-form
         [btnName]="['Précédent', 'Suivant']"
         (previousPage)="previousPage()"
-        [displayPreviousButton]="currentPage !== pageTypeEnum.beneficiaryNeed"
         (nextPage)="nextPage()"
         [isValid]="isPageValid"
       ></app-footer-form>
     </div>
   </div>
-  <div *ngIf="currentPage == pageTypeEnum.printResults" class="form-footer">
+  <div *ngIf="currentPage == pageTypeEnum.printResults" class="footer phone">
     <div fxLayout="row" fxLayoutAlign="center center">
       <app-footer-form
         [btnName]="['Précédent', 'Imprimer']"
diff --git a/src/app/form/orientation-form/orientation-form.component.scss b/src/app/form/orientation-form/orientation-form.component.scss
index b83f7a12b..dbeffc59d 100644
--- a/src/app/form/orientation-form/orientation-form.component.scss
+++ b/src/app/form/orientation-form/orientation-form.component.scss
@@ -4,24 +4,61 @@
 @import '../../../assets/scss/color';
 @import '../../../assets/scss/typography';
 
+.title {
+  margin-top: 20px;
+}
+
 .body-wrap {
   height: 400px;
 }
 
+.left-pane {
+  width: 529px;
+  min-width: 500px;
+  height: 600px;
+  overflow: auto;
+  overflow-x: hidden;
+  padding: 0 25px 0 0;
+  @media #{$tablet} {
+    width: 100%;
+    min-width: unset;
+    &.mapPhone {
+      display: none !important;
+    }
+  }
+}
+
+.right-pane {
+  width: 400px;
+  max-height: 400px;
+  padding: 0 16px;
+  @media #{$tablet} {
+    display: none;
+    &.mapPhone {
+      display: block;
+    }
+    width: 100%;
+    padding: 0;
+  }
+}
+
+.deep-map ::ng-deep #map {
+  height: 380px;
+}
+
 .tags-cloud {
-  cursor: pointer;
   font-style: normal;
   justify-content: center;
   align-items: center;
   height: 28px;
   border-radius: 20px;
-  padding: 4px 12px;
-  color: $white;
+  padding: 5px 15px;
+  color: white;
   border-style: none;
-  margin-top: 4px;
-  background: $blue;
+  margin-top: 15px;
+  background: #348899;
   &.unchecked {
-    background: $grey-4;
+    background: #bdbdbd;
   }
 }
 
@@ -52,38 +89,42 @@
 }
 
 .nbStructuresLabel {
+  color: $white;
   @include cn-regular-16;
-  display: flex;
-  text-align: center;
+  display: grid;
+  align-items: center;
   height: 32px;
-  color: $grey-3;
+  background-color: $grey-4;
+  padding-left: 9px;
   width: 100%;
-  align-items: center;
-  @media #{$large-phone} {
-    padding-left: unset;
-  }
-}
-
-.nbStructuresLabel::before,
-.nbStructuresLabel::after {
-  border-top: 0.0625em solid;
-  content: '';
-  flex: 1;
-  margin: 0 0.5em;
 }
 
-.form-footer {
+.footer {
   padding: 17px 0;
   width: 100%;
+  max-width: 960px;
+  margin: 20px auto;
   text-align: center;
-  z-index: calc($btn-phone-switch-map-list-z-index - 1);
-  background: $grey-6;
+  &.desktop {
+    @media #{$tablet} {
+      display: none;
+    }
+  }
+
+  &.phone {
+    display: none;
+    @media #{$tablet} {
+      margin: 0 auto;
+      border-top: 1px solid $grey-4;
+      display: block;
+    }
+  }
 }
 
 .btnSwitch {
   position: fixed;
   left: 50%;
-  bottom: 0;
+  bottom: $footer-height + 5px;
   transform: translate(-50%, -50%);
   margin: 0 auto;
   display: none;
@@ -91,200 +132,25 @@
     display: block;
     opacity: 0.8;
     z-index: $btn-phone-switch-map-list-z-index;
-    margin-bottom: 60px;
   }
-}
-
-#body {
-  background-color: $grey-6;
-}
-
-.content {
-  min-height: 450px;
-  background-color: $white;
-  margin-left: 25%;
-  margin-right: 24%;
-
-  @media #{$tablet} {
-    width: 100%;
-    height: 100vh !important;
-    margin: 0;
-    border-bottom: $grey-4 solid 1px;
-    min-height: unset;
-  }
-
-  p {
-    &.notRequired {
-      font-size: 14px;
-      margin-top: 0px;
-      font-style: italic;
-      color: $secondary-color;
-
-      &.lg {
-        font-size: 17px;
-      }
-    }
+  @media #{$large-phone} {
   }
 }
 
-.content-container {
-  width: 97%;
-  float: right;
-  height: 58vh;
-  padding: unset;
-  // height: 100%;
-  @media #{$tablet} {
-    height: 57vh !important;
-  }
-
+.loader-gif {
   @media #{$desktop} {
-    height: 100%;
-  }
-
-  ::ng-deep .structure-card .structure {
-    margin-right: 16px;
-  }
-  ::ng-deep .structure-card:last-child .structure {
-    border-bottom: unset !important;
+    width: 20%;
   }
-}
-
-::ng-deep #search-address {
-  width: 400px !important;
-  @media #{$phone} {
-    width: 250px !important;
-  }
-}
-
-.progress-container {
-  margin-top: 1%;
-  margin-left: 25.5%;
-  width: 50%;
-  @media #{$tablet} {
-    margin: 0 16px;
-    width: calc(100% - 32px);
+  @media #{$large-desktop} {
+    width: 20%;
   }
-  .progressBar {
-    height: #{$progressBar-height};
-    progress {
-      height: 6px;
-      border-radius: 7px;
-      &::-webkit-progress-bar {
-        background-color: $white-1;
-      }
-      &::-webkit-progress-value {
-        background-color: $secondary-color;
-        border-radius: 12px;
-      }
-      &.validate {
-        &::-webkit-progress-value {
-          background-color: $green-1;
-        }
-      }
-    }
-  }
-}
-
-.title {
-  margin-top: 20px;
-  padding-bottom: 3%;
-}
-
-.last-page {
-  width: 96%;
-  margin-left: 2%;
-}
-
-.page {
-  float: left;
-  padding-top: 2%;
-  padding-bottom: 5%;
-
-  textarea {
-    margin-top: 1%;
-  }
-
-  .textarea-char {
-    font-style: italic;
-    color: $grey-3;
-  }
-
-  .section {
-    margin-top: 0.5%;
-  }
-
-  @media #{$tablet} {
-    width: calc(100vw - 32px);
-  }
-}
-
-.left-pane {
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  overflow-x: hidden;
-  @media #{$tablet} {
+  @media #{$large-phone} {
     width: 100%;
-    min-width: unset;
   }
-}
-
-.carto {
-  display: flex;
-  float: left;
-  min-height: 500px;
-  width: 100%;
-  border-bottom: $grey-4 solid 1px;
-
-  @media #{$tablet} {
-    min-height: 50vh;
-  }
-
-  .left-col {
-    padding-left: 16px;
-    margin-left: 1%;
-    background-color: $white;
-    padding-right: 16px;
-    width: 30%;
-    @media #{$tablet} {
-      width: 100%;
-      min-width: unset;
-      height: 100vh;
-      &.mapPhone {
-        display: none !important;
-      }
-    }
-  }
-
-  .right-col {
-    width: 67%;
-    padding-left: 2%;
-    padding-right: 2%;
-    margin-bottom: 2%;
-    @media #{$tablet} {
-      display: none;
-      height: 100vh;
-      &.mapPhone {
-        display: block;
-      }
-      width: 100%;
-      padding: 0;
-    }
-  }
-
-  .filters {
-    margin-bottom: 1%;
-    margin-top: 7%;
-    .filters-title {
-      color: $grey-3;
-    }
+  @media #{$small-phone} {
+    width: 100%;
   }
-}
-
-input {
-  width: 400px;
-  &.email-placeholder::placeholder {
-    color: $white-2;
-    font-style: italic;
+  @media #{$phone} {
+    width: 100%;
   }
 }
diff --git a/src/app/form/orientation-form/orientation-form.component.ts b/src/app/form/orientation-form/orientation-form.component.ts
index 7f6b8721d..59b8b6513 100644
--- a/src/app/form/orientation-form/orientation-form.component.ts
+++ b/src/app/form/orientation-form/orientation-form.component.ts
@@ -16,8 +16,6 @@ import { Filter } from '../../structure-list/models/filter.model';
 import { Module } from '../../structure-list/models/module.model';
 import { SearchService } from '../../structure-list/services/search.service';
 import { PageTypeEnum } from './pageType.enum';
-import { Utils } from '../../utils/utils';
-import { CustomRegExp } from '../../utils/CustomRegExp';
 
 @Component({
   selector: 'app-orientation-form',
@@ -32,9 +30,6 @@ export class OrientationFormComponent implements OnInit {
   public isMapPhone = false;
   public isLoading = false;
 
-  // Map auto locate with address
-  public userLocation = [];
-
   public orientationForm: FormGroup;
 
   // Page and progress var
@@ -57,11 +52,11 @@ export class OrientationFormComponent implements OnInit {
 
   public numberAssistanceChecked;
   public filters: Filter[] = [];
+  public uncheckedFilters: Filter[] = [];
 
   public equipments: Module[] = [];
   public assistance: Module[] = [];
   public formation: Module[] = [];
-  public selectedFormations: Category[] = [];
   public baseSkillssReferentiel: Category;
   public accessRightsReferentiel: Category;
   public digitalCultureSecuritysReferentiel: Category;
@@ -86,8 +81,7 @@ export class OrientationFormComponent implements OnInit {
     private searchService: SearchService,
     private structureService: StructureService,
     private geoJsonService: GeojsonService,
-    private meta: Meta,
-    public utils: Utils
+    private meta: Meta
   ) {}
 
   ngOnInit(): void {
@@ -108,7 +102,6 @@ export class OrientationFormComponent implements OnInit {
     });
     const categs = await this.searchService.getCategoriesTraining().toPromise();
     categs.forEach((categ) => {
-      this.selectedFormations.push(categ);
       categ.modules.forEach((module) => {
         this.formation.push(module);
       });
@@ -164,15 +157,8 @@ export class OrientationFormComponent implements OnInit {
         commune: new FormControl('', Validators.required),
       }),
       structureAccompaniment: new FormControl(orientationFormFilters.structureAccompaniment, Validators.required),
-      contactAccompanimentPhone: new FormControl(
-        orientationFormFilters.contactAccompanimentPhone,
-        Validators.pattern(CustomRegExp.PHONE)
-      ),
-      contactAccompanimentEmail: new FormControl(
-        orientationFormFilters.contactAccompanimentEmail,
-        Validators.pattern(CustomRegExp.EMAIL)
-      ),
-      beneficiaryName: new FormControl(orientationFormFilters.beneficiaryName, Validators.required),
+      contactAccompaniment: new FormControl(orientationFormFilters.contactAccompaniment),
+      beneficiaryName: new FormControl(orientationFormFilters.beneficiaryName),
       beneficiaryNeedCommentary: new FormControl(orientationFormFilters.beneficiaryNeedCommentary),
     });
   }
@@ -190,18 +176,31 @@ export class OrientationFormComponent implements OnInit {
     if (this.currentPage === this.nbPagesForm - 1) {
       this.validateForm();
     } else {
+      if (
+        this.currentPage === this.pageTypeEnum.beneficiaryNeed &&
+        this.orientationForm.get('assistance').value.length + this.orientationForm.get('formation').value.length == 0 &&
+        this.orientationForm.get('equipments').value.length > 0
+      ) {
+        this.noPassNumeric = true;
+        this.getOrientationControl('passNumeric').setValue(false);
+
+        this.currentPage++;
+        this.progressStatus += 100 / this.nbPagesForm;
+      }
       this.currentPage++;
       this.progressStatus += 100 / this.nbPagesForm;
       this.updatePageValid();
-      document.getElementsByClassName('content')[0].scrollTo(0, 0);
     }
   }
 
   public previousPage(): void {
     // Check if going to the first page
     if (this.currentPage === 0) {
-      this.previousUrl();
+      //go back to home ? previous page
     } else {
+      if (this.currentPage === this.pageTypeEnum.beneficiaryInfo && this.noPassNumeric) {
+        this.currentPage--;
+      }
       this.currentPage--;
       this.progressStatus -= 100 / this.nbPagesForm;
       this.setStructuresAndCoord();
@@ -232,24 +231,19 @@ export class OrientationFormComponent implements OnInit {
           this.orientationForm.get('formation').value.length >
         0,
     };
-    this.pagesValidation[PageTypeEnum.beneficiaryInfo] = {
-      valid:
-        this.getOrientationControl('passNumeric').value != null &&
-        this.getOrientationControl('beneficiaryName').value &&
-        this.getOrientationControl('beneficiaryName').value.length != 0,
+    this.pagesValidation[PageTypeEnum.beneficiaryPassNumeric] = {
+      valid: this.getOrientationControl('passNumeric').valid,
     };
+    this.pagesValidation[PageTypeEnum.beneficiaryInfo] = { valid: this.orientationForm.get('address').valid };
     this.pagesValidation[PageTypeEnum.beneficiaryAccompaniment] = {
       valid:
         this.getOrientationControl('structureAccompaniment').valid &&
-        this.getOrientationControl('contactAccompanimentPhone').valid &&
-        this.getOrientationControl('contactAccompanimentEmail').valid,
+        this.getOrientationControl('contactAccompaniment').valid &&
+        this.getOrientationControl('beneficiaryName').valid,
     };
     this.pagesValidation[PageTypeEnum.beneficiaryNeedCommentary] = {
       valid: this.getOrientationControl('beneficiaryNeedCommentary').valid,
     };
-    this.pagesValidation[PageTypeEnum.beneficiaryAddress] = {
-      valid: true,
-    };
     this.pagesValidation[PageTypeEnum.printResults] = { valid: true };
     this.pagesValidation[PageTypeEnum.structuresSelection] = { valid: this.structuresToPrint.length > 0 };
 
@@ -298,18 +292,7 @@ export class OrientationFormComponent implements OnInit {
   }
 
   public updateChoice(choice: string, controlName: string): void {
-    if (choice == null) this.unCheckAll(controlName);
-    else this.onCheckChange(!this.isInArray(choice, controlName), controlName, choice);
-  }
-
-  public isEmpty(formControlName: string): boolean {
-    const formArray: FormArray = this.orientationForm.get(formControlName) as FormArray;
-    return formArray.length < 1;
-  }
-
-  public unCheckAll(formControlName: string) {
-    const formArray: FormArray = this.orientationForm.get(formControlName) as FormArray;
-    formArray.clear();
+    this.onCheckChange(!this.isInArray(choice, controlName), controlName, choice);
   }
 
   public onCheckChange(event: boolean, formControlName: string, value: string): void {
@@ -339,10 +322,8 @@ export class OrientationFormComponent implements OnInit {
       this.getOrientationControl('address').get('numero').setValue(address.numero);
       this.getOrientationControl('address').get('street').setValue(address.street);
       this.getOrientationControl('address').get('commune').setValue(address.commune);
-      this.userLocation = address.coordinates;
     } else {
       this.orientationForm.get('address').reset();
-      this.userLocation = null;
     }
     this.setValidationsForm();
   }
@@ -352,13 +333,8 @@ export class OrientationFormComponent implements OnInit {
     this.setValidationsForm();
   }
 
-  public setContactAccompanimentPhone(phone: string): void {
-    this.getOrientationControl('contactAccompanimentPhone').setValue(this.utils.modifyPhoneValue(phone));
-    this.setValidationsForm();
-  }
-
-  public setContactAccompanimentEmail(email: string): void {
-    this.getOrientationControl('contactAccompanimentEmail').setValue(email);
+  public setContactAccompaniment(contact: string): void {
+    this.getOrientationControl('contactAccompaniment').setValue(contact);
     this.setValidationsForm();
   }
 
@@ -389,7 +365,7 @@ export class OrientationFormComponent implements OnInit {
       this.filters.push(new Filter('equipmentsAndServices', element, this.findEquipmentName(element)));
     });
     this.orientationForm.get('formation').value.forEach((element) => {
-      this.findTrainingCategoryForSkill(element);
+      this.orientationForm.get('formation');
       // Put higher cat like accessRight and so on here
       this.filters.push(
         new Filter(
@@ -399,6 +375,15 @@ export class OrientationFormComponent implements OnInit {
         )
       );
     });
+
+    // todo - fix
+    this.removeDoublonFilters();
+  }
+
+  public removeDoublonFilters(): void {
+    this.uncheckedFilters.forEach((elem) => {
+      this.filters = this.filters.filter((filter) => filter.value != elem.value);
+    });
     this.setStructuresAndCoord();
   }
 
@@ -425,10 +410,34 @@ export class OrientationFormComponent implements OnInit {
 
   public findTrainingCategoryForSkill(skill): any {
     let infos = { categ: '', name: '' };
-    this.selectedFormations.forEach((elem) => {
+    this.baseSkillssReferentiel.modules.forEach((elem) => {
       if (elem.id === skill) {
-        infos.categ = '';
-        infos.name = elem.name;
+        infos.categ = this.baseSkillssReferentiel.id;
+        infos.name = elem.text;
+      }
+    });
+    this.accessRightsReferentiel.modules.forEach((elem) => {
+      if (elem.id === skill) {
+        infos.categ = this.accessRightsReferentiel.id;
+        infos.name = elem.text;
+      }
+    });
+    this.parentingHelpsReferentiel.modules.forEach((elem) => {
+      if (elem.id === skill) {
+        infos.categ = this.parentingHelpsReferentiel.id;
+        infos.name = elem.text;
+      }
+    });
+    this.socialAndProfessionalsReferentiel.modules.forEach((elem) => {
+      if (elem.id === skill) {
+        infos.categ = this.socialAndProfessionalsReferentiel.id;
+        infos.name = elem.text;
+      }
+    });
+    this.digitalCultureSecuritysReferentiel.modules.forEach((elem) => {
+      if (elem.id === skill) {
+        infos.categ = this.digitalCultureSecuritysReferentiel.id;
+        infos.name = elem.text;
       }
     });
     return infos;
@@ -438,7 +447,7 @@ export class OrientationFormComponent implements OnInit {
     this.geoJsonService
       .getCoord(this.orientationForm.value.address.numero, this.orientationForm.value.address.street, '69000')
       .subscribe((res) => {
-        this.structureService.getStructures(this.filters.filter((elem) => elem.checked == true)).subscribe((data) => {
+        this.structureService.getStructures(this.filters).subscribe((data) => {
           data.map((structure) => {
             structure.distance = parseInt(
               this.geoJsonService.getDistance(
@@ -492,10 +501,15 @@ export class OrientationFormComponent implements OnInit {
     this.showStructureDetails = false;
   }
 
-  public checkFilter(filter: Filter): void {
-    this.filters.forEach((element) => {
-      if (element == filter) element.checked = !element.checked;
-    });
+  public removeFilter(filter: Filter): void {
+    this.filters = this.filters.filter((elem) => elem != filter);
+    this.uncheckedFilters.push(filter);
+    this.setStructuresAndCoord();
+  }
+
+  public restoreFilter(filter: Filter): void {
+    this.uncheckedFilters = this.uncheckedFilters.filter((elem) => elem != filter);
+    this.filters.push(filter);
     this.setStructuresAndCoord();
   }
 
diff --git a/src/app/form/orientation-form/pageType.enum.ts b/src/app/form/orientation-form/pageType.enum.ts
index e7f68bb8e..1a0fc933a 100644
--- a/src/app/form/orientation-form/pageType.enum.ts
+++ b/src/app/form/orientation-form/pageType.enum.ts
@@ -1,9 +1,9 @@
 export enum PageTypeEnum {
   beneficiaryNeed,
+  beneficiaryPassNumeric,
   beneficiaryInfo,
+  structuresSelection,
   beneficiaryAccompaniment,
   beneficiaryNeedCommentary,
-  beneficiaryAddress,
-  structuresSelection,
   printResults,
 }
diff --git a/src/app/form/structure-form/form.component.scss b/src/app/form/structure-form/form.component.scss
index 1fabc2e2c..79d9304e1 100644
--- a/src/app/form/structure-form/form.component.scss
+++ b/src/app/form/structure-form/form.component.scss
@@ -19,7 +19,7 @@ h4 {
 }
 
 .form {
-  background: $white;
+  background: white;
   width: 100vw;
   height: calc(var(--vh, 1vh) * 100 - #{$header-height} - #{$footer-height});
   top: #{$header-height};
@@ -46,7 +46,7 @@ h4 {
     display: none;
     @media #{$tablet} {
       margin: 0 auto;
-      //border-top: 1px solid $grey-4;
+      border-top: 1px solid $grey-4;
       display: block;
     }
   }
@@ -96,6 +96,7 @@ h4 {
     ) !important; // -1px because of header border
   }
   @media #{$tablet} {
+    height: 100%;
     &.editMode {
       .page {
         height: calc(
@@ -130,6 +131,11 @@ h4 {
   .page {
     max-width: 960px;
     margin: auto;
+    @media #{$tablet} {
+      height: calc(
+        100vh - #{$header-height-phone} - #{$progressBar-height} - #{$footer-height-phone} - 1px
+      ); // -1px because of header border
+    }
     height: auto;
     color: $grey-1;
     &.home {
@@ -301,7 +307,7 @@ h4 {
 
 input {
   &.email-placeholder::placeholder {
-    color: $white-2;
+    color: #cacccb;
     font-style: italic;
   }
   &.phone {
@@ -329,9 +335,6 @@ img {
   border: 1px solid $grey-4;
   border-radius: 4px;
   margin-bottom: 13px;
-  @media #{$small-phone} {
-    width: 95% !important;
-  }
   @media #{$tablet} {
     width: 296px;
   }
diff --git a/src/app/form/structure-form/form.component.ts b/src/app/form/structure-form/form.component.ts
index d0b4d04ad..c454231a2 100644
--- a/src/app/form/structure-form/form.component.ts
+++ b/src/app/form/structure-form/form.component.ts
@@ -744,7 +744,6 @@ export class FormComponent implements OnInit {
       } else {
         this.currentPage++;
         this.progressStatus += 100 / this.nbPagesForm;
-        document.getElementsByClassName('content')[0].scrollTo(0, 0);
         this.updatePageValid();
       }
     }
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index bdf85fe6b..51dd7c81d 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -38,12 +38,8 @@
       <div fxLayout="column" class="right-header" fxLayoutAlign="none baseline" fxLayoutGap="5vw">
         <a routerLink="/news" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Actualités</a>
         <a routerLink="/acteurs" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Cartographie de acteurs</a>
-        <a routerLink="/orientation" [routerLinkActive]="'active'" (click)="closeMenu()" i18n
-          >Orienter un bénéficiaire</a
-        >
-        <a routerLink="/page/qui-sommes-nous" [routerLinkActive]="'active'" (click)="closeMenu()" i18n
-          >Qui sommes-nous ?</a
-        >
+        <a routerLink="/orientation" [routerLinkActive]="'active'" i18n>Orienter un bénéficiaire</a>
+        <a routerLink="/page/qui-sommes-nous" [routerLinkActive]="'active'" i18n>Qui sommes-nous ?</a>
         <a *ngIf="isAdmin" routerLink="/admin" [routerLinkActive]="'active'" (click)="closeMenu()">Administration</a>
       </div>
     </div>
diff --git a/src/app/map/components/layers.enum.ts b/src/app/map/components/layers.enum.ts
deleted file mode 100644
index 3878af93c..000000000
--- a/src/app/map/components/layers.enum.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export enum Layers {
-  mdm = 'mdm',
-  user = 'user',
-  structure = 'structure',
-}
diff --git a/src/app/map/components/map.component.html b/src/app/map/components/map.component.html
index 1c4483bc5..3af397dbb 100644
--- a/src/app/map/components/map.component.html
+++ b/src/app/map/components/map.component.html
@@ -1,10 +1,3 @@
 <div class="map-wrapper">
-  <div
-    id="map"
-    class="body-wrap"
-    [ngClass]="{ orientation: isOrientationForm }"
-    leaflet
-    [leafletOptions]="mapOptions"
-    (leafletMapReady)="onMapReady($event)"
-  ></div>
+  <div id="map" class="body-wrap" leaflet [leafletOptions]="mapOptions" (leafletMapReady)="onMapReady($event)"></div>
 </div>
diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
index bac0c2f7f..a78caaa5c 100644
--- a/src/app/map/components/map.component.scss
+++ b/src/app/map/components/map.component.scss
@@ -23,9 +23,6 @@
   @media #{$large-phone} {
     height: calc(100vh - #{$header-height} - 28px);
   }
-  &.orientation {
-    height: calc(96vh - #{$header-height} - #{$footer-height} - 68px);
-  }
 }
 
 ::ng-deep .leaflet-popup-close-button {
@@ -135,33 +132,15 @@
   .pop-up {
     text-align: center;
     padding-top: 20px;
-    &.orientation {
-      padding: 0;
-      text-align: -webkit-center;
-    }
 
     button {
       @include btn-search-filter;
       @include cn-bold-14;
       font-size: 16px;
     }
-
-    .orientationButton {
-      display: flex;
-      padding: 10px 20px;
-      border-radius: 20px;
-      margin: 0 4px;
-      color: $black;
-      background-color: $white;
-      border: solid 1px $grey-3;
-      min-width: 120px;
-    }
   }
   span {
-    margin-right: 4px;
-    &.eye {
-      margin-right: 11px;
-    }
+    display: inline-block;
   }
 }
 ::ng-deep .leaflet-popup-content-wrapper {
diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts
index f844d5d69..de1990809 100644
--- a/src/app/map/components/map.component.ts
+++ b/src/app/map/components/map.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, HostListener, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, HostListener, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { latLng, MapOptions, geoJSON, tileLayer, Map, latLngBounds, layerGroup } from 'leaflet';
 import { Structure } from '../../models/structure.model';
 import { GeojsonService } from '../../services/geojson.service';
@@ -9,7 +9,6 @@ import { MarkerType } from './markerType.enum';
 import metropole from '../../../assets/geojson/metropole.json';
 import L from 'leaflet';
 import 'leaflet.locatecontrol';
-import { ZoomLevel } from './zoomLevel.enum';
 
 @Component({
   selector: 'app-map',
@@ -17,16 +16,14 @@ import { ZoomLevel } from './zoomLevel.enum';
   styleUrls: ['./map.component.scss'],
 })
 export class MapComponent implements OnChanges {
-  @Input() public isOrientationForm = false;
   @Input() public structures: Structure[] = [];
   @Input() public structuresToPrint: Structure[] = [];
   @Input() public toogleToolTipId: string;
   @Input() public selectedMarkerId: string;
   @Input() public isMapPhone: boolean;
   @Input() public locate = false;
-  @Input() public searchedValue: string | [number, number];
-  @Output() public selectedStructure: EventEmitter<Structure> = new EventEmitter<Structure>();
-  @Output() public onOrientationButtonClick: EventEmitter<Structure> = new EventEmitter<Structure>();
+  @Input() public searchedValue: string;
+  @Output() selectedStructure: EventEmitter<Structure> = new EventEmitter<Structure>();
   @Output() locatationTrigger: EventEmitter<boolean> = new EventEmitter<boolean>();
   private lc; // Locate control
   private currentStructure: Structure;
@@ -48,10 +45,6 @@ export class MapComponent implements OnChanges {
     if (event.target.classList.contains('btnShowDetails')) {
       this.selectedStructure.emit(this.currentStructure);
     }
-    if (event.target.classList.contains('add')) {
-      this.onOrientationButtonClick.emit(this.currentStructure);
-      this.getStructuresPositions(this.structures);
-    }
   }
 
   constructor(private mapService: MapService, private geoJsonService: GeojsonService) {
@@ -126,7 +119,7 @@ export class MapComponent implements OnChanges {
 
     if (changes.structuresToPrint) {
       if (changes.structuresToPrint.currentValue < changes.structuresToPrint.previousValue) {
-        this.mapService?.setUnactiveMarker(
+        this.mapService.setUnactiveMarker(
           this.toogleToolTipId,
           this.getMarkerTypeByStructureId(changes.structuresToPrint.previousValue)
         );
@@ -151,15 +144,6 @@ export class MapComponent implements OnChanges {
     );
   }
 
-  /**
-   * Create a user position marcker and center the map on it with a zoom level defined in ZoomLevel
-   * @param coords {[number, number]} Map center position
-   */
-  public centerOnCoordinates(coords: [number, number]): void {
-    this.mapService.createMarker(coords[1], coords[0], MarkerType.user, 'userLocation').addTo(this.map);
-    this.map.setView(new L.LatLng(coords[1], coords[0]), ZoomLevel.userPosition);
-  }
-
   /**
    * Get structures positions and add marker corresponding to those positons on the map
    */
@@ -190,7 +174,7 @@ export class MapComponent implements OnChanges {
    * @returns {MarkerType}
    */
   private getMarkerType(structure: Structure): MarkerType {
-    return structure?.labelsQualifications?.includes('conseillerNumFranceServices')
+    return structure.labelsQualifications.includes('conseillerNumFranceServices')
       ? MarkerType.conseillerFrance
       : MarkerType.structure;
   }
@@ -246,18 +230,12 @@ export class MapComponent implements OnChanges {
       '</h1>' +
       '<p>' +
       structure.getLabelTypeStructure() +
-      '</p>' +
-      (this.isOrientationForm
-        ? ''
-        : '<div>' +
-          '<span class="ico-dot-' +
-          cssAvailabilityClass +
-          '"></span><span>' +
-          structure.openDisplay() +
-          '</span></div>') +
-      (this.isOrientationForm
-        ? '<div class="pop-up orientation"><button type="button" class="orientationButton btnShowDetails"><span class="ico-gg-eye-alt eye"></span>Voir</button></div>'
-        : '<div class="pop-up"><button type="button" class="btnShowDetails">Voir</button></div>')
+      '</p><div>' +
+      '<span class="ico-dot-' +
+      cssAvailabilityClass +
+      '"></span><span>' +
+      structure.openDisplay() +
+      '</span></div><div class="pop-up"><button type="button" class="btnShowDetails">Voir</button></div>'
     );
   }
 
@@ -276,12 +254,6 @@ export class MapComponent implements OnChanges {
     this.map.on('locationfound', () => {
       this.locatationTrigger.emit(true);
     });
-
-    if (this.searchedValue) {
-      if (Array.isArray(this.searchedValue)) {
-        this.centerOnCoordinates(this.searchedValue);
-      }
-    }
   }
 
   /**
@@ -296,15 +268,15 @@ export class MapComponent implements OnChanges {
     layerGroup();
     const carteLayer = tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
       attribution: '&copy; <a href="https://carto.com/attributions">CARTO</a>',
-      maxZoom: ZoomLevel.max,
+      maxZoom: 19,
     });
     // Center is set on townhall
     // Zoom is blocked on 11 to prevent people to zoom out from metropole
     this.mapOptions = {
       center: latLng(45.764043, 4.835659),
-      maxZoom: ZoomLevel.max,
-      zoom: ZoomLevel.regular,
-      minZoom: ZoomLevel.min,
+      maxZoom: 19,
+      zoom: 12,
+      minZoom: 10,
       layers: [carteLayer],
     };
   }
diff --git a/src/app/map/components/markerType.enum.ts b/src/app/map/components/markerType.enum.ts
index ade600852..9d6c395c7 100644
--- a/src/app/map/components/markerType.enum.ts
+++ b/src/app/map/components/markerType.enum.ts
@@ -2,5 +2,4 @@ export enum MarkerType {
   structure = 0,
   mdm = 1,
   conseillerFrance = 2,
-  user = 3,
 }
diff --git a/src/app/map/components/zoomLevel.enum.ts b/src/app/map/components/zoomLevel.enum.ts
deleted file mode 100644
index fe020b772..000000000
--- a/src/app/map/components/zoomLevel.enum.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export enum ZoomLevel {
-  min = 10,
-  regular = 12,
-  userPosition = 15,
-  max = 19,
-}
diff --git a/src/app/map/services/map.service.ts b/src/app/map/services/map.service.ts
index c65d92585..93b07319c 100644
--- a/src/app/map/services/map.service.ts
+++ b/src/app/map/services/map.service.ts
@@ -1,15 +1,17 @@
 import { Injectable } from '@angular/core';
 import { DivIcon, divIcon, Map, Marker } from 'leaflet';
-import { Layers } from '../components/layers.enum';
 import { MarkerType } from '../components/markerType.enum';
 import {
   markerIcon,
   markerIconActive,
   markerIconAddedToList,
+  markerIconFranceService,
+  markerIconFranceServiceActive,
+  markerIconFranceServiceAddedToList,
+  markerIconFranceServiceHover,
   markerIconHover,
   markerIconMdm,
   markerIconMdmActive,
-  userLocationIcon,
 } from './marker';
 @Injectable({
   providedIn: 'root',
@@ -49,63 +51,51 @@ export class MapService {
 
   private getLayerAttributton(markerType: MarkerType): string {
     if (markerType === MarkerType.mdm) {
-      return Layers.mdm;
-    } else if (markerType === MarkerType.user) {
-      return Layers.user;
+      return 'mdm';
     } else {
-      return Layers.structure;
+      return 'structure';
     }
   }
 
   // Note: Marke IconFranceService has been removed temporarly on order to rework on buisness needs.
   // This comment is applied for the next 4 methods
   private getMarkerIcon(markerType: MarkerType): DivIcon {
-    switch (markerType) {
-      case MarkerType.mdm:
-        return markerIconMdm;
-      case MarkerType.conseillerFrance:
-        return markerIcon;
-      case MarkerType.user:
-        return userLocationIcon;
-      default:
-        return markerIcon;
+    if (markerType === MarkerType.mdm) {
+      return markerIconMdm;
+    } else if (markerType === MarkerType.conseillerFrance) {
+      // return markerIconFranceService;
+      return markerIcon;
+    } else {
+      return markerIcon;
     }
   }
 
   private getActiveMarkerIcon(markerType: MarkerType): DivIcon {
-    switch (markerType) {
-      case MarkerType.mdm:
-        return markerIconMdmActive;
-      case MarkerType.conseillerFrance:
-        // return markerIconFranceServiceActive;
-        return markerIconActive;
-      case MarkerType.user:
-        return userLocationIcon;
-      default:
-        return markerIconActive;
+    if (markerType === MarkerType.mdm) {
+      return markerIconMdmActive;
+    } else if (markerType === MarkerType.conseillerFrance) {
+      // return markerIconFranceServiceActive;
+      return markerIconActive;
+    } else {
+      return markerIconActive;
     }
   }
 
   private getAddedToListMarkerIcon(markerType: MarkerType): DivIcon {
-    switch (markerType) {
-      case MarkerType.conseillerFrance:
-        // return markerIconFranceServiceAddedToList;
-        return markerIconAddedToList;
-      case MarkerType.user:
-        return userLocationIcon;
-      default:
-        return markerIconAddedToList;
+    if (markerType === MarkerType.conseillerFrance) {
+      // return markerIconFranceServiceAddedToList;
+      return markerIconAddedToList;
+    } else {
+      return markerIconAddedToList;
     }
   }
 
   private getHoverMarkerIcon(markerType: MarkerType): DivIcon {
-    switch (markerType) {
-      case MarkerType.conseillerFrance:
-        return markerIconHover;
-      case MarkerType.user:
-        return userLocationIcon;
-      default:
-        return markerIconHover;
+    if (markerType === MarkerType.conseillerFrance) {
+      // return markerIconFranceServiceHover;
+      return markerIconHover;
+    } else {
+      return markerIconHover;
     }
   }
 
@@ -171,7 +161,7 @@ export class MapService {
     MapService.markersList = {};
     if (map) {
       map.eachLayer((layer) => {
-        if (layer instanceof Marker && layer.options.attribution == Layers.structure) {
+        if (layer instanceof Marker && layer.options.attribution !== 'mdm') {
           map.removeLayer(layer);
         }
       });
diff --git a/src/app/map/services/marker.ts b/src/app/map/services/marker.ts
index e458b0b9d..fb940ba4c 100644
--- a/src/app/map/services/marker.ts
+++ b/src/app/map/services/marker.ts
@@ -28,12 +28,6 @@ export const markerIconAddedToList = divIcon({
   iconAnchor: [24, 48],
   popupAnchor: [0, -48],
 });
-export const userLocationIcon = divIcon({
-  className: null,
-  html: '<svg width="34" height="34"><use xlink:href="assets/ico/sprite.svg#user-location"></use></svg>',
-  iconSize: [34, 34],
-  iconAnchor: [17, 0],
-});
 export const markerIconMdm = divIcon({
   className: null,
   html:
diff --git a/src/app/models/address.model.ts b/src/app/models/address.model.ts
index 0b30ddc1c..d04d83abe 100644
--- a/src/app/models/address.model.ts
+++ b/src/app/models/address.model.ts
@@ -2,5 +2,4 @@ export class Address {
   numero: string = null;
   street: string = null;
   commune: string = null;
-  coordinates? = [];
 }
diff --git a/src/app/models/orientation-filter.object.ts b/src/app/models/orientation-filter.object.ts
index 49fe9ca54..48a52e4ac 100644
--- a/src/app/models/orientation-filter.object.ts
+++ b/src/app/models/orientation-filter.object.ts
@@ -7,8 +7,7 @@ export class OrientationFormFilters {
   handicap: boolean;
   passNumeric: boolean;
   structureAccompaniment: string;
-  contactAccompanimentPhone: string;
-  contactAccompanimentEmail: string;
+  contactAccompaniment: string;
   beneficiaryName: string;
   beneficiaryNeedCommentary: string;
   address: Address;
diff --git a/src/app/newsletter-subscription/newsletter-subscription.component.scss b/src/app/newsletter-subscription/newsletter-subscription.component.scss
index f3c913b2c..4bf4d917c 100644
--- a/src/app/newsletter-subscription/newsletter-subscription.component.scss
+++ b/src/app/newsletter-subscription/newsletter-subscription.component.scss
@@ -10,7 +10,7 @@
 }
 
 .form-input {
-  background-color: $white;
+  background-color: white;
   width: 100%;
 }
 
diff --git a/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts b/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts
index a1115c3ac..10f2efed1 100644
--- a/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts
+++ b/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts
@@ -59,7 +59,6 @@ export class AddressAutocompleteComponent implements OnInit {
     address.numero = hit.properties.housenumber ? hit.properties.housenumber : null;
     address.street = hit.properties.street;
     address.commune = hit.properties.city;
-    address.coordinates = hit.geometry.coordinates;
     const value = this.parseHitToAddress(hit);
     // Set input value
     this.searchAddress.nativeElement.value = value;
diff --git a/src/app/shared/components/svg-icon/svg-icon.component.scss b/src/app/shared/components/svg-icon/svg-icon.component.scss
index 0ce39a373..bed7e3e0d 100644
--- a/src/app/shared/components/svg-icon/svg-icon.component.scss
+++ b/src/app/shared/components/svg-icon/svg-icon.component.scss
@@ -51,10 +51,6 @@
     fill: $grey-1;
     stroke: $grey-1;
   }
-  &.green {
-    fill: $green-1;
-    stroke: $green-1;
-  }
 }
 
 svg {
diff --git a/src/app/structure-list/components/card/card.component.html b/src/app/structure-list/components/card/card.component.html
index eae83fda6..bfe44fd1a 100644
--- a/src/app/structure-list/components/card/card.component.html
+++ b/src/app/structure-list/components/card/card.component.html
@@ -1,57 +1,42 @@
-<div
-  class="structure"
-  fxLayout="column"
-  (click)="cardClicked()"
-  (mouseenter)="cardHover()"
-  [ngClass]="{ orientation: isOrientation }"
->
-  <div class="left">
-    <div fxLayout="row" fxLayoutAlign="space-between baseline" fxLayoutGap="16px">
-      <div fxLayout="column" fxLayoutAlign="end">
-        <span class="structure-name" [ngClass]="{ notClaimed: !isClaimed }">{{ structure.structureName }}</span>
-        <span class="typeStructure">{{ structure.getLabelTypeStructure() }}</span>
+<div class="structure" fxLayout="column" (click)="cardClicked()" (mouseenter)="cardHover()">
+  <div class="headerStructure" fxLayout="row" fxLayoutAlign="space-between baseline" fxLayoutGap="16px">
+    <div fxLayout="column" fxLayoutAlign="end">
+      <span class="structure-name" [ngClass]="{ notClaimed: !isClaimed }">{{ structure.structureName }}</span>
+      <span class="typeStructure">{{ structure.getLabelTypeStructure() }}</span>
+    </div>
+    <div class="distanceStructure" fxLayout="column" fxLayoutAlign="none end">
+      <div *ngIf="!isOrientation">
+        {{ this.structure.address.commune }}
       </div>
-      <div class="distanceStructure" fxLayout="column" fxLayoutAlign="none end">
-        <div *ngIf="!isOrientation">
-          {{ this.structure.address.commune }}
-        </div>
+      <div
+        fxLayout="row"
+        *ngIf="isOrientation && !isSelected"
+        class="selection-button selected"
+        (click)="cardAddToList(); $event.stopPropagation()"
+      >
+        <app-svg-icon [type]="'ico'" [icon]="'add'" [iconColor]="'black'"></app-svg-icon>ajouter à la liste
+      </div>
+      <div
+        fxLayout="row"
+        *ngIf="isOrientation && isSelected"
+        class="selection-button to-select"
+        (click)="cardAddToList(); $event.stopPropagation()"
+      >
+        <app-svg-icon [type]="'ico'" [icon]="'validate'" [iconColor]="'white'"></app-svg-icon>
+        retirer de la liste
+      </div>
+      <div *ngIf="structure.distance">
+        {{ this.formatDistance() }}
       </div>
-    </div>
-    <div
-      fxLayout="row"
-      fxLayoutAlign="none flex-end"
-      fxLayoutGap="7px"
-      *ngIf="structure.hasEquipments() && !isOrientation"
-    >
-      <app-svg-icon
-        *ngFor="let equipement of filterOnlyEquipments(structure.equipmentsAndServices)"
-        [type]="'ico'"
-        [iconColor]="'grey'"
-        [icon]="structure.getEquipmentsIcon(equipement)"
-        [title]="structure.getEquipmentsTitle(equipement)"
-      ></app-svg-icon>
-    </div>
-    <div class="distance" *ngIf="structure.distance">
-      {{ this.formatDistance() }}
     </div>
   </div>
-  <div class="actions right" *ngIf="isOrientation">
-    <div
-      fxLayout="row"
-      *ngIf="!isSelected"
-      class="selection-button selected"
-      (click)="cardAddToList(); $event.stopPropagation()"
-    >
-      <app-svg-icon class="add-icon" [type]="'ico'" [icon]="'add'" [iconColor]="'green'"></app-svg-icon>Ajouter
-    </div>
-    <div
-      fxLayout="row"
-      *ngIf="isSelected"
-      class="selection-button to-select"
-      (click)="cardAddToList(); $event.stopPropagation()"
-    >
-      <app-svg-icon class="add-icon" [type]="'ico'" [icon]="'validate'" [iconColor]="'white'"></app-svg-icon>
-      Ajouté
-    </div>
+  <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="7px" *ngIf="structure.hasEquipments()">
+    <app-svg-icon
+      *ngFor="let equipement of filterOnlyEquipments(structure.equipmentsAndServices)"
+      [type]="'ico'"
+      [iconColor]="'grey'"
+      [icon]="structure.getEquipmentsIcon(equipement)"
+      [title]="structure.getEquipmentsTitle(equipement)"
+    ></app-svg-icon>
   </div>
 </div>
diff --git a/src/app/structure-list/components/card/card.component.scss b/src/app/structure-list/components/card/card.component.scss
index 220adda58..7b5fb40ae 100644
--- a/src/app/structure-list/components/card/card.component.scss
+++ b/src/app/structure-list/components/card/card.component.scss
@@ -30,6 +30,9 @@
     color: $grey-3;
     width: 50%;
   }
+  &:last-child {
+    border-bottom: none;
+  }
 }
 
 .selection-button {
@@ -37,44 +40,22 @@
   font-weight: bold;
   justify-content: center;
   align-items: center;
-  min-width: 120px;
-  height: 40px;
+  min-width: 180px;
+  height: 30px;
   border-radius: 20px;
+  padding: 3px 10px;
+  margin-bottom: 10px;
 }
 
 .selected {
-  border: solid 1px $grey-3;
+  border-style: solid;
+  border-width: 2px;
   background-color: $white;
+  border-color: $black;
   color: $black;
 }
 .to-select {
-  color: $white;
+  color: white;
   border-style: none;
   background: #47c562;
 }
-
-.distance {
-  color: $grey-3;
-}
-
-.add-icon {
-  color: $green-1;
-}
-
-.orientation {
-  flex-direction: row !important;
-
-  .left {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    width: 70%;
-  }
-
-  .right {
-    margin-top: 6%;
-    @media #{$large-phone} {
-      margin-left: unset;
-    }
-  }
-}
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.scss b/src/app/structure-list/components/structure-details/structure-details.component.scss
index 2b5a439e1..de1fd0ab8 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.scss
+++ b/src/app/structure-list/components/structure-details/structure-details.component.scss
@@ -22,13 +22,13 @@ a {
   padding: 0px 24px;
   overflow: auto;
   @media #{$tablet} {
+    width: calc(100% - 2 * 24px);
+    position: inherit;
+    height: 100%;
+    overflow: unset;
     .printButton {
       display: none !important;
     }
-
-    .ico-close {
-      margin-left: 16px;
-    }
   }
   .printButton {
     margin-right: 75px;
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.ts b/src/app/structure-list/components/structure-details/structure-details.component.ts
index cae5b0b60..5ccbc64f4 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.ts
+++ b/src/app/structure-list/components/structure-details/structure-details.component.ts
@@ -94,6 +94,7 @@ export class StructureDetailsComponent implements OnInit {
           this.socialAndProfessionalsReferentiel = referentiel;
         }
       });
+      this.setServiceCategories();
       if (this.printMode) {
         this.printService.onDataReady();
       }
@@ -249,6 +250,24 @@ export class StructureDetailsComponent implements OnInit {
     }
   }
 
+  public setServiceCategories(): void {
+    this.baseSkills = this.structure.baseSkills.map((skill) =>
+      _.find(this.baseSkillssReferentiel.modules, { id: skill })
+    );
+    this.accessRights = this.structure.accessRight.map((rights) =>
+      _.find(this.accessRightsReferentiel.modules, { id: rights })
+    );
+    this.parentingHelp = this.structure.parentingHelp.map((help) =>
+      _.find(this.parentingHelpsReferentiel.modules, { id: help })
+    );
+    this.socialAndProfessional = this.structure.socialAndProfessional.map((skill) =>
+      _.find(this.socialAndProfessionalsReferentiel.modules, { id: skill })
+    );
+    this.digitalCultureSecurity = this.structure.digitalCultureSecurity.map((skill) =>
+      _.find(this.digitalCultureSecuritysReferentiel.modules, { id: skill })
+    );
+  }
+
   public keepOriginalOrder = (a, b) => a.key;
 
   public isBaseSkills(): boolean {
diff --git a/src/app/structure-list/models/category.model.ts b/src/app/structure-list/models/category.model.ts
index b130dc133..2aa78bbf3 100644
--- a/src/app/structure-list/models/category.model.ts
+++ b/src/app/structure-list/models/category.model.ts
@@ -2,7 +2,6 @@ import { Module } from './module.model';
 
 export class Category {
   name: string;
-  surname: string;
   id: string;
   modules: Module[];
 
diff --git a/src/app/structure-list/models/filter.model.ts b/src/app/structure-list/models/filter.model.ts
index 25d7ff825..9ca536124 100644
--- a/src/app/structure-list/models/filter.model.ts
+++ b/src/app/structure-list/models/filter.model.ts
@@ -2,12 +2,10 @@ export class Filter {
   name: string;
   value: string;
   text?: string;
-  checked: boolean;
 
   constructor(name: string, value: any, text?: string) {
     this.name = name;
     this.value = value.toString();
     this.text = text;
-    this.checked = true;
   }
 }
diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html
index 9f2fc1b20..1b39ec645 100644
--- a/src/app/structure-list/structure-list.component.html
+++ b/src/app/structure-list/structure-list.component.html
@@ -18,7 +18,6 @@
     [structure]="structure"
     (showDetails)="showDetails($event, filters)"
     (hover)="handleCardHover($event)"
-    class="structure-card"
   ></app-card>
   <p *ngIf="structureList && structureList.length <= 0">Il n'y a aucune réponse correspondant à votre recherche</p>
 </div>
diff --git a/src/app/structure-list/structure-list.component.scss b/src/app/structure-list/structure-list.component.scss
index 56305e76c..1817ffba9 100644
--- a/src/app/structure-list/structure-list.component.scss
+++ b/src/app/structure-list/structure-list.component.scss
@@ -12,16 +12,11 @@
   padding-left: 9px;
   margin: 0 16px;
 }
-
 .listCard {
   overflow-y: auto;
   padding: 0 25px;
 }
 
-::ng-deep .structure-card:last-child .structure {
-  border-bottom: unset !important;
-}
-
 @media print {
   .listCard {
     display: none;
diff --git a/src/app/utils/utils.ts b/src/app/utils/utils.ts
index a949f40fd..e37ab99dd 100644
--- a/src/app/utils/utils.ts
+++ b/src/app/utils/utils.ts
@@ -14,15 +14,4 @@ export class Utils {
       form.get(controlName).setValue(phoneNoSpace.replace(/(?!^)(?=(?:\d{2})+$)/g, ' ')); //NOSONAR
     }
   }
-
-  public modifyPhoneValue(phoneNumber: string): string {
-    // Take length of phone number without spaces.
-    const phoneNoSpace = phoneNumber.replace(/\s/g, '');
-    // Check to refresh every 2 number.
-    if (phoneNoSpace.length % 2 === 0) {
-      // Add space every 2 number
-      return phoneNoSpace.replace(/(?!^)(?=(?:\d{2})+$)/g, ' '); //NOSONAR
-    }
-    return phoneNumber;
-  }
 }
diff --git a/src/assets/form/sprite.svg b/src/assets/form/sprite.svg
index f159036d9..356b83c16 100644
--- a/src/assets/form/sprite.svg
+++ b/src/assets/form/sprite.svg
@@ -382,35 +382,5 @@
 <path fill-rule="evenodd" clip-rule="evenodd" stroke="none" d="M0 9C0 8.44772 0.447715 8 1 8H21C21.5523 8 22 8.44772 22 9V23C22 23.5523 21.5523 24 21 24H14V25.6L16.3685 26.3106C16.7433 26.423 17 26.768 17 27.1593C17 27.6487 16.6033 28.0454 16.1139 28.0454H5.88612C5.39673 28.0454 5 27.6487 5 27.1593C5 26.768 5.25668 26.423 5.63149 26.3106L8 25.6V24H1C0.447716 24 0 23.5523 0 23V9ZM1 9H21V21H1V9Z" fill="#333333"/>
 </symbol>
 
-<symbol id="grandLyonLaMetropole" width="189" height="43" viewBox="0 0 189 43" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_5084_112181)">
-<path d="M14.6188 24.1594C13.8364 25.1028 12.8909 25.8619 11.8386 26.3915C10.7863 26.921 9.64874 27.2102 8.49363 27.2418C7.33852 27.2733 6.18949 27.0467 5.11498 26.5753C4.04046 26.1039 3.06242 25.3974 2.23911 24.4978C0.0358825 22.0532 1.03355e-07 19.6802 7.15522e-08 13.6244C3.9749e-08 7.56856 0.043059 5.19162 2.23911 2.74699C3.03301 1.87136 3.97472 1.17801 5.01036 0.706612C6.04601 0.235214 7.15526 -0.00498298 8.27465 -0.000236215C12.516 -0.000236237 15.7706 3.08541 16.5278 7.82736L14.6977 7.82736C13.9801 4.14051 11.5436 1.80736 8.28541 1.80736C7.4372 1.79871 6.59591 1.97729 5.81047 2.33273C5.02504 2.68816 4.31114 3.21334 3.71031 3.87773C1.96998 5.81273 1.83722 7.86717 1.83722 13.6244C1.83722 19.3816 1.97357 21.452 3.70314 23.3671C4.30384 24.0316 5.01772 24.5569 5.80318 24.9124C6.58864 25.2678 7.43 25.4463 8.27824 25.4375C9.23644 25.4435 10.1839 25.2138 11.0526 24.765C11.9212 24.3161 12.6894 23.6592 13.3019 22.8415C14.3461 21.4122 14.7551 19.8315 14.7551 17.5382L14.7551 15.1294L8.27465 15.1294L8.27465 13.3218L16.5852 13.3218L16.5852 17.7014C16.5852 20.4885 16.0433 22.4792 14.6188 24.1753" fill="#FF0101"/>
-<path d="M31.9782 2.03265L24.8554 2.03265L24.8554 12.8702L31.9782 12.8702C35.0642 12.8702 37.3033 11.1383 37.3033 7.45144C37.3033 3.76459 35.0642 2.03265 31.9782 2.03265ZM37.2674 27.0204L31.501 14.6778L24.8554 14.6778L24.8554 27.0204L23.0254 27.0204L23.0254 0.237L32.2151 0.236999C36.1622 0.236999 39.1333 2.75728 39.1333 7.42357C39.1333 11.4051 36.9624 14.0089 33.5714 14.65L39.4024 27.0324L37.2674 27.0204Z" fill="#FF0101"/>
-<path d="M51.7832 2.93246L46.7308 18.6991L56.8355 18.6991L51.7832 2.93246ZM59.516 27.0164L57.4133 20.5067L46.1531 20.5067L44.0504 27.0164L42.084 27.0164L50.9686 0.236999L52.5977 0.236999L61.4824 27.0324L59.516 27.0164Z" fill="#FF0101"/>
-<path d="M81.4838 27.0166L67.5468 3.72496L67.5468 27.0166L65.7168 27.0166L65.7168 0.221252L67.5468 0.221252L81.4838 23.4413L81.4838 0.221252L83.3175 0.221252L83.3175 27.0166L81.4838 27.0166Z" fill="#FF0101"/>
-<path d="M103.623 4.09904C102.234 2.50644 100.368 2.03265 98.4342 2.03265L92.5996 2.03265L92.5996 25.2088L98.4306 25.2088C100.365 25.2088 102.231 24.7191 103.619 23.1385C105.55 20.9566 105.413 16.2147 105.413 13.2445C105.413 10.2743 105.546 6.28487 103.619 4.08709L103.623 4.09904ZM104.907 24.5599C103.472 26.1525 101.384 27.0045 98.872 27.0045L90.7695 27.0045L90.7695 0.237L98.8755 0.236999C101.387 0.236999 103.487 1.10496 104.911 2.68561C107.355 5.39302 107.251 9.64524 107.251 13.2604C107.251 16.8756 107.355 21.8604 104.911 24.5718L104.907 24.5599Z" fill="#FF0101"/>
-<path d="M112.846 27.0166L112.846 0.221252L117.561 0.221252L117.561 22.3503L128.516 22.3503L128.516 27.0166L112.846 27.0166Z" fill="#333333"/>
-<path d="M138.852 16.0277L138.852 27.0166L134.173 27.0166L134.173 16.0277L126.914 0.221252L132.035 0.221252L136.545 11.027L140.991 0.221252L146.108 0.221252L138.852 16.0277Z" fill="#333333"/>
-<path d="M159.805 6.09478C159.424 5.62814 158.957 5.25868 158.436 5.0119C157.914 4.76512 157.35 4.64691 156.783 4.66543C156.212 4.64699 155.643 4.76508 155.116 5.01168C154.59 5.25829 154.117 5.62767 153.73 6.09478C152.815 7.22154 152.578 8.48367 152.578 13.6198C152.578 18.7559 152.815 20.014 153.73 21.1448C154.117 21.6117 154.59 21.9809 155.117 22.2275C155.643 22.4741 156.212 22.5923 156.783 22.5741C157.35 22.5924 157.914 22.4741 158.435 22.2273C158.957 21.9805 159.424 21.6112 159.805 21.1448C160.72 20.014 160.992 18.7559 160.992 13.6198C160.992 8.48367 160.723 7.22154 159.805 6.09478ZM163.311 24.3101C161.561 26.1934 159.219 27.2467 156.782 27.2467C154.344 27.2467 152.002 26.1934 150.253 24.3101C147.813 21.6026 147.877 18.2502 147.877 13.6238C147.877 8.99728 147.813 5.6608 150.253 2.93747C152.002 1.05412 154.344 0.000793424 156.782 0.000793411C159.219 0.000793399 161.561 1.05412 163.311 2.93747C165.754 5.64487 165.718 8.9933 165.718 13.6238C165.718 18.2542 165.74 21.6026 163.311 24.3101Z" fill="#333333"/>
-<path d="M184.79 27.0166L175.227 10.5731L175.227 27.0166L170.516 27.0166L170.516 0.221252L174.721 0.221252L184.284 16.6289L184.284 0.221252L188.999 0.221252L188.999 27.0166L184.79 27.0166Z" fill="#333333"/>
-<path d="M160.242 35.4745L160.264 35.4745C160.376 35.2188 160.553 35.0047 160.773 34.8578C160.992 34.7108 161.246 34.6374 161.502 34.6464C162.363 34.6464 163.239 35.0445 163.239 37.6524C163.239 39.1414 163.196 40.8575 161.444 40.8575C161.208 40.8618 160.974 40.7976 160.766 40.6712C160.559 40.5449 160.384 40.3607 160.26 40.1368L160.228 40.1368L160.228 42.9995L159.363 42.9995L159.363 34.7658L160.239 34.7658L160.242 35.4745ZM162.324 37.6524C162.324 36.7526 162.324 35.4387 161.226 35.4387C160.128 35.4387 160.246 37.095 160.246 38.0067C160.246 38.803 160.289 40.0651 161.258 40.0651C162.227 40.0651 162.324 39.2569 162.324 37.6643L162.324 37.6524Z" fill="#333333"/>
-<path d="M99.992 39.8734L99.9705 39.8734C99.8752 40.1805 99.6905 40.4438 99.4457 40.6218C99.2008 40.7998 98.9095 40.8825 98.6177 40.8568C97.4766 40.8568 97.1465 40.0406 97.1465 38.8939C97.1465 37.0824 98.7469 37.0027 99.9705 37.0346C99.992 36.2383 100.003 35.3783 99.0627 35.3783C98.9391 35.3673 98.815 35.3884 98.7001 35.44C98.5853 35.4916 98.4828 35.5722 98.401 35.6754C98.3191 35.7786 98.26 35.9016 98.2285 36.0345C98.197 36.1675 98.1939 36.3068 98.2194 36.4414L97.2864 36.4414C97.3295 35.1036 97.9682 34.6417 99.1093 34.6417C100.494 34.6417 100.857 35.438 100.857 36.4414L100.857 39.316C100.86 39.7921 100.896 40.2672 100.964 40.7374L100.006 40.7374L99.992 39.8734ZM98.022 38.9616C98.022 39.5389 98.2768 40.0605 98.8617 40.0605C99.4466 40.0605 100.057 39.6942 99.9705 37.7632C99.1416 37.7791 98.022 37.6995 98.022 38.9656L98.022 38.9616Z" fill="#333333"/>
-<path d="M115.722 40.7375L115.722 36.5968C115.722 35.9916 115.572 35.4382 114.868 35.4382C114.724 35.4407 114.581 35.4776 114.451 35.5462C114.32 35.6149 114.204 35.7138 114.111 35.8363C113.976 36.1038 113.905 36.4056 113.907 36.7123L113.907 40.7336L113.038 40.7336L113.038 36.0075C113.038 35.6094 113.017 35.1794 112.984 34.7653L113.91 34.7653L113.91 35.5099L113.932 35.5099C114.042 35.2248 114.232 34.9868 114.474 34.8311C114.715 34.6755 114.996 34.6105 115.274 34.6459C115.528 34.6248 115.783 34.6862 116.006 34.8226C116.23 34.959 116.413 35.1646 116.533 35.4143C116.652 35.1581 116.838 34.9478 117.067 34.8107C117.295 34.6736 117.556 34.6162 117.814 34.6459C118.381 34.6459 119.285 34.7892 119.285 36.1947L119.285 40.7375L118.41 40.7375L118.41 36.5968C118.41 35.9916 118.263 35.4382 117.556 35.4382C117.438 35.4175 117.317 35.4268 117.203 35.4654C117.088 35.504 116.983 35.5709 116.896 35.6612C116.684 35.9597 116.579 36.3334 116.598 36.7123L116.598 40.7336L115.722 40.7375Z" fill="#333333"/>
-<path d="M125.656 38.063C125.656 39.7313 126.061 40.0538 126.732 40.0538C127.328 40.0538 127.64 39.5203 127.669 38.9191L128.627 38.9191C128.627 40.2449 127.881 40.8461 126.75 40.8461C125.62 40.8461 124.705 40.4479 124.705 37.8281C124.705 36.0763 124.884 34.6429 126.75 34.6429C128.286 34.6429 128.67 35.5786 128.67 37.5534L128.67 38.063L125.656 38.063ZM127.755 37.3304C127.755 35.5905 127.317 35.3795 126.679 35.3795C126.126 35.3795 125.667 35.6741 125.656 37.3304L127.755 37.3304ZM127.97 32.1943L126.575 33.8626L125.857 33.8626L126.808 32.1943L127.97 32.1943Z" fill="#333333"/>
-<path d="M134.605 34.7658L134.605 33.6191L135.481 33.1812L135.481 34.7737L136.654 34.7737L136.654 35.5063L135.481 35.5063L135.481 39.1613C135.481 39.5595 135.481 40.0253 136.281 40.0253C136.346 40.0253 136.482 40.0014 136.676 39.9775L136.676 40.7221C136.389 40.746 136.098 40.8176 135.811 40.8176C134.979 40.8176 134.605 40.4195 134.605 39.7546L134.605 35.4984L133.723 35.4984L133.723 34.7658L134.605 34.7658Z" fill="#333333"/>
-<path d="M143.185 35.674L143.217 35.674C143.576 34.7623 144.028 34.6588 144.879 34.6588L144.879 35.6661L144.646 35.6302C144.568 35.6157 144.49 35.6077 144.412 35.6063C143.443 35.6063 143.196 36.4226 143.196 37.2268L143.196 40.7544L142.32 40.7544L142.32 34.7822L143.196 34.7822L143.185 35.674Z" fill="#333333"/>
-<path d="M149.852 37.84C149.852 36.0882 150.031 34.6548 151.897 34.6548C153.763 34.6548 153.942 36.1001 153.942 37.84C153.942 40.4797 153.034 40.858 151.897 40.858C150.759 40.858 149.852 40.4797 149.852 37.84ZM153.027 37.4419C153.027 35.8095 152.568 35.4511 151.897 35.4511C151.226 35.4511 150.767 35.8055 150.767 37.4419C150.767 39.3809 150.993 40.0816 151.897 40.0816C152.801 40.0816 153.031 39.3649 153.031 37.426L153.027 37.4419Z" fill="#333333"/>
-<path d="M168.586 37.84C168.586 36.0882 168.765 34.6548 170.631 34.6548C172.497 34.6548 172.68 36.1001 172.68 37.84C172.68 40.4797 171.772 40.858 170.631 40.858C169.49 40.858 168.586 40.4797 168.586 37.84ZM171.762 37.4419C171.762 35.8095 171.302 35.4511 170.631 35.4511C169.96 35.4511 169.501 35.8055 169.501 37.4419C169.501 39.3809 169.723 40.0816 170.631 40.0816C171.539 40.0816 171.765 39.3649 171.765 37.426L171.762 37.4419Z" fill="#333333"/>
-<path d="M179.221 40.7386L178.346 40.7386L178.346 32.1983L179.218 32.1983L179.221 40.7386Z" fill="#333333"/>
-<path d="M185.674 38.0618C185.674 39.7301 186.079 40.0526 186.75 40.0526C187.346 40.0526 187.658 39.519 187.687 38.9178L188.645 38.9178C188.645 40.2437 187.898 40.8449 186.768 40.8449C185.638 40.8449 184.723 40.4467 184.723 37.8269C184.723 36.0751 184.902 34.6417 186.768 34.6417C188.304 34.6417 188.688 35.5774 188.688 37.5522L188.688 38.0618L185.674 38.0618ZM187.773 37.3292C187.773 35.5893 187.335 35.3783 186.696 35.3783C186.144 35.3783 185.684 35.6729 185.674 37.3292L187.773 37.3292Z" fill="#333333"/>
-<path d="M92.1236 40.7386L91.248 40.7386L91.248 32.1983L92.1236 32.1983L92.1236 40.7386Z" fill="#333333"/>
-</g>
-<defs>
-<clipPath id="clip0_5084_112181">
-<rect width="189" height="43" fill="white"/>
-</clipPath>
-</defs>
-</symbol>
-
 </svg>
 
diff --git a/src/assets/ico/sprite.svg b/src/assets/ico/sprite.svg
index 81f91788f..e7b918e0f 100644
--- a/src/assets/ico/sprite.svg
+++ b/src/assets/ico/sprite.svg
@@ -292,13 +292,6 @@
 <path fill-rule="evenodd" clip-rule="evenodd" d="M17.3405 17.1848C16.2256 17.652 15.5 18.7428 15.5 19.9517V34.6087L22.5 34.6087V30.1087C22.5 29.2802 23.1716 28.6087 24 28.6087C24.8284 28.6087 25.5 29.2802 25.5 30.1087V34.6087L32.5 34.6087V20.0123C32.5 18.7731 31.7381 17.6614 30.5823 17.2143L29.0555 16.6237C28.6291 16.4588 28.246 16.1986 27.9355 15.863L25.4183 13.1419C24.6451 12.3061 23.3312 12.2834 22.5297 13.0921L19.6982 15.9488C19.4206 16.2289 19.0906 16.4515 18.7269 16.6039L17.3405 17.1848ZM25.5 16.1087C25.5 16.9371 24.8284 17.6087 24 17.6087C23.1716 17.6087 22.5 16.9371 22.5 16.1087C22.5 15.2802 23.1716 14.6087 24 14.6087C24.8284 14.6087 25.5 15.2802 25.5 16.1087ZM18.75 27.544C18.0406 27.6631 17.5 28.2801 17.5 29.0233V30.3587H18.75V27.544ZM17.5 33.5233V30.8587H18.75V33.5233H17.5ZM19.25 33.5233V30.8587H20.5V33.5233H19.25ZM20.5 29.0233V30.3587H19.25V27.544C19.9594 27.6631 20.5 28.2801 20.5 29.0233ZM27.5 29.0233C27.5 28.2801 28.0406 27.6631 28.75 27.544V30.3587H27.5V29.0233ZM27.5 30.8587V33.5233H28.75V30.8587H27.5ZM29.25 30.8587V33.5233H30.5V30.8587H29.25ZM30.5 30.3587V29.0233C30.5 28.2801 29.9594 27.6631 29.25 27.544V30.3587H30.5ZM28.75 19.6087C28.0406 19.7277 27.5 20.3447 27.5 21.0879V22.4233H28.75V19.6087ZM27.5 25.5879V22.9233H28.75V25.5879H27.5ZM29.25 25.5879V22.9233H30.5V25.5879H29.25ZM30.5 21.0879V22.4233H29.25V19.6087C29.9594 19.7277 30.5 20.3447 30.5 21.0879ZM22.5 21.0879C22.5 20.3447 23.0406 19.7277 23.75 19.6087V22.4233H22.5V21.0879ZM22.5 22.9233V25.5879H23.75V22.9233H22.5ZM24.25 22.9233V25.5879H25.5V22.9233H24.25ZM25.5 22.4233V21.0879C25.5 20.3447 24.9594 19.7277 24.25 19.6087V22.4233H25.5ZM18.75 19.6087C18.0406 19.7277 17.5 20.3447 17.5 21.0879V22.4233H18.75V19.6087ZM17.5 25.5879V22.9233H18.75V25.5879H17.5ZM19.25 25.5879V22.9233H20.5V25.5879H19.25ZM20.5 21.0879V22.4233H19.25V19.6087C19.9594 19.7277 20.5 20.3447 20.5 21.0879Z" fill="#BD9E6A"/>
 </symbol>
 
-<symbol id="user-location" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="17" cy="17" r="16.5" fill="#ED3939" fill-opacity="0.15" stroke="white"/>
-<circle cx="17" cy="17" r="6" fill="#ED3939"/>
-<path opacity="0.35" d="M19.625 12.9167C18.1502 12.2215 16.7083 12.0417 15.25 12.9167C16.4166 12.9167 18.7694 14.3782 19.3737 15.1918C20.5 16.7084 20.6016 19.0553 20.2083 19.3334C20.4541 19.4724 21.5026 18.3063 21.6666 17C21.8306 15.6948 21.0998 13.6119 19.625 12.9167Z" fill="white"/>
-</symbol>
-
-
 <symbol id="conseillerFranceService" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
 <path d="M24.1752 4.3111L12 11.3612V25.4094L23.5247 45.3111H24.8255L36.3503 25.4094V11.3612L24.1752 4.3111Z"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M24.1752 2L38.3503 10.2083V25.9467L25.9785 47.3111H22.3718L10 25.9467V10.2082L24.1752 2ZM12 25.4094V11.3612L24.1752 4.31111L36.3503 11.3612V25.4094L24.8255 45.3111H23.5247L12 25.4094Z" fill="white"/>
diff --git a/src/assets/logos/grandLyonLaMetropole.svg b/src/assets/logos/grandLyonLaMetropole.svg
deleted file mode 100644
index 9d443ffa2..000000000
--- a/src/assets/logos/grandLyonLaMetropole.svg
+++ /dev/null
@@ -1,29 +0,0 @@
-<svg width="189" height="43" viewBox="0 0 189 43" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_5084_112181)">
-<path d="M14.6188 24.1594C13.8364 25.1028 12.8909 25.8619 11.8386 26.3915C10.7863 26.921 9.64874 27.2102 8.49363 27.2418C7.33852 27.2733 6.18949 27.0467 5.11498 26.5753C4.04046 26.1039 3.06242 25.3974 2.23911 24.4978C0.0358825 22.0532 1.03355e-07 19.6802 7.15522e-08 13.6244C3.9749e-08 7.56856 0.043059 5.19162 2.23911 2.74699C3.03301 1.87136 3.97472 1.17801 5.01036 0.706612C6.04601 0.235214 7.15526 -0.00498298 8.27465 -0.000236215C12.516 -0.000236237 15.7706 3.08541 16.5278 7.82736L14.6977 7.82736C13.9801 4.14051 11.5436 1.80736 8.28541 1.80736C7.4372 1.79871 6.59591 1.97729 5.81047 2.33273C5.02504 2.68816 4.31114 3.21334 3.71031 3.87773C1.96998 5.81273 1.83722 7.86717 1.83722 13.6244C1.83722 19.3816 1.97357 21.452 3.70314 23.3671C4.30384 24.0316 5.01772 24.5569 5.80318 24.9124C6.58864 25.2678 7.43 25.4463 8.27824 25.4375C9.23644 25.4435 10.1839 25.2138 11.0526 24.765C11.9212 24.3161 12.6894 23.6592 13.3019 22.8415C14.3461 21.4122 14.7551 19.8315 14.7551 17.5382L14.7551 15.1294L8.27465 15.1294L8.27465 13.3218L16.5852 13.3218L16.5852 17.7014C16.5852 20.4885 16.0433 22.4792 14.6188 24.1753" fill="#FF0101"/>
-<path d="M31.9782 2.03265L24.8554 2.03265L24.8554 12.8702L31.9782 12.8702C35.0642 12.8702 37.3033 11.1383 37.3033 7.45144C37.3033 3.76459 35.0642 2.03265 31.9782 2.03265ZM37.2674 27.0204L31.501 14.6778L24.8554 14.6778L24.8554 27.0204L23.0254 27.0204L23.0254 0.237L32.2151 0.236999C36.1622 0.236999 39.1333 2.75728 39.1333 7.42357C39.1333 11.4051 36.9624 14.0089 33.5714 14.65L39.4024 27.0324L37.2674 27.0204Z" fill="#FF0101"/>
-<path d="M51.7832 2.93246L46.7308 18.6991L56.8355 18.6991L51.7832 2.93246ZM59.516 27.0164L57.4133 20.5067L46.1531 20.5067L44.0504 27.0164L42.084 27.0164L50.9686 0.236999L52.5977 0.236999L61.4824 27.0324L59.516 27.0164Z" fill="#FF0101"/>
-<path d="M81.4838 27.0166L67.5468 3.72496L67.5468 27.0166L65.7168 27.0166L65.7168 0.221252L67.5468 0.221252L81.4838 23.4413L81.4838 0.221252L83.3175 0.221252L83.3175 27.0166L81.4838 27.0166Z" fill="#FF0101"/>
-<path d="M103.623 4.09904C102.234 2.50644 100.368 2.03265 98.4342 2.03265L92.5996 2.03265L92.5996 25.2088L98.4306 25.2088C100.365 25.2088 102.231 24.7191 103.619 23.1385C105.55 20.9566 105.413 16.2147 105.413 13.2445C105.413 10.2743 105.546 6.28487 103.619 4.08709L103.623 4.09904ZM104.907 24.5599C103.472 26.1525 101.384 27.0045 98.872 27.0045L90.7695 27.0045L90.7695 0.237L98.8755 0.236999C101.387 0.236999 103.487 1.10496 104.911 2.68561C107.355 5.39302 107.251 9.64524 107.251 13.2604C107.251 16.8756 107.355 21.8604 104.911 24.5718L104.907 24.5599Z" fill="#FF0101"/>
-<path d="M112.846 27.0166L112.846 0.221252L117.561 0.221252L117.561 22.3503L128.516 22.3503L128.516 27.0166L112.846 27.0166Z" fill="#333333"/>
-<path d="M138.852 16.0277L138.852 27.0166L134.173 27.0166L134.173 16.0277L126.914 0.221252L132.035 0.221252L136.545 11.027L140.991 0.221252L146.108 0.221252L138.852 16.0277Z" fill="#333333"/>
-<path d="M159.805 6.09478C159.424 5.62814 158.957 5.25868 158.436 5.0119C157.914 4.76512 157.35 4.64691 156.783 4.66543C156.212 4.64699 155.643 4.76508 155.116 5.01168C154.59 5.25829 154.117 5.62767 153.73 6.09478C152.815 7.22154 152.578 8.48367 152.578 13.6198C152.578 18.7559 152.815 20.014 153.73 21.1448C154.117 21.6117 154.59 21.9809 155.117 22.2275C155.643 22.4741 156.212 22.5923 156.783 22.5741C157.35 22.5924 157.914 22.4741 158.435 22.2273C158.957 21.9805 159.424 21.6112 159.805 21.1448C160.72 20.014 160.992 18.7559 160.992 13.6198C160.992 8.48367 160.723 7.22154 159.805 6.09478ZM163.311 24.3101C161.561 26.1934 159.219 27.2467 156.782 27.2467C154.344 27.2467 152.002 26.1934 150.253 24.3101C147.813 21.6026 147.877 18.2502 147.877 13.6238C147.877 8.99728 147.813 5.6608 150.253 2.93747C152.002 1.05412 154.344 0.000793424 156.782 0.000793411C159.219 0.000793399 161.561 1.05412 163.311 2.93747C165.754 5.64487 165.718 8.9933 165.718 13.6238C165.718 18.2542 165.74 21.6026 163.311 24.3101Z" fill="#333333"/>
-<path d="M184.79 27.0166L175.227 10.5731L175.227 27.0166L170.516 27.0166L170.516 0.221252L174.721 0.221252L184.284 16.6289L184.284 0.221252L188.999 0.221252L188.999 27.0166L184.79 27.0166Z" fill="#333333"/>
-<path d="M160.242 35.4745L160.264 35.4745C160.376 35.2188 160.553 35.0047 160.773 34.8578C160.992 34.7108 161.246 34.6374 161.502 34.6464C162.363 34.6464 163.239 35.0445 163.239 37.6524C163.239 39.1414 163.196 40.8575 161.444 40.8575C161.208 40.8618 160.974 40.7976 160.766 40.6712C160.559 40.5449 160.384 40.3607 160.26 40.1368L160.228 40.1368L160.228 42.9995L159.363 42.9995L159.363 34.7658L160.239 34.7658L160.242 35.4745ZM162.324 37.6524C162.324 36.7526 162.324 35.4387 161.226 35.4387C160.128 35.4387 160.246 37.095 160.246 38.0067C160.246 38.803 160.289 40.0651 161.258 40.0651C162.227 40.0651 162.324 39.2569 162.324 37.6643L162.324 37.6524Z" fill="#333333"/>
-<path d="M99.992 39.8734L99.9705 39.8734C99.8752 40.1805 99.6905 40.4438 99.4457 40.6218C99.2008 40.7998 98.9095 40.8825 98.6177 40.8568C97.4766 40.8568 97.1465 40.0406 97.1465 38.8939C97.1465 37.0824 98.7469 37.0027 99.9705 37.0346C99.992 36.2383 100.003 35.3783 99.0627 35.3783C98.9391 35.3673 98.815 35.3884 98.7001 35.44C98.5853 35.4916 98.4828 35.5722 98.401 35.6754C98.3191 35.7786 98.26 35.9016 98.2285 36.0345C98.197 36.1675 98.1939 36.3068 98.2194 36.4414L97.2864 36.4414C97.3295 35.1036 97.9682 34.6417 99.1093 34.6417C100.494 34.6417 100.857 35.438 100.857 36.4414L100.857 39.316C100.86 39.7921 100.896 40.2672 100.964 40.7374L100.006 40.7374L99.992 39.8734ZM98.022 38.9616C98.022 39.5389 98.2768 40.0605 98.8617 40.0605C99.4466 40.0605 100.057 39.6942 99.9705 37.7632C99.1416 37.7791 98.022 37.6995 98.022 38.9656L98.022 38.9616Z" fill="#333333"/>
-<path d="M115.722 40.7375L115.722 36.5968C115.722 35.9916 115.572 35.4382 114.868 35.4382C114.724 35.4407 114.581 35.4776 114.451 35.5462C114.32 35.6149 114.204 35.7138 114.111 35.8363C113.976 36.1038 113.905 36.4056 113.907 36.7123L113.907 40.7336L113.038 40.7336L113.038 36.0075C113.038 35.6094 113.017 35.1794 112.984 34.7653L113.91 34.7653L113.91 35.5099L113.932 35.5099C114.042 35.2248 114.232 34.9868 114.474 34.8311C114.715 34.6755 114.996 34.6105 115.274 34.6459C115.528 34.6248 115.783 34.6862 116.006 34.8226C116.23 34.959 116.413 35.1646 116.533 35.4143C116.652 35.1581 116.838 34.9478 117.067 34.8107C117.295 34.6736 117.556 34.6162 117.814 34.6459C118.381 34.6459 119.285 34.7892 119.285 36.1947L119.285 40.7375L118.41 40.7375L118.41 36.5968C118.41 35.9916 118.263 35.4382 117.556 35.4382C117.438 35.4175 117.317 35.4268 117.203 35.4654C117.088 35.504 116.983 35.5709 116.896 35.6612C116.684 35.9597 116.579 36.3334 116.598 36.7123L116.598 40.7336L115.722 40.7375Z" fill="#333333"/>
-<path d="M125.656 38.063C125.656 39.7313 126.061 40.0538 126.732 40.0538C127.328 40.0538 127.64 39.5203 127.669 38.9191L128.627 38.9191C128.627 40.2449 127.881 40.8461 126.75 40.8461C125.62 40.8461 124.705 40.4479 124.705 37.8281C124.705 36.0763 124.884 34.6429 126.75 34.6429C128.286 34.6429 128.67 35.5786 128.67 37.5534L128.67 38.063L125.656 38.063ZM127.755 37.3304C127.755 35.5905 127.317 35.3795 126.679 35.3795C126.126 35.3795 125.667 35.6741 125.656 37.3304L127.755 37.3304ZM127.97 32.1943L126.575 33.8626L125.857 33.8626L126.808 32.1943L127.97 32.1943Z" fill="#333333"/>
-<path d="M134.605 34.7658L134.605 33.6191L135.481 33.1812L135.481 34.7737L136.654 34.7737L136.654 35.5063L135.481 35.5063L135.481 39.1613C135.481 39.5595 135.481 40.0253 136.281 40.0253C136.346 40.0253 136.482 40.0014 136.676 39.9775L136.676 40.7221C136.389 40.746 136.098 40.8176 135.811 40.8176C134.979 40.8176 134.605 40.4195 134.605 39.7546L134.605 35.4984L133.723 35.4984L133.723 34.7658L134.605 34.7658Z" fill="#333333"/>
-<path d="M143.185 35.674L143.217 35.674C143.576 34.7623 144.028 34.6588 144.879 34.6588L144.879 35.6661L144.646 35.6302C144.568 35.6157 144.49 35.6077 144.412 35.6063C143.443 35.6063 143.196 36.4226 143.196 37.2268L143.196 40.7544L142.32 40.7544L142.32 34.7822L143.196 34.7822L143.185 35.674Z" fill="#333333"/>
-<path d="M149.852 37.84C149.852 36.0882 150.031 34.6548 151.897 34.6548C153.763 34.6548 153.942 36.1001 153.942 37.84C153.942 40.4797 153.034 40.858 151.897 40.858C150.759 40.858 149.852 40.4797 149.852 37.84ZM153.027 37.4419C153.027 35.8095 152.568 35.4511 151.897 35.4511C151.226 35.4511 150.767 35.8055 150.767 37.4419C150.767 39.3809 150.993 40.0816 151.897 40.0816C152.801 40.0816 153.031 39.3649 153.031 37.426L153.027 37.4419Z" fill="#333333"/>
-<path d="M168.586 37.84C168.586 36.0882 168.765 34.6548 170.631 34.6548C172.497 34.6548 172.68 36.1001 172.68 37.84C172.68 40.4797 171.772 40.858 170.631 40.858C169.49 40.858 168.586 40.4797 168.586 37.84ZM171.762 37.4419C171.762 35.8095 171.302 35.4511 170.631 35.4511C169.96 35.4511 169.501 35.8055 169.501 37.4419C169.501 39.3809 169.723 40.0816 170.631 40.0816C171.539 40.0816 171.765 39.3649 171.765 37.426L171.762 37.4419Z" fill="#333333"/>
-<path d="M179.221 40.7386L178.346 40.7386L178.346 32.1983L179.218 32.1983L179.221 40.7386Z" fill="#333333"/>
-<path d="M185.674 38.0618C185.674 39.7301 186.079 40.0526 186.75 40.0526C187.346 40.0526 187.658 39.519 187.687 38.9178L188.645 38.9178C188.645 40.2437 187.898 40.8449 186.768 40.8449C185.638 40.8449 184.723 40.4467 184.723 37.8269C184.723 36.0751 184.902 34.6417 186.768 34.6417C188.304 34.6417 188.688 35.5774 188.688 37.5522L188.688 38.0618L185.674 38.0618ZM187.773 37.3292C187.773 35.5893 187.335 35.3783 186.696 35.3783C186.144 35.3783 185.684 35.6729 185.674 37.3292L187.773 37.3292Z" fill="#333333"/>
-<path d="M92.1236 40.7386L91.248 40.7386L91.248 32.1983L92.1236 32.1983L92.1236 40.7386Z" fill="#333333"/>
-</g>
-<defs>
-<clipPath id="clip0_5084_112181">
-<rect width="189" height="43" fill="white"/>
-</clipPath>
-</defs>
-</svg>
\ No newline at end of file
diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss
index ad54ee550..7b72d6a99 100644
--- a/src/assets/scss/_color.scss
+++ b/src/assets/scss/_color.scss
@@ -1,8 +1,6 @@
 //TODO: Clean colors when design is properly setup
 $black: #000000;
 $white: #ffff;
-$white-1: #e5e5e5;
-$white-2: #cacccb;
 /*  GREYS  */
 $grey: #b4bbbf;
 $grey-1: #333333;
diff --git a/src/assets/scss/_icons.scss b/src/assets/scss/_icons.scss
index 4cc84a175..c93d6aa78 100644
--- a/src/assets/scss/_icons.scss
+++ b/src/assets/scss/_icons.scss
@@ -61,7 +61,7 @@
     width: 7px;
     height: 7px;
     border-radius: 4px;
-    background-color: $white;
+    background-color: white;
   }
 }
 .ico-dot-available {
@@ -589,125 +589,3 @@
     bottom: -6px;
   }
 }
-
-.ico-gg-eye-alt {
-  position: relative;
-  display: block;
-  transform: scale(var(--ggs, 1));
-  width: 24px;
-  height: 18px;
-  border-bottom-right-radius: 100px;
-  border-bottom-left-radius: 100px;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-.ico-gg-eye-alt::after,
-.ico-gg-eye-alt::before {
-  content: '';
-  display: block;
-  border-radius: 100px;
-  position: absolute;
-  box-sizing: border-box;
-}
-.ico-gg-eye-alt::after {
-  top: 2px;
-  box-shadow: inset 0 -8px 0 2px $grey-3, inset 0 0 0 2px $grey-3;
-  width: 24px;
-  height: 24px;
-}
-.ico-gg-eye-alt::before {
-  width: 8px;
-  height: 8px;
-  border: 2px solid $grey-3;
-  bottom: 4px;
-  left: 8px;
-  background-color: $grey-3;
-}
-
-.ico-gg-add {
-  box-sizing: border-box;
-  position: relative;
-  display: block;
-  color: $green-1;
-  width: 32px;
-  height: 32px;
-}
-.ico-gg-add::after,
-.ico-gg-add::before {
-  content: '';
-  display: block;
-  box-sizing: border-box;
-  position: absolute;
-  width: 14px;
-  height: 2px;
-  background: currentColor;
-  border-radius: 5px;
-  top: 8px;
-  left: 0px;
-}
-.ico-gg-add::after {
-  width: 2px;
-  height: 14px;
-  top: 2px;
-  left: 6px;
-}
-
-.gg-eye-alt {
-  position: relative;
-  display: block;
-  width: 18px;
-  height: 12px;
-  border-bottom-right-radius: 100px;
-  border-bottom-left-radius: 100px;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-.gg-eye-alt::after,
-.gg-eye-alt::before {
-  content: '';
-  display: block;
-  border-radius: 100px;
-  position: absolute;
-  box-sizing: border-box;
-}
-.gg-eye-alt::after {
-  top: 2px;
-  box-shadow: inset 0 -8px 0 2px, inset 0 0 0 2px;
-  width: 18px;
-  height: 18px;
-}
-.gg-eye-alt::before {
-  width: 2px;
-  height: 2px;
-  border: 2px solid black;
-  bottom: 3px;
-  left: 7px;
-  background-color: black;
-}
-
-.ico-gg-check {
-  box-sizing: border-box;
-  position: relative;
-  display: block;
-  transform: scale(var(--ggs, 1));
-  width: 22px;
-  height: 22px;
-  border: 1px solid transparent;
-  border-radius: 100px;
-  color: $white;
-}
-.ico-gg-check::after {
-  content: '';
-  display: block;
-  box-sizing: border-box;
-  position: absolute;
-  left: 5px;
-  top: -3px;
-  width: 7px;
-  height: 12px;
-  border-width: 0 2px 2px 0;
-  border-style: solid;
-  transform-origin: bottom left;
-  transform: rotate(45deg);
-  color: $white;
-}
-- 
GitLab


From 35da4e0f230f2bf86e728d99266b08cd8457b129 Mon Sep 17 00:00:00 2001
From: Augustin LECONTE <["ext.sopra.aleconte@grandlyon.com"]>
Date: Fri, 18 Feb 2022 07:46:24 +0000
Subject: [PATCH 18/27] Revert "Merge branch 'revert-608af917' into 'dev'"

This reverts merge request !213
---
 package-lock.json                             | 140 +++++
 src/app/carto/carto.component.scss            |   2 +-
 .../footer-form/footer-form.component.html    |   2 +-
 .../footer-form/footer-form.component.scss    |   5 +-
 .../form/footer-form/footer-form.component.ts |   7 +-
 .../structure-detail-print.component.html     |  79 +--
 .../structure-detail-print.component.scss     |  14 +-
 .../structure-print-header.component.html     | 126 ++---
 .../structure-print-header.component.scss     |  49 +-
 .../structure-print-header.component.ts       |   3 +-
 .../orientation-form.component.html           | 485 ++++++++----------
 .../orientation-form.component.scss           | 286 ++++++++---
 .../orientation-form.component.ts             | 134 +++--
 .../form/orientation-form/pageType.enum.ts    |   4 +-
 .../form/structure-form/form.component.scss   |  15 +-
 src/app/form/structure-form/form.component.ts |   1 +
 src/app/header/header.component.html          |   8 +-
 src/app/map/components/layers.enum.ts         |   5 +
 src/app/map/components/map.component.html     |   9 +-
 src/app/map/components/map.component.scss     |  23 +-
 src/app/map/components/map.component.ts       |  58 ++-
 src/app/map/components/markerType.enum.ts     |   1 +
 src/app/map/components/zoomLevel.enum.ts      |   6 +
 src/app/map/services/map.service.ts           |  72 +--
 src/app/map/services/marker.ts                |   6 +
 src/app/models/address.model.ts               |   1 +
 src/app/models/orientation-filter.object.ts   |   3 +-
 .../newsletter-subscription.component.scss    |   2 +-
 .../address-autocomplete.component.ts         |   1 +
 .../svg-icon/svg-icon.component.scss          |   4 +
 .../components/card/card.component.html       |  87 ++--
 .../components/card/card.component.scss       |  41 +-
 .../structure-details.component.scss          |   8 +-
 .../structure-details.component.ts            |  19 -
 .../structure-list/models/category.model.ts   |   1 +
 src/app/structure-list/models/filter.model.ts |   2 +
 .../structure-list.component.html             |   1 +
 .../structure-list.component.scss             |   5 +
 src/app/utils/utils.ts                        |  11 +
 src/assets/form/sprite.svg                    |  30 ++
 src/assets/ico/sprite.svg                     |   7 +
 src/assets/logos/grandLyonLaMetropole.svg     |  29 ++
 src/assets/scss/_color.scss                   |   2 +
 src/assets/scss/_icons.scss                   | 124 ++++-
 44 files changed, 1222 insertions(+), 696 deletions(-)
 create mode 100644 src/app/map/components/layers.enum.ts
 create mode 100644 src/app/map/components/zoomLevel.enum.ts
 create mode 100644 src/assets/logos/grandLyonLaMetropole.svg

diff --git a/package-lock.json b/package-lock.json
index 820b6fdb1..4423b9a74 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9878,6 +9878,12 @@
         "vary": "^1"
       }
     },
+    "corser": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
+      "integrity": "sha1-jtolLsqrWEDc2XXOuQ2TcMgZ/4c=",
+      "dev": true
+    },
     "cosmiconfig": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
@@ -12074,6 +12080,12 @@
       "integrity": "sha512-7kIufnBqdsBGcSZLPJwqHT3yhk1QTsSlFsVD3kx5ixH/AlgBs9yM1q6DPhXZ8f8gtdqgh7N7/5btRLpQsS2gHw==",
       "dev": true
     },
+    "he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true
+    },
     "hosted-git-info": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.0.2.tgz",
@@ -12095,6 +12107,15 @@
         "wbuf": "^1.1.0"
       }
     },
+    "html-encoding-sniffer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+      "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+      "dev": true,
+      "requires": {
+        "whatwg-encoding": "^2.0.0"
+      }
+    },
     "html-entities": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz",
@@ -12257,6 +12278,78 @@
         }
       }
     },
+    "http-server": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.0.tgz",
+      "integrity": "sha512-5lYsIcZtf6pdR8tCtzAHTWrAveo4liUlJdWc7YafwK/maPgYHs+VNP6KpCClmUnSorJrARVMXqtT055zBv11Yg==",
+      "dev": true,
+      "requires": {
+        "basic-auth": "^2.0.1",
+        "chalk": "^4.1.2",
+        "corser": "^2.0.1",
+        "he": "^1.2.0",
+        "html-encoding-sniffer": "^3.0.0",
+        "http-proxy": "^1.18.1",
+        "mime": "^1.6.0",
+        "minimist": "^1.2.5",
+        "opener": "^1.5.1",
+        "portfinder": "^1.0.28",
+        "secure-compare": "3.0.1",
+        "union": "~0.5.0",
+        "url-join": "^4.0.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "http-signature": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
@@ -14746,6 +14839,12 @@
       "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==",
       "dev": true
     },
+    "opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "dev": true
+    },
     "optionator": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
@@ -16694,6 +16793,12 @@
         "get-assigned-identifiers": "^1.1.0"
       }
     },
+    "secure-compare": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
+      "integrity": "sha1-8aAymzCLIh+uN7mXTz1XjQypmeM=",
+      "dev": true
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -18196,6 +18301,15 @@
         }
       }
     },
+    "union": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
+      "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==",
+      "dev": true,
+      "requires": {
+        "qs": "^6.4.0"
+      }
+    },
     "unique-filename": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
@@ -18316,6 +18430,12 @@
         "punycode": "^2.1.0"
       }
     },
+    "url-join": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
+      "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==",
+      "dev": true
+    },
     "url-parse-lax": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
@@ -18733,6 +18853,26 @@
       "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
       "dev": true
     },
+    "whatwg-encoding": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+      "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+      "dev": true,
+      "requires": {
+        "iconv-lite": "0.6.3"
+      },
+      "dependencies": {
+        "iconv-lite": {
+          "version": "0.6.3",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+          "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+          "dev": true,
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3.0.0"
+          }
+        }
+      }
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
diff --git a/src/app/carto/carto.component.scss b/src/app/carto/carto.component.scss
index eb5f97b21..3fcf8948f 100644
--- a/src/app/carto/carto.component.scss
+++ b/src/app/carto/carto.component.scss
@@ -29,7 +29,7 @@
   height: calc(100vh - #{$header-height} - #{$footer-height});
   @media #{$tablet} {
     padding: 0;
-    height: 100%;
+    height: calc(100vh - #{$header-height});
   }
 }
 .btnSwitch {
diff --git a/src/app/form/footer-form/footer-form.component.html b/src/app/form/footer-form/footer-form.component.html
index 6157b4a2c..84e1517f2 100644
--- a/src/app/form/footer-form/footer-form.component.html
+++ b/src/app/form/footer-form/footer-form.component.html
@@ -1,5 +1,5 @@
 <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center">
-  <button class="btn-primary small previous" (click)="goToPreviousPage()">
+  <button *ngIf="displayPreviousButton" class="btn-primary small previous" (click)="goToPreviousPage()">
     <div class="rowBtn" fxLayout="row" fxLayoutAlign="center center">
       <svg class="chevronLeft" aria-hidden="true">
         <use [attr.xlink:href]="'assets/form/sprite.svg#chevronLeft'"></use>
diff --git a/src/app/form/footer-form/footer-form.component.scss b/src/app/form/footer-form/footer-form.component.scss
index 6ebf95c44..61ae2b385 100644
--- a/src/app/form/footer-form/footer-form.component.scss
+++ b/src/app/form/footer-form/footer-form.component.scss
@@ -3,8 +3,9 @@
 
 .btn-primary {
   &.previous {
-    background-color: initial;
+    background-color: $white;
     color: $grey-2;
+    border: solid $grey-4 1px;
   }
   &.next {
     .rowBtn {
@@ -25,6 +26,6 @@
 .chevronRight {
   height: 24px;
   width: 24px;
-  stroke: inherit;
+  // stroke: inherit;
   margin-left: 10px;
 }
diff --git a/src/app/form/footer-form/footer-form.component.ts b/src/app/form/footer-form/footer-form.component.ts
index 15a5456ff..12736e3ac 100644
--- a/src/app/form/footer-form/footer-form.component.ts
+++ b/src/app/form/footer-form/footer-form.component.ts
@@ -5,18 +5,17 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
   templateUrl: './footer-form.component.html',
   styleUrls: ['./footer-form.component.scss'],
 })
-export class FooterFormComponent implements OnInit {
+export class FooterFormComponent {
   @Input() isValid: boolean;
   @Input() btnName: string[];
+  @Input() displayPreviousButton: boolean = true;
   @Output() nextPage = new EventEmitter<any>();
   @Output() previousPage = new EventEmitter<any>();
-  constructor() {}
-
-  ngOnInit(): void {}
 
   public goToNextPage(): void {
     this.nextPage.emit();
   }
+
   public goToPreviousPage(): void {
     this.previousPage.emit();
   }
diff --git a/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.html b/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.html
index b6e592955..7d7ed3c9e 100644
--- a/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.html
+++ b/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.html
@@ -3,12 +3,7 @@
   <div fxLayout="row" class="structure-details-block" fxLayoutAlign="baseline baseline" fxLayoutGap="8px">
     <div fxLayout="column" fxLayoutGap="10px" fxFlex="100%">
       <div fxLayout="column" class="no-margin" fxLayoutAlign="space-between start">
-        <h2 class="bold">{{ structure.structureName }}</h2>
-      </div>
-      <div fxLayout="row" fxLayoutAlign="space-between center">
-        <div class="typeInformationHeader" fxLayout="column">
-          <h3>{{ structure.getLabelTypeStructure() }}</h3>
-        </div>
+        <h3 class="bold">{{ structure.structureName }}</h3>
       </div>
       <div class="mobile-column">
         <div fxLayout="column" fxFlex="50%">
@@ -16,63 +11,10 @@
             <app-svg-icon [type]="'ico'" [icon]="'adress'" [title]="'Adresse'"></app-svg-icon>
             <p>{{ structure.address.numero }} {{ structure.address.street }}, {{ structure.address.commune }}</p>
           </div>
-          <div *ngIf="structure.website" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
-            <app-svg-icon [type]="'ico'" [icon]="'web'" [title]="'Site web'"></app-svg-icon>
-            <a
-              target="_blank"
-              class="custom-link"
-              rel="noopener noreferrer"
-              [href]="structure.website.includes('http') ? structure.website : 'http://' + structure.website"
-              >{{ structure.website | url }}</a
-            >
-          </div>
-          <div *ngIf="structure.hasSocialNetwork()" fxLayout="row" fxLayoutAlign="none baseline" fxLayoutGap="13px">
-            <app-svg-icon [type]="'ico'" [icon]="'network'"></app-svg-icon>
-            <div fxLayout="row" fxLayoutAlign="none baseline" fxLayoutGap="8px">
-              <a
-                *ngIf="structure.facebook"
-                target="_blank"
-                class="custom-link"
-                rel="noopener noreferrer"
-                [href]="'http://' + structure.facebook"
-              >
-                <app-svg-icon [type]="'ico'" [icon]="'facebook'" [title]="'Facebook'"></app-svg-icon
-              ></a>
-              <a
-                *ngIf="structure.twitter"
-                target="_blank"
-                class="custom-link"
-                rel="noopener noreferrer"
-                [href]="'http://' + structure.twitter"
-              >
-                <app-svg-icon [type]="'ico'" [icon]="'twitter'" [title]="'Twitter'"></app-svg-icon
-              ></a>
-              <a
-                *ngIf="structure.instagram"
-                target="_blank"
-                class="custom-link"
-                rel="noopener noreferrer"
-                [href]="'http://' + structure.instagram"
-              >
-                <app-svg-icon [type]="'ico'" [icon]="'instagram'" [title]="'Instagram'"></app-svg-icon
-              ></a>
-              <a
-                *ngIf="structure.linkedin"
-                target="_blank"
-                class="custom-link"
-                rel="noopener noreferrer"
-                [href]="'http://' + structure.linkedin"
-              >
-                <app-svg-icon [type]="'ico'" [icon]="'linkedin'" [title]="'Linkedin'"></app-svg-icon
-              ></a>
-            </div>
-          </div>
           <div *ngIf="structure.contactPhone" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
             <app-svg-icon [type]="'ico'" [icon]="'tel'" [title]="'Téléphone'"></app-svg-icon>
             <p>{{ structure.contactPhone | phone }}</p>
           </div>
-        </div>
-        <div fxLayout="column" fxFlex="50%">
           <div
             *ngIf="structure.contactMail && structure.contactMail !== 'unknown@unknown.com'"
             fxLayout="row"
@@ -82,23 +24,8 @@
             <app-svg-icon [type]="'ico'" [iconClass]="'grey-1'" [icon]="'email'" [title]="'Email'"></app-svg-icon>
             <p>{{ structure.contactMail }}</p>
           </div>
-          <div *ngIf="structure.hasPassNumeric()" fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
-            <app-svg-icon [type]="'ico'" [icon]="'pass'" [title]="'Pass numérique'"></app-svg-icon>
-            <p>agréé Pass Numérique</p>
-          </div>
-          <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
-            <app-svg-icon [type]="'ico'" [icon]="'calendar'"></app-svg-icon>
-            <p>Mise à jour le {{ structure.updatedAt | date: 'mediumDate' }}</p>
-          </div>
         </div>
       </div>
-
-      <div>
-        {{ structure.description }}
-      </div>
-      <div class="info">
-        {{ structure.lockdownActivity }}
-      </div>
     </div>
   </div>
   <!-- Accueil -->
@@ -119,7 +46,9 @@
               <h4>{{ day.key | day }}</h4>
               <div class="opening-time" fxLayout="row" fxLayoutAlign="none flex-end">
                 <div *ngFor="let timeRange of day.value.time; let isFirst = first">
-                  <p *ngIf="isFirst && timeRange.opening">de {{ timeRange.formatOpeningDate() }} à {{ timeRange.formatClosingDate() }}</p>
+                  <p *ngIf="isFirst && timeRange.opening">
+                    de {{ timeRange.formatOpeningDate() }} à {{ timeRange.formatClosingDate() }}
+                  </p>
                   <p *ngIf="!isFirst && timeRange.opening">
                     et de {{ timeRange.formatOpeningDate() }} à {{ timeRange.formatClosingDate() }}
                   </p>
diff --git a/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss b/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss
index 8e3d713f5..155566070 100644
--- a/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss
+++ b/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss
@@ -10,15 +10,10 @@ a {
 }
 
 .structrue-details-container {
-  border-right: solid 1px $grey-4;
-  page-break-after: always;
-  background-color: $white;
-  top: 0;
-  left: 0;
   max-width: 980px;
-  width: 100%;
-  margin-bottom: 50px;
-  padding: 10px 24px;
+  width: 64%;
+  margin-top: 1%;
+  float: right;
   @media #{$tablet} {
     width: calc(100% - 2 * 24px);
     position: inherit;
@@ -34,7 +29,6 @@ a {
 
 .structrue-details-container > .structure-details-block {
   padding: 0px 0px 24px 0;
-  border-bottom: 1px dashed $grey-2;
   .subtitle {
     text-transform: uppercase;
     @include cn-bold-16;
@@ -132,7 +126,7 @@ p,
   height: 25px;
   border-radius: 20px;
   padding: 5px 15px;
-  color: white;
+  color: $white;
   border-style: none;
   margin-top: 15px;
   background: #348899;
diff --git a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.html b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.html
index b1c83faf2..616b544b1 100644
--- a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.html
+++ b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.html
@@ -1,67 +1,77 @@
 <div class="print-header" fxLayout="column">
-  <div class="header-print" fxLayout="row" fxLayoutAlign="space-between center">
-    <h3>Fiche d'orientation</h3>
-    <h4 class="typeInformationHeader">{{ date }}</h4>
-  </div>
-
-  <!-- Name -->
-  <div *ngIf="beneficiaryName">
-    <p class="bold">{{ beneficiaryName }}</p>
-  </div>
-
-  <!-- Accompaniment -->
-  <div *ngIf="structureAccompaniment">
-    <div class="typeInformationHeader">Orienté par</div>
-    <div class="contactAccompaniment" fxLayout="row" fxLayoutAlign="space-between center">
-      <div class="bold">{{ structureAccompaniment }}</div>
-      <!-- Contact -->
-      <div class="bold" *ngIf="contactAccompaniment">{{ contactAccompaniment }}</div>
-    </div>
-  </div>
-
-  <!-- Needs -->
-  <div *ngIf="equipments.length > 0">
-    <p class="typeInformationHeader">Besoins en matériel</p>
-    <div fxLayout="row wrap" fxLayoutGap="16px">
-      <div *ngFor="let equipmentTag of equipments" class="tags-cloud" fxLayout="row">
-        {{ equipmentTag.text ? equipmentTag.text : equipmentTag.value }}
+  <div class="header-print">
+    <div class="header-infos">
+      <svg aria-hidden="true" aria-hidden="true">
+        <use [attr.xlink:href]="'assets/form/sprite.svg#grandLyonLaMetropole'"></use>
+      </svg>
+      <div class="header-title">
+        <div>RES’IN : Réseau des acteurs de l'inclusion numérique de la Métropole de Lyon</div>
+        <h3>Fiche d'orientation</h3>
       </div>
     </div>
+    <p class="typeInformationHeader date">{{ date }}</p>
   </div>
-  <div *ngIf="formations.length > 0">
-    <p class="typeInformationHeader">Besoins en formation</p>
-    <div fxLayout="row wrap" fxLayoutGap="16px">
-      <div *ngFor="let formationTag of formations" class="tags-cloud" fxLayout="row">
-        {{ formationTag.text ? formationTag.text : formationTag.value }}
-      </div>
-    </div>
-  </div>
-  <div *ngIf="assistances.length > 0">
-    <p class="typeInformationHeader">Besoins d'accompagnement</p>
-    <div fxLayout="row wrap" fxLayoutGap="16px">
-      <div *ngFor="let assistanceTag of assistances" class="tags-cloud" fxLayout="row">
-        {{ assistanceTag.text ? assistanceTag.text : assistanceTag.value }}
+
+  <div class="informations">
+    <div class="helper">
+      <!-- Accompaniment -->
+      <div *ngIf="structureAccompaniment">
+        <div class="typeInformationHeader">{{ 'Orienté par' | uppercase }}</div>
+        <p class="bold">{{ structureAccompaniment }}</p>
+        <!-- Contact -->
+        <p class="bold" *ngIf="contactAccompaniment">{{ contactAccompaniment }}</p>
+        <p class="bold" *ngIf="contactAccompanimentPhone">{{ contactAccompanimentPhone }}</p>
       </div>
     </div>
-  </div>
-  <div *ngIf="specificNeeds.length > 0">
-    <div class="typeInformationHeader">Besoins spécifiques'</div>
-    <div fxLayout="row wrap" fxLayoutGap="16px">
-      <div *ngFor="let specificNeed of specificNeeds" class="tags-cloud" fxLayout="row">
-        {{ specificNeed.text ? specificNeed.text : specificNeed.value }}
-      </div>
+    <div class="beneficiary">
+      <div class="typeInformationHeader">{{ 'Bénéficiaire' | uppercase }}</div>
+      <!-- Name -->
+      <table>
+        <tr>
+          <td class="typeInformationHeader">Nom</td>
+          <td class="bold">{{ beneficiaryName }}</td>
+        </tr>
+        <tr *ngIf="equipments.length > 0">
+          <td class="typeInformationHeader">Besoin(s) en matériel</td>
+          <td class="bold">
+            <div *ngFor="let equipmentTag of equipments">
+              {{ equipmentTag.text ? equipmentTag.text : equipmentTag.value }}
+            </div>
+          </td>
+        </tr>
+        <tr *ngIf="formations.length > 0">
+          <td class="typeInformationHeader">Besoin(s) en formation</td>
+          <td class="bold">
+            <div *ngFor="let formationTag of formations">
+              {{ formationTag.text ? formationTag.text : formationTag.value }}
+            </div>
+          </td>
+        </tr>
+        <tr *ngIf="assistances.length > 0">
+          <td class="typeInformationHeader">Besoin(s) d'accompagnement</td>
+          <td class="bold">
+            <div *ngFor="let assistanceTag of assistances">
+              {{ assistanceTag.text ? assistanceTag.text : assistanceTag.value }}
+            </div>
+          </td>
+        </tr>
+        <tr *ngIf="specificNeeds.length > 0">
+          <td class="typeInformationHeader">Besoin(s) spécifiques</td>
+          <td class="bold">
+            <div *ngFor="let specificNeed of specificNeeds">
+              {{ specificNeed.text ? specificNeed.text : specificNeed.value }}
+            </div>
+          </td>
+        </tr>
+        <tr *ngIf="beneficiaryPassNumeric">
+          <td class="typeInformationHeader">Pass Numérique</td>
+          <td class="bold">Oui</td>
+        </tr>
+        <tr *ngIf="beneficiaryNeedCommentary">
+          <td class="typeInformationHeader">Informations</td>
+          <td class="bold">{{ beneficiaryNeedCommentary }}</td>
+        </tr>
+      </table>
     </div>
   </div>
-
-  <!-- Pass Numeric -->
-  <div *ngIf="beneficiaryPassNumeric" class="inputRow" fxLayout="row" fxLayoutGap="13px">
-    <app-svg-icon [type]="'ico'" [icon]="'passNumeric'"></app-svg-icon>
-    <p class="bold">Pass Numérique</p>
-  </div>
-
-  <!-- Comments -->
-  <div *ngIf="beneficiaryNeedCommentary">
-    <div class="typeInformationHeader">Informations à destination de la structure</div>
-    <p>{{ beneficiaryNeedCommentary }}</p>
-  </div>
 </div>
diff --git a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.scss b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.scss
index 0c9a98b49..b9cce0c61 100644
--- a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.scss
+++ b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.scss
@@ -9,6 +9,30 @@
   margin-top: 20px;
   margin-bottom: 20px;
   width: 100%;
+  border-bottom: solid black 1px;
+}
+
+.header-infos {
+  height: 80px;
+  display: flex;
+
+  .header-title {
+    width: 70%;
+    float: left;
+  }
+
+  h3 {
+    margin-top: 3px;
+  }
+
+  svg {
+    max-width: fit-content;
+    width: 30%;
+  }
+}
+
+.date {
+  float: right;
 }
 
 .print-header {
@@ -20,6 +44,10 @@
   @include cn-bold-16;
   margin-bottom: 5px;
   color: $grey-3;
+  &.date {
+    color: $grey-3;
+    font-style: italic;
+  }
 }
 
 .contactAccompaniment {
@@ -33,7 +61,7 @@
   height: 28px;
   border-radius: 20px;
   padding: 5px 15px;
-  color: white;
+  color: $white;
   border-style: none;
   margin-top: 5px;
   background: #348899;
@@ -58,3 +86,22 @@
     text-align: right;
   }
 }
+
+.informations {
+  width: 100%;
+  display: flex;
+  .helper {
+    max-height: 300px;
+    background-color: $grey-6;
+    width: 30%;
+    height: fit-content;
+    padding: 2%;
+  }
+
+  .beneficiary {
+    background-color: $grey-6;
+    margin-left: 2%;
+    padding: 2%;
+    width: 70%;
+  }
+}
diff --git a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.ts b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.ts
index 20c827dec..ee7b51cf1 100644
--- a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.ts
+++ b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.ts
@@ -1,9 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { Structure } from '../../../../models/structure.model';
 import * as _ from 'lodash';
 import { ActivatedRoute } from '@angular/router';
 import { PrintService } from '../../../../shared/service/print.service';
-import Module from 'module';
 import { Filter } from '../../../../structure-list/models/filter.model';
 @Component({
   selector: 'app-structure-print-header',
@@ -16,6 +14,7 @@ export class StructurePrintHeaderComponent implements OnInit {
   @Input() public structureAccompaniment: string;
   @Input() public beneficiaryPassNumeric: boolean;
   @Input() public contactAccompaniment: string | null;
+  @Input() public contactAccompanimentPhone: string | null;
   @Input() public filters: Filter[];
 
   public date: string;
diff --git a/src/app/form/orientation-form/orientation-form.component.html b/src/app/form/orientation-form/orientation-form.component.html
index 02e379de3..04a8a0500 100644
--- a/src/app/form/orientation-form/orientation-form.component.html
+++ b/src/app/form/orientation-form/orientation-form.component.html
@@ -1,10 +1,10 @@
-<div *ngIf="!multiPrint" class="form" fxLayout="column">
+<div id="body" *ngIf="!multiPrint" class="form" fxLayout="column">
   <app-modal-confirmation
     [openned]="showConfirmationModal"
     [content]="'Il vous faudra de nouveau remplir le formulaire si vous quittez'"
     (closed)="hasRedirectionAccepted($event)"
   ></app-modal-confirmation>
-  <div class="content">
+  <div class="progress-container">
     <div class="progressBar" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="20px">
       <label [ngClass]="{ validate: currentPage == nbPagesForm }" for="progressForm"
         >{{ progressStatus | number: '1.0-0' }}%
@@ -16,6 +16,8 @@
         [value]="progressStatus"
       ></progress>
     </div>
+  </div>
+  <div class="content" *ngIf="currentPage != pageTypeEnum.structuresSelection">
     <!-- BESOIN BENEFICIAIRE -->
     <div *ngIf="currentPage == pageTypeEnum.beneficiaryNeed" class="page">
       <div class="titleInfo">
@@ -23,7 +25,7 @@
         Merci de remplir ces quelques questions qui vous permettront d'identifier le lieu à proximité le plus adapté.
       </div>
       <div class="title">
-        <h3>De quoi le bénéficiaire a-t-il besoin ?</h3>
+        <h3>Quels sont les besoins du bénéficiaire ?</h3>
       </div>
       <div class="collapse" [ngClass]="{ notCollapsed: !showEquipments }">
         <div fxLayout="column">
@@ -119,73 +121,8 @@
             </div>
           </div>
           <div *ngIf="showFormation" class="tags">
-            <p class="titleCateg">{{ baseSkillssReferentiel.name }}</p>
-            <button
-              *ngFor="let choice of baseSkillssReferentiel.modules"
-              (click)="updateChoice(choice.id, 'formation')"
-              [ngClass]="{ selectedChoice: isInArray(choice.id, 'formation') }"
-            >
-              <div fxLayout="row" fxLayoutAlign=" center">
-                <svg class="validate" aria-hidden="true">
-                  <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
-                </svg>
-                <div class="textBtn">
-                  {{ choice.text }}
-                </div>
-              </div>
-            </button>
-
-            <p class="titleCateg">{{ accessRightsReferentiel.name }}</p>
-            <button
-              *ngFor="let choice of accessRightsReferentiel.modules"
-              (click)="updateChoice(choice.id, 'formation')"
-              [ngClass]="{ selectedChoice: isInArray(choice.id, 'formation') }"
-            >
-              <div fxLayout="row" fxLayoutAlign=" center">
-                <svg class="validate" aria-hidden="true">
-                  <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
-                </svg>
-                <div class="textBtn">
-                  {{ choice.text }}
-                </div>
-              </div>
-            </button>
-
-            <p class="titleCateg">{{ digitalCultureSecuritysReferentiel.name }}</p>
-            <button
-              *ngFor="let choice of digitalCultureSecuritysReferentiel.modules"
-              (click)="updateChoice(choice.id, 'formation')"
-              [ngClass]="{ selectedChoice: isInArray(choice.id, 'formation') }"
-            >
-              <div fxLayout="row" fxLayoutAlign=" center">
-                <svg class="validate" aria-hidden="true">
-                  <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
-                </svg>
-                <div class="textBtn">
-                  {{ choice.text }}
-                </div>
-              </div>
-            </button>
-
-            <p class="titleCateg">{{ parentingHelpsReferentiel.name }}</p>
-            <button
-              *ngFor="let choice of parentingHelpsReferentiel.modules"
-              (click)="updateChoice(choice.id, 'formation')"
-              [ngClass]="{ selectedChoice: isInArray(choice.id, 'formation') }"
-            >
-              <div fxLayout="row" fxLayoutAlign=" center">
-                <svg class="validate" aria-hidden="true">
-                  <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
-                </svg>
-                <div class="textBtn">
-                  {{ choice.text }}
-                </div>
-              </div>
-            </button>
-
-            <p class="titleCateg">{{ socialAndProfessionalsReferentiel.name }}</p>
             <button
-              *ngFor="let choice of socialAndProfessionalsReferentiel.modules"
+              *ngFor="let choice of formations"
               (click)="updateChoice(choice.id, 'formation')"
               [ngClass]="{ selectedChoice: isInArray(choice.id, 'formation') }"
             >
@@ -193,139 +130,62 @@
                 <svg class="validate" aria-hidden="true">
                   <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
                 </svg>
-                <div class="textBtn">
-                  {{ choice.text }}
-                </div>
+                <div class="textBtn">{{ choice.name }} ({{ choice.surname }}...)</div>
               </div>
             </button>
           </div>
         </div>
       </div>
     </div>
-    <!-- NUMERIC PASS -->
-    <div *ngIf="currentPage == pageTypeEnum.beneficiaryPassNumeric" class="page">
-      <div class="title">
-        <h3>Le bénéficiaire possède-t-il un Pass numérique ?</h3>
-      </div>
-      <app-radio-form
-        [selectedOption]="getOrientationControl('passNumeric').value"
-        [horizontal]="true"
-        (selectedEvent)="onRadioBtnChange('passNumeric', $event)"
-      >
-      </app-radio-form>
-    </div>
     <!-- PROFIL BENEFICIAIRE -->
     <div *ngIf="currentPage == pageTypeEnum.beneficiaryInfo" class="page">
       <div class="title">
-        <h3>Autour de quelle adresse chercher une structure ?</h3>
+        <h3>Quel est le profil du bénéficiaire ?</h3>
       </div>
-      <div class="form-group" fxLayout="column">
-        <label for="address">Adresse</label>
-
+      <div class="section">
+        <label>Nom</label>
         <div class="inputRow" fxLayout="row" fxLayoutGap="13px">
-          <app-address-autocomplete
-            [address]="getOrientationControl('address').valid ? getOrientationControl('address').value : null"
-            (inputAddress)="setAddressBeneficiary()"
-            (selectedAddress)="setAddressBeneficiary($event)"
-          ></app-address-autocomplete>
-          <app-svg-icon
-            *ngIf="getOrientationControl('address').valid && !isLoading"
-            [iconClass]="'validation'"
-            [type]="'form'"
-            [icon]="'validate'"
-            class="validateIcon"
-          ></app-svg-icon>
-          <div *ngIf="!getOrientationControl('address').valid && !isLoading" (click)="getAddress()">
-            <app-svg-icon [type]="'ico'" [icon]="'locateMe'" class="markerIcon"></app-svg-icon>
-          </div>
-          <div *ngIf="isLoading">
-            <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
-          </div>
+          <input
+            type="text"
+            [value]="getOrientationControl('beneficiaryName').value"
+            (input)="setBeneficiaryName($event.target.value)"
+            class="form-input"
+          />
         </div>
       </div>
-      <div class="title">
-        <h3>Le bénéficiaire a-t-il un profil spécifique ?</h3>
-        <p class="notRequired">facultatif</p>
+      <div class="section">
+        <label>Possède-t-il un Pass numérique ?</label>
+        <app-radio-form [horizontal]="true" (selectedEvent)="onRadioBtnChange('passNumeric', $event)"> </app-radio-form>
       </div>
-
-      <div class="tags">
-        <button
-          *ngFor="let choice of specificProfile.modules"
-          (click)="updateChoice(choice.id, 'specificProfile')"
-          [ngClass]="{ selectedChoice: isInArray(choice.id, 'specificProfile') }"
-        >
-          <div fxLayout="row" fxLayoutAlign=" center">
-            <svg class="validate" aria-hidden="true">
-              <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
-            </svg>
-            <div class="textBtn">
-              {{ choice.text }}
+      <div class="section">
+        <label>A-t-il un profil spécifique ?</label>
+        <div class="tags">
+          <button
+            (click)="updateChoice(null, 'specificProfile')"
+            [ngClass]="{ selectedChoice: isEmpty('specificProfile') }"
+          >
+            <div fxLayout="row" fxLayoutAlign=" center">
+              <svg class="validate" aria-hidden="true">
+                <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
+              </svg>
+              <div class="textBtn">Aucun</div>
             </div>
-          </div>
-        </button>
-      </div>
-    </div>
-    <!-- STRUCTURE SEARCH -->
-    <div *ngIf="currentPage == pageTypeEnum.structuresSelection" class="page">
-      Filtres séléctionnés
-      <div fxLayout="row wrap" fxLayoutGap="16px">
-        <div *ngFor="let filter of filters" class="tags-cloud" fxLayout="row" (click)="removeFilter(filter)">
-          {{ filter.text ? filter.text : filter.value }}
-          <app-svg-icon [type]="'ico'" [icon]="'delete'" [iconColor]="'white'"></app-svg-icon>
-        </div>
-        <div
-          *ngFor="let uncheckedFilter of uncheckedFilters"
-          class="tags-cloud unchecked"
-          fxLayout="row"
-          (click)="restoreFilter(uncheckedFilter)"
-        >
-          {{ uncheckedFilter.text ? uncheckedFilter.text : uncheckedFilter.value }}
-          <app-svg-icon [type]="'ico'" [icon]="'validate'" [iconColor]="'white'"></app-svg-icon>
-        </div>
-      </div>
-      <div fxLayout="row" class="content-container">
-        <div class="nbStructure-panel left-pane" [ngClass]="{ mapPhone: isMapPhone == true }">
-          <div class="nbStructuresLabel" [ngPlural]="structuresList.length">
-            <ng-template ngPluralCase="0">0 structure trouvée</ng-template>
-            <ng-template ngPluralCase="1">1 structure trouvée</ng-template>
-            <ng-template ngPluralCase="other">{{ structuresList.length }} structures trouvées</ng-template>
-          </div>
-          <div id="listCard" (mouseleave)="mouseLeave()">
-            <app-card
-              *ngFor="let structure of structuresList"
-              [structure]="structure"
-              [isOrientation]="true"
-              [isSelected]="isInPrintList(structure._id)"
-              (addToList)="addToList($event, structure)"
-              (hover)="handleCardHover($event)"
-              (showDetails)="showDetails($event)"
-            ></app-card>
-            <p *ngIf="structureList && structureList.length <= 0">
-              Il n'y a aucune réponse correspondant à votre recherche
-            </p>
-          </div>
-        </div>
-        <div class="btnSwitch">
-          <app-button
-            [style]="'roundedButton'"
-            [text]="isMapPhone ? 'Liste' : 'Carte'"
-            [iconBtn]="isMapPhone ? 'liste' : 'map-marker'"
-            (action)="switchMapList()"
-          ></app-button>
+          </button>
+          <button
+            *ngFor="let choice of specificProfile.modules"
+            (click)="updateChoice(choice.id, 'specificProfile')"
+            [ngClass]="{ selectedChoice: isInArray(choice.id, 'specificProfile') }"
+          >
+            <div fxLayout="row" fxLayoutAlign=" center">
+              <svg class="validate" aria-hidden="true">
+                <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
+              </svg>
+              <div class="textBtn">
+                {{ choice.text }}
+              </div>
+            </div>
+          </button>
         </div>
-        <app-map
-          [structures]="structuresList"
-          [structuresToPrint]="structuresToPrint"
-          [toogleToolTipId]="displayMapMarkerId"
-          [selectedMarkerId]="selectedMarkerId"
-          [locate]="locate"
-          (locatationTrigger)="locatationTrigger($event)"
-          (selectedStructure)="showDetails($event)"
-          [isMapPhone]="isMapPhone"
-          [searchedValue]="searchedValue"
-          class="right-pane deep-map"
-          [ngClass]="{ mapPhone: isMapPhone == true }"
-        ></app-map>
       </div>
     </div>
     <!-- BENEFICIARY ACCOMPANIMENT -->
@@ -333,59 +193,95 @@
       <div class="title">
         <h3>Qui oriente le bénéficiaire ?</h3>
       </div>
-      <label>Votre structure (MDM, Caf, Pôle Emploi...)</label>
-      <div class="inputRow" fxLayout="row" fxLayoutGap="13px">
-        <input
-          type="text"
-          [value]="getOrientationControl('structureAccompaniment').value"
-          (input)="setStructureAccompaniment($event.target.value)"
-          class="form-input"
-        />
+      <div class="section">
+        <label>De quelle structure êtes-vous ? (MDM, Caf, Pôle Emploi...)</label>
+        <div class="inputRow" fxLayout="row" fxLayoutGap="13px">
+          <input
+            type="text"
+            [value]="getOrientationControl('structureAccompaniment').value"
+            (input)="setStructureAccompaniment($event.target.value)"
+            class="form-input"
+          />
+        </div>
       </div>
-
-      <div class="title">
-        <h3>Comment contacter cette structure ?</h3>
+      <div class="section">
+        <label>Courriel de votre structure</label>
         <p class="notRequired">facultatif</p>
+        <div class="inputRow" fxLayout="row" fxLayoutGap="13px">
+          <input
+            type="text"
+            [value]="getOrientationControl('contactAccompanimentEmail').value"
+            placeholder="exemple: prenom.nom@grandlyon.com"
+            (input)="setContactAccompanimentEmail($event.target.value)"
+            class="form-input"
+          />
+          <app-svg-icon
+            *ngIf="
+              getOrientationControl('contactAccompanimentEmail').valid &&
+              getOrientationControl('contactAccompanimentEmail').value
+            "
+            [iconClass]="'validation'"
+            [type]="'form'"
+            [icon]="'validate'"
+          ></app-svg-icon>
+          <app-svg-icon
+            *ngIf="
+              getOrientationControl('contactAccompanimentEmail').invalid &&
+              getOrientationControl('contactAccompanimentEmail').value
+            "
+            [iconClass]="'validation'"
+            [type]="'form'"
+            [icon]="'notValidate'"
+          ></app-svg-icon>
+        </div>
       </div>
-      <label>Contact (email ou n° de téléphone)</label>
-      <div class="inputRow" fxLayout="row" fxLayoutGap="13px">
-        <input
-          type="text"
-          [value]="getOrientationControl('contactAccompaniment').value"
-          (input)="setContactAccompaniment($event.target.value)"
-          class="form-input"
-        />
-      </div>
-
-      <div class="title">
-        <h3>Qui est le bénéficiaire ?</h3>
+      <div class="section">
+        <label>Téléphone de votre structure</label>
         <p class="notRequired">facultatif</p>
-      </div>
-      <label>Nom du bénéficiaire</label>
-      <div class="inputRow" fxLayout="row" fxLayoutGap="13px">
-        <input
-          type="text"
-          [value]="getOrientationControl('beneficiaryName').value"
-          (input)="setBeneficiaryName($event.target.value)"
-          class="form-input"
-        />
+        <div class="inputRow" fxLayout="row" fxLayoutGap="13px">
+          <input
+            type="text"
+            [value]="getOrientationControl('contactAccompanimentPhone').value"
+            (input)="setContactAccompanimentPhone($event.target.value)"
+            class="form-input"
+          />
+          <app-svg-icon
+            *ngIf="
+              getOrientationControl('contactAccompanimentPhone').value &&
+              getOrientationControl('contactAccompanimentPhone').valid
+            "
+            [iconClass]="'validation'"
+            [type]="'form'"
+            [icon]="'validate'"
+          ></app-svg-icon>
+          <app-svg-icon
+            *ngIf="
+              getOrientationControl('contactAccompanimentPhone').invalid &&
+              getOrientationControl('contactAccompanimentPhone').value
+            "
+            [iconClass]="'validation'"
+            [type]="'form'"
+            [icon]="'notValidate'"
+          ></app-svg-icon>
+        </div>
       </div>
     </div>
     <!-- BENEFICIARY NEEDS COMMENTARY -->
     <div *ngIf="currentPage == pageTypeEnum.beneficiaryNeedCommentary" class="page">
       <div class="title">
-        <h3>Précisez le besoin</h3>
-        <p class="notRequired">facultatif</p>
+        <h3>Avez-vous des précisions à apporter ?</h3>
+        <p class="notRequired lg">facultatif</p>
       </div>
-      <label>Ces informations sont à destination de la structure</label>
+      <label>Ces informations accompagneront la fiche d'orientation du bénéficiaire</label>
       <div class="textareaBlock" fxLayout="column">
         <textarea
           rows="8"
           maxlength="500"
+          placeholder="Exemple: le bénéficiaire n'a pas d'adresse e-mail"
           [value]="getOrientationControl('beneficiaryNeedCommentary').value"
           (input)="setBeneficiaryNeedCommentary($event.target.value)"
         ></textarea>
-        <p>
+        <p class="textarea-char">
           {{
             getOrientationControl('beneficiaryNeedCommentary').value
               ? getOrientationControl('beneficiaryNeedCommentary').value.length
@@ -394,15 +290,43 @@
         </p>
       </div>
     </div>
+    <!-- ADDRESS SEARCH -->
+    <div *ngIf="currentPage == pageTypeEnum.beneficiaryAddress" class="page">
+      <div class="title">
+        <h3>Autour de quelle adresse chercher une structure ?</h3>
+        <p class="notRequired lg">facultatif</p>
+      </div>
+      <div class="form-group" fxLayout="column">
+        <div class="inputRow" fxLayout="row" fxLayoutGap="13px">
+          <app-address-autocomplete
+            [address]="getOrientationControl('address').valid ? getOrientationControl('address').value : null"
+            (inputAddress)="setAddressBeneficiary()"
+            (selectedAddress)="setAddressBeneficiary($event)"
+          ></app-address-autocomplete>
+          <app-svg-icon
+            *ngIf="getOrientationControl('address').valid && !isLoading"
+            [iconClass]="'validation'"
+            [type]="'form'"
+            [icon]="'validate'"
+            class="validateIcon"
+          ></app-svg-icon>
+        </div>
+      </div>
+    </div>
     <!-- PRINT RESULTS -->
-    <div *ngIf="currentPage == pageTypeEnum.printResults" class="page">
+    <div *ngIf="currentPage == pageTypeEnum.printResults" class="last-page">
       <div class="title">
         <app-structure-print-header
-          [beneficiaryNeedCommentary]="getOrientationControl('beneficiaryNeedCommentary').value"
-          [beneficiaryName]="getOrientationControl('beneficiaryName').value"
-          [structureAccompaniment]="getOrientationControl('structureAccompaniment').value"
-          [beneficiaryPassNumeric]="getOrientationControl('passNumeric').value"
-          [contactAccompaniment]="getOrientationControl('contactAccompaniment').value"
+          [beneficiaryNeedCommentary]="
+            getOrientationControl('beneficiaryNeedCommentary')
+              ? getOrientationControl('beneficiaryNeedCommentary').value
+              : ''
+          "
+          [beneficiaryName]="getOrientationControl('beneficiaryName')?.value"
+          [structureAccompaniment]="getOrientationControl('structureAccompaniment')?.value"
+          [beneficiaryPassNumeric]="getOrientationControl('passNumeric')?.value"
+          [contactAccompaniment]="getOrientationControl('contactAccompanimentEmail')?.value"
+          [contactAccompanimentPhone]="getOrientationControl('contactAccompanimentPhone')?.value"
           [filters]="filters"
         ></app-structure-print-header>
 
@@ -413,49 +337,94 @@
       </div>
     </div>
   </div>
-  <!-- FOOTER AVEC SUIVANT / PRECEDENT ET VALIDATION -->
-  <div *ngIf="currentPage == 0" class="footer desktop" fxLayout="column" fxLayoutAlign="space-between">
-    <div fxLayout="row" fxLayoutAlign="center center">
-      <app-footer-form
-        [btnName]="['Précédent', 'Suivant']"
-        (previousPage)="previousUrl()"
-        (nextPage)="nextPage()"
-        [isValid]="isPageValid"
-      ></app-footer-form>
+  <!-- STRUCTURE SEARCH -->
+  <div *ngIf="currentPage == pageTypeEnum.structuresSelection" class="carto">
+    <div class="left-col" [ngClass]="{ mapPhone: isMapPhone == true }">
+      <div class="filters">
+        <span class="filters-title">Filtre(s) séléctionné(s)</span>
+        <div fxLayout="row wrap" fxLayoutGap="4px">
+          <div
+            class="tags-cloud"
+            *ngFor="let filter of filters"
+            [class.unchecked]="!filter.checked"
+            fxLayout="row"
+            (click)="checkFilter(filter)"
+          >
+            <app-svg-icon
+              *ngIf="filter.checked"
+              [type]="'ico'"
+              [icon]="'validate'"
+              [iconColor]="'white'"
+            ></app-svg-icon>
+            <app-svg-icon *ngIf="!filter.checked" [type]="'ico'" [icon]="'delete'" [iconColor]="'white'"></app-svg-icon>
+            <div>{{ filter.text ? filter.text : filter.value }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="nbStructuresLabel" [ngPlural]="structuresList.length">
+        <ng-template ngPluralCase="0">0 structure</ng-template>
+        <ng-template ngPluralCase="1">1 structure</ng-template>
+        <ng-template ngPluralCase="other">{{ structuresList.length }} structures</ng-template>
+      </div>
+      <div fxLayout="row" class="content-container">
+        <div class="nbStructure-panel left-pane">
+          <div id="listCard" (mouseleave)="mouseLeave()">
+            <app-card
+              *ngFor="let structure of structuresList"
+              [structure]="structure"
+              [isOrientation]="true"
+              [isSelected]="isInPrintList(structure._id)"
+              (addToList)="addToList($event, structure)"
+              (hover)="handleCardHover($event)"
+              (showDetails)="showDetails($event)"
+              class="structure-card"
+            ></app-card>
+            <p *ngIf="structureList && structureList.length <= 0">
+              Il n'y a aucune réponse correspondant à votre recherche
+            </p>
+          </div>
+        </div>
+      </div>
     </div>
-  </div>
-  <div *ngIf="currentPage != 0 && currentPage != pageTypeEnum.printResults" class="footer desktop">
-    <div fxLayout="row" fxLayoutAlign="center center">
-      <app-footer-form
-        [btnName]="['Précédent', 'Suivant']"
-        (previousPage)="previousPage()"
-        (nextPage)="nextPage()"
-        [isValid]="isPageValid"
-      ></app-footer-form>
+    <div class="btnSwitch">
+      <app-button
+        [style]="'roundedButton'"
+        [text]="isMapPhone ? 'Liste' : 'Carte'"
+        [iconBtn]="isMapPhone ? 'liste' : 'map-marker'"
+        (action)="switchMapList()"
+      ></app-button>
     </div>
-  </div>
-  <div *ngIf="currentPage == pageTypeEnum.printResults" class="footer desktop">
-    <div fxLayout="row" fxLayoutAlign="center center">
-      <app-footer-form
-        [btnName]="['Précédent', 'Imprimer']"
-        (previousPage)="previousPage()"
-        (nextPage)="runMultiPrint(true)"
-        [isValid]="isPageValid"
-      ></app-footer-form>
+    <div class="right-col" [ngClass]="{ mapPhone: isMapPhone == true }">
+      <app-map
+        [isOrientationForm]="true"
+        [structures]="structuresList"
+        [structuresToPrint]="structuresToPrint"
+        [toogleToolTipId]="displayMapMarkerId"
+        [selectedMarkerId]="selectedMarkerId"
+        [locate]="locate"
+        (locatationTrigger)="locatationTrigger($event)"
+        (selectedStructure)="showDetails($event)"
+        [isMapPhone]="isMapPhone"
+        [searchedValue]="userLocation"
+        (onOrientationButtonClick)="addToList($event, structure)"
+        class="right-pane deep-map"
+        [ngClass]="{ mapPhone: isMapPhone == true }"
+      ></app-map>
     </div>
   </div>
-
-  <div *ngIf="currentPage != 0 && currentPage != pageTypeEnum.printResults" class="footer phone">
+  <!-- FOOTER AVEC SUIVANT / PRECEDENT ET VALIDATION -->
+  <div *ngIf="currentPage != pageTypeEnum.printResults" class="form-footer">
     <div fxLayout="row" fxLayoutAlign="center center">
       <app-footer-form
         [btnName]="['Précédent', 'Suivant']"
         (previousPage)="previousPage()"
+        [displayPreviousButton]="currentPage !== pageTypeEnum.beneficiaryNeed"
         (nextPage)="nextPage()"
         [isValid]="isPageValid"
       ></app-footer-form>
     </div>
   </div>
-  <div *ngIf="currentPage == pageTypeEnum.printResults" class="footer phone">
+  <div *ngIf="currentPage == pageTypeEnum.printResults" class="form-footer">
     <div fxLayout="row" fxLayoutAlign="center center">
       <app-footer-form
         [btnName]="['Précédent', 'Imprimer']"
diff --git a/src/app/form/orientation-form/orientation-form.component.scss b/src/app/form/orientation-form/orientation-form.component.scss
index dbeffc59d..b83f7a12b 100644
--- a/src/app/form/orientation-form/orientation-form.component.scss
+++ b/src/app/form/orientation-form/orientation-form.component.scss
@@ -4,61 +4,24 @@
 @import '../../../assets/scss/color';
 @import '../../../assets/scss/typography';
 
-.title {
-  margin-top: 20px;
-}
-
 .body-wrap {
   height: 400px;
 }
 
-.left-pane {
-  width: 529px;
-  min-width: 500px;
-  height: 600px;
-  overflow: auto;
-  overflow-x: hidden;
-  padding: 0 25px 0 0;
-  @media #{$tablet} {
-    width: 100%;
-    min-width: unset;
-    &.mapPhone {
-      display: none !important;
-    }
-  }
-}
-
-.right-pane {
-  width: 400px;
-  max-height: 400px;
-  padding: 0 16px;
-  @media #{$tablet} {
-    display: none;
-    &.mapPhone {
-      display: block;
-    }
-    width: 100%;
-    padding: 0;
-  }
-}
-
-.deep-map ::ng-deep #map {
-  height: 380px;
-}
-
 .tags-cloud {
+  cursor: pointer;
   font-style: normal;
   justify-content: center;
   align-items: center;
   height: 28px;
   border-radius: 20px;
-  padding: 5px 15px;
-  color: white;
+  padding: 4px 12px;
+  color: $white;
   border-style: none;
-  margin-top: 15px;
-  background: #348899;
+  margin-top: 4px;
+  background: $blue;
   &.unchecked {
-    background: #bdbdbd;
+    background: $grey-4;
   }
 }
 
@@ -89,42 +52,38 @@
 }
 
 .nbStructuresLabel {
-  color: $white;
   @include cn-regular-16;
-  display: grid;
-  align-items: center;
+  display: flex;
+  text-align: center;
   height: 32px;
-  background-color: $grey-4;
-  padding-left: 9px;
+  color: $grey-3;
   width: 100%;
+  align-items: center;
+  @media #{$large-phone} {
+    padding-left: unset;
+  }
+}
+
+.nbStructuresLabel::before,
+.nbStructuresLabel::after {
+  border-top: 0.0625em solid;
+  content: '';
+  flex: 1;
+  margin: 0 0.5em;
 }
 
-.footer {
+.form-footer {
   padding: 17px 0;
   width: 100%;
-  max-width: 960px;
-  margin: 20px auto;
   text-align: center;
-  &.desktop {
-    @media #{$tablet} {
-      display: none;
-    }
-  }
-
-  &.phone {
-    display: none;
-    @media #{$tablet} {
-      margin: 0 auto;
-      border-top: 1px solid $grey-4;
-      display: block;
-    }
-  }
+  z-index: calc($btn-phone-switch-map-list-z-index - 1);
+  background: $grey-6;
 }
 
 .btnSwitch {
   position: fixed;
   left: 50%;
-  bottom: $footer-height + 5px;
+  bottom: 0;
   transform: translate(-50%, -50%);
   margin: 0 auto;
   display: none;
@@ -132,25 +91,200 @@
     display: block;
     opacity: 0.8;
     z-index: $btn-phone-switch-map-list-z-index;
+    margin-bottom: 60px;
   }
-  @media #{$large-phone} {
+}
+
+#body {
+  background-color: $grey-6;
+}
+
+.content {
+  min-height: 450px;
+  background-color: $white;
+  margin-left: 25%;
+  margin-right: 24%;
+
+  @media #{$tablet} {
+    width: 100%;
+    height: 100vh !important;
+    margin: 0;
+    border-bottom: $grey-4 solid 1px;
+    min-height: unset;
+  }
+
+  p {
+    &.notRequired {
+      font-size: 14px;
+      margin-top: 0px;
+      font-style: italic;
+      color: $secondary-color;
+
+      &.lg {
+        font-size: 17px;
+      }
+    }
   }
 }
 
-.loader-gif {
-  @media #{$desktop} {
-    width: 20%;
+.content-container {
+  width: 97%;
+  float: right;
+  height: 58vh;
+  padding: unset;
+  // height: 100%;
+  @media #{$tablet} {
+    height: 57vh !important;
   }
-  @media #{$large-desktop} {
-    width: 20%;
+
+  @media #{$desktop} {
+    height: 100%;
   }
-  @media #{$large-phone} {
-    width: 100%;
+
+  ::ng-deep .structure-card .structure {
+    margin-right: 16px;
   }
-  @media #{$small-phone} {
-    width: 100%;
+  ::ng-deep .structure-card:last-child .structure {
+    border-bottom: unset !important;
   }
+}
+
+::ng-deep #search-address {
+  width: 400px !important;
   @media #{$phone} {
+    width: 250px !important;
+  }
+}
+
+.progress-container {
+  margin-top: 1%;
+  margin-left: 25.5%;
+  width: 50%;
+  @media #{$tablet} {
+    margin: 0 16px;
+    width: calc(100% - 32px);
+  }
+  .progressBar {
+    height: #{$progressBar-height};
+    progress {
+      height: 6px;
+      border-radius: 7px;
+      &::-webkit-progress-bar {
+        background-color: $white-1;
+      }
+      &::-webkit-progress-value {
+        background-color: $secondary-color;
+        border-radius: 12px;
+      }
+      &.validate {
+        &::-webkit-progress-value {
+          background-color: $green-1;
+        }
+      }
+    }
+  }
+}
+
+.title {
+  margin-top: 20px;
+  padding-bottom: 3%;
+}
+
+.last-page {
+  width: 96%;
+  margin-left: 2%;
+}
+
+.page {
+  float: left;
+  padding-top: 2%;
+  padding-bottom: 5%;
+
+  textarea {
+    margin-top: 1%;
+  }
+
+  .textarea-char {
+    font-style: italic;
+    color: $grey-3;
+  }
+
+  .section {
+    margin-top: 0.5%;
+  }
+
+  @media #{$tablet} {
+    width: calc(100vw - 32px);
+  }
+}
+
+.left-pane {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  overflow-x: hidden;
+  @media #{$tablet} {
     width: 100%;
+    min-width: unset;
+  }
+}
+
+.carto {
+  display: flex;
+  float: left;
+  min-height: 500px;
+  width: 100%;
+  border-bottom: $grey-4 solid 1px;
+
+  @media #{$tablet} {
+    min-height: 50vh;
+  }
+
+  .left-col {
+    padding-left: 16px;
+    margin-left: 1%;
+    background-color: $white;
+    padding-right: 16px;
+    width: 30%;
+    @media #{$tablet} {
+      width: 100%;
+      min-width: unset;
+      height: 100vh;
+      &.mapPhone {
+        display: none !important;
+      }
+    }
+  }
+
+  .right-col {
+    width: 67%;
+    padding-left: 2%;
+    padding-right: 2%;
+    margin-bottom: 2%;
+    @media #{$tablet} {
+      display: none;
+      height: 100vh;
+      &.mapPhone {
+        display: block;
+      }
+      width: 100%;
+      padding: 0;
+    }
+  }
+
+  .filters {
+    margin-bottom: 1%;
+    margin-top: 7%;
+    .filters-title {
+      color: $grey-3;
+    }
+  }
+}
+
+input {
+  width: 400px;
+  &.email-placeholder::placeholder {
+    color: $white-2;
+    font-style: italic;
   }
 }
diff --git a/src/app/form/orientation-form/orientation-form.component.ts b/src/app/form/orientation-form/orientation-form.component.ts
index 59b8b6513..7f6b8721d 100644
--- a/src/app/form/orientation-form/orientation-form.component.ts
+++ b/src/app/form/orientation-form/orientation-form.component.ts
@@ -16,6 +16,8 @@ import { Filter } from '../../structure-list/models/filter.model';
 import { Module } from '../../structure-list/models/module.model';
 import { SearchService } from '../../structure-list/services/search.service';
 import { PageTypeEnum } from './pageType.enum';
+import { Utils } from '../../utils/utils';
+import { CustomRegExp } from '../../utils/CustomRegExp';
 
 @Component({
   selector: 'app-orientation-form',
@@ -30,6 +32,9 @@ export class OrientationFormComponent implements OnInit {
   public isMapPhone = false;
   public isLoading = false;
 
+  // Map auto locate with address
+  public userLocation = [];
+
   public orientationForm: FormGroup;
 
   // Page and progress var
@@ -52,11 +57,11 @@ export class OrientationFormComponent implements OnInit {
 
   public numberAssistanceChecked;
   public filters: Filter[] = [];
-  public uncheckedFilters: Filter[] = [];
 
   public equipments: Module[] = [];
   public assistance: Module[] = [];
   public formation: Module[] = [];
+  public selectedFormations: Category[] = [];
   public baseSkillssReferentiel: Category;
   public accessRightsReferentiel: Category;
   public digitalCultureSecuritysReferentiel: Category;
@@ -81,7 +86,8 @@ export class OrientationFormComponent implements OnInit {
     private searchService: SearchService,
     private structureService: StructureService,
     private geoJsonService: GeojsonService,
-    private meta: Meta
+    private meta: Meta,
+    public utils: Utils
   ) {}
 
   ngOnInit(): void {
@@ -102,6 +108,7 @@ export class OrientationFormComponent implements OnInit {
     });
     const categs = await this.searchService.getCategoriesTraining().toPromise();
     categs.forEach((categ) => {
+      this.selectedFormations.push(categ);
       categ.modules.forEach((module) => {
         this.formation.push(module);
       });
@@ -157,8 +164,15 @@ export class OrientationFormComponent implements OnInit {
         commune: new FormControl('', Validators.required),
       }),
       structureAccompaniment: new FormControl(orientationFormFilters.structureAccompaniment, Validators.required),
-      contactAccompaniment: new FormControl(orientationFormFilters.contactAccompaniment),
-      beneficiaryName: new FormControl(orientationFormFilters.beneficiaryName),
+      contactAccompanimentPhone: new FormControl(
+        orientationFormFilters.contactAccompanimentPhone,
+        Validators.pattern(CustomRegExp.PHONE)
+      ),
+      contactAccompanimentEmail: new FormControl(
+        orientationFormFilters.contactAccompanimentEmail,
+        Validators.pattern(CustomRegExp.EMAIL)
+      ),
+      beneficiaryName: new FormControl(orientationFormFilters.beneficiaryName, Validators.required),
       beneficiaryNeedCommentary: new FormControl(orientationFormFilters.beneficiaryNeedCommentary),
     });
   }
@@ -176,31 +190,18 @@ export class OrientationFormComponent implements OnInit {
     if (this.currentPage === this.nbPagesForm - 1) {
       this.validateForm();
     } else {
-      if (
-        this.currentPage === this.pageTypeEnum.beneficiaryNeed &&
-        this.orientationForm.get('assistance').value.length + this.orientationForm.get('formation').value.length == 0 &&
-        this.orientationForm.get('equipments').value.length > 0
-      ) {
-        this.noPassNumeric = true;
-        this.getOrientationControl('passNumeric').setValue(false);
-
-        this.currentPage++;
-        this.progressStatus += 100 / this.nbPagesForm;
-      }
       this.currentPage++;
       this.progressStatus += 100 / this.nbPagesForm;
       this.updatePageValid();
+      document.getElementsByClassName('content')[0].scrollTo(0, 0);
     }
   }
 
   public previousPage(): void {
     // Check if going to the first page
     if (this.currentPage === 0) {
-      //go back to home ? previous page
+      this.previousUrl();
     } else {
-      if (this.currentPage === this.pageTypeEnum.beneficiaryInfo && this.noPassNumeric) {
-        this.currentPage--;
-      }
       this.currentPage--;
       this.progressStatus -= 100 / this.nbPagesForm;
       this.setStructuresAndCoord();
@@ -231,19 +232,24 @@ export class OrientationFormComponent implements OnInit {
           this.orientationForm.get('formation').value.length >
         0,
     };
-    this.pagesValidation[PageTypeEnum.beneficiaryPassNumeric] = {
-      valid: this.getOrientationControl('passNumeric').valid,
+    this.pagesValidation[PageTypeEnum.beneficiaryInfo] = {
+      valid:
+        this.getOrientationControl('passNumeric').value != null &&
+        this.getOrientationControl('beneficiaryName').value &&
+        this.getOrientationControl('beneficiaryName').value.length != 0,
     };
-    this.pagesValidation[PageTypeEnum.beneficiaryInfo] = { valid: this.orientationForm.get('address').valid };
     this.pagesValidation[PageTypeEnum.beneficiaryAccompaniment] = {
       valid:
         this.getOrientationControl('structureAccompaniment').valid &&
-        this.getOrientationControl('contactAccompaniment').valid &&
-        this.getOrientationControl('beneficiaryName').valid,
+        this.getOrientationControl('contactAccompanimentPhone').valid &&
+        this.getOrientationControl('contactAccompanimentEmail').valid,
     };
     this.pagesValidation[PageTypeEnum.beneficiaryNeedCommentary] = {
       valid: this.getOrientationControl('beneficiaryNeedCommentary').valid,
     };
+    this.pagesValidation[PageTypeEnum.beneficiaryAddress] = {
+      valid: true,
+    };
     this.pagesValidation[PageTypeEnum.printResults] = { valid: true };
     this.pagesValidation[PageTypeEnum.structuresSelection] = { valid: this.structuresToPrint.length > 0 };
 
@@ -292,7 +298,18 @@ export class OrientationFormComponent implements OnInit {
   }
 
   public updateChoice(choice: string, controlName: string): void {
-    this.onCheckChange(!this.isInArray(choice, controlName), controlName, choice);
+    if (choice == null) this.unCheckAll(controlName);
+    else this.onCheckChange(!this.isInArray(choice, controlName), controlName, choice);
+  }
+
+  public isEmpty(formControlName: string): boolean {
+    const formArray: FormArray = this.orientationForm.get(formControlName) as FormArray;
+    return formArray.length < 1;
+  }
+
+  public unCheckAll(formControlName: string) {
+    const formArray: FormArray = this.orientationForm.get(formControlName) as FormArray;
+    formArray.clear();
   }
 
   public onCheckChange(event: boolean, formControlName: string, value: string): void {
@@ -322,8 +339,10 @@ export class OrientationFormComponent implements OnInit {
       this.getOrientationControl('address').get('numero').setValue(address.numero);
       this.getOrientationControl('address').get('street').setValue(address.street);
       this.getOrientationControl('address').get('commune').setValue(address.commune);
+      this.userLocation = address.coordinates;
     } else {
       this.orientationForm.get('address').reset();
+      this.userLocation = null;
     }
     this.setValidationsForm();
   }
@@ -333,8 +352,13 @@ export class OrientationFormComponent implements OnInit {
     this.setValidationsForm();
   }
 
-  public setContactAccompaniment(contact: string): void {
-    this.getOrientationControl('contactAccompaniment').setValue(contact);
+  public setContactAccompanimentPhone(phone: string): void {
+    this.getOrientationControl('contactAccompanimentPhone').setValue(this.utils.modifyPhoneValue(phone));
+    this.setValidationsForm();
+  }
+
+  public setContactAccompanimentEmail(email: string): void {
+    this.getOrientationControl('contactAccompanimentEmail').setValue(email);
     this.setValidationsForm();
   }
 
@@ -365,7 +389,7 @@ export class OrientationFormComponent implements OnInit {
       this.filters.push(new Filter('equipmentsAndServices', element, this.findEquipmentName(element)));
     });
     this.orientationForm.get('formation').value.forEach((element) => {
-      this.orientationForm.get('formation');
+      this.findTrainingCategoryForSkill(element);
       // Put higher cat like accessRight and so on here
       this.filters.push(
         new Filter(
@@ -375,15 +399,6 @@ export class OrientationFormComponent implements OnInit {
         )
       );
     });
-
-    // todo - fix
-    this.removeDoublonFilters();
-  }
-
-  public removeDoublonFilters(): void {
-    this.uncheckedFilters.forEach((elem) => {
-      this.filters = this.filters.filter((filter) => filter.value != elem.value);
-    });
     this.setStructuresAndCoord();
   }
 
@@ -410,34 +425,10 @@ export class OrientationFormComponent implements OnInit {
 
   public findTrainingCategoryForSkill(skill): any {
     let infos = { categ: '', name: '' };
-    this.baseSkillssReferentiel.modules.forEach((elem) => {
+    this.selectedFormations.forEach((elem) => {
       if (elem.id === skill) {
-        infos.categ = this.baseSkillssReferentiel.id;
-        infos.name = elem.text;
-      }
-    });
-    this.accessRightsReferentiel.modules.forEach((elem) => {
-      if (elem.id === skill) {
-        infos.categ = this.accessRightsReferentiel.id;
-        infos.name = elem.text;
-      }
-    });
-    this.parentingHelpsReferentiel.modules.forEach((elem) => {
-      if (elem.id === skill) {
-        infos.categ = this.parentingHelpsReferentiel.id;
-        infos.name = elem.text;
-      }
-    });
-    this.socialAndProfessionalsReferentiel.modules.forEach((elem) => {
-      if (elem.id === skill) {
-        infos.categ = this.socialAndProfessionalsReferentiel.id;
-        infos.name = elem.text;
-      }
-    });
-    this.digitalCultureSecuritysReferentiel.modules.forEach((elem) => {
-      if (elem.id === skill) {
-        infos.categ = this.digitalCultureSecuritysReferentiel.id;
-        infos.name = elem.text;
+        infos.categ = '';
+        infos.name = elem.name;
       }
     });
     return infos;
@@ -447,7 +438,7 @@ export class OrientationFormComponent implements OnInit {
     this.geoJsonService
       .getCoord(this.orientationForm.value.address.numero, this.orientationForm.value.address.street, '69000')
       .subscribe((res) => {
-        this.structureService.getStructures(this.filters).subscribe((data) => {
+        this.structureService.getStructures(this.filters.filter((elem) => elem.checked == true)).subscribe((data) => {
           data.map((structure) => {
             structure.distance = parseInt(
               this.geoJsonService.getDistance(
@@ -501,15 +492,10 @@ export class OrientationFormComponent implements OnInit {
     this.showStructureDetails = false;
   }
 
-  public removeFilter(filter: Filter): void {
-    this.filters = this.filters.filter((elem) => elem != filter);
-    this.uncheckedFilters.push(filter);
-    this.setStructuresAndCoord();
-  }
-
-  public restoreFilter(filter: Filter): void {
-    this.uncheckedFilters = this.uncheckedFilters.filter((elem) => elem != filter);
-    this.filters.push(filter);
+  public checkFilter(filter: Filter): void {
+    this.filters.forEach((element) => {
+      if (element == filter) element.checked = !element.checked;
+    });
     this.setStructuresAndCoord();
   }
 
diff --git a/src/app/form/orientation-form/pageType.enum.ts b/src/app/form/orientation-form/pageType.enum.ts
index 1a0fc933a..e7f68bb8e 100644
--- a/src/app/form/orientation-form/pageType.enum.ts
+++ b/src/app/form/orientation-form/pageType.enum.ts
@@ -1,9 +1,9 @@
 export enum PageTypeEnum {
   beneficiaryNeed,
-  beneficiaryPassNumeric,
   beneficiaryInfo,
-  structuresSelection,
   beneficiaryAccompaniment,
   beneficiaryNeedCommentary,
+  beneficiaryAddress,
+  structuresSelection,
   printResults,
 }
diff --git a/src/app/form/structure-form/form.component.scss b/src/app/form/structure-form/form.component.scss
index 79d9304e1..1fabc2e2c 100644
--- a/src/app/form/structure-form/form.component.scss
+++ b/src/app/form/structure-form/form.component.scss
@@ -19,7 +19,7 @@ h4 {
 }
 
 .form {
-  background: white;
+  background: $white;
   width: 100vw;
   height: calc(var(--vh, 1vh) * 100 - #{$header-height} - #{$footer-height});
   top: #{$header-height};
@@ -46,7 +46,7 @@ h4 {
     display: none;
     @media #{$tablet} {
       margin: 0 auto;
-      border-top: 1px solid $grey-4;
+      //border-top: 1px solid $grey-4;
       display: block;
     }
   }
@@ -96,7 +96,6 @@ h4 {
     ) !important; // -1px because of header border
   }
   @media #{$tablet} {
-    height: 100%;
     &.editMode {
       .page {
         height: calc(
@@ -131,11 +130,6 @@ h4 {
   .page {
     max-width: 960px;
     margin: auto;
-    @media #{$tablet} {
-      height: calc(
-        100vh - #{$header-height-phone} - #{$progressBar-height} - #{$footer-height-phone} - 1px
-      ); // -1px because of header border
-    }
     height: auto;
     color: $grey-1;
     &.home {
@@ -307,7 +301,7 @@ h4 {
 
 input {
   &.email-placeholder::placeholder {
-    color: #cacccb;
+    color: $white-2;
     font-style: italic;
   }
   &.phone {
@@ -335,6 +329,9 @@ img {
   border: 1px solid $grey-4;
   border-radius: 4px;
   margin-bottom: 13px;
+  @media #{$small-phone} {
+    width: 95% !important;
+  }
   @media #{$tablet} {
     width: 296px;
   }
diff --git a/src/app/form/structure-form/form.component.ts b/src/app/form/structure-form/form.component.ts
index c454231a2..d0b4d04ad 100644
--- a/src/app/form/structure-form/form.component.ts
+++ b/src/app/form/structure-form/form.component.ts
@@ -744,6 +744,7 @@ export class FormComponent implements OnInit {
       } else {
         this.currentPage++;
         this.progressStatus += 100 / this.nbPagesForm;
+        document.getElementsByClassName('content')[0].scrollTo(0, 0);
         this.updatePageValid();
       }
     }
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 51dd7c81d..bdf85fe6b 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -38,8 +38,12 @@
       <div fxLayout="column" class="right-header" fxLayoutAlign="none baseline" fxLayoutGap="5vw">
         <a routerLink="/news" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Actualités</a>
         <a routerLink="/acteurs" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Cartographie de acteurs</a>
-        <a routerLink="/orientation" [routerLinkActive]="'active'" i18n>Orienter un bénéficiaire</a>
-        <a routerLink="/page/qui-sommes-nous" [routerLinkActive]="'active'" i18n>Qui sommes-nous ?</a>
+        <a routerLink="/orientation" [routerLinkActive]="'active'" (click)="closeMenu()" i18n
+          >Orienter un bénéficiaire</a
+        >
+        <a routerLink="/page/qui-sommes-nous" [routerLinkActive]="'active'" (click)="closeMenu()" i18n
+          >Qui sommes-nous ?</a
+        >
         <a *ngIf="isAdmin" routerLink="/admin" [routerLinkActive]="'active'" (click)="closeMenu()">Administration</a>
       </div>
     </div>
diff --git a/src/app/map/components/layers.enum.ts b/src/app/map/components/layers.enum.ts
new file mode 100644
index 000000000..3878af93c
--- /dev/null
+++ b/src/app/map/components/layers.enum.ts
@@ -0,0 +1,5 @@
+export enum Layers {
+  mdm = 'mdm',
+  user = 'user',
+  structure = 'structure',
+}
diff --git a/src/app/map/components/map.component.html b/src/app/map/components/map.component.html
index 3af397dbb..1c4483bc5 100644
--- a/src/app/map/components/map.component.html
+++ b/src/app/map/components/map.component.html
@@ -1,3 +1,10 @@
 <div class="map-wrapper">
-  <div id="map" class="body-wrap" leaflet [leafletOptions]="mapOptions" (leafletMapReady)="onMapReady($event)"></div>
+  <div
+    id="map"
+    class="body-wrap"
+    [ngClass]="{ orientation: isOrientationForm }"
+    leaflet
+    [leafletOptions]="mapOptions"
+    (leafletMapReady)="onMapReady($event)"
+  ></div>
 </div>
diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
index a78caaa5c..bac0c2f7f 100644
--- a/src/app/map/components/map.component.scss
+++ b/src/app/map/components/map.component.scss
@@ -23,6 +23,9 @@
   @media #{$large-phone} {
     height: calc(100vh - #{$header-height} - 28px);
   }
+  &.orientation {
+    height: calc(96vh - #{$header-height} - #{$footer-height} - 68px);
+  }
 }
 
 ::ng-deep .leaflet-popup-close-button {
@@ -132,15 +135,33 @@
   .pop-up {
     text-align: center;
     padding-top: 20px;
+    &.orientation {
+      padding: 0;
+      text-align: -webkit-center;
+    }
 
     button {
       @include btn-search-filter;
       @include cn-bold-14;
       font-size: 16px;
     }
+
+    .orientationButton {
+      display: flex;
+      padding: 10px 20px;
+      border-radius: 20px;
+      margin: 0 4px;
+      color: $black;
+      background-color: $white;
+      border: solid 1px $grey-3;
+      min-width: 120px;
+    }
   }
   span {
-    display: inline-block;
+    margin-right: 4px;
+    &.eye {
+      margin-right: 11px;
+    }
   }
 }
 ::ng-deep .leaflet-popup-content-wrapper {
diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts
index de1990809..f844d5d69 100644
--- a/src/app/map/components/map.component.ts
+++ b/src/app/map/components/map.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, HostListener, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, HostListener, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { latLng, MapOptions, geoJSON, tileLayer, Map, latLngBounds, layerGroup } from 'leaflet';
 import { Structure } from '../../models/structure.model';
 import { GeojsonService } from '../../services/geojson.service';
@@ -9,6 +9,7 @@ import { MarkerType } from './markerType.enum';
 import metropole from '../../../assets/geojson/metropole.json';
 import L from 'leaflet';
 import 'leaflet.locatecontrol';
+import { ZoomLevel } from './zoomLevel.enum';
 
 @Component({
   selector: 'app-map',
@@ -16,14 +17,16 @@ import 'leaflet.locatecontrol';
   styleUrls: ['./map.component.scss'],
 })
 export class MapComponent implements OnChanges {
+  @Input() public isOrientationForm = false;
   @Input() public structures: Structure[] = [];
   @Input() public structuresToPrint: Structure[] = [];
   @Input() public toogleToolTipId: string;
   @Input() public selectedMarkerId: string;
   @Input() public isMapPhone: boolean;
   @Input() public locate = false;
-  @Input() public searchedValue: string;
-  @Output() selectedStructure: EventEmitter<Structure> = new EventEmitter<Structure>();
+  @Input() public searchedValue: string | [number, number];
+  @Output() public selectedStructure: EventEmitter<Structure> = new EventEmitter<Structure>();
+  @Output() public onOrientationButtonClick: EventEmitter<Structure> = new EventEmitter<Structure>();
   @Output() locatationTrigger: EventEmitter<boolean> = new EventEmitter<boolean>();
   private lc; // Locate control
   private currentStructure: Structure;
@@ -45,6 +48,10 @@ export class MapComponent implements OnChanges {
     if (event.target.classList.contains('btnShowDetails')) {
       this.selectedStructure.emit(this.currentStructure);
     }
+    if (event.target.classList.contains('add')) {
+      this.onOrientationButtonClick.emit(this.currentStructure);
+      this.getStructuresPositions(this.structures);
+    }
   }
 
   constructor(private mapService: MapService, private geoJsonService: GeojsonService) {
@@ -119,7 +126,7 @@ export class MapComponent implements OnChanges {
 
     if (changes.structuresToPrint) {
       if (changes.structuresToPrint.currentValue < changes.structuresToPrint.previousValue) {
-        this.mapService.setUnactiveMarker(
+        this.mapService?.setUnactiveMarker(
           this.toogleToolTipId,
           this.getMarkerTypeByStructureId(changes.structuresToPrint.previousValue)
         );
@@ -144,6 +151,15 @@ export class MapComponent implements OnChanges {
     );
   }
 
+  /**
+   * Create a user position marcker and center the map on it with a zoom level defined in ZoomLevel
+   * @param coords {[number, number]} Map center position
+   */
+  public centerOnCoordinates(coords: [number, number]): void {
+    this.mapService.createMarker(coords[1], coords[0], MarkerType.user, 'userLocation').addTo(this.map);
+    this.map.setView(new L.LatLng(coords[1], coords[0]), ZoomLevel.userPosition);
+  }
+
   /**
    * Get structures positions and add marker corresponding to those positons on the map
    */
@@ -174,7 +190,7 @@ export class MapComponent implements OnChanges {
    * @returns {MarkerType}
    */
   private getMarkerType(structure: Structure): MarkerType {
-    return structure.labelsQualifications.includes('conseillerNumFranceServices')
+    return structure?.labelsQualifications?.includes('conseillerNumFranceServices')
       ? MarkerType.conseillerFrance
       : MarkerType.structure;
   }
@@ -230,12 +246,18 @@ export class MapComponent implements OnChanges {
       '</h1>' +
       '<p>' +
       structure.getLabelTypeStructure() +
-      '</p><div>' +
-      '<span class="ico-dot-' +
-      cssAvailabilityClass +
-      '"></span><span>' +
-      structure.openDisplay() +
-      '</span></div><div class="pop-up"><button type="button" class="btnShowDetails">Voir</button></div>'
+      '</p>' +
+      (this.isOrientationForm
+        ? ''
+        : '<div>' +
+          '<span class="ico-dot-' +
+          cssAvailabilityClass +
+          '"></span><span>' +
+          structure.openDisplay() +
+          '</span></div>') +
+      (this.isOrientationForm
+        ? '<div class="pop-up orientation"><button type="button" class="orientationButton btnShowDetails"><span class="ico-gg-eye-alt eye"></span>Voir</button></div>'
+        : '<div class="pop-up"><button type="button" class="btnShowDetails">Voir</button></div>')
     );
   }
 
@@ -254,6 +276,12 @@ export class MapComponent implements OnChanges {
     this.map.on('locationfound', () => {
       this.locatationTrigger.emit(true);
     });
+
+    if (this.searchedValue) {
+      if (Array.isArray(this.searchedValue)) {
+        this.centerOnCoordinates(this.searchedValue);
+      }
+    }
   }
 
   /**
@@ -268,15 +296,15 @@ export class MapComponent implements OnChanges {
     layerGroup();
     const carteLayer = tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
       attribution: '&copy; <a href="https://carto.com/attributions">CARTO</a>',
-      maxZoom: 19,
+      maxZoom: ZoomLevel.max,
     });
     // Center is set on townhall
     // Zoom is blocked on 11 to prevent people to zoom out from metropole
     this.mapOptions = {
       center: latLng(45.764043, 4.835659),
-      maxZoom: 19,
-      zoom: 12,
-      minZoom: 10,
+      maxZoom: ZoomLevel.max,
+      zoom: ZoomLevel.regular,
+      minZoom: ZoomLevel.min,
       layers: [carteLayer],
     };
   }
diff --git a/src/app/map/components/markerType.enum.ts b/src/app/map/components/markerType.enum.ts
index 9d6c395c7..ade600852 100644
--- a/src/app/map/components/markerType.enum.ts
+++ b/src/app/map/components/markerType.enum.ts
@@ -2,4 +2,5 @@ export enum MarkerType {
   structure = 0,
   mdm = 1,
   conseillerFrance = 2,
+  user = 3,
 }
diff --git a/src/app/map/components/zoomLevel.enum.ts b/src/app/map/components/zoomLevel.enum.ts
new file mode 100644
index 000000000..fe020b772
--- /dev/null
+++ b/src/app/map/components/zoomLevel.enum.ts
@@ -0,0 +1,6 @@
+export enum ZoomLevel {
+  min = 10,
+  regular = 12,
+  userPosition = 15,
+  max = 19,
+}
diff --git a/src/app/map/services/map.service.ts b/src/app/map/services/map.service.ts
index 93b07319c..c65d92585 100644
--- a/src/app/map/services/map.service.ts
+++ b/src/app/map/services/map.service.ts
@@ -1,17 +1,15 @@
 import { Injectable } from '@angular/core';
 import { DivIcon, divIcon, Map, Marker } from 'leaflet';
+import { Layers } from '../components/layers.enum';
 import { MarkerType } from '../components/markerType.enum';
 import {
   markerIcon,
   markerIconActive,
   markerIconAddedToList,
-  markerIconFranceService,
-  markerIconFranceServiceActive,
-  markerIconFranceServiceAddedToList,
-  markerIconFranceServiceHover,
   markerIconHover,
   markerIconMdm,
   markerIconMdmActive,
+  userLocationIcon,
 } from './marker';
 @Injectable({
   providedIn: 'root',
@@ -51,51 +49,63 @@ export class MapService {
 
   private getLayerAttributton(markerType: MarkerType): string {
     if (markerType === MarkerType.mdm) {
-      return 'mdm';
+      return Layers.mdm;
+    } else if (markerType === MarkerType.user) {
+      return Layers.user;
     } else {
-      return 'structure';
+      return Layers.structure;
     }
   }
 
   // Note: Marke IconFranceService has been removed temporarly on order to rework on buisness needs.
   // This comment is applied for the next 4 methods
   private getMarkerIcon(markerType: MarkerType): DivIcon {
-    if (markerType === MarkerType.mdm) {
-      return markerIconMdm;
-    } else if (markerType === MarkerType.conseillerFrance) {
-      // return markerIconFranceService;
-      return markerIcon;
-    } else {
-      return markerIcon;
+    switch (markerType) {
+      case MarkerType.mdm:
+        return markerIconMdm;
+      case MarkerType.conseillerFrance:
+        return markerIcon;
+      case MarkerType.user:
+        return userLocationIcon;
+      default:
+        return markerIcon;
     }
   }
 
   private getActiveMarkerIcon(markerType: MarkerType): DivIcon {
-    if (markerType === MarkerType.mdm) {
-      return markerIconMdmActive;
-    } else if (markerType === MarkerType.conseillerFrance) {
-      // return markerIconFranceServiceActive;
-      return markerIconActive;
-    } else {
-      return markerIconActive;
+    switch (markerType) {
+      case MarkerType.mdm:
+        return markerIconMdmActive;
+      case MarkerType.conseillerFrance:
+        // return markerIconFranceServiceActive;
+        return markerIconActive;
+      case MarkerType.user:
+        return userLocationIcon;
+      default:
+        return markerIconActive;
     }
   }
 
   private getAddedToListMarkerIcon(markerType: MarkerType): DivIcon {
-    if (markerType === MarkerType.conseillerFrance) {
-      // return markerIconFranceServiceAddedToList;
-      return markerIconAddedToList;
-    } else {
-      return markerIconAddedToList;
+    switch (markerType) {
+      case MarkerType.conseillerFrance:
+        // return markerIconFranceServiceAddedToList;
+        return markerIconAddedToList;
+      case MarkerType.user:
+        return userLocationIcon;
+      default:
+        return markerIconAddedToList;
     }
   }
 
   private getHoverMarkerIcon(markerType: MarkerType): DivIcon {
-    if (markerType === MarkerType.conseillerFrance) {
-      // return markerIconFranceServiceHover;
-      return markerIconHover;
-    } else {
-      return markerIconHover;
+    switch (markerType) {
+      case MarkerType.conseillerFrance:
+        return markerIconHover;
+      case MarkerType.user:
+        return userLocationIcon;
+      default:
+        return markerIconHover;
     }
   }
 
@@ -161,7 +171,7 @@ export class MapService {
     MapService.markersList = {};
     if (map) {
       map.eachLayer((layer) => {
-        if (layer instanceof Marker && layer.options.attribution !== 'mdm') {
+        if (layer instanceof Marker && layer.options.attribution == Layers.structure) {
           map.removeLayer(layer);
         }
       });
diff --git a/src/app/map/services/marker.ts b/src/app/map/services/marker.ts
index fb940ba4c..e458b0b9d 100644
--- a/src/app/map/services/marker.ts
+++ b/src/app/map/services/marker.ts
@@ -28,6 +28,12 @@ export const markerIconAddedToList = divIcon({
   iconAnchor: [24, 48],
   popupAnchor: [0, -48],
 });
+export const userLocationIcon = divIcon({
+  className: null,
+  html: '<svg width="34" height="34"><use xlink:href="assets/ico/sprite.svg#user-location"></use></svg>',
+  iconSize: [34, 34],
+  iconAnchor: [17, 0],
+});
 export const markerIconMdm = divIcon({
   className: null,
   html:
diff --git a/src/app/models/address.model.ts b/src/app/models/address.model.ts
index d04d83abe..0b30ddc1c 100644
--- a/src/app/models/address.model.ts
+++ b/src/app/models/address.model.ts
@@ -2,4 +2,5 @@ export class Address {
   numero: string = null;
   street: string = null;
   commune: string = null;
+  coordinates? = [];
 }
diff --git a/src/app/models/orientation-filter.object.ts b/src/app/models/orientation-filter.object.ts
index 48a52e4ac..49fe9ca54 100644
--- a/src/app/models/orientation-filter.object.ts
+++ b/src/app/models/orientation-filter.object.ts
@@ -7,7 +7,8 @@ export class OrientationFormFilters {
   handicap: boolean;
   passNumeric: boolean;
   structureAccompaniment: string;
-  contactAccompaniment: string;
+  contactAccompanimentPhone: string;
+  contactAccompanimentEmail: string;
   beneficiaryName: string;
   beneficiaryNeedCommentary: string;
   address: Address;
diff --git a/src/app/newsletter-subscription/newsletter-subscription.component.scss b/src/app/newsletter-subscription/newsletter-subscription.component.scss
index 4bf4d917c..f3c913b2c 100644
--- a/src/app/newsletter-subscription/newsletter-subscription.component.scss
+++ b/src/app/newsletter-subscription/newsletter-subscription.component.scss
@@ -10,7 +10,7 @@
 }
 
 .form-input {
-  background-color: white;
+  background-color: $white;
   width: 100%;
 }
 
diff --git a/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts b/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts
index 10f2efed1..a1115c3ac 100644
--- a/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts
+++ b/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts
@@ -59,6 +59,7 @@ export class AddressAutocompleteComponent implements OnInit {
     address.numero = hit.properties.housenumber ? hit.properties.housenumber : null;
     address.street = hit.properties.street;
     address.commune = hit.properties.city;
+    address.coordinates = hit.geometry.coordinates;
     const value = this.parseHitToAddress(hit);
     // Set input value
     this.searchAddress.nativeElement.value = value;
diff --git a/src/app/shared/components/svg-icon/svg-icon.component.scss b/src/app/shared/components/svg-icon/svg-icon.component.scss
index bed7e3e0d..0ce39a373 100644
--- a/src/app/shared/components/svg-icon/svg-icon.component.scss
+++ b/src/app/shared/components/svg-icon/svg-icon.component.scss
@@ -51,6 +51,10 @@
     fill: $grey-1;
     stroke: $grey-1;
   }
+  &.green {
+    fill: $green-1;
+    stroke: $green-1;
+  }
 }
 
 svg {
diff --git a/src/app/structure-list/components/card/card.component.html b/src/app/structure-list/components/card/card.component.html
index bfe44fd1a..eae83fda6 100644
--- a/src/app/structure-list/components/card/card.component.html
+++ b/src/app/structure-list/components/card/card.component.html
@@ -1,42 +1,57 @@
-<div class="structure" fxLayout="column" (click)="cardClicked()" (mouseenter)="cardHover()">
-  <div class="headerStructure" fxLayout="row" fxLayoutAlign="space-between baseline" fxLayoutGap="16px">
-    <div fxLayout="column" fxLayoutAlign="end">
-      <span class="structure-name" [ngClass]="{ notClaimed: !isClaimed }">{{ structure.structureName }}</span>
-      <span class="typeStructure">{{ structure.getLabelTypeStructure() }}</span>
-    </div>
-    <div class="distanceStructure" fxLayout="column" fxLayoutAlign="none end">
-      <div *ngIf="!isOrientation">
-        {{ this.structure.address.commune }}
-      </div>
-      <div
-        fxLayout="row"
-        *ngIf="isOrientation && !isSelected"
-        class="selection-button selected"
-        (click)="cardAddToList(); $event.stopPropagation()"
-      >
-        <app-svg-icon [type]="'ico'" [icon]="'add'" [iconColor]="'black'"></app-svg-icon>ajouter à la liste
+<div
+  class="structure"
+  fxLayout="column"
+  (click)="cardClicked()"
+  (mouseenter)="cardHover()"
+  [ngClass]="{ orientation: isOrientation }"
+>
+  <div class="left">
+    <div fxLayout="row" fxLayoutAlign="space-between baseline" fxLayoutGap="16px">
+      <div fxLayout="column" fxLayoutAlign="end">
+        <span class="structure-name" [ngClass]="{ notClaimed: !isClaimed }">{{ structure.structureName }}</span>
+        <span class="typeStructure">{{ structure.getLabelTypeStructure() }}</span>
       </div>
-      <div
-        fxLayout="row"
-        *ngIf="isOrientation && isSelected"
-        class="selection-button to-select"
-        (click)="cardAddToList(); $event.stopPropagation()"
-      >
-        <app-svg-icon [type]="'ico'" [icon]="'validate'" [iconColor]="'white'"></app-svg-icon>
-        retirer de la liste
-      </div>
-      <div *ngIf="structure.distance">
-        {{ this.formatDistance() }}
+      <div class="distanceStructure" fxLayout="column" fxLayoutAlign="none end">
+        <div *ngIf="!isOrientation">
+          {{ this.structure.address.commune }}
+        </div>
       </div>
     </div>
+    <div
+      fxLayout="row"
+      fxLayoutAlign="none flex-end"
+      fxLayoutGap="7px"
+      *ngIf="structure.hasEquipments() && !isOrientation"
+    >
+      <app-svg-icon
+        *ngFor="let equipement of filterOnlyEquipments(structure.equipmentsAndServices)"
+        [type]="'ico'"
+        [iconColor]="'grey'"
+        [icon]="structure.getEquipmentsIcon(equipement)"
+        [title]="structure.getEquipmentsTitle(equipement)"
+      ></app-svg-icon>
+    </div>
+    <div class="distance" *ngIf="structure.distance">
+      {{ this.formatDistance() }}
+    </div>
   </div>
-  <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="7px" *ngIf="structure.hasEquipments()">
-    <app-svg-icon
-      *ngFor="let equipement of filterOnlyEquipments(structure.equipmentsAndServices)"
-      [type]="'ico'"
-      [iconColor]="'grey'"
-      [icon]="structure.getEquipmentsIcon(equipement)"
-      [title]="structure.getEquipmentsTitle(equipement)"
-    ></app-svg-icon>
+  <div class="actions right" *ngIf="isOrientation">
+    <div
+      fxLayout="row"
+      *ngIf="!isSelected"
+      class="selection-button selected"
+      (click)="cardAddToList(); $event.stopPropagation()"
+    >
+      <app-svg-icon class="add-icon" [type]="'ico'" [icon]="'add'" [iconColor]="'green'"></app-svg-icon>Ajouter
+    </div>
+    <div
+      fxLayout="row"
+      *ngIf="isSelected"
+      class="selection-button to-select"
+      (click)="cardAddToList(); $event.stopPropagation()"
+    >
+      <app-svg-icon class="add-icon" [type]="'ico'" [icon]="'validate'" [iconColor]="'white'"></app-svg-icon>
+      Ajouté
+    </div>
   </div>
 </div>
diff --git a/src/app/structure-list/components/card/card.component.scss b/src/app/structure-list/components/card/card.component.scss
index 7b5fb40ae..220adda58 100644
--- a/src/app/structure-list/components/card/card.component.scss
+++ b/src/app/structure-list/components/card/card.component.scss
@@ -30,9 +30,6 @@
     color: $grey-3;
     width: 50%;
   }
-  &:last-child {
-    border-bottom: none;
-  }
 }
 
 .selection-button {
@@ -40,22 +37,44 @@
   font-weight: bold;
   justify-content: center;
   align-items: center;
-  min-width: 180px;
-  height: 30px;
+  min-width: 120px;
+  height: 40px;
   border-radius: 20px;
-  padding: 3px 10px;
-  margin-bottom: 10px;
 }
 
 .selected {
-  border-style: solid;
-  border-width: 2px;
+  border: solid 1px $grey-3;
   background-color: $white;
-  border-color: $black;
   color: $black;
 }
 .to-select {
-  color: white;
+  color: $white;
   border-style: none;
   background: #47c562;
 }
+
+.distance {
+  color: $grey-3;
+}
+
+.add-icon {
+  color: $green-1;
+}
+
+.orientation {
+  flex-direction: row !important;
+
+  .left {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 70%;
+  }
+
+  .right {
+    margin-top: 6%;
+    @media #{$large-phone} {
+      margin-left: unset;
+    }
+  }
+}
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.scss b/src/app/structure-list/components/structure-details/structure-details.component.scss
index de1fd0ab8..2b5a439e1 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.scss
+++ b/src/app/structure-list/components/structure-details/structure-details.component.scss
@@ -22,13 +22,13 @@ a {
   padding: 0px 24px;
   overflow: auto;
   @media #{$tablet} {
-    width: calc(100% - 2 * 24px);
-    position: inherit;
-    height: 100%;
-    overflow: unset;
     .printButton {
       display: none !important;
     }
+
+    .ico-close {
+      margin-left: 16px;
+    }
   }
   .printButton {
     margin-right: 75px;
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.ts b/src/app/structure-list/components/structure-details/structure-details.component.ts
index 5ccbc64f4..cae5b0b60 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.ts
+++ b/src/app/structure-list/components/structure-details/structure-details.component.ts
@@ -94,7 +94,6 @@ export class StructureDetailsComponent implements OnInit {
           this.socialAndProfessionalsReferentiel = referentiel;
         }
       });
-      this.setServiceCategories();
       if (this.printMode) {
         this.printService.onDataReady();
       }
@@ -250,24 +249,6 @@ export class StructureDetailsComponent implements OnInit {
     }
   }
 
-  public setServiceCategories(): void {
-    this.baseSkills = this.structure.baseSkills.map((skill) =>
-      _.find(this.baseSkillssReferentiel.modules, { id: skill })
-    );
-    this.accessRights = this.structure.accessRight.map((rights) =>
-      _.find(this.accessRightsReferentiel.modules, { id: rights })
-    );
-    this.parentingHelp = this.structure.parentingHelp.map((help) =>
-      _.find(this.parentingHelpsReferentiel.modules, { id: help })
-    );
-    this.socialAndProfessional = this.structure.socialAndProfessional.map((skill) =>
-      _.find(this.socialAndProfessionalsReferentiel.modules, { id: skill })
-    );
-    this.digitalCultureSecurity = this.structure.digitalCultureSecurity.map((skill) =>
-      _.find(this.digitalCultureSecuritysReferentiel.modules, { id: skill })
-    );
-  }
-
   public keepOriginalOrder = (a, b) => a.key;
 
   public isBaseSkills(): boolean {
diff --git a/src/app/structure-list/models/category.model.ts b/src/app/structure-list/models/category.model.ts
index 2aa78bbf3..b130dc133 100644
--- a/src/app/structure-list/models/category.model.ts
+++ b/src/app/structure-list/models/category.model.ts
@@ -2,6 +2,7 @@ import { Module } from './module.model';
 
 export class Category {
   name: string;
+  surname: string;
   id: string;
   modules: Module[];
 
diff --git a/src/app/structure-list/models/filter.model.ts b/src/app/structure-list/models/filter.model.ts
index 9ca536124..25d7ff825 100644
--- a/src/app/structure-list/models/filter.model.ts
+++ b/src/app/structure-list/models/filter.model.ts
@@ -2,10 +2,12 @@ export class Filter {
   name: string;
   value: string;
   text?: string;
+  checked: boolean;
 
   constructor(name: string, value: any, text?: string) {
     this.name = name;
     this.value = value.toString();
     this.text = text;
+    this.checked = true;
   }
 }
diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html
index 1b39ec645..9f2fc1b20 100644
--- a/src/app/structure-list/structure-list.component.html
+++ b/src/app/structure-list/structure-list.component.html
@@ -18,6 +18,7 @@
     [structure]="structure"
     (showDetails)="showDetails($event, filters)"
     (hover)="handleCardHover($event)"
+    class="structure-card"
   ></app-card>
   <p *ngIf="structureList && structureList.length <= 0">Il n'y a aucune réponse correspondant à votre recherche</p>
 </div>
diff --git a/src/app/structure-list/structure-list.component.scss b/src/app/structure-list/structure-list.component.scss
index 1817ffba9..56305e76c 100644
--- a/src/app/structure-list/structure-list.component.scss
+++ b/src/app/structure-list/structure-list.component.scss
@@ -12,11 +12,16 @@
   padding-left: 9px;
   margin: 0 16px;
 }
+
 .listCard {
   overflow-y: auto;
   padding: 0 25px;
 }
 
+::ng-deep .structure-card:last-child .structure {
+  border-bottom: unset !important;
+}
+
 @media print {
   .listCard {
     display: none;
diff --git a/src/app/utils/utils.ts b/src/app/utils/utils.ts
index e37ab99dd..a949f40fd 100644
--- a/src/app/utils/utils.ts
+++ b/src/app/utils/utils.ts
@@ -14,4 +14,15 @@ export class Utils {
       form.get(controlName).setValue(phoneNoSpace.replace(/(?!^)(?=(?:\d{2})+$)/g, ' ')); //NOSONAR
     }
   }
+
+  public modifyPhoneValue(phoneNumber: string): string {
+    // Take length of phone number without spaces.
+    const phoneNoSpace = phoneNumber.replace(/\s/g, '');
+    // Check to refresh every 2 number.
+    if (phoneNoSpace.length % 2 === 0) {
+      // Add space every 2 number
+      return phoneNoSpace.replace(/(?!^)(?=(?:\d{2})+$)/g, ' '); //NOSONAR
+    }
+    return phoneNumber;
+  }
 }
diff --git a/src/assets/form/sprite.svg b/src/assets/form/sprite.svg
index 356b83c16..f159036d9 100644
--- a/src/assets/form/sprite.svg
+++ b/src/assets/form/sprite.svg
@@ -382,5 +382,35 @@
 <path fill-rule="evenodd" clip-rule="evenodd" stroke="none" d="M0 9C0 8.44772 0.447715 8 1 8H21C21.5523 8 22 8.44772 22 9V23C22 23.5523 21.5523 24 21 24H14V25.6L16.3685 26.3106C16.7433 26.423 17 26.768 17 27.1593C17 27.6487 16.6033 28.0454 16.1139 28.0454H5.88612C5.39673 28.0454 5 27.6487 5 27.1593C5 26.768 5.25668 26.423 5.63149 26.3106L8 25.6V24H1C0.447716 24 0 23.5523 0 23V9ZM1 9H21V21H1V9Z" fill="#333333"/>
 </symbol>
 
+<symbol id="grandLyonLaMetropole" width="189" height="43" viewBox="0 0 189 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5084_112181)">
+<path d="M14.6188 24.1594C13.8364 25.1028 12.8909 25.8619 11.8386 26.3915C10.7863 26.921 9.64874 27.2102 8.49363 27.2418C7.33852 27.2733 6.18949 27.0467 5.11498 26.5753C4.04046 26.1039 3.06242 25.3974 2.23911 24.4978C0.0358825 22.0532 1.03355e-07 19.6802 7.15522e-08 13.6244C3.9749e-08 7.56856 0.043059 5.19162 2.23911 2.74699C3.03301 1.87136 3.97472 1.17801 5.01036 0.706612C6.04601 0.235214 7.15526 -0.00498298 8.27465 -0.000236215C12.516 -0.000236237 15.7706 3.08541 16.5278 7.82736L14.6977 7.82736C13.9801 4.14051 11.5436 1.80736 8.28541 1.80736C7.4372 1.79871 6.59591 1.97729 5.81047 2.33273C5.02504 2.68816 4.31114 3.21334 3.71031 3.87773C1.96998 5.81273 1.83722 7.86717 1.83722 13.6244C1.83722 19.3816 1.97357 21.452 3.70314 23.3671C4.30384 24.0316 5.01772 24.5569 5.80318 24.9124C6.58864 25.2678 7.43 25.4463 8.27824 25.4375C9.23644 25.4435 10.1839 25.2138 11.0526 24.765C11.9212 24.3161 12.6894 23.6592 13.3019 22.8415C14.3461 21.4122 14.7551 19.8315 14.7551 17.5382L14.7551 15.1294L8.27465 15.1294L8.27465 13.3218L16.5852 13.3218L16.5852 17.7014C16.5852 20.4885 16.0433 22.4792 14.6188 24.1753" fill="#FF0101"/>
+<path d="M31.9782 2.03265L24.8554 2.03265L24.8554 12.8702L31.9782 12.8702C35.0642 12.8702 37.3033 11.1383 37.3033 7.45144C37.3033 3.76459 35.0642 2.03265 31.9782 2.03265ZM37.2674 27.0204L31.501 14.6778L24.8554 14.6778L24.8554 27.0204L23.0254 27.0204L23.0254 0.237L32.2151 0.236999C36.1622 0.236999 39.1333 2.75728 39.1333 7.42357C39.1333 11.4051 36.9624 14.0089 33.5714 14.65L39.4024 27.0324L37.2674 27.0204Z" fill="#FF0101"/>
+<path d="M51.7832 2.93246L46.7308 18.6991L56.8355 18.6991L51.7832 2.93246ZM59.516 27.0164L57.4133 20.5067L46.1531 20.5067L44.0504 27.0164L42.084 27.0164L50.9686 0.236999L52.5977 0.236999L61.4824 27.0324L59.516 27.0164Z" fill="#FF0101"/>
+<path d="M81.4838 27.0166L67.5468 3.72496L67.5468 27.0166L65.7168 27.0166L65.7168 0.221252L67.5468 0.221252L81.4838 23.4413L81.4838 0.221252L83.3175 0.221252L83.3175 27.0166L81.4838 27.0166Z" fill="#FF0101"/>
+<path d="M103.623 4.09904C102.234 2.50644 100.368 2.03265 98.4342 2.03265L92.5996 2.03265L92.5996 25.2088L98.4306 25.2088C100.365 25.2088 102.231 24.7191 103.619 23.1385C105.55 20.9566 105.413 16.2147 105.413 13.2445C105.413 10.2743 105.546 6.28487 103.619 4.08709L103.623 4.09904ZM104.907 24.5599C103.472 26.1525 101.384 27.0045 98.872 27.0045L90.7695 27.0045L90.7695 0.237L98.8755 0.236999C101.387 0.236999 103.487 1.10496 104.911 2.68561C107.355 5.39302 107.251 9.64524 107.251 13.2604C107.251 16.8756 107.355 21.8604 104.911 24.5718L104.907 24.5599Z" fill="#FF0101"/>
+<path d="M112.846 27.0166L112.846 0.221252L117.561 0.221252L117.561 22.3503L128.516 22.3503L128.516 27.0166L112.846 27.0166Z" fill="#333333"/>
+<path d="M138.852 16.0277L138.852 27.0166L134.173 27.0166L134.173 16.0277L126.914 0.221252L132.035 0.221252L136.545 11.027L140.991 0.221252L146.108 0.221252L138.852 16.0277Z" fill="#333333"/>
+<path d="M159.805 6.09478C159.424 5.62814 158.957 5.25868 158.436 5.0119C157.914 4.76512 157.35 4.64691 156.783 4.66543C156.212 4.64699 155.643 4.76508 155.116 5.01168C154.59 5.25829 154.117 5.62767 153.73 6.09478C152.815 7.22154 152.578 8.48367 152.578 13.6198C152.578 18.7559 152.815 20.014 153.73 21.1448C154.117 21.6117 154.59 21.9809 155.117 22.2275C155.643 22.4741 156.212 22.5923 156.783 22.5741C157.35 22.5924 157.914 22.4741 158.435 22.2273C158.957 21.9805 159.424 21.6112 159.805 21.1448C160.72 20.014 160.992 18.7559 160.992 13.6198C160.992 8.48367 160.723 7.22154 159.805 6.09478ZM163.311 24.3101C161.561 26.1934 159.219 27.2467 156.782 27.2467C154.344 27.2467 152.002 26.1934 150.253 24.3101C147.813 21.6026 147.877 18.2502 147.877 13.6238C147.877 8.99728 147.813 5.6608 150.253 2.93747C152.002 1.05412 154.344 0.000793424 156.782 0.000793411C159.219 0.000793399 161.561 1.05412 163.311 2.93747C165.754 5.64487 165.718 8.9933 165.718 13.6238C165.718 18.2542 165.74 21.6026 163.311 24.3101Z" fill="#333333"/>
+<path d="M184.79 27.0166L175.227 10.5731L175.227 27.0166L170.516 27.0166L170.516 0.221252L174.721 0.221252L184.284 16.6289L184.284 0.221252L188.999 0.221252L188.999 27.0166L184.79 27.0166Z" fill="#333333"/>
+<path d="M160.242 35.4745L160.264 35.4745C160.376 35.2188 160.553 35.0047 160.773 34.8578C160.992 34.7108 161.246 34.6374 161.502 34.6464C162.363 34.6464 163.239 35.0445 163.239 37.6524C163.239 39.1414 163.196 40.8575 161.444 40.8575C161.208 40.8618 160.974 40.7976 160.766 40.6712C160.559 40.5449 160.384 40.3607 160.26 40.1368L160.228 40.1368L160.228 42.9995L159.363 42.9995L159.363 34.7658L160.239 34.7658L160.242 35.4745ZM162.324 37.6524C162.324 36.7526 162.324 35.4387 161.226 35.4387C160.128 35.4387 160.246 37.095 160.246 38.0067C160.246 38.803 160.289 40.0651 161.258 40.0651C162.227 40.0651 162.324 39.2569 162.324 37.6643L162.324 37.6524Z" fill="#333333"/>
+<path d="M99.992 39.8734L99.9705 39.8734C99.8752 40.1805 99.6905 40.4438 99.4457 40.6218C99.2008 40.7998 98.9095 40.8825 98.6177 40.8568C97.4766 40.8568 97.1465 40.0406 97.1465 38.8939C97.1465 37.0824 98.7469 37.0027 99.9705 37.0346C99.992 36.2383 100.003 35.3783 99.0627 35.3783C98.9391 35.3673 98.815 35.3884 98.7001 35.44C98.5853 35.4916 98.4828 35.5722 98.401 35.6754C98.3191 35.7786 98.26 35.9016 98.2285 36.0345C98.197 36.1675 98.1939 36.3068 98.2194 36.4414L97.2864 36.4414C97.3295 35.1036 97.9682 34.6417 99.1093 34.6417C100.494 34.6417 100.857 35.438 100.857 36.4414L100.857 39.316C100.86 39.7921 100.896 40.2672 100.964 40.7374L100.006 40.7374L99.992 39.8734ZM98.022 38.9616C98.022 39.5389 98.2768 40.0605 98.8617 40.0605C99.4466 40.0605 100.057 39.6942 99.9705 37.7632C99.1416 37.7791 98.022 37.6995 98.022 38.9656L98.022 38.9616Z" fill="#333333"/>
+<path d="M115.722 40.7375L115.722 36.5968C115.722 35.9916 115.572 35.4382 114.868 35.4382C114.724 35.4407 114.581 35.4776 114.451 35.5462C114.32 35.6149 114.204 35.7138 114.111 35.8363C113.976 36.1038 113.905 36.4056 113.907 36.7123L113.907 40.7336L113.038 40.7336L113.038 36.0075C113.038 35.6094 113.017 35.1794 112.984 34.7653L113.91 34.7653L113.91 35.5099L113.932 35.5099C114.042 35.2248 114.232 34.9868 114.474 34.8311C114.715 34.6755 114.996 34.6105 115.274 34.6459C115.528 34.6248 115.783 34.6862 116.006 34.8226C116.23 34.959 116.413 35.1646 116.533 35.4143C116.652 35.1581 116.838 34.9478 117.067 34.8107C117.295 34.6736 117.556 34.6162 117.814 34.6459C118.381 34.6459 119.285 34.7892 119.285 36.1947L119.285 40.7375L118.41 40.7375L118.41 36.5968C118.41 35.9916 118.263 35.4382 117.556 35.4382C117.438 35.4175 117.317 35.4268 117.203 35.4654C117.088 35.504 116.983 35.5709 116.896 35.6612C116.684 35.9597 116.579 36.3334 116.598 36.7123L116.598 40.7336L115.722 40.7375Z" fill="#333333"/>
+<path d="M125.656 38.063C125.656 39.7313 126.061 40.0538 126.732 40.0538C127.328 40.0538 127.64 39.5203 127.669 38.9191L128.627 38.9191C128.627 40.2449 127.881 40.8461 126.75 40.8461C125.62 40.8461 124.705 40.4479 124.705 37.8281C124.705 36.0763 124.884 34.6429 126.75 34.6429C128.286 34.6429 128.67 35.5786 128.67 37.5534L128.67 38.063L125.656 38.063ZM127.755 37.3304C127.755 35.5905 127.317 35.3795 126.679 35.3795C126.126 35.3795 125.667 35.6741 125.656 37.3304L127.755 37.3304ZM127.97 32.1943L126.575 33.8626L125.857 33.8626L126.808 32.1943L127.97 32.1943Z" fill="#333333"/>
+<path d="M134.605 34.7658L134.605 33.6191L135.481 33.1812L135.481 34.7737L136.654 34.7737L136.654 35.5063L135.481 35.5063L135.481 39.1613C135.481 39.5595 135.481 40.0253 136.281 40.0253C136.346 40.0253 136.482 40.0014 136.676 39.9775L136.676 40.7221C136.389 40.746 136.098 40.8176 135.811 40.8176C134.979 40.8176 134.605 40.4195 134.605 39.7546L134.605 35.4984L133.723 35.4984L133.723 34.7658L134.605 34.7658Z" fill="#333333"/>
+<path d="M143.185 35.674L143.217 35.674C143.576 34.7623 144.028 34.6588 144.879 34.6588L144.879 35.6661L144.646 35.6302C144.568 35.6157 144.49 35.6077 144.412 35.6063C143.443 35.6063 143.196 36.4226 143.196 37.2268L143.196 40.7544L142.32 40.7544L142.32 34.7822L143.196 34.7822L143.185 35.674Z" fill="#333333"/>
+<path d="M149.852 37.84C149.852 36.0882 150.031 34.6548 151.897 34.6548C153.763 34.6548 153.942 36.1001 153.942 37.84C153.942 40.4797 153.034 40.858 151.897 40.858C150.759 40.858 149.852 40.4797 149.852 37.84ZM153.027 37.4419C153.027 35.8095 152.568 35.4511 151.897 35.4511C151.226 35.4511 150.767 35.8055 150.767 37.4419C150.767 39.3809 150.993 40.0816 151.897 40.0816C152.801 40.0816 153.031 39.3649 153.031 37.426L153.027 37.4419Z" fill="#333333"/>
+<path d="M168.586 37.84C168.586 36.0882 168.765 34.6548 170.631 34.6548C172.497 34.6548 172.68 36.1001 172.68 37.84C172.68 40.4797 171.772 40.858 170.631 40.858C169.49 40.858 168.586 40.4797 168.586 37.84ZM171.762 37.4419C171.762 35.8095 171.302 35.4511 170.631 35.4511C169.96 35.4511 169.501 35.8055 169.501 37.4419C169.501 39.3809 169.723 40.0816 170.631 40.0816C171.539 40.0816 171.765 39.3649 171.765 37.426L171.762 37.4419Z" fill="#333333"/>
+<path d="M179.221 40.7386L178.346 40.7386L178.346 32.1983L179.218 32.1983L179.221 40.7386Z" fill="#333333"/>
+<path d="M185.674 38.0618C185.674 39.7301 186.079 40.0526 186.75 40.0526C187.346 40.0526 187.658 39.519 187.687 38.9178L188.645 38.9178C188.645 40.2437 187.898 40.8449 186.768 40.8449C185.638 40.8449 184.723 40.4467 184.723 37.8269C184.723 36.0751 184.902 34.6417 186.768 34.6417C188.304 34.6417 188.688 35.5774 188.688 37.5522L188.688 38.0618L185.674 38.0618ZM187.773 37.3292C187.773 35.5893 187.335 35.3783 186.696 35.3783C186.144 35.3783 185.684 35.6729 185.674 37.3292L187.773 37.3292Z" fill="#333333"/>
+<path d="M92.1236 40.7386L91.248 40.7386L91.248 32.1983L92.1236 32.1983L92.1236 40.7386Z" fill="#333333"/>
+</g>
+<defs>
+<clipPath id="clip0_5084_112181">
+<rect width="189" height="43" fill="white"/>
+</clipPath>
+</defs>
+</symbol>
+
 </svg>
 
diff --git a/src/assets/ico/sprite.svg b/src/assets/ico/sprite.svg
index e7b918e0f..81f91788f 100644
--- a/src/assets/ico/sprite.svg
+++ b/src/assets/ico/sprite.svg
@@ -292,6 +292,13 @@
 <path fill-rule="evenodd" clip-rule="evenodd" d="M17.3405 17.1848C16.2256 17.652 15.5 18.7428 15.5 19.9517V34.6087L22.5 34.6087V30.1087C22.5 29.2802 23.1716 28.6087 24 28.6087C24.8284 28.6087 25.5 29.2802 25.5 30.1087V34.6087L32.5 34.6087V20.0123C32.5 18.7731 31.7381 17.6614 30.5823 17.2143L29.0555 16.6237C28.6291 16.4588 28.246 16.1986 27.9355 15.863L25.4183 13.1419C24.6451 12.3061 23.3312 12.2834 22.5297 13.0921L19.6982 15.9488C19.4206 16.2289 19.0906 16.4515 18.7269 16.6039L17.3405 17.1848ZM25.5 16.1087C25.5 16.9371 24.8284 17.6087 24 17.6087C23.1716 17.6087 22.5 16.9371 22.5 16.1087C22.5 15.2802 23.1716 14.6087 24 14.6087C24.8284 14.6087 25.5 15.2802 25.5 16.1087ZM18.75 27.544C18.0406 27.6631 17.5 28.2801 17.5 29.0233V30.3587H18.75V27.544ZM17.5 33.5233V30.8587H18.75V33.5233H17.5ZM19.25 33.5233V30.8587H20.5V33.5233H19.25ZM20.5 29.0233V30.3587H19.25V27.544C19.9594 27.6631 20.5 28.2801 20.5 29.0233ZM27.5 29.0233C27.5 28.2801 28.0406 27.6631 28.75 27.544V30.3587H27.5V29.0233ZM27.5 30.8587V33.5233H28.75V30.8587H27.5ZM29.25 30.8587V33.5233H30.5V30.8587H29.25ZM30.5 30.3587V29.0233C30.5 28.2801 29.9594 27.6631 29.25 27.544V30.3587H30.5ZM28.75 19.6087C28.0406 19.7277 27.5 20.3447 27.5 21.0879V22.4233H28.75V19.6087ZM27.5 25.5879V22.9233H28.75V25.5879H27.5ZM29.25 25.5879V22.9233H30.5V25.5879H29.25ZM30.5 21.0879V22.4233H29.25V19.6087C29.9594 19.7277 30.5 20.3447 30.5 21.0879ZM22.5 21.0879C22.5 20.3447 23.0406 19.7277 23.75 19.6087V22.4233H22.5V21.0879ZM22.5 22.9233V25.5879H23.75V22.9233H22.5ZM24.25 22.9233V25.5879H25.5V22.9233H24.25ZM25.5 22.4233V21.0879C25.5 20.3447 24.9594 19.7277 24.25 19.6087V22.4233H25.5ZM18.75 19.6087C18.0406 19.7277 17.5 20.3447 17.5 21.0879V22.4233H18.75V19.6087ZM17.5 25.5879V22.9233H18.75V25.5879H17.5ZM19.25 25.5879V22.9233H20.5V25.5879H19.25ZM20.5 21.0879V22.4233H19.25V19.6087C19.9594 19.7277 20.5 20.3447 20.5 21.0879Z" fill="#BD9E6A"/>
 </symbol>
 
+<symbol id="user-location" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="17" cy="17" r="16.5" fill="#ED3939" fill-opacity="0.15" stroke="white"/>
+<circle cx="17" cy="17" r="6" fill="#ED3939"/>
+<path opacity="0.35" d="M19.625 12.9167C18.1502 12.2215 16.7083 12.0417 15.25 12.9167C16.4166 12.9167 18.7694 14.3782 19.3737 15.1918C20.5 16.7084 20.6016 19.0553 20.2083 19.3334C20.4541 19.4724 21.5026 18.3063 21.6666 17C21.8306 15.6948 21.0998 13.6119 19.625 12.9167Z" fill="white"/>
+</symbol>
+
+
 <symbol id="conseillerFranceService" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
 <path d="M24.1752 4.3111L12 11.3612V25.4094L23.5247 45.3111H24.8255L36.3503 25.4094V11.3612L24.1752 4.3111Z"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M24.1752 2L38.3503 10.2083V25.9467L25.9785 47.3111H22.3718L10 25.9467V10.2082L24.1752 2ZM12 25.4094V11.3612L24.1752 4.31111L36.3503 11.3612V25.4094L24.8255 45.3111H23.5247L12 25.4094Z" fill="white"/>
diff --git a/src/assets/logos/grandLyonLaMetropole.svg b/src/assets/logos/grandLyonLaMetropole.svg
new file mode 100644
index 000000000..9d443ffa2
--- /dev/null
+++ b/src/assets/logos/grandLyonLaMetropole.svg
@@ -0,0 +1,29 @@
+<svg width="189" height="43" viewBox="0 0 189 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5084_112181)">
+<path d="M14.6188 24.1594C13.8364 25.1028 12.8909 25.8619 11.8386 26.3915C10.7863 26.921 9.64874 27.2102 8.49363 27.2418C7.33852 27.2733 6.18949 27.0467 5.11498 26.5753C4.04046 26.1039 3.06242 25.3974 2.23911 24.4978C0.0358825 22.0532 1.03355e-07 19.6802 7.15522e-08 13.6244C3.9749e-08 7.56856 0.043059 5.19162 2.23911 2.74699C3.03301 1.87136 3.97472 1.17801 5.01036 0.706612C6.04601 0.235214 7.15526 -0.00498298 8.27465 -0.000236215C12.516 -0.000236237 15.7706 3.08541 16.5278 7.82736L14.6977 7.82736C13.9801 4.14051 11.5436 1.80736 8.28541 1.80736C7.4372 1.79871 6.59591 1.97729 5.81047 2.33273C5.02504 2.68816 4.31114 3.21334 3.71031 3.87773C1.96998 5.81273 1.83722 7.86717 1.83722 13.6244C1.83722 19.3816 1.97357 21.452 3.70314 23.3671C4.30384 24.0316 5.01772 24.5569 5.80318 24.9124C6.58864 25.2678 7.43 25.4463 8.27824 25.4375C9.23644 25.4435 10.1839 25.2138 11.0526 24.765C11.9212 24.3161 12.6894 23.6592 13.3019 22.8415C14.3461 21.4122 14.7551 19.8315 14.7551 17.5382L14.7551 15.1294L8.27465 15.1294L8.27465 13.3218L16.5852 13.3218L16.5852 17.7014C16.5852 20.4885 16.0433 22.4792 14.6188 24.1753" fill="#FF0101"/>
+<path d="M31.9782 2.03265L24.8554 2.03265L24.8554 12.8702L31.9782 12.8702C35.0642 12.8702 37.3033 11.1383 37.3033 7.45144C37.3033 3.76459 35.0642 2.03265 31.9782 2.03265ZM37.2674 27.0204L31.501 14.6778L24.8554 14.6778L24.8554 27.0204L23.0254 27.0204L23.0254 0.237L32.2151 0.236999C36.1622 0.236999 39.1333 2.75728 39.1333 7.42357C39.1333 11.4051 36.9624 14.0089 33.5714 14.65L39.4024 27.0324L37.2674 27.0204Z" fill="#FF0101"/>
+<path d="M51.7832 2.93246L46.7308 18.6991L56.8355 18.6991L51.7832 2.93246ZM59.516 27.0164L57.4133 20.5067L46.1531 20.5067L44.0504 27.0164L42.084 27.0164L50.9686 0.236999L52.5977 0.236999L61.4824 27.0324L59.516 27.0164Z" fill="#FF0101"/>
+<path d="M81.4838 27.0166L67.5468 3.72496L67.5468 27.0166L65.7168 27.0166L65.7168 0.221252L67.5468 0.221252L81.4838 23.4413L81.4838 0.221252L83.3175 0.221252L83.3175 27.0166L81.4838 27.0166Z" fill="#FF0101"/>
+<path d="M103.623 4.09904C102.234 2.50644 100.368 2.03265 98.4342 2.03265L92.5996 2.03265L92.5996 25.2088L98.4306 25.2088C100.365 25.2088 102.231 24.7191 103.619 23.1385C105.55 20.9566 105.413 16.2147 105.413 13.2445C105.413 10.2743 105.546 6.28487 103.619 4.08709L103.623 4.09904ZM104.907 24.5599C103.472 26.1525 101.384 27.0045 98.872 27.0045L90.7695 27.0045L90.7695 0.237L98.8755 0.236999C101.387 0.236999 103.487 1.10496 104.911 2.68561C107.355 5.39302 107.251 9.64524 107.251 13.2604C107.251 16.8756 107.355 21.8604 104.911 24.5718L104.907 24.5599Z" fill="#FF0101"/>
+<path d="M112.846 27.0166L112.846 0.221252L117.561 0.221252L117.561 22.3503L128.516 22.3503L128.516 27.0166L112.846 27.0166Z" fill="#333333"/>
+<path d="M138.852 16.0277L138.852 27.0166L134.173 27.0166L134.173 16.0277L126.914 0.221252L132.035 0.221252L136.545 11.027L140.991 0.221252L146.108 0.221252L138.852 16.0277Z" fill="#333333"/>
+<path d="M159.805 6.09478C159.424 5.62814 158.957 5.25868 158.436 5.0119C157.914 4.76512 157.35 4.64691 156.783 4.66543C156.212 4.64699 155.643 4.76508 155.116 5.01168C154.59 5.25829 154.117 5.62767 153.73 6.09478C152.815 7.22154 152.578 8.48367 152.578 13.6198C152.578 18.7559 152.815 20.014 153.73 21.1448C154.117 21.6117 154.59 21.9809 155.117 22.2275C155.643 22.4741 156.212 22.5923 156.783 22.5741C157.35 22.5924 157.914 22.4741 158.435 22.2273C158.957 21.9805 159.424 21.6112 159.805 21.1448C160.72 20.014 160.992 18.7559 160.992 13.6198C160.992 8.48367 160.723 7.22154 159.805 6.09478ZM163.311 24.3101C161.561 26.1934 159.219 27.2467 156.782 27.2467C154.344 27.2467 152.002 26.1934 150.253 24.3101C147.813 21.6026 147.877 18.2502 147.877 13.6238C147.877 8.99728 147.813 5.6608 150.253 2.93747C152.002 1.05412 154.344 0.000793424 156.782 0.000793411C159.219 0.000793399 161.561 1.05412 163.311 2.93747C165.754 5.64487 165.718 8.9933 165.718 13.6238C165.718 18.2542 165.74 21.6026 163.311 24.3101Z" fill="#333333"/>
+<path d="M184.79 27.0166L175.227 10.5731L175.227 27.0166L170.516 27.0166L170.516 0.221252L174.721 0.221252L184.284 16.6289L184.284 0.221252L188.999 0.221252L188.999 27.0166L184.79 27.0166Z" fill="#333333"/>
+<path d="M160.242 35.4745L160.264 35.4745C160.376 35.2188 160.553 35.0047 160.773 34.8578C160.992 34.7108 161.246 34.6374 161.502 34.6464C162.363 34.6464 163.239 35.0445 163.239 37.6524C163.239 39.1414 163.196 40.8575 161.444 40.8575C161.208 40.8618 160.974 40.7976 160.766 40.6712C160.559 40.5449 160.384 40.3607 160.26 40.1368L160.228 40.1368L160.228 42.9995L159.363 42.9995L159.363 34.7658L160.239 34.7658L160.242 35.4745ZM162.324 37.6524C162.324 36.7526 162.324 35.4387 161.226 35.4387C160.128 35.4387 160.246 37.095 160.246 38.0067C160.246 38.803 160.289 40.0651 161.258 40.0651C162.227 40.0651 162.324 39.2569 162.324 37.6643L162.324 37.6524Z" fill="#333333"/>
+<path d="M99.992 39.8734L99.9705 39.8734C99.8752 40.1805 99.6905 40.4438 99.4457 40.6218C99.2008 40.7998 98.9095 40.8825 98.6177 40.8568C97.4766 40.8568 97.1465 40.0406 97.1465 38.8939C97.1465 37.0824 98.7469 37.0027 99.9705 37.0346C99.992 36.2383 100.003 35.3783 99.0627 35.3783C98.9391 35.3673 98.815 35.3884 98.7001 35.44C98.5853 35.4916 98.4828 35.5722 98.401 35.6754C98.3191 35.7786 98.26 35.9016 98.2285 36.0345C98.197 36.1675 98.1939 36.3068 98.2194 36.4414L97.2864 36.4414C97.3295 35.1036 97.9682 34.6417 99.1093 34.6417C100.494 34.6417 100.857 35.438 100.857 36.4414L100.857 39.316C100.86 39.7921 100.896 40.2672 100.964 40.7374L100.006 40.7374L99.992 39.8734ZM98.022 38.9616C98.022 39.5389 98.2768 40.0605 98.8617 40.0605C99.4466 40.0605 100.057 39.6942 99.9705 37.7632C99.1416 37.7791 98.022 37.6995 98.022 38.9656L98.022 38.9616Z" fill="#333333"/>
+<path d="M115.722 40.7375L115.722 36.5968C115.722 35.9916 115.572 35.4382 114.868 35.4382C114.724 35.4407 114.581 35.4776 114.451 35.5462C114.32 35.6149 114.204 35.7138 114.111 35.8363C113.976 36.1038 113.905 36.4056 113.907 36.7123L113.907 40.7336L113.038 40.7336L113.038 36.0075C113.038 35.6094 113.017 35.1794 112.984 34.7653L113.91 34.7653L113.91 35.5099L113.932 35.5099C114.042 35.2248 114.232 34.9868 114.474 34.8311C114.715 34.6755 114.996 34.6105 115.274 34.6459C115.528 34.6248 115.783 34.6862 116.006 34.8226C116.23 34.959 116.413 35.1646 116.533 35.4143C116.652 35.1581 116.838 34.9478 117.067 34.8107C117.295 34.6736 117.556 34.6162 117.814 34.6459C118.381 34.6459 119.285 34.7892 119.285 36.1947L119.285 40.7375L118.41 40.7375L118.41 36.5968C118.41 35.9916 118.263 35.4382 117.556 35.4382C117.438 35.4175 117.317 35.4268 117.203 35.4654C117.088 35.504 116.983 35.5709 116.896 35.6612C116.684 35.9597 116.579 36.3334 116.598 36.7123L116.598 40.7336L115.722 40.7375Z" fill="#333333"/>
+<path d="M125.656 38.063C125.656 39.7313 126.061 40.0538 126.732 40.0538C127.328 40.0538 127.64 39.5203 127.669 38.9191L128.627 38.9191C128.627 40.2449 127.881 40.8461 126.75 40.8461C125.62 40.8461 124.705 40.4479 124.705 37.8281C124.705 36.0763 124.884 34.6429 126.75 34.6429C128.286 34.6429 128.67 35.5786 128.67 37.5534L128.67 38.063L125.656 38.063ZM127.755 37.3304C127.755 35.5905 127.317 35.3795 126.679 35.3795C126.126 35.3795 125.667 35.6741 125.656 37.3304L127.755 37.3304ZM127.97 32.1943L126.575 33.8626L125.857 33.8626L126.808 32.1943L127.97 32.1943Z" fill="#333333"/>
+<path d="M134.605 34.7658L134.605 33.6191L135.481 33.1812L135.481 34.7737L136.654 34.7737L136.654 35.5063L135.481 35.5063L135.481 39.1613C135.481 39.5595 135.481 40.0253 136.281 40.0253C136.346 40.0253 136.482 40.0014 136.676 39.9775L136.676 40.7221C136.389 40.746 136.098 40.8176 135.811 40.8176C134.979 40.8176 134.605 40.4195 134.605 39.7546L134.605 35.4984L133.723 35.4984L133.723 34.7658L134.605 34.7658Z" fill="#333333"/>
+<path d="M143.185 35.674L143.217 35.674C143.576 34.7623 144.028 34.6588 144.879 34.6588L144.879 35.6661L144.646 35.6302C144.568 35.6157 144.49 35.6077 144.412 35.6063C143.443 35.6063 143.196 36.4226 143.196 37.2268L143.196 40.7544L142.32 40.7544L142.32 34.7822L143.196 34.7822L143.185 35.674Z" fill="#333333"/>
+<path d="M149.852 37.84C149.852 36.0882 150.031 34.6548 151.897 34.6548C153.763 34.6548 153.942 36.1001 153.942 37.84C153.942 40.4797 153.034 40.858 151.897 40.858C150.759 40.858 149.852 40.4797 149.852 37.84ZM153.027 37.4419C153.027 35.8095 152.568 35.4511 151.897 35.4511C151.226 35.4511 150.767 35.8055 150.767 37.4419C150.767 39.3809 150.993 40.0816 151.897 40.0816C152.801 40.0816 153.031 39.3649 153.031 37.426L153.027 37.4419Z" fill="#333333"/>
+<path d="M168.586 37.84C168.586 36.0882 168.765 34.6548 170.631 34.6548C172.497 34.6548 172.68 36.1001 172.68 37.84C172.68 40.4797 171.772 40.858 170.631 40.858C169.49 40.858 168.586 40.4797 168.586 37.84ZM171.762 37.4419C171.762 35.8095 171.302 35.4511 170.631 35.4511C169.96 35.4511 169.501 35.8055 169.501 37.4419C169.501 39.3809 169.723 40.0816 170.631 40.0816C171.539 40.0816 171.765 39.3649 171.765 37.426L171.762 37.4419Z" fill="#333333"/>
+<path d="M179.221 40.7386L178.346 40.7386L178.346 32.1983L179.218 32.1983L179.221 40.7386Z" fill="#333333"/>
+<path d="M185.674 38.0618C185.674 39.7301 186.079 40.0526 186.75 40.0526C187.346 40.0526 187.658 39.519 187.687 38.9178L188.645 38.9178C188.645 40.2437 187.898 40.8449 186.768 40.8449C185.638 40.8449 184.723 40.4467 184.723 37.8269C184.723 36.0751 184.902 34.6417 186.768 34.6417C188.304 34.6417 188.688 35.5774 188.688 37.5522L188.688 38.0618L185.674 38.0618ZM187.773 37.3292C187.773 35.5893 187.335 35.3783 186.696 35.3783C186.144 35.3783 185.684 35.6729 185.674 37.3292L187.773 37.3292Z" fill="#333333"/>
+<path d="M92.1236 40.7386L91.248 40.7386L91.248 32.1983L92.1236 32.1983L92.1236 40.7386Z" fill="#333333"/>
+</g>
+<defs>
+<clipPath id="clip0_5084_112181">
+<rect width="189" height="43" fill="white"/>
+</clipPath>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss
index 7b72d6a99..ad54ee550 100644
--- a/src/assets/scss/_color.scss
+++ b/src/assets/scss/_color.scss
@@ -1,6 +1,8 @@
 //TODO: Clean colors when design is properly setup
 $black: #000000;
 $white: #ffff;
+$white-1: #e5e5e5;
+$white-2: #cacccb;
 /*  GREYS  */
 $grey: #b4bbbf;
 $grey-1: #333333;
diff --git a/src/assets/scss/_icons.scss b/src/assets/scss/_icons.scss
index c93d6aa78..4cc84a175 100644
--- a/src/assets/scss/_icons.scss
+++ b/src/assets/scss/_icons.scss
@@ -61,7 +61,7 @@
     width: 7px;
     height: 7px;
     border-radius: 4px;
-    background-color: white;
+    background-color: $white;
   }
 }
 .ico-dot-available {
@@ -589,3 +589,125 @@
     bottom: -6px;
   }
 }
+
+.ico-gg-eye-alt {
+  position: relative;
+  display: block;
+  transform: scale(var(--ggs, 1));
+  width: 24px;
+  height: 18px;
+  border-bottom-right-radius: 100px;
+  border-bottom-left-radius: 100px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.ico-gg-eye-alt::after,
+.ico-gg-eye-alt::before {
+  content: '';
+  display: block;
+  border-radius: 100px;
+  position: absolute;
+  box-sizing: border-box;
+}
+.ico-gg-eye-alt::after {
+  top: 2px;
+  box-shadow: inset 0 -8px 0 2px $grey-3, inset 0 0 0 2px $grey-3;
+  width: 24px;
+  height: 24px;
+}
+.ico-gg-eye-alt::before {
+  width: 8px;
+  height: 8px;
+  border: 2px solid $grey-3;
+  bottom: 4px;
+  left: 8px;
+  background-color: $grey-3;
+}
+
+.ico-gg-add {
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  color: $green-1;
+  width: 32px;
+  height: 32px;
+}
+.ico-gg-add::after,
+.ico-gg-add::before {
+  content: '';
+  display: block;
+  box-sizing: border-box;
+  position: absolute;
+  width: 14px;
+  height: 2px;
+  background: currentColor;
+  border-radius: 5px;
+  top: 8px;
+  left: 0px;
+}
+.ico-gg-add::after {
+  width: 2px;
+  height: 14px;
+  top: 2px;
+  left: 6px;
+}
+
+.gg-eye-alt {
+  position: relative;
+  display: block;
+  width: 18px;
+  height: 12px;
+  border-bottom-right-radius: 100px;
+  border-bottom-left-radius: 100px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.gg-eye-alt::after,
+.gg-eye-alt::before {
+  content: '';
+  display: block;
+  border-radius: 100px;
+  position: absolute;
+  box-sizing: border-box;
+}
+.gg-eye-alt::after {
+  top: 2px;
+  box-shadow: inset 0 -8px 0 2px, inset 0 0 0 2px;
+  width: 18px;
+  height: 18px;
+}
+.gg-eye-alt::before {
+  width: 2px;
+  height: 2px;
+  border: 2px solid black;
+  bottom: 3px;
+  left: 7px;
+  background-color: black;
+}
+
+.ico-gg-check {
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  transform: scale(var(--ggs, 1));
+  width: 22px;
+  height: 22px;
+  border: 1px solid transparent;
+  border-radius: 100px;
+  color: $white;
+}
+.ico-gg-check::after {
+  content: '';
+  display: block;
+  box-sizing: border-box;
+  position: absolute;
+  left: 5px;
+  top: -3px;
+  width: 7px;
+  height: 12px;
+  border-width: 0 2px 2px 0;
+  border-style: solid;
+  transform-origin: bottom left;
+  transform: rotate(45deg);
+  color: $white;
+}
-- 
GitLab


From 2b5a4490f8287d045be49481ab475027cf596219 Mon Sep 17 00:00:00 2001
From: Augustin LECONTE <["ext.sopra.aleconte@grandlyon.com"]>
Date: Fri, 18 Feb 2022 08:01:54 +0000
Subject: [PATCH 19/27] fix(orientation-form): fix formation list

---
 src/app/form/orientation-form/orientation-form.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/form/orientation-form/orientation-form.component.html b/src/app/form/orientation-form/orientation-form.component.html
index 04a8a0500..2b0d6d985 100644
--- a/src/app/form/orientation-form/orientation-form.component.html
+++ b/src/app/form/orientation-form/orientation-form.component.html
@@ -122,7 +122,7 @@
           </div>
           <div *ngIf="showFormation" class="tags">
             <button
-              *ngFor="let choice of formations"
+              *ngFor="let choice of selectedFormations"
               (click)="updateChoice(choice.id, 'formation')"
               [ngClass]="{ selectedChoice: isInArray(choice.id, 'formation') }"
             >
-- 
GitLab


From 9d0be47f1e6fe7a4cd684d6c2b65299bc6ccb0f0 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Mon, 21 Feb 2022 10:44:22 +0100
Subject: [PATCH 20/27] fix(news): tag refactor for 'a-la-une' tag. This tag is
 no longer display if there is another tag on the same post.

---
 .../post-card/post-card.component.html        |  8 +-----
 .../post-card/post-card.component.scss        |  8 +-----
 .../post-card/post-card.component.ts          |  4 +--
 .../post-details/post-details.component.html  |  7 +-----
 .../post-details/post-details.component.scss  |  7 ------
 .../post-list/post-list.component.ts          | 10 ++++++--
 .../post-tag/post-tag.component.html          |  8 ++++++
 .../post-tag/post-tag.component.scss          | 10 ++++++++
 .../post-tag/post-tag.component.spec.ts       | 25 +++++++++++++++++++
 .../components/post-tag/post-tag.component.ts | 19 ++++++++++++++
 src/app/post/post.module.ts                   |  2 ++
 11 files changed, 77 insertions(+), 31 deletions(-)
 create mode 100644 src/app/post/components/post-tag/post-tag.component.html
 create mode 100644 src/app/post/components/post-tag/post-tag.component.scss
 create mode 100644 src/app/post/components/post-tag/post-tag.component.spec.ts
 create mode 100644 src/app/post/components/post-tag/post-tag.component.ts

diff --git a/src/app/post/components/post-card/post-card.component.html b/src/app/post/components/post-card/post-card.component.html
index 67b2a52c3..ab4f7654d 100644
--- a/src/app/post/components/post-card/post-card.component.html
+++ b/src/app/post/components/post-card/post-card.component.html
@@ -17,13 +17,7 @@
     />
   </div>
   <div fxLayout="column" fxLayoutGap="8px" fxLayoutAlign="center">
-    <div fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px" *ngIf="post.tags[0]">
-      <span>{{ post.tags[0].name }}</span>
-    </div>
-    <div fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px" *ngIf="!post.tags[0]">
-      <span>info</span>
-    </div>
-
+    <app-post-tag [post]="post"></app-post-tag>
     <div fxLayout="row" class="title">
       {{ post.title }}
     </div>
diff --git a/src/app/post/components/post-card/post-card.component.scss b/src/app/post/components/post-card/post-card.component.scss
index 68ff9e687..7eb738f67 100644
--- a/src/app/post/components/post-card/post-card.component.scss
+++ b/src/app/post/components/post-card/post-card.component.scss
@@ -15,13 +15,7 @@
       }
     }
   }
-  .tag {
-    @include cn-bold-16;
-    text-transform: uppercase;
-    color: $secondary-color;
-    fill: $secondary-color;
-    stroke: $secondary-color;
-  }
+
   .title {
     @media #{$large-phone} {
       @include cn-bold-18;
diff --git a/src/app/post/components/post-card/post-card.component.ts b/src/app/post/components/post-card/post-card.component.ts
index 36ce0ea85..fb67224b2 100644
--- a/src/app/post/components/post-card/post-card.component.ts
+++ b/src/app/post/components/post-card/post-card.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { Router } from '@angular/router';
 import { TagEnum } from '../../enum/tag.enum';
 import { Post } from '../../models/post.model';
@@ -19,6 +19,6 @@ export class PostCardComponent {
   }
 
   public isAppelAProjet(): boolean {
-    return this.post.tags[0].slug === this.tagEnum.appels;
+    return this.post.tags[0] && this.post.tags[0].slug === this.tagEnum.appels;
   }
 }
diff --git a/src/app/post/components/post-details/post-details.component.html b/src/app/post/components/post-details/post-details.component.html
index 685c3b626..f46dad622 100644
--- a/src/app/post/components/post-details/post-details.component.html
+++ b/src/app/post/components/post-details/post-details.component.html
@@ -9,12 +9,7 @@
   </div>
   <div class="gh-canvas">
     <div fxLayout="column" fxLayoutAlign="center none">
-      <div *ngIf="post.tags[0]" fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px">
-        <span>{{ post.tags[0].name }}</span>
-      </div>
-      <div *ngIf="!post.tags[0]" fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px">
-        <span>Infos</span>
-      </div>
+      <app-post-tag [post]="post"></app-post-tag>
       <div fxLayout="row" class="title">{{ post.title }}</div>
       <div fxLayout="column" class="informations">
         <div>{{ post.author }}</div>
diff --git a/src/app/post/components/post-details/post-details.component.scss b/src/app/post/components/post-details/post-details.component.scss
index b2d99bb65..56d471bb1 100644
--- a/src/app/post/components/post-details/post-details.component.scss
+++ b/src/app/post/components/post-details/post-details.component.scss
@@ -14,13 +14,6 @@
   }
 }
 
-.tag {
-  @include cn-bold-16;
-  text-transform: uppercase;
-  color: $secondary-color;
-  fill: $secondary-color;
-  stroke: $secondary-color;
-}
 .informations {
   @include cn-regular-16;
   div:nth-child(2n) {
diff --git a/src/app/post/components/post-list/post-list.component.ts b/src/app/post/components/post-list/post-list.component.ts
index e0e7f0e46..38cad37da 100644
--- a/src/app/post/components/post-list/post-list.component.ts
+++ b/src/app/post/components/post-list/post-list.component.ts
@@ -68,14 +68,20 @@ export class PostListComponent implements OnInit {
     });
   }
 
+  /**
+   * Fill articles list with headline handling
+   * @param news {PostWithMeta}
+   */
   public fillArticles(news: PostWithMeta): void {
     this.setNews(news);
-    const headLineTag = this.allPosts.filter((post: Post) => post.tags.some((tag) => tag.slug === TagEnum.aLaUne));
+    const headLineTag = this.allPosts.filter((post: Post) =>
+      post.tags.some((tag) => tag && tag.slug === TagEnum.aLaUne)
+    );
 
     const headIndex = this.allPosts.findIndex((post) => post.id === headLineTag[0].id);
     this.allPosts.splice(headIndex, 1);
 
-    this.allPosts = [...headLineTag, ...this.allPosts];
+    this.allPosts = [...headLineTag, ..._.difference(this.allPosts, headLineTag)];
   }
 
   public getPosts(filters?: Tag[]): void {
diff --git a/src/app/post/components/post-tag/post-tag.component.html b/src/app/post/components/post-tag/post-tag.component.html
new file mode 100644
index 000000000..d25174f35
--- /dev/null
+++ b/src/app/post/components/post-tag/post-tag.component.html
@@ -0,0 +1,8 @@
+<div>
+  <div fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px" *ngIf="post.tags[0]">
+    <span>{{ displayTag(post) }}</span>
+  </div>
+  <div fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px" *ngIf="!post.tags[0]">
+    <span>infos</span>
+  </div>
+</div>
diff --git a/src/app/post/components/post-tag/post-tag.component.scss b/src/app/post/components/post-tag/post-tag.component.scss
new file mode 100644
index 000000000..6ea1a32bd
--- /dev/null
+++ b/src/app/post/components/post-tag/post-tag.component.scss
@@ -0,0 +1,10 @@
+@import '../../../../assets/scss/typography';
+@import '../../../../assets/scss/color';
+
+.tag {
+  @include cn-bold-16;
+  text-transform: uppercase;
+  color: $secondary-color;
+  fill: $secondary-color;
+  stroke: $secondary-color;
+}
diff --git a/src/app/post/components/post-tag/post-tag.component.spec.ts b/src/app/post/components/post-tag/post-tag.component.spec.ts
new file mode 100644
index 000000000..0b1c7b465
--- /dev/null
+++ b/src/app/post/components/post-tag/post-tag.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PostTagComponent } from './post-tag.component';
+
+describe('PostTagComponent', () => {
+  let component: PostTagComponent;
+  let fixture: ComponentFixture<PostTagComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PostTagComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PostTagComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/post/components/post-tag/post-tag.component.ts b/src/app/post/components/post-tag/post-tag.component.ts
new file mode 100644
index 000000000..c39b2fb6f
--- /dev/null
+++ b/src/app/post/components/post-tag/post-tag.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { TagEnum } from '../../enum/tag.enum';
+import { Post } from '../../models/post.model';
+
+@Component({
+  selector: 'app-post-tag',
+  templateUrl: './post-tag.component.html',
+  styleUrls: ['./post-tag.component.scss'],
+})
+export class PostTagComponent {
+  @Input() post: Post;
+
+  public displayTag(post: Post): string {
+    if (post.tags.length > 1) {
+      return post.tags.filter((tag) => tag.slug !== TagEnum.aLaUne)[0].name;
+    }
+    return post.tags[0].name;
+  }
+}
diff --git a/src/app/post/post.module.ts b/src/app/post/post.module.ts
index a4f190458..984af52e1 100644
--- a/src/app/post/post.module.ts
+++ b/src/app/post/post.module.ts
@@ -10,6 +10,7 @@ import { PostCardComponent } from './components/post-card/post-card.component';
 import { PostPublishComponent } from './components/post-publish/post-publish.component';
 import { PostModalFiltersComponent } from './components/post-modal-filters/post-modal-filters.component';
 import { TagResolver } from './resolvers/tags.resolver';
+import { PostTagComponent } from './components/post-tag/post-tag.component';
 
 @NgModule({
   declarations: [
@@ -20,6 +21,7 @@ import { TagResolver } from './resolvers/tags.resolver';
     PostCardComponent,
     PostModalFiltersComponent,
     PostPublishComponent,
+    PostTagComponent,
   ],
   imports: [CommonModule, PostRoutingModule, SharedModule],
   providers: [TagResolver],
-- 
GitLab


From 8fa492345262bdcea440010d467d0a0179d49ae3 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Mon, 21 Feb 2022 14:36:24 +0100
Subject: [PATCH 21/27] fix(news): issue in responsive, width of post-container
 is now fixed

---
 src/app/post/components/post-list/post-list.component.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/post/components/post-list/post-list.component.scss b/src/app/post/components/post-list/post-list.component.scss
index 805a63eed..6e13a5817 100644
--- a/src/app/post/components/post-list/post-list.component.scss
+++ b/src/app/post/components/post-list/post-list.component.scss
@@ -130,6 +130,7 @@ h2 {
     grid-template-columns: repeat(auto-fill, minmax(7%, 1fr));
     grid-column-gap: 1%;
     grid-row-gap: 40px;
+    max-width: 1080px;
     .col:nth-child(6n + 1) {
       @include big-container;
       @media #{$news-max} {
-- 
GitLab


From 335ba0af1e97893ba2f3107366598eb67a9fd1fd Mon Sep 17 00:00:00 2001
From: Augustin LECONTE <["ext.sopra.aleconte@grandlyon.com"]>
Date: Mon, 21 Feb 2022 14:02:48 +0000
Subject: [PATCH 22/27] feat(print-orientation): graphic update for the print
 at the end of the orientation

---
 src/app/app.module.ts                         |  2 +
 .../footer-form/footer-form.component.html    | 24 ++++++++++--
 .../footer-form/footer-form.component.scss    | 38 +++++++++++++++++--
 .../form/footer-form/footer-form.component.ts |  8 ++++
 .../orientation-modal.component.html          | 30 +++++++++++++++
 .../orientation-modal.component.scss          | 27 +++++++++++++
 .../orientation-modal.component.spec.ts       | 26 +++++++++++++
 .../orientation-modal.component.ts            | 20 ++++++++++
 .../structure-detail-print.component.html     |  2 +-
 .../structure-detail-print.component.scss     |  1 -
 .../structure-list-print.component.html       | 21 +++++-----
 .../structure-list-print.component.scss       | 37 ++++++++++++++++--
 .../structure-list-print.component.ts         |  9 +----
 .../structure-print-header.component.html     | 34 ++++++++---------
 .../structure-print-header.component.scss     | 19 ++++++++--
 .../orientation-form.component.html           | 13 ++++++-
 .../orientation-form.component.scss           | 13 +++++++
 .../orientation-form.component.ts             | 12 ++++++
 src/app/map/components/map.component.scss     |  2 +-
 src/assets/ico/flag.svg                       | 16 ++++++++
 20 files changed, 302 insertions(+), 52 deletions(-)
 create mode 100644 src/app/form/orientation-form/component/orientation-modal/orientation-modal.component.html
 create mode 100644 src/app/form/orientation-form/component/orientation-modal/orientation-modal.component.scss
 create mode 100644 src/app/form/orientation-form/component/orientation-modal/orientation-modal.component.spec.ts
 create mode 100644 src/app/form/orientation-form/component/orientation-modal/orientation-modal.component.ts
 create mode 100644 src/assets/ico/flag.svg

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index c07a408ad..eb67d95d7 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -39,6 +39,7 @@ import { OrientationFormComponent } from './form/orientation-form/orientation-fo
 import { StructureDetailPrintComponent } from './form/orientation-form/component/structure-detail-print/structure-detail-print.component';
 import { StructureListPrintComponent } from './form/orientation-form/component/structure-list-print/structure-list-print.component';
 import { StructurePrintHeaderComponent } from './form/orientation-form/component/structure-print-header/structure-print-header.component';
+import { OrientationComponent } from './form/orientation-form/component/orientation-modal/orientation-modal.component';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
 import { StructureResolver } from './resolvers/structure.resolver';
@@ -71,6 +72,7 @@ import { UpdateService } from './services/update.service';
     StructureDetailPrintComponent,
     StructureListPrintComponent,
     StructurePrintHeaderComponent,
+    OrientationComponent,
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/form/footer-form/footer-form.component.html b/src/app/form/footer-form/footer-form.component.html
index 84e1517f2..71e448b1d 100644
--- a/src/app/form/footer-form/footer-form.component.html
+++ b/src/app/form/footer-form/footer-form.component.html
@@ -1,4 +1,4 @@
-<div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center">
+<div fxLayout="row" [ngClass]="{ column: hasFinishButton() }" fxLayoutGap="10px" fxLayoutAlign="center center">
   <button *ngIf="displayPreviousButton" class="btn-primary small previous" (click)="goToPreviousPage()">
     <div class="rowBtn" fxLayout="row" fxLayoutAlign="center center">
       <svg class="chevronLeft" aria-hidden="true">
@@ -7,6 +7,16 @@
       {{ btnName[0] }}
     </div>
   </button>
+
+  <button *ngIf="hasFinishButton()" class="btn-primary small previous" (click)="finishedModal()">
+    <div class="rowBtn" fxLayout="row" fxLayoutAlign="center center">
+      <svg class="flag" aria-hidden="true">
+        <use [attr.xlink:href]="'/assets/ico/flag.svg'"></use>
+      </svg>
+      {{ btnName[2] }}
+    </div>
+  </button>
+
   <button
     class="btn-primary small next"
     (click)="goToNextPage()"
@@ -14,9 +24,15 @@
     type="submit"
     [ngClass]="{ invalid: !isValid }"
   >
-    <div class="rowBtn" fxLayout="row" fxLayoutAlign="center center">
-      {{ btnName[1]
-      }}<svg class="chevronRight" aria-hidden="true">
+    <div *ngIf="btnName[1] == 'Imprimer'" fxLayout="row" fxLayoutAlign="center center">
+      <svg class="print" aria-hidden="true">
+        <use [attr.xlink:href]="'/assets/ico/print.svg'"></use>
+      </svg>
+      {{ btnName[1] }}
+    </div>
+    <div *ngIf="btnName[1] == 'Suivant'" class="rowBtn" fxLayout="row" fxLayoutAlign="center center">
+      {{ btnName[1] }}
+      <svg class="chevronRight" aria-hidden="true">
         <use [attr.xlink:href]="'assets/form/sprite.svg#chevronRight'"></use>
       </svg>
     </div>
diff --git a/src/app/form/footer-form/footer-form.component.scss b/src/app/form/footer-form/footer-form.component.scss
index 61ae2b385..1fb5bf381 100644
--- a/src/app/form/footer-form/footer-form.component.scss
+++ b/src/app/form/footer-form/footer-form.component.scss
@@ -1,5 +1,6 @@
 @import '../../../assets/scss/color';
 @import '../../../assets/scss/typography';
+@import '../../../assets/scss/breakpoint';
 
 .btn-primary {
   &.previous {
@@ -7,13 +8,28 @@
     color: $grey-2;
     border: solid $grey-4 1px;
   }
+  &.invalid {
+    opacity: 0.4;
+  }
+
+  &:focus .print {
+    background-color: $secondary-color;
+  }
+
   &.next {
     .rowBtn {
       margin-left: 24px;
     }
   }
-  &.invalid {
-    opacity: 0.4;
+}
+
+.column {
+  @media #{$phone} {
+    flex-direction: column !important;
+    button {
+      margin-bottom: 10px !important;
+      margin-right: 0 !important;
+    }
   }
 }
 
@@ -26,6 +42,22 @@
 .chevronRight {
   height: 24px;
   width: 24px;
-  // stroke: inherit;
   margin-left: 10px;
 }
+
+.print {
+  stroke: $white;
+  width: 20px;
+  height: 20px;
+  padding-right: 20px;
+  background-color: $white;
+  mask: url(/assets/ico/print.svg) no-repeat center;
+}
+.flag {
+  padding-right: 10px;
+  stroke: $black;
+  width: 20px;
+  height: 20px;
+  background-color: $grey-1;
+  mask: url(/assets/ico/flag.svg) no-repeat center;
+}
diff --git a/src/app/form/footer-form/footer-form.component.ts b/src/app/form/footer-form/footer-form.component.ts
index 12736e3ac..3a0fa9237 100644
--- a/src/app/form/footer-form/footer-form.component.ts
+++ b/src/app/form/footer-form/footer-form.component.ts
@@ -11,6 +11,7 @@ export class FooterFormComponent {
   @Input() displayPreviousButton: boolean = true;
   @Output() nextPage = new EventEmitter<any>();
   @Output() previousPage = new EventEmitter<any>();
+  @Output() endPage = new EventEmitter<any>();
 
   public goToNextPage(): void {
     this.nextPage.emit();
@@ -19,4 +20,11 @@ export class FooterFormComponent {
   public goToPreviousPage(): void {
     this.previousPage.emit();
   }
+
+  public hasFinishButton(): boolean {
+    return this.btnName.length == 3;
+  }
+  public finishedModal(): void {
+    this.endPage.emit();
+  }
 }
diff --git a/src/app/form/orientation-form/component/orientation-modal/orientation-modal.component.html b/src/app/form/orientation-form/component/orientation-modal/orientation-modal.component.html
new file mode 100644
index 000000000..0e8de2f85
--- /dev/null
+++ b/src/app/form/orientation-form/component/orientation-modal/orientation-modal.component.html
@@ -0,0 +1,30 @@
+<div *ngIf="openned" class="modalBackground">
+  <div class="modal">
+    <div
+      (clickOutside)="closeModal(false)"
+      class="contentModal"
+      fxLayout="row-reverse"
+      fxLayoutAlign="space-around start"
+    >
+      <div class="ico-close">
+        <div class="ico-close-wrapper">
+          <div (click)="closeModal()" class="ico-close-details"></div>
+        </div>
+      </div>
+
+      <div class="modalContent">
+        <h3 fxLayoutAlign="center center">Souhaitez-vous terminer cette orientation ?</h3>
+
+        <div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center">
+          <button type="button" class="btn confirm" (click)="goToPreviousPage()">Revenir aux résultats</button>
+          <button class="btn-primary small previous" routerLink="../home">
+            <div class="rowBtn" fxLayout="row" fxLayoutAlign="center center">
+              <img class="flag" src="/assets/ico/flag.svg" alt />
+              Terminer
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/form/orientation-form/component/orientation-modal/orientation-modal.component.scss b/src/app/form/orientation-form/component/orientation-modal/orientation-modal.component.scss
new file mode 100644
index 000000000..2fd765960
--- /dev/null
+++ b/src/app/form/orientation-form/component/orientation-modal/orientation-modal.component.scss
@@ -0,0 +1,27 @@
+@import '../../../../../assets/scss/typography';
+@import '../../../../../assets/scss/color';
+
+.ico-close-details {
+  margin-right: 16px;
+}
+h3 {
+  margin: 8% 15%;
+  text-align: center;
+  @include cn-regular-18;
+  color: $grey-2;
+}
+.modalContent {
+  margin: 0 32px;
+  width: 100%;
+}
+.footerModal {
+  margin: 25px;
+}
+.modalBackground .modal .footerModal .btn.confirm {
+  font-size: 14px;
+  font-weight: normal;
+}
+.flag {
+  padding-right: 10px;
+  stroke: $white;
+}
diff --git a/src/app/form/orientation-form/component/orientation-modal/orientation-modal.component.spec.ts b/src/app/form/orientation-form/component/orientation-modal/orientation-modal.component.spec.ts
new file mode 100644
index 000000000..4950443e7
--- /dev/null
+++ b/src/app/form/orientation-form/component/orientation-modal/orientation-modal.component.spec.ts
@@ -0,0 +1,26 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OrientationComponent } from './orientation-modal.component';
+
+describe('OrientationModalComponent', () => {
+  let component: OrientationComponent;
+  let fixture: ComponentFixture<OrientationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [OrientationComponent],
+      imports: [HttpClientTestingModule],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrientationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/form/orientation-form/component/orientation-modal/orientation-modal.component.ts b/src/app/form/orientation-form/component/orientation-modal/orientation-modal.component.ts
new file mode 100644
index 000000000..dfc3f86ab
--- /dev/null
+++ b/src/app/form/orientation-form/component/orientation-modal/orientation-modal.component.ts
@@ -0,0 +1,20 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-orientation-modal',
+  templateUrl: './orientation-modal.component.html',
+  styleUrls: ['./orientation-modal.component.scss'],
+})
+export class OrientationComponent {
+  @Input() public openned: boolean;
+  @Output() closed = new EventEmitter();
+  @Output() previousPage = new EventEmitter();
+
+  public closeModal(): void {
+    this.closed.emit();
+  }
+  public goToPreviousPage(): void {
+    this.closeModal();
+    this.previousPage.emit();
+  }
+}
diff --git a/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.html b/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.html
index 7d7ed3c9e..eb6736c0e 100644
--- a/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.html
+++ b/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.html
@@ -6,7 +6,7 @@
         <h3 class="bold">{{ structure.structureName }}</h3>
       </div>
       <div class="mobile-column">
-        <div fxLayout="column" fxFlex="50%">
+        <div fxLayout="column" fxFlex="100%">
           <div *ngIf="structure.address" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
             <app-svg-icon [type]="'ico'" [icon]="'adress'" [title]="'Adresse'"></app-svg-icon>
             <p>{{ structure.address.numero }} {{ structure.address.street }}, {{ structure.address.commune }}</p>
diff --git a/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss b/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss
index 155566070..8a463c255 100644
--- a/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss
+++ b/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss
@@ -28,7 +28,6 @@ a {
 }
 
 .structrue-details-container > .structure-details-block {
-  padding: 0px 0px 24px 0;
   .subtitle {
     text-transform: uppercase;
     @include cn-bold-16;
diff --git a/src/app/form/orientation-form/component/structure-list-print/structure-list-print.component.html b/src/app/form/orientation-form/component/structure-list-print/structure-list-print.component.html
index 1c55aece5..0a11c4df1 100644
--- a/src/app/form/orientation-form/component/structure-list-print/structure-list-print.component.html
+++ b/src/app/form/orientation-form/component/structure-list-print/structure-list-print.component.html
@@ -1,12 +1,15 @@
-<app-structure-print-header
-  class="multi-print"
-  [beneficiaryNeedCommentary]="beneficiaryNeedCommentary"
-  [beneficiaryName]="beneficiaryName"
-  [structureAccompaniment]="structureAccompaniment"
-  [beneficiaryPassNumeric]="beneficiaryPassNumeric"
-  [contactAccompaniment]="contactAccompaniment"
-  [filters]="filters"
-></app-structure-print-header>
 <div class="multi-print" *ngFor="let structure of structures">
+  <app-structure-print-header
+    [beneficiaryNeedCommentary]="beneficiaryNeedCommentary"
+    [beneficiaryName]="beneficiaryName"
+    [structureAccompaniment]="structureAccompaniment"
+    [beneficiaryPassNumeric]="beneficiaryPassNumeric"
+    [contactAccompaniment]="contactAccompaniment"
+    [filters]="filters"
+  ></app-structure-print-header>
   <app-structure-detail-print [structure]="structure"></app-structure-detail-print>
 </div>
+<div class="loader">
+  <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
+  <p>Liste en cours d'impression</p>
+</div>
diff --git a/src/app/form/orientation-form/component/structure-list-print/structure-list-print.component.scss b/src/app/form/orientation-form/component/structure-list-print/structure-list-print.component.scss
index 768bc8ad1..50e6aa8ff 100644
--- a/src/app/form/orientation-form/component/structure-list-print/structure-list-print.component.scss
+++ b/src/app/form/orientation-form/component/structure-list-print/structure-list-print.component.scss
@@ -1,3 +1,6 @@
+@import '../../../../../assets/scss/color';
+@import '../../../../../assets/scss/layout';
+
 .list-to-print {
   height: 600px;
   overflow-x: hidden;
@@ -5,14 +8,42 @@
 }
 
 .multi-print {
+  :host {
+    background-color: $grey-6;
+  }
   ::ng-deep {
     .structrue-details-container {
-      page-break-after: always;
-      height: 100%;
+      margin-top: 2%;
+      margin-left: 34%;
+      height: 98%;
     }
     .print-header {
-      page-break-after: always;
       height: 100%;
     }
   }
+  page-break-after: always;
+  -webkit-print-color-adjust: exact;
+  width: 50%;
+  margin-left: 23%;
+  margin-right: 23%;
+  padding-left: 2%;
+  padding-right: 2%;
+  height: 100%;
+  overflow-x: hidden;
+  background-color: $white;
+  @media screen {
+    display: none;
+  }
+  @media print {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.loader {
+  height: calc(100vh - #{$header-height} - #{$footer-height});
+  @media print {
+    display: none;
+  }
 }
diff --git a/src/app/form/orientation-form/component/structure-list-print/structure-list-print.component.ts b/src/app/form/orientation-form/component/structure-list-print/structure-list-print.component.ts
index 540db118a..dc15a3df0 100644
--- a/src/app/form/orientation-form/component/structure-list-print/structure-list-print.component.ts
+++ b/src/app/form/orientation-form/component/structure-list-print/structure-list-print.component.ts
@@ -1,16 +1,13 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Structure } from '../../../../models/structure.model';
 import * as _ from 'lodash';
-import { ActivatedRoute } from '@angular/router';
-import { PrintService } from '../../../../shared/service/print.service';
 import { Filter } from '../../../../structure-list/models/filter.model';
-import Module from 'module';
 @Component({
   selector: 'app-structure-list-print',
   templateUrl: './structure-list-print.component.html',
   styleUrls: ['./structure-list-print.component.scss'],
 })
-export class StructureListPrintComponent implements OnInit {
+export class StructureListPrintComponent {
   @Input() public structures: Structure[];
   @Input() public filters: Filter[];
   @Input() public beneficiaryNeedCommentary: string;
@@ -18,8 +15,4 @@ export class StructureListPrintComponent implements OnInit {
   @Input() public structureAccompaniment: string;
   @Input() public beneficiaryPassNumeric: boolean;
   @Input() public contactAccompaniment: string;
-
-  constructor(private printService: PrintService, private route: ActivatedRoute) {}
-
-  async ngOnInit(): Promise<void> {}
 }
diff --git a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.html b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.html
index 616b544b1..7c09be927 100644
--- a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.html
+++ b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.html
@@ -9,14 +9,14 @@
         <h3>Fiche d'orientation</h3>
       </div>
     </div>
-    <p class="typeInformationHeader date">{{ date }}</p>
+    <p class="informationHeader date">{{ date }}</p>
   </div>
 
   <div class="informations">
     <div class="helper">
       <!-- Accompaniment -->
       <div *ngIf="structureAccompaniment">
-        <div class="typeInformationHeader">{{ 'Orienté par' | uppercase }}</div>
+        <div class="informationHeader">{{ 'Orienté par' | uppercase }}</div>
         <p class="bold">{{ structureAccompaniment }}</p>
         <!-- Contact -->
         <p class="bold" *ngIf="contactAccompaniment">{{ contactAccompaniment }}</p>
@@ -24,39 +24,39 @@
       </div>
     </div>
     <div class="beneficiary">
-      <div class="typeInformationHeader">{{ 'Bénéficiaire' | uppercase }}</div>
+      <div class="informationHeader">{{ 'Bénéficiaire' | uppercase }}</div>
       <!-- Name -->
-      <table>
+      <table class="beneficiaryNeeds">
         <tr>
-          <td class="typeInformationHeader">Nom</td>
+          <td class="informationHeader">Nom</td>
           <td class="bold">{{ beneficiaryName }}</td>
         </tr>
         <tr *ngIf="equipments.length > 0">
-          <td class="typeInformationHeader">Besoin(s) en matériel</td>
+          <td class="informationHeader">Besoin(s) en matériel</td>
           <td class="bold">
             <div *ngFor="let equipmentTag of equipments">
               {{ equipmentTag.text ? equipmentTag.text : equipmentTag.value }}
             </div>
           </td>
         </tr>
-        <tr *ngIf="formations.length > 0">
-          <td class="typeInformationHeader">Besoin(s) en formation</td>
+        <tr *ngIf="assistances.length > 0">
+          <td class="informationHeader">Besoin(s) en formation</td>
           <td class="bold">
-            <div *ngFor="let formationTag of formations">
-              {{ formationTag.text ? formationTag.text : formationTag.value }}
+            <div *ngFor="let assistanceTag of assistances">
+              {{ assistanceTag.text ? assistanceTag.text : assistanceTag.value }}
             </div>
           </td>
         </tr>
-        <tr *ngIf="assistances.length > 0">
-          <td class="typeInformationHeader">Besoin(s) d'accompagnement</td>
+        <tr *ngIf="formations.length > 0">
+          <td class="informationHeader">Besoin(s) d'accompagnement</td>
           <td class="bold">
-            <div *ngFor="let assistanceTag of assistances">
-              {{ assistanceTag.text ? assistanceTag.text : assistanceTag.value }}
+            <div *ngFor="let formationTag of formations">
+              {{ formationTag.text ? formationTag.text : formationTag.value }}
             </div>
           </td>
         </tr>
         <tr *ngIf="specificNeeds.length > 0">
-          <td class="typeInformationHeader">Besoin(s) spécifiques</td>
+          <td class="informationHeader">Besoin(s) spécifiques</td>
           <td class="bold">
             <div *ngFor="let specificNeed of specificNeeds">
               {{ specificNeed.text ? specificNeed.text : specificNeed.value }}
@@ -64,11 +64,11 @@
           </td>
         </tr>
         <tr *ngIf="beneficiaryPassNumeric">
-          <td class="typeInformationHeader">Pass Numérique</td>
+          <td class="informationHeader">Pass Numérique</td>
           <td class="bold">Oui</td>
         </tr>
         <tr *ngIf="beneficiaryNeedCommentary">
-          <td class="typeInformationHeader">Informations</td>
+          <td class="informationHeader">Informations</td>
           <td class="bold">{{ beneficiaryNeedCommentary }}</td>
         </tr>
       </table>
diff --git a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.scss b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.scss
index b9cce0c61..d82510988 100644
--- a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.scss
+++ b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.scss
@@ -35,9 +35,18 @@
   float: right;
 }
 
-.print-header {
-  page-break-after: always;
-  height: 100%;
+.beneficiaryNeeds {
+  td {
+    vertical-align: top;
+  }
+  border-collapse: separate;
+  border-spacing: 10px 15px;
+}
+
+.informationsHeader {
+  min-width: 35%;
+  margin-bottom: 5px;
+  color: $black;
 }
 
 .typeInformationHeader {
@@ -104,4 +113,8 @@
     padding: 2%;
     width: 70%;
   }
+
+  tr {
+    margin-bottom: 8px;
+  }
 }
diff --git a/src/app/form/orientation-form/orientation-form.component.html b/src/app/form/orientation-form/orientation-form.component.html
index 2b0d6d985..5dd05aaf7 100644
--- a/src/app/form/orientation-form/orientation-form.component.html
+++ b/src/app/form/orientation-form/orientation-form.component.html
@@ -333,6 +333,7 @@
         <app-structure-detail-print
           *ngFor="let structure of structuresToPrint"
           [structure]="structure"
+          class="print-structure-container"
         ></app-structure-detail-print>
       </div>
     </div>
@@ -427,9 +428,10 @@
   <div *ngIf="currentPage == pageTypeEnum.printResults" class="form-footer">
     <div fxLayout="row" fxLayoutAlign="center center">
       <app-footer-form
-        [btnName]="['Précédent', 'Imprimer']"
+        [btnName]="['Précédent', 'Imprimer', 'Terminer']"
         (previousPage)="previousPage()"
         (nextPage)="runMultiPrint(true)"
+        (endPage)="displayFinishModal()"
         [isValid]="isPageValid"
       ></app-footer-form>
     </div>
@@ -443,7 +445,7 @@
   [beneficiaryName]="getOrientationControl('beneficiaryName').value"
   [structureAccompaniment]="getOrientationControl('structureAccompaniment').value"
   [beneficiaryPassNumeric]="getOrientationControl('passNumeric').value"
-  [contactAccompaniment]="getOrientationControl('contactAccompaniment').value"
+  [contactAccompaniment]="getOrientationControl('contactAccompanimentPhone').value"
   [filters]="filters"
 ></app-structure-list-print>
 
@@ -452,3 +454,10 @@
   [structure]="selectedStructure"
   (closeDetails)="closeDetails()"
 ></app-structure-details>
+
+<app-orientation-modal
+  *ngIf="displayModal"
+  [openned]="true"
+  (closed)="closeFinishModal($event)"
+  (previousPage)="previousPage()"
+></app-orientation-modal>
diff --git a/src/app/form/orientation-form/orientation-form.component.scss b/src/app/form/orientation-form/orientation-form.component.scss
index b83f7a12b..c0d9b713d 100644
--- a/src/app/form/orientation-form/orientation-form.component.scss
+++ b/src/app/form/orientation-form/orientation-form.component.scss
@@ -288,3 +288,16 @@ input {
     font-style: italic;
   }
 }
+
+.print-structure-container {
+  ::ng-deep .structrue-details-container {
+    border-bottom: solid 1px $grey-3;
+    margin-bottom: 4%;
+  }
+}
+
+.print-structure-container:last-child {
+  ::ng-deep .structrue-details-container {
+    border-bottom: none;
+  }
+}
diff --git a/src/app/form/orientation-form/orientation-form.component.ts b/src/app/form/orientation-form/orientation-form.component.ts
index 7f6b8721d..0a32de362 100644
--- a/src/app/form/orientation-form/orientation-form.component.ts
+++ b/src/app/form/orientation-form/orientation-form.component.ts
@@ -77,6 +77,7 @@ export class OrientationFormComponent implements OnInit {
   public showFormation: boolean;
 
   public multiPrint: boolean = false;
+  public displayModal = false;
 
   public structuresList: Structure[];
   public structuresToPrint: Structure[] = [];
@@ -250,6 +251,9 @@ export class OrientationFormComponent implements OnInit {
     this.pagesValidation[PageTypeEnum.beneficiaryAddress] = {
       valid: true,
     };
+    this.pagesValidation[PageTypeEnum.beneficiaryAddress] = {
+      valid: true,
+    };
     this.pagesValidation[PageTypeEnum.printResults] = { valid: true };
     this.pagesValidation[PageTypeEnum.structuresSelection] = { valid: this.structuresToPrint.length > 0 };
 
@@ -535,4 +539,12 @@ export class OrientationFormComponent implements OnInit {
   onWindowAfterPrint() {
     this.multiPrint = false;
   }
+
+  public displayFinishModal(): void {
+    this.displayModal = true;
+  }
+
+  public closeFinishModal(): void {
+    this.displayModal = false;
+  }
 }
diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
index bac0c2f7f..3fe53bca3 100644
--- a/src/app/map/components/map.component.scss
+++ b/src/app/map/components/map.component.scss
@@ -24,7 +24,7 @@
     height: calc(100vh - #{$header-height} - 28px);
   }
   &.orientation {
-    height: calc(96vh - #{$header-height} - #{$footer-height} - 68px);
+    height: calc(96vh - #{$header-height} - #{$footer-height} - 68px - #{$footer-height-phone});
   }
 }
 
diff --git a/src/assets/ico/flag.svg b/src/assets/ico/flag.svg
new file mode 100644
index 000000000..af8498d85
--- /dev/null
+++ b/src/assets/ico/flag.svg
@@ -0,0 +1,16 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="6.01176" y="2.61237" width="1" height="17" rx="0.5" transform="rotate(15 6.01176 2.61237)" stroke="white"/>
+<rect x="6.90824" y="6.99372" width="1" height="1" transform="rotate(15 6.90824 6.99372)" stroke="white"/>
+<rect x="5.87308" y="10.8574" width="1" height="1" transform="rotate(15 5.87308 10.8574)" stroke="white"/>
+<rect x="10.7715" y="8.029" width="1" height="1" transform="rotate(15 10.7715 8.029)" stroke="white"/>
+<rect x="9.73637" y="11.8926" width="1" height="1" transform="rotate(15 9.73637 11.8926)" stroke="white"/>
+<rect x="14.6348" y="9.06428" width="1" height="1" transform="rotate(15 14.6348 9.06428)" stroke="white"/>
+<rect x="13.5996" y="12.9279" width="1" height="1" transform="rotate(15 13.5996 12.9279)" stroke="white"/>
+<rect x="8.3223" y="9.44318" width="1" height="1" transform="rotate(15 8.3223 9.44318)" stroke="white"/>
+<rect x="12.1856" y="10.4785" width="1" height="1" transform="rotate(15 12.1856 10.4785)" stroke="white"/>
+<rect x="16.0489" y="11.5137" width="1" height="1" transform="rotate(15 16.0489 11.5137)" stroke="white"/>
+<rect x="9.35746" y="5.57941" width="1" height="1" transform="rotate(15 9.35746 5.57941)" stroke="white"/>
+<rect x="13.2207" y="6.61469" width="1" height="1" transform="rotate(15 13.2207 6.61469)" stroke="white"/>
+<rect x="17.086" y="7.64997" width="1" height="1" transform="rotate(15 17.086 7.64997)" stroke="white"/>
+<rect x="6.71879" y="3.8371" width="13" height="9" transform="rotate(15 6.71879 3.8371)" stroke="white"/>
+</svg>
-- 
GitLab


From cb3ebc7a5dc6c20d9451a0cee1558f5241554f63 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Mon, 21 Feb 2022 15:42:01 +0100
Subject: [PATCH 23/27] fix: typo in mobile menu

---
 src/app/header/header.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index bdf85fe6b..87949d944 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -37,7 +37,7 @@
       </div>
       <div fxLayout="column" class="right-header" fxLayoutAlign="none baseline" fxLayoutGap="5vw">
         <a routerLink="/news" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Actualités</a>
-        <a routerLink="/acteurs" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Cartographie de acteurs</a>
+        <a routerLink="/acteurs" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Cartographie des acteurs</a>
         <a routerLink="/orientation" [routerLinkActive]="'active'" (click)="closeMenu()" i18n
           >Orienter un bénéficiaire</a
         >
-- 
GitLab


From 5a2c196462a126646d2ae1e0b76760dd338876ab Mon Sep 17 00:00:00 2001
From: Augustin LECONTE <["ext.sopra.aleconte@grandlyon.com"]>
Date: Mon, 21 Feb 2022 15:37:40 +0000
Subject: [PATCH 24/27] fix(print-orientation): progression percentage is 100%
 when printing

---
 src/app/form/orientation-form/orientation-form.component.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/form/orientation-form/orientation-form.component.ts b/src/app/form/orientation-form/orientation-form.component.ts
index 0a32de362..31b2c36d0 100644
--- a/src/app/form/orientation-form/orientation-form.component.ts
+++ b/src/app/form/orientation-form/orientation-form.component.ts
@@ -203,8 +203,9 @@ export class OrientationFormComponent implements OnInit {
     if (this.currentPage === 0) {
       this.previousUrl();
     } else {
+      if (this.currentPage == this.nbPagesForm - 1) this.progressStatus -= (100 / this.nbPagesForm) * 2;
+      else this.progressStatus -= 100 / this.nbPagesForm;
       this.currentPage--;
-      this.progressStatus -= 100 / this.nbPagesForm;
       this.setStructuresAndCoord();
       this.updatePageValid();
     }
@@ -532,6 +533,7 @@ export class OrientationFormComponent implements OnInit {
     this.multiPrint = event;
     setTimeout(() => {
       window.print();
+      this.progressStatus = 100;
     }, 1000);
   }
 
-- 
GitLab


From 070d15d913900a40186ab06f43504880b3b1b20e Mon Sep 17 00:00:00 2001
From: Augustin LECONTE <["ext.sopra.aleconte@grandlyon.com"]>
Date: Mon, 21 Feb 2022 15:45:55 +0000
Subject: [PATCH 25/27] fix(orientation-form): remove geoloc button in carto
 from orientation form

---
 .../orientation-form/orientation-form.component.html   |  1 -
 src/app/map/components/map.component.ts                | 10 ++++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/app/form/orientation-form/orientation-form.component.html b/src/app/form/orientation-form/orientation-form.component.html
index 5dd05aaf7..3174a45f0 100644
--- a/src/app/form/orientation-form/orientation-form.component.html
+++ b/src/app/form/orientation-form/orientation-form.component.html
@@ -403,7 +403,6 @@
         [toogleToolTipId]="displayMapMarkerId"
         [selectedMarkerId]="selectedMarkerId"
         [locate]="locate"
-        (locatationTrigger)="locatationTrigger($event)"
         (selectedStructure)="showDetails($event)"
         [isMapPhone]="isMapPhone"
         [searchedValue]="userLocation"
diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts
index f844d5d69..35f1387f2 100644
--- a/src/app/map/components/map.component.ts
+++ b/src/app/map/components/map.component.ts
@@ -272,10 +272,12 @@ export class MapComponent implements OnChanges {
   public onMapReady(map: Map): void {
     this.map = map;
     // Handle location
-    this.lc = L.control.locate(this.locateOptions).addTo(this.map);
-    this.map.on('locationfound', () => {
-      this.locatationTrigger.emit(true);
-    });
+    if (!this.isOrientationForm) {
+      this.lc = L.control.locate(this.locateOptions).addTo(this.map);
+      this.map.on('locationfound', () => {
+        this.locatationTrigger.emit(true);
+      });
+    }
 
     if (this.searchedValue) {
       if (Array.isArray(this.searchedValue)) {
-- 
GitLab


From 9662f7e78b8ba74a0e2c182bd670b088891baf9b Mon Sep 17 00:00:00 2001
From: Augustin LECONTE <["ext.sopra.aleconte@grandlyon.com"]>
Date: Mon, 21 Feb 2022 15:53:47 +0000
Subject: [PATCH 26/27] fix: missing label on footer button

---
 src/app/form/footer-form/footer-form.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/form/footer-form/footer-form.component.html b/src/app/form/footer-form/footer-form.component.html
index 71e448b1d..3ced43e02 100644
--- a/src/app/form/footer-form/footer-form.component.html
+++ b/src/app/form/footer-form/footer-form.component.html
@@ -30,7 +30,7 @@
       </svg>
       {{ btnName[1] }}
     </div>
-    <div *ngIf="btnName[1] == 'Suivant'" class="rowBtn" fxLayout="row" fxLayoutAlign="center center">
+    <div *ngIf="btnName[1] != 'Imprimer'" class="rowBtn" fxLayout="row" fxLayoutAlign="center center">
       {{ btnName[1] }}
       <svg class="chevronRight" aria-hidden="true">
         <use [attr.xlink:href]="'assets/form/sprite.svg#chevronRight'"></use>
-- 
GitLab


From aa97b4228f3c570624f54b5c1dcfbf8f999ee0b8 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Mon, 21 Feb 2022 16:55:01 +0100
Subject: [PATCH 27/27] chore(release): 1.14.0

---
 CHANGELOG.md      | 35 +++++++++++++++++++++++++++++++++++
 package-lock.json |  2 +-
 package.json      |  2 +-
 3 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9ec95edb1..72bd55265 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,41 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.14.0](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/compare/v1.13.0...v1.14.0) (2022-02-21)
+
+
+### Features
+
+* **carto:** enable pop-up autopan for markers in order to have a better display on small screen ([758b319](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/758b3193f1263bb31bf46d45a67b136e5fcdaa9f))
+* **carto:** put selected and hover marker on top of the others ([cc3c16c](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/cc3c16c34682f8baaed15caaf8ba70a91ecf4024))
+* **cicd:** rework on automation. Add feature and tag build. Better handling of dependencie proxy ([b9a6764](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/b9a67640b4c7aae589019ae57330d734e5ce3300))
+* **nginx:** new conf for PWA handling ([a38b929](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/a38b929207e0543857867efa355c7c014e96a99e))
+* **orientation-form:** change orientation form design ([1946312](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/1946312fe8b9e1a025693c53ecea6c08d21e5031))
+* **post:** display attachment in post ([020c192](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/020c192182d3d275ecfecd27cdc59bdabe1e0387))
+* **previewImages:** Manage post preview image independantly from post details images ([1761f74](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/1761f7412c9b2645925a6ed925a585fdae8326f9))
+* **print-orientation:** graphic update for the print at the end of the orientation ([335ba0a](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/335ba0af1e97893ba2f3107366598eb67a9fd1fd))
+* **reset-password:** add notification when reset email is sent ([ed857c5](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/ed857c5ca45086ac30a4f1977ac5ae524b15161a))
+* **searchResults:** Add page descriptions ([c15012f](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/c15012fc12aaa9d43e27d273d75b12f77ac90e44))
+
+
+### Bug Fixes
+
+* **admin:** broken link in structure was making admin panel crash ([51ffbb4](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/51ffbb429cbf546c44765cf7f80e37e2dae48d0c))
+* **cicd:** fix deploy issue after variables adding ([0d9f2fc](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/0d9f2fca8ed2ee8aca43d839f8ceb69053f7359a))
+* **cicd:** job build issue on service ([74c091f](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/74c091f0486b2f7db555b825c15189b32967e581))
+* **cicd:** variable usage was making deploy job fail ([2461c64](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/2461c64b7a88dd2f6cd5f90ad530be726c5537da))
+* missing label on footer button ([9662f7e](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/9662f7e78b8ba74a0e2c182bd670b088891baf9b))
+* **news:** change updated date display to created date ([b4c323c](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/b4c323c464ef361b0568af56d550c8a4953be2e1))
+* **news:** created date in post list ([6d2ada7](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/6d2ada7c02b4c1efdb83c0f2e2770a385f4856a2))
+* **news:** issue in responsive, width of post-container is now fixed ([8fa4923](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/8fa492345262bdcea440010d467d0a0179d49ae3))
+* **news:** issue on news display, tag duplication and page display were broken  ([7099003](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/70990035c6c417ad82f00c5d560e239c7d9a86fe))
+* **news:** tag refactor for 'a-la-une' tag. This tag is no longer display if there is another tag on the same post. ([9d0be47](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/9d0be47f1e6fe7a4cd684d6c2b65299bc6ccb0f0))
+* **orientation-form:** fix formation list ([2b5a449](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/2b5a4490f8287d045be49481ab475027cf596219))
+* **orientation-form:** remove geoloc button in carto from orientation form  ([070d15d](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/070d15d913900a40186ab06f43504880b3b1b20e))
+* **posts:** remove image width forced to 100% in post details ([055e9cb](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/055e9cbe0db90f9409192d7d03b6363ee0f9a2a3))
+* **print-orientation:** progression percentage is 100% when printing ([5a2c196](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/5a2c196462a126646d2ae1e0b76760dd338876ab))
+* typo in mobile menu ([cb3ebc7](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/cb3ebc7a5dc6c20d9451a0cee1558f5241554f63))
+
 ## [1.13.0](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/compare/v1.12.0...v1.13.0) (2022-02-07)
 
 
diff --git a/package-lock.json b/package-lock.json
index 4423b9a74..17360dfd8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "pamn",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 8356afdb9..e978d75bb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pamn",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --configuration=fr --proxy-config proxy.conf.json",
-- 
GitLab