diff --git a/.vscode/settings.json b/.vscode/settings.json
index 5a68e67..cadb689 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -29,6 +29,6 @@
   ],
   "css.validate": false,
   "scss.validate": false,
-  "[vue]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" },
+  "[vue]": { "editor.defaultFormatter": "stylelint.vscode-stylelint" },
   "[css]": { "editor.defaultFormatter": "stylelint.vscode-stylelint" },
 }
\ No newline at end of file
diff --git a/public/data/edito.json b/public/data/edito.json
index 1ca6c6b..4fe8ea4 100644
--- a/public/data/edito.json
+++ b/public/data/edito.json
@@ -1,4 +1,13 @@
 {
+  "contacts": {
+    "mail": "geoplateforme@ign.fr",
+    "networks": {
+      "facebook": "https://www.facebook.com/ignfr",
+      "twitter": "https://twitter.com/IGNFrance",
+      "linkedin": "https://fr.linkedin.com/company/ignfrance",
+      "instagram": "https://www.instagram.com/ign_france/?hl=fr"
+    }
+  },
   "thematics": [
     "Administratif",
     "Foncier",
diff --git a/src/components.d.ts b/src/components.d.ts
index db2ece4..5911502 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -22,10 +22,12 @@ declare module 'vue' {
     DsfrConsent: typeof import('@gouvminint/vue-dsfr')['DsfrConsent']
     DsfrFooter: typeof import('@gouvminint/vue-dsfr')['DsfrFooter']
     DsfrHeader: typeof import('@gouvminint/vue-dsfr')['DsfrHeader']
+    DsfrInput: typeof import('@gouvminint/vue-dsfr')['DsfrInput']
     DsfrModal: typeof import('@gouvminint/vue-dsfr')['DsfrModal']
     DsfrNavigation: typeof import('@gouvminint/vue-dsfr')['DsfrNavigation']
     DsfrRadioButtonSet: typeof import('@gouvminint/vue-dsfr')['DsfrRadioButtonSet']
     DsfrSearchBar: typeof import('@gouvminint/vue-dsfr')['DsfrSearchBar']
+    DsfrShare: typeof import('@gouvminint/vue-dsfr')['DsfrShare']
     DsfrSideMenu: typeof import('@gouvminint/vue-dsfr')['DsfrSideMenu']
     DsfrTabContent: typeof import('@gouvminint/vue-dsfr')['DsfrTabContent']
     DsfrTabs: typeof import('@gouvminint/vue-dsfr')['DsfrTabs']
@@ -62,6 +64,7 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     ScaleLine: typeof import('./components/carte/control/ScaleLine.vue')['default']
     SearchEngine: typeof import('./components/carte/control/SearchEngine.vue')['default']
+    Share: typeof import('./components/carte/control/Share.vue')['default']
     StoreData: typeof import('./components/StoreData.vue')['default']
     View: typeof import('./components/carte/View.vue')['default']
     Zoom: typeof import('./components/carte/control/Zoom.vue')['default']
diff --git a/src/components/carte/Controls.vue b/src/components/carte/Controls.vue
index caaa8ec..df1bb3c 100644
--- a/src/components/carte/Controls.vue
+++ b/src/components/carte/Controls.vue
@@ -12,6 +12,8 @@ import MeasureLength from './control/MeasureLength.vue'
 import MeasureArea from './control/MeasureArea.vue'
 import MeasureAzimuth from './control/MeasureAzimuth.vue'
 
+import Share from './control/Share.vue'
+
 import { useControls } from '@/composables/controls'
 import { useLogger } from 'vue-logger-plugin'
 
@@ -38,7 +40,10 @@ const props = defineProps({
 const log = useLogger()
 log.debug(props.controlOptions);
 
-// liste des options pour les contrôles
+// liste des options pour les contrôles;
+
+const shareOptions = {};
+
 const layerSwitcherOptions = {
   options: {
     position : "top-right",
@@ -118,6 +123,11 @@ const measureAzimuthOptions = {
   >>> sinon, visibility:false
 -->
 <template>
+  <Share
+    v-if="controlOptions"
+    :visibility="props.controlOptions.includes(useControls.Share.id)"
+    :share-options="shareOptions"
+  />
   <LayerSwitcher
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.LayerSwitcher.id)"
diff --git a/src/components/carte/Map.vue b/src/components/carte/Map.vue
index 4c0d80f..a10977e 100644
--- a/src/components/carte/Map.vue
+++ b/src/components/carte/Map.vue
@@ -67,6 +67,8 @@ mapStore.setMap(map)
 
 <style>
   #map {
+    position: absolute;
     width: 100%;
+    height: inherit;
   }
 </style>
diff --git a/src/components/carte/control/LayerSwitcher.vue b/src/components/carte/control/LayerSwitcher.vue
index c844dad..67a80cc 100644
--- a/src/components/carte/control/LayerSwitcher.vue
+++ b/src/components/carte/control/LayerSwitcher.vue
@@ -31,6 +31,7 @@ onMounted(() => {
     layerSwitcher.value.on("layerswitcher:extent", onZoomToExtentLayer);
     layerSwitcher.value.on("layerswitcher:change:opacity", onChangeOpacityLayer);
     layerSwitcher.value.on("layerswitcher:change:visibility", onChangeVisibilityLayer);
+    layerSwitcher.value.on("layerswitcher:change:position", onChangePositionLayer);
   }
 })
 
@@ -108,6 +109,13 @@ const onChangeVisibilityLayer = (e) => {
     visible : e.visibility
   });
 }
+const onChangePositionLayer = (e) => {
+  var id = dataStore.getLayerIdByName(e.layer.name, e.layer.service);
+  log.debug("onChangePositionLayer", e);
+  // TODO
+  // mise à jour de la position de la couche dans le permalien !
+}
+
 </script>
 
 <template>
diff --git a/src/components/carte/control/Share.vue b/src/components/carte/control/Share.vue
new file mode 100644
index 0000000..cc89d92
--- /dev/null
+++ b/src/components/carte/control/Share.vue
@@ -0,0 +1,183 @@
+<script lang="js">
+/**
+ * @description
+ * Panneau de partage de carte
+ * 
+ * {@link https://github.com/dnum-mi/vue-dsfr/tree/main/src/components/DsfrButton}
+ * {@link https://github.com/dnum-mi/vue-dsfr/tree/main/src/components/DsfrModal}
+ * {@link https://github.com/dnum-mi/vue-dsfr/tree/main/src/components/DsfrShare}
+ */
+export default {};
+</script>
+
+<script lang="js" setup>
+
+import { useDataStore }  from '@/stores/dataStore';
+import { useMapStore }  from '@/stores/mapStore';
+
+const dataStore = useDataStore();
+const mapStore = useMapStore();
+
+const props = defineProps({
+  visibility: Boolean,
+  shareOptions: Object
+});
+
+// paramètres du composant bouton
+const btnTitle = "Ouvrir le panneau de partage de carte";
+const btnIcon = "fr-icon-link"; // FIXME icone de partage dsfr !?
+const btnLabel = "";
+
+// paramètres du composant de la modale
+const title = "Partager une carte";
+const size = "lg";
+
+const shareModalOpened = ref(false);
+
+const onModalShareOpen = () => {
+  shareModalOpened.value = true;
+};
+const onModalShareClose = () => {
+  shareModalOpened.value = false;
+};
+
+// les paramètres du composant de partage
+const contacts = dataStore.getContacts();
+var mail = {
+  address : contacts.mail,
+  subject : "Sujet",
+  body : "Corps du courriel"
+};
+const shareMail = {
+  "to" : `mailto:${mail.address}?subject=${mail.subject}&body=${mail.body}`,
+  "label" : "Envoyer un mail"
+};
+const shareNetworks = [
+  {
+    "name": "facebook",
+    "label": "Partager sur Facebook",
+    "url": contacts.networks.facebook
+  },
+  {
+    "name": "twitter-x",
+    "label": "Partager sur X (anciennement Twitter)",
+    "url": contacts.networks.twitter
+  },
+  {
+    "name": "linkedin",
+    "label": "Partager sur LinkedIn",
+    "url": contacts.networks.linkedin
+  },
+  {
+    "name": "instagram",
+    "label": "Partager sur Instagram",
+    "url": contacts.networks.instagram
+  }
+];
+
+// creation de l'iframe de partage
+const iframe = computed(() => {
+ return `<iframe 
+    width="600" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
+    sandbox="allow-forms allow-scripts allow-same-origin"
+    src="${mapStore.permalinkShare}" 
+    allowfullscreen>
+  </iframe>`;
+});
+
+const target = ref(null);
+
+onMounted(() => {
+  nextTick(function () {
+    //code here
+  })
+});
+
+onBeforeMount(() => {
+  nextTick(function () {
+    //code here
+  })
+});
+</script>
+
+<template>
+  <div id="share-container" ref="target">
+    <DsfrButton
+      v-if="props.visibility"
+      id="share-button-position"
+      class="fr-btn fr-btn--md inline-flex justify-center share-button-size"
+      :label="btnLabel"
+      :title="btnTitle"
+      :icon="btnIcon"
+      icon-only
+      no-outline
+      @click="onModalShareOpen"
+    />
+    <DsfrModal 
+      :opened="shareModalOpened" 
+      :title="title"
+      :size="size" 
+      @close="onModalShareClose">
+      <!-- slot : c'est ici que l'on customise le contenu ! -->
+      <div>
+        <p>
+          <DsfrShare
+            copyLabel="Copier dans le presse-papier"
+            :mail="shareMail"
+            :networks="shareNetworks"
+            title="Partages"
+          />
+        </p>
+      </div>
+      <div>
+        <p>
+          <DsfrInput
+            v-model="mapStore.permalink"
+            label="Lien permanent vers la carte"
+            placeholder=""
+            label-visible
+            readonly
+            descriptionId=""
+          />
+        </p>
+        <p>
+          <DsfrInput
+            v-model="iframe"
+            label="Copiez le code HTML pour intégrer la carte dans un site"
+            placeholder=""
+            isTextarea="true"
+            label-visible
+            readonly
+            descriptionId=""
+            style="height: 200px;"
+          />
+        </p>
+      </div>
+    </DsfrModal>
+  </div>
+</template>
+
+<style>
+  .fr-btn--instagram::before {
+    -webkit-mask-image: url("../../../../node_modules/@gouvfr/dsfr/dist/icons/logo/instagram-line.svg");
+    mask-image: url("../../../../node_modules/@gouvfr/dsfr/dist/icons/logo/instagram-line.svg");
+  }
+</style>
+
+<style scoped>
+  #share-container {}
+  #share-button-position {
+    position: absolute;
+    left: 10px;
+    top: 225px;
+    z-index: 1000;
+  }
+  .share-button-size {
+    width: 40px;
+    height: 40px;
+    color: white;
+  }
+  .share-iframe-input {
+    height: 200px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/composables/controls.js b/src/composables/controls.js
index 893b446..9dfed43 100644
--- a/src/composables/controls.js
+++ b/src/composables/controls.js
@@ -102,13 +102,19 @@ export const useControls = {
     disable: false,
     analytic: false
   },
+  Share: {
+    id: 'Share',
+    active: true,
+    disable: false,
+    analytic: false
+  },
 }
 
 /**
  * Obtenir les contrôles par défaut
  * @returns 
  */
-export function getDefaultControls() {
+export function useDefaultControls() {
   var defaultControls = [];
   // récupération des controls par défaut
   for (var control in useControls) {
@@ -230,5 +236,12 @@ export function useControlsMenuOptions() {
     hint: 'Mesures',
     disabled: useControls.MeasureAzimuth.disable
   },
+  {
+    label: 'Partager une carte',
+    id: 'share',
+    name: useControls.Share.id,
+    hint: 'Partages',
+    disabled: useControls.Share.disable
+  },
 ].filter(opt => Object.keys(useControls).includes(opt.name))
 } 
diff --git a/src/composables/urlParams.js b/src/composables/urlParams.js
new file mode 100644
index 0000000..2d58258
--- /dev/null
+++ b/src/composables/urlParams.js
@@ -0,0 +1,67 @@
+import { useUrlSearchParams } from '@vueuse/core';
+
+/**
+ * Lecture du permalink pour y extraire les informations.
+ * La structure est identique au permalien de la carte
+ * avec quelques paramètres supplementaires :
+ * - centre : ...
+ * - x / y : ...
+ * - lon / lat : ...
+ * - layers : ... 
+ * - zoom : ...
+ * - commentaire : "m" string avec contenu encodé
+ * - titre : "t" string avec contenu encodé
+ * - localisation : "g" boolean, ajout d'un icone
+ * - informations : "i" boolean, ajout d'informations prédéfinies
+ * 
+ * @example
+ * http://localhost:5173/cartes.gouv.fr-entree-carto/embed?
+ * &c=417070.66959457495,5975301.705064449
+ * &z=10
+ * &l=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2$GEOPORTAIL:OGC:WMTS(1;1;0),ACCES.BIOMETHANE$GEOPORTAIL:OGC:WMTS(0.47;1;0)
+ * &permalink=yes
+ * 
+ * @see mapStore
+ */
+export function useUrlParams() {
+  var params = {};
+  const urlParams = useUrlSearchParams("history");
+  if (urlParams) {
+    const keys = Object.keys(urlParams);
+    for (let index = 0; index < keys.length; index++) {
+      const key = keys[index];
+      switch (key) {
+        case "c":
+          var xy = urlParams[key].split(",");
+          params.x = xy[0];
+          params.y = xy[1];
+          params.lon = 0; // on ne fait pas la conversion...
+          params.lat = 0;
+          params.center = [params.x, params.y];
+          break;
+        case "l":
+          params.layers = urlParams[key];
+          break;
+        case "w":
+          // FIXME utile ? la liste devrait être fixe...
+          params.controls = urlParams[key];
+          break;
+        case "m":
+          console.debug("not yet implemented !");
+          break;
+        case "t":
+          console.debug("not yet implemented !");
+          break;
+        case "i":
+          console.debug("not yet implemented !");
+          break;  
+        case "z":
+          params.zoom = parseInt(urlParams[key], 10);
+          break;
+        default:
+          break;
+      }
+    }
+  }
+  return params;
+};
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 243bc9a..6352259 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,6 +5,7 @@ import {
 from 'vue-router'
 
 import Load from '../views/Load.vue'
+import Embed from '../views/Embed.vue'
 
 const MAIN_TITLE = 'Le service public des cartes et données du territoire | cartes.gouv.fr'
 
@@ -15,6 +16,11 @@ const routes: Array<RouteRecordRaw> = [
     name: 'Carte',
     component: Load,
   },
+  {
+    path: '/embed',
+    name: 'Carte embarquée',
+    component: Embed,
+  },
 ]
 
 const router = createRouter({
diff --git a/src/stores/dataStore.js b/src/stores/dataStore.js
index 21e24a8..561a666 100644
--- a/src/stores/dataStore.js
+++ b/src/stores/dataStore.js
@@ -14,6 +14,7 @@ export const useDataStore = defineStore('data', () => {
   const m_layers = ref({});
   const m_generalOptions = ref({});
   const m_tileMatrixSets = ref({});
+  const m_contacts = ref({});
   const isLoaded = ref(false);
   const error = ref("");
 
@@ -52,6 +53,7 @@ export const useDataStore = defineStore('data', () => {
         return ret
       })
 
+      m_contacts.value = edito.contacts;
       m_informations.value = edito.informations;
       m_thematics.value = edito.thematics;
       m_layers.value = res;
@@ -68,6 +70,10 @@ export const useDataStore = defineStore('data', () => {
 
   }
 
+  function getContacts () {
+    return m_contacts.value;
+  }
+
   function getInformations() {
     return m_informations.value;
   }
@@ -232,6 +238,7 @@ export const useDataStore = defineStore('data', () => {
     error,
     isLoaded,
     fetchData,
+    getContacts,
     getInformations,
     getThematics,
     getLayers,
diff --git a/src/stores/mapStore.js b/src/stores/mapStore.js
index b7dfebe..681bda2 100644
--- a/src/stores/mapStore.js
+++ b/src/stores/mapStore.js
@@ -2,29 +2,34 @@ import {
   defineStore
 } from 'pinia';
 
-import {
-  useStorage
-} from '@vueuse/core';
+import { useStorage } from '@vueuse/core';
 
-import { getDefaultControls } from '@/composables/controls';
+import { useUrlParams } from "@/composables/urlParams.js";
+import { useDefaultControls } from '@/composables/controls';
 
 /**
  * Valeurs par defaut
  * pour la liste des contrôles par defaut, on utilise toujours 
  * le composable 'src/composables/controls.js'
  */
-var defaultControls = getDefaultControls().toString();
+var defaultControls = useDefaultControls();
 
 const DEFAULT = {
   LAYERS: "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2$GEOPORTAIL:OGC:WMTS(1;1;0)",
-  CONTROLS: defaultControls,
+  CONTROLS: defaultControls.toString(),
   X: 283734.248995,
-  Y: 5655117.100650,
+  Y:  5655117.100650,
   LON: 2.5479878714752027, // informatif
   LAT: 50.800781249995744, // informatif
   ZOOM: 12,
   FIRSTVISIT: false,
-  NOINFORMATION: null
+  NOINFORMATION: null,
+  PRINT: {
+    ICON: false,
+    INFO: false,
+    TITLE: "",
+    COMMENT: ""
+  }
 }
 
 /**
@@ -45,6 +50,7 @@ const ns = ((value) => {
  * 
  * - cartes.gouv.fr.center --> webmercator
  * - cartes.gouv.fr.permalink
+ * - cartes.gouv.fr.permalinkShare
  * - cartes.gouv.fr.firstVisit
  * - cartes.gouv.fr.layers
  * - cartes.gouv.fr.zoom -> absolue !
@@ -69,11 +75,25 @@ const ns = ((value) => {
  *   avec caractére de séparation des options de la liste : ';'
  *   et ',' pour chaque couches
  *   (!) pour le moment, on implemente tout simplement une liste des contrôles actifs !
+ * 
+ * @todo ordre des couches
  *
  */
 export const useMapStore = defineStore('map', () => {
+  /////////////
+  // objet map
+  /////////////
   const map = ref({});
 
+  // gestion des KVP dans l'URL (permalink)
+  var params = useUrlParams();
+  for (const key in params) {
+    if (Object.prototype.hasOwnProperty.call(params, key)) {
+      const value = params[key];
+      localStorage.setItem(ns(key), value);
+    }
+  }
+
   //////////////////
   // objets simples
   //////////////////
@@ -85,16 +105,33 @@ export const useMapStore = defineStore('map', () => {
   var lat = useStorage(ns('lat'), DEFAULT.LAT);
   var firstVisit = useStorage(ns('firstVisit'), DEFAULT.FIRSTVISIT);
   var noInformation = useStorage(ns('noInformation'), DEFAULT.NOINFORMATION);
+  var title = useStorage(ns('print.title'), DEFAULT.PRINT.TITLE);
+  var comment = useStorage(ns('print.comment'), DEFAULT.PRINT.COMMENT);
+  var info = useStorage(ns('print.info'), DEFAULT.PRINT.INFO);
+  var geolocation = useStorage(ns('print.geolocation'), DEFAULT.PRINT.ICON);
 
   //////////////////
   // objets calculés
   //////////////////
 
   var permalink = computed(() => {
-    var url = location;
+    // INFO
+    // on exclue la route /embed
+    var last = location.pathname.slice(-1);
+    var path = (last === "/") ? location.pathname.slice(0, -1) : location.pathname;
+    var url = location.origin + path.replace("/embed", "");
     return `${url}?c=${center.value}&z=${Math.round(zoom.value)}&l=${layers.value}&w=${controls.value}&permalink=yes`;
   });
 
+  var permalinkShare = computed(() => {
+    // INFO
+    // on ajoute la route /embed
+    var last = location.pathname.slice(-1);
+    var path = (last === "/") ? location.pathname.slice(0, -1) : location.pathname;
+    var url = location.origin + (path.includes("/embed") ? path : path + "/embed");
+    return `${url}?c=${center.value}&z=${Math.round(zoom.value)}&l=${layers.value}&m=${comment.value}&i=${info.value}&t=${title.value}&g=${geolocation.value}&permalink=yes`;
+  });
+
   var center = computed(() => {
     return [x.value, y.value];
   });
@@ -130,7 +167,8 @@ export const useMapStore = defineStore('map', () => {
 
   localStorage.setItem(ns('center'), center.value);
   localStorage.setItem(ns('permalink'), permalink.value);
-  
+  localStorage.setItem(ns('permalinkShare'), permalinkShare.value);
+
   watch(zoom, () => {
     localStorage.setItem(ns('zoom'), Math.round(zoom.value));
   })
@@ -152,6 +190,9 @@ export const useMapStore = defineStore('map', () => {
   watch(permalink, () => {
     localStorage.setItem(ns('permalink'), permalink.value.toString()); // string
   })
+  watch(permalinkShare, () => {
+    localStorage.setItem(ns('permalinkShare'), permalinkShare.value.toString()); // string
+  })
   watch(center, () => {
     localStorage.setItem(ns('center'), center.value.toString()); // string
   })
@@ -164,6 +205,18 @@ export const useMapStore = defineStore('map', () => {
   watch(controls, () => {
     localStorage.setItem(ns('controls'), controls.value.toString()); // string
   })
+  watch(title, () => {
+    localStorage.setItem(ns('print.title'), title.value.toString()); // string
+  })
+  watch(comment, () => {
+    localStorage.setItem(ns('print.comment'), comment.value.toString()); // string
+  })
+  watch(info, () => {
+    localStorage.setItem(ns('print.info'), info.value); // boolean
+  })
+  watch(geolocation, () => {
+    localStorage.setItem(ns('print.geolocation'), icon.value); // boolean
+  })
 
   //////////////////
   // getter/setter
@@ -282,6 +335,12 @@ export const useMapStore = defineStore('map', () => {
     lat,
     firstVisit,
     noInformation,
+    title,
+    comment,
+    info,
+    geolocation,
+    permalink,
+    permalinkShare,
     getMap,
     setMap,
     getLayers,
diff --git a/src/views/Embed.vue b/src/views/Embed.vue
new file mode 100644
index 0000000..667cfd3
--- /dev/null
+++ b/src/views/Embed.vue
@@ -0,0 +1,90 @@
+<script lang="js">
+/**
+ * @description
+ * Cartographie intégrée pour partage
+ * 
+ */
+export default {};
+</script>
+
+<script setup lang="js">
+import Carto from '@/components/carte/Carto.vue';
+import Patience from '@/components/utils/Patience.vue'
+import StoreData from '@/components/StoreData.vue';
+
+import { useMapStore } from "@/stores/mapStore";
+import { useDataStore } from "@/stores/dataStore";
+
+const mapStore = useMapStore();
+const dataStore = useDataStore();
+
+// On récupère les couches du mapStore
+const selectedLayers = computed(() => {
+  let layers = mapStore.getLayers();
+  return layers.map((layerId) => {
+    var layer = dataStore.getLayerByID(layerId);
+    // les options de la couche sont récuperées dans le mapStore (permalink)
+    var props = mapStore.getLayerProperty(layerId);
+    layer.opacity = props.opacity;
+    layer.visible = props.visible;
+    layer.gray = props.gray;
+    return layer;
+  });
+});
+
+// Contrôles fixés par defaut
+const selectedControls = [
+  "ScaleLine", 
+  "OverviewMap",
+  "Zoom"
+];
+
+function hideHeader () {
+  var header = document.querySelector(".fr-header");
+  header.classList.add("gpf-hidden");
+}
+
+function hideFooter () {
+  var footer = document.querySelector(".fr-footer");
+  footer.classList.add("gpf-hidden");
+}
+
+onMounted(() => {
+  hideHeader();
+  hideFooter();
+});
+
+</script>
+
+<template>
+  <Suspense>
+      <!-- Chargement du dataStore avec une patience 
+          avant affichage de la cartographie 
+      -->
+      <StoreData>
+        <div class="map-container">
+          <Carto 
+            :selected-layers="selectedLayers"
+            :selected-controls="selectedControls">
+          </Carto>
+        </div>
+      </StoreData>
+
+      <!-- loading state via #fallback slot -->
+      <template #fallback>
+        <div class="patience-container">
+          <Patience/>
+        </div>
+      </template>
+  </Suspense>
+</template>
+
+<style>
+  .map-container,
+  .patience-container {
+    margin-left: 0;
+    width: inherit;
+    height: 100vh;
+    display: flex;
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/Main.vue b/src/views/Main.vue
index b7f3093..a4df845 100644
--- a/src/views/Main.vue
+++ b/src/views/Main.vue
@@ -144,7 +144,7 @@ const navItems: DsfrNavigationProps['navItems'] = [
   </div>
 
   <!-- INFO
-      Bouton non DSFR pour laffichage du footer en mode mobile comme sur la maquette
+      Bouton non DSFR pour l'affichage du footer en mode mobile comme sur la maquette
   -->
   <label
     class="fr-footer-toggle-label fr-btn fr-btn--tertiary-no-outline"