src/app/shared/components/svg-icon/svg-icon.component.ts

@@ -9,6 +9,7 @@ export class SvgIconComponent {
   @Input() icon: string;
   @Input() iconClass: string;
   @Input() type: string;
-  @Input() iconColor: string;
+  @Input() iconColor: string = 'none';
+  @Input() title: string = null;
   constructor() {}
 }

src/app/shared/service/address.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { AddressService } from './address.service';
+
+describe('AddressService', () => {
+  let service: AddressService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AddressService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/shared/service/address.service.ts

+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AddressService {
+  constructor(private http: HttpClient) {}
+
+  public searchAddress(searchQuery: string): Observable<any> {
+    return this.http.post<any>(`api/structures/address`, { searchQuery });
+  }
+}

src/app/shared/shared.module.ts

@@ -7,9 +7,10 @@ import { SharedComponents } from './components';
 import { SharedPipes } from './pipes';
 import { SharedDirectives } from './directives';
 import { SvgIconComponent } from './components/svg-icon/svg-icon.component';
+import { AddressAutocompleteComponent } from './components/address-autocomplete/address-autocomplete.component';
 @NgModule({
   imports: [CommonModule, RouterModule, FlexLayoutModule, ReactiveFormsModule],
-  declarations: [...SharedPipes, ...SharedComponents, ...SharedDirectives, SvgIconComponent],
+  declarations: [...SharedPipes, ...SharedComponents, ...SharedDirectives, SvgIconComponent, AddressAutocompleteComponent],
   exports: [
     ...SharedPipes,
     ...SharedComponents,

src/app/structure-list/components/card/card.component.html

@@ -8,14 +8,21 @@
       fxLayoutAlign="end center"
       fxLayoutGap="20px"
     >
-      <div class="isntPhoneContent" fxLayout="row" fxLayoutAlign="center center">
-        <span class="indicatorDistance" *ngFor="let i of [].constructor(structure.getDistanceRange())"></span>
-      </div>
       <div>
         {{ this.formatDistance() }}
       </div>
     </div>
   </div>
   <span class="typeStructure">{{ structure.getLabelTypeStructure() }}</span>
+  <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="7px" *ngIf="structure.hasEquipments()">
+    <app-svg-icon
+      *ngFor="let equipement of structure.equipmentsAndServices"
+      [type]="'ico'"
+      [iconColor]="'grey'"
+      [icon]="structure.getEquipmentsIcon(equipement)"
+      [title]="structure.getEquipmentsTitle(equipement)"
+    ></app-svg-icon>
+  </div>
+
   <br />
 </div>

src/app/structure-list/components/card/card.component.scss

@@ -3,22 +3,6 @@
 @import '../../../../assets/scss/typography';
 @import '../../../../assets/scss/breakpoint';
 
-.indicatorDistance {
-  width: 34px;
-  height: 1px;
-  background: $grey-3;
-  border-radius: 1px;
-  &:before {
-    height: 7px;
-    width: 33px;
-    content: '';
-    margin-top: -3px;
-    display: block;
-    border-radius: 1px;
-    border-left: 1px solid $grey-3;
-    border-right: 1px solid $grey-3;
-  }
-}
 .structure {
   padding: 12px 0 12px 0;
   border-bottom: 1px dashed $grey !important;
@@ -43,9 +27,3 @@
     border-bottom: none;
   }
 }
-
-@media #{$large-phone} {
-  .isntPhoneContent {
-    display: none !important;
-  }
-}

src/app/structure-list/components/card/card.component.ts

@@ -2,6 +2,7 @@ import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
 import { Structure } from '../../../models/structure.model';
 import { GeojsonService } from '../../../services/geojson.service';
 import { typeStructureEnum } from '../../../shared/enum/typeStructure.enum';
+import { Equipment } from '../../enum/equipment.enum';
 
 @Component({
   selector: 'app-card',

src/app/structure-list/components/modal-filter/modal-filter.component.scss

@@ -22,7 +22,7 @@
 .modal {
   max-width: 754px;
   width: 94%;
-  z-index: $modal-filter-structure-z-index !important;
+  z-index: $modal-z-index !important;
   position: fixed;
   border-radius: 6px;
   margin-top: 3.5px;

src/app/structure-list/components/search/search.component.html

 <div class="header">
-  <span class="title">Acteurs de la médiation</span>
+  <span class="title">Acteurs de la médiation numérique</span>
 </div>
 <div class="content" fxLayout="column">
   <div class="searchSection">
@@ -11,7 +11,7 @@
       (ngSubmit)="applyFilter(searchForm.value.searchTerm)"
     >
       <div class="inputSection" fxLayout="row" fxLayoutAlign="space-between center">
-        <input type="text" formControlName="searchTerm" placeholder="Rechercher une adresse, une association..." />
+        <input type="text" formControlName="searchTerm" placeholder="Rechercher une commune, une association..." />
         <button (click)="clearInput()" class="icon close" type="button"><div class="ico-close-search"></div></button>
         <span class="separator"></span>
         <button (click)="locateMe()" class="icon pin" type="button"><div class="ico-pin-search"></div></button>
@@ -37,7 +37,7 @@
         fxLayoutAlign="space-between center"
         (click)="openModal(TypeModal.accompaniment)"
       >
-        <span>Accompagnement</span>
+        <span>Démarches en ligne</span>
         <div class="arrow"></div>
       </button>
       <button
@@ -51,7 +51,7 @@
         fxLayoutAlign="space-between center"
         (click)="openModal(TypeModal.training)"
       >
-        <span>Formations</span>
+        <span>Ateliers</span>
         <div class="arrow"></div>
       </button>
       <button
@@ -65,7 +65,7 @@
         fxLayoutAlign="space-between center"
         (click)="openModal(TypeModal.moreFilters)"
       >
-        <span>Plus de filtres</span>
+        <span>Plus de critères</span>
         <div class="arrow"></div>
       </button>
     </div>

src/app/structure-list/components/search/search.component.scss

@@ -47,6 +47,7 @@
     outline: none;
     border-radius: 4px;
     cursor: pointer;
+    white-space: nowrap;
     @include btn-normal;
     .arrow {
       background-color: transparent;

src/app/structure-list/components/structure-details/structure-details.component.html

@@ -12,8 +12,11 @@
     <button (click)="claimStructure()">Revendiquer</button>
   </div>
   <div fxLayout="row" fxLayoutAlign="center center">
-    <button *ngIf="profileService.isLinkedToStructure(structure._id)" (click)="editStructure()">
-      Modifier ma structure
+    <button
+      *ngIf="profileService.isLinkedToStructure(structure._id) || profileService.isAdmin()"
+      (click)="editStructure()"
+    >
+      Modifier la structure
     </button>
   </div>
   <div fxLayout="row" fxLayoutAlign="end center">
@@ -21,10 +24,20 @@
   </div>
   <div fxLayout="row" class="structure-details-block" fxLayoutAlign="baseline baseline" fxLayoutGap="8px">
     <div fxLayout="column" fxLayoutGap="10px" fxFlex="100%">
-      <div fxLayout="row" fxLayoutAlign="space-between start">
-        <div fxLayout="column">
-          <h2 class="bold">{{ structure.structureName }}</h2>
+      <div fxLayout="column" 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 fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="7px" *ngIf="structure.hasEquipments()">
+            <app-svg-icon
+              *ngFor="let equipement of structure.equipmentsAndServices"
+              [type]="'ico'"
+              [iconColor]="'currentColor'"
+              [icon]="structure.getEquipmentsIcon(equipement)"
+            ></app-svg-icon>
+          </div>
         </div>
         <div class="printButton" fxLayout="column" fxLayoutAlign="end">
           <app-button
@@ -69,6 +82,10 @@
             <app-svg-icon [type]="'ico'" [icon]="'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'"></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>
@@ -77,7 +94,7 @@
       </div>
     </div>
   </div>
-  <!-- Démarches -->
+  <!-- Démarches en ligne -->
   <div
     *ngIf="structure.proceduresAccompaniment.length"
     fxLayout="column"
@@ -87,7 +104,7 @@
   >
     <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="8px">
       <app-svg-icon [type]="'ico'" [icon]="'demarches'" [iconClass]="'icon-32'"></app-svg-icon>
-      <h2>Démarches</h2>
+      <h2>Démarches en ligne</h2>
     </div>
     <div fxLayout="column">
       <div fxLayout="row wrap" fxLayoutGap="24px">
@@ -112,7 +129,7 @@
   >
     <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="8px">
       <app-svg-icon [type]="'ico'" [icon]="'services'" [iconClass]="'icon-32'"></app-svg-icon>
-      <h2>Services</h2>
+      <h2>Ateliers</h2>
     </div>
     <div fxLayout="row" class="w-100" fxLayout.lt-sm="column">
       <div fxFlex="50%" *ngIf="isBaseSkills()">
@@ -120,7 +137,7 @@
         <p *ngFor="let skill of baseSkills">{{ skill.text }}</p>
       </div>
       <div fxFlex="50%" *ngIf="isAccessRights()">
-        <h3 class="subtitle">Accès au droits</h3>
+        <h3 class="subtitle">Accès aux droits</h3>
         <p *ngFor="let rights of accessRights">{{ rights.text }}</p>
       </div>
     </div>
@@ -189,7 +206,6 @@
       fxLayoutGap="13px"
       *ngFor="let equipement of structure.equipmentsAndServices"
     >
-      <app-svg-icon [type]="'ico'" [icon]="getEquipmentsIcon(equipement)"></app-svg-icon>
       <p>
         {{ getEquipmentsLabel(equipement) }}
         <span *ngIf="equipement == 'ordinateurs' && structure.nbComputers"> : {{ structure.nbComputers }}</span>

src/app/structure-list/components/structure-details/structure-details.component.scss

@@ -53,7 +53,9 @@
     margin-right: 5px;
   }
 }
-
+.typeInformationHeader {
+  color: $grey-3;
+}
 h2 {
   margin-top: 0;
   margin-bottom: 5px;
@@ -62,7 +64,6 @@ h2 {
 h3 {
   margin: 0;
   @include cn-regular-16;
-  color: $grey-3;
 }
 h4 {
   margin-left: 0;

src/app/structure-list/components/structure-details/structure-details.component.ts

@@ -89,23 +89,6 @@ export class StructureDetailsComponent implements OnInit {
     });
   }
 
-  public getEquipmentsIcon(equipment: Equipment): string {
-    switch (equipment) {
-      case Equipment.wifi:
-        return 'wifi';
-      case Equipment.bornes:
-        return 'borne';
-      case Equipment.printer:
-        return 'print';
-      case Equipment.tablet:
-        return 'tablet';
-      case Equipment.computer:
-        return 'computer';
-      default:
-        return null;
-    }
-  }
-
   public getEquipmentsLabel(equipment: Equipment): string {
     switch (equipment) {
       case Equipment.wifi:

src/app/structure-list/structure-list.component.html

@@ -12,6 +12,7 @@
     (showDetails)="showDetails($event)"
     (hover)="handleCardHover($event)"
   ></app-card>
+  <p *ngIf="structureList && structureList.length <= 0">Il n'y a aucune réponse correspondant à votre recherche</p>
 </div>
 
 <app-structure-details

src/assets/ico/sprite.svg

@@ -7,7 +7,7 @@
 </symbol>
 
 <symbol id="tablet" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16 18C16.5523 18 17 17.5523 17 17V4C17 3.44772 16.5523 3 16 3H6C5.44772 3 5 3.44772 5 4V17C5 17.5523 5.44772 18 6 18H16ZM16 4H6V16H16V4ZM11 17.5C11.2761 17.5 11.5 17.2761 11.5 17C11.5 16.7239 11.2761 16.5 11 16.5C10.7239 16.5 10.5 16.7239 10.5 17C10.5 17.2761 10.7239 17.5 11 17.5Z" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 18C16.5523 18 17 17.5523 17 17V4C17 3.44772 16.5523 3 16 3H6C5.44772 3 5 3.44772 5 4V17C5 17.5523 5.44772 18 6 18H16ZM16 4H6V16H16V4ZM11 17.5C11.2761 17.5 11.5 17.2761 11.5 17C11.5 16.7239 11.2761 16.5 11 16.5C10.7239 16.5 10.5 16.7239 10.5 17C10.5 17.2761 10.7239 17.5 11 17.5Z" stroke="none"/>
 </symbol>
 
 <symbol id="transport" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -31,10 +31,10 @@
 </svg>
 
 <symbol id="computer" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-<rect x="2.5" y="3.5" width="17" height="11" rx="0.5" stroke="#333333"/>
-<rect x="2" y="12" width="18" height="2" fill="#333333"/>
-<rect x="9" y="15" width="4" height="2" fill="#333333"/>
-<path d="M7 17.382C7 17.1479 7.13226 16.9339 7.34164 16.8292L8.78885 16.1056C8.92771 16.0361 9.08082 16 9.23607 16H12.7639C12.9192 16 13.0723 16.0361 13.2111 16.1056L14.6584 16.8292C14.8677 16.9339 15 17.1479 15 17.382C15 17.7233 14.7233 18 14.382 18H7.61803C7.2767 18 7 17.7233 7 17.382Z" fill="#333333"/>
+<rect x="2.5" y="3" width="17" height="11" rx="0.5" stroke-width="2" fill="none"/>
+<rect x="2" y="12" width="18" height="2" stroke="none" />
+<rect x="9" y="15" width="4" height="2" stroke="none"/>
+<path d="M7 17.382C7 17.1479 7.13226 16.9339 7.34164 16.8292L8.78885 16.1056C8.92771 16.0361 9.08082 16 9.23607 16H12.7639C12.9192 16 13.0723 16.0361 13.2111 16.1056L14.6584 16.8292C14.8677 16.9339 15 17.1479 15 17.382C15 17.7233 14.7233 18 14.382 18H7.61803C7.2767 18 7 17.7233 7 17.382Z"/>
 </symbol>
 
 <symbol id="date" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
@@ -91,9 +91,9 @@
 </symbol>
 
 <symbol id="print" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-<rect x="10" y="8" width="12" height="5" stroke="currentColor" stroke-width="2"/>
-<rect x="10" y="17" width="12" height="8" stroke="currentColor" stroke-width="2"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6 12C5.44772 12 5 12.4477 5 13V21H9V17H23V21H27V13C27 12.4477 26.5523 12 26 12H6Z" fill="currentColor"/>
+<rect x="10" y="8" width="12" height="5" stroke-width="2" fill="none"/>
+<rect x="10" y="17" width="12" height="8" stroke-width="2" fill="none"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 12C5.44772 12 5 12.4477 5 13V21H9V17H23V21H27V13C27 12.4477 26.5523 12 26 12H6Z"/>
 </symbol>
 
 <symbol id="calendar" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
@@ -126,30 +126,16 @@
 </symbol>
 
 <symbol id="borne" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-<mask id="path-1-inside-1" fill="white">
-<rect x="5" width="12" height="9" rx="1"/>
-</mask>
-<rect x="5" width="12" height="9" rx="1" stroke="#333333" stroke-width="4" mask="url(#path-1-inside-1)"/>
-<path d="M6 14H16L14.6364 22H7.36364L6 14Z" fill="#333333"/>
-<path d="M5.04692 10.1658C5.12212 10.0617 5.24275 10 5.37119 10H16.6288C16.7573 10 16.8779 10.0617 16.9531 10.1658L18.542 12.3658C18.733 12.6303 18.544 13 18.2177 13H3.7823C3.45599 13 3.26698 12.6303 3.45803 12.3658L5.04692 10.1658Z" fill="#333333"/>
+<rect x="5" width="12" height="9" rx="1" stroke-width="1.9" fill="none"/>
+<path d="M6 14H16L14.6364 22H7.36364L6 14Z"/>
+<path d="M5.04692 10.1658C5.12212 10.0617 5.24275 10 5.37119 10H16.6288C16.7573 10 16.8779 10.0617 16.9531 10.1658L18.542 12.3658C18.733 12.6303 18.544 13 18.2177 13H3.7823C3.45599 13 3.26698 12.6303 3.45803 12.3658L5.04692 10.1658Z" stroke="none"/>
 </symbol>
 
 <symbol id="wifi" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<path d="M1.08488 8.63175C3.61838 6.09825 7.11838 4.53125 10.9844 4.53125C14.8504 4.53125 18.3504 6.09825 20.8839 8.63175L19.4697 10.046C17.2981 7.87439 14.2981 6.53125 10.9844 6.53125C7.67066 6.53125 4.67066 7.8744 2.49909 10.046L1.08488 8.63175Z" fill="#333333"/>
-<path d="M0.987878 8.72971C-1.46519 11.2313 -2.98672 14.6496 -3.01522 18.4233C-3.00846 17.5465 -2.91931 16.6682 -2.74662 15.8C-2.2154 13.1293 -0.917113 10.6726 0.987878 8.72971Z" fill="#333333"/>
-<path d="M-3.0153 18.6274C-2.99021 22.3568 -1.50692 25.7399 0.892922 28.235C-0.311404 26.9826 -1.27828 25.5103 -1.94994 23.8888C-2.64453 22.2119 -3.00294 20.4247 -3.0153 18.6274Z" fill="#333333"/>
-<path d="M1.20434 28.5488C3.72784 31.0128 7.17878 32.5312 10.9844 32.5312C14.7486 32.5312 18.1658 31.0457 20.6818 28.6288C20.0912 29.196 19.4494 29.7127 18.7624 30.1718C16.4601 31.7102 13.7533 32.5312 10.9844 32.5312C8.21543 32.5312 5.50867 31.7102 3.20639 30.1718C2.48717 29.6913 1.81751 29.1474 1.20434 28.5488Z" fill="#333333"/>
-<path d="M21.0019 28.3113C23.4506 25.8035 24.9655 22.3797 24.9842 18.6022C24.975 20.408 24.6165 22.2041 23.9187 23.8888C23.2333 25.5434 22.2406 27.0425 21.0019 28.3113Z" fill="#333333"/>
-<path d="M24.9841 18.4483C24.9621 14.6515 23.4287 11.2129 20.9551 8.70353C22.8742 10.6505 24.1817 13.1173 24.7154 15.8C24.8897 16.6764 24.9789 17.5632 24.9841 18.4483Z" fill="#333333"/>
-<path d="M18.0554 11.4602C16.2458 9.65054 13.7458 8.53125 10.9844 8.53125C8.22295 8.53125 5.72295 9.65054 3.91331 11.4602L5.32752 12.8744C6.77523 11.4267 8.77523 10.5312 10.9844 10.5312C13.1935 10.5312 15.1935 11.4267 16.6412 12.8744L18.0554 11.4602Z" fill="#333333"/>
-<path d="M15.227 14.2886C14.1412 13.2028 12.6412 12.5312 10.9844 12.5312C9.32752 12.5312 7.82752 13.2028 6.74173 14.2886L8.15595 15.7028C8.8798 14.979 9.8798 14.5312 10.9844 14.5312C12.0889 14.5312 13.0889 14.979 13.8128 15.7028L15.227 14.2886Z" fill="#333333"/>
-<path d="M12.3986 17.117C12.0367 16.7551 11.5367 16.5312 10.9844 16.5312C10.4321 16.5312 9.93209 16.7551 9.57016 17.117L10.9844 18.5312L12.3986 17.117Z" fill="#333333"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="22" height="22" fill="white"/>
-</clipPath>
-</defs>
+<path d="M1.08488 8.63175C3.61838 6.09825 7.11838 4.53125 10.9844 4.53125C14.8504 4.53125 18.3504 6.09825 20.8839 8.63175L19.4697 10.046C17.2981 7.87439 14.2981 6.53125 10.9844 6.53125C7.67066 6.53125 4.67066 7.8744 2.49909 10.046L1.08488 8.63175Z" stroke="none"/>
+<path d="M1.20434 28.5488C3.72784 31.0128 7.17878 32.5312 10.9844 32.5312C14.7486 32.5312 18.1658 31.0457 20.6818 28.6288C20.0912 29.196 19.4494 29.7127 18.7624 30.1718C16.4601 31.7102 13.7533 32.5312 10.9844 32.5312C8.21543 32.5312 5.50867 31.7102 3.20639 30.1718C2.48717 29.6913 1.81751 29.1474 1.20434 28.5488Z" stroke="none"/>
+<path d="M18.0554 11.4602C16.2458 9.65054 13.7458 8.53125 10.9844 8.53125C8.22295 8.53125 5.72295 9.65054 3.91331 11.4602L5.32752 12.8744C6.77523 11.4267 8.77523 10.5312 10.9844 10.5312C13.1935 10.5312 15.1935 11.4267 16.6412 12.8744L18.0554 11.4602Z" stroke="none"/>
+<path d="M15.227 14.2886C14.1412 13.2028 12.6412 12.5312 10.9844 12.5312C9.32752 12.5312 7.82752 13.2028 6.74173 14.2886L8.15595 15.7028C8.8798 14.979 9.8798 14.5312 10.9844 14.5312C12.0889 14.5312 13.0889 14.979 13.8128 15.7028L15.227 14.2886Z" stroke="none"/>
+<path d="M12.3986 17.117C12.0367 16.7551 11.5367 16.5312 10.9844 16.5312C10.4321 16.5312 9.93209 16.7551 9.57016 17.117L10.9844 18.5312L12.3986 17.117Z" stroke="none"/>
 </symbol>
 </svg>

src/assets/scss/_inputs.scss

+@import './color';
+@import './shapes';
+
 @mixin input-search {
   width: 100%;
   border: none;
@@ -7,3 +10,16 @@
   outline: none;
   font-style: italic;
 }
+
+.form-input {
+  min-width: 290px;
+  background: $grey-6;
+  border: 1px solid $grey-4;
+  box-sizing: border-box;
+  border-radius: $input-radius;
+  height: 40px;
+}
+.form-input:focus {
+  border: 1px solid $blue;
+  outline: none !important;
+}

src/assets/scss/_shapes.scss

@@ -2,7 +2,7 @@
 
 $card-radius: 0.625em;
 $bouton-radius: 0.625em;
-$input-radius: 0.3125em;
+$input-radius: 4px;
 $bouton-width: 12.25em;
 $round-bouton-radius: 1.25em;
 $round-radius: 50%;

src/assets/scss/_z-index.scss

-$structure-details-z-index: 1002;
-$modal-add-structure-z-index: 1002;
-$modal-filter-structure-z-index: 1002;
-$modal-menu-phone-z-index: 1002;
-$btn-phone-switch-map-list-z-index: 1001;
+// Phone view
+$btn-phone-switch-map-list-z-index: 1002;
+$menu-phone-z-index: 1003;
+
+// Structure details
+$structure-details-z-index: 1001;
+
+// Modals (filters/confirmationPopup/authen/...)
+$modal-z-index: 1002;

src/styles.scss

@@ -4,6 +4,7 @@
 @import 'assets/scss/color';
 @import 'assets/scss/breakpoint';
 @import 'assets/scss/icons';
+@import 'assets/scss/inputs';
 @import '../node_modules/leaflet.locatecontrol/dist/L.Control.Locate.css';
 
 html {