From 26159b2fba1e73cb9c9568e1ff2789c2b15b25f1 Mon Sep 17 00:00:00 2001
From: Pierre Narcisi <pierre.narcisi@mnhn.fr>
Date: Mon, 11 Mar 2024 10:15:00 +0100
Subject: [PATCH] Feat(lint) scss and html in contribs

---
 .../delete-modal/delete-modal.component.html  |  10 +-
 .../occhab-info/occhab-info.component.html    | 190 +++--
 .../occhab-form.component.html                | 118 ++-
 .../occhab-form.component.scss                |   3 +-
 .../modal-download.component.html             |  58 +-
 .../occhab-map-list-filter.component.html     |  18 +-
 .../occhab-map-list.component.html            |  34 +-
 .../validation-definitions.component.html     |  25 +-
 .../validation-definitions.component.scss     |   6 +-
 .../validation-modal-info-obs.component.html  |  56 +-
 .../validation-modal-info-obs.component.scss  |   4 +-
 .../validation-popup.component.html           |  87 +--
 .../validation-synthese-carte.component.html  |   5 +-
 .../validation-synthese-list.component.html   | 196 +++--
 .../validation-synthese-list.component.scss   |  17 +-
 .../app/components/validation.component.html  |   5 +-
 .../app/components/validation.component.scss  |   8 +-
 .../counting/counting.component.html          | 110 ++-
 .../counting/counting.component.scss          |   7 +-
 .../form-param/form-param.dialog.html         | 199 ++---
 .../form-param/form-param.dialog.scss         |  32 +-
 .../occtax-form/map/occtax-map.component.html |  24 +-
 .../occtax-form/occtax-form.component.html    |  42 +-
 .../occtax-form/occtax-form.component.scss    |  15 +-
 .../occurrence/occurrence.component.html      | 475 ++++++------
 .../occurrence/occurrence.component.scss      |   2 +-
 .../occurrence/profiles.component.html        |  21 +-
 .../occtax-form/releve/releve.component.html  | 273 +++----
 .../occtax-form/releve/releve.component.scss  |   8 +-
 .../taxa-list/taxa-list.component.html        | 605 +++++++++-------
 .../taxa-list/taxa-list.component.scss        |  37 +-
 .../occtax-map-info.component.html            | 679 ++++++++++++------
 .../occtax-map-info.component.scss            |  13 +-
 .../occtax-map-list-filter.component.html     | 104 +--
 .../occtax-map-list-filter.component.scss     |   4 +-
 .../occtax-map-list.component.html            | 172 +++--
 .../occtax-map-list.component.scss            |   8 +-
 37 files changed, 2037 insertions(+), 1633 deletions(-)

diff --git a/contrib/gn_module_occhab/frontend/app/components/delete-modal/delete-modal.component.html b/contrib/gn_module_occhab/frontend/app/components/delete-modal/delete-modal.component.html
index fa02c7ad45..db4c33a00e 100644
--- a/contrib/gn_module_occhab/frontend/app/components/delete-modal/delete-modal.component.html
+++ b/contrib/gn_module_occhab/frontend/app/components/delete-modal/delete-modal.component.html
@@ -12,13 +12,11 @@ <h4 class="modal-title pull-left">Suppression</h4>
 <div class="modal-body">
   <p>
     Attention vous vous apprêtez à supprimer une station qui comporte
-    {{nbHabitats}} habitat(s)
+    {{ nbHabitats }} habitat(s)
   </p>
-  <button
-    mat-raised-button
-    (click)="c()"
-    class="btn btn-secondary"
-  >Annuler</button>
+  <button mat-raised-button (click)="c()" class="btn btn-secondary">
+    Annuler
+  </button>
   <button
     mat-raised-button
     color="warn"
diff --git a/contrib/gn_module_occhab/frontend/app/components/occhab-info/occhab-info.component.html b/contrib/gn_module_occhab/frontend/app/components/occhab-info/occhab-info.component.html
index e0c0a07b26..b819aaffee 100644
--- a/contrib/gn_module_occhab/frontend/app/components/occhab-info/occhab-info.component.html
+++ b/contrib/gn_module_occhab/frontend/app/components/occhab-info/occhab-info.component.html
@@ -1,19 +1,15 @@
 <div class="row row-sm">
   <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 padding-sm">
     <pnx-map height="87vh">
-      <pnx-geojson
-        [geojson]="station"
-        [zoomOnFirstTime]="true"
-      >
-      </pnx-geojson>
+      <pnx-geojson [geojson]="station" [zoomOnFirstTime]="true"> </pnx-geojson>
     </pnx-map>
   </div>
   <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 padding-sm right-side">
     <div class="card border-primary bg-light">
       <h5 class="card-header bg-primary text-white">
-        Station n° {{station.properties.id_station}}
+        Station n° {{ station.properties.id_station }}
         <button
-          matTooltip="Editez le relevé {{station?.id}}"
+          matTooltip="Editez le relevé {{ station?.id }}"
           mat-mini-fab
           class="button-success float-right"
           type="button"
@@ -23,7 +19,7 @@ <h5 class="card-header bg-primary text-white">
           <mat-icon>edit</mat-icon>
         </button>
         <button
-          matTooltip="Supprimer le relevé {{station?.id}}"
+          matTooltip="Supprimer le relevé {{ station?.id }}"
           mat-mini-fab
           color="warn"
           type="button"
@@ -33,27 +29,22 @@ <h5 class="card-header bg-primary text-white">
         >
           <mat-icon>delete</mat-icon>
         </button>
-
       </h5>
-      <div
-        class="card-body"
-        id="card-station"
-      >
-
+      <div class="card-body" id="card-station">
         <div class="content row">
           <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 padding-sm">
             <h5>
               <b class="text-muted">Jeu de donnée :</b>
             </h5>
-            <p> {{station?.properties.dataset?.dataset_name}} </p>
+            <p>{{ station?.properties.dataset?.dataset_name }}</p>
           </div>
           <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 padding-sm">
             <h5>
               <b class="text-muted">Date :</b>
             </h5>
             <p>
-              {{station?.properties.date_min | date:'dd/MM/yyyy'}} -
-              {{station?.properties.date_max | date:'dd/MM/yyyy'}}
+              {{ station?.properties.date_min | date: "dd/MM/yyyy" }} -
+              {{ station?.properties.date_max | date: "dd/MM/yyyy" }}
             </p>
           </div>
           <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 padding-sm">
@@ -61,105 +52,123 @@ <h5>
               <b class="text-muted">Observateur(s) :</b>
             </h5>
             <div *ngIf="station?.properties.observers; else elseBlock">
-              <p *ngFor="let obs of station.properties.observers; let last=last">
-                {{obs.nom_role}} {{obs.prenom_role}}
+              <p
+                *ngFor="
+                  let obs of station.properties.observers;
+                  let last = last
+                "
+              >
+                {{ obs.nom_role }} {{ obs.prenom_role }}
                 <span *ngIf="!last">, </span>
               </p>
             </div>
             <ng-template #elseBlock>
-              <p>{{station?.properties.observers_txt}} </p>
+              <p>{{ station?.properties.observers_txt }}</p>
             </ng-template>
           </div>
-
-
         </div>
         <div class="content row">
           <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 padding-sm">
-            <h5> <b class="text-muted">Altitude (en m) : </b> </h5>
-            <p>{{station?.properties.altitude_min}} - {{station?.properties.altitude_max}}</p>
+            <h5><b class="text-muted">Altitude (en m) : </b></h5>
+            <p>
+              {{ station?.properties.altitude_min }} -
+              {{ station?.properties.altitude_max }}
+            </p>
           </div>
           <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 padding-sm">
-            <h5> <b class="text-muted">Surface (en m²) : </b> </h5>
-            <p> {{station?.properties.area}} <small>(
-                {{station?.properties.nomenclature_area_surface_calculation?.label_default}} )</small></p>
+            <h5><b class="text-muted">Surface (en m²) : </b></h5>
+            <p>
+              {{ station?.properties.area }}
+              <small
+                >(
+                {{
+                  station?.properties.nomenclature_area_surface_calculation
+                    ?.label_default
+                }}
+                )</small
+              >
+            </p>
           </div>
           <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 padding-sm">
-            <h5> <b class="text-muted">Type d'information géographique : </b> </h5>
+            <h5>
+              <b class="text-muted">Type d'information géographique : </b>
+            </h5>
             <p *ngIf="station?.properties.nomenclature_geographic_object">
-              {{station.properties.nomenclature_geographic_object.label_default}} </p>
+              {{
+                station.properties.nomenclature_geographic_object.label_default
+              }}
+            </p>
           </div>
-
         </div>
         <div class="content row">
           <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 padding-sm">
-            <h5> <b class="text-muted">Habitats de la station : </b> </h5>
+            <h5><b class="text-muted">Habitats de la station : </b></h5>
             <table class="table table-hover">
               <tr
                 class="clickable"
-                [ngClass]="{'table-primary': i == selectedIndex}"
-                *ngFor="let hab of station?.properties.habitats; let i=index"
+                [ngClass]="{ 'table-primary': i == selectedIndex }"
+                *ngFor="let hab of station?.properties.habitats; let i = index"
                 (click)="setCurrentHab(i); getHabInfo(hab.cd_hab)"
               >
-                <td> {{hab.nom_cite}}</td>
+                <td>{{ hab.nom_cite }}</td>
                 <td>
-                  <i
-                    class="fa fa-eye clickable"
-                    aria-hidden="true"
-                  ></i>
+                  <i class="fa fa-eye clickable" aria-hidden="true"></i>
                 </td>
               </tr>
             </table>
           </div>
 
-          <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 ">
-            <h5> <b class="text-muted">Commentaire : </b> </h5>
-            <p>{{station?.properties.comment}} </p>
+          <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
+            <h5><b class="text-muted">Commentaire : </b></h5>
+            <p>{{ station?.properties.comment }}</p>
           </div>
-
         </div>
-
-
       </div>
     </div>
-    <br>
+    <br />
     <!-- SELECTED HAB -->
-    <div
-      *ngIf="currentHab"
-      class="card border-primary"
-    >
-      <h5 class="card-header bg-primary text-white">{{currentHab?.nom_cite}}</h5>
+    <div *ngIf="currentHab" class="card border-primary">
+      <h5 class="card-header bg-primary text-white">
+        {{ currentHab?.nom_cite }}
+      </h5>
 
       <div class="card-body">
         <div class="row">
           <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding-sm">
             <b class="text-muted">Technique de collecte : </b>
-            {{currentHab?.nomenclature_collection_technique?.label_default}} <br>
+            {{ currentHab?.nomenclature_collection_technique?.label_default }}
+            <br />
             <b class="text-muted">Méthode de détermination : </b>
-            {{currentHab?.nomenclature_determination_type?.label_default}} <br>
+            {{ currentHab?.nomenclature_determination_type?.label_default }}
+            <br />
             <b class="text-muted">Pourcentage de recouvrement : </b>
-            {{currentHab?.nomenclature_recovery_percentage}} <br>
-            <b class="text-muted">Abondance : </b> {{currentHab?.nomenclature_abundance?.label_default}} <br>
+            {{ currentHab?.nomenclature_recovery_percentage }} <br />
+            <b class="text-muted">Abondance : </b>
+            {{ currentHab?.nomenclature_abundance?.label_default }} <br />
           </div>
           <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 padding-sm">
-            <h5 class="text-muted"> <b>Information sur l'habitat (Habref) : </b> </h5>
+            <h5 class="text-muted">
+              <b>Information sur l'habitat (Habref) : </b>
+            </h5>
             <p>
-              <b class="text-muted">Nom :</b> {{currentHab?.habref?.lb_code}} -
-              {{currentHab?.habref?.lb_hab_fr}}
+              <b class="text-muted">Nom :</b>
+              {{ currentHab?.habref?.lb_code }} -
+              {{ currentHab?.habref?.lb_hab_fr }}
               <i
                 class="fa fa-info-circle clickable"
                 aria-hidden="true"
-                (click)="openModalContent(modalInfo, habInfo?.lb_description )"
+                (click)="openModalContent(modalInfo, habInfo?.lb_description)"
               ></i>
-
             </p>
-            <b class="text-muted"> Typologie : </b> {{habInfo?.typo.lb_nom_typo}}
+            <b class="text-muted"> Typologie : </b>
+            {{ habInfo?.typo.lb_nom_typo }}
             <i
               class="fa fa-info-circle clickable"
               aria-hidden="true"
-              (click)="openModalContent(modalInfo, habInfo?.typo.presentation )"
+              (click)="openModalContent(modalInfo, habInfo?.typo.presentation)"
             ></i>
-            <br>
-            <br>
+            <br />
+            <br />
             <button
               (click)="openModal(modalCoresp)"
               type="button"
@@ -171,83 +180,54 @@ <h5 class="text-muted"> <b>Information sur l'habitat (Habref) : </b> </h5>
         </div>
       </div>
     </div>
-
   </div>
 
-  <ng-template
-    #modalInfo
-    let-d="dismiss"
-    let-c="close"
-  >
+  <ng-template #modalInfo let-d="dismiss" let-c="close">
     <div class="modal-header">
       <h3>Infos</h3>
-      <button
-        type="button"
-        class="close"
-        aria-label="Close"
-        (click)="c()"
-      >
+      <button type="button" class="close" aria-label="Close" (click)="c()">
         <span aria-hidden="true">&times;</span>
       </button>
     </div>
     <div class="modal-body">
-      {{modalContent}}
+      {{ modalContent }}
       <div *ngIf="!modalContent || modalContent.length == 0">
         Aucune information complémentaire
       </div>
     </div>
-
-
   </ng-template>
 
-  <ng-template
-    #modalCoresp
-    let-d="dismiss"
-    let-c="close"
-  >
+  <ng-template #modalCoresp let-d="dismiss" let-c="close">
     <div class="modal-header">
-      <h3> Correspondances </h3>
-      <button
-        type="button"
-        class="close"
-        aria-label="Close"
-        (click)="c()"
-      >
+      <h3>Correspondances</h3>
+      <button type="button" class="close" aria-label="Close" (click)="c()">
         <span aria-hidden="true">&times;</span>
       </button>
     </div>
     <div class="modal-body">
       <table class="table">
         <thead>
-          <th> Habitat </th>
-          <th> Typologie </th>
-          <th> Type de relation </th>
+          <th>Habitat</th>
+          <th>Typologie</th>
+          <th>Type de relation</th>
         </thead>
         <tbody>
           <tr *ngFor="let cor of habInfo?.correspondances">
-            <td> {{cor.habref.lb_code}} {{cor.habref.lb_hab_fr}} </td>
-            <td> {{cor.habref.typo.lb_nom_typo}} </td>
-            <td> {{cor.type_rel?.lb_rel}} </td>
+            <td>{{ cor.habref.lb_code }} {{ cor.habref.lb_hab_fr }}</td>
+            <td>{{ cor.habref.typo.lb_nom_typo }}</td>
+            <td>{{ cor.type_rel?.lb_rel }}</td>
           </tr>
         </tbody>
       </table>
     </div>
-
-
   </ng-template>
 
-  <ng-template
-    #deleteModal
-    let-c="close"
-  >
-
+  <ng-template #deleteModal let-c="close">
     <pnx-occhab-delete
       [c]="c"
       [idStation]="station?.id"
       [nbHabitats]="station.properties.habitats.length"
     >
     </pnx-occhab-delete>
-
   </ng-template>
-
 </div>
diff --git a/contrib/gn_module_occhab/frontend/app/components/occhab-map-form/occhab-form.component.html b/contrib/gn_module_occhab/frontend/app/components/occhab-map-form/occhab-form.component.html
index 88afdfc32c..91ef0eeefd 100644
--- a/contrib/gn_module_occhab/frontend/app/components/occhab-map-form/occhab-form.component.html
+++ b/contrib/gn_module_occhab/frontend/app/components/occhab-map-form/occhab-form.component.html
@@ -22,7 +22,9 @@
                 "
               >
                 <tr *ngIf="i != occHabForm.currentEditingHabForm">
-                  <td>{{ occHabForm.stationForm.value.habitats.length - i }}</td>
+                  <td>
+                    {{ occHabForm.stationForm.value.habitats.length - i }}
+                  </td>
                   <td>{{ hab?.nom_cite }}</td>
                   <td>{{ hab?.id_nomenclature_abundance?.label_default }}</td>
                   <td>
@@ -95,7 +97,9 @@ <h5 class="card-header bg-primary text-white">
             <div class="col-6 padding-sm">
               <div *ngIf="config.OCCHAB.OBSERVER_AS_TXT; else observerIDBlock">
                 <pnx-observers-text
-                  [parentFormControl]="occHabForm.stationForm.get('observers_txt')"
+                  [parentFormControl]="
+                    occHabForm.stationForm.get('observers_txt')
+                  "
                 >
                 </pnx-observers-text>
               </div>
@@ -117,9 +121,13 @@ <h5 class="card-header bg-primary text-white">
                   else elseblocDataset
                 "
               >
-                <small> {{ 'MetaData.Datasets' | translate }}: </small>
+                <small> {{ "MetaData.Datasets" | translate }}: </small>
                 <small>
-                  <b> {{ currentEditingStation?.properties?.dataset?.dataset_name }}</b>
+                  <b>
+                    {{
+                      currentEditingStation?.properties?.dataset?.dataset_name
+                    }}</b
+                  >
                 </small>
               </div>
               <ng-template #elseblocDataset>
@@ -145,7 +153,13 @@ <h5 class="card-header bg-primary text-white">
                   [defaultToday]="true"
                   label="{{ 'Releve.MinDate' | translate }}"
                   [parentFormControl]="occHabForm.stationForm.get('date_min')"
-                  (onSelectOrKeyIn)="globalFormService.synchronizeMax(occHabForm.stationForm, 'date_min', 'date_max')"
+                  (onSelectOrKeyIn)="
+                    globalFormService.synchronizeMax(
+                      occHabForm.stationForm,
+                      'date_min',
+                      'date_max'
+                    )
+                  "
                 >
                 </pnx-date>
               </div>
@@ -157,7 +171,13 @@ <h5 class="card-header bg-primary text-white">
                   [defaultToday]="true"
                   label="{{ 'Releve.MaxDate' | translate }}"
                   [parentFormControl]="occHabForm.stationForm.get('date_max')"
-                  (onSelectOrKeyIn)="globalFormService.synchronizeMin(occHabForm.stationForm, 'date_min', 'date_max')"
+                  (onSelectOrKeyIn)="
+                    globalFormService.synchronizeMin(
+                      occHabForm.stationForm,
+                      'date_min',
+                      'date_max'
+                    )
+                  "
                 >
                 </pnx-date>
               </div>
@@ -167,7 +187,7 @@ <h5 class="card-header bg-primary text-white">
               class="error"
               style="color: red"
             >
-              {{ 'Releve.DateMaxError' | translate }}
+              {{ "Releve.DateMaxError" | translate }}
             </small>
           </div>
 
@@ -198,7 +218,11 @@ <h5 class="card-header bg-primary text-white">
               <button
                 (click)="isCollapseDepth = !isCollapseDepth"
                 [attr.aria-expanded]="!isCollapseDepth"
-                *ngIf="!showDepth && (config.OCCHAB.formConfig['depth_min'] || config.OCCHAB.formConfig['depth_max'])"
+                *ngIf="
+                  !showDepth &&
+                  (config.OCCHAB.formConfig['depth_min'] ||
+                    config.OCCHAB.formConfig['depth_max'])
+                "
                 class="btn btn-sm btn-outline-shadow depth-button"
               >
                 <i class="fa fa-plus" aria-expanded="false"></i>
@@ -218,7 +242,7 @@ <h5 class="card-header bg-primary text-white">
               class="error"
               style="color: red"
             >
-              {{ 'Releve.AltitudeError' | translate }}
+              {{ "Releve.AltitudeError" | translate }}
             </small>
           </div>
 
@@ -252,7 +276,9 @@ <h5 class="card-header bg-primary text-white">
           <pnx-dumb-select
             *ngIf="config.OCCHAB.formConfig['exposure']"
             label="Exposition"
-            [parentFormControl]="occHabForm.stationForm.get('id_nomenclature_exposure')"
+            [parentFormControl]="
+              occHabForm.stationForm.get('id_nomenclature_exposure')
+            "
             [items]="storeService.nomenclatureItems.EXPOSITION"
             comparedKey="id_nomenclature"
             titleKey="definition_fr"
@@ -278,7 +304,9 @@ <h5 class="card-header bg-primary text-white">
                 *ngIf="config.OCCHAB.formConfig['area_surface_calculation']"
                 label="Méthode de calcul de la surface"
                 [parentFormControl]="
-                  occHabForm.stationForm.get('id_nomenclature_area_surface_calculation')
+                  occHabForm.stationForm.get(
+                    'id_nomenclature_area_surface_calculation'
+                  )
                 "
                 [items]="storeService.nomenclatureItems.METHOD_CALCUL_SURFACE"
                 comparedKey="id_nomenclature"
@@ -295,7 +323,9 @@ <h5 class="card-header bg-primary text-white">
                 *ngIf="config.OCCHAB.formConfig['geographic_object']"
                 label="Nature objet géographique"
                 [parentFormControl]="
-                  occHabForm.stationForm.get('id_nomenclature_geographic_object')
+                  occHabForm.stationForm.get(
+                    'id_nomenclature_geographic_object'
+                  )
                 "
                 [items]="storeService.nomenclatureItems.NAT_OBJ_GEO"
                 comparedKey="id_nomenclature"
@@ -307,10 +337,7 @@ <h5 class="card-header bg-primary text-white">
             </div>
           </div>
 
-          <div
-            class="row row-0"
-            *ngIf="config.OCCHAB.formConfig['comment']"
-          >
+          <div class="row row-0" *ngIf="config.OCCHAB.formConfig['comment']">
             <div class="form-group col-6 padding-sm">
               <textarea
                 class="form-control form-control-sm"
@@ -331,7 +358,9 @@ <h5 class="card-header bg-primary text-white">
         mat-raised-button
         class="button-success uppercase"
         (click)="postStation()"
-        [disabled]="occHabForm.stationForm.invalid || showHabForm || !atLeastOneHab"
+        [disabled]="
+          occHabForm.stationForm.invalid || showHabForm || !atLeastOneHab
+        "
       >
         Valider la station
       </button>
@@ -348,7 +377,11 @@ <h5 class="card-header text-white" id="header-form-hab">
               class="btn btn-sm float-right"
               (click)="addNewHab()"
             >
-              <i style="color: rgb(0, 233, 0)" class="fa fa-plus" aria-hidden="true"></i>
+              <i
+                style="color: rgb(0, 233, 0)"
+                class="fa fa-plus"
+                aria-hidden="true"
+              ></i>
               Ajouter un habitat à la station
             </button>
             <button
@@ -370,7 +403,10 @@ <h5 class="card-header text-white" id="header-form-hab">
                   class="form-control form-control-sm"
                 >
                   <option [ngValue]="null">Toutes</option>
-                  <option *ngFor="let typo of storeService.typoHabitat" [ngValue]="typo.cd_typo">
+                  <option
+                    *ngFor="let typo of storeService.typoHabitat"
+                    [ngValue]="typo.cd_typo"
+                  >
                     {{ typo.lb_nom_typo }}
                   </option>
                 </select>
@@ -380,7 +416,9 @@ <h5 class="card-header text-white" id="header-form-hab">
             <div class="form-row">
               <div class="col-6 inline">
                 <pnx-autocomplete
-                  apiEndPoint="{{config.API_ENDPOINT}}/habref/habitats/autocomplete"
+                  apiEndPoint="{{
+                    config.API_ENDPOINT
+                  }}/habref/habitats/autocomplete"
                   [searchAsParameter]="false"
                   [parentFormControl]="
                     occHabForm.stationForm
@@ -388,7 +426,10 @@ <h5 class="card-header text-white" id="header-form-hab">
                       .controls[occHabForm.currentEditingHabForm].get('habref')
                   "
                   queryParamSearch="search_name"
-                  [othersGetParams]="{cd_type: occHabForm.typoHabControl.value, id_list: config.OCCHAB.ID_LIST_HABITAT}"
+                  [othersGetParams]="{
+                    cd_type: occHabForm.typoHabControl.value,
+                    id_list: config.OCCHAB.ID_LIST_HABITAT
+                  }"
                   [formatter]="formatter"
                   keyValue="search_name"
                   label="Habitat"
@@ -430,10 +471,7 @@ <h5 class="card-header text-white" id="header-form-hab">
             </div>
 
             <div class="form-row">
-              <div
-                class="col"
-                *ngIf="config.OCCHAB.formConfig['determiner']"
-              >
+              <div class="col" *ngIf="config.OCCHAB.formConfig['determiner']">
                 <small> Déterminateur</small>
                 <input
                   type="text"
@@ -442,7 +480,9 @@ <h5 class="card-header text-white" id="header-form-hab">
                   [formControl]="
                     occHabForm.stationForm
                       .get('habitats')
-                      .controls[occHabForm.currentEditingHabForm].get('determiner')
+                      .controls[occHabForm.currentEditingHabForm].get(
+                        'determiner'
+                      )
                   "
                 />
               </div>
@@ -501,20 +541,24 @@ <h5 class="card-header text-white" id="header-form-hab">
                 [formControl]="
                   occHabForm.stationForm
                     .get('habitats')
-                    .controls[occHabForm.currentEditingHabForm].get('technical_precision')
+                    .controls[occHabForm.currentEditingHabForm].get(
+                      'technical_precision'
+                    )
                 "
               />
             </div>
 
             <small
               *ngIf="
-                occHabForm.stationForm.get('habitats').controls[occHabForm.currentEditingHabForm]
-                  .errors?.invalidTechnicalValues
+                occHabForm.stationForm.get('habitats').controls[
+                  occHabForm.currentEditingHabForm
+                ].errors?.invalidTechnicalValues
               "
               class="error"
               style="color: red"
             >
-              Veuillez fournir des précisions concernant la technique de collecte
+              Veuillez fournir des précisions concernant la technique de
+              collecte
             </small>
 
             <div
@@ -529,7 +573,9 @@ <h5 class="card-header text-white" id="header-form-hab">
                 [formControl]="
                   occHabForm.stationForm
                     .get('habitats')
-                    .controls[occHabForm.currentEditingHabForm].get('recovery_percentage')
+                    .controls[occHabForm.currentEditingHabForm].get(
+                      'recovery_percentage'
+                    )
                 "
               />
             </div>
@@ -540,7 +586,9 @@ <h5 class="card-header text-white" id="header-form-hab">
               [parentFormControl]="
                 occHabForm.stationForm
                   .get('habitats')
-                  .controls[occHabForm.currentEditingHabForm].get('id_nomenclature_abundance')
+                  .controls[occHabForm.currentEditingHabForm].get(
+                    'id_nomenclature_abundance'
+                  )
               "
               [items]="storeService.nomenclatureItems.ABONDANCE_HAB"
               comparedKey="id_nomenclature"
@@ -562,8 +610,9 @@ <h5 class="card-header text-white" id="header-form-hab">
                 occHabForm.stationForm.get('habitats').controls[
                   occHabForm.currentEditingHabForm
                 ] &&
-                occHabForm.stationForm.get('habitats').controls[occHabForm.currentEditingHabForm]
-                  .invalid
+                occHabForm.stationForm.get('habitats').controls[
+                  occHabForm.currentEditingHabForm
+                ].invalid
               "
               data-qa="pnx-occhab-form-valid-button"
             >
@@ -574,6 +623,5 @@ <h5 class="card-header text-white" id="header-form-hab">
         </div>
       </div>
     </div>
-
   </div>
 </div>
diff --git a/contrib/gn_module_occhab/frontend/app/components/occhab-map-form/occhab-form.component.scss b/contrib/gn_module_occhab/frontend/app/components/occhab-map-form/occhab-form.component.scss
index 0af5758a39..fb6dd4663c 100644
--- a/contrib/gn_module_occhab/frontend/app/components/occhab-map-form/occhab-form.component.scss
+++ b/contrib/gn_module_occhab/frontend/app/components/occhab-map-form/occhab-form.component.scss
@@ -37,7 +37,8 @@ tbody {
   position: absolute;
   right: 50px;
   bottom: -10px;
-  box-shadow: 3px 5px 10px 2px rgba(0, 0, 0, 0.51),
+  box-shadow:
+    3px 5px 10px 2px rgba(0, 0, 0, 0.51),
     0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
diff --git a/contrib/gn_module_occhab/frontend/app/components/occhab-map-list/modal-download.component.html b/contrib/gn_module_occhab/frontend/app/components/occhab-map-list/modal-download.component.html
index c1276dd4b3..d8f9109fd0 100644
--- a/contrib/gn_module_occhab/frontend/app/components/occhab-map-list/modal-download.component.html
+++ b/contrib/gn_module_occhab/frontend/app/components/occhab-map-list/modal-download.component.html
@@ -1,74 +1,57 @@
 <div class="modal-header">
-  <h5
-    class="modal-title"
-    id="modalLabel"
-  > Téléchargement </h5>
+  <h5 class="modal-title" id="modalLabel">Téléchargement</h5>
   <button
     type="button"
     class="close"
     aria-label="Close"
-    (click)="activeModal.close();"
+    (click)="activeModal.close()"
   >
     <span aria-hidden="true">&times;</span>
   </button>
 </div>
 <div class="modal-body">
   <div *ngIf="tooManyObs">
-
-    <div
-      class="alert alert-danger"
-      role="alert"
-    >
-      <b> Attention ! </b> Votre requête comporte un nombre trop important de stations pour que
-      celles-ci soient affichées sur la
-      carte.
+    <div class="alert alert-danger" role="alert">
+      <b> Attention ! </b> Votre requête comporte un nombre trop important de
+      stations pour que celles-ci soient affichées sur la carte.
     </div>
 
-    <div
-      class="alert alert-warning"
-      role="alert"
-    >
-      Vous pouvez néamoins exporter les données, dans une limite de <b>
-        {{config.OCCHAB.NB_MAX_EXPORT}} </b>
+    <div class="alert alert-warning" role="alert">
+      Vous pouvez néamoins exporter les données, dans une limite de
+      <b> {{ config.OCCHAB.NB_MAX_EXPORT }} </b>
       stations en cliquant sur les liens ci-dessous
     </div>
 
-    <div
-      class="alert alert-warning"
-      role="alert"
-    >
+    <div class="alert alert-warning" role="alert">
       En fermant cette fenêtre vous pouvez visualiser <b> seulement</b> les
-      {{config.OCCHAB.NB_MAX_MAP_LIST}} dernières
-      stations correspondant à votre requête. <br>
+      {{ config.OCCHAB.NB_MAX_MAP_LIST }} dernières stations correspondant à
+      votre requête. <br />
     </div>
-
   </div>
-  <h5 class="underlined second-color"> Télécharger les habitats des stations </h5>
-  <div style="margin-bottom:5px;">
+  <h5 class="underlined second-color">Télécharger les habitats des stations</h5>
+  <div style="margin-bottom: 5px">
     <p>
-      <i
-        class="fa fa-info-circle"
-        aria-hidden="true"
-      ></i>
-      Votre recherche comporte {{storeService.idsStation.length}} station(s) d'habitat
+      <i class="fa fa-info-circle" aria-hidden="true"></i>
+      Votre recherche comporte {{ storeService.idsStation.length }} station(s)
+      d'habitat
     </p>
     <p *ngIf="!tooManyObs">
-      <b>NB: </b> Le limite du nombre d'habitat exportables est de {{config.OCCHAB.NB_MAX_EXPORT}}
+      <b>NB: </b> Le limite du nombre d'habitat exportables est de
+      {{ config.OCCHAB.NB_MAX_EXPORT }}
     </p>
     <button
       *ngFor="let format of config.OCCHAB.EXPORT_FORMAT"
-      style="margin-left: 5px;"
+      style="margin-left: 5px"
       class="buttonLoad"
       (click)="downloadStations(format)"
       type="button"
       mat-raised-button
       class="button-success"
     >
-      Format {{format}}
+      Format {{ format }}
     </button>
   </div>
 
-
   <!-- <h5 class="underlined second-color"> Télécharger les métadonnées</h5>
   <div>
     <button [disabled]="_dataService.isDownloading" class="btn btn-success" (click)="downloadStatusOrMetadata('synthese/export_metadata', 'synthese_metadata')">
@@ -77,7 +60,6 @@ <h5 class="underlined second-color"> Télécharger les habitats des stations </h
     </button>
   </div> -->
 
-
   <!-- <div *ngIf="_dataService.isDownloading" class="telechargement card" style="margin-top: 30px;">
     <div class="card-body text-{{bstype}}" >
       {{'Downloading' | translate }}
diff --git a/contrib/gn_module_occhab/frontend/app/components/occhab-map-list/occhab-map-list-filter.component.html b/contrib/gn_module_occhab/frontend/app/components/occhab-map-list/occhab-map-list-filter.component.html
index 1ee24e9d87..c62fe74d21 100644
--- a/contrib/gn_module_occhab/frontend/app/components/occhab-map-list/occhab-map-list-filter.component.html
+++ b/contrib/gn_module_occhab/frontend/app/components/occhab-map-list/occhab-map-list-filter.component.html
@@ -11,11 +11,11 @@
   </div>
   <div class="col-3">
     <pnx-autocomplete
-      apiEndPoint="{{config.API_ENDPOINT}}/habref/habitats/autocomplete"
+      apiEndPoint="{{ config.API_ENDPOINT }}/habref/habitats/autocomplete"
       [searchAsParameter]="false"
       [parentFormControl]="mapListFormService.searchForm.get('habitat')"
       queryParamSearch="search_name"
-      [othersGetParams]="{id_list: config.OCCHAB.ID_LIST_HABITAT}"
+      [othersGetParams]="{ id_list: config.OCCHAB.ID_LIST_HABITAT }"
       [formatter]="formatter"
       keyValue="search_name"
       label="Habitat"
@@ -39,11 +39,7 @@
     </pnx-date>
   </div>
 
-  <button
-    mat-raised-button
-    color="primary"
-    (click)="searchEvent($event)"
-  >
+  <button mat-raised-button color="primary" (click)="searchEvent($event)">
     Rechercher
   </button>
   <button
@@ -52,14 +48,8 @@
     (click)="resetFilterForm()"
     matTooltip="Raffraichir les filtres"
   >
-    <i
-      class="fa fa-refresh"
-      aria-hidden="true"
-    ></i>
+    <i class="fa fa-refresh" aria-hidden="true"></i>
   </button>
 
   <!-- {{mapListFormService.searchForm.value |json}} -->
-
-
-
 </div>
diff --git a/contrib/gn_module_occhab/frontend/app/components/occhab-map-list/occhab-map-list.component.html b/contrib/gn_module_occhab/frontend/app/components/occhab-map-list/occhab-map-list.component.html
index d55385c58a..c4e9a884c3 100644
--- a/contrib/gn_module_occhab/frontend/app/components/occhab-map-list/occhab-map-list.component.html
+++ b/contrib/gn_module_occhab/frontend/app/components/occhab-map-list/occhab-map-list.component.html
@@ -35,7 +35,8 @@
 
   <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding-sm">
     <div [(ngbCollapse)]="isCollapseFilter">
-      <pnx-occhab-map-list-filter (onSearch)="searchData($event)"> </pnx-occhab-map-list-filter>
+      <pnx-occhab-map-list-filter (onSearch)="searchData($event)">
+      </pnx-occhab-map-list-filter>
     </div>
     <button
       id="download-btn"
@@ -44,7 +45,7 @@
       class="btn-action uppercase"
       (click)="openModal()"
     >
-      {{ 'Download' | translate }}
+      {{ "Download" | translate }}
 
       <mat-icon>file_download</mat-icon>
     </button>
@@ -66,9 +67,15 @@
       data-qa="pnx-occhab-map-list-datatable"
     >
       <ngx-datatable-row-detail #myDetailRow rowHeight="100">
-        <ng-template ngx-datatable-row-detail-template let-row="row" let-expanded="expanded">
+        <ng-template
+          ngx-datatable-row-detail-template
+          let-row="row"
+          let-expanded="expanded"
+        >
           <div><strong>ID station : </strong>{{ row.id_station }}</div>
-          <ng-container *ngIf="row.comment !== null && row?.comment.trim() !== ''">
+          <ng-container
+            *ngIf="row.comment !== null && row?.comment.trim() !== ''"
+          >
             <div><strong>Commentaire : </strong>{{ row.comment }}</div>
           </ng-container>
           <div>
@@ -76,7 +83,7 @@
             >{{
               row.altitude_min == row.altitude_max
                 ? row.altitude_min
-                : row.altitude_min + ' - ' + row.altitude_max
+                : row.altitude_min + " - " + row.altitude_max
             }}
           </div>
           <div><strong>Observé par: </strong></div>
@@ -100,7 +107,11 @@
         [draggable]="false"
         [canAutoResize]="false"
       >
-        <ng-template ngx-datatable-cell-template let-row="row" let-expanded="expanded">
+        <ng-template
+          ngx-datatable-cell-template
+          let-row="row"
+          let-expanded="expanded"
+        >
           <a
             href="javascript:void(0)"
             matTooltip="Ouvrir/fermer le détail"
@@ -126,7 +137,7 @@
 
       <ngx-datatable-column maxWidth="10" [sortable]="false">
         <ng-template let-row="row" ngx-datatable-cell-template>
-          <button 
+          <button
             class="btn btn-outline-shadow btn-no-padding btn-ghost"
             [routerLink]="['edit', row.id_station]"
             [disabled]="!row.cruved.U"
@@ -150,7 +161,10 @@
 
       <ngx-datatable-column name="Habitat">
         <ng-template ngx-datatable-cell-template let-row="row">
-          <span [matTooltip]="displayHabTooltip(row).join('\n')" matTooltipPosition="left">
+          <span
+            [matTooltip]="displayHabTooltip(row).join('\n')"
+            matTooltipPosition="left"
+          >
             <span>
               <span class="badge badge-dark"> {{ row.habitats?.length }} </span>
               {{ displayHabTooltip(row) }}
@@ -161,8 +175,8 @@
 
       <ngx-datatable-column name="Date min">
         <ng-template ngx-datatable-cell-template let-row="row" maxWidth="50">
-          <span matTooltip="{{ row.date_min | date : 'dd-MM-yyyy' }}">
-            {{ row.date_min | date : 'dd-MM-yyyy' }}
+          <span matTooltip="{{ row.date_min | date: 'dd-MM-yyyy' }}">
+            {{ row.date_min | date: "dd-MM-yyyy" }}
           </span>
         </ng-template>
       </ngx-datatable-column>
diff --git a/contrib/gn_module_validation/frontend/app/components/validation-definitions/validation-definitions.component.html b/contrib/gn_module_validation/frontend/app/components/validation-definitions/validation-definitions.component.html
index 561b83907d..624ef684ad 100644
--- a/contrib/gn_module_validation/frontend/app/components/validation-definitions/validation-definitions.component.html
+++ b/contrib/gn_module_validation/frontend/app/components/validation-definitions/validation-definitions.component.html
@@ -4,32 +4,39 @@
   id="showDef"
   class="btn btn-sm btn-light box-shadow"
   (click)="getDefinitions()"
->Masquer les définitions des statuts</button>
+>
+  Masquer les définitions des statuts
+</button>
 <button
   *ngIf="!showDefinitions"
   type="button"
   id="hideDef"
   class="btn btn-sm btn-light box-shadow"
   (click)="getDefinitions()"
->Afficher les définitions des statuts</button>
+>
+  Afficher les définitions des statuts
+</button>
 
 <p></p>
 
 <table *ngIf="showDefinitions">
-
   <thead>
     <tr>
-      <th class="table_status"> Statut </th>
-      <th class="table_definition"> Définition </th>
+      <th class="table_status">Statut</th>
+      <th class="table_definition">Définition</th>
     </tr>
   </thead>
 
   <tbody>
     <tr *ngFor="let def of definitions">
-      <td [ngStyle]="{'background': config.VALIDATION.STATUS_INFO[def.cd_nomenclature]?.color}">
-        {{def.mnemonique }} </td>
-      <td> {{def.definition_default}} </td>
+      <td
+        [ngStyle]="{
+          background: config.VALIDATION.STATUS_INFO[def.cd_nomenclature]?.color
+        }"
+      >
+        {{ def.mnemonique }}
+      </td>
+      <td>{{ def.definition_default }}</td>
     </tr>
   </tbody>
-
 </table>
diff --git a/contrib/gn_module_validation/frontend/app/components/validation-definitions/validation-definitions.component.scss b/contrib/gn_module_validation/frontend/app/components/validation-definitions/validation-definitions.component.scss
index 33225fb725..b7dbedb4e6 100644
--- a/contrib/gn_module_validation/frontend/app/components/validation-definitions/validation-definitions.component.scss
+++ b/contrib/gn_module_validation/frontend/app/components/validation-definitions/validation-definitions.component.scss
@@ -7,13 +7,15 @@ th.table_status {
   width: 30%;
 }
 
-td,th {
+td,
+th {
   border: 1px solid black;
   text-align: left;
   padding: 8px;
 }
 
-button#showDef, button#hideDef{
+button#showDef,
+button#hideDef {
   width: 100% !important;
 }
 
diff --git a/contrib/gn_module_validation/frontend/app/components/validation-modal-info-obs/validation-modal-info-obs.component.html b/contrib/gn_module_validation/frontend/app/components/validation-modal-info-obs/validation-modal-info-obs.component.html
index fc6703cfa2..069398ebff 100644
--- a/contrib/gn_module_validation/frontend/app/components/validation-modal-info-obs/validation-modal-info-obs.component.html
+++ b/contrib/gn_module_validation/frontend/app/components/validation-modal-info-obs/validation-modal-info-obs.component.html
@@ -1,8 +1,11 @@
 <!-- MODAL HEADER -->
 <div class="modal-header padding-md-all">
-
   <h5 class="my-3 ml-3">
-    {{edit ? "Modifier le statut de validation" : "Information sur l'observation"}}
+    {{
+      edit
+        ? "Modifier le statut de validation"
+        : "Information sur l'observation"
+    }}
   </h5>
 
   <button
@@ -17,11 +20,7 @@ <h5 class="my-3 ml-3">
     <span aria-hidden="true">&times;</span>
   </button>
 </div>
-<div
-  *ngIf="edit"
-  id="statusChange"
-  class="m-4"
->
+<div *ngIf="edit" id="statusChange" class="m-4">
   <p>Sélectionner le statut de l'observation :</p>
   <form class="my-3">
     <div class="my-3">
@@ -32,9 +31,14 @@ <h5 class="my-3 ml-3">
       >
         <label
           [ngStyle]="{
-            'background-color': config.VALIDATION.STATUS_INFO[item.cd_nomenclature]?.color,
-            'color': ['0', '6'].includes(item.cd_nomenclature) ? 'darkslategray' : 'white',
-            'border-color': ['0', '6'].includes(item.cd_nomenclature) ? 'rgba(0,0,0,0.2)' : 'transparent'
+            'background-color':
+              config.VALIDATION.STATUS_INFO[item.cd_nomenclature]?.color,
+            color: ['0', '6'].includes(item.cd_nomenclature)
+              ? 'darkslategray'
+              : 'white',
+            'border-color': ['0', '6'].includes(item.cd_nomenclature)
+              ? 'rgba(0,0,0,0.2)'
+              : 'transparent'
           }"
           role="button"
           class="btn btn-success box-shadow status-badge"
@@ -44,16 +48,13 @@ <h5 class="my-3 ml-3">
             (click)="setCurrentCdNomenclature(item)"
             type="radio"
             [formControl]="statusForm.controls.statut"
-            value="{{item.id_nomenclature}}"
-          >
-          {{item.mnemonique}}</label>
+            value="{{ item.id_nomenclature }}"
+          />
+          {{ item.mnemonique }}</label
+        >
       </span>
     </div>
-    <mat-form-field
-      appearance="fill"
-      style="width:100%"
-      class="my-3"
-    >
+    <mat-form-field appearance="fill" style="width: 100%" class="my-3">
       <mat-label class="gn-color">Commentaire :</mat-label>
       <textarea
         matInput
@@ -99,23 +100,24 @@ <h5 class="my-3 ml-3">
   <button
     class="status-badge"
     mat-button
-    ngbTooltip="{{'Synthese.changeValidStatus' | translate}}"
+    ngbTooltip="{{ 'Synthese.changeValidStatus' | translate }}"
     (click)="editStatus()"
     [ngStyle]="{
       'background-color': currentValidationStatus?.color || 'red',
-      'color': ['0', '6'].includes(currentValidationStatus.cd_nomenclature) ? 'darkslategray' : 'white',
-      'border': ['0', '6'].includes(currentValidationStatus.cd_nomenclature) ? '1px solid rgba(0,0,0,0.2)' : 'transparent'
+      color: ['0', '6'].includes(currentValidationStatus.cd_nomenclature)
+        ? 'darkslategray'
+        : 'white',
+      border: ['0', '6'].includes(currentValidationStatus.cd_nomenclature)
+        ? '1px solid rgba(0,0,0,0.2)'
+        : 'transparent'
     }"
   >
-    {{currentValidationStatus.mnemonique}}
+    {{ currentValidationStatus.mnemonique }}
     <mat-icon>edit</mat-icon>
   </button>
 </pnx-synthese-info-obs>
 <!--<div class="modal-footer justify-content-between">-->
-<div
-  class="modal-footer"
-  *ngIf="!edit"
->
+<div class="modal-footer" *ngIf="!edit">
   <div id="navigButtons">
     <button
       [disabled]="!isPrevButtonValid"
@@ -132,4 +134,4 @@ <h5 class="my-3 ml-3">
       <i class="material-icons">navigate_next</i>
     </button>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/contrib/gn_module_validation/frontend/app/components/validation-modal-info-obs/validation-modal-info-obs.component.scss b/contrib/gn_module_validation/frontend/app/components/validation-modal-info-obs/validation-modal-info-obs.component.scss
index 225ca5180e..eb9ac085c4 100644
--- a/contrib/gn_module_validation/frontend/app/components/validation-modal-info-obs/validation-modal-info-obs.component.scss
+++ b/contrib/gn_module_validation/frontend/app/components/validation-modal-info-obs/validation-modal-info-obs.component.scss
@@ -24,7 +24,9 @@ label:hover {
   color: "black";
   border: 1px solid black;
   text-align: center;
-  font: 15px Arial, sans-serif;
+  font:
+    15px Arial,
+    sans-serif;
   position: absolute;
   //left:0%;
   transform: translateX(0%);
diff --git a/contrib/gn_module_validation/frontend/app/components/validation-popup/validation-popup.component.html b/contrib/gn_module_validation/frontend/app/components/validation-popup/validation-popup.component.html
index 5cddc9d11d..e00edfcda7 100644
--- a/contrib/gn_module_validation/frontend/app/components/validation-popup/validation-popup.component.html
+++ b/contrib/gn_module_validation/frontend/app/components/validation-popup/validation-popup.component.html
@@ -11,24 +11,13 @@
   Attribuer un statut de validation
 </button>
 
-
-<ng-template
-  #content
-  let-c="close"
-  let-d="dismiss"
->
-
+<ng-template #content let-c="close" let-d="dismiss">
   <!-- Modal Validation Popup-->
 
   <!-- Modal content-->
 
   <form class="modal-content">
-
-
-    <div
-      class="modal-header"
-      style="justify-content: center"
-    >
+    <div class="modal-header" style="justify-content: center">
       <h4 class="modal-title">Modification du statut de validation</h4>
       <button
         type="button"
@@ -40,36 +29,32 @@ <h4 class="modal-title">Modification du statut de validation</h4>
       </button>
     </div>
 
-    <div
-      class="modal-body"
-      id="bodyModal"
-      style="padding-top:30px;"
-    >
-
-      <div> <span id="nbObs">{{this.observations.length}}</span> observation{{plurielObservations}}
-        sélectionnée{{plurielObservations}} </div>
-      <div
-        *ngIf="nbOffPage !== 0"
-        class="d-flex"
-      ><i
-          id="attention"
-          class="material-icons"
-        >warning</i> Attention {{nbOffPage}} observation{{plurielNbOffPage}}
-        non-visible{{plurielNbOffPage}} (hors de la page courante) sélectionnée{{plurielNbOffPage}}
+    <div class="modal-body" id="bodyModal" style="padding-top: 30px">
+      <div>
+        <span id="nbObs">{{ this.observations.length }}</span> observation{{
+          plurielObservations
+        }}
+        sélectionnée{{ plurielObservations }}
+      </div>
+      <div *ngIf="nbOffPage !== 0" class="d-flex">
+        <i id="attention" class="material-icons">warning</i> Attention
+        {{ nbOffPage }} observation{{ plurielNbOffPage }} non-visible{{
+          plurielNbOffPage
+        }}
+        (hors de la page courante) sélectionnée{{ plurielNbOffPage }}
       </div>
 
-      <br>
+      <br />
       <fieldset>
-        <legend> Choix du statut </legend>
+        <legend>Choix du statut</legend>
 
         <div>
-          <span
-            *ngFor="let item of validationStatus"
-            id="validButtons"
-          >
-
+          <span *ngFor="let item of validationStatus" id="validButtons">
             <label
-              [ngStyle]="{'background-color': config.VALIDATION.STATUS_INFO[item.cd_nomenclature]?.color}"
+              [ngStyle]="{
+                'background-color':
+                  config.VALIDATION.STATUS_INFO[item.cd_nomenclature]?.color
+              }"
               role="button"
               class="btn btn-success box-shadow"
               aria-pressed="true"
@@ -78,39 +63,32 @@ <h4 class="modal-title">Modification du statut de validation</h4>
                 (click)="setCurrentCdNomenclature(item)"
                 type="radio"
                 [formControl]="statusForm.controls.statut"
-                value="{{item.id_nomenclature}}"
-              >
-              {{item.mnemonique}}</label>
+                value="{{ item.id_nomenclature }}"
+              />
+              {{ item.mnemonique }}</label
+            >
           </span>
         </div>
-        <br>
+        <br />
         <div id="def">
           <pnx-validation-definitions></pnx-validation-definitions>
         </div>
-
       </fieldset>
 
-
-      <div
-        class="md-form mb-0"
-        style="padding-top:30px;"
-      >
+      <div class="md-form mb-0" style="padding-top: 30px">
         <span> Commentaire : </span>
         <textarea
           type="text"
           rows="1"
           class="form-control md-textarea"
           [formControl]="statusForm.controls.comment"
-        > </textarea>
+        >
+        </textarea>
       </div>
-
     </div>
 
     <!-- Bouton de fermeture de la modal pop-up ou envoi -->
-    <div
-      class="modal-footer"
-      id="choicePopup"
-    >
+    <div class="modal-footer" id="choicePopup">
       <button
         id="saveButton"
         (click)="onSubmit(statusForm.value)"
@@ -128,5 +106,4 @@ <h4 class="modal-title">Modification du statut de validation</h4>
       </button>
     </div>
   </form>
-
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/contrib/gn_module_validation/frontend/app/components/validation-synthese-carte/validation-synthese-carte.component.html b/contrib/gn_module_validation/frontend/app/components/validation-synthese-carte/validation-synthese-carte.component.html
index 1032893f03..e8bbb726c7 100644
--- a/contrib/gn_module_validation/frontend/app/components/validation-synthese-carte/validation-synthese-carte.component.html
+++ b/contrib/gn_module_validation/frontend/app/components/validation-synthese-carte/validation-synthese-carte.component.html
@@ -1,7 +1,4 @@
-<pnx-map
-  height="94vh"
-  class="map-card"
->
+<pnx-map height="94vh" class="map-card">
   <pnx-geojson
     [geojson]="inputSyntheseData"
     [onEachFeature]="onEachFeature.bind(this)"
diff --git a/contrib/gn_module_validation/frontend/app/components/validation-synthese-list/validation-synthese-list.component.html b/contrib/gn_module_validation/frontend/app/components/validation-synthese-list/validation-synthese-list.component.html
index d611e32f39..a370a1de3e 100644
--- a/contrib/gn_module_validation/frontend/app/components/validation-synthese-list/validation-synthese-list.component.html
+++ b/contrib/gn_module_validation/frontend/app/components/validation-synthese-list/validation-synthese-list.component.html
@@ -16,64 +16,54 @@
   (select)="mapListService.onRowSelect($event)"
   (activate)="onActivate($event)"
   rowHeight="40"
-
 >
-
   <!-- <ngx-datatable-row-detail rowHeight="100">
   </ngx-datatable-row-detail> -->
 
-
-  <ngx-datatable-column
-    [checkboxable]="true"
-    [maxWidth]="10"
-  >
+  <ngx-datatable-column [checkboxable]="true" [maxWidth]="10">
     <ng-template ngx-datatable-header-template>
       <label class="datatable-checkbox">
         <input
           type="checkbox"
           (click)="toggleSelection($event)"
           matTooltip="Sélectionner/déselectionner tout"
-        >
+        />
       </label>
     </ng-template>
-
   </ngx-datatable-column>
 
   <ngx-datatable-column maxWidth="5">
-    <ng-template
-      let-column="column"
-      ngx-datatable-header-template
-    >
+    <ng-template let-column="column" ngx-datatable-header-template>
       <span></span>
     </ng-template>
 
-    <ng-template
-      let-row="row"
-      ngx-datatable-cell-template
-    >
+    <ng-template let-row="row" ngx-datatable-cell-template>
       <div class="modified_data">
-        <span *ngIf="row.last_validation && row.meta_update_date > row.last_validation.validation_date">
+        <span
+          *ngIf="
+            row.last_validation &&
+            row.meta_update_date > row.last_validation.validation_date
+          "
+        >
           <i class="material-icons">warning</i>
         </span>
         <span
-          [ngStyle]="{'background': 'white'}"
-          *ngIf="row.last_validation && row.meta_update_date > row.last_validation.validation_date"
+          [ngStyle]="{ background: 'white' }"
+          *ngIf="
+            row.last_validation &&
+            row.meta_update_date > row.last_validation.validation_date
+          "
           class="modif_data"
-        >{{modif_text}}</span>
+          >{{ modif_text }}</span
+        >
       </div>
     </ng-template>
   </ngx-datatable-column>
   <ngx-datatable-column maxWidth="60">
-    <ng-template
-      let-column="column"
-      ngx-datatable-header-template
-    >
+    <ng-template let-column="column" ngx-datatable-header-template>
       <span>Détails</span>
     </ng-template>
-    <ng-template
-      let-row="row"
-      ngx-datatable-cell-template
-    >
+    <ng-template let-row="row" ngx-datatable-cell-template>
       <button
         #ValidationModalInfoObs
         id="details"
@@ -82,12 +72,11 @@
         class="btn btn-info fa fa-info-circle"
         title="details"
         [disabled]="row.unique_id_sinp == null"
-      >
-      </button>
+      ></button>
       <i
         *ngIf="alertActivate && findReportInfo(row, 'alert')"
         class="fa fa-flag"
-        [ngStyle]="{'margin-right':'2px'}"
+        [ngStyle]="{ 'margin-right': '2px' }"
         aria-hidden="true"
         (click)="openInfoModal(row)"
         [title]="findReportInfo(row, 'alert', 'content')"
@@ -102,52 +91,61 @@
   </ngx-datatable-column>
 
   <ngx-datatable-column maxWidth="60">
-    <ng-template
-      let-row="row"
-      ngx-datatable-cell-template
-    >
+    <ng-template let-row="row" ngx-datatable-cell-template>
       <div class="statusContent">
         <span
           class="validationCircle"
-          [ngStyle]="{'background': config.VALIDATION.STATUS_INFO[row.nomenclature_valid_status?.cd_nomenclature]?.color}"
+          [ngStyle]="{
+            background:
+              config.VALIDATION.STATUS_INFO[
+                row.nomenclature_valid_status?.cd_nomenclature
+              ]?.color
+          }"
         >
-          <i
-            *ngIf="row.last_validation?.validation_auto"
-            class="material-icons"
-          >computer</i>
+          <i *ngIf="row.last_validation?.validation_auto" class="material-icons"
+            >computer</i
+          >
         </span>
         <div
-          [ngStyle]="{'background': config.VALIDATION.STATUS_INFO[row.nomenclature_valid_status?.cd_nomenclature]?.color}"
+          [ngStyle]="{
+            background:
+              config.VALIDATION.STATUS_INFO[
+                row.nomenclature_valid_status?.cd_nomenclature
+              ]?.color
+          }"
           class="statusName"
         >
-          <span>{{row.nomenclature_valid_status?.mnemonique}}</span>
-          <span *ngIf="row.last_validation?.validation_auto"> (automatique)</span>
+          <span>{{ row.nomenclature_valid_status?.mnemonique }}</span>
+          <span *ngIf="row.last_validation?.validation_auto">
+            (automatique)</span
+          >
         </div>
       </div>
     </ng-template>
   </ngx-datatable-column>
 
-
   <ngx-datatable-column
     *ngFor="let col of config.VALIDATION.COLUMN_LIST"
-    name="{{col.column_label}}"
-    prop="{{col.column_name }}"
-    maxWidth="{{col.max_width||10000}}"
-    minWidth="{{col.min_width||10}}"
+    name="{{ col.column_label }}"
+    prop="{{ col.column_name }}"
+    maxWidth="{{ col.max_width || 10000 }}"
+    minWidth="{{ col.min_width || 10 }}"
   >
     <ng-template
-      *ngIf="[
-            'date_min',
-            'date_max',
-            'meta_validation_date',
-            'meta_create_date',
-            'meta_update_date',
-            'last_validation.validation_date'
-          ].includes(col.column_name)"
+      *ngIf="
+        [
+          'date_min',
+          'date_max',
+          'meta_validation_date',
+          'meta_create_date',
+          'meta_update_date',
+          'last_validation.validation_date'
+        ].includes(col.column_name)
+      "
       let-row="row"
       ngx-datatable-cell-template
     >
-      {{row[col.column_name] | date:'dd-MM-yyyy'}}
+      {{ row[col.column_name] | date: "dd-MM-yyyy" }}
     </ng-template>
     <ng-template
       *ngIf="col.column_name == 'nomenclature_valid_status.label_default'"
@@ -157,21 +155,31 @@
       <div class="statusContent">
         <span
           class="validationCircle"
-          [ngStyle]="{'background': config.VALIDATION.STATUS_INFO[row.nomenclature_valid_status?.cd_nomenclature]?.color}"
+          [ngStyle]="{
+            background:
+              config.VALIDATION.STATUS_INFO[
+                row.nomenclature_valid_status?.cd_nomenclature
+              ]?.color
+          }"
         >
-          <i
-            *ngIf="row.last_validation?.validation_auto"
-            class="material-icons"
-          >computer</i>
+          <i *ngIf="row.last_validation?.validation_auto" class="material-icons"
+            >computer</i
+          >
         </span>
         <div
-          [ngStyle]="{'background': config.VALIDATION.STATUS_INFO[row.nomenclature_valid_status?.cd_nomenclature]?.color}"
+          [ngStyle]="{
+            background:
+              config.VALIDATION.STATUS_INFO[
+                row.nomenclature_valid_status?.cd_nomenclature
+              ]?.color
+          }"
           class="statusName"
         >
-          <span>{{row?.nomenclature_valid_status?.mnemonique}}</span>
-          <span *ngIf="row.last_validation?.validation_auto"> (automatique)</span>
+          <span>{{ row?.nomenclature_valid_status?.mnemonique }}</span>
+          <span *ngIf="row.last_validation?.validation_auto">
+            (automatique)</span
+          >
         </div>
-
       </div>
     </ng-template>
   </ngx-datatable-column>
@@ -181,20 +189,11 @@
     minWidth="10"
     [maxWidth]="100"
   >
-    <ng-template
-      let-column="column"
-      ngx-datatable-header-template
-    >
+    <ng-template let-column="column" ngx-datatable-header-template>
       <span>Score</span>
     </ng-template>
-    <ng-template
-      let-row="row"
-      ngx-datatable-cell-template
-    >
-      <div
-        *ngIf="row.profile"
-        [ngSwitch]="row.profile.score"
-      >
+    <ng-template let-row="row" ngx-datatable-cell-template>
+      <div *ngIf="row.profile" [ngSwitch]="row.profile.score">
         <mat-chip
           *ngSwitchCase="'0'"
           class="chip-alert"
@@ -204,8 +203,9 @@
           container="body"
           placement="left"
           height="50px"
-          style="color:white"
-        > {{row.profile.score}}/3
+          style="color: white"
+        >
+          {{ row.profile.score }}/3
         </mat-chip>
         <mat-chip
           *ngSwitchCase="'3'"
@@ -215,9 +215,9 @@
           [popoverTitle]="popTitle"
           container="body"
           placement="left"
-          style="color:white!important"
-
-        > {{row.profile.score}}/3
+          style="color: white !important"
+        >
+          {{ row.profile.score }}/3
         </mat-chip>
         <mat-chip
           *ngSwitchDefault
@@ -227,15 +227,13 @@
           [popoverTitle]="popTitle"
           container="body"
           placement="left"
-        > {{row.profile.score}}/3
+        >
+          {{ row.profile.score }}/3
         </mat-chip>
       </div>
       <div *ngIf="!row.profile">
-        <mat-chip
-          class="chip-disabled"
-          container="body"
-          placement="left"
-        > –
+        <mat-chip class="chip-disabled" container="body" placement="left">
+          –
         </mat-chip>
       </div>
 
@@ -244,7 +242,7 @@
       <ng-template #popContent>
         <table class="table table-sm font-xs table-striped">
           <tr>
-            <td>Aire de répartition </td>
+            <td>Aire de répartition</td>
             <td *ngIf="row.profile.valid_distribution">
               <mat-icon class="success"> check </mat-icon>
             </td>
@@ -253,7 +251,7 @@
             </td>
           </tr>
           <tr>
-            <td>Phénologie </td>
+            <td>Phénologie</td>
             <td *ngIf="row.profile.valid_phenology">
               <mat-icon class="success"> check </mat-icon>
             </td>
@@ -262,7 +260,7 @@
             </td>
           </tr>
           <tr>
-            <td> Altitudes</td>
+            <td>Altitudes</td>
             <td *ngIf="row.profile.valid_altitude">
               <mat-icon class="success"> check </mat-icon>
             </td>
@@ -272,11 +270,9 @@
           </tr>
         </table>
       </ng-template>
-
     </ng-template>
   </ngx-datatable-column>
 
-
   <ngx-datatable-footer>
     <ng-template
       ngx-datatable-footer-template
@@ -288,8 +284,7 @@
       ,
       let-offset="offset"
     >
-
-      {{selectedCount}} selected / {{rowCount}} total
+      {{ selectedCount }} selected / {{ rowCount }} total
       <datatable-pager
         [pagerLeftArrowIcon]="'datatable-icon-left'"
         [pagerRightArrowIcon]="'datatable-icon-right'"
@@ -298,17 +293,14 @@
         [page]="curPage"
         [size]="pageSize"
         [count]="rowCount"
-        [hidden]="!((rowCount / pageSize) > 0)"
+        [hidden]="!(rowCount / pageSize > 0)"
         (change)="handlePageChange($event)"
         (change)="table.onFooterPage($event)"
       >
         >
       </datatable-pager>
-
     </ng-template>
-
   </ngx-datatable-footer>
-
 </ngx-datatable>
 
 <pnx-validation-popup
@@ -317,4 +309,4 @@
   [observations]="selectedObs"
   [validationStatus]="validationStatus"
 >
-</pnx-validation-popup>
\ No newline at end of file
+</pnx-validation-popup>
diff --git a/contrib/gn_module_validation/frontend/app/components/validation-synthese-list/validation-synthese-list.component.scss b/contrib/gn_module_validation/frontend/app/components/validation-synthese-list/validation-synthese-list.component.scss
index 6321ef95f6..23f5fa95e4 100644
--- a/contrib/gn_module_validation/frontend/app/components/validation-synthese-list/validation-synthese-list.component.scss
+++ b/contrib/gn_module_validation/frontend/app/components/validation-synthese-list/validation-synthese-list.component.scss
@@ -7,7 +7,9 @@
   color: "black";
   border: 1px solid black;
   text-align: center;
-  font: 15px Arial, sans-serif;
+  font:
+    15px Arial,
+    sans-serif;
   position: absolute;
   left: 0%;
   transform: translateX(0%);
@@ -171,26 +173,23 @@ button:active {
   }
 }
 
-.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label {
+.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled)
+  .mdc-evolution-chip__text-label {
   color: white;
 }
 
 .chip-alert {
-  background-color: red!important;
+  background-color: red !important;
 }
 
 .chip-warning {
-  background-color: rgb(255, 123, 0)!important;
+  background-color: rgb(255, 123, 0) !important;
 }
 
-
-
 .chip-success {
-  background-color: green!important;
+  background-color: green !important;
 }
 
-
-
 .mat-chip {
   width: 70%;
   display: inline-block;
diff --git a/contrib/gn_module_validation/frontend/app/components/validation.component.html b/contrib/gn_module_validation/frontend/app/components/validation.component.html
index eca0a04f5b..2284f3e06b 100644
--- a/contrib/gn_module_validation/frontend/app/components/validation.component.html
+++ b/contrib/gn_module_validation/frontend/app/components/validation.component.html
@@ -24,7 +24,10 @@
         id="sidebarCollapse"
         class="btn btn-toogle-sidenav box-shadow"
       >
-        <i class="fa" [ngClass]="searchBarHidden ? 'fa-caret-left' : 'fa-caret-right'"></i>
+        <i
+          class="fa"
+          [ngClass]="searchBarHidden ? 'fa-caret-left' : 'fa-caret-right'"
+        ></i>
       </button>
       <pnx-validation-synthese-list
         (displayAll)="goHome()"
diff --git a/contrib/gn_module_validation/frontend/app/components/validation.component.scss b/contrib/gn_module_validation/frontend/app/components/validation.component.scss
index 95f11ca709..1caea52bff 100644
--- a/contrib/gn_module_validation/frontend/app/components/validation.component.scss
+++ b/contrib/gn_module_validation/frontend/app/components/validation.component.scss
@@ -97,7 +97,9 @@
   border-top-left-radius: 0px;
 }
 .btn-toogle-sidenav:focus {
-  box-shadow: 4px 5px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
+  box-shadow:
+    4px 5px 8px 0 rgba(0, 0, 0, 0.2),
+    0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
 }
 
 #sidebar.active .btn-toogle-sidenav {
@@ -192,7 +194,9 @@ a[data-toggle="collapse"] {
   border-top-left-radius: 0px;
 }
 .btn-toogle-sidenav:focus {
-  box-shadow: 4px 5px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
+  box-shadow:
+    4px 5px 8px 0 rgba(0, 0, 0, 0.2),
+    0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
 }
 .wrapper {
   display: flex;
diff --git a/contrib/occtax/frontend/app/occtax-form/counting/counting.component.html b/contrib/occtax/frontend/app/occtax-form/counting/counting.component.html
index e0d7883920..9bc03b384f 100644
--- a/contrib/occtax/frontend/app/occtax-form/counting/counting.component.html
+++ b/contrib/occtax/frontend/app/occtax-form/counting/counting.component.html
@@ -1,124 +1,117 @@
 <div class="row">
-  <div
-    *ngIf="config.OCCTAX.form_fields.obj_count"
-    class="col-lg-4 col-sm-6"
-  >
+  <div *ngIf="config.OCCTAX.form_fields.obj_count" class="col-lg-4 col-sm-6">
     <pnx-nomenclature
       label="{{ 'Counting.CountingObject' | translate }}"
       codeNomenclatureType="OBJ_DENBR"
       [parentFormControl]="form.get('id_nomenclature_obj_count')"
-      [regne]="(occtaxFormOccurrenceService.taxref|async)?.regne"
-      [group2Inpn]="(occtaxFormOccurrenceService.taxref|async)?.group2_inpn"
-      [group3Inpn]="(occtaxFormOccurrenceService.taxref|async)?.group3_inpn">
+      [regne]="(occtaxFormOccurrenceService.taxref | async)?.regne"
+      [group2Inpn]="(occtaxFormOccurrenceService.taxref | async)?.group2_inpn"
+      [group3Inpn]="(occtaxFormOccurrenceService.taxref | async)?.group3_inpn"
+    >
     </pnx-nomenclature>
   </div>
-  <div
-    *ngIf="config.OCCTAX.form_fields.type_count"
-    class="col-lg-4 col-sm-6"
-  >
+  <div *ngIf="config.OCCTAX.form_fields.type_count" class="col-lg-4 col-sm-6">
     <pnx-nomenclature
       #typeDenombrement
       label="{{ 'Counting.CountingType' | translate }}"
       codeNomenclatureType="TYP_DENBR"
       [parentFormControl]="form.get('id_nomenclature_type_count')"
-      [regne]="(occtaxFormOccurrenceService.taxref|async)?.regne"
-      [group2Inpn]="(occtaxFormOccurrenceService.taxref|async)?.group2_inpn"
-      [group3Inpn]="(occtaxFormOccurrenceService.taxref|async)?.group3_inpn">
+      [regne]="(occtaxFormOccurrenceService.taxref | async)?.regne"
+      [group2Inpn]="(occtaxFormOccurrenceService.taxref | async)?.group2_inpn"
+      [group3Inpn]="(occtaxFormOccurrenceService.taxref | async)?.group3_inpn"
+    >
     </pnx-nomenclature>
   </div>
-
 </div>
 <small
-  *ngIf="form.get('id_nomenclature_obj_count').hasError('required') && form.get('id_nomenclature_obj_count').touched"
+  *ngIf="
+    form.get('id_nomenclature_obj_count').hasError('required') &&
+    form.get('id_nomenclature_obj_count').touched
+  "
   class="error"
-  style="color:red"
+  style="color: red"
 >
-  {{'Counting.Errors.CountingObjectRequiredError' |translate}}
+  {{ "Counting.Errors.CountingObjectRequiredError" | translate }}
 </small>
 
 <div class="row">
   <div class="col-6">
     <div class="row">
-      <div 
-        *ngIf="config.OCCTAX.form_fields.count_min" 
-        class="col-6"
-      >
-        <small> {{ 'Counting.NumberMin' | translate }} </small>
+      <div *ngIf="config.OCCTAX.form_fields.count_min" class="col-6">
+        <small> {{ "Counting.NumberMin" | translate }} </small>
         <input
           data-qa="counting-count-min"
           class="form-control form-control-sm"
           type="number"
           min="0"
           [formControl]="form.get('count_min')"
-        >
+        />
       </div>
-      <div 
-        *ngIf="config.OCCTAX.form_fields.count_max" 
-        class="col-6"
-      >
-        <small> {{ 'Counting.NumberMax' | translate }} </small>
+      <div *ngIf="config.OCCTAX.form_fields.count_max" class="col-6">
+        <small> {{ "Counting.NumberMax" | translate }} </small>
         <input
           data-qa="counting-count-max"
           class="form-control form-control-sm"
           type="number"
           min="0"
           [formControl]="form.get('count_max')"
-        >
+        />
       </div>
     </div>
     <small
       data-qa="counting-count-min-gth-max-error"
       *ngIf="form.hasError(ValidationErrorsId.MIN_GREATER_THAN_MAX)"
       class="error"
-      style="color:red"
+      style="color: red"
     >
-      {{ 'Counting.Errors.CountError' | translate }}
+      {{ "Counting.Errors.CountError" | translate }}
     </small>
   </div>
 
-  <div
-    *ngIf="config.OCCTAX.form_fields.life_stage"
-    class="col-3"
-  >
+  <div *ngIf="config.OCCTAX.form_fields.life_stage" class="col-3">
     <pnx-nomenclature
       label="{{ 'Counting.LifeStage' | translate }}"
       codeNomenclatureType="STADE_VIE"
       [parentFormControl]="form.get('id_nomenclature_life_stage')"
-      [regne]="(occtaxFormOccurrenceService.taxref|async)?.regne"
-      [group2Inpn]="(occtaxFormOccurrenceService.taxref|async)?.group2_inpn"
-      [group3Inpn]="(occtaxFormOccurrenceService.taxref|async)?.group3_inpn">
+      [regne]="(occtaxFormOccurrenceService.taxref | async)?.regne"
+      [group2Inpn]="(occtaxFormOccurrenceService.taxref | async)?.group2_inpn"
+      [group3Inpn]="(occtaxFormOccurrenceService.taxref | async)?.group3_inpn"
+    >
     </pnx-nomenclature>
     <small
-      *ngIf="form.get('id_nomenclature_life_stage').hasError('required') && form.get('id_nomenclature_life_stage').touched"
+      *ngIf="
+        form.get('id_nomenclature_life_stage').hasError('required') &&
+        form.get('id_nomenclature_life_stage').touched
+      "
       class="error"
-      style="color:red"
+      style="color: red"
     >
-      {{'Counting.Errors.LifeStageRequiredError' |translate}}
+      {{ "Counting.Errors.LifeStageRequiredError" | translate }}
     </small>
   </div>
-  <div
-    *ngIf="config.OCCTAX.form_fields.sex"
-    class="col-3"
-  >
+  <div *ngIf="config.OCCTAX.form_fields.sex" class="col-3">
     <pnx-nomenclature
       label="{{ 'Counting.Sex' | translate }}"
       codeNomenclatureType="SEXE"
       [parentFormControl]="form.get('id_nomenclature_sex')"
-      [regne]="(occtaxFormOccurrenceService.taxref|async)?.regne"
-      [group2Inpn]="(occtaxFormOccurrenceService.taxref|async)?.group2_inpn"
-      [group3Inpn]="(occtaxFormOccurrenceService.taxref|async)?.group3_inpn">
+      [regne]="(occtaxFormOccurrenceService.taxref | async)?.regne"
+      [group2Inpn]="(occtaxFormOccurrenceService.taxref | async)?.group2_inpn"
+      [group3Inpn]="(occtaxFormOccurrenceService.taxref | async)?.group3_inpn"
+    >
     </pnx-nomenclature>
     <small
-      *ngIf="form.get('id_nomenclature_sex').hasError('required') && form.get('id_nomenclature_sex').touched"
+      *ngIf="
+        form.get('id_nomenclature_sex').hasError('required') &&
+        form.get('id_nomenclature_sex').touched
+      "
       class="error"
-      style="color:red"
+      style="color: red"
     >
-      {{'Counting.Errors.SexRequiredError' |translate}}
+      {{ "Counting.Errors.SexRequiredError" | translate }}
     </small>
   </div>
 </div>
 <div class="row col-sm-12">
-
   <pnx-dynamic-form-generator
     [autoGenerated]="true"
     [myFormGroup]="form.get('additional_fields')"
@@ -128,19 +121,18 @@
 </div>
 
 <div class="row">
-  <div 
-    id='occurrence-medias' 
-    *ngIf="config.OCCTAX.ENABLE_MEDIAS" 
+  <div
+    id="occurrence-medias"
+    *ngIf="config.OCCTAX.ENABLE_MEDIAS"
     class="col-sm-12"
   >
-
-    <h6 style="margin-top: 15px;">
+    <h6 style="margin-top: 15px">
       <span
         [matBadge]="(form.value.medias || []).length"
         matBadgeOverlap="false"
         class="color-add-media"
       >
-        {{'Media.Medias' |translate}}
+        {{ "Media.Medias" | translate }}
       </span>
     </h6>
     <pnx-medias
diff --git a/contrib/occtax/frontend/app/occtax-form/counting/counting.component.scss b/contrib/occtax/frontend/app/occtax-form/counting/counting.component.scss
index 32aa347bbd..c16668d96a 100644
--- a/contrib/occtax/frontend/app/occtax-form/counting/counting.component.scss
+++ b/contrib/occtax/frontend/app/occtax-form/counting/counting.component.scss
@@ -1,5 +1,4 @@
 .color-add-media .mat-badge-content {
-    color: white;
-    background-color: blue;
-  }
-  
\ No newline at end of file
+  color: white;
+  background-color: blue;
+}
diff --git a/contrib/occtax/frontend/app/occtax-form/form-param/form-param.dialog.html b/contrib/occtax/frontend/app/occtax-form/form-param/form-param.dialog.html
index 010e0a5434..2bdf0c972e 100644
--- a/contrib/occtax/frontend/app/occtax-form/form-param/form-param.dialog.html
+++ b/contrib/occtax/frontend/app/occtax-form/form-param/form-param.dialog.html
@@ -1,19 +1,20 @@
-
 <ng-template #modalContent let-modal>
   <div class="modal-header">
     <h4 class="modal-title" id="modal-basic-title">
       Paramétrage de la valeur par défaut des champs du formulaire
     </h4>
-    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
+    <button
+      type="button"
+      class="close"
+      aria-label="Close"
+      (click)="modal.dismiss('Cross click')"
+    >
       <span aria-hidden="true">&times;</span>
     </button>
   </div>
   <div class="modal-body">
     <div class="help">
-      <div
-        class="display-help"
-        (click)='collapse()'
-      >
+      <div class="display-help" (click)="collapse()">
         <ng-container *ngIf="state === 'collapsed'; else hideBlock">
           Afficher l'aide <mat-icon>arrow_drop_down</mat-icon>
         </ng-container>
@@ -21,13 +22,13 @@ <h4 class="modal-title" id="modal-basic-title">
           Masquer l'aide <mat-icon>arrow_drop_up</mat-icon>
         </ng-template>
       </div>
-      <p [@detailExpand]='state'>
-        Cet espace permet de spécifier une valeur de remplacement par défaut pour certains champs du
-        formulaire.<br>
-        Les 3 boutons ci-dessous permettent d'activer ou de désactiver cette fonctionnalité pour les
-        différentes parties du formulaire concernées.<br>
-        Un champ laissé vide n'affectera pas le formulaire qui continuera de prendre la valeur définie
-        par défaut au niveau de GeoNature.
+      <p [@detailExpand]="state">
+        Cet espace permet de spécifier une valeur de remplacement par défaut
+        pour certains champs du formulaire.<br />
+        Les 3 boutons ci-dessous permettent d'activer ou de désactiver cette
+        fonctionnalité pour les différentes parties du formulaire concernées.<br />
+        Un champ laissé vide n'affectera pas le formulaire qui continuera de
+        prendre la valeur définie par défaut au niveau de GeoNature.
       </p>
     </div>
     <div>
@@ -75,31 +76,29 @@ <h4 class="modal-title" id="modal-basic-title">
       [(selectedIndex)]="selectedIndex"
       backgroundColor="primary"
     >
-
       <!-- GEOSJON -->
       <mat-tab
         label="Localisation"
         [disabled]="!(occtaxFormParamService.geometryState|async)"
       >
-
-        <div style="display: inline-block; margin-top:10px;">
-          <button
-            class="btn btn-primary"
-            (click)="geometryFormMapper()"
-          >
+        <div style="display: inline-block; margin-top: 10px">
+          <button class="btn btn-primary" (click)="geometryFormMapper()">
             Copier la localisation du relevé en cours
           </button>
         </div>
 
         <div class="copied-geometry">
-          <ng-container *ngIf="paramsForm.get('geometry').value !== null; else noGeometryBlock">
-            <mat-icon style="color: green">check</mat-icon> Une géométrie est proposée par défaut
+          <ng-container
+            *ngIf="paramsForm.get('geometry').value !== null; else noGeometryBlock"
+          >
+            <mat-icon style="color: green">check</mat-icon> Une géométrie est
+            proposée par défaut
           </ng-container>
           <ng-template #noGeometryBlock>
-            <mat-icon style="color: red">close</mat-icon>Aucune géométrie n'a été copiée pour le moment
+            <mat-icon style="color: red">close</mat-icon>Aucune géométrie n'a
+            été copiée pour le moment
           </ng-template>
         </div>
-
       </mat-tab>
 
       <!-- RELEVE -->
@@ -107,41 +106,30 @@ <h4 class="modal-title" id="modal-basic-title">
         [label]="'Releve.Releve' | translate"
         [disabled]="!(occtaxFormParamService.releveState|async)"
       >
-
-        <div style="margin-top:10px;">
-          <button
-            mat-flat-button
-            color=primary
-            (click)="releveFormMapper()"
-          >
+        <div style="margin-top: 10px">
+          <button mat-flat-button color="primary" (click)="releveFormMapper()">
             Copier les informations du relevé en cours
           </button>
         </div>
 
         <div class="row">
-          <div
-            *ngIf="config.OCCTAX.form_fields.precision"
-            class="col-4"
-          >
+          <div *ngIf="config.OCCTAX.form_fields.precision" class="col-4">
             <small>Précision du pointage (m)</small>
             <input
               type="number"
               class="form-control form-control-sm"
               placeholder="Précision du pointage"
               [formControl]="releveParamForm.get('precision')"
-            >
+            />
           </div>
 
-          <div 
-            *ngIf="config.OCCTAX.form_fields.place_name"
-            class="col-4"
-          >
+          <div *ngIf="config.OCCTAX.form_fields.place_name" class="col-4">
             <small> {{ 'Releve.PlaceName' | translate }} </small>
             <input
               class="form-control form-control-sm"
               type="text"
               [formControl]="releveParamForm.get('place_name')"
-            >
+            />
           </div>
         </div>
 
@@ -154,7 +142,9 @@ <h4 class="modal-title" id="modal-basic-title">
         >
         </pnx-observers>
         <ng-template #elseBlock>
-          <pnx-observers-text [parentFormControl]="releveParamForm.get('observers_txt')">
+          <pnx-observers-text
+            [parentFormControl]="releveParamForm.get('observers_txt')"
+          >
           </pnx-observers-text>
         </ng-template>
 
@@ -189,10 +179,7 @@ <h4 class="modal-title" id="modal-basic-title">
 
         <div class="row">
           <div class="col-6">
-            <div
-              *ngIf="config.OCCTAX.form_fields.hour_min"
-              class="form-group"
-            >
+            <div *ngIf="config.OCCTAX.form_fields.hour_min" class="form-group">
               <small> {{'Releve.HourMin' | translate }} </small>
               <input
                 [ngClass]="{'is-invalid' : releveParamForm.get('hour_min').invalid || releveParamForm.hasError('invalidHour')}"
@@ -200,14 +187,11 @@ <h4 class="modal-title" id="modal-basic-title">
                 class="form-control form-control-sm"
                 type="text"
                 placeholder="{{'Releve.HourFormat' | translate }}"
-              >
+              />
             </div>
           </div>
           <div class="col-6">
-            <div
-              *ngIf="config.OCCTAX.form_fields.hour_max"
-              class="form-group"
-            >
+            <div *ngIf="config.OCCTAX.form_fields.hour_max" class="form-group">
               <small> {{'Releve.HourMax' | translate }} </small>
               <input
                 [ngClass]="{'is-invalid' : releveParamForm.get('hour_max').invalid || releveParamForm.hasError('invalidHour')}"
@@ -215,70 +199,54 @@ <h4 class="modal-title" id="modal-basic-title">
                 class="form-control form-control-sm"
                 type="text"
                 placeholder="{{'Releve.HourFormat' | translate }}"
-              >
+              />
             </div>
           </div>
         </div>
 
         <div class="row">
-          <div
-            *ngIf="config.OCCTAX.form_fields.altitude_min"
-            class="col-6"
-          >
+          <div *ngIf="config.OCCTAX.form_fields.altitude_min" class="col-6">
             <small> {{ 'Releve.MinAltitude' | translate }} </small>
             <input
               class="form-control form-control-sm"
               type="number"
               [formControl]="releveParamForm.get('altitude_min')"
-            >
+            />
           </div>
 
           <!-- ALTITUDE MAX -->
-          <div
-            *ngIf="config.OCCTAX.form_fields.altitude_max"
-            class="col-6"
-          >
+          <div *ngIf="config.OCCTAX.form_fields.altitude_max" class="col-6">
             <small> {{ 'Releve.MaxAltitude' | translate }} </small>
             <input
               class="form-control form-control-sm"
               type="number"
               [formControl]="releveParamForm.get('altitude_max')"
-            >
+            />
           </div>
         </div>
 
         <div class="row">
-          <div 
-            *ngIf="config.OCCTAX.form_fields.depth_min"
-            class="col-6"
-          >
+          <div *ngIf="config.OCCTAX.form_fields.depth_min" class="col-6">
             <small> {{ 'Releve.MinDepth' | translate }} </small>
             <input
               class="form-control form-control-sm"
               type="number"
               [formControl]="releveParamForm.get('depth_min')"
-            >
+            />
           </div>
 
-          <div 
-            *ngIf="config.OCCTAX.form_fields.depth_min"
-            class="col-6"
-          >
+          <div *ngIf="config.OCCTAX.form_fields.depth_min" class="col-6">
             <small> {{ 'Releve.MaxDepth' | translate }} </small>
             <input
               class="form-control form-control-sm"
               type="number"
               [formControl]="releveParamForm.get('depth_max')"
-            >
+            />
           </div>
-
         </div>
 
         <div class="row">
-          <div
-            *ngIf="config.OCCTAX.form_fields.group_type"
-            class="col-4"
-          >
+          <div *ngIf="config.OCCTAX.form_fields.group_type" class="col-4">
             <pnx-nomenclature
               label="{{ 'Releve.GroupType' | translate }}"
               [parentFormControl]="releveParamForm.get('id_nomenclature_grp_typ')"
@@ -287,19 +255,16 @@ <h4 class="modal-title" id="modal-basic-title">
             </pnx-nomenclature>
           </div>
 
-          <div
-            *ngIf="config.OCCTAX.form_fields.grp_method"
-            class="col-4"
-          >
+          <div *ngIf="config.OCCTAX.form_fields.grp_method" class="col-4">
             <small> {{'Releve.GroupMethod' | translate}} </small>
             <input
               type="text"
               class="form-control form-control-sm"
               [formControl]="releveParamForm.get('grp_method')"
-            >
+            />
           </div>
 
-          <div 
+          <div
             *ngIf="config.OCCTAX.form_fields.geo_object_nature"
             class="col-4"
           >
@@ -320,7 +285,6 @@ <h4 class="modal-title" id="modal-basic-title">
         >
         </pnx-nomenclature>
 
-
         <div *ngIf="config.OCCTAX.form_fields.comment_releve">
           <small> {{ 'Releve.Comment' | translate }} </small>
           <textarea
@@ -329,7 +293,6 @@ <h4 class="modal-title" id="modal-basic-title">
           >
           </textarea>
         </div>
-
       </mat-tab>
 
       <!-- OCCTURRENCE -->
@@ -337,11 +300,10 @@ <h4 class="modal-title" id="modal-basic-title">
         [label]="'Taxon.Observation' | translate"
         [disabled]="!(occtaxFormParamService.occurrenceState|async)"
       >
-
-        <div style="margin-top:10px;">
+        <div style="margin-top: 10px">
           <button
             mat-flat-button
-            color=primary
+            color="primary"
             (click)="occurrenceFormMapper()"
           >
             Copier les informations du taxon en cours
@@ -349,16 +311,13 @@ <h4 class="modal-title" id="modal-basic-title">
         </div>
 
         <div class="row">
-          <div
-            *ngIf="config.OCCTAX.form_fields.determiner"
-            class="col-sm-6"
-          >
+          <div *ngIf="config.OCCTAX.form_fields.determiner" class="col-sm-6">
             <small> {{ 'Taxon.Determiner' | translate }} </small>
             <input
               class="form-control form-control-sm"
               [formControl]="occurrenceParamForm.get('determiner')"
               type="text"
-            >
+            />
           </div>
 
           <div
@@ -476,7 +435,7 @@ <h4 class="modal-title" id="modal-basic-title">
           <div
             *ngIf="config.OCCTAX.form_fields.exist_proof"
             class="col-lg-4 col-sm-6"
-            style="margin-bottom: 1rem;"
+            style="margin-bottom: 1rem"
           >
             <pnx-nomenclature
               label="{{ 'Taxon.ExistProof' | translate }}"
@@ -496,7 +455,7 @@ <h4 class="modal-title" id="modal-basic-title">
                 class="form-control form-control-sm"
                 [formControl]="occurrenceParamForm.get('digital_proof')"
                 type="text"
-              >
+              />
             </div>
           </div>
           <div
@@ -509,7 +468,7 @@ <h4 class="modal-title" id="modal-basic-title">
                 class="form-control form-control-sm"
                 [formControl]="occurrenceParamForm.get('non_digital_proof')"
                 type="text"
-              >
+              />
             </div>
           </div>
         </div>
@@ -531,12 +490,8 @@ <h4 class="modal-title" id="modal-basic-title">
         [label]="'Counting.Counting' | translate"
         [disabled]="!(occtaxFormParamService.countingState|async)"
       >
-
         <div class="row">
-          <div
-            *ngIf="config.OCCTAX.form_fields.life_stage"
-            class="col-sm-6"
-          >
+          <div *ngIf="config.OCCTAX.form_fields.life_stage" class="col-sm-6">
             <pnx-nomenclature
               label="{{ 'Counting.LifeStage' | translate }}"
               codeNomenclatureType="STADE_VIE"
@@ -544,10 +499,7 @@ <h4 class="modal-title" id="modal-basic-title">
             >
             </pnx-nomenclature>
           </div>
-          <div
-            *ngIf="config.OCCTAX.form_fields.sex"
-            class="col-sm-6"
-          >
+          <div *ngIf="config.OCCTAX.form_fields.sex" class="col-sm-6">
             <pnx-nomenclature
               label="{{ 'Counting.Sex' | translate }}"
               codeNomenclatureType="SEXE"
@@ -556,36 +508,27 @@ <h4 class="modal-title" id="modal-basic-title">
             </pnx-nomenclature>
           </div>
 
-          <div
-            *ngIf="config.OCCTAX.form_fields.count_min"
-            class="col-sm-6"
-          >
+          <div *ngIf="config.OCCTAX.form_fields.count_min" class="col-sm-6">
             <small> {{ 'Counting.NumberMin' | translate }} </small>
             <input
               class="form-control form-control-sm"
               type="number"
               min="0"
               [formControl]="countingParamForm.get('count_min')"
-            >
+            />
           </div>
 
-          <div
-            *ngIf="config.OCCTAX.form_fields.count_max"
-            class="col-sm-6"
-          >
+          <div *ngIf="config.OCCTAX.form_fields.count_max" class="col-sm-6">
             <small> {{ 'Counting.NumberMax' | translate }} </small>
             <input
               class="form-control form-control-sm"
               type="number"
               min="0"
               [formControl]="countingParamForm.get('count_max')"
-            >
+            />
           </div>
 
-          <div
-            *ngIf="config.OCCTAX.form_fields.obj_count"
-            class="col-sm-6"
-          >
+          <div *ngIf="config.OCCTAX.form_fields.obj_count" class="col-sm-6">
             <pnx-nomenclature
               label="{{ 'Counting.CountingObject' | translate }}"
               codeNomenclatureType="OBJ_DENBR"
@@ -593,10 +536,7 @@ <h4 class="modal-title" id="modal-basic-title">
             >
             </pnx-nomenclature>
           </div>
-          <div
-            *ngIf="config.OCCTAX.form_fields.type_count"
-            class="col-sm-6"
-          >
+          <div *ngIf="config.OCCTAX.form_fields.type_count" class="col-sm-6">
             <pnx-nomenclature
               #typeDenombrement
               label="{{ 'Counting.CountingType' | translate }}"
@@ -607,19 +547,12 @@ <h4 class="modal-title" id="modal-basic-title">
           </div>
         </div>
       </mat-tab>
-
     </mat-tab-group>
-
-
-
-
-
   </div>
 
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline-dark" (click)="modal.close()">Fermer</button>
+    <button type="button" class="btn btn-outline-dark" (click)="modal.close()">
+      Fermer
+    </button>
   </div>
 </ng-template>
-
-
-
diff --git a/contrib/occtax/frontend/app/occtax-form/form-param/form-param.dialog.scss b/contrib/occtax/frontend/app/occtax-form/form-param/form-param.dialog.scss
index ad23bf836f..8fcbe16e59 100644
--- a/contrib/occtax/frontend/app/occtax-form/form-param/form-param.dialog.scss
+++ b/contrib/occtax/frontend/app/occtax-form/form-param/form-param.dialog.scss
@@ -1,39 +1,39 @@
 ::ng-deep .mat-tab-body-content {
-	padding: 15px;
-	border-left: 1px solid #673ab7;
-	border-right: 1px solid #673ab7;
-	border-bottom: 1px solid #673ab7;
+  padding: 15px;
+  border-left: 1px solid #673ab7;
+  border-right: 1px solid #673ab7;
+  border-bottom: 1px solid #673ab7;
 }
 
 .close-parameter-w {
-	outline: none;
+  outline: none;
 }
 
 .help {
-	padding: 0px 10px;
-	margin-bottom: 10px;
+  padding: 0px 10px;
+  margin-bottom: 10px;
 }
 
 .help p {
-	padding: 0px 10px;
+  padding: 0px 10px;
 }
 
 .display-help {
-	cursor: pointer;
-	color: #505050;
+  cursor: pointer;
+  color: #505050;
   font-style: italic;
   font-size: smaller;
 }
 
 .display-help .mat-icon {
-	vertical-align: middle;
+  vertical-align: middle;
 }
 
 .copied-geometry {
-	display: inline-block;
-	margin-left: 15px;
+  display: inline-block;
+  margin-left: 15px;
 }
 
-.copied-geometry .mat-icon{
-	vertical-align: middle;
-}
\ No newline at end of file
+.copied-geometry .mat-icon {
+  vertical-align: middle;
+}
diff --git a/contrib/occtax/frontend/app/occtax-form/map/occtax-map.component.html b/contrib/occtax/frontend/app/occtax-form/map/occtax-map.component.html
index b10d01f195..55ab9f15f1 100644
--- a/contrib/occtax/frontend/app/occtax-form/map/occtax-map.component.html
+++ b/contrib/occtax/frontend/app/occtax-form/map/occtax-map.component.html
@@ -1,8 +1,4 @@
-<pnx-map
-  height="100%"
-  class="map-card"
-  [geolocation]="true"
->
+<pnx-map height="100%" class="map-card" [geolocation]="true">
   <pnx-marker
     [coordinates]="ms.markerCoordinates"
     [zoomLevel]="config.OCCTAX['releve_map_zoom_level']"
@@ -20,23 +16,13 @@
     *ngIf="config.OCCTAX.ENABLE_UPLOAD_TOOL"
     [editMode]="true"
     (onLoad)="infoMessageFileLayer()"
-    [style]="{'color': 'green'}"
+    [style]="{ color: 'green' }"
   >
   </pnx-leaflet-filelayer>
 
-  <pnx-gps
-    *ngIf="config.OCCTAX.ENABLE_GPS_TOOL"
-  >
-  </pnx-gps>
-
-  <pnx-places
-    *ngIf="config.OCCTAX.ENABLE_MY_PLACES"
-  >
-  </pnx-places>
+  <pnx-gps *ngIf="config.OCCTAX.ENABLE_GPS_TOOL"> </pnx-gps>
 
-  <pnx-placesList
-    *ngIf="config.OCCTAX.ENABLE_MY_PLACES"
-  >
-  </pnx-placesList>
+  <pnx-places *ngIf="config.OCCTAX.ENABLE_MY_PLACES"> </pnx-places>
 
+  <pnx-placesList *ngIf="config.OCCTAX.ENABLE_MY_PLACES"> </pnx-placesList>
 </pnx-map>
diff --git a/contrib/occtax/frontend/app/occtax-form/occtax-form.component.html b/contrib/occtax/frontend/app/occtax-form/occtax-form.component.html
index 0f41487c6d..ece5c0f01a 100644
--- a/contrib/occtax/frontend/app/occtax-form/occtax-form.component.html
+++ b/contrib/occtax/frontend/app/occtax-form/occtax-form.component.html
@@ -10,11 +10,13 @@
           <mat-icon class="example-tab-icon">place</mat-icon>
           Relevé
         </a>
-        <ng-container *ngIf="(occtaxFormService.editionMode|async); else buttonBlock">
+        <ng-container
+          *ngIf="occtaxFormService.editionMode | async; else buttonBlock"
+        >
           <a
             (click)="navigate('taxons')"
             class="tablinks"
-            [ngClass]="{'active': occtaxFormService.currentTab === 'taxons'}"
+            [ngClass]="{ active: occtaxFormService.currentTab === 'taxons' }"
           >
             <mat-icon class="example-tab-icon">emoji_nature</mat-icon>
             Taxons
@@ -34,7 +36,9 @@
           labelPosition="before"
           matTooltip="Enchainer les relevés sans retourner à la liste des relevés"
           [checked]="occtaxFormService.chainRecording"
-          (change)="occtaxFormService.chainRecording=!occtaxFormService.chainRecording"
+          (change)="
+            occtaxFormService.chainRecording = !occtaxFormService.chainRecording
+          "
           color="primary"
         >
         </mat-slide-toggle>
@@ -60,19 +64,19 @@
     <div
       *ngIf="occtaxFormService.currentTab === 'releve'"
       class="occtax-form-content"
-      [ngStyle]="{'min-height.px': cardContentHeight}"
+      [ngStyle]="{ 'min-height.px': cardContentHeight }"
     >
       <div class="row">
         <div
           class="col-xl-6 col-lg-7 col-sm-6"
-          [ngStyle]="{'height.px': cardContentHeight}"
+          [ngStyle]="{ 'height.px': cardContentHeight }"
         >
           <pnx-occtax-form-map></pnx-occtax-form-map>
         </div>
-        <div 
+        <div
           class="col-xl-6 col-lg-5 col-sm-6"
-          style="overflow-y: scroll;"
-          [ngStyle]="{'height.px': cardContentHeight}"
+          style="overflow-y: scroll"
+          [ngStyle]="{ 'height.px': cardContentHeight }"
         >
           <pnx-occtax-form-releve></pnx-occtax-form-releve>
         </div>
@@ -83,40 +87,36 @@
       *ngIf="occtaxFormService.currentTab === 'taxons'"
       class="occtax-form-content"
       id="taxon-tab"
-      [ngStyle]="{'height.px': cardContentHeight}"
+      [ngStyle]="{ 'height.px': cardContentHeight }"
     >
       <div class="row">
         <div
           class="col-md-6"
           id="left-form"
-          [ngStyle]="{'height.px': cardContentHeight - 50}"
+          [ngStyle]="{ 'height.px': cardContentHeight - 50 }"
         >
-          <pnx-occtax-form-occurrence>
-          </pnx-occtax-form-occurrence>
+          <pnx-occtax-form-occurrence> </pnx-occtax-form-occurrence>
         </div>
         <div
-          [ngStyle]="{'height.px': cardContentHeight - 30}"
+          [ngStyle]="{ 'height.px': cardContentHeight - 30 }"
           class="col-md-5"
         >
           <h5>
             Taxons enregistrés
             <mat-icon
-              style="vertical-align: middle;"
+              style="vertical-align: middle"
               matTooltip="Les taxons affichés ici ont été enregistrés dans la base de données."
             >
               info
             </mat-icon>
           </h5>
           <pnx-occtax-form-taxa-list></pnx-occtax-form-taxa-list>
-
         </div>
-
       </div>
 
-
       <button
         id="btn-finish"
-        [disabled]="(occtaxTaxaListService.occurrences$ | async)?.length === 0 "
+        [disabled]="(occtaxTaxaListService.occurrences$ | async)?.length === 0"
         mat-raised-button
         color="primary"
         matTooltip="Terminer la saisie et quitter le formulaire"
@@ -125,9 +125,7 @@ <h5>
       >
         Terminer la saisie
       </button>
-
     </div>
-
   </div>
-  <pnx-occtax-form-param #modalComponent ></pnx-occtax-form-param>
-</div>
\ No newline at end of file
+  <pnx-occtax-form-param #modalComponent></pnx-occtax-form-param>
+</div>
diff --git a/contrib/occtax/frontend/app/occtax-form/occtax-form.component.scss b/contrib/occtax/frontend/app/occtax-form/occtax-form.component.scss
index 2c5b39d0bf..f616b4d487 100644
--- a/contrib/occtax/frontend/app/occtax-form/occtax-form.component.scss
+++ b/contrib/occtax/frontend/app/occtax-form/occtax-form.component.scss
@@ -3,7 +3,9 @@
   border: 1px solid #f1f1f1;
   border-radius: 2px;
   padding: 0px 15px;
-  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
+  box-shadow:
+    0 2px 1px -1px rgba(0, 0, 0, 0.2),
+    0 1px 1px 0 rgba(0, 0, 0, 0.14),
     0 1px 3px 0 rgba(0, 0, 0, 0.12);
   height: 100%;
 }
@@ -13,28 +15,25 @@
 }
 
 #taxon-tab {
-	padding-bottom: 45px;
+  padding-bottom: 45px;
 }
 
 #left-form {
   overflow-y: auto;
-    margin-right: 5%;
-
+  margin-right: 5%;
 }
 
 .vertical-align {
   vertical-align: middle;
 }
 
-
 #btn-finish {
   position: absolute;
   right: 25px;
   bottom: 20px;
-  z-index:100;
+  z-index: 100;
 }
 
-
 #btn-cancel {
   margin-right: 10px;
 }
@@ -69,7 +68,7 @@
   position: absolute;
   left: 25%;
   bottom: 50px;
-  z-index:100;
+  z-index: 100;
 }
 
 /* Style the buttons that are used to open the tab content */
diff --git a/contrib/occtax/frontend/app/occtax-form/occurrence/occurrence.component.html b/contrib/occtax/frontend/app/occtax-form/occurrence/occurrence.component.html
index 11f53d0093..8ef2694278 100644
--- a/contrib/occtax/frontend/app/occtax-form/occurrence/occurrence.component.html
+++ b/contrib/occtax/frontend/app/occtax-form/occurrence/occurrence.component.html
@@ -1,43 +1,45 @@
-<h5> Ajout d'un taxon </h5>
-<div 
-  class="row" 
-  style="height:70px!important"
->
+<h5>Ajout d'un taxon</h5>
+<div class="row" style="height: 70px !important">
   <div class="col-sm-6">
     <pnx-taxonomy
       label="{{ 'Taxon.NomCite' | translate }}"
       [parentFormControl]="taxonForm"
-      [idList]="fs.idTaxonList" 
-      [charNumber]="3" 
-      [listLength]="config.OCCTAX.taxon_result_number" 
+      [idList]="fs.idTaxonList"
+      [charNumber]="3"
+      [listLength]="config.OCCTAX.taxon_result_number"
       [displayAdvancedFilters]="false"
       displayedLabel="search_name"
       (onChange)="selectAddOcc($event)"
     >
     </pnx-taxonomy>
-    <small 
-      *ngIf="(occurrenceForm.get('nom_cite').hasError('required') && taxonForm.touched) && !taxonFormFocus"
-      class="error" 
-      style="color:red"
+    <small
+      *ngIf="
+        occurrenceForm.get('nom_cite').hasError('required') &&
+        taxonForm.touched &&
+        !taxonFormFocus
+      "
+      class="error"
+      style="color: red"
     >
-      {{'Taxon.Errors.NomCiteRequiredError' |translate}}
+      {{ "Taxon.Errors.NomCiteRequiredError" | translate }}
     </small>
     <small
-      *ngIf="(!occurrenceForm.get('nom_cite').hasError('required') && occurrenceForm.get('cd_nom').hasError('required')) && taxonForm.touched"
-      class="error" 
-      style="color:red"
+      *ngIf="
+        !occurrenceForm.get('nom_cite').hasError('required') &&
+        occurrenceForm.get('cd_nom').hasError('required') &&
+        taxonForm.touched
+      "
+      class="error"
+      style="color: red"
     >
-      {{'Taxon.Errors.CdNomRequiredError' |translate}}
+      {{ "Taxon.Errors.CdNomRequiredError" | translate }}
     </small>
   </div>
-  <div 
-    *ngIf="config.OCCTAX.form_fields.display_nom_valide" 
-    class="col-sm-6"
-  >
+  <div *ngIf="config.OCCTAX.form_fields.display_nom_valide" class="col-sm-6">
     <small> TAXREF - Nom valide </small>
-    <span 
+    <span
       data-qa="occurrence-nom-valide"
-      class="form-control form-control-sm form-nom-complet" 
+      class="form-control form-control-sm form-nom-complet"
       [innerHTML]="taxonForm.value?.nom_valide"
     >
     </span>
@@ -45,13 +47,10 @@ <h5> Ajout d'un taxon </h5>
 </div>
 
 <div class="row" data-qa="pnx-nomenclature-info-comp">
-  <div 
-    *ngIf="config.OCCTAX.form_fields.obs_tech" 
-    class="col-lg-4 col-sm-6"
-  >
-    <pnx-nomenclature 
+  <div *ngIf="config.OCCTAX.form_fields.obs_tech" class="col-lg-4 col-sm-6">
+    <pnx-nomenclature
       label="{{ 'Taxon.ObsTech' | translate }}"
-      [parentFormControl]="occurrenceForm.get('id_nomenclature_obs_technique')" 
+      [parentFormControl]="occurrenceForm.get('id_nomenclature_obs_technique')"
       codeNomenclatureType="METH_OBS"
       [regne]="taxref?.regne"
       [group2Inpn]="taxref?.group2_inpn"
@@ -60,21 +59,26 @@ <h5> Ajout d'un taxon </h5>
     >
     </pnx-nomenclature>
     <small
-      *ngIf="occurrenceForm.get('id_nomenclature_obs_technique').hasError('required') && occurrenceForm.get('id_nomenclature_obs_technique').touched"
-      class="error" 
-      style="color:red"
+      *ngIf="
+        occurrenceForm
+          .get('id_nomenclature_obs_technique')
+          .hasError('required') &&
+        occurrenceForm.get('id_nomenclature_obs_technique').touched
+      "
+      class="error"
+      style="color: red"
       data-qa="pnx-nomenclature-meth-obs-error"
     >
-      {{'Taxon.Errors.TechObsRequiredError' |translate}}
+      {{ "Taxon.Errors.TechObsRequiredError" | translate }}
     </small>
   </div>
-  <div 
-    *ngIf="config.OCCTAX.form_fields.bio_condition" 
+  <div
+    *ngIf="config.OCCTAX.form_fields.bio_condition"
     class="col-lg-4 col-sm-6"
   >
-    <pnx-nomenclature 
+    <pnx-nomenclature
       label="{{ 'Taxon.BiologicalCondition' | translate }}"
-      [parentFormControl]="occurrenceForm.get('id_nomenclature_bio_condition')" 
+      [parentFormControl]="occurrenceForm.get('id_nomenclature_bio_condition')"
       codeNomenclatureType="ETA_BIO"
       [regne]="taxref?.regne"
       [group2Inpn]="taxref?.group2_inpn"
@@ -83,99 +87,118 @@ <h5> Ajout d'un taxon </h5>
     >
     </pnx-nomenclature>
     <small
-      *ngIf="occurrenceForm.get('id_nomenclature_bio_condition').hasError('required') && occurrenceForm.get('id_nomenclature_bio_condition').touched"
-      class="error" 
-      style="color:red"
+      *ngIf="
+        occurrenceForm
+          .get('id_nomenclature_bio_condition')
+          .hasError('required') &&
+        occurrenceForm.get('id_nomenclature_bio_condition').touched
+      "
+      class="error"
+      style="color: red"
       data-qa="pnx-nomenclature-eta-bio-error"
     >
-      {{'Taxon.Errors.BiologicalConditionRequiredError' |translate}}
+      {{ "Taxon.Errors.BiologicalConditionRequiredError" | translate }}
     </small>
   </div>
 </div>
 
-<div style="margin-top: 10px;">
-  <button 
-    type="button" 
-    class="btn btn-outline-shadow btn-sm" 
-    (click)='collapse()'
+<div style="margin-top: 10px">
+  <button
+    type="button"
+    class="btn btn-outline-shadow btn-sm"
+    (click)="collapse()"
     data-qa="pnx-occtax-taxon-form-advanced"
   >
     <i class="fa fa-cog" aria-hidden="true"></i>
-    {{ 'Taxon.Advanced' | translate }}
+    {{ "Taxon.Advanced" | translate }}
   </button>
-
 </div>
 
-<div [@detailExpand]='advanced'>
+<div [@detailExpand]="advanced">
   <div class="row">
-    <div 
-      *ngIf="config.OCCTAX.form_fields.determiner" 
-      class="col-lg-4 col-sm-6"
-    >
-      <small> {{ 'Taxon.Determiner' | translate }} </small>
-      <input 
-        class="form-control form-control-sm" 
-        [formControl]="occurrenceForm.get('determiner')" 
+    <div *ngIf="config.OCCTAX.form_fields.determiner" class="col-lg-4 col-sm-6">
+      <small> {{ "Taxon.Determiner" | translate }} </small>
+      <input
+        class="form-control form-control-sm"
+        [formControl]="occurrenceForm.get('determiner')"
         data-qa="pnx-occtax-taxon-form-determinator"
         type="text"
-      >
-      <small 
-        *ngIf="occurrenceForm.get('determiner').hasError('required') && occurrenceForm.get('determiner').touched"
+      />
+      <small
+        *ngIf="
+          occurrenceForm.get('determiner').hasError('required') &&
+          occurrenceForm.get('determiner').touched
+        "
         data-qa="pnx-occtax-taxon-form-determinator-error"
-        class="error" 
-        style="color:red"
+        class="error"
+        style="color: red"
       >
-        {{'Taxon.Errors.DeterminerRequiredError' |translate}}
+        {{ "Taxon.Errors.DeterminerRequiredError" | translate }}
       </small>
     </div>
-      <div 
-        *ngIf="config.OCCTAX.form_fields.determination_method" 
-        class="col-lg-8 col-sm-6"
+    <div
+      *ngIf="config.OCCTAX.form_fields.determination_method"
+      class="col-lg-8 col-sm-6"
+    >
+      <pnx-nomenclature
+        label="{{ 'Taxon.DeterminationMethod' | translate }}"
+        [parentFormControl]="
+          occurrenceForm.get('id_nomenclature_determination_method')
+        "
+        codeNomenclatureType="METH_DETERMIN"
+        [regne]="taxref?.regne"
+        [group2Inpn]="taxref?.group2_inpn"
+        [group3Inpn]="taxref?.group3_inpn"
       >
-        <pnx-nomenclature 
-          label="{{ 'Taxon.DeterminationMethod' | translate }}"
-          [parentFormControl]="occurrenceForm.get('id_nomenclature_determination_method')"
-          codeNomenclatureType="METH_DETERMIN" 
-          [regne]="taxref?.regne"
-          [group2Inpn]="taxref?.group2_inpn"
-          [group3Inpn]="taxref?.group3_inpn">
-        </pnx-nomenclature>
-        <small
-          *ngIf="occurrenceForm.get('id_nomenclature_determination_method').hasError('required') && occurrenceForm.get('id_nomenclature_determination_method').touched"
-          class="error" 
-          style="color:red"
-        >
-          {{'Taxon.Errors.DeterminationMethodRequiredError' |translate}}
-        </small>
-      </div>
+      </pnx-nomenclature>
+      <small
+        *ngIf="
+          occurrenceForm
+            .get('id_nomenclature_determination_method')
+            .hasError('required') &&
+          occurrenceForm.get('id_nomenclature_determination_method').touched
+        "
+        class="error"
+        style="color: red"
+      >
+        {{ "Taxon.Errors.DeterminationMethodRequiredError" | translate }}
+      </small>
+    </div>
   </div>
   <div class="row">
-    <div 
-      *ngIf="config.OCCTAX.form_fields.observation_status" 
+    <div
+      *ngIf="config.OCCTAX.form_fields.observation_status"
       class="col-lg-4 col-sm-6"
     >
-      <pnx-nomenclature 
+      <pnx-nomenclature
         label="{{ 'Taxon.ObservationStatus' | translate }}"
-        [parentFormControl]="occurrenceForm.get('id_nomenclature_observation_status')"
+        [parentFormControl]="
+          occurrenceForm.get('id_nomenclature_observation_status')
+        "
         codeNomenclatureType="STATUT_OBS"
       >
       </pnx-nomenclature>
-      <small 
-        *ngIf="occurrenceForm.get('id_nomenclature_bio_condition').hasError('required') && occurrenceForm.get('id_nomenclature_bio_condition').touched" 
-        class="error" 
-        style="color:red"
+      <small
+        *ngIf="
+          occurrenceForm
+            .get('id_nomenclature_bio_condition')
+            .hasError('required') &&
+          occurrenceForm.get('id_nomenclature_bio_condition').touched
+        "
+        class="error"
+        style="color: red"
       >
-        {{'Taxon.Errors.BiologicalConditionRequiredError' |translate}}
+        {{ "Taxon.Errors.BiologicalConditionRequiredError" | translate }}
       </small>
     </div>
 
-    <div 
-      *ngIf="config.OCCTAX.form_fields.naturalness" 
+    <div
+      *ngIf="config.OCCTAX.form_fields.naturalness"
       class="col-lg-4 col-sm-6"
     >
-      <pnx-nomenclature 
+      <pnx-nomenclature
         label="{{ 'Taxon.Naturalness' | translate }}"
-        [parentFormControl]="occurrenceForm.get('id_nomenclature_naturalness')" 
+        [parentFormControl]="occurrenceForm.get('id_nomenclature_naturalness')"
         codeNomenclatureType="NATURALITE"
         [regne]="taxref?.regne"
         [group2Inpn]="taxref?.group2_inpn"
@@ -189,27 +212,22 @@ <h5> Ajout d'un taxon </h5>
       *ngIf="occtaxFormOccurrenceService.formFieldsStatus.bio_status"
       class="col-lg-4 col-sm-6"
     -->
-    <div
-      *ngIf="config.OCCTAX.form_fields.bio_status"
-      class="col-lg-4 col-sm-6"
-    >
+    <div *ngIf="config.OCCTAX.form_fields.bio_status" class="col-lg-4 col-sm-6">
       <pnx-nomenclature
         label="{{ 'Taxon.BiologicalStatus' | translate }}"
         [parentFormControl]="occurrenceForm.get('id_nomenclature_bio_status')"
         codeNomenclatureType="STATUT_BIO"
         [regne]="taxref?.regne"
         [group2Inpn]="taxref?.group2_inpn"
-        [group3Inpn]="taxref?.group3_inpn">
+        [group3Inpn]="taxref?.group3_inpn"
+      >
       </pnx-nomenclature>
     </div>
 
-    <div 
-      *ngIf="config.OCCTAX.form_fields.behaviour" 
-      class="col-lg-4 col-sm-6"
-    >
-      <pnx-nomenclature 
+    <div *ngIf="config.OCCTAX.form_fields.behaviour" class="col-lg-4 col-sm-6">
+      <pnx-nomenclature
         label="{{ 'Taxon.OccBehaviour' | translate }}"
-        [parentFormControl]="occurrenceForm.get('id_nomenclature_behaviour')" 
+        [parentFormControl]="occurrenceForm.get('id_nomenclature_behaviour')"
         codeNomenclatureType="OCC_COMPORTEMENT"
         [regne]="taxref?.regne"
         [group2Inpn]="taxref?.group2_inpn"
@@ -217,39 +235,38 @@ <h5> Ajout d'un taxon </h5>
       >
       </pnx-nomenclature>
     </div>
-    <div 
-      *ngIf="config.OCCTAX.form_fields.source_status" 
+    <div
+      *ngIf="config.OCCTAX.form_fields.source_status"
       class="col-lg-4 col-sm-6"
     >
-      <pnx-nomenclature 
+      <pnx-nomenclature
         label="{{ 'Taxon.StatusSource' | translate }}"
-        [parentFormControl]="occurrenceForm.get('id_nomenclature_source_status')" 
+        [parentFormControl]="
+          occurrenceForm.get('id_nomenclature_source_status')
+        "
         codeNomenclatureType="STATUT_SOURCE"
       >
       </pnx-nomenclature>
     </div>
 
-    <div 
-      *ngIf="config.OCCTAX.form_fields.blurring" 
-      class="col-lg-4 col-sm-6"
-    >
-      <pnx-nomenclature 
+    <div *ngIf="config.OCCTAX.form_fields.blurring" class="col-lg-4 col-sm-6">
+      <pnx-nomenclature
         label="{{ 'Taxon.Blurring' | translate }}"
-        [parentFormControl]="occurrenceForm.get('id_nomenclature_blurring')" 
+        [parentFormControl]="occurrenceForm.get('id_nomenclature_blurring')"
         codeNomenclatureType="DEE_FLOU"
       >
       </pnx-nomenclature>
     </div>
   </div>
   <div class="row">
-    <div 
-      *ngIf="config.OCCTAX.form_fields.exist_proof" 
-      class="col-lg-4 col-sm-6" 
-      style="margin-bottom: 1rem;"
+    <div
+      *ngIf="config.OCCTAX.form_fields.exist_proof"
+      class="col-lg-4 col-sm-6"
+      style="margin-bottom: 1rem"
     >
-      <pnx-nomenclature 
+      <pnx-nomenclature
         label="{{ 'Taxon.ExistProof' | translate }}"
-        [parentFormControl]="occurrenceForm.get('id_nomenclature_exist_proof')" 
+        [parentFormControl]="occurrenceForm.get('id_nomenclature_exist_proof')"
         codeNomenclatureType="PREUVE_EXIST"
         [regne]="taxref?.regne"
         [group2Inpn]="taxref?.group2_inpn"
@@ -259,67 +276,97 @@ <h5> Ajout d'un taxon </h5>
       </pnx-nomenclature>
     </div>
 
-    <div 
-      *ngIf="config.OCCTAX.form_fields.digital_proof" 
+    <div
+      *ngIf="config.OCCTAX.form_fields.digital_proof"
       class="col-lg-4 col-sm-6"
-      [ngClass]="{'d-none': !displayProofFromElements && !occurrenceForm.get('digital_proof').hasError('proofNotNull')}"
+      [ngClass]="{
+        'd-none':
+          !displayProofFromElements &&
+          !occurrenceForm.get('digital_proof').hasError('proofNotNull')
+      }"
     >
       <div class="form-group">
-        <small> {{ 'Taxon.DigitalProof' | translate }} </small>
+        <small> {{ "Taxon.DigitalProof" | translate }} </small>
         <input
-          [ngClass]="{'is-invalid' : occurrenceForm.get('digital_proof').invalid || occurrenceForm.hasError('proofRequired')}"
-          class="form-control form-control-sm" 
-          [formControl]="occurrenceForm.get('digital_proof')" 
+          [ngClass]="{
+            'is-invalid':
+              occurrenceForm.get('digital_proof').invalid ||
+              occurrenceForm.hasError('proofRequired')
+          }"
+          class="form-control form-control-sm"
+          [formControl]="occurrenceForm.get('digital_proof')"
           type="text"
-        >
+        />
       </div>
-      <small 
-        *ngIf="occurrenceForm.get('digital_proof').hasError('pattern')" 
-        class="error" 
-        style="color:red"
+      <small
+        *ngIf="occurrenceForm.get('digital_proof').hasError('pattern')"
+        class="error"
+        style="color: red"
       >
-        {{'Taxon.Errors.ExistProofValidation' |translate}}
+        {{ "Taxon.Errors.ExistProofValidation" | translate }}
       </small>
     </div>
-    <div 
-      *ngIf="config.OCCTAX.form_fields.non_digital_proof" 
+    <div
+      *ngIf="config.OCCTAX.form_fields.non_digital_proof"
       class="col-lg-4 col-sm-6"
-      [ngClass]="{'d-none': !displayProofFromElements && !occurrenceForm.get('non_digital_proof').hasError('proofNotNull')}"
+      [ngClass]="{
+        'd-none':
+          !displayProofFromElements &&
+          !occurrenceForm.get('non_digital_proof').hasError('proofNotNull')
+      }"
     >
       <div class="form-group">
-        <small> {{ 'Taxon.NonDigitalProof' | translate }} </small>
+        <small> {{ "Taxon.NonDigitalProof" | translate }} </small>
         <input
-          [ngClass]="{'is-invalid' : occurrenceForm.get('non_digital_proof').invalid || occurrenceForm.hasError('proofRequired')}"
-          class="form-control form-control-sm" 
-          [formControl]="occurrenceForm.get('non_digital_proof')" 
+          [ngClass]="{
+            'is-invalid':
+              occurrenceForm.get('non_digital_proof').invalid ||
+              occurrenceForm.hasError('proofRequired')
+          }"
+          class="form-control form-control-sm"
+          [formControl]="occurrenceForm.get('non_digital_proof')"
           type="text"
-        >
+        />
       </div>
     </div>
   </div>
 
-  <div 
-    *ngIf="occurrenceForm.hasError('proofRequired')" 
+  <div
+    *ngIf="occurrenceForm.hasError('proofRequired')"
     class="error"
-    style="color:red; margin-top: -.8rem; margin-bottom: .5rem; font-size: 80%; font-weight: 400;"
+    style="
+      color: red;
+      margin-top: -0.8rem;
+      margin-bottom: 0.5rem;
+      font-size: 80%;
+      font-weight: 400;
+    "
   >
-    {{'Taxon.Errors.NoExistProofError' |translate}}
+    {{ "Taxon.Errors.NoExistProofError" | translate }}
   </div>
   <div
-    *ngIf="occurrenceForm.get('non_digital_proof').hasError('proofNotNull') || occurrenceForm.get('digital_proof').hasError('proofNotNull')"
-    class="error" 
-    style="color:red; margin-top: -.8rem; margin-bottom: .5rem; font-size: 80%; font-weight: 400;"
+    *ngIf="
+      occurrenceForm.get('non_digital_proof').hasError('proofNotNull') ||
+      occurrenceForm.get('digital_proof').hasError('proofNotNull')
+    "
+    class="error"
+    style="
+      color: red;
+      margin-top: -0.8rem;
+      margin-bottom: 0.5rem;
+      font-size: 80%;
+      font-weight: 400;
+    "
   >
-    {{'Taxon.Errors.ExistproofError' |translate}}
+    {{ "Taxon.Errors.ExistproofError" | translate }}
   </div>
 
-
   <div *ngIf="config.OCCTAX.form_fields.comment_occ">
-    <textarea 
-      placeholder="{{ 'Taxon.Comment' | translate }}" 
+    <textarea
+      placeholder="{{ 'Taxon.Comment' | translate }}"
       class="form-control"
-      [formControl]="occurrenceForm.get('comment')" 
-      rows="2" 
+      [formControl]="occurrenceForm.get('comment')"
+      rows="2"
       id="commentaire"
     >
     </textarea>
@@ -332,57 +379,49 @@ <h5> Ajout d'un taxon </h5>
   [formsDefinition]="additionalFieldsForm"
 >
 </pnx-dynamic-form-generator>
-  
-<h5 style="margin-top: 15px;">
-  <span
-    [matBadge]="countings.length"
-    matBadgeOverlap="false"
-  >
-    {{'Counting.Counting' |translate}}<ng-container *ngIf="countings.length > 1">s</ng-container>
+
+<h5 style="margin-top: 15px">
+  <span [matBadge]="countings.length" matBadgeOverlap="false">
+    {{ "Counting.Counting" | translate
+    }}<ng-container *ngIf="countings.length > 1">s</ng-container>
   </span>
 </h5>
 
-<div 
-  *ngIf="occurrenceForm.get('cor_counting_occtax').hasError('required')" 
-  class="error" 
-  style="color:red"
+<div
+  *ngIf="occurrenceForm.get('cor_counting_occtax').hasError('required')"
+  class="error"
+  style="color: red"
 >
-  {{'Taxon.Errors.CountingRequiredError' |translate}}
+  {{ "Taxon.Errors.CountingRequiredError" | translate }}
 </div>
 
 <mat-accordion [multi]="true" data-qa="pnx-occtax-taxon-form-count">
-
   <div
     *ngFor="let counting of countings; index as i"
     class="blc-expansion-panel"
-    [attr.data-qa]='"pnx-occtax-taxon-form-count-"+i'
+    [attr.data-qa]="'pnx-occtax-taxon-form-count-' + i"
     displayMouseOver
     selector=".btn-clear"
   >
-  <mat-expansion-panel [expanded]="countings.length === (i+1)">
-    <mat-expansion-panel-header class="right-aligned-header">
-      <mat-panel-title>
-        Dénombrement #{{ i + 1 }}
-
-      </mat-panel-title>
-      <mat-panel-description
-       *ngIf="countings.length > 1"
-       class="btn-clear d-none"
-       (click)="removeCounting(i)"
-       matTooltip="Supprimer ce denombrement"
-       >
-        <mat-icon>clear</mat-icon>
-      </mat-panel-description>
-    
-    </mat-expansion-panel-header>
-
-    <pnx-occtax-form-counting 
-      [value]="counting" 
-      data-qa="pnx-nomenclature-obj-denombrement"
-    >
-    </pnx-occtax-form-counting>
+    <mat-expansion-panel [expanded]="countings.length === i + 1">
+      <mat-expansion-panel-header class="right-aligned-header">
+        <mat-panel-title> Dénombrement #{{ i + 1 }} </mat-panel-title>
+        <mat-panel-description
+          *ngIf="countings.length > 1"
+          class="btn-clear d-none"
+          (click)="removeCounting(i)"
+          matTooltip="Supprimer ce denombrement"
+        >
+          <mat-icon>clear</mat-icon>
+        </mat-panel-description>
+      </mat-expansion-panel-header>
 
-  </mat-expansion-panel>
+      <pnx-occtax-form-counting
+        [value]="counting"
+        data-qa="pnx-nomenclature-obj-denombrement"
+      >
+      </pnx-occtax-form-counting>
+    </mat-expansion-panel>
 
     <button
       *ngIf="i == countings.length - 1"
@@ -394,42 +433,42 @@ <h5 style="margin-top: 15px;">
     >
       <mat-icon matTooltip="Ajouter un denombrement">add</mat-icon>
     </button>
-
-  </div>
-
-  <div>
-
   </div>
 
+  <div></div>
 </mat-accordion>
 
-<pnx-occtax-profiles *ngIf="config.FRONTEND['ENABLE_PROFILES']"></pnx-occtax-profiles>
+<pnx-occtax-profiles
+  *ngIf="config.FRONTEND['ENABLE_PROFILES']"
+></pnx-occtax-profiles>
 
 <div class="bloc-button">
-  <ng-container *ngIf="!(occtaxFormOccurrenceService.occurrence|async); else modifButton">
-    <button 
+  <ng-container
+    *ngIf="!(occtaxFormOccurrenceService.occurrence | async); else modifButton"
+  >
+    <button
       id="add-occ"
       data-qa="occurrence-add-btn"
       mat-raised-button
-      class="button-success uppercase" 
+      class="button-success uppercase"
       matTooltip="Enregistrer ce taxon"
-      [disabled]="occtaxFormOccurrenceService.form.invalid" 
+      [disabled]="occtaxFormOccurrenceService.form.invalid"
       (click)="submitOccurrenceForm()"
     >
-      <mat-spinner 
-        *ngIf="occtaxFormOccurrenceService.saveWaiting" 
-        diameter="25" 
+      <mat-spinner
+        *ngIf="occtaxFormOccurrenceService.saveWaiting"
+        diameter="25"
         strokeWidth="2"
       >
       </mat-spinner>
       Enregistrer ce taxon
-      <mat-icon style="vertical-align: middle;">save</mat-icon>
+      <mat-icon style="vertical-align: middle">save</mat-icon>
     </button>
   </ng-container>
   <ng-template #modifButton>
-    <button 
-      class="uppercase" 
-      style="margin-right: 20px;"
+    <button
+      class="uppercase"
+      style="margin-right: 20px"
       color="warn"
       mat-raised-button
       matTooltip="Annuler les modifications sur ce taxon"
@@ -437,27 +476,27 @@ <h5 style="margin-top: 15px;">
     >
       Annuler
     </button>
-    <button 
+    <button
       id="add-occ"
-      class="button-success uppercase" 
+      class="button-success uppercase"
       mat-raised-button
-      matTooltip="Modifier et enregistrer ce taxon" 
+      matTooltip="Modifier et enregistrer ce taxon"
       [disabled]="occtaxFormOccurrenceService.form.invalid"
       (click)="submitOccurrenceForm()"
     >
-      <mat-spinner 
-        *ngIf="occtaxFormOccurrenceService.saveWaiting" 
-        diameter="25" 
+      <mat-spinner
+        *ngIf="occtaxFormOccurrenceService.saveWaiting"
+        diameter="25"
         strokeWidth="2"
       >
       </mat-spinner>
       Modifier ce taxon
-      <mat-icon style="vertical-align: middle;">save</mat-icon>
+      <mat-icon style="vertical-align: middle">save</mat-icon>
     </button>
   </ng-template>
 </div>
 
-<div class="text-center" style="margin-top: 10px;">
+<div class="text-center" style="margin-top: 10px">
   <!-- <button 
       class="btn btn-danger"
       matTooltip="Raffraichir"
diff --git a/contrib/occtax/frontend/app/occtax-form/occurrence/occurrence.component.scss b/contrib/occtax/frontend/app/occtax-form/occurrence/occurrence.component.scss
index 8da3895c85..f68ac73432 100644
--- a/contrib/occtax/frontend/app/occtax-form/occurrence/occurrence.component.scss
+++ b/contrib/occtax/frontend/app/occtax-form/occurrence/occurrence.component.scss
@@ -54,4 +54,4 @@ pnx-dynamic-form-releve {
   left: 0;
   width: 50%;
   text-align: center;
-}
\ No newline at end of file
+}
diff --git a/contrib/occtax/frontend/app/occtax-form/occurrence/profiles.component.html b/contrib/occtax/frontend/app/occtax-form/occurrence/profiles.component.html
index 2fb92f9aec..78bdf70cf9 100644
--- a/contrib/occtax/frontend/app/occtax-form/occurrence/profiles.component.html
+++ b/contrib/occtax/frontend/app/occtax-form/occurrence/profiles.component.html
@@ -1,19 +1,14 @@
-<div 
-  *ngIf="taxon !== null && profilErrors.length > 0" 
+<div
+  *ngIf="taxon !== null && profilErrors.length > 0"
   class="alert alert-warning"
 >
-  <h5> <mat-icon>warning</mat-icon> Donnée exceptionnelle</h5>
+  <h5><mat-icon>warning</mat-icon> Donnée exceptionnelle</h5>
   <ul>
     <li *ngFor="let err of profilErrors">
-      {{err.value}}
-  </li>
+      {{ err.value }}
+    </li>
   </ul>
-  <a 
-    target="_blank"
-    [routerLink]="['/synthese/taxon', taxon.cd_ref]" 
-    >    
-    <button mat-raised-button>
-      Voir la fiche profil du taxon
-    </button>
+  <a target="_blank" [routerLink]="['/synthese/taxon', taxon.cd_ref]">
+    <button mat-raised-button>Voir la fiche profil du taxon</button>
   </a>
-</div>
\ No newline at end of file
+</div>
diff --git a/contrib/occtax/frontend/app/occtax-form/releve/releve.component.html b/contrib/occtax/frontend/app/occtax-form/releve/releve.component.html
index 589eb5820f..46c33b7b45 100644
--- a/contrib/occtax/frontend/app/occtax-form/releve/releve.component.html
+++ b/contrib/occtax/frontend/app/occtax-form/releve/releve.component.html
@@ -4,39 +4,34 @@
   data-qa="overlay"
   class="disabled-form"
   (click)="formDisabled()"
->
-</div>
+></div>
 
 <div class="row">
-  <div
-    *ngIf="config.OCCTAX.form_fields.precision"
-    class="col-8"
-  >
+  <div *ngIf="config.OCCTAX.form_fields.precision" class="col-8">
     <small>Précision du pointage (m)</small>
     <input
       type="number"
       [formControl]="propertiesForm.get('precision')"
       class="form-control form-control-sm"
       placeholder="Précision du pointage"
-    >
+    />
   </div>
 </div>
 
 <div class="row">
   <div class="col-8">
     <div *ngIf="config.OCCTAX.form_fields.place_name">
-      <small> {{ 'Releve.PlaceName' | translate }} </small>
+      <small> {{ "Releve.PlaceName" | translate }} </small>
       <input
         class="form-control form-control-sm"
         type="text"
         [formControl]="propertiesForm.get('place_name')"
-      >
+      />
     </div>
   </div>
 </div>
 <div class="row">
   <div class="col-xl-8 col-lg-10">
-
     <!-- OBSERVATEURS -->
     <pnx-observers
       *ngIf="!config.OCCTAX.observers_txt; else elseBlock"
@@ -53,50 +48,61 @@
       >
       </pnx-observers-text>
     </ng-template>
-
   </div>
 </div>
 <div class="row">
-  <div  class="col-xl-4 col-md-6 col-sm-8 col-11">
-      <!-- DATASET -->
-      <ng-container *ngIf="dataset?.active === false || !isDatasetUser(dataset?.id_dataset); else elseblocDatasetForm">
-        <div class="dataset-inactive">
-          <span style="display: block; font-size: 80%;"> {{ 'MetaData.Datasets' | translate }} </span>
-          <span 
-            class="dataset-block"
-            matTooltip="Le jeu de donnée n'est pas modifiable"> 
-            {{ dataset?.dataset_name}} 
-          </span> 
-        </div>
-      </ng-container>
-      <ng-template #elseblocDatasetForm>
-        <pnx-datasets 
-          #dataset
-          data-qa="pnx-occtax-releve-form-datasets"
-          label="{{ 'MetaData.Datasets' | translate }}" 
-          [parentFormControl]="propertiesForm.get('id_dataset')"
-          (valueLoaded)="userDatasets = $event.value"
-          [moduleCode]="moduleService.currentModule?.module_code"
-          [creatableInModule]="moduleService.currentModule?.module_code"
-          (onChange)="occtaxFormReleveService.onDatasetChanged($event);"
-          >
-        </pnx-datasets>
-      </ng-template>
+  <div class="col-xl-4 col-md-6 col-sm-8 col-11">
+    <!-- DATASET -->
+    <ng-container
+      *ngIf="
+        dataset?.active === false || !isDatasetUser(dataset?.id_dataset);
+        else elseblocDatasetForm
+      "
+    >
+      <div class="dataset-inactive">
+        <span style="display: block; font-size: 80%">
+          {{ "MetaData.Datasets" | translate }}
+        </span>
+        <span
+          class="dataset-block"
+          matTooltip="Le jeu de donnée n'est pas modifiable"
+        >
+          {{ dataset?.dataset_name }}
+        </span>
+      </div>
+    </ng-container>
+    <ng-template #elseblocDatasetForm>
+      <pnx-datasets
+        #dataset
+        data-qa="pnx-occtax-releve-form-datasets"
+        label="{{ 'MetaData.Datasets' | translate }}"
+        [parentFormControl]="propertiesForm.get('id_dataset')"
+        (valueLoaded)="userDatasets = $event.value"
+        [moduleCode]="moduleService.currentModule?.module_code"
+        [creatableInModule]="moduleService.currentModule?.module_code"
+        (onChange)="occtaxFormReleveService.onDatasetChanged($event)"
+      >
+      </pnx-datasets>
+    </ng-template>
   </div>
 </div>
 
-
 <div class="row">
   <div class="col-xl-4 col-md-6 col-sm-8 col-11">
     <!-- DATE MIN -->
     <pnx-date
       *ngIf="config.OCCTAX.form_fields.date_min"
-      [isInvalid]="propertiesForm.hasError('invalidDate') || propertiesForm.get('date_min').invalid"
+      [isInvalid]="
+        propertiesForm.hasError('invalidDate') ||
+        propertiesForm.get('date_min').invalid
+      "
       data-qa="pnx-occtax-releve-form-datemin"
       label="{{ 'Releve.MinDate' | translate }}"
       [parentFormControl]="propertiesForm.get('date_min')"
-      (onSelectOrKeyIn)="globalFormService.synchronizeMax(propertiesForm, 'date_min', 'date_max')"
-      >
+      (onSelectOrKeyIn)="
+        globalFormService.synchronizeMax(propertiesForm, 'date_min', 'date_max')
+      "
+    >
     </pnx-date>
   </div>
 
@@ -108,17 +114,24 @@
     <pnx-date
       *ngIf="config.OCCTAX.form_fields.date_max"
       data-qa="pnx-occtax-releve-form-datemax"
-      [isInvalid]="propertiesForm.hasError('invalidDate') || propertiesForm.get('date_max').invalid"
+      [isInvalid]="
+        propertiesForm.hasError('invalidDate') ||
+        propertiesForm.get('date_max').invalid
+      "
       label="{{ 'Releve.MaxDate' | translate }} "
       [parentFormControl]="propertiesForm.get('date_max')"
-      (onSelectOrKeyIn)="globalFormService.synchronizeMin(propertiesForm, 'date_min', 'date_max')"
-      >
+      (onSelectOrKeyIn)="
+        globalFormService.synchronizeMin(propertiesForm, 'date_min', 'date_max')
+      "
+    >
     </pnx-date>
   </div>
   <div class="d-flex align-content-end flex-wrap">
     <button
       class="btn btn-sm btn-outline-shadow"
-      (click)="occtaxFormReleveService.showTime = !occtaxFormReleveService.showTime"
+      (click)="
+        occtaxFormReleveService.showTime = !occtaxFormReleveService.showTime
+      "
       data-qa="pnx-occtax-releve-form-adddate"
     >
       <i
@@ -132,31 +145,34 @@
 <div
   *ngIf="propertiesForm.hasError('invalidDate')"
   class="error"
-  style="color:red; font-size: 80%; font-weight: 400;"
+  style="color: red; font-size: 80%; font-weight: 400"
 >
-  {{'Releve.Errors.DateMaxError' |translate}}
+  {{ "Releve.Errors.DateMaxError" | translate }}
 </div>
 
-<div
-  class="row"
-  [hidden]="!occtaxFormReleveService.showTime"
->
+<div class="row" [hidden]="!occtaxFormReleveService.showTime">
   <div class="col-md-4 col-sm-5 col-6">
-
     <!-- HOUR MIN -->
-    <div
-      *ngIf="config.OCCTAX.form_fields.hour_min"
-      class="form-group"
-    >
-      <small> {{'Releve.HourMin' | translate }} </small>
+    <div *ngIf="config.OCCTAX.form_fields.hour_min" class="form-group">
+      <small> {{ "Releve.HourMin" | translate }} </small>
       <input
-        [ngClass]="{'is-invalid' : propertiesForm.get('hour_min').invalid || propertiesForm.hasError('invalidHour')}"
+        [ngClass]="{
+          'is-invalid':
+            propertiesForm.get('hour_min').invalid ||
+            propertiesForm.hasError('invalidHour')
+        }"
         [formControl]="propertiesForm.get('hour_min')"
         class="form-control form-control-sm"
         type="text"
-        placeholder="{{'Releve.HourFormat' | translate }}"
-        (keyup)="globalFormService.synchronizeMax(propertiesForm, 'hour_min', 'hour_max')"
-      >
+        placeholder="{{ 'Releve.HourFormat' | translate }}"
+        (keyup)="
+          globalFormService.synchronizeMax(
+            propertiesForm,
+            'hour_min',
+            'hour_max'
+          )
+        "
+      />
     </div>
   </div>
 
@@ -165,111 +181,109 @@
     [hidden]="!occtaxFormReleveService.showTime"
   >
     <!-- HOUR MAX -->
-    <div
-      *ngIf="config.OCCTAX.form_fields.hour_max"
-      class="form-group"
-    >
-      <small> {{'Releve.HourMax' | translate }} </small>
+    <div *ngIf="config.OCCTAX.form_fields.hour_max" class="form-group">
+      <small> {{ "Releve.HourMax" | translate }} </small>
       <input
-        [ngClass]="{'is-invalid' : propertiesForm.get('hour_max').invalid || propertiesForm.hasError('invalidHour')}"
+        [ngClass]="{
+          'is-invalid':
+            propertiesForm.get('hour_max').invalid ||
+            propertiesForm.hasError('invalidHour')
+        }"
         [formControl]="propertiesForm.get('hour_max')"
         class="form-control form-control-sm"
         type="text"
-        placeholder="{{'Releve.HourFormat' | translate }}"
-        (keyup)="globalFormService.synchronizeMin(propertiesForm, 'hour_min', 'hour_max')"
-      >
+        placeholder="{{ 'Releve.HourFormat' | translate }}"
+        (keyup)="
+          globalFormService.synchronizeMin(
+            propertiesForm,
+            'hour_min',
+            'hour_max'
+          )
+        "
+      />
     </div>
   </div>
 </div>
 <div
   *ngIf="propertiesForm.hasError('invalidHour')"
   class="error"
-  style="margin-top: -.8rem; margin-bottom: .5rem; color:red; font-size: 80%; font-weight: 400;"
+  style="
+    margin-top: -0.8rem;
+    margin-bottom: 0.5rem;
+    color: red;
+    font-size: 80%;
+    font-weight: 400;
+  "
 >
-  {{'Releve.Errors.HourMaxError' |translate}}
+  {{ "Releve.Errors.HourMaxError" | translate }}
 </div>
 
-
 <div class="row">
   <!-- ALTITUDE MIN -->
-  <div
-    *ngIf="config.OCCTAX.form_fields.altitude_min"
-    class="col-4"
-  >
-    <small> {{ 'Releve.MinAltitude' | translate }} </small>
+  <div *ngIf="config.OCCTAX.form_fields.altitude_min" class="col-4">
+    <small> {{ "Releve.MinAltitude" | translate }} </small>
     <input
       class="form-control form-control-sm"
-      [ngClass]="{'is-invalid' : propertiesForm.hasError('invalidAlt')}"
+      [ngClass]="{ 'is-invalid': propertiesForm.hasError('invalidAlt') }"
       type="number"
       [formControl]="propertiesForm.get('altitude_min')"
-    >
+    />
   </div>
 
   <!-- ALTITUDE MAX -->
-  <div
-    *ngIf="config.OCCTAX.form_fields.altitude_max"
-    class="col-4"
-  >
-    <small> {{ 'Releve.MaxAltitude' | translate }} </small>
+  <div *ngIf="config.OCCTAX.form_fields.altitude_max" class="col-4">
+    <small> {{ "Releve.MaxAltitude" | translate }} </small>
     <input
       class="form-control form-control-sm"
-      [ngClass]="{'is-invalid' : propertiesForm.hasError('invalidAlt')}"
+      [ngClass]="{ 'is-invalid': propertiesForm.hasError('invalidAlt') }"
       type="number"
       [formControl]="propertiesForm.get('altitude_max')"
-    >
+    />
   </div>
 
-  <div
-    class="col-1 align-self-end"
-    style="padding-left: 0px"
-  >
-    <pnx-areas-intersected-modal
-      *ngIf="geojson"
-      [geojson]="geojson"
-    >
+  <div class="col-1 align-self-end" style="padding-left: 0px">
+    <pnx-areas-intersected-modal *ngIf="geojson" [geojson]="geojson">
     </pnx-areas-intersected-modal>
   </div>
-
 </div>
 <div
   *ngIf="propertiesForm.hasError('invalidAlt')"
   class="error"
-  style="color:red; font-size: 80%; font-weight: 400;"
+  style="color: red; font-size: 80%; font-weight: 400"
 >
-  {{'Releve.Errors.AltitudeError' |translate}}
+  {{ "Releve.Errors.AltitudeError" | translate }}
 </div>
 
 <div class="row">
   <div class="col-xl-4 col-md-6 col-sm-8 col-10">
     <div *ngIf="config.OCCTAX.form_fields.depth_min">
-      <small> {{ 'Releve.MinDepth' | translate }} </small>
+      <small> {{ "Releve.MinDepth" | translate }} </small>
       <input
         class="form-control form-control-sm"
         type="number"
-        [ngClass]="{'is-invalid' : propertiesForm.hasError('invalidDepth')}"
+        [ngClass]="{ 'is-invalid': propertiesForm.hasError('invalidDepth') }"
         [formControl]="propertiesForm.get('depth_min')"
-      >
+      />
     </div>
   </div>
   <div class="col-xl-4 col-md-6 col-sm-8 col-10">
     <div *ngIf="config.OCCTAX.form_fields.depth_min">
-      <small> {{ 'Releve.MaxDepth' | translate }} </small>
+      <small> {{ "Releve.MaxDepth" | translate }} </small>
       <input
         class="form-control form-control-sm"
         type="number"
-        [ngClass]="{'is-invalid' : propertiesForm.hasError('invalidDepth')}"
+        [ngClass]="{ 'is-invalid': propertiesForm.hasError('invalidDepth') }"
         [formControl]="propertiesForm.get('depth_max')"
-      >
+      />
     </div>
   </div>
-
 </div>
 <div
   *ngIf="propertiesForm.hasError('invalidDepth')"
   class="error"
-  style="color:red; font-size: 80%; font-weight: 400;"
+  style="color: red; font-size: 80%; font-weight: 400"
 >
-  {{'Releve.Errors.DepthError' |translate}}
+  {{ "Releve.Errors.DepthError" | translate }}
 </div>
 
 <div class="row">
@@ -283,55 +297,54 @@
     >
     </pnx-nomenclature>
   </div>
-  <div
-    *ngIf="config.OCCTAX.form_fields.grp_method"
-    class="col-xl-4 col-md-5"
-  >
-
-    <small> {{'Releve.GroupMethod' | translate}} </small>
+  <div *ngIf="config.OCCTAX.form_fields.grp_method" class="col-xl-4 col-md-5">
+    <small> {{ "Releve.GroupMethod" | translate }} </small>
     <input
       type="text"
       class="form-control form-control-sm"
       [formControl]="propertiesForm.get('grp_method')"
-    >
+    />
   </div>
   <div class="col-xl-4 col-md-5">
     <pnx-nomenclature
       *ngIf="config.OCCTAX.form_fields.geo_object_nature"
       label="{{ 'Releve.GeoObjectNature' | translate }}"
-      [parentFormControl]="propertiesForm.get('id_nomenclature_geo_object_nature')"
+      [parentFormControl]="
+        propertiesForm.get('id_nomenclature_geo_object_nature')
+      "
       codeNomenclatureType="NAT_OBJ_GEO"
     >
     </pnx-nomenclature>
   </div>
-
-
 </div>
 
-
 <div class="row">
   <!-- TECHNIQUE OBSERVATION -->
   <div class="col-6">
     <pnx-nomenclature
       *ngIf="config.OCCTAX.form_fields.tech_collect"
       label="{{ 'Releve.TechCollectCampanule' | translate }}"
-      [parentFormControl]="propertiesForm.get('id_nomenclature_tech_collect_campanule')"
+      [parentFormControl]="
+        propertiesForm.get('id_nomenclature_tech_collect_campanule')
+      "
       codeNomenclatureType="TECHNIQUE_OBS"
     >
     </pnx-nomenclature>
   </div>
-
 </div>
 
 <div class="row">
   <div class="col-6">
     <pnx-autocomplete
       *ngIf="config.OCCTAX.form_fields.habitat"
-      apiEndPoint="{{config.API_ENDPOINT}}/habref/habitats/autocomplete"
+      apiEndPoint="{{ config.API_ENDPOINT }}/habref/habitats/autocomplete"
       [searchAsParameter]="false"
       [parentFormControl]="occtaxFormReleveService.habitatForm"
       queryParamSearch="search_name"
-      [othersGetParams]="{cd_typo: this.config.OCCTAX?.CD_TYPO_HABITAT, id_list: this.config.OCCTAX?.ID_LIST_HABITAT}"
+      [othersGetParams]="{
+        cd_typo: this.config.OCCTAX?.CD_TYPO_HABITAT,
+        id_list: this.config.OCCTAX?.ID_LIST_HABITAT
+      }"
       keyValue="search_name"
       [formatter]="formatter"
       label="Habitat"
@@ -341,14 +354,10 @@
   </div>
 </div>
 
-
 <!-- COMMENTAIRE -->
 <div *ngIf="config.OCCTAX.form_fields.comment_releve">
-  <small> {{ 'Releve.Comment' | translate }} </small>
-  <textarea
-    class="form-control"
-    [formControl]="propertiesForm.get('comment')"
-  >
+  <small> {{ "Releve.Comment" | translate }} </small>
+  <textarea class="form-control" [formControl]="propertiesForm.get('comment')">
   </textarea>
 </div>
 <pnx-dynamic-form-generator
@@ -358,11 +367,7 @@
 >
 </pnx-dynamic-form-generator>
 
-<div
-  class="text-center"
-  style="margin-top: 10px;"
->
-
+<div class="text-center" style="margin-top: 10px">
   <ng-container>
     <button
       mat-raised-button
@@ -379,7 +384,7 @@
       matTooltip="Enregistrer le relevé et saisir les taxons"
       [disabled]="releveForm.invalid || occtaxFormReleveService.waiting"
       (click)="submitReleveForm()"
-      >
+    >
       <mat-spinner
         *ngIf="occtaxFormReleveService.waiting"
         diameter="25"
@@ -399,4 +404,4 @@
       Modifier le relevé
     </button> 
   </ng-template> -->
-</div>
\ No newline at end of file
+</div>
diff --git a/contrib/occtax/frontend/app/occtax-form/releve/releve.component.scss b/contrib/occtax/frontend/app/occtax-form/releve/releve.component.scss
index e3e02ae6e9..ea11f7f147 100644
--- a/contrib/occtax/frontend/app/occtax-form/releve/releve.component.scss
+++ b/contrib/occtax/frontend/app/occtax-form/releve/releve.component.scss
@@ -47,12 +47,14 @@ button .mat-spinner {
   background-clip: padding-box;
   border: 1px solid #ced4da;
   border-radius: 0.2rem;
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
   background-color: #ddd;
   cursor: not-allowed;
 }
 
-:host ::ng-deep ngb-typeahead-window  {
+:host ::ng-deep ngb-typeahead-window {
   width: 100%;
   overflow: auto;
   max-height: 300px;
@@ -60,4 +62,4 @@ button .mat-spinner {
 
 ::ng-deep .dropdown-item {
   white-space: inherit;
-}
\ No newline at end of file
+}
diff --git a/contrib/occtax/frontend/app/occtax-form/taxa-list/taxa-list.component.html b/contrib/occtax/frontend/app/occtax-form/taxa-list/taxa-list.component.html
index 13d492f14f..5bc60bceab 100644
--- a/contrib/occtax/frontend/app/occtax-form/taxa-list/taxa-list.component.html
+++ b/contrib/occtax/frontend/app/occtax-form/taxa-list/taxa-list.component.html
@@ -1,17 +1,27 @@
 <div id="taxalist-container">
   <ng-container
-    *ngIf="(occtaxTaxaListService.occurrences$ | async)?.length || occtaxTaxaListService.rec_occurrences_in_progress.length; else zeroOccurrenceBlk"
+    *ngIf="
+      (occtaxTaxaListService.occurrences$ | async)?.length ||
+        occtaxTaxaListService.rec_occurrences_in_progress.length;
+      else zeroOccurrenceBlk
+    "
   >
-
-    <ng-container *ngFor="let occ_in_progress of occtaxTaxaListService.rec_occurrences_in_progress">
+    <ng-container
+      *ngFor="
+        let occ_in_progress of occtaxTaxaListService.rec_occurrences_in_progress
+      "
+    >
       <div
         class="in-progress-panel"
         [ngClass]="occ_in_progress.state"
-        [matTooltip]="occ_in_progress.state == 'in_progress' ? 'Enregistrement en cours': 'Une erreur est survenue lors de l\'enregistrement'"
+        [matTooltip]="
+          occ_in_progress.state == 'in_progress'
+            ? 'Enregistrement en cours'
+            : 'Une erreur est survenue lors de l\'enregistrement'
+        "
         matTooltipPosition="left"
         (click)="inProgressErrorToForm(occ_in_progress)"
       >
-
         <mat-spinner
           *ngIf="occ_in_progress.state == 'in_progress'"
           diameter="20"
@@ -20,383 +30,494 @@
         </mat-spinner>
         <mat-icon *ngIf="occ_in_progress.state == 'error'">warning</mat-icon>
         <span [innerHTML]="taxonTitle(occ_in_progress.data)"></span>
-        <div
-          *ngIf="occ_in_progress.state == 'error'"
-          style="font-size: 12px;"
-        >
+        <div *ngIf="occ_in_progress.state == 'error'" style="font-size: 12px">
           Erreur : cliquez pour reprendre ce taxon
         </div>
       </div>
     </ng-container>
 
-
     <div
-      *ngFor="let occurrence of occtaxTaxaListService.occurrences$ | async; let i=index"
+      *ngFor="
+        let occurrence of occtaxTaxaListService.occurrences$ | async;
+        let i = index
+      "
       selector=".btn-actions"
     >
       <mat-accordion [multi]="true">
-
-        <mat-expansion-panel
-          displayMouseOver
-          selector=".btn-actions"
-        >
+        <mat-expansion-panel displayMouseOver selector=".btn-actions">
           <mat-expansion-panel-header class="right-aligned-header">
-            
             <mat-panel-title>
-             <span class="btn-actions d-none">
+              <span class="btn-actions d-none">
                 <button
                   mat-icon-button
                   class="btn-edit"
                   (click)="editOccurrence(occurrence)"
                 >
-                  <mat-icon
-                    matTooltip="Editer le taxon"
-                  >edit</mat-icon>
+                  <mat-icon matTooltip="Editer le taxon">edit</mat-icon>
                 </button>
                 <button
-                  *ngIf="(occtaxTaxaListService.occurrences$ |async)?.length != 1 || i != 0"
+                  *ngIf="
+                    (occtaxTaxaListService.occurrences$ | async)?.length != 1 ||
+                    i != 0
+                  "
                   mat-icon-button
                   class="btn-clear"
                   (click)="deleteOccurrence(occurrence)"
                 >
-                  <mat-icon
-                    matTooltip="Supprimer le taxon"
-                  >clear</mat-icon>
+                  <mat-icon matTooltip="Supprimer le taxon">clear</mat-icon>
                 </button>
               </span>
             </mat-panel-title>
-            
+
             <mat-panel-description>
               <span
                 [innerHTML]="taxonTitle(occurrence)"
-                [matTooltip]="occurrence.taxref?.nom_valide || removeHtml(occurrence.nom_cite)"
+                [matTooltip]="
+                  occurrence.taxref?.nom_valide ||
+                  removeHtml(occurrence.nom_cite)
+                "
                 class="header-title"
-                [attr.data-qa]='"pnx-occtax-taxon-form-taxa-head-"+i'
+                [attr.data-qa]="'pnx-occtax-taxon-form-taxa-head-' + i"
               >
-              </span> 
+              </span>
             </mat-panel-description>
-            
           </mat-expansion-panel-header>
 
           <mat-tab-group>
             <mat-tab label="Occurrence">
-              <div class="list-values" id="tabOccurence{{ occurrence.id_occurrence_occtax }}">
+              <div
+                class="list-values"
+                id="tabOccurence{{ occurrence.id_occurrence_occtax }}"
+              >
                 <div>
                   <div class="label">ID occurrence :</div>
                   <div class="value">{{ occurrence.id_occurrence_occtax }}</div>
                 </div>
 
                 <div>
-                  <div class="label">{{ 'Taxon.NomCite' | translate }} :</div>
-                  <div class="value" [attr.data-qa]='"pnx-occtax-taxon-form-taxa-name-"+i'>{{ removeHtml(occurrence.nom_cite) }}</div>
+                  <div class="label">{{ "Taxon.NomCite" | translate }} :</div>
+                  <div
+                    class="value"
+                    [attr.data-qa]="'pnx-occtax-taxon-form-taxa-name-' + i"
+                  >
+                    {{ removeHtml(occurrence.nom_cite) }}
+                  </div>
                 </div>
 
                 <div>
                   <div class="label">Taxref (nom complet) :</div>
-                  <div class="value">{{occurrence?.taxref?.nom_complet}}</div>
+                  <div class="value">{{ occurrence?.taxref?.nom_complet }}</div>
                 </div>
 
                 <div *ngIf="this.config.OCCTAX.form_fields.determiner">
-                  <div class="label">{{ 'Taxon.Determiner' | translate }} :</div>
+                  <div class="label">
+                    {{ "Taxon.Determiner" | translate }} :
+                  </div>
                   <div class="value">{{ occurrence?.determiner || "-" }}</div>
                 </div>
 
-                <div *ngIf="this.config.OCCTAX.form_fields.determination_method">
-                  <div class="label">{{ 'Taxon.DeterminationMethod' | translate }} :</div>
+                <div
+                  *ngIf="this.config.OCCTAX.form_fields.determination_method"
+                >
+                  <div class="label">
+                    {{ "Taxon.DeterminationMethod" | translate }} :
+                  </div>
                   <div class="value">
-                    {{ occtaxTaxaListService.getLibelleByID(occurrence?.id_nomenclature_determination_method) || "-"  }}
+                    {{
+                      occtaxTaxaListService.getLibelleByID(
+                        occurrence?.id_nomenclature_determination_method
+                      ) || "-"
+                    }}
                   </div>
                 </div>
 
                 <div *ngIf="this.config.OCCTAX.form_fields.observation_status">
-                  <div class="label">{{ 'Taxon.ObservationStatus' | translate }} :</div>
+                  <div class="label">
+                    {{ "Taxon.ObservationStatus" | translate }} :
+                  </div>
                   <div class="value">
-                    {{ occtaxTaxaListService.getLibelleByID(occurrence?.id_nomenclature_observation_status) || "-" }}
+                    {{
+                      occtaxTaxaListService.getLibelleByID(
+                        occurrence?.id_nomenclature_observation_status
+                      ) || "-"
+                    }}
                   </div>
                 </div>
 
                 <div *ngIf="this.config.OCCTAX.form_fields.obs_tech">
-                  <div class="label">{{ 'Taxon.ObsTech' | translate }} :</div>
-                  <div class="value" [attr.data-qa]='"pnx-occtax-taxon-form-taxa-ObsTech-"+i'>
-                    {{ occtaxTaxaListService.getLibelleByID(occurrence?.id_nomenclature_obs_technique) || "-" }}
+                  <div class="label">{{ "Taxon.ObsTech" | translate }} :</div>
+                  <div
+                    class="value"
+                    [attr.data-qa]="'pnx-occtax-taxon-form-taxa-ObsTech-' + i"
+                  >
+                    {{
+                      occtaxTaxaListService.getLibelleByID(
+                        occurrence?.id_nomenclature_obs_technique
+                      ) || "-"
+                    }}
                   </div>
                 </div>
 
                 <div *ngIf="this.config.OCCTAX.form_fields.bio_condition">
-                  <div class="label">{{ 'Taxon.BiologicalCondition' | translate }} :</div>
-                  <div class="value" [attr.data-qa]='"pnx-occtax-taxon-form-taxa-bio-"+i'>
-                    {{ occtaxTaxaListService.getLibelleByID(occurrence?.id_nomenclature_bio_condition) || "-" }}
+                  <div class="label">
+                    {{ "Taxon.BiologicalCondition" | translate }} :
+                  </div>
+                  <div
+                    class="value"
+                    [attr.data-qa]="'pnx-occtax-taxon-form-taxa-bio-' + i"
+                  >
+                    {{
+                      occtaxTaxaListService.getLibelleByID(
+                        occurrence?.id_nomenclature_bio_condition
+                      ) || "-"
+                    }}
                   </div>
                 </div>
 
                 <div *ngIf="this.config.OCCTAX.form_fields.behaviour">
-                  <div class="label">{{ 'Taxon.OccBehaviour' | translate }} :</div>
+                  <div class="label">
+                    {{ "Taxon.OccBehaviour" | translate }} :
+                  </div>
                   <div class="value">
-                    {{ occtaxTaxaListService.getLibelleByID(occurrence?.id_nomenclature_behaviour) || "-" }}
+                    {{
+                      occtaxTaxaListService.getLibelleByID(
+                        occurrence?.id_nomenclature_behaviour
+                      ) || "-"
+                    }}
                   </div>
                 </div>
 
                 <div *ngIf="this.config.OCCTAX.form_fields.naturalness">
-                  <div class="label">{{ 'Taxon.Naturalness' | translate }} :</div>
+                  <div class="label">
+                    {{ "Taxon.Naturalness" | translate }} :
+                  </div>
                   <div class="value">
-                    {{ occtaxTaxaListService.getLibelleByID(occurrence?.id_nomenclature_naturalness) || "-" }}
+                    {{
+                      occtaxTaxaListService.getLibelleByID(
+                        occurrence?.id_nomenclature_naturalness
+                      ) || "-"
+                    }}
                   </div>
                 </div>
 
                 <div *ngIf="this.config.OCCTAX.form_fields.bio_status">
-                  <div class="label">{{ 'Taxon.BiologicalStatus' | translate }} :</div>
+                  <div class="label">
+                    {{ "Taxon.BiologicalStatus" | translate }} :
+                  </div>
                   <div class="value">
-                    {{ occtaxTaxaListService.getLibelleByID(occurrence?.id_nomenclature_bio_status) || "-" }}
+                    {{
+                      occtaxTaxaListService.getLibelleByID(
+                        occurrence?.id_nomenclature_bio_status
+                      ) || "-"
+                    }}
                   </div>
                 </div>
 
                 <div *ngIf="this.config.OCCTAX.form_fields.source_status">
-                  <div class="label">{{ 'Taxon.StatusSource' | translate }} :</div>
+                  <div class="label">
+                    {{ "Taxon.StatusSource" | translate }} :
+                  </div>
                   <div class="value">
-                    {{ occtaxTaxaListService.getLibelleByID(occurrence?.id_nomenclature_source_status) || "-" }}
+                    {{
+                      occtaxTaxaListService.getLibelleByID(
+                        occurrence?.id_nomenclature_source_status
+                      ) || "-"
+                    }}
                   </div>
                 </div>
 
                 <div *ngIf="this.config.OCCTAX.form_fields.blurring">
-                  <div class="label">{{ 'Taxon.Blurring' | translate }} :</div>
+                  <div class="label">{{ "Taxon.Blurring" | translate }} :</div>
                   <div class="value">
-                    {{ occtaxTaxaListService.getLibelleByID(occurrence?.id_nomenclature_blurring) || "-" }}
+                    {{
+                      occtaxTaxaListService.getLibelleByID(
+                        occurrence?.id_nomenclature_blurring
+                      ) || "-"
+                    }}
                   </div>
                 </div>
 
                 <div *ngIf="this.config.OCCTAX.form_fields.exist_proof">
-                  <div class="label">{{ 'Taxon.ExistProof' | translate }} :</div>
+                  <div class="label">
+                    {{ "Taxon.ExistProof" | translate }} :
+                  </div>
                   <div class="value">
-                    {{ occtaxTaxaListService.getLibelleByID(occurrence?.id_nomenclature_exist_proof) || "-" }}
+                    {{
+                      occtaxTaxaListService.getLibelleByID(
+                        occurrence?.id_nomenclature_exist_proof
+                      ) || "-"
+                    }}
                   </div>
                 </div>
 
                 <ng-container
-                  *ngIf="occtaxTaxaListService.getCdNomenclatureByID(occurrence?.id_nomenclature_exist_proof) === 1"
+                  *ngIf="
+                    occtaxTaxaListService.getCdNomenclatureByID(
+                      occurrence?.id_nomenclature_exist_proof
+                    ) === 1
+                  "
                 >
                   <div *ngIf="this.config.OCCTAX.form_fields.digital_proof">
-                    <div class="label">{{ 'Taxon.DigitalProof' | translate }} :</div>
-                    <div class="value">{{ occurrence?.digital_proof || "-" }}</div>
+                    <div class="label">
+                      {{ "Taxon.DigitalProof" | translate }} :
+                    </div>
+                    <div class="value">
+                      {{ occurrence?.digital_proof || "-" }}
+                    </div>
                   </div>
 
                   <div *ngIf="this.config.OCCTAX.form_fields.non_digital_proof">
-                    <div class="label">{{ 'Taxon.NonDigitalProof' | translate }} :</div>
-                    <div class="value">{{ occurrence?.non_digital_proof || "-" }}</div>
+                    <div class="label">
+                      {{ "Taxon.NonDigitalProof" | translate }} :
+                    </div>
+                    <div class="value">
+                      {{ occurrence?.non_digital_proof || "-" }}
+                    </div>
                   </div>
                 </ng-container>
 
                 <div *ngIf="this.config.OCCTAX.form_fields.comment_occ">
-                  <div class="label">{{ 'Taxon.Comment' | translate }} :</div>
+                  <div class="label">{{ "Taxon.Comment" | translate }} :</div>
                   <div class="value">{{ occurrence?.comment || "-" }}</div>
                 </div>
 
-                <div *ngFor="let item of occurrence?.additional_fields | keyvalue">
-                    <div class="label"> {{item.key}} : </div>
-                    <div class="value"> {{item.value}} </div>
+                <div
+                  *ngFor="let item of occurrence?.additional_fields | keyvalue"
+                >
+                  <div class="label">{{ item.key }} :</div>
+                  <div class="value">{{ item.value }}</div>
                 </div>
-                
-
               </div>
             </mat-tab>
 
-              <mat-tab
-                label="Taxonomie"
-                *ngIf="occurrence.taxref"
-              >
-                <div class="list-values">
-                  <div>
-                    <div class="label">Version Taxref :</div>
-                    <div class="value">{{ occurrence?.meta_v_taxref }}</div>
-                  </div>
+            <mat-tab label="Taxonomie" *ngIf="occurrence.taxref">
+              <div class="list-values">
+                <div>
+                  <div class="label">Version Taxref :</div>
+                  <div class="value">{{ occurrence?.meta_v_taxref }}</div>
+                </div>
 
-                  <div>
-                    <div class="label">Groupe 1 INPN :</div>
-                    <div class="value">{{ occurrence.taxref.group1_inpn }}</div>
-                  </div>
-                  <div>
-                    <div class="label">Groupe 2 INPN :</div>
-                    <div class="value">{{ occurrence.taxref.group2_inpn }}</div>
-                  </div>
-                  <div>
-                    <div class="label">Règne :</div>
-                    <div class="value">{{ occurrence.taxref.regne }}</div>
-                  </div>
-                  <div>
-                    <div class="label">Phylum :</div>
-                    <div class="value">{{ occurrence.taxref.phylum }}</div>
-                  </div>
-                  <div>
-                    <div class="label">Classe :</div>
-                    <div class="value">{{ occurrence.taxref.classe }}</div>
-                  </div>
-                  <div>
-                    <div class="label">Ordre :</div>
-                    <div class="value">{{ occurrence.taxref.ordre }}</div>
-                  </div>
-                  <div>
-                    <div class="label">Famille :</div>
-                    <div class="value">{{ occurrence.taxref.famille }}</div>
-                  </div>
-                  <div>
-                    <div class="label">Sous-Famille :</div>
-                    <div class="value">{{ occurrence.taxref.sous_famille }}</div>
-                  </div>
-                  <div>
-                    <div class="label">Tribu :</div>
-                    <div class="value">{{ occurrence.taxref.tribu }}</div>
+                <div>
+                  <div class="label">Groupe 1 INPN :</div>
+                  <div class="value">{{ occurrence.taxref.group1_inpn }}</div>
+                </div>
+                <div>
+                  <div class="label">Groupe 2 INPN :</div>
+                  <div class="value">{{ occurrence.taxref.group2_inpn }}</div>
+                </div>
+                <div>
+                  <div class="label">Règne :</div>
+                  <div class="value">{{ occurrence.taxref.regne }}</div>
+                </div>
+                <div>
+                  <div class="label">Phylum :</div>
+                  <div class="value">{{ occurrence.taxref.phylum }}</div>
+                </div>
+                <div>
+                  <div class="label">Classe :</div>
+                  <div class="value">{{ occurrence.taxref.classe }}</div>
+                </div>
+                <div>
+                  <div class="label">Ordre :</div>
+                  <div class="value">{{ occurrence.taxref.ordre }}</div>
+                </div>
+                <div>
+                  <div class="label">Famille :</div>
+                  <div class="value">{{ occurrence.taxref.famille }}</div>
+                </div>
+                <div>
+                  <div class="label">Sous-Famille :</div>
+                  <div class="value">{{ occurrence.taxref.sous_famille }}</div>
+                </div>
+                <div>
+                  <div class="label">Tribu :</div>
+                  <div class="value">{{ occurrence.taxref.tribu }}</div>
+                </div>
+                <div>
+                  <div class="label">CD_NOM :</div>
+                  <div class="value">{{ occurrence.taxref.cd_nom }}</div>
+                </div>
+                <div>
+                  <div class="label">Nom complet :</div>
+                  <div class="value">{{ occurrence.taxref.nom_complet }}</div>
+                </div>
+                <div>
+                  <div class="label">CD_REF :</div>
+                  <div class="value">{{ occurrence.taxref.cd_ref }}</div>
+                </div>
+                <div>
+                  <div class="label">Nom valide :</div>
+                  <div class="value">{{ occurrence.taxref.nom_valide }}</div>
+                </div>
+                <div>
+                  <div class="label">Rang :</div>
+                  <div class="value">{{ occurrence.taxref.id_rang }}</div>
+                </div>
+                <div>
+                  <div class="label">Nom vern :</div>
+                  <div class="value">{{ occurrence.taxref.nom_vern }}</div>
+                </div>
+                <div>
+                  <div class="label">Nom vern eng :</div>
+                  <div class="value">{{ occurrence.taxref.nom_vern_eng }}</div>
+                </div>
+                <div>
+                  <div class="label">Fiche INPN :</div>
+                  <div class="value">
+                    <a href="{{ occurrence.taxref.url }}" target="_BLANK">{{
+                      occurrence.taxref.url
+                    }}</a>
                   </div>
+                </div>
+              </div>
+            </mat-tab>
+
+            <-- TAB pour afficher les infos de dénombrements -- >
+            <mat-tab
+              *ngIf="occurrence.cor_counting_occtax"
+              label="counting#{{ occurrence.id_occurrence_occtax }}"
+            >
+              <ng-template mat-tab-label>
+                <span
+                  [matBadge]="occurrence.cor_counting_occtax.length"
+                  matBadgeOverlap="false"
+                >
+                  Dénombrement<ng-container
+                    *ngIf="occurrence.cor_counting_occtax.length > 1"
+                    >s
+                  </ng-container>
+                </span>
+              </ng-template>
+
+              <ng-container
+                *ngFor="
+                  let counting of occurrence.cor_counting_occtax;
+                  index as i
+                "
+              >
+                <h5 class="counting-title">
+                  {{ "Counting.Counting" | translate }} #{{ i + 1 }}
+                </h5>
+                <div
+                  class="list-values"
+                  id="tabCounting{{ counting.id_counting_occtax }}"
+                >
                   <div>
-                    <div class="label">CD_NOM :</div>
-                    <div class="value">{{ occurrence.taxref.cd_nom }}</div>
+                    <div class="label">
+                      ID {{ "Counting.Counting" | translate }} :
+                    </div>
+                    <div class="value">{{ counting.id_counting_occtax }}</div>
                   </div>
                   <div>
-                    <div class="label">Nom complet :</div>
-                    <div class="value">{{ occurrence.taxref.nom_complet }}</div>
+                    <div class="label">UUID SINP :</div>
+                    <div class="value">
+                      {{ counting.unique_id_sinp_occtax }}
+                    </div>
                   </div>
-                  <div>
-                    <div class="label">CD_REF :</div>
-                    <div class="value">{{ occurrence.taxref.cd_ref }}</div>
+                  <div *ngIf="this.config.OCCTAX.form_fields.life_stage">
+                    <div class="label">
+                      {{ "Counting.LifeStage" | translate }} :
+                    </div>
+                    <div class="value">
+                      {{
+                        occtaxTaxaListService.getLibelleByID(
+                          counting.id_nomenclature_life_stage
+                        ) || "-"
+                      }}
+                    </div>
                   </div>
-                  <div>
-                    <div class="label">Nom valide :</div>
-                    <div class="value">{{ occurrence.taxref.nom_valide }}</div>
+                  <div *ngIf="this.config.OCCTAX.form_fields.sex">
+                    <div class="label">{{ "Counting.Sex" | translate }} :</div>
+                    <div class="value">
+                      {{
+                        occtaxTaxaListService.getLibelleByID(
+                          counting.id_nomenclature_sex
+                        ) || "-"
+                      }}
+                    </div>
                   </div>
-                  <div>
-                    <div class="label">Rang :</div>
-                    <div class="value">{{ occurrence.taxref.id_rang }}</div>
+                  <div *ngIf="this.config.OCCTAX.form_fields.count_min">
+                    <div class="label">
+                      {{ "Counting.NumberMin" | translate }} :
+                    </div>
+                    <div class="value">{{ counting.count_min || "-" }}</div>
                   </div>
-                  <div>
-                    <div class="label">Nom vern :</div>
-                    <div class="value">{{ occurrence.taxref.nom_vern }}</div>
+                  <div *ngIf="this.config.OCCTAX.form_fields.count_max">
+                    <div class="label">
+                      {{ "Counting.NumberMax" | translate }} :
+                    </div>
+                    <div class="value">{{ counting.count_max || "-" }}</div>
                   </div>
-                  <div>
-                    <div class="label">Nom vern eng :</div>
-                    <div class="value">{{ occurrence.taxref.nom_vern_eng }}</div>
+                  <div *ngIf="this.config.OCCTAX.form_fields.obj_count">
+                    <div class="label">
+                      {{ "Counting.CountingObject" | translate }} :
+                    </div>
+                    <div class="value">
+                      {{
+                        occtaxTaxaListService.getLibelleByID(
+                          counting.id_nomenclature_obj_count
+                        ) || "-"
+                      }}
+                    </div>
                   </div>
-                  <div>
-                    <div class="label">Fiche INPN :</div>
+                  <div *ngIf="this.config.OCCTAX.form_fields.type_count">
+                    <div class="label">
+                      {{ "Counting.CountingType" | translate }} :
+                    </div>
                     <div class="value">
-                      <a
-                        href="{{ occurrence.taxref.url }}"
-                        target="_BLANK"
-                      >{{ occurrence.taxref.url }}</a>
+                      {{
+                        occtaxTaxaListService.getLibelleByID(
+                          counting.id_nomenclature_type_count
+                        ) || "-"
+                      }}
                     </div>
                   </div>
-                </div>
-              </mat-tab>
-
-              <--
-                TAB
-                pour
-                afficher
-                les
-                infos
-                de
-                dénombrements
-                --
-              >
-                <mat-tab *ngIf="occurrence.cor_counting_occtax" label="counting#{{ occurrence.id_occurrence_occtax }}">
-                  <ng-template mat-tab-label>
-                    <span
-                      [matBadge]="occurrence.cor_counting_occtax.length"
-                      matBadgeOverlap="false"
+                  <div
+                    *ngFor="let item of counting?.additional_fields | keyvalue"
+                  >
+                    <div class="label">{{ item.key }} :</div>
+                    <div class="value">{{ item.value }}</div>
+                  </div>
+                  <!-- <div>
+                    <div class="label">validation_status</div>
+                    <div class="value"></div>
+                  </div> -->
+                  <!-- # Medias -->
+                  <ng-container *ngIf="counting.medias.length">
+                    <ng-container
+                      *ngFor="let media of counting.medias; index as i"
                     >
-                      Dénombrement<ng-container *ngIf="occurrence.cor_counting_occtax.length > 1">s
-                      </ng-container>
-                    </span>
-                  </ng-template>
-
-
-                  <ng-container *ngFor="let counting of occurrence.cor_counting_occtax; index as i">
-                    <h5 class="counting-title">{{ 'Counting.Counting' | translate }} #{{ i + 1 }}
-                    </h5>
-                    <div class="list-values" id="tabCounting{{ counting.id_counting_occtax }}">
                       <div>
-                        <div class="label">ID {{ 'Counting.Counting' | translate }} :</div>
-                        <div class="value">{{ counting.id_counting_occtax }}</div>
+                        {{ "Media.Media" | translate }} ({{ i + 1 }}/{{
+                          counting.medias.length
+                        }}) :
+                        <a [href]="ms.href(media)" target="blank">{{
+                          media.title_fr
+                        }}</a>
+                        <i> ({{ ms.typeMedia(media) }}, {{ media.author }}) </i>
+                        <span *ngIf="media.description_fr">{{
+                          media.description_fr
+                        }}</span>
                       </div>
                       <div>
-                        <div class="label">UUID SINP :</div>
-                        <div class="value">{{ counting.unique_id_sinp_occtax }}</div>
+                        <pnx-display-medias
+                          [medias]="counting.medias"
+                          [index]="i"
+                          display="medium"
+                          diaporama="true"
+                        ></pnx-display-medias>
                       </div>
-                      <div *ngIf="this.config.OCCTAX.form_fields.life_stage">
-                        <div class="label">{{ 'Counting.LifeStage' | translate }} :</div>
-                        <div class="value">
-                          {{ occtaxTaxaListService.getLibelleByID(counting.id_nomenclature_life_stage) || "-" }}
-                        </div>
-                      </div>
-                      <div *ngIf="this.config.OCCTAX.form_fields.sex">
-                        <div class="label">{{ 'Counting.Sex' | translate }} :</div>
-                        <div class="value">
-                          {{ occtaxTaxaListService.getLibelleByID(counting.id_nomenclature_sex) || "-" }}
-                        </div>
-                      </div>
-                      <div *ngIf="this.config.OCCTAX.form_fields.count_min">
-                        <div class="label">{{ 'Counting.NumberMin' | translate }} :</div>
-                        <div class="value">{{ counting.count_min || "-" }}</div>
-                      </div>
-                      <div *ngIf="this.config.OCCTAX.form_fields.count_max">
-                        <div class="label">{{ 'Counting.NumberMax' | translate }} :</div>
-                        <div class="value">{{ counting.count_max || "-" }}</div>
-                      </div>
-                      <div *ngIf="this.config.OCCTAX.form_fields.obj_count">
-                        <div class="label">{{ 'Counting.CountingObject' | translate }} :</div>
-                        <div class="value">
-                          {{ occtaxTaxaListService.getLibelleByID(counting.id_nomenclature_obj_count) || "-" }}
-                        </div>
-                      </div>
-                      <div *ngIf="this.config.OCCTAX.form_fields.type_count">
-                        <div class="label">{{ 'Counting.CountingType' | translate }} :</div>
-                        <div class="value">
-                          {{ occtaxTaxaListService.getLibelleByID(counting.id_nomenclature_type_count) || "-" }}
-                        </div>
-                      </div>
-                      <div *ngFor="let item of counting?.additional_fields | keyvalue">
-                        <div class="label"> {{item.key}} : </div>
-                        <div class="value"> {{item.value}} </div>
-                      </div>
-                      <!-- <div>
-                    <div class="label">validation_status</div>
-                    <div class="value"></div>
-                  </div> -->
-                      <!-- # Medias -->
-                      <ng-container *ngIf="counting.medias.length">
-                        <ng-container *ngFor="let media of counting.medias; index as i">
-                          <div>{{'Media.Media' | translate}} ({{ i+1 }}/{{counting.medias.length}})
-                            :
-                            <a
-                              [href]="ms.href(media)"
-                              target=blank
-                            >{{ media.title_fr }}</a>
-                            <i>
-                              ({{ ms.typeMedia(media) }}, {{ media.author }})
-                            </i>
-                            <span *ngIf="media.description_fr">{{media.description_fr}}</span>
-                          </div>
-                          <div>
-                            <pnx-display-medias
-                              [medias]="counting.medias"
-                              [index]=i
-                              display="medium"
-                              diaporama="true"
-                            ></pnx-display-medias>
-                          </div>
-                        </ng-container>
-                      </ng-container>
-                    </div>
+                    </ng-container>
                   </ng-container>
-
-                </mat-tab>
+                </div>
+              </ng-container>
+            </mat-tab>
           </mat-tab-group>
         </mat-expansion-panel>
       </mat-accordion>
-
     </div>
   </ng-container>
   <ng-template #zeroOccurrenceBlk>
-    <div id="zero-taxon-container">
-      Aucun taxon pour ce relevé
-    </div>
+    <div id="zero-taxon-container">Aucun taxon pour ce relevé</div>
   </ng-template>
-
 </div>
diff --git a/contrib/occtax/frontend/app/occtax-form/taxa-list/taxa-list.component.scss b/contrib/occtax/frontend/app/occtax-form/taxa-list/taxa-list.component.scss
index 1aba3038a5..58474297fa 100644
--- a/contrib/occtax/frontend/app/occtax-form/taxa-list/taxa-list.component.scss
+++ b/contrib/occtax/frontend/app/occtax-form/taxa-list/taxa-list.component.scss
@@ -9,13 +9,13 @@
   height: 90%;
   overflow-y: auto;
   background-color: #95949833;
-  box-shadow: 2px 3px 4px 0px rgba(0, 0, 0, 0.2),
-             -2px 3px 4px 0px rgba(0, 0, 0, 0.2);
-
+  box-shadow:
+    2px 3px 4px 0px rgba(0, 0, 0, 0.2),
+    -2px 3px 4px 0px rgba(0, 0, 0, 0.2);
 }
 
 #zero-taxon-container {
-  padding: 10px
+  padding: 10px;
 }
 
 .mat-expansion-panel-body {
@@ -23,22 +23,21 @@
 }
 
 .right-aligned-header > .mat-content {
-  justify-content: space-between!important;
+  justify-content: space-between !important;
 }
 
-.mat-content > mat-panel-title, .mat-content > mat-panel-description {
+.mat-content > mat-panel-title,
+.mat-content > mat-panel-description {
   flex: 0 0 auto !important;
 }
 
-.mat-accordion .mat-expansion-panel{
-
-  border-radius: 0px!important;
+.mat-accordion .mat-expansion-panel {
+  border-radius: 0px !important;
 }
 
 .btn-edit {
   color: #5343da;
   margin-right: 5px;
-
 }
 
 .btn-clear {
@@ -53,7 +52,7 @@
 
 .list-values > div {
   padding: 1px 7px;
-  font-size:12px;
+  font-size: 12px;
 }
 
 .list-values > div:nth-child(odd) {
@@ -80,12 +79,18 @@
 }
 
 .in-progress-panel {
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+  box-shadow:
+    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  -moz-box-shadow:
+    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  -webkit-box-shadow:
+    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
     0 1px 5px 0 rgba(0, 0, 0, 0.12);
-  -moz-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
-    0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-  -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
-    0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   border-radius: 4px;
   overflow: hidden;
   padding: 0 24px;
diff --git a/contrib/occtax/frontend/app/occtax-map-info/occtax-map-info.component.html b/contrib/occtax/frontend/app/occtax-map-info/occtax-map-info.component.html
index 661507de8b..d37ed7e3f5 100644
--- a/contrib/occtax/frontend/app/occtax-map-info/occtax-map-info.component.html
+++ b/contrib/occtax/frontend/app/occtax-map-info/occtax-map-info.component.html
@@ -1,303 +1,539 @@
 <div class="container-fluid">
-  <div 
-    class="occtax-info"
-   
-  >
-  <div class="row">
-    <div
-      class="col-sm-12 col-md-5 map-container" [ngStyle]="{'min-height.px': cardHeight}">
-      <pnx-map 
-        class="map-card" 
-        height="100%"> 
-      </pnx-map>
-    </div>
-    <div class="col-sm-12 col-md-7 form-container" [ngStyle]="{'max-height.px': cardHeight}">
-      <div>
-        <ng-container *ngIf="releve; else waitingBlock">
+  <div class="occtax-info">
+    <div class="row">
+      <div
+        class="col-sm-12 col-md-5 map-container"
+        [ngStyle]="{ 'min-height.px': cardHeight }"
+      >
+        <pnx-map class="map-card" height="100%"> </pnx-map>
+      </div>
+      <div
+        class="col-sm-12 col-md-7 form-container"
+        [ngStyle]="{ 'max-height.px': cardHeight }"
+      >
+        <div>
+          <ng-container *ngIf="releve; else waitingBlock">
+            <mat-card>
+              <mat-card-content>
+                <mat-card-title>
+                  Relevé n°{{ id }}
 
-          <mat-card>
-            <mat-card-content>
-              <mat-card-title>
-                Relevé n°{{id}}
-                
-                <ng-container *ngIf="releve">
-                  <button 
-                    mat-mini-fab
-                    [disabled]="userReleveCruved?.D == false"
-                    matTooltip="Supprimer le relevé {{ id }}" 
-                    color="warn" 
-                    class="float-right" 
-                    (click)="openModalDelete(modalDelete)" 
-                  >
-                    <mat-icon>delete</mat-icon>
-                  </button>
-                  <button 
-                    mat-mini-fab 
-                    color="primary" 
-                    matTooltip="Editez le relevé {{id}}" 
-                    class="float-right mr-2" 
-                    [disabled]="userReleveCruved?.U == false"
-                    (click)="goToEdit(id)"
+                  <ng-container *ngIf="releve">
+                    <button
+                      mat-mini-fab
+                      [disabled]="userReleveCruved?.D == false"
+                      matTooltip="Supprimer le relevé {{ id }}"
+                      color="warn"
+                      class="float-right"
+                      (click)="openModalDelete(modalDelete)"
                     >
-                    <mat-icon>edit</mat-icon>
-                  </button>
-                </ng-container>
-              </mat-card-title>
-              <mat-card-subtitle>  {{releve.dataset?.dataset_name}}</mat-card-subtitle>
+                      <mat-icon>delete</mat-icon>
+                    </button>
+                    <button
+                      mat-mini-fab
+                      color="primary"
+                      matTooltip="Editez le relevé {{ id }}"
+                      class="float-right mr-2"
+                      [disabled]="userReleveCruved?.U == false"
+                      (click)="goToEdit(id)"
+                    >
+                      <mat-icon>edit</mat-icon>
+                    </button>
+                  </ng-container>
+                </mat-card-title>
+                <mat-card-subtitle>
+                  {{ releve.dataset?.dataset_name }}</mat-card-subtitle
+                >
                 <div class="row">
                   <div class="col-6">
                     <div>
-                      <div class="label">Observateur(s) : </div>
+                      <div class="label">Observateur(s) :</div>
                       <div class="value">
                         <span *ngIf="config.OCCTAX.observers_txt">
-                          {{releve.observers_txt}}
+                          {{ releve.observers_txt }}
                         </span>
                         <span *ngIf="!config.OCCTAX.observers_txt">
-                          <ng-container *ngFor="let observer of releve.observers; let i = index">
-                            <ng-container *ngIf="i !== 0">, </ng-container>{{ observer.nom_complet }}
+                          <ng-container
+                            *ngFor="
+                              let observer of releve.observers;
+                              let i = index
+                            "
+                          >
+                            <ng-container *ngIf="i !== 0">, </ng-container
+                            >{{ observer.nom_complet }}
                           </ng-container>
                         </span>
                       </div>
                     </div>
                     <div>
-                      <div class="label"> Entre le :</div>
-                      <div class="value">{{ releve.date_min | date:'dd/MM/yyyy' }} {{releve.hour_min}} </div>
-                      <div class="label"> &nbsp; et le : </div>
-                      <div class="value">{{ releve.date_max | date:'dd/MM/yyyy' }} {{releve.hour_max}} </div>
+                      <div class="label">Entre le :</div>
+                      <div class="value">
+                        {{ releve.date_min | date: "dd/MM/yyyy" }}
+                        {{ releve.hour_min }}
+                      </div>
+                      <div class="label">&nbsp; et le :</div>
+                      <div class="value">
+                        {{ releve.date_max | date: "dd/MM/yyyy" }}
+                        {{ releve.hour_max }}
+                      </div>
                     </div>
                     <div *ngIf="config.OCCTAX.form_fields.place_name">
-                        <div class="label">  {{ 'Releve.PlaceName' | translate }} :</div>
-                        <div class="value">{{ releve.place_name  || "-"}}</div>
+                      <div class="label">
+                        {{ "Releve.PlaceName" | translate }} :
+                      </div>
+                      <div class="value">{{ releve.place_name || "-" }}</div>
                     </div>
                     <div *ngIf="config.OCCTAX.form_fields.precision">
-                      <div class="label">  {{ 'Releve.Precision' | translate }} :</div>
-                      <div class="value">{{ releve.precision  || "-"}}</div>
+                      <div class="label">
+                        {{ "Releve.Precision" | translate }} :
+                      </div>
+                      <div class="value">{{ releve.precision || "-" }}</div>
                     </div>
                     <div *ngIf="config.OCCTAX.form_fields.altitude_min">
-                      <div class="label">  Altitude min :</div>
-                      <div class="value">{{ releve.altitude_min  || "-"}}</div>
+                      <div class="label">Altitude min :</div>
+                      <div class="value">{{ releve.altitude_min || "-" }}</div>
                     </div>
                     <div *ngIf="config.OCCTAX.form_fields.altitude_max">
-                      <div class="label">  Altitude max :</div>
-                      <div class="value">{{ releve.altitude_max  || "-"}}</div>
+                      <div class="label">Altitude max :</div>
+                      <div class="value">{{ releve.altitude_max || "-" }}</div>
                     </div>
                     <!--Champs additionnels-->
-                    <ng-container *ngFor="let dynamiqueField of releveAddFields ">
+                    <ng-container
+                      *ngFor="let dynamiqueField of releveAddFields"
+                    >
                       <div *ngIf="dynamiqueField.type_widget != 'html'">
-                        <div class="label"> {{dynamiqueField.attribut_label}} : </div>
-                        <div class="value"> 
-                          {{releve?.additional_fields[dynamiqueField.attribut_name]}}
+                        <div class="label">
+                          {{ dynamiqueField.attribut_label }} :
+                        </div>
+                        <div class="value">
+                          {{
+                            releve?.additional_fields[
+                              dynamiqueField.attribut_name
+                            ]
+                          }}
                         </div>
                       </div>
                     </ng-container>
                     <p id="info-geo">
-                      <pnx-areas-intersected-modal 
-                        [geojson]="geojson">
+                      <pnx-areas-intersected-modal [geojson]="geojson">
                       </pnx-areas-intersected-modal>
                     </p>
                   </div>
                   <div class="col-6">
                     <div *ngIf="config.OCCTAX.form_fields.depth_min">
-                      <div class="label"> {{ 'Releve.MinDepth' | translate }}  :</div>
-                      <div class="value">{{ releve.depth_min  || "-"}}</div>
+                      <div class="label">
+                        {{ "Releve.MinDepth" | translate }} :
                       </div>
+                      <div class="value">{{ releve.depth_min || "-" }}</div>
+                    </div>
                     <div *ngIf="config.OCCTAX.form_fields.depth_max">
-                      <div class="label">  {{ 'Releve.MaxDepth' | translate }} :</div>
-                      <div class="value">{{ releve.depth_max  || "-"}}</div>
+                      <div class="label">
+                        {{ "Releve.MaxDepth" | translate }} :
+                      </div>
+                      <div class="value">{{ releve.depth_max || "-" }}</div>
                     </div>
-  
+
                     <div *ngIf="config.OCCTAX.form_fields.tech_collect">
-                      <div class="label">  {{ 'Releve.TechCollectCampanule' | translate }} : </div>
-                      <div class="value">{{getLibelleByID(releve.id_nomenclature_tech_collect_campanule)}}</div>
+                      <div class="label">
+                        {{ "Releve.TechCollectCampanule" | translate }} :
+                      </div>
+                      <div class="value">
+                        {{
+                          getLibelleByID(
+                            releve.id_nomenclature_tech_collect_campanule
+                          )
+                        }}
+                      </div>
                     </div>
-                    <div *ngIf="config.OCCTAX.form_fields.group_type" >
-                      <div class="label"> {{ 'Releve.GroupType' | translate }} :</div>
-                      <div class="value"> {{getLibelleByID(releve.id_nomenclature_grp_typ)}}</div>
+                    <div *ngIf="config.OCCTAX.form_fields.group_type">
+                      <div class="label">
+                        {{ "Releve.GroupType" | translate }} :
+                      </div>
+                      <div class="value">
+                        {{ getLibelleByID(releve.id_nomenclature_grp_typ) }}
+                      </div>
                     </div>
                     <div *ngIf="config.OCCTAX.form_fields.grp_method">
-                      <div class="label"> {{'Releve.GroupMethod' | translate}} : </div>
-                      <div class="value"> {{releve.grp_method || "-" }}</div>
+                      <div class="label">
+                        {{ "Releve.GroupMethod" | translate }} :
+                      </div>
+                      <div class="value">{{ releve.grp_method || "-" }}</div>
                     </div>
                     <div>
-                      <div class="label"> UUID regroupement: </div>
-                      <div class="value">  {{releve.unique_id_sinp_grp}}  </div>
-                    </div> 
+                      <div class="label">UUID regroupement:</div>
+                      <div class="value">{{ releve.unique_id_sinp_grp }}</div>
+                    </div>
                     <div *ngIf="config.OCCTAX.form_fields.geo_object_nature">
-                      <div class="label"> {{ 'Releve.GeoObjectNature' | translate }} : </div>
-                      <div class="value"> {{getLibelleByID(releve.id_nomenclature_geo_object_nature)}}</div>
+                      <div class="label">
+                        {{ "Releve.GeoObjectNature" | translate }} :
+                      </div>
+                      <div class="value">
+                        {{
+                          getLibelleByID(
+                            releve.id_nomenclature_geo_object_nature
+                          )
+                        }}
+                      </div>
                     </div>
                     <div *ngIf="config.OCCTAX.form_fields.habitat">
-                      <div class="label"> Habitat associé : </div>
-                      <div class="value"> {{releve.habitat?.lb_hab_fr}} - {{releve.habitat?.lb_code}}</div>
+                      <div class="label">Habitat associé :</div>
+                      <div class="value">
+                        {{ releve.habitat?.lb_hab_fr }} -
+                        {{ releve.habitat?.lb_code }}
+                      </div>
                     </div>
                     <div *ngIf="config.OCCTAX.form_fields.comment_releve">
-                      <div class="label"> Commentaire : </div>
-                      <div class="value"> {{releve.comment || "-"}}  </div>
-                    </div> 
-          
+                      <div class="label">Commentaire :</div>
+                      <div class="value">{{ releve.comment || "-" }}</div>
+                    </div>
                   </div>
                 </div>
-
               </mat-card-content>
+            </mat-card>
 
+            <mat-card id="card-occ" class="mt-1">
+              <span
+                class="observed-taxon"
+                [matBadge]="occurrences?.length"
+                matBadgeOverlap="false"
+              >
+                {{ "Taxon.ObservedTaxon" | translate }}
+              </span>
+              <mat-selection-list dense [multiple]="false">
+                <mat-list-option
+                  class="observed-taxon-option list-option-without-radio"
+                  *ngFor="let occ of occurrences; let i = index"
+                  (click)="displayOccurrence.next(occ)"
+                >
+                  <mat-icon matListIcon>visibility</mat-icon>
+                  {{
+                    occ.taxref?.nom_vern !== null
+                      ? occ.taxref?.nom_vern + " - "
+                      : ""
+                  }}{{ occ.taxref?.nom_complet }}
+                </mat-list-option>
+              </mat-selection-list>
             </mat-card>
 
-              <mat-card id="card-occ" class="mt-1">
-                  <span class="observed-taxon" [matBadge]="occurrences?.length" matBadgeOverlap="false"> {{ 'Taxon.ObservedTaxon' | translate }}  </span>
-                    <mat-selection-list dense [multiple]="false">
-                      <mat-list-option class="observed-taxon-option list-option-without-radio" *ngFor="let occ of occurrences; let i = index" (click)="displayOccurrence.next(occ)">
-                        <mat-icon matListIcon>visibility</mat-icon>
-                        {{(occ.taxref?.nom_vern!==null) ? occ.taxref?.nom_vern+' - ' : ''}}{{occ.taxref?.nom_complet}}
-                      </mat-list-option>
-                    </mat-selection-list>
-              </mat-card>
-  
-          <div 
-            *ngIf="displayOccurrence|async"
-            class="mt-1">
+            <div *ngIf="displayOccurrence | async" class="mt-1">
               <mat-card>
                 <mat-card-content>
-
-                
-                <mat-card-title>Détails - {{(displayOccurrence|async).taxref.nom_valide }} </mat-card-title>  
+                  <mat-card-title
+                    >Détails -
+                    {{ (displayOccurrence | async).taxref.nom_valide }}
+                  </mat-card-title>
                   <mat-tab-group>
                     <mat-tab label="Caractérisation de l'occurrence">
                       <div *ngIf="config.OCCTAX.form_fields.observation_status">
-                        <div class="label"> {{ 'Taxon.ObservationStatus' | translate }} : </div>
-                        <div class="value"> {{getLibelleByID((displayOccurrence|async).id_nomenclature_observation_status)}}</div>
+                        <div class="label">
+                          {{ "Taxon.ObservationStatus" | translate }} :
+                        </div>
+                        <div class="value">
+                          {{
+                            getLibelleByID(
+                              (displayOccurrence | async)
+                                .id_nomenclature_observation_status
+                            )
+                          }}
+                        </div>
                       </div>
                       <div *ngIf="config.OCCTAX.form_fields.obs_tech">
-                        <div class="label"> {{ 'Taxon.ObsTech' | translate }} : </div>
-                        <div class="value"> {{getLibelleByID((displayOccurrence|async).id_nomenclature_obs_technique)}} </div>
+                        <div class="label">
+                          {{ "Taxon.ObsTech" | translate }} :
+                        </div>
+                        <div class="value">
+                          {{
+                            getLibelleByID(
+                              (displayOccurrence | async)
+                                .id_nomenclature_obs_technique
+                            )
+                          }}
+                        </div>
                       </div>
                       <div *ngIf="config.OCCTAX.form_fields.bio_condition">
-                        <div class="label"> {{ 'Taxon.BiologicalCondition' | translate }} : </div>
-                        <div class="value"> {{getLibelleByID((displayOccurrence|async).id_nomenclature_bio_condition)}} </div>
+                        <div class="label">
+                          {{ "Taxon.BiologicalCondition" | translate }} :
+                        </div>
+                        <div class="value">
+                          {{
+                            getLibelleByID(
+                              (displayOccurrence | async)
+                                .id_nomenclature_bio_condition
+                            )
+                          }}
+                        </div>
                       </div>
                       <div *ngIf="config.OCCTAX.form_fields.behaviour">
-                        <div class="label"> {{ 'Taxon.OccBehaviour' | translate }} : </div>
-                        <div class="value"> {{getLibelleByID((displayOccurrence|async).id_nomenclature_behaviour)}} </div>
+                        <div class="label">
+                          {{ "Taxon.OccBehaviour" | translate }} :
+                        </div>
+                        <div class="value">
+                          {{
+                            getLibelleByID(
+                              (displayOccurrence | async)
+                                .id_nomenclature_behaviour
+                            )
+                          }}
+                        </div>
                       </div>
                       <div *ngIf="config.OCCTAX.form_fields.bio_status">
-                        <div class="label"> {{ 'Taxon.BiologicalStatus' | translate }} : </div>
-                        <div class="value"> {{getLibelleByID((displayOccurrence|async).id_nomenclature_bio_status)}} </div>
+                        <div class="label">
+                          {{ "Taxon.BiologicalStatus" | translate }} :
+                        </div>
+                        <div class="value">
+                          {{
+                            getLibelleByID(
+                              (displayOccurrence | async)
+                                .id_nomenclature_bio_status
+                            )
+                          }}
+                        </div>
                       </div>
-                      <div *ngIf="config.OCCTAX.form_fields.determination_method">
-                        <div class="label"> {{ 'Taxon.DeterminationMethod' | translate }} : </div>
-                        <div class="value"> {{getLibelleByID((displayOccurrence|async).id_nomenclature_determination_method)}} </div>
+                      <div
+                        *ngIf="config.OCCTAX.form_fields.determination_method"
+                      >
+                        <div class="label">
+                          {{ "Taxon.DeterminationMethod" | translate }} :
+                        </div>
+                        <div class="value">
+                          {{
+                            getLibelleByID(
+                              (displayOccurrence | async)
+                                .id_nomenclature_determination_method
+                            )
+                          }}
+                        </div>
                       </div>
                       <div *ngIf="config.OCCTAX.form_fields.determiner">
-                        <div class="label"> {{ 'Taxon.Determiner' | translate }} : </div>
-                        <div class="value"> {{(displayOccurrence|async).determiner || ""}} </div>
+                        <div class="label">
+                          {{ "Taxon.Determiner" | translate }} :
+                        </div>
+                        <div class="value">
+                          {{ (displayOccurrence | async).determiner || "" }}
+                        </div>
                       </div>
                       <div>
-                        <div class="label"> Nom cité: </div>
-                        <div class="value"> {{(displayOccurrence|async).nom_cite || ""}} </div>
+                        <div class="label">Nom cité:</div>
+                        <div class="value">
+                          {{ (displayOccurrence | async).nom_cite || "" }}
+                        </div>
                       </div>
                       <div *ngIf="config.OCCTAX.form_fields.exist_proof">
-                        <div class="label"> {{ 'Taxon.ExistProof' | translate }} : </div>
-                        <div class="value"> {{getLibelleByID((displayOccurrence|async).id_nomenclature_exist_proof)}} </div>
+                        <div class="label">
+                          {{ "Taxon.ExistProof" | translate }} :
+                        </div>
+                        <div class="value">
+                          {{
+                            getLibelleByID(
+                              (displayOccurrence | async)
+                                .id_nomenclature_exist_proof
+                            )
+                          }}
+                        </div>
                       </div>
-                      <div *ngIf="config.OCCTAX.form_fields.digital_proof" >
-                        <div class="label"> {{ 'Taxon.DigitalProof' | translate }} : </div>
-                        <div class="value"> {{(displayOccurrence|async).digital_proof || "-" }} </div>
+                      <div *ngIf="config.OCCTAX.form_fields.digital_proof">
+                        <div class="label">
+                          {{ "Taxon.DigitalProof" | translate }} :
+                        </div>
+                        <div class="value">
+                          {{ (displayOccurrence | async).digital_proof || "-" }}
+                        </div>
                       </div>
-                      <div *ngIf="config.OCCTAX.form_fields.non_digital_proof" >
-                        <div class="label"> {{ 'Taxon.NonDigitalProof' | translate }} : </div>
-                        <div class="value"> {{(displayOccurrence|async).non_digital_proof || "-"}} </div>
+                      <div *ngIf="config.OCCTAX.form_fields.non_digital_proof">
+                        <div class="label">
+                          {{ "Taxon.NonDigitalProof" | translate }} :
+                        </div>
+                        <div class="value">
+                          {{
+                            (displayOccurrence | async).non_digital_proof || "-"
+                          }}
+                        </div>
                       </div>
                       <div *ngIf="config.OCCTAX.form_fields.blurring">
-                        <div class="label"> {{ 'Taxon.Blurring' | translate }} : </div>
-                        <div class="value"> {{getLibelleByID((displayOccurrence|async).id_nomenclature_blurring)}} </div>
+                        <div class="label">
+                          {{ "Taxon.Blurring" | translate }} :
+                        </div>
+                        <div class="value">
+                          {{
+                            getLibelleByID(
+                              (displayOccurrence | async)
+                                .id_nomenclature_blurring
+                            )
+                          }}
+                        </div>
                       </div>
                       <div *ngIf="config.OCCTAX.form_fields.source_status">
-                        <div class="label"> {{ 'Taxon.StatusSource' | translate }} : </div>
-                        <div class="value"> {{getLibelleByID((displayOccurrence|async).id_nomenclature_source_status)}} </div>
+                        <div class="label">
+                          {{ "Taxon.StatusSource" | translate }} :
+                        </div>
+                        <div class="value">
+                          {{
+                            getLibelleByID(
+                              (displayOccurrence | async)
+                                .id_nomenclature_source_status
+                            )
+                          }}
+                        </div>
                       </div>
                       <div *ngIf="config.OCCTAX.form_fields.comment_occ">
-                        <div class="label"> {{ 'Taxon.Comment' | translate }} : </div>
-                        <div class="value"> {{(displayOccurrence|async).comment || ""}} </div>
+                        <div class="label">
+                          {{ "Taxon.Comment" | translate }} :
+                        </div>
+                        <div class="value">
+                          {{ (displayOccurrence | async).comment || "" }}
+                        </div>
                       </div>
-        
+
                       <!--Champs additionnels-->
-                      <ng-container *ngFor="let dynamiqueField of occurrenceAddFields ">
+                      <ng-container
+                        *ngFor="let dynamiqueField of occurrenceAddFields"
+                      >
                         <div>
-                          <div class="label"> {{dynamiqueField.attribut_label}} : </div>
-                          <div class="value"> 
-                            {{(displayOccurrence|async)?.additional_fields[dynamiqueField.attribut_name]}}
+                          <div class="label">
+                            {{ dynamiqueField.attribut_label }} :
+                          </div>
+                          <div class="value">
+                            {{
+                              (displayOccurrence | async)?.additional_fields[
+                                dynamiqueField.attribut_name
+                              ]
+                            }}
                           </div>
                         </div>
                       </ng-container>
-      
                     </mat-tab>
-                    <mat-tab label="Dénombrement"> 
-                      <div *ngFor="let counting of (displayOccurrence|async).cor_counting_occtax; let index = index">  
+                    <mat-tab label="Dénombrement">
+                      <div
+                        *ngFor="
+                          let counting of (displayOccurrence | async)
+                            .cor_counting_occtax;
+                          let index = index
+                        "
+                      >
                         <div *ngIf="config.OCCTAX.form_fields.life_stage">
-                          <div class="label"> {{ 'Counting.LifeStage' | translate }} : </div>
-                          <div class="value"> {{getLibelleByID(counting.id_nomenclature_life_stage)}} </div>
+                          <div class="label">
+                            {{ "Counting.LifeStage" | translate }} :
+                          </div>
+                          <div class="value">
+                            {{
+                              getLibelleByID(
+                                counting.id_nomenclature_life_stage
+                              )
+                            }}
+                          </div>
                         </div>
-      
+
                         <div *ngIf="config.OCCTAX.form_fields.sex">
-                          <div class="label"> {{ 'Counting.Sex' | translate }} : </div>
-                          <div class="value"> {{getLibelleByID(counting.id_nomenclature_sex)}} </div>
+                          <div class="label">
+                            {{ "Counting.Sex" | translate }} :
+                          </div>
+                          <div class="value">
+                            {{ getLibelleByID(counting.id_nomenclature_sex) }}
+                          </div>
                         </div>
-      
+
                         <div *ngIf="config.OCCTAX.form_fields.obj_count">
-                          <div class="label"> {{ 'Counting.CountingObject' | translate }} : </div>
-                          <div class="value"> {{getLibelleByID(counting.id_nomenclature_obj_count)}} </div>
+                          <div class="label">
+                            {{ "Counting.CountingObject" | translate }} :
+                          </div>
+                          <div class="value">
+                            {{
+                              getLibelleByID(counting.id_nomenclature_obj_count)
+                            }}
+                          </div>
                         </div>
-      
+
                         <div *ngIf="config.OCCTAX.form_fields.type_count">
-                          <div class="label"> {{ 'Counting.CountingType' | translate }} : </div>
-                          <div class="value"> {{getLibelleByID(counting.id_nomenclature_type_count)}} </div>
+                          <div class="label">
+                            {{ "Counting.CountingType" | translate }} :
+                          </div>
+                          <div class="value">
+                            {{
+                              getLibelleByID(
+                                counting.id_nomenclature_type_count
+                              )
+                            }}
+                          </div>
                         </div>
-      
+
                         <div *ngIf="config.OCCTAX.form_fields.count_min">
-                          <div class="label"> {{ 'Counting.NumberMin' | translate }} : </div>
-                          <div class="value"> {{counting.count_min || "-"}} </div>
+                          <div class="label">
+                            {{ "Counting.NumberMin" | translate }} :
+                          </div>
+                          <div class="value">
+                            {{ counting.count_min || "-" }}
+                          </div>
                         </div>
-      
+
                         <div *ngIf="config.OCCTAX.form_fields.count_max">
-                          <div class="label"> {{ 'Counting.NumberMax' | translate }} : </div>
-                          <div class="value"> {{counting.count_max || "-"}} </div>
+                          <div class="label">
+                            {{ "Counting.NumberMax" | translate }} :
+                          </div>
+                          <div class="value">
+                            {{ counting.count_max || "-" }}
+                          </div>
                         </div>
-      
+
                         <div>
-                          <div class="label"> {{ 'Counting.ValidationStatus' | translate }} : </div>
-                          <div class="value"> {{counting?.validation_status?.mnemonique || "-"}} </div>
+                          <div class="label">
+                            {{ "Counting.ValidationStatus" | translate }} :
+                          </div>
+                          <div class="value">
+                            {{ counting?.validation_status?.mnemonique || "-" }}
+                          </div>
                         </div>
 
                         <div>
-                          <div class="label"> UUID SINP : </div>
-                          <div class="value"> {{counting?.unique_id_sinp_occtax}} </div>
+                          <div class="label">UUID SINP :</div>
+                          <div class="value">
+                            {{ counting?.unique_id_sinp_occtax }}
+                          </div>
                         </div>
-        
+
                         <!--Champs additionnels-->
-                        <ng-container *ngFor="let dynamiqueField of countingAddFields">
-                          <div >
-                            <div class="label"> {{dynamiqueField.attribut_label}} : </div>
-                            <div class="value"> 
-                              {{counting?.additional_fields[dynamiqueField.attribut_name]}}
+                        <ng-container
+                          *ngFor="let dynamiqueField of countingAddFields"
+                        >
+                          <div>
+                            <div class="label">
+                              {{ dynamiqueField.attribut_label }} :
+                            </div>
+                            <div class="value">
+                              {{
+                                counting?.additional_fields[
+                                  dynamiqueField.attribut_name
+                                ]
+                              }}
                             </div>
                           </div>
                         </ng-container>
 
-                        <ng-container *ngFor="let media of counting.medias; index as i">
+                        <ng-container
+                          *ngFor="let media of counting.medias; index as i"
+                        >
                           <div>
-                            <div class="label"> {{ 'Media.Media' | translate }} {{ i + 1 }}/{{ counting.medias.length}} : </div>
-                            <div class="value">                     <a
-                              [href]="ms.href(media)" target=blank
-                              >{{ media.title_fr }}</a> 
+                            <div class="label">
+                              {{ "Media.Media" | translate }} {{ i + 1 }}/{{
+                                counting.medias.length
+                              }}
+                              :
+                            </div>
+                            <div class="value">
+                              <a [href]="ms.href(media)" target="blank">{{
+                                media.title_fr
+                              }}</a>
                               <i>
                                 ({{ ms.typeMedia(media) }}, {{ media.author }})
                               </i>
-                              <span *ngIf="media.description_fr">{{media.description_fr}}</span>
+                              <span *ngIf="media.description_fr">{{
+                                media.description_fr
+                              }}</span>
                             </div>
                           </div>
                           <div>
-                            <pnx-display-medias 
+                            <pnx-display-medias
                               [medias]="counting.medias"
-                              [index]=i
+                              [index]="i"
                               display="medium"
                               diaporama="true"
                             ></pnx-display-medias>
@@ -308,56 +544,45 @@
                     </mat-tab>
                   </mat-tab-group>
                 </mat-card-content>
-                </mat-card>
-  
-          </div>
-        </ng-container>
-      </div>
+              </mat-card>
+            </div>
+          </ng-container>
+        </div>
         <ng-template #waitingBlock>Chargement des données en cours</ng-template>
+      </div>
     </div>
   </div>
-
-    
-  </div>
 </div>
 
+<ng-template #modalDelete let-d="dismiss" let-c="close">
+  <div class="modal-header">
+    <h4 class="modal-title pull-left">Suppression</h4>
+    <button
+      type="button"
+      class="close pull-right"
+      aria-label="Close"
+      (click)="c()"
+    >
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    <p>
+      Attention vous vous apprêtez à supprimer un releve qui comporte
+      {{ occurrences.length }} occurrence(s) de taxon(s) et {{ nbCounting }}
+      dénombrement(s).
+    </p>
+    <button type="button" class="btn btn-secondary" (click)="c()">
+      Annuler
+    </button>
 
-
-    <ng-template 
-      #modalDelete 
-      let-d="dismiss" 
-      let-c="close">
-
-      <div class="modal-header">
-        <h4 class="modal-title pull-left">Suppression</h4>
-        <button 
-          type="button" 
-          class="close pull-right" 
-          aria-label="Close" 
-          (click)="c()">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <p>
-          Attention vous vous apprêtez à supprimer un releve qui comporte
-          {{ occurrences.length }} occurrence(s) de taxon(s) et {{ nbCounting }}
-          dénombrement(s).
-        </p>
-        <button 
-          type="button" 
-          class="btn btn-secondary"
-          (click)="c()">
-          Annuler
-        </button>
-
-        <button 
-          type="button" 
-          class="btn btn-danger"
-          data-qa="pnx-occtax-delete"
-          (click)="deleteReleve(modalDelete); c()">
-          Supprimer
-        </button>
-      </div>
-
-    </ng-template>
+    <button
+      type="button"
+      class="btn btn-danger"
+      data-qa="pnx-occtax-delete"
+      (click)="deleteReleve(modalDelete); c()"
+    >
+      Supprimer
+    </button>
+  </div>
+</ng-template>
diff --git a/contrib/occtax/frontend/app/occtax-map-info/occtax-map-info.component.scss b/contrib/occtax/frontend/app/occtax-map-info/occtax-map-info.component.scss
index 78355a4536..3134949f70 100644
--- a/contrib/occtax/frontend/app/occtax-map-info/occtax-map-info.component.scss
+++ b/contrib/occtax/frontend/app/occtax-map-info/occtax-map-info.component.scss
@@ -1,4 +1,3 @@
-
 .selected-taxon {
   cursor: pointer;
   list-style-type: none;
@@ -17,14 +16,15 @@
   margin-top: 10px;
 }
 
-
 .form-container {
   overflow-y: auto;
 }
 
 .button-rounded {
   border-radius: 30px;
-  box-shadow: 4px 5px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  box-shadow:
+    4px 5px 8px 0 rgba(0, 0, 0, 0.2),
+    0 6px 20px 0 rgba(0, 0, 0, 0.19);
   padding-right: 10px;
   padding-left: 10px;
   margin-left: 15px;
@@ -42,7 +42,6 @@
   color: #656565ba;
 }
 
-
 #info-geo {
   margin-top: 5px;
 }
@@ -54,8 +53,10 @@
 .occtax-info {
   background-color: white;
   padding: 10px 15px;
-  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
-  0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 2px 1px -1px rgba(0, 0, 0, 0.2),
+    0 1px 1px 0 rgba(0, 0, 0, 0.14),
+    0 1px 3px 0 rgba(0, 0, 0, 0.12);
   height: 100%;
 }
 
diff --git a/contrib/occtax/frontend/app/occtax-map-list/filter/occtax-map-list-filter.component.html b/contrib/occtax/frontend/app/occtax-map-list/filter/occtax-map-list-filter.component.html
index 9dc6eb130a..3b62efbfe4 100644
--- a/contrib/occtax/frontend/app/occtax-map-list/filter/occtax-map-list-filter.component.html
+++ b/contrib/occtax/frontend/app/occtax-map-list/filter/occtax-map-list-filter.component.html
@@ -1,100 +1,118 @@
 <div class="row row-sm" id="filter">
   <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 padding-sm">
-    <pnx-taxonomy 
-      label="{{ 'Taxon.Taxon' | translate }}" 
-      [parentFormControl]="occtaxMapListService.dynamicFormGroup.controls.cd_nom"
-      [idList]="config.OCCTAX.id_taxon_list" 
-      [charNumber]="3" 
-      [listLength]="20">
+    <pnx-taxonomy
+      label="{{ 'Taxon.Taxon' | translate }}"
+      [parentFormControl]="
+        occtaxMapListService.dynamicFormGroup.controls.cd_nom
+      "
+      [idList]="config.OCCTAX.id_taxon_list"
+      [charNumber]="3"
+      [listLength]="20"
+    >
     </pnx-taxonomy>
   </div>
   <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 padding-sm">
     <div *ngIf="config.OCCTAX.observers_txt; else elseBlock">
-      <pnx-observers-text 
-        [parentFormControl]="occtaxMapListService.dynamicFormGroup.controls.observers_txt">
+      <pnx-observers-text
+        [parentFormControl]="
+          occtaxMapListService.dynamicFormGroup.controls.observers_txt
+        "
+      >
       </pnx-observers-text>
     </div>
     <ng-template #elseBlock>
-      <pnx-observers 
+      <pnx-observers
         class="auto"
         label="{{ 'Releve.Observers' | translate }}"
-        [parentFormControl]="occtaxMapListService.dynamicFormGroup.controls.observers" 
+        [parentFormControl]="
+          occtaxMapListService.dynamicFormGroup.controls.observers
+        "
         [multiSelect]="true"
-        [idMenu]="config.OCCTAX.id_observers_list">
+        [idMenu]="config.OCCTAX.id_observers_list"
+      >
       </pnx-observers>
     </ng-template>
   </div>
   <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 padding-sm">
-    <pnx-datasets 
+    <pnx-datasets
       class="auto"
-      label="{{ 'Releve.Dataset' | translate }}" 
-      [displayAll]="true" 
+      label="{{ 'Releve.Dataset' | translate }}"
+      [displayAll]="true"
       [displayOnlyActive]="false"
-      [parentFormControl]="occtaxMapListService.dynamicFormGroup.controls.id_dataset"
-      [moduleCode]="moduleService.currentModule?.module_code">
+      [parentFormControl]="
+        occtaxMapListService.dynamicFormGroup.controls.id_dataset
+      "
+      [moduleCode]="moduleService.currentModule?.module_code"
+    >
     </pnx-datasets>
   </div>
   <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 padding-sm">
-    <pnx-date 
-      label="{{ 'Releve.MinDate' | translate }}" 
+    <pnx-date
+      label="{{ 'Releve.MinDate' | translate }}"
       data-qa="pnx-occtax-filter-date-min"
-      [parentFormControl]="occtaxMapListService.dynamicFormGroup.controls.date_low">
+      [parentFormControl]="
+        occtaxMapListService.dynamicFormGroup.controls.date_low
+      "
+    >
     </pnx-date>
   </div>
 
   <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 padding-sm">
-    <pnx-date 
-      label="{{ 'Releve.MaxDate' | translate }}" 
+    <pnx-date
+      label="{{ 'Releve.MaxDate' | translate }}"
       data-qa="pnx-occtax-filter-date-max"
-      [parentFormControl]="occtaxMapListService.dynamicFormGroup.controls.date_up">
+      [parentFormControl]="
+        occtaxMapListService.dynamicFormGroup.controls.date_up
+      "
+    >
     </pnx-date>
   </div>
 
-  <button 
-    class="btn btn-outline-shadow actions" 
+  <button
+    class="btn btn-outline-shadow actions"
     matTooltip="{{ 'Form.RefreshFilters' | translate }}"
     (click)="refreshFilters()"
   >
-      <i id="refresh-filter" class="fa fa-refresh clickable action" aria-hidden="true"></i>
+    <i
+      id="refresh-filter"
+      class="fa fa-refresh clickable action"
+      aria-hidden="true"
+    ></i>
   </button>
 
-
-  <button 
-    class="btn btn-outline-shadow actions" 
+  <button
+    class="btn btn-outline-shadow actions"
     matTooltip="{{ 'Form.AdvancedFilters' | translate }}"
     (click)="toggleAdvancedFilters()"
   >
     <i class="fa fa-filter" aria-hidden="true"></i>
   </button>
 
-  <svg *ngIf="occtaxMapListService.dynamicFormGroup?.value.length > 0"
-    height="40" 
+  <svg
+    *ngIf="occtaxMapListService.dynamicFormGroup?.value.length > 0"
+    height="40"
     width="10"
   >
-    <circle
-      cx="5" 
-      cy="30" 
-      r="3" 
-      stroke="red" 
-      stroke-width="0" 
-      fill="red"/>
+    <circle cx="5" cy="30" r="3" stroke="red" stroke-width="0" fill="red" />
   </svg>
-  <button id="search-btn" 
+  <button
+    id="search-btn"
     mat-flat-button
     color="primary"
     (click)="searchData()"
     data-qa="pnx-occtax-filter-search"
   >
-    {{ 'Search' | translate }}
+    {{ "Search" | translate }}
     <mat-icon>search</mat-icon>
   </button>
 </div>
 
 <div id="collapse-settings" [hidden]="!advandedFilterOpen">
-  <pnx-dynamic-form-generator 
-    #dynamicForm 
-    selectLabel="Autres Critères" 
+  <pnx-dynamic-form-generator
+    #dynamicForm
+    selectLabel="Autres Critères"
     [myFormGroup]="occtaxMapListService.dynamicFormGroup"
-    [formsDefinition]="formsDefinition">
+    [formsDefinition]="formsDefinition"
+  >
   </pnx-dynamic-form-generator>
 </div>
diff --git a/contrib/occtax/frontend/app/occtax-map-list/filter/occtax-map-list-filter.component.scss b/contrib/occtax/frontend/app/occtax-map-list/filter/occtax-map-list-filter.component.scss
index 105757dec0..bb7d42bd95 100644
--- a/contrib/occtax/frontend/app/occtax-map-list/filter/occtax-map-list-filter.component.scss
+++ b/contrib/occtax/frontend/app/occtax-map-list/filter/occtax-map-list-filter.component.scss
@@ -21,7 +21,7 @@
 #refresh-filter {
   color: red;
 }
-#collapse-settings{
+#collapse-settings {
   padding: 5px 15px;
 }
 
@@ -30,5 +30,5 @@
 }
 
 ::ng-deep .dynamic-form {
-  display: block!important;
+  display: block !important;
 }
diff --git a/contrib/occtax/frontend/app/occtax-map-list/occtax-map-list.component.html b/contrib/occtax/frontend/app/occtax-map-list/occtax-map-list.component.html
index 62c3fac234..5fd5b9d9d7 100644
--- a/contrib/occtax/frontend/app/occtax-map-list/occtax-map-list.component.html
+++ b/contrib/occtax/frontend/app/occtax-map-list/occtax-map-list.component.html
@@ -9,7 +9,7 @@
           class="btn-action hard-shadow button-success uppercase ml-3"
           [routerLink]="['form/releve']"
         >
-          {{ 'Releve.AddReleve' | translate }}
+          {{ "Releve.AddReleve" | translate }}
           <mat-icon>add_circle_outline</mat-icon>
         </a>
         <!-- <a [routerLink]="['form']" class="btn btn-success btn-action hard-shadow uppercase">
@@ -42,7 +42,8 @@
         [ngStyle]="{ 'min-height.px': cardContentHeight }"
       >
         <!-- MAP -->
-        <pnx-map-list [idName]="mapListService.idName" height="100%"> </pnx-map-list>
+        <pnx-map-list [idName]="mapListService.idName" height="100%">
+        </pnx-map-list>
       </div>
       <div
         class="col-xs-12 col-sm-12 col-md-6 col-lg-6 padding-sm-occ"
@@ -77,9 +78,15 @@
         >
           <!-- Row Detail Template -->
           <ngx-datatable-row-detail #myDetailRow rowHeight="100">
-            <ng-template ngx-datatable-row-detail-template let-row="row" let-expanded="expanded">
+            <ng-template
+              ngx-datatable-row-detail-template
+              let-row="row"
+              let-expanded="expanded"
+            >
               <div><strong>ID relevé : </strong>{{ row.id_releve_occtax }}</div>
-              <ng-container *ngIf="row.comment !== null && row?.comment.trim() !== ''">
+              <ng-container
+                *ngIf="row.comment !== null && row?.comment.trim() !== ''"
+              >
                 <div><strong>Commentaire : </strong>{{ row.comment }}</div>
               </ng-container>
               <div>
@@ -87,11 +94,12 @@
                 >{{
                   row.altitude_min == row.altitude_max
                     ? row.altitude_min
-                    : row.altitude_min + ' - ' + row.altitude_max
+                    : row.altitude_min + " - " + row.altitude_max
                 }}
               </div>
               <div>
-                <strong>Saisi par : </strong> {{ row?.digitiser?.nom_complet || '-'}} 
+                <strong>Saisi par : </strong>
+                {{ row?.digitiser?.nom_complet || "-" }}
               </div>
               <div><strong>Observé par: </strong></div>
               <div style="margin-left: 20px">
@@ -101,7 +109,12 @@
               </div>
               <div><strong>Taxon(s): </strong></div>
               <div style="margin-left: 20px">
-                <div *ngIf="row.t_occurrences_occtax && row.t_occurrences_occtax.length == 0">
+                <div
+                  *ngIf="
+                    row.t_occurrences_occtax &&
+                    row.t_occurrences_occtax.length == 0
+                  "
+                >
                   Aucun taxon
                 </div>
                 <div *ngFor="let taxon of displayTaxonsTooltip(row)">
@@ -133,7 +146,11 @@
               >
               </i>
             </ng-template>
-            <ng-template ngx-datatable-cell-template let-row="row" let-expanded="expanded">
+            <ng-template
+              ngx-datatable-cell-template
+              let-row="row"
+              let-expanded="expanded"
+            >
               <a
                 href="javascript:void(0)"
                 matTooltip="Ouvrir/fermer le détail"
@@ -155,17 +172,24 @@
                   [routerLink]="['form/releve', row.id_releve_occtax]"
                 >
                   <i
-                    matTooltip="{{ 'Releve.Edit' | translate }} {{ row.id_releve_occtax }}"
+                    matTooltip="{{ 'Releve.Edit' | translate }} {{
+                      row.id_releve_occtax
+                    }}"
                     class="fa fa-pencil-square-o"
                     aria-hidden="true"
                   ></i>
                 </a>
               </ng-container>
               <ng-template #disabledEditBlc>
-                <button class="btn btn-outline-shadow btn-no-padding btn-ghost" disabled="true">
+                <button
+                  class="btn btn-outline-shadow btn-no-padding btn-ghost"
+                  disabled="true"
+                >
                   <i
                     class="fa fa-pencil-square-o disabled"
-                    matTooltip="{{ 'Releve.Edit' | translate }} {{ row.id_releve_occtax }}"
+                    matTooltip="{{ 'Releve.Edit' | translate }} {{
+                      row.id_releve_occtax
+                    }}"
                     aria-hidden="true"
                   ></i>
                 </button>
@@ -181,17 +205,24 @@
                   [routerLink]="['info', row.id_releve_occtax]"
                 >
                   <i
-                    matTooltip="{{ 'Releve.Info' | translate }} {{ row.id_releve_occtax }}"
+                    matTooltip="{{ 'Releve.Info' | translate }} {{
+                      row.id_releve_occtax
+                    }}"
                     class="fa fa-info-circle"
                     aria-hidden="true"
                   ></i>
                 </a>
               </ng-container>
               <ng-template #disabledInfoBlc>
-                <button class="btn btn-outline-shadow btn-no-padding btn-ghost" disabled="true">
+                <button
+                  class="btn btn-outline-shadow btn-no-padding btn-ghost"
+                  disabled="true"
+                >
                   <i
                     class="fa fa-info-circle disabled"
-                    matTooltip="{{ 'Releve.Info' | translate }} {{ row.id_releve_occtax }}"
+                    matTooltip="{{ 'Releve.Info' | translate }} {{
+                      row.id_releve_occtax
+                    }}"
                     aria-hidden="true"
                   ></i>
                 </button>
@@ -200,7 +231,11 @@
           </ngx-datatable-column>
 
           <ngx-datatable-column maxWidth="10">
-            <ng-template let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>
+            <ng-template
+              let-row="row"
+              let-rowIndex="rowIndex"
+              ngx-datatable-cell-template
+            >
               <button
                 class="btn btn-outline-shadow btn-no-padding btn-ghost"
                 [disabled]="!row.rights.D"
@@ -210,7 +245,9 @@
                 <i
                   [ngClass]="{ disabled: !row.rights.D }"
                   #iElement
-                  matTooltip="{{ 'Releve.Delete' | translate }} {{ row[mapListService.idName] }}"
+                  matTooltip="{{ 'Releve.Delete' | translate }} {{
+                    row[mapListService.idName]
+                  }}"
                   class="fa fa-trash-o"
                   aria-hidden="true"
                 ></i>
@@ -219,7 +256,12 @@
           </ngx-datatable-column>
 
           <!-- DATA COLOMNS -->
-          <ng-container *ngFor="let col of mapListService['displayColumns']; let index = index">
+          <ng-container
+            *ngFor="
+              let col of mapListService['displayColumns'];
+              let index = index
+            "
+          >
             <ngx-datatable-column
               [maxWidth]="col['max_width']"
               [prop]="col['prop']"
@@ -229,19 +271,26 @@
               <!-- date -->
               <!-- Pour afficher la date, si période mise en forme en Du ... au ... -->
               <ng-template ngx-datatable-cell-template let-row="row">
-                <div [ngSwitch]="mapListService['displayColumns'][index]['prop']">
-                  <span *ngSwitchCase="'date'" matTooltip="{{ displayDateTooltip(row) }}">
+                <div
+                  [ngSwitch]="mapListService['displayColumns'][index]['prop']"
+                >
+                  <span
+                    *ngSwitchCase="'date'"
+                    matTooltip="{{ displayDateTooltip(row) }}"
+                  >
                     {{ displayDateTooltip(row) }}
                   </span>
                   <span *ngSwitchCase="'date_min'">
-                    {{ row.date_min | date : 'dd-MM-yyyy' }}
+                    {{ row.date_min | date: "dd-MM-yyyy" }}
                   </span>
                   <span *ngSwitchCase="'date_max'">
-                    {{ row.date_max | date : 'dd-MM-yyyy' }}
+                    {{ row.date_max | date: "dd-MM-yyyy" }}
                   </span>
                   <span
                     *ngSwitchCase="'nb_taxons'"
-                    [matTooltip]="displayTaxons(row).join('\n') || 'Aucun taxon'"
+                    [matTooltip]="
+                      displayTaxons(row).join('\n') || 'Aucun taxon'
+                    "
                     matTooltipPosition="left"
                     matTooltipClass="mat-tooltip"
                   >
@@ -249,15 +298,17 @@
                   </span>
                   <span
                     *ngSwitchCase="'taxons'"
-                    [matTooltip]="displayTaxons(row).join('\n') || 'Aucun taxon'"
+                    [matTooltip]="
+                      displayTaxons(row).join('\n') || 'Aucun taxon'
+                    "
                     matTooltipPosition="left"
                     matTooltipClass="mat-tooltip"
                   >
                     <span>
                       <span class="badge badge-dark">
-                        {{ row.t_occurrences_occtax?.length || '0' }}
+                        {{ row.t_occurrences_occtax?.length || "0" }}
                       </span>
-                      {{ displayTaxons(row).join(', ') || 'Aucun taxon' }}
+                      {{ displayTaxons(row).join(", ") || "Aucun taxon" }}
                     </span>
                   </span>
                   <span
@@ -265,16 +316,20 @@
                     [matTooltip]="displayObservateursTooltip(row).join('\n')"
                     matTooltipPosition="left"
                   >
-                    {{ displayObservateursTooltip(row).join(', ') }}
+                    {{ displayObservateursTooltip(row).join(", ") }}
                   </span>
                   <span
                     *ngSwitchCase="'dataset'"
                     [matTooltip]="row?.dataset.dataset_name || 'Aucun JDD'"
                     matTooltipPosition="left"
                   >
-                    {{ row['dataset'].dataset_name || 'Aucun JDD' }}
+                    {{ row["dataset"].dataset_name || "Aucun JDD" }}
                   </span>
-                  <span *ngSwitchDefault [matTooltip]="row[col.prop]" matTooltipPosition="left">
+                  <span
+                    *ngSwitchDefault
+                    [matTooltip]="row[col.prop]"
+                    matTooltipPosition="left"
+                  >
                     {{ row[col.prop] }}
                   </span>
                 </div>
@@ -290,7 +345,7 @@
           color="primary"
           (click)="openModalDownload($event, modalDownload)"
         >
-          {{ 'Download' | translate }}
+          {{ "Download" | translate }}
 
           <mat-icon>file_download</mat-icon>
         </button>
@@ -298,10 +353,13 @@
         <!-- MODAL COLUMNS -->
         <ng-template #modalCol let-c="close" let-d="dismiss">
           <div class="modal-header">
-            <h4>{{ 'List.DisplayColumns' | translate }}</h4>
+            <h4>{{ "List.DisplayColumns" | translate }}</h4>
           </div>
           <div class="modal-body">
-            <li class="col-list" *ngFor="let col of mapListService.availableColumns">
+            <li
+              class="col-list"
+              *ngFor="let col of mapListService.availableColumns"
+            >
               <a>
                 <input
                   type="checkbox"
@@ -309,7 +367,9 @@ <h4>{{ 'List.DisplayColumns' | translate }}</h4>
                   (click)="toggle(col)"
                   [checked]="isChecked(col)"
                 />
-                <label [attr.for]="col.name">{{ col.name | readablePropertie }}</label>
+                <label [attr.for]="col.name">{{
+                  col.name | readablePropertie
+                }}</label>
               </a>
             </li>
           </div>
@@ -319,13 +379,18 @@ <h4>{{ 'List.DisplayColumns' | translate }}</h4>
         <ng-template #modalConfirm let-c="close" let-d="dismiss">
           <div class="modal-header">
             <h5 class="modal-title" id="exampleModalLabel">
-              {{ 'Releve.Delete' | translate }}
+              {{ "Releve.Delete" | translate }}
               {{ mapListService.selectedRow[0][mapListService.idName] }} ?
             </h5>
           </div>
           <div class="modal-body">
-            <button type="button" mat-raised-button class="mr-1 uppercase" (click)="c()">
-              {{ 'Cancel' | translate }}
+            <button
+              type="button"
+              mat-raised-button
+              class="mr-1 uppercase"
+              (click)="c()"
+            >
+              {{ "Cancel" | translate }}
             </button>
             <button
               type="button"
@@ -333,31 +398,50 @@ <h5 class="modal-title" id="exampleModalLabel">
               color="warn"
               class="uppercase"
               data-qa="pnx-occtax-delete"
-              (click)="c(); onDeleteReleve(mapListService.selectedRow[0].id_releve_occtax)"
+              (click)="
+                c();
+                onDeleteReleve(mapListService.selectedRow[0].id_releve_occtax)
+              "
             >
-              {{ 'Delete' | translate }}
+              {{ "Delete" | translate }}
             </button>
           </div>
         </ng-template>
 
         <!-- MODAL DOWNLOAD -->
-        <ng-template #modalDownload id="modal-download" let-c="close" let-d="dismiss">
+        <ng-template
+          #modalDownload
+          id="modal-download"
+          let-c="close"
+          let-d="dismiss"
+        >
           <div class="modal-header">
-            <h5 class="modal-title" id="exampleModalLabel">{{ 'DownloadData' | translate }}</h5>
+            <h5 class="modal-title" id="exampleModalLabel">
+              {{ "DownloadData" | translate }}
+            </h5>
           </div>
           <div class="modal-body">
-            <span [innerHTML]="config.OCCTAX.export_message"> </span> <br><br>
+            <span [innerHTML]="config.OCCTAX.export_message"> </span>
+            <br /><br />
 
-            <div *ngIf="mapListService.page.totalElements > config.OCCTAX.MAX_EXPORT_NUMBER">
-              {{'DownloadOverflow' | translate }}
-              <br><br>
+            <div
+              *ngIf="
+                mapListService.page.totalElements >
+                config.OCCTAX.MAX_EXPORT_NUMBER
+              "
+            >
+              {{ "DownloadOverflow" | translate }}
+              <br /><br />
             </div>
 
             <div class="export-button">
               <button
                 *ngFor="let format of config.OCCTAX.export_available_format"
                 (click)="downloadData(format); c()"
-                [disabled]="mapListService.page.totalElements > config.OCCTAX.MAX_EXPORT_NUMBER"
+                [disabled]="
+                  mapListService.page.totalElements >
+                  config.OCCTAX.MAX_EXPORT_NUMBER
+                "
                 type="button"
                 mat-raised-button
                 class="button-success mr-1 mb-2"
diff --git a/contrib/occtax/frontend/app/occtax-map-list/occtax-map-list.component.scss b/contrib/occtax/frontend/app/occtax-map-list/occtax-map-list.component.scss
index 1d0cf1b1d6..d86c6a5668 100644
--- a/contrib/occtax/frontend/app/occtax-map-list/occtax-map-list.component.scss
+++ b/contrib/occtax/frontend/app/occtax-map-list/occtax-map-list.component.scss
@@ -10,7 +10,9 @@
   border: 1px solid #f1f1f1;
   border-radius: 2px;
   padding: 10px 15px;
-  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
+  box-shadow:
+    0 2px 1px -1px rgba(0, 0, 0, 0.2),
+    0 1px 1px 0 rgba(0, 0, 0, 0.14),
     0 1px 3px 0 rgba(0, 0, 0, 0.12);
   height: 100%;
 }
@@ -66,7 +68,9 @@ ngx-datatable {
 }
 
 .ngx-datatable.material {
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+  box-shadow:
+    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
     0 1px 5px 0 rgba(0, 0, 0, 0.12) !important;
 }