From a4452388cda8871cd995147feb554f01718ff9dc Mon Sep 17 00:00:00 2001
From: Valentin <valentin@figureslibres.io>
Date: Sun, 29 Sep 2024 21:36:21 +0200
Subject: [PATCH] =?UTF-8?q?contenu=20des=20=C3=A9tapes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 composer.json                                 |   1 +
 composer.lock                                 | 115 +++-
 ...entity_form_display.node.etape.default.yml |  23 +-
 ...form_display.paragraph.parties.default.yml |  17 +-
 ...entity_view_display.node.etape.default.yml |  12 +
 ....entity_view_display.node.etape.teaser.yml |   2 +
 ...view_display.paragraph.parties.default.yml |  14 +-
 config/sync/core.extension.yml                |   2 +
 ....field.node.etape.field_carte_sensible.yml |  41 ++
 ....paragraph.parties.field_chiffres_cles.yml |  24 +
 ...eld.paragraph.parties.field_diaporama.yml} |  12 +-
 ...d.field.paragraph.parties.field_videos.yml |   4 +-
 ...ield.storage.node.field_carte_sensible.yml |  30 +
 ....storage.paragraph.field_chiffres_cles.yml |  19 +
 ...eld.storage.paragraph.field_diaporama.yml} |   8 +-
 config/sync/page_manager.page.node.yml        |  12 -
 ...ger.page_variant.node-panels_variant-0.yml | 101 ----
 config/sync/rest.resource.entity.view.yml     |  18 +
 web/themes/custom/caravane/assets/js/main.js  |   7 +-
 .../caravane/assets/js/stores/content.js      | 127 ++++-
 .../caravane/assets/js/vuejs/ImageModale.vue  |  93 ++++
 .../caravane/assets/js/vuejs/Modale.vue       | 326 ++++++++---
 .../custom/caravane/assets/scss/main.scss     | 514 ++++++++++++++----
 web/themes/custom/caravane/package-lock.json  | 386 +++++++------
 web/themes/custom/caravane/package.json       |   2 +
 25 files changed, 1410 insertions(+), 500 deletions(-)
 create mode 100644 config/sync/field.field.node.etape.field_carte_sensible.yml
 create mode 100644 config/sync/field.field.paragraph.parties.field_chiffres_cles.yml
 rename config/sync/{field.field.paragraph.parties.field_images.yml => field.field.paragraph.parties.field_diaporama.yml} (78%)
 create mode 100644 config/sync/field.storage.node.field_carte_sensible.yml
 create mode 100644 config/sync/field.storage.paragraph.field_chiffres_cles.yml
 rename config/sync/{field.storage.paragraph.field_images.yml => field.storage.paragraph.field_diaporama.yml} (78%)
 delete mode 100644 config/sync/page_manager.page.node.yml
 delete mode 100644 config/sync/page_manager.page_variant.node-panels_variant-0.yml
 create mode 100644 config/sync/rest.resource.entity.view.yml
 create mode 100644 web/themes/custom/caravane/assets/js/vuejs/ImageModale.vue

diff --git a/composer.json b/composer.json
index 140b617..5e6ce6d 100644
--- a/composer.json
+++ b/composer.json
@@ -25,6 +25,7 @@
         "drupal/geocoder": "^4.24",
         "drupal/geofield": "^1.59",
         "drupal/image_field_caption": "^2.0",
+        "drupal/jsonapi_views": "^1.1",
         "drupal/leaflet": "^10.2",
         "drupal/leaflet_more_maps": "^2.2",
         "drupal/leaflet_more_markers": "^1.1",
diff --git a/composer.lock b/composer.lock
index f77f7d4..d9ebf2a 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "d918655a40cf26c711d6e65b635d0c9b",
+    "content-hash": "ca842f57165ece6f809c97e1b33a8210",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -5431,6 +5431,119 @@
                 "source": "https://git.drupalcode.org/project/js_cookie"
             }
         },
+        {
+            "name": "drupal/jsonapi_resources",
+            "version": "1.2.0",
+            "source": {
+                "type": "git",
+                "url": "https://git.drupalcode.org/project/jsonapi_resources.git",
+                "reference": "8.x-1.2"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://ftp.drupal.org/files/projects/jsonapi_resources-8.x-1.2.zip",
+                "reference": "8.x-1.2",
+                "shasum": "ca91ee746cf1a2de49da22e674ce41f8ece901d0"
+            },
+            "require": {
+                "drupal/core": "^9.1 || ^10 || ^11"
+            },
+            "type": "drupal-module",
+            "extra": {
+                "drupal": {
+                    "version": "8.x-1.2",
+                    "datestamp": "1719872296",
+                    "security-coverage": {
+                        "status": "covered",
+                        "message": "Covered by Drupal's security advisory policy"
+                    }
+                }
+            },
+            "notification-url": "https://packages.drupal.org/8/downloads",
+            "license": [
+                "GPL-2.0+"
+            ],
+            "authors": [
+                {
+                    "name": "API-First Initiative",
+                    "homepage": "https://www.drupal.org/user/3616626"
+                },
+                {
+                    "name": "bradjones1",
+                    "homepage": "https://www.drupal.org/user/405824"
+                },
+                {
+                    "name": "gabesullice",
+                    "homepage": "https://www.drupal.org/user/2287430"
+                },
+                {
+                    "name": "mglaman",
+                    "homepage": "https://www.drupal.org/user/2416470"
+                }
+            ],
+            "description": "This module let's you define custom resources at routes of your choice that use existing resource types.",
+            "homepage": "https://www.drupal.org/project/jsonapi_resources",
+            "keywords": [
+                "Drupal",
+                "JSON API"
+            ],
+            "support": {
+                "source": "https://git.drupalcode.org/project/jsonapi_resources"
+            }
+        },
+        {
+            "name": "drupal/jsonapi_views",
+            "version": "1.1.0",
+            "source": {
+                "type": "git",
+                "url": "https://git.drupalcode.org/project/jsonapi_views.git",
+                "reference": "8.x-1.1"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://ftp.drupal.org/files/projects/jsonapi_views-8.x-1.1.zip",
+                "reference": "8.x-1.1",
+                "shasum": "d2d83e724db1d1ea1a4a83a78007c356bc210f6e"
+            },
+            "require": {
+                "drupal/core": ">=8.8",
+                "drupal/jsonapi_resources": "^1.0"
+            },
+            "type": "drupal-module",
+            "extra": {
+                "drupal": {
+                    "version": "8.x-1.1",
+                    "datestamp": "1675998787",
+                    "security-coverage": {
+                        "status": "covered",
+                        "message": "Covered by Drupal's security advisory policy"
+                    }
+                }
+            },
+            "notification-url": "https://packages.drupal.org/8/downloads",
+            "license": [
+                "GPL-2.0-or-later"
+            ],
+            "authors": [
+                {
+                    "name": "Deciphered",
+                    "homepage": "https://www.drupal.org/user/103796"
+                },
+                {
+                    "name": "pixelwhip",
+                    "homepage": "https://www.drupal.org/user/275292"
+                }
+            ],
+            "description": "This module creates custom JSON:API resources from Views.",
+            "homepage": "https://www.drupal.org/project/jsonapi_views",
+            "keywords": [
+                "Drupal",
+                "JSON:API"
+            ],
+            "support": {
+                "source": "https://git.drupalcode.org/project/jsonapi_views"
+            }
+        },
         {
             "name": "drupal/leaflet",
             "version": "10.2.21",
diff --git a/config/sync/core.entity_form_display.node.etape.default.yml b/config/sync/core.entity_form_display.node.etape.default.yml
index c95956a..de70f21 100644
--- a/config/sync/core.entity_form_display.node.etape.default.yml
+++ b/config/sync/core.entity_form_display.node.etape.default.yml
@@ -5,6 +5,7 @@ dependencies:
   config:
     - field.field.node.etape.field_adresse
     - field.field.node.etape.field_arret_numero
+    - field.field.node.etape.field_carte_sensible
     - field.field.node.etape.field_couleur
     - field.field.node.etape.field_dates
     - field.field.node.etape.field_galleries
@@ -39,7 +40,7 @@ third_party_settings:
       label: Details
       region: content
       parent_name: ''
-      weight: 5
+      weight: 8
       format_type: details_sidebar
       format_settings:
         classes: ''
@@ -68,9 +69,17 @@ content:
     settings:
       placeholder: ''
     third_party_settings: {  }
+  field_carte_sensible:
+    type: image_image
+    weight: 5
+    region: content
+    settings:
+      progress_indicator: throbber
+      preview_image_style: thumbnail
+    third_party_settings: {  }
   field_couleur:
     type: color_pickr_default
-    weight: 26
+    weight: 2
     region: content
     settings:
       theme: classic
@@ -84,7 +93,7 @@ content:
     third_party_settings: {  }
   field_galleries:
     type: entity_reference_autocomplete
-    weight: 4
+    weight: 7
     region: content
     settings:
       match_operator: CONTAINS
@@ -94,14 +103,14 @@ content:
     third_party_settings: {  }
   field_geofield:
     type: geofield_latlon
-    weight: 6
+    weight: 1
     region: content
     settings:
       html5_geolocation: false
     third_party_settings: {  }
   field_parties:
     type: paragraphs
-    weight: 3
+    weight: 6
     region: content
     settings:
       title: Paragraphe
@@ -155,7 +164,7 @@ content:
     third_party_settings: {  }
   field_vignette:
     type: image_image
-    weight: 2
+    weight: 4
     region: content
     settings:
       progress_indicator: throbber
@@ -183,7 +192,7 @@ content:
     third_party_settings: {  }
   title:
     type: string_textfield
-    weight: 1
+    weight: 3
     region: content
     settings:
       size: 60
diff --git a/config/sync/core.entity_form_display.paragraph.parties.default.yml b/config/sync/core.entity_form_display.paragraph.parties.default.yml
index 89fa5f1..d69c90b 100644
--- a/config/sync/core.entity_form_display.paragraph.parties.default.yml
+++ b/config/sync/core.entity_form_display.paragraph.parties.default.yml
@@ -3,7 +3,8 @@ langcode: fr
 status: true
 dependencies:
   config:
-    - field.field.paragraph.parties.field_images
+    - field.field.paragraph.parties.field_chiffres_cles
+    - field.field.paragraph.parties.field_diaporama
     - field.field.paragraph.parties.field_texte
     - field.field.paragraph.parties.field_titre
     - field.field.paragraph.parties.field_videos
@@ -18,10 +19,18 @@ targetEntityType: paragraph
 bundle: parties
 mode: default
 content:
-  field_images:
-    type: image_image
+  field_chiffres_cles:
+    type: text_textarea
     weight: 2
     region: content
+    settings:
+      rows: 5
+      placeholder: ''
+    third_party_settings: {  }
+  field_diaporama:
+    type: image_image
+    weight: 3
+    region: content
     settings:
       progress_indicator: throbber
       preview_image_style: thumbnail
@@ -44,7 +53,7 @@ content:
     third_party_settings: {  }
   field_videos:
     type: video_embed_field_textfield
-    weight: 3
+    weight: 4
     region: content
     settings: {  }
     third_party_settings: {  }
diff --git a/config/sync/core.entity_view_display.node.etape.default.yml b/config/sync/core.entity_view_display.node.etape.default.yml
index ec4f177..f12fdb4 100644
--- a/config/sync/core.entity_view_display.node.etape.default.yml
+++ b/config/sync/core.entity_view_display.node.etape.default.yml
@@ -5,6 +5,7 @@ dependencies:
   config:
     - field.field.node.etape.field_adresse
     - field.field.node.etape.field_arret_numero
+    - field.field.node.etape.field_carte_sensible
     - field.field.node.etape.field_couleur
     - field.field.node.etape.field_dates
     - field.field.node.etape.field_galleries
@@ -42,6 +43,17 @@ content:
     third_party_settings: {  }
     weight: 5
     region: content
+  field_carte_sensible:
+    type: image
+    label: above
+    settings:
+      image_link: ''
+      image_style: ''
+      image_loading:
+        attribute: lazy
+    third_party_settings: {  }
+    weight: 10
+    region: content
   field_couleur:
     type: color_pickr_default
     label: visually_hidden
diff --git a/config/sync/core.entity_view_display.node.etape.teaser.yml b/config/sync/core.entity_view_display.node.etape.teaser.yml
index e6b07a4..e67ecb8 100644
--- a/config/sync/core.entity_view_display.node.etape.teaser.yml
+++ b/config/sync/core.entity_view_display.node.etape.teaser.yml
@@ -6,6 +6,7 @@ dependencies:
     - core.entity_view_mode.node.teaser
     - field.field.node.etape.field_adresse
     - field.field.node.etape.field_arret_numero
+    - field.field.node.etape.field_carte_sensible
     - field.field.node.etape.field_couleur
     - field.field.node.etape.field_dates
     - field.field.node.etape.field_galleries
@@ -30,6 +31,7 @@ content:
 hidden:
   field_adresse: true
   field_arret_numero: true
+  field_carte_sensible: true
   field_couleur: true
   field_dates: true
   field_galleries: true
diff --git a/config/sync/core.entity_view_display.paragraph.parties.default.yml b/config/sync/core.entity_view_display.paragraph.parties.default.yml
index 359f33a..6521976 100644
--- a/config/sync/core.entity_view_display.paragraph.parties.default.yml
+++ b/config/sync/core.entity_view_display.paragraph.parties.default.yml
@@ -3,7 +3,8 @@ langcode: fr
 status: true
 dependencies:
   config:
-    - field.field.paragraph.parties.field_images
+    - field.field.paragraph.parties.field_chiffres_cles
+    - field.field.paragraph.parties.field_diaporama
     - field.field.paragraph.parties.field_texte
     - field.field.paragraph.parties.field_titre
     - field.field.paragraph.parties.field_videos
@@ -17,7 +18,14 @@ targetEntityType: paragraph
 bundle: parties
 mode: default
 content:
-  field_images:
+  field_chiffres_cles:
+    type: text_default
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    weight: 5
+    region: content
+  field_diaporama:
     type: image
     label: above
     settings:
@@ -26,7 +34,7 @@ content:
       image_loading:
         attribute: lazy
     third_party_settings: {  }
-    weight: 2
+    weight: 4
     region: content
   field_texte:
     type: text_default
diff --git a/config/sync/core.extension.yml b/config/sync/core.extension.yml
index c47ff7f..f9516b5 100644
--- a/config/sync/core.extension.yml
+++ b/config/sync/core.extension.yml
@@ -68,6 +68,8 @@ module:
   image_field_caption: 0
   inline_entity_form: 0
   jsonapi: 0
+  jsonapi_resources: 0
+  jsonapi_views: 0
   language: 0
   layout_discovery: 0
   leaflet: 0
diff --git a/config/sync/field.field.node.etape.field_carte_sensible.yml b/config/sync/field.field.node.etape.field_carte_sensible.yml
new file mode 100644
index 0000000..da90b1f
--- /dev/null
+++ b/config/sync/field.field.node.etape.field_carte_sensible.yml
@@ -0,0 +1,41 @@
+uuid: 4a3025d3-79e4-4db0-959c-c7a981fd5555
+langcode: fr
+status: true
+dependencies:
+  config:
+    - field.storage.node.field_carte_sensible
+    - node.type.etape
+  module:
+    - image
+id: node.etape.field_carte_sensible
+field_name: field_carte_sensible
+entity_type: node
+bundle: etape
+label: 'Carte sensible'
+description: ''
+required: false
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings:
+  handler: 'default:file'
+  handler_settings: {  }
+  file_directory: '[date:custom:Y]-[date:custom:m]'
+  file_extensions: 'png jpg jpeg webp'
+  max_filesize: ''
+  max_resolution: ''
+  min_resolution: ''
+  alt_field: true
+  alt_field_required: true
+  title_field: false
+  title_field_required: false
+  default_image:
+    uuid: ''
+    alt: ''
+    title: ''
+    width: null
+    height: null
+    caption: ''
+  caption_field: 0
+  caption_field_required: 0
+field_type: image
diff --git a/config/sync/field.field.paragraph.parties.field_chiffres_cles.yml b/config/sync/field.field.paragraph.parties.field_chiffres_cles.yml
new file mode 100644
index 0000000..7aa6ab2
--- /dev/null
+++ b/config/sync/field.field.paragraph.parties.field_chiffres_cles.yml
@@ -0,0 +1,24 @@
+uuid: 08b9d4cf-cc38-447e-810c-251fc48dd686
+langcode: fr
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.field_chiffres_cles
+    - filter.format.plain_text
+    - paragraphs.paragraphs_type.parties
+  module:
+    - text
+id: paragraph.parties.field_chiffres_cles
+field_name: field_chiffres_cles
+entity_type: paragraph
+bundle: parties
+label: 'Chiffres clés'
+description: 'Entrez le chiffre clé (ex: 25%, 1400€, 9 500...) sur la première ligne puis sa légende sur la ligne suivante.'
+required: false
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings:
+  allowed_formats:
+    - plain_text
+field_type: text_long
diff --git a/config/sync/field.field.paragraph.parties.field_images.yml b/config/sync/field.field.paragraph.parties.field_diaporama.yml
similarity index 78%
rename from config/sync/field.field.paragraph.parties.field_images.yml
rename to config/sync/field.field.paragraph.parties.field_diaporama.yml
index 1fb55a5..ff7eb2d 100644
--- a/config/sync/field.field.paragraph.parties.field_images.yml
+++ b/config/sync/field.field.paragraph.parties.field_diaporama.yml
@@ -1,17 +1,17 @@
-uuid: 956bf8f3-dca5-470a-ba86-7ea2e2cf4c8d
+uuid: 811fcdb7-aca1-4ac5-a2cf-1dd1c42193c1
 langcode: fr
 status: true
 dependencies:
   config:
-    - field.storage.paragraph.field_images
+    - field.storage.paragraph.field_diaporama
     - paragraphs.paragraphs_type.parties
   module:
     - image
-id: paragraph.parties.field_images
-field_name: field_images
+id: paragraph.parties.field_diaporama
+field_name: field_diaporama
 entity_type: paragraph
 bundle: parties
-label: Images
+label: Diaporama
 description: ''
 required: false
 translatable: false
@@ -36,6 +36,6 @@ settings:
     width: null
     height: null
     caption: ''
-  caption_field: 1
+  caption_field: 0
   caption_field_required: 0
 field_type: image
diff --git a/config/sync/field.field.paragraph.parties.field_videos.yml b/config/sync/field.field.paragraph.parties.field_videos.yml
index 7560879..d4eafef 100644
--- a/config/sync/field.field.paragraph.parties.field_videos.yml
+++ b/config/sync/field.field.paragraph.parties.field_videos.yml
@@ -12,14 +12,14 @@ field_name: field_videos
 entity_type: paragraph
 bundle: parties
 label: Vidéos
-description: ''
+description: 'Ajouter un lien vidéo Youtube'
 required: false
 translatable: false
 default_value: {  }
 default_value_callback: ''
 settings:
   allowed_providers:
-    vimeo: vimeo
     youtube: youtube
+    vimeo: vimeo
     youtube_playlist: '0'
 field_type: video_embed_field
diff --git a/config/sync/field.storage.node.field_carte_sensible.yml b/config/sync/field.storage.node.field_carte_sensible.yml
new file mode 100644
index 0000000..5dc44c3
--- /dev/null
+++ b/config/sync/field.storage.node.field_carte_sensible.yml
@@ -0,0 +1,30 @@
+uuid: 310a42f4-c1d1-40a0-9db3-5f843012418f
+langcode: fr
+status: true
+dependencies:
+  module:
+    - file
+    - image
+    - node
+id: node.field_carte_sensible
+field_name: field_carte_sensible
+entity_type: node
+type: image
+settings:
+  target_type: file
+  display_field: false
+  display_default: false
+  uri_scheme: public
+  default_image:
+    uuid: ''
+    alt: ''
+    title: ''
+    width: null
+    height: null
+module: image
+locked: false
+cardinality: 1
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false
diff --git a/config/sync/field.storage.paragraph.field_chiffres_cles.yml b/config/sync/field.storage.paragraph.field_chiffres_cles.yml
new file mode 100644
index 0000000..6d4cd69
--- /dev/null
+++ b/config/sync/field.storage.paragraph.field_chiffres_cles.yml
@@ -0,0 +1,19 @@
+uuid: a1501806-9968-4d21-9d58-2c57d52b19b7
+langcode: fr
+status: true
+dependencies:
+  module:
+    - paragraphs
+    - text
+id: paragraph.field_chiffres_cles
+field_name: field_chiffres_cles
+entity_type: paragraph
+type: text_long
+settings: {  }
+module: text
+locked: false
+cardinality: -1
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false
diff --git a/config/sync/field.storage.paragraph.field_images.yml b/config/sync/field.storage.paragraph.field_diaporama.yml
similarity index 78%
rename from config/sync/field.storage.paragraph.field_images.yml
rename to config/sync/field.storage.paragraph.field_diaporama.yml
index 80e2923..5e24ab2 100644
--- a/config/sync/field.storage.paragraph.field_images.yml
+++ b/config/sync/field.storage.paragraph.field_diaporama.yml
@@ -1,4 +1,4 @@
-uuid: 712c2905-6549-474c-994c-c96e42dc6239
+uuid: 2c25ec08-17bb-4b70-ad00-e1ca72d39d41
 langcode: fr
 status: true
 dependencies:
@@ -6,8 +6,8 @@ dependencies:
     - file
     - image
     - paragraphs
-id: paragraph.field_images
-field_name: field_images
+id: paragraph.field_diaporama
+field_name: field_diaporama
 entity_type: paragraph
 type: image
 settings:
@@ -23,7 +23,7 @@ settings:
     height: null
 module: image
 locked: false
-cardinality: 1
+cardinality: -1
 translatable: true
 indexes: {  }
 persist_with_no_fields: false
diff --git a/config/sync/page_manager.page.node.yml b/config/sync/page_manager.page.node.yml
deleted file mode 100644
index 340f6ee..0000000
--- a/config/sync/page_manager.page.node.yml
+++ /dev/null
@@ -1,12 +0,0 @@
-uuid: 882ea961-8c51-44d1-ad7f-0c49a5ae6019
-langcode: fr
-status: true
-dependencies: {  }
-id: node
-label: node
-description: ''
-use_admin_theme: false
-path: '/node/[id]'
-access_logic: and
-access_conditions: {  }
-parameters: {  }
diff --git a/config/sync/page_manager.page_variant.node-panels_variant-0.yml b/config/sync/page_manager.page_variant.node-panels_variant-0.yml
deleted file mode 100644
index 6c00978..0000000
--- a/config/sync/page_manager.page_variant.node-panels_variant-0.yml
+++ /dev/null
@@ -1,101 +0,0 @@
-uuid: 3afb7005-30db-46c4-a484-e588d2d69c56
-langcode: fr
-status: true
-dependencies:
-  config:
-    - page_manager.page.node
-    - views.view.etapes
-    - views.view.saisons
-    - views.view.thematiques
-  module:
-    - panels
-    - views
-id: node-panels_variant-0
-label: Panels
-weight: 0
-variant: panels_variant
-variant_settings:
-  id: panels_variant
-  label: null
-  weight: 0
-  uuid: df541d5f-f6d1-4438-9cc5-9ccedd22dbd0
-  blocks:
-    85ea1b9b-276f-482f-9551-e69a9525c797:
-      id: 'views_block:saisons-block_1'
-      label: ''
-      label_display: visible
-      provider: views
-      context_mapping: {  }
-      views_label: ''
-      items_per_page: none
-      exposed: {  }
-      region: first
-      weight: 0
-      uuid: 85ea1b9b-276f-482f-9551-e69a9525c797
-      css_classes:
-        - ''
-      html_id: ''
-      css_styles: ''
-    db9a883e-fef3-445f-94d8-d7dd1d12dbb0:
-      id: 'views_block:thematiques-block_1'
-      label: ''
-      label_display: visible
-      provider: views
-      context_mapping: {  }
-      views_label: ''
-      items_per_page: none
-      exposed: {  }
-      region: first
-      weight: 0
-      uuid: db9a883e-fef3-445f-94d8-d7dd1d12dbb0
-      css_classes:
-        - ''
-      html_id: ''
-      css_styles: ''
-    5a493cf9-9740-4903-90d5-261c1831a099:
-      id: 'views_block:etapes-block_2'
-      label: ''
-      label_display: visible
-      provider: views
-      context_mapping: {  }
-      views_label: ''
-      items_per_page: none
-      exposed: {  }
-      region: second
-      weight: 0
-      uuid: 5a493cf9-9740-4903-90d5-261c1831a099
-      css_classes:
-        - ''
-      html_id: ''
-      css_styles: ''
-    141a2da6-bca2-48b5-8877-3dd63534cb72:
-      id: 'views_block:etapes-block_1'
-      label: ''
-      label_display: visible
-      provider: views
-      context_mapping: {  }
-      views_label: ''
-      items_per_page: none
-      exposed: {  }
-      region: third
-      weight: 0
-      uuid: 141a2da6-bca2-48b5-8877-3dd63534cb72
-      css_classes:
-        - ''
-      html_id: ''
-      css_styles: ''
-  page_title: ''
-  layout: layout_threecol_25_50_25
-  layout_settings:
-    label: ''
-  builder: standard
-  storage_type: page_manager
-  storage_id: node-panels_variant-0
-  css_classes:
-    - ''
-  html_id: ''
-  css_styles: ''
-page: node
-selection_criteria: {  }
-selection_logic: and
-static_context: {  }
diff --git a/config/sync/rest.resource.entity.view.yml b/config/sync/rest.resource.entity.view.yml
new file mode 100644
index 0000000..48a8eed
--- /dev/null
+++ b/config/sync/rest.resource.entity.view.yml
@@ -0,0 +1,18 @@
+uuid: 981c1540-91dd-4cee-aa66-66d961d6a405
+langcode: fr
+status: true
+dependencies:
+  module:
+    - serialization
+    - user
+    - views
+id: entity.view
+plugin_id: 'entity:view'
+granularity: resource
+configuration:
+  methods:
+    - GET
+  formats:
+    - json
+  authentication:
+    - cookie
diff --git a/web/themes/custom/caravane/assets/js/main.js b/web/themes/custom/caravane/assets/js/main.js
index 2303d5d..f209ff8 100644
--- a/web/themes/custom/caravane/assets/js/main.js
+++ b/web/themes/custom/caravane/assets/js/main.js
@@ -3,6 +3,9 @@ import { createPinia } from 'pinia'
 import '../scss/main.scss'
 import Modale from './vuejs/Modale.vue'
 
+import VueImageZoomer from 'vue-image-zoomer'
+import 'vue-image-zoomer/dist/style.css';
+
 import { useContentStore } from './stores/content';
 import router from './router/router';
 
@@ -48,7 +51,9 @@ import router from './router/router';
     }
 
     function initVueContentModale(){
-      const app = createApp(Modale).use(createPinia()).use(router);
+      const app = createApp(Modale)
+        .use(createPinia()).use(router)
+        .use(VueImageZoomer);
       const store = useContentStore();
       app.mount('#content-modale');
 
diff --git a/web/themes/custom/caravane/assets/js/stores/content.js b/web/themes/custom/caravane/assets/js/stores/content.js
index c27d441..536c60f 100644
--- a/web/themes/custom/caravane/assets/js/stores/content.js
+++ b/web/themes/custom/caravane/assets/js/stores/content.js
@@ -1,3 +1,5 @@
+// query et traitement des contenus
+
 import { defineStore } from 'pinia';
 import REST from '../api/rest-axios';
 
@@ -21,12 +23,15 @@ export const useContentStore = defineStore('content', {
           },
         },
         geofield: {},
-        galeries: [],
+        // galeries: [],
         parties: [],
         saison: {},
         thematiques: [],
         vignette: {},
         couleur: '',
+        sensibleMap: {},
+        previous: {},
+        next: {},
       },
       page: {
         title: '', 
@@ -43,7 +48,7 @@ export const useContentStore = defineStore('content', {
         this.page = {};
         try {
           const response = await REST.get(`/jsonapi/node/etape/`);
-          for (let etape of response.data.data) {
+          for (let [index, etape] of response.data.data.entries()) {
             if (etape.attributes.drupal_internal__nid == nid) {
               for (let metatag of etape.attributes.metatag) {
                 if (metatag.tag === "link") {
@@ -53,34 +58,113 @@ export const useContentStore = defineStore('content', {
               this.etape.title = etape.attributes.title;
               this.etape.adresse = etape.attributes.field_adresse;
               this.etape.etape_number = etape.attributes.field_arret_numero;
-              //this.etape.dates = etape.attributes.field_dates;
               this.etape.dates = {
-                start: {
-                  d: etape.attributes.field_dates.value.split('-')[2],
-                  m: new Intl.DateTimeFormat('fr-FR', { month: 'long' }).format(new Date(etape.attributes.field_dates.value)),
-                  y: etape.attributes.field_dates.value.split('-')[0],
-                 },
-                end: {
-                  d: etape.attributes.field_dates.end_value.split('-')[2],
-                  m: new Intl.DateTimeFormat('fr-FR', { month: 'long' }).format(new Date(etape.attributes.field_dates.end_value)),
-                  y: etape.attributes.field_dates.end_value.split('-')[0],
-
-                 },
+                start: this.getCleanDate(etape.attributes.field_dates.value),
+                end: this.getCleanDate(etape.attributes.field_dates.end_value),
               }
               this.etape.geofield = etape.attributes.field_geofield;
-              this.etape.galeries = await this.fetchEtapeContent('field_galleries', etape.relationships);
+              // this.etape.galeries = await this.fetchEtapeContent('field_galleries', etape.relationships);
               const partiesFetch = await this.fetchEtapeContent('field_parties', etape.relationships);
               let partiesArray = []
-              for (let partie of partiesFetch) {
-                partiesArray.push({ title: partie.attributes.field_titre, text: partie.attributes.field_texte.value });
+
+              if (partiesFetch) {
+                for (let partie of partiesFetch) {
+                  let partieContent = {
+                    title: partie.attributes.field_titre || '',
+                    text: partie.attributes.field_texte.value || '',
+                    diaporama: [],
+                    chiffresCles: [],
+                    videos: [],
+                  }
+  
+                  if (partie.relationships.field_diaporama) {
+                    const diaporama = await REST.get(partie.relationships.field_diaporama.links.related.href);
+    
+                    partie.relationships.field_diaporama.data.forEach((element, i) => {
+                      partieContent.diaporama[i] = {};
+                      partieContent.diaporama[i].alt = element.meta.alt;
+                    });                
+    
+                    diaporama.data.data.forEach((element, i) => {
+                      partieContent.diaporama[i].url = element.attributes.uri.url;
+                    });
+                  }
+  
+                  if (partie.attributes.field_chiffres_cles) {
+                    for (let chiffre of partie.attributes.field_chiffres_cles) {
+                      partieContent.chiffresCles.push(chiffre.processed);
+                    }
+                  }
+                  
+                  if (partie.attributes.field_videos) {
+                    for (let video of partie.attributes.field_videos) {
+                      const videoId = video.split('?v=')[1];
+                      const videoUrl = `https://www.youtube.com/embed/${videoId}`;
+                      partieContent.videos.push(videoUrl);
+                    }
+                  }
+
+                  partiesArray.push(partieContent);              
+                }
               }
+              
               this.etape.parties = partiesArray;
               this.etape.saison = await this.fetchEtapeContent('field_saison', etape.relationships);
-              this.etape.saison = await this.fetchEtapeContent('field_saison', etape.relationships);
               this.etape.thematiques = await this.fetchEtapeContent('field_thematiques', etape.relationships);
               const vignetteFetch = await this.fetchEtapeContent('field_vignette', etape.relationships);
               this.etape.vignette = { url: vignetteFetch.attributes.uri.url, alt: etape.attributes.field_vignette_alt };
+              const sensibleMapFetch = await this.fetchEtapeContent('field_carte_sensible', etape.relationships);
+              if (sensibleMapFetch) {
+                this.etape.sensibleMap = { url: sensibleMapFetch.attributes.uri.url, alt: etape.relationships.field_carte_sensible.data.meta.alt };
+              }
               this.etape.couleur = etape.attributes.field_couleur;
+
+              // get previous and next étape infos
+              // the list from the json api /node is not ordered
+              // and i need authentification to get the json view ordered list
+              // so i get it from the displayed list in the page
+              const orderedEtapesList = document.querySelectorAll('#etapes-liste li');
+
+              if (orderedEtapesList) {
+                const processEtape = async (etapeItemNid, etapesList, key) => {
+                  for (let etape of etapesList) {
+                    if (etape.attributes.drupal_internal__nid == etapeItemNid) {
+                      const vignetteFetch = await REST.get(etape.relationships.field_vignette.links.related.href);
+                      this.etape[key] = {
+                        nid: etape.attributes.drupal_internal__nid,
+                        couleur: etape.attributes.field_couleur,
+                        title: etape.attributes.title,
+                        postalCode: etape.attributes.field_adresse.postal_code,
+                        dates: {
+                          start: this.getCleanDate(etape.attributes.field_dates.value),
+                          end: this.getCleanDate(etape.attributes.field_dates.end_value),
+                        },
+                        vignette: {
+                          url: vignetteFetch.data.data.attributes.uri.url,
+                          alt: etape.relationships.field_vignette.data.meta.alt,
+                        },
+                      };
+                      break;
+                    }
+                  }
+                };
+              
+                for (let li of orderedEtapesList) {
+                  if (li.querySelector('a').dataset.nodeNid === nid) {
+                    const previousEtapeItemNid = li.previousElementSibling?.querySelector('a').dataset.nodeNid;
+                    const nextEtapeItemNid = li.nextElementSibling?.querySelector('a').dataset.nodeNid;
+              
+                    if (previousEtapeItemNid) {
+                      await processEtape(previousEtapeItemNid, response.data.data, 'previous');
+                    }
+              
+                    if (nextEtapeItemNid) {
+                      await processEtape(nextEtapeItemNid, response.data.data, 'next');
+                    }
+                  }
+                }
+              }              
+
               this.setActiveItemInMenu();
               break;
             }
@@ -171,6 +255,13 @@ export const useContentStore = defineStore('content', {
             console.error('Issue with getNodeData', error);
           }
         }
+      },
+      getCleanDate(date) {
+        return {
+          d: date.split('-')[2],
+          m: new Intl.DateTimeFormat('fr-FR', { month: 'long' }).format(new Date(date)),
+          y: date.split('-')[0],
+         }
       }
     },
   });
diff --git a/web/themes/custom/caravane/assets/js/vuejs/ImageModale.vue b/web/themes/custom/caravane/assets/js/vuejs/ImageModale.vue
new file mode 100644
index 0000000..90a138d
--- /dev/null
+++ b/web/themes/custom/caravane/assets/js/vuejs/ImageModale.vue
@@ -0,0 +1,93 @@
+<template>
+    <transition name="fade">
+      <div v-if="isOpen" class="image-viewer-wrapper">
+        <div v-if="!swiperContent.length" class="img-modale simple-viewer">
+            <figure class="img-wrapper">
+                <img :src="image.src" :alt="image.alt">
+                <figcaption>{{ image.alt }}</figcaption>
+            </figure>
+          </div>
+          <div v-else class="img-modale swiper-viewer">
+            <div class="swiper-wrapper">
+              <swiper-container
+                :slidesPerView="1"
+                :centeredSlides="true"
+                :loop="true"
+                :navigation="true"
+                :pagination="true"
+                :initialSlide="currentImgIndex"
+                :injectStyles="[`
+                  .swiper-button-next, .swiper-button-prev { 
+                    color: white;
+                    top: 50%;
+                  }
+                  .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
+                    background: white;
+                    opacity: 0.8;
+                  }
+                `]"
+              >
+                <swiper-slide v-for="media in swiperContent">
+                  <figure>
+                    <img :src="media.src" :alt="media.alt" class="popup-img">
+                    <figcaption>{{ media.alt }}</figcaption>
+                  </figure>
+                </swiper-slide>
+              </swiper-container>
+            </div>
+          </div>
+          <button @click="close" class="close-button">
+              <div></div>
+              <div></div>
+          </button>
+        </div>
+    </transition>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+const props = defineProps({
+  isOpen: Boolean,
+  image: {
+    type: Object,
+    required: true,
+  },
+  swiperContent: {
+    type: Array,
+    required: true,
+  }
+});
+
+const currentImgIndex = ref(0);
+
+watch(
+  () => props.isOpen,
+  () => {
+  if (props.isOpen && props.swiperContent.length) {
+    for (let i = 0; i < props.swiperContent.length; i++) {
+      const currentImgSrc = props.image.src;
+      const truncatedSrc = currentImgSrc.substring(currentImgSrc.indexOf("/sites"));
+      if (props.swiperContent[i].src === truncatedSrc) {
+        currentImgIndex.value = i;
+        break;     
+      }
+    }
+  }
+})
+
+const emit = defineEmits(['close']);
+
+const close = () => {
+  emit('close');
+};
+</script>
+
+<style scoped>
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+</style>
\ No newline at end of file
diff --git a/web/themes/custom/caravane/assets/js/vuejs/Modale.vue b/web/themes/custom/caravane/assets/js/vuejs/Modale.vue
index 5d77475..31fce36 100644
--- a/web/themes/custom/caravane/assets/js/vuejs/Modale.vue
+++ b/web/themes/custom/caravane/assets/js/vuejs/Modale.vue
@@ -1,43 +1,129 @@
 <template>
   <Transition>
     <div v-if="isEtapeValid">
-      <header>
-        <div class="cover">
-          <img :src="etape.vignette.url" :alt="etape.vignette.alt">
-        </div>
-        <div class="cartouche" :style="{ backgroundColor: etape.couleur }">
-          <p>Étape n°{{etape.etape_number}}</p>
-          <p>Du {{etape.dates.start.d}} {{etape.dates.start.m}} au {{ etape.dates.end.d }} {{ etape.dates.end.m }} {{ etape.dates.end.y }}</p>
-        </div>
-        <div class="brand-pattern" :style="{ backgroundColor: etape.couleur }">
-          <div class="pattern"></div>
-        </div>
-        <div class="locality">
-          <div class="top-triangle"></div>
-          <div class="locality-title">
-            <h1>{{etape.title}} <em>({{ etape.adresse.postal_code }})</em></h1>
+      <div class="content-wrapper">
+        <header>
+          <div class="cover">
+            <img :src="etape.vignette.url" :alt="etape.vignette.alt">
           </div>
-        </div>
-      </header>
-      <main>
-        <div v-for="partie in etape.parties" class="partie">
-          <div class="partie-title">
-            <h3>
-              <div class="underline" :style="{ backgroundColor: etape.couleur }"></div>
-              <p v-html="partie.title"></p>
-            </h3>
+          <div class="cartouche" :style="{ backgroundColor: etape.couleur }">
+            <p>Étape n°{{etape.etape_number}}</p>
+            <p>Du {{etape.dates.start.d}} {{etape.dates.start.m}} au {{ etape.dates.end.d }} {{ etape.dates.end.m }} {{ etape.dates.end.y }}</p>
           </div>
-          <p v-html="partie.text"></p>
-        </div>
-      </main>
+          <div class="brand-pattern" :style="{ backgroundColor: etape.couleur }">
+            <div class="pattern"></div>
+          </div>
+          <div class="locality">
+            <div class="top-triangle"></div>
+            <div class="locality-title">
+              <h1>{{etape.title}} <em>({{ etape.adresse.postal_code }})</em></h1>
+            </div>
+          </div>
+        </header>
+        <main>
+          <div v-if="etape.sensibleMap" id="sensible-map">
+            <figure>
+              <vue-image-zoomer
+                :regular="etape.sensibleMap.url"
+                :zoom="etape.sensibleMap.url"
+                :zoom-amount="3.5"
+                alt="Carte sensible du territoire"
+                hover-message="Survolez pour zoomer dans la carte"
+              />
+              <figcaption class="caption">{{ etape.sensibleMap.alt }}</figcaption>
+            </figure>
+          </div>
+          <div v-for="partie in etape.parties" class="partie" @click="handleImageClick">
+
+            <div v-if="Object.keys(partie.chiffresCles).length" class="chiffres-cles">
+              <h3>
+                <div class="underline" :style="{ backgroundColor: etape.couleur }"></div>
+                <p>Chiffres clés</p>
+              </h3>
+              <div>
+                <div v-for="chiffre in partie.chiffresCles">
+                  <div v-html="chiffre.split('<br />')[0]" class="chiffre" :style="{ borderLeft: `solid 10px ${etape.couleur}` }"></div>
+                  <p v-html="chiffre.split('<br />')[1]" class="chiffre-caption" :style="{ borderLeft: `solid 10px ${etape.couleur}` }"></p>
+                </div>
+              </div>
+            </div>
+            <div class="partie-title">
+              <h3>
+                <div class="underline" :style="{ backgroundColor: etape.couleur }"></div>
+                <p v-html="partie.title"></p>
+              </h3>
+            </div>
+            <div v-html="partie.text" v-alt class="partie-content"></div>
+            <swiper-container
+              v-if="partie.diaporama.length"
+              class="diaporama"
+              :slidesPerView="1.5"
+              :centeredSlides="true"
+              :loop="true"
+              :navigation="true"
+              :pagination="true"
+              :injectStyles="[`.swiper-button-next, .swiper-button-prev { z-index: 11; }`]"
+            >
+              <swiper-slide v-for="image in partie.diaporama" style="width: 100%">
+                <figure>
+                  <img :src="image.url" :alt="image.alt">
+                  <figcaption class="caption">{{ image.alt }}</figcaption>
+                </figure>
+              </swiper-slide>
+            </swiper-container>
+            <div v-if="partie.videos.length" class="videos">
+              <iframe v-for="video in partie.videos" :src="video" frameborder="0" width="100%" style="aspect-ratio: 16 / 9;"></iframe>
+            </div>
+          </div>
+
+          <div class="brand-pattern pattern-bottom" :style="{ backgroundColor: etape.couleur }">
+            <div class="pattern"></div>
+          </div>
+
+          <div v-if="etape.previous || etape.next" class="related-etape-links">
+            <div v-if="etape.previous" class="card previous" @click="store.fetchEtapeData(etape.previous.nid)">
+              <div class="icon">
+                <div :style="{ backgroundColor: etape.previous.couleur }"></div>
+                <div :style="{ backgroundColor: etape.previous.couleur }"></div>
+                <div :style="{ backgroundColor: etape.previous.couleur }"></div>
+              </div>
+              <div class="card-content">
+                <div class="infos">
+                  <div class="titre">{{ etape.previous.title }} <span>({{ etape.previous.postalCode }})</span></div>
+                  <div class="date">Du {{ etape.previous.dates.start.d }} {{ etape.previous.dates.start.m }}<br>au {{ etape.previous.dates.end.d }} {{ etape.previous.dates.end.m }} {{ etape.previous.dates.end.y }}</div>
+                </div>
+                <div class="vignette">
+                  <img :src="etape.previous.vignette.url" :alt="etape.previous.vignette.alt">
+                </div>
+              </div>
+            </div>
+            <div v-if="etape.next" class="card next" @click="store.fetchEtapeData(etape.next.nid)">
+              <div class="icon">
+                <div :style="{ backgroundColor: etape.next.couleur }"></div>
+                <div :style="{ backgroundColor: etape.next.couleur }"></div>
+                <div :style="{ backgroundColor: etape.next.couleur }"></div>
+              </div>
+              <div class="card-content">
+                <div class="infos">
+                  <div class="titre">{{ etape.next.title }} <span>({{ etape.next.postalCode }})</span></div>
+                  <div class="date">Du {{ etape.next.dates.start.d }} {{ etape.next.dates.start.m }}<br>au {{ etape.next.dates.end.d }} {{ etape.next.dates.end.m }} {{ etape.next.dates.end.y }}</div>
+                </div>
+                <div class="vignette">
+                  <img :src="etape.next.vignette.url" :alt="etape.next.vignette.alt">
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
 
   <!--     
       <div v-if="loading">Loading...</div>
       <div v-if="error">{{ error }}</div>
       {{etape.adresse.locality}}
    -->
-  
-      <div><pre>{{href}}</pre></div>
+    
+<!--       <div><pre>{{href}}</pre></div>
   
       
       <div><pre><b>GEOFIELD</b>{{etape.geofield}}</pre></div>
@@ -46,12 +132,12 @@
       <div><pre><b>PARTIES</b>{{etape.parties}}</pre></div>
       <div><pre><b>SAISON</b>{{etape.saison}}</pre></div>
       <div><pre><b>THEMATIQUES</b>{{etape.thematiques}}</pre></div>
-  
-  
-      <div>
-      </div>
+ -->  
     </div>
   </Transition>
+
+  <ImageModale :isOpen="isModaleOpen" :image="currentImage" :swiperContent="swiperPopupContent" @close="closeImageModale" />
+
   <Transition>
     <div v-if="isPageValid">
       <header>
@@ -65,10 +151,19 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, onMounted } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useContentStore } from '../stores/content';
 import { useRoute, useRouter } from 'vue-router';
+import ImageModale from './ImageModale.vue';
+
+import { VueImageZoomer } from 'vue-image-zoomer'
+import 'vue-image-zoomer/dist/style.css';
+
+// web element usage bc its 2024
+// (idk how it works but it does)
+import { register } from 'swiper/element/bundle';
+register();
 
 const router = useRouter();
 const store = useContentStore();
@@ -76,60 +171,126 @@ const route = useRoute();
 
 const { loading, error, href, etape, page } = storeToRefs(store);
 
-watch(() => route.params.id, (newId) => {
-  if (!newId) {
-    store.emptyAll();
+watch(
+  () => route.params.id,
+  (newId) => {
+    if (!newId) {
+      store.emptyAll();
     } else {
       store.fetchEtapeData(newId);
-    if (!etape.value.data) {
-      store.fetchStaticData(newId);
+      if (!etape.value?.data) {
+        store.fetchStaticData(newId);
+      }
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  () => etape.value.couleur,
+  (newColor) => {
+    if (newColor) {
+      document.documentElement.style.setProperty('--etape-couleur', etape.value.couleur);
     }
-    window.scrollTo({top: 0, behavior: 'smooth'});
   }
-});
+);
 
-watch(() => href.value, (newHref) => {
-  const relativePath = newHref.split('.fr')[1];
-  if (relativePath && (relativePath !== '' || relativePath !== '/')) {
-    router.push(relativePath);
+watch(
+  () => href.value,
+  (newHref) => {
+    const relativePath = newHref.split('.fr')[1];
+    if (relativePath && relativePath !== '' && relativePath !== '/') {
+      router.push(relativePath);
+    }
   }
-});
+);
 
-const isEtapeValid = computed(() => {
-  return etape.value && !isObjectEmpty(etape.value);
-});
+const isObjectEmpty = (obj) => {
+  if (!obj || typeof obj !== 'object') return true;
 
-const isPageValid = computed(() => {
-  return page.value && !isObjectEmpty(page.value);
-});
+  return !Object.keys(obj).some((key) => {
+    const value = obj[key];
+    if (Array.isArray(value)) return value.length > 0;
+    if (typeof value === 'object') return !isObjectEmpty(value);
+    return value !== null && value !== undefined && value !== '';
+  });
+};
 
-// Utility function to check if an object and its children are empty
-function isObjectEmpty(obj) {
-  if (obj === null || obj === undefined || typeof obj !== 'object') {
-    return true;
+const isEtapeValid = computed(() => etape.value && !isObjectEmpty(etape.value));
+const isPageValid = computed(() => page.value && !isObjectEmpty(page.value));
+
+const vAlt = {
+  mounted : (el) => {
+    const images = el.querySelectorAll('img');
+    images.forEach((img) => {
+      const altText = img.getAttribute('alt');
+      if (altText) {
+        const paragraph = document.createElement('p');
+        paragraph.classList.add('caption');
+        paragraph.textContent = altText;
+        img.after(paragraph);
+      }
+    });
   }
-  for (const key in obj) {
-    if (Object.hasOwnProperty.call(obj, key)) {
-      const value = obj[key];
-      if (Array.isArray(value)) {
-        if (value.length > 0) {
-          return false;
-        }
-      } else if (typeof value === 'object') {
-        if (!isObjectEmpty(value)) {
-          return false;
-        }
-      } else if (value !== null && value !== undefined && value !== '') {
-        return false;
+};
+
+const isModaleOpen = ref(false);
+const currentImage = ref({ src: '', alt: '' });
+const swiperPopupContent = ref([]);
+
+const body = document.querySelector('body');
+const hamburger = document.querySelector('#hamburger');
+const menu = document.querySelector('#menu');
+
+const openImageModale = (src, alt, swiperMedia) => {
+  currentImage.value = { src, alt };
+  swiperPopupContent.value = swiperMedia;  
+  isModaleOpen.value = true;
+  body.classList.add('no-scroll');
+  hamburger.style.opacity = 0;
+  menu.style.display = "none";
+};
+
+const closeImageModale = () => {
+  isModaleOpen.value = false;
+  swiperPopupContent.value = [];
+  body.classList.remove('no-scroll');
+  menu.style.display = "flex";
+  setTimeout(() => {
+    hamburger.style.opacity = 1;
+  }, 300);
+};
+
+const handleImageClick = (event) => {
+  const img = event.target;
+  if (img.tagName === 'IMG') {
+    const isSwiper = img.parentElement.parentElement.tagName === 'SWIPER-SLIDE';
+    let swiperMedia = [];
+    if (isSwiper) {
+      const swiperEl = img.parentElement.parentElement.parentElement;
+      for (let swiperSlide of swiperEl.children) {
+        swiperMedia.push({src: swiperSlide.querySelector('img').getAttribute('src'), alt: swiperSlide.querySelector('figcaption')?.textContent});
       }
     }
+    openImageModale(img.src, img.alt, swiperMedia);
   }
-  return true;
-}
+};
 
-</script>
+/*     
+      return {
+      loading,
+      error,
+      etape,
+      page,
+      isEtapeValid,
+      isPageValid
+    };
+ */
+ </script>
 
-<style>
+
+<style scss>
 .v-enter-active,
 .v-leave-active {
   transition: all 0.3s ease;
@@ -145,4 +306,23 @@ function isObjectEmpty(obj) {
   transform: translateY(0%);
   opacity: 1;
 }
+
+:root {
+  --swiper-navigation-color: #1a1918; /* cf main.scss */
+  --swiper-pagination-color: var(--etape-couleur);
+  --swiper-navigation-top-offset: calc(100% - 1.5rem);
+  --swiper-navigation-sides-offset: 5vw; /* cf main.scss */
+}
+
+.diaporama {
+  --swiper-navigation-size: 1.5rem;
+}
+
+swiper-slide img:not(.popup-img) { /* cf main.scss */
+  cursor: pointer;
+  transition: transform 0.3s ease-out;
+  &:hover {
+    transform: scale(1.01);
+  }
+}
 </style>
\ No newline at end of file
diff --git a/web/themes/custom/caravane/assets/scss/main.scss b/web/themes/custom/caravane/assets/scss/main.scss
index e69dc58..1ddaea1 100644
--- a/web/themes/custom/caravane/assets/scss/main.scss
+++ b/web/themes/custom/caravane/assets/scss/main.scss
@@ -4,6 +4,8 @@ $body-margin-x: 30px;
 $body-margin-y: 5px;
 $body-margin-bottom: 4vh;
 
+$modale-x-padding: 5vw;
+
 $sm-font-size: 0.8rem;
 $m-font-size: 1.4rem;
 $l-font-size: 1.8rem;
@@ -23,6 +25,9 @@ body{
   margin: 0;
   padding: 0;
   overflow-y: scroll;
+  &.no-scroll {
+    overflow-y: hidden;
+  }
   .layout-container {
     > header {
       z-index: 2;
@@ -127,7 +132,7 @@ body{
               justify-content: center;
               align-items: center;
               width: 2.4rem;
-              transition: transform 0.3s ease-out;
+              transition: transform 0.3s ease-out, opacity 0.3s ease-out;
               > div {
                 width: 100%;
                 height: 3px;
@@ -469,15 +474,13 @@ body{
                         display: block;
                         width: 20px;
                         height: 10px;
+                        &:first-of-type, &:last-of-type {
+                          height: 8px;
+                          clip-path: polygon(0 0, 100% 0, 50% 100%);
+                        }
+                        &:first-of-type {
+                          transform: rotate(180deg);
                         }
-                      > div:first-of-type {
-                        height: 8px;
-                        clip-path: polygon(0 0, 100% 0, 50% 100%);
-                        transform: rotate(180deg);
-                      }
-                      > div:last-of-type {
-                        height: 8px;
-                        clip-path: polygon(0 0, 100% 0, 50% 100%);
                       }
                     }
                   }
@@ -503,127 +506,410 @@ body{
           }
         }
       }
-      > #content-modale > div {
-        z-index: 2;
-        position: relative;
-        top: 15vh;
-        left: 25vw;
-        width: 50vw;
-        background-color: white;
-        img {
-          width: 100%;
-          height: auto;
-          object-fit: cover;
-        }
-        > div {
-          width: 100%;
-          overflow: hidden;
-        }
-        > header {
-          margin-bottom: 3rem;
-          > .cover {
-            max-height: 60vh;
-            display: flex;
-            justify-content: center;
-            overflow: hidden;
+      > #content-modale {
+        > div:not(.image-viewer-wrapper, .image-modale) {
+          padding-bottom: 40vh;
+          background-color: red;
+          > .content-wrapper {
+            left: 25vw;
+            width: 50vw;
+            top: 15vh;
+            z-index: 2;
             position: relative;
-            z-index: 0;
-          }
-          > .cartouche {
-            position: absolute;
-            top: 2rem;
-            padding: 1rem 1.5rem;
-            background-color: $brand-color;
-            z-index: 1;
-            > p {
-              margin-block-start: 0;
-              margin-block-end: 0;
-            }
-            > p:last-of-type {
-              font-weight: bold;
-            }
-          }
-          > .brand-pattern {
-            display: block;
-            width: 100%;
-            height: 120px;
-            > .pattern {
-              display: block;
+            background-color: white;
+            img {
               width: 100%;
-              height: 100%;
-              background-image: url(/themes/custom/caravane/assets/imgs/motif-caravane-invert-tile.png);
-              background-size: 300px;
-              background-size: repeat;
+              height: auto;
+              object-fit: cover;
             }
-          }
-          > .locality {
-            position: relative;
-            z-index: 1;
-            width: 50%;
-            margin-left: 25%;
-            margin-top: -245px;
-            > .top-triangle {
-              display: block;
+            > div {
               width: 100%;
-              height: 100px;
-              display: flex;
-              clip-path: polygon(-1% 100%, 50% 0, 101% 100%);
-              background-color: white;
-              margin-bottom: -1px;
+              overflow: hidden;
             }
-            > .locality-title {
-              min-height: 115px;
-              display: block;
-              background-color: white;
-              padding: 1rem 2rem;
-              display: flex;
-              align-items: center;
-              > h1 {
+            > header {
+              // margin-bottom: 3rem;
+              > .cover {
+                max-height: 60vh;
+                display: flex;
+                justify-content: center;
+                overflow: hidden;
+                position: relative;
+                z-index: 0;
+              }
+              > .cartouche {
+                position: absolute;
+                top: 2rem;
+                padding: 1rem 1.5rem;
+                background-color: $brand-color;
+                z-index: 1;
+                > p {
+                  margin-block-start: 0;
+                  margin-block-end: 0;
+                }
+                > p:last-of-type {
+                  font-weight: bold;
+                }
+              }
+              > .locality {
+                position: relative;
+                z-index: 1;
+                width: 50%;
+                margin-left: 25%;
+                margin-top: -245px;
+                > .top-triangle {
+                  display: block;
+                  width: 100%;
+                  height: 100px;
+                  display: flex;
+                  clip-path: polygon(-1% 100%, 50% 0, 101% 100%);
+                  background-color: white;
+                  margin-bottom: -1px;
+                }
+                > .locality-title {
+                  min-height: 115px;
+                  display: block;
+                  background-color: white;
+                  padding: 1rem 2rem;
+                  display: flex;
+                  align-items: center;
+                  > h1 {
+                    width: 100%;
+                    font-size: $xl-font-size;
+                    margin-block-start: 0;
+                    margin-block-end: 0;
+                    font-family: 'Joost', sans-serif;
+                    text-align: center;
+                    > em {
+                      font-style: normal;
+                      font-weight: lighter;
+                    }
+                  }
+                }
+              }
+            }
+            > main {
+              width: 100%;
+              padding: 0 $modale-x-padding;
+              box-sizing: border-box;
+              > #sensible-map {
+                width: calc(100% + $modale-x-padding);
+                margin-left: calc(($modale-x-padding / 2) * -1);
+                margin-top: calc($modale-x-padding / 2);
+                > figure {
+                  margin: 0;
+                  .vh--message {
+                    font-size: $sm-font-size;
+                    top: 1rem;
+                    left: 1rem;
+                    bottom: unset;
+                    background-color: rgba(255, 255, 255, 0.6);
+                    color: $main-color-light;
+                  }
+                  > figcaption {
+                    margin-left: calc($modale-x-padding / 2);
+                  }
+                }
+              }
+              > .partie {
                 width: 100%;
-                font-size: $xl-font-size;
-                margin-block-start: 0;
-                margin-block-end: 0;
-                font-family: 'Joost', sans-serif;
-                text-align: center;
-                > em {
-                  font-style: normal;
-                  font-weight: lighter;
+                display: inline-block;
+                > .partie-title,
+                > .chiffres-cles {
+                  > h3 {
+                    position: relative;
+                    display: inline-block;
+                    > p {
+                      display: inline-block;
+                      font-size: $l-font-size;
+                      font-family: 'Joost', sans-serif;
+                      margin: 0;
+                      z-index: 1;
+                      position: relative;
+                      padding: 0 0.5rem;
+                    }
+                    > .underline {
+                      z-index: 0;
+                      left: 0;
+                      top: 1.4rem;
+                      position: absolute;
+                      width: 100%;
+                      display: inline-block;
+                      height: 0.8rem;
+                    }
+                  }
+                }
+                > .chiffres-cles {
+                  > div {
+                    display: grid;
+                    gap: 2rem;
+                    grid-template-columns: 1fr 1fr 1fr;
+                    align-content: flex-start;
+                    margin: 2rem 0;
+                    > div {
+                      display: flex;
+                      flex-direction: column;
+                      align-items: flex-start;
+                      justify-content: flex-start;
+                      > .chiffre {
+                        padding-left: 1rem;
+                        font-size: $xl-font-size;
+                        font-weight: bold;
+                        font-family: 'Joost', sans-serif;
+                        margin: 0;
+                        > p {
+                          margin: 0;
+                        }
+                      }
+                      > .chiffre-caption {
+                        padding-left: 1rem;
+                        font-size: $sm-font-size;
+                        margin: 0;
+                      }
+                    }
+                  }
+                }
+                > .partie-content {
+                  img {
+                    margin-top: 2rem;
+                    cursor: pointer;
+                    transition: transform 0.3s ease-out;
+                    &:hover {
+                      transform: scale(1.01);
+                    }
+                  }
+                }
+                > .diaporama {
+                  width: calc(100% + 2 * #{$modale-x-padding});
+                  margin-top: 5rem;
+                  margin-bottom: 3rem;
+                  margin-left: -$modale-x-padding;
+                  figure {
+                    margin: 0 calc(#{$modale-x-padding} / 2);
+                    > img {
+                      width: 100%;
+                    }
+                    > figcaption {
+                      padding-bottom: 2rem;
+                    }
+                  }
+                }
+                > .videos iframe {
+                  margin: 2rem 0;
+                }
+              }
+              .caption {
+                font-size: $sm-font-size;
+                color: $main-color-light;
+                margin-top: 0.2rem;
+                margin-bottom: 1.8rem;
+              }
+            }
+            .brand-pattern {
+              display: block;
+              width: 100%;
+              height: 120px;
+              > .pattern {
+                display: block;
+                width: 100%;
+                height: 100%;
+                background-image: url(/themes/custom/caravane/assets/imgs/motif-caravane-invert-tile.png);
+                background-size: 300px;
+                background-size: repeat;
+              }
+            }
+            .pattern-bottom {
+              width: calc(100% + $modale-x-padding * 2);
+              margin-left: -$modale-x-padding;
+              height: 180px;
+              margin-top: -90px;
+            }
+            .related-etape-links {
+              position: absolute;
+              margin-top: -3rem;
+              width: calc(100% - $modale-x-padding);
+              margin-left: -$modale-x-padding;
+              padding: 0 calc($modale-x-padding / 2);
+              display: grid;
+              grid-template-columns: 1fr 1fr;
+              > .card {
+                width: 80%;
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+                transition: transform 0.3s ease-out;
+                &:hover {
+                  transform: scale(1.05);
+                }
+                &.next {
+                  grid-column: 2 / span 1;
+                  justify-self: flex-end;
+                }
+                > .icon {
+                  z-index: 2;
+                  width: 10px;
+                  height: 30px;
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: center;
+                  align-items: center;
+                  > div {
+                    display: block;
+                    width: 20px;
+                    height: 10px;
+                    &:first-of-type, &:last-of-type {
+                      height: 8px;
+                      clip-path: polygon(0 0, 100% 0, 50% 100%);
+                    }
+                    &:first-of-type {
+                      transform: rotate(180deg);
+                    }
+                  }
+                }
+                > .card-content {
+                  z-index: 1;
+                  background-color: white;
+                  display: flex;
+                  width: 100%;
+                  > .infos {
+                    width: 60%;
+                    text-align: center;
+                    > .titre {
+                      padding: 1rem 0.5rem;
+                      font-weight: bold;
+                      font-family: 'Joost', sans-serif;
+                      font-size: $m-font-size;
+                      > span {
+                        font-weight: lighter;
+                      }
+                    }
+                    > .date {
+                      font-size: $sm-font-size;
+                      font-family: 'Marianne', sans-serif;
+                      font-weight: lighter;
+                      padding-bottom: 1rem;
+                    }
+                  }
+                  > .vignette {
+                    width: 40%;
+                    position: relative;
+                    > img {
+                      top: 0;
+                      position: absolute;
+                      width: 100%;
+                      height: 100%;
+                      object-fit: cover;
+                    }
+                  }
                 }
               }
             }
           }
         }
-        > main {
+        > .image-viewer-wrapper {
+          backdrop-filter: blur(3px);
+          position: fixed;
+          top: 0;
+          left: 0;
           width: 100%;
-          padding: 0 5vw;
-          box-sizing: border-box;
-          > .partie {
-            display: inline-block;
-            > .partie-title {
-              > h3 {
-                position: relative;
-                display: inline-block;
-                > p {
-                  display: inline-block;
-                  font-size: $l-font-size;
-                  font-family: 'Joost', sans-serif;
-                  margin: 0;
-                  z-index: 1;
-                  position: relative;
-                  padding: 0 0.5rem;
-                }
-                > .underline {
-                  z-index: 0;
-                  left: 0;
-                  top: 1.4rem;
-                  position: absolute;
-                  width: 100%;
-                  display: inline-block;
-                  height: 1rem;
+          height: 100%;
+          z-index: 100;
+          > .img-modale {
+            background-color: rgba(0, 0, 0, 0.8);
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          > .simple-viewer {
+            > .img-wrapper {
+              max-width: 60%;
+              display: flex;
+              flex-direction: column;
+              > img {
+                width: 100%;
+              }
+              > figcaption {
+                margin: 0;
+                background-color: white;
+                font-size: $sm-font-size;
+                padding: 0.5rem 1.5rem;
+              }
+            }
+          }
+          > .swiper-viewer {
+            z-index: 1;
+            > .swiper-wrapper {
+              height: 100%;
+              width: 100%;
+              swiper-container {
+                height: 95%;
+                swiper-slide {
+                  display: flex;
+                  justify-content: center;
+                  align-items: flex-start;
+                  figure {
+                    margin-top: 3%;
+                    max-width: 60%;
+                    height: 80%;
+                    img {
+                      height: -webkit-fill-available;
+                      max-width: 100%;
+                      margin-bottom: -5px;
+                      object-fit: cover;
+                    }
+                    figcaption {
+                      margin: 0;
+                      background-color: white;
+                      font-size: $sm-font-size;
+                      padding: 0.5rem 1.5rem;
+                    }
+                  }
                 }
               }
             }
           }
+          > .close-button {
+            position: fixed;
+            top: 2rem;
+            right: $body-margin-x;
+            background-color: unset;
+            border: none;
+            display: block;
+            height: 3rem;
+            width: 3rem;
+            border-radius: 1.5rem;
+            cursor: pointer;
+            background-color: white;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 2;
+            > div {
+              display: block;
+              height: 2px;
+              border-radius: 4px;
+              width: 60%;
+              background-color: $main-color;
+              position: absolute;
+              transition: transform 0.3s ease;
+              &:nth-of-type(1) {
+                transform: rotate(45deg) scale(1);
+              }
+              &:nth-of-type(2) {
+                transform: rotate(-45deg) scale(1);
+              }
+            }
+            &:hover {
+              > div:nth-of-type(1) {
+                transform: rotate(45deg) scale(1.1);
+              }
+              > div:nth-of-type(2) {
+                transform: rotate(-45deg) scale(1.1);
+              }
+            }
+          }
         }
       }
     }
diff --git a/web/themes/custom/caravane/package-lock.json b/web/themes/custom/caravane/package-lock.json
index 4417e2b..9280b10 100644
--- a/web/themes/custom/caravane/package-lock.json
+++ b/web/themes/custom/caravane/package-lock.json
@@ -10,7 +10,9 @@
       "dependencies": {
         "axios": "^1.7.2",
         "pinia": "^2.1.7",
+        "swiper": "^11.1.14",
         "vue": "^3.4.29",
+        "vue-image-zoomer": "^2.4.1",
         "vue-router": "^4.4.3"
       },
       "devDependencies": {
@@ -19,11 +21,32 @@
         "vite": "^5.3.1"
       }
     },
-    "node_modules/@babel/parser": {
+    "node_modules/@babel/helper-string-parser": {
       "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.8.tgz",
-      "integrity": "sha512-WzfbgXOkGzZiXXCqk43kKwZjzwx4oulxZi3nq2TYL9mOjQv6kYwul9mz6ID36njuL7Xkp6nJEfok848Zj10j/w==",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
+      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
       "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
+      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.6.tgz",
+      "integrity": "sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.25.6"
+      },
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -31,6 +54,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/types": {
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.6.tgz",
+      "integrity": "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.24.8",
+        "@babel/helper-validator-identifier": "^7.24.7",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -429,9 +466,9 @@
       "license": "MIT"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.1.tgz",
-      "integrity": "sha512-lncuC4aHicncmbORnx+dUaAgzee9cm/PbIqgWz1PpXuwc+sa1Ct83tnqUDy/GFKleLiN7ZIeytM6KJ4cAn1SxA==",
+      "version": "4.22.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.5.tgz",
+      "integrity": "sha512-SU5cvamg0Eyu/F+kLeMXS7GoahL+OoizlclVFX3l5Ql6yNlywJJ0OuqTzUx0v+aHhPHEB/56CT06GQrRrGNYww==",
       "cpu": [
         "arm"
       ],
@@ -443,9 +480,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.18.1.tgz",
-      "integrity": "sha512-F/tkdw0WSs4ojqz5Ovrw5r9odqzFjb5LIgHdHZG65dFI1lWTWRVy32KDJLKRISHgJvqUeUhdIvy43fX41znyDg==",
+      "version": "4.22.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.5.tgz",
+      "integrity": "sha512-S4pit5BP6E5R5C8S6tgU/drvgjtYW76FBuG6+ibG3tMvlD1h9LHVF9KmlmaUBQ8Obou7hEyS+0w+IR/VtxwNMQ==",
       "cpu": [
         "arm64"
       ],
@@ -457,9 +494,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.1.tgz",
-      "integrity": "sha512-vk+ma8iC1ebje/ahpxpnrfVQJibTMyHdWpOGZ3JpQ7Mgn/3QNHmPq7YwjZbIE7km73dH5M1e6MRRsnEBW7v5CQ==",
+      "version": "4.22.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.5.tgz",
+      "integrity": "sha512-250ZGg4ipTL0TGvLlfACkIxS9+KLtIbn7BCZjsZj88zSg2Lvu3Xdw6dhAhfe/FjjXPVNCtcSp+WZjVsD3a/Zlw==",
       "cpu": [
         "arm64"
       ],
@@ -471,9 +508,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.18.1.tgz",
-      "integrity": "sha512-IgpzXKauRe1Tafcej9STjSSuG0Ghu/xGYH+qG6JwsAUxXrnkvNHcq/NL6nz1+jzvWAnQkuAJ4uIwGB48K9OCGA==",
+      "version": "4.22.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.5.tgz",
+      "integrity": "sha512-D8brJEFg5D+QxFcW6jYANu+Rr9SlKtTenmsX5hOSzNYVrK5oLAEMTUgKWYJP+wdKyCdeSwnapLsn+OVRFycuQg==",
       "cpu": [
         "x64"
       ],
@@ -485,9 +522,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.18.1.tgz",
-      "integrity": "sha512-P9bSiAUnSSM7EmyRK+e5wgpqai86QOSv8BwvkGjLwYuOpaeomiZWifEos517CwbG+aZl1T4clSE1YqqH2JRs+g==",
+      "version": "4.22.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.5.tgz",
+      "integrity": "sha512-PNqXYmdNFyWNg0ma5LdY8wP+eQfdvyaBAojAXgO7/gs0Q/6TQJVXAXe8gwW9URjbS0YAammur0fynYGiWsKlXw==",
       "cpu": [
         "arm"
       ],
@@ -499,9 +536,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.18.1.tgz",
-      "integrity": "sha512-5RnjpACoxtS+aWOI1dURKno11d7krfpGDEn19jI8BuWmSBbUC4ytIADfROM1FZrFhQPSoP+KEa3NlEScznBTyQ==",
+      "version": "4.22.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.5.tgz",
+      "integrity": "sha512-kSSCZOKz3HqlrEuwKd9TYv7vxPYD77vHSUvM2y0YaTGnFc8AdI5TTQRrM1yIp3tXCKrSL9A7JLoILjtad5t8pQ==",
       "cpu": [
         "arm"
       ],
@@ -513,9 +550,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.18.1.tgz",
-      "integrity": "sha512-8mwmGD668m8WaGbthrEYZ9CBmPug2QPGWxhJxh/vCgBjro5o96gL04WLlg5BA233OCWLqERy4YUzX3bJGXaJgQ==",
+      "version": "4.22.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.5.tgz",
+      "integrity": "sha512-oTXQeJHRbOnwRnRffb6bmqmUugz0glXaPyspp4gbQOPVApdpRrY/j7KP3lr7M8kTfQTyrBUzFjj5EuHAhqH4/w==",
       "cpu": [
         "arm64"
       ],
@@ -527,9 +564,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.18.1.tgz",
-      "integrity": "sha512-dJX9u4r4bqInMGOAQoGYdwDP8lQiisWb9et+T84l2WXk41yEej8v2iGKodmdKimT8cTAYt0jFb+UEBxnPkbXEQ==",
+      "version": "4.22.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.5.tgz",
+      "integrity": "sha512-qnOTIIs6tIGFKCHdhYitgC2XQ2X25InIbZFor5wh+mALH84qnFHvc+vmWUpyX97B0hNvwNUL4B+MB8vJvH65Fw==",
       "cpu": [
         "arm64"
       ],
@@ -541,9 +578,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.18.1.tgz",
-      "integrity": "sha512-V72cXdTl4EI0x6FNmho4D502sy7ed+LuVW6Ym8aI6DRQ9hQZdp5sj0a2usYOlqvFBNKQnLQGwmYnujo2HvjCxQ==",
+      "version": "4.22.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.5.tgz",
+      "integrity": "sha512-TMYu+DUdNlgBXING13rHSfUc3Ky5nLPbWs4bFnT+R6Vu3OvXkTkixvvBKk8uO4MT5Ab6lC3U7x8S8El2q5o56w==",
       "cpu": [
         "ppc64"
       ],
@@ -555,9 +592,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.18.1.tgz",
-      "integrity": "sha512-f+pJih7sxoKmbjghrM2RkWo2WHUW8UbfxIQiWo5yeCaCM0TveMEuAzKJte4QskBp1TIinpnRcxkquY+4WuY/tg==",
+      "version": "4.22.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.5.tgz",
+      "integrity": "sha512-PTQq1Kz22ZRvuhr3uURH+U/Q/a0pbxJoICGSprNLAoBEkyD3Sh9qP5I0Asn0y0wejXQBbsVMRZRxlbGFD9OK4A==",
       "cpu": [
         "riscv64"
       ],
@@ -569,9 +606,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.18.1.tgz",
-      "integrity": "sha512-qb1hMMT3Fr/Qz1OKovCuUM11MUNLUuHeBC2DPPAWUYYUAOFWaxInaTwTQmc7Fl5La7DShTEpmYwgdt2hG+4TEg==",
+      "version": "4.22.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.5.tgz",
+      "integrity": "sha512-bR5nCojtpuMss6TDEmf/jnBnzlo+6n1UhgwqUvRoe4VIotC7FG1IKkyJbwsT7JDsF2jxR+NTnuOwiGv0hLyDoQ==",
       "cpu": [
         "s390x"
       ],
@@ -583,9 +620,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.1.tgz",
-      "integrity": "sha512-7O5u/p6oKUFYjRbZkL2FLbwsyoJAjyeXHCU3O4ndvzg2OFO2GinFPSJFGbiwFDaCFc+k7gs9CF243PwdPQFh5g==",
+      "version": "4.22.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.5.tgz",
+      "integrity": "sha512-N0jPPhHjGShcB9/XXZQWuWBKZQnC1F36Ce3sDqWpujsGjDz/CQtOL9LgTrJ+rJC8MJeesMWrMWVLKKNR/tMOCA==",
       "cpu": [
         "x64"
       ],
@@ -597,9 +634,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.18.1.tgz",
-      "integrity": "sha512-pDLkYITdYrH/9Cv/Vlj8HppDuLMDUBmgsM0+N+xLtFd18aXgM9Nyqupb/Uw+HeidhfYg2lD6CXvz6CjoVOaKjQ==",
+      "version": "4.22.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.5.tgz",
+      "integrity": "sha512-uBa2e28ohzNNwjr6Uxm4XyaA1M/8aTgfF2T7UIlElLaeXkgpmIJ2EitVNQxjO9xLLLy60YqAgKn/AqSpCUkE9g==",
       "cpu": [
         "x64"
       ],
@@ -611,9 +648,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.18.1.tgz",
-      "integrity": "sha512-W2ZNI323O/8pJdBGil1oCauuCzmVd9lDmWBBqxYZcOqWD6aWqJtVBQ1dFrF4dYpZPks6F+xCZHfzG5hYlSHZ6g==",
+      "version": "4.22.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.5.tgz",
+      "integrity": "sha512-RXT8S1HP8AFN/Kr3tg4fuYrNxZ/pZf1HemC5Tsddc6HzgGnJm0+Lh5rAHJkDuW3StI0ynNXukidROMXYl6ew8w==",
       "cpu": [
         "arm64"
       ],
@@ -625,9 +662,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.18.1.tgz",
-      "integrity": "sha512-ELfEX1/+eGZYMaCIbK4jqLxO1gyTSOIlZr6pbC4SRYFaSIDVKOnZNMdoZ+ON0mrFDp4+H5MhwNC1H/AhE3zQLg==",
+      "version": "4.22.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.5.tgz",
+      "integrity": "sha512-ElTYOh50InL8kzyUD6XsnPit7jYCKrphmddKAe1/Ytt74apOxDq5YEcbsiKs0fR3vff3jEneMM+3I7jbqaMyBg==",
       "cpu": [
         "ia32"
       ],
@@ -639,9 +676,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.18.1.tgz",
-      "integrity": "sha512-yjk2MAkQmoaPYCSu35RLJ62+dz358nE83VfTePJRp8CG7aMg25mEJYpXFiD+NcevhX8LxD5OP5tktPXnXN7GDw==",
+      "version": "4.22.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.5.tgz",
+      "integrity": "sha512-+lvL/4mQxSV8MukpkKyyvfwhH266COcWlXE/1qxwN08ajovta3459zrjLghYMgDerlzNwLAcFpvU+WWE5y6nAQ==",
       "cpu": [
         "x64"
       ],
@@ -653,9 +690,9 @@
       ]
     },
     "node_modules/@types/estree": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
       "dev": true,
       "license": "MIT"
     },
@@ -674,53 +711,53 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.4.31",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.31.tgz",
-      "integrity": "sha512-skOiodXWTV3DxfDhB4rOf3OGalpITLlgCeOwb+Y9GJpfQ8ErigdBUHomBzvG78JoVE8MJoQsb+qhZiHfKeNeEg==",
+      "version": "3.5.10",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.10.tgz",
+      "integrity": "sha512-iXWlk+Cg/ag7gLvY0SfVucU8Kh2CjysYZjhhP70w9qI4MvSox4frrP+vDGvtQuzIcgD8+sxM6lZvCtdxGunTAA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.24.7",
-        "@vue/shared": "3.4.31",
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.10",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.4.31",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.31.tgz",
-      "integrity": "sha512-wK424WMXsG1IGMyDGyLqB+TbmEBFM78hIsOJ9QwUVLGrcSk0ak6zYty7Pj8ftm7nEtdU/DGQxAXp0/lM/2cEpQ==",
+      "version": "3.5.10",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.10.tgz",
+      "integrity": "sha512-DyxHC6qPcktwYGKOIy3XqnHRrrXyWR2u91AjP+nLkADko380srsC2DC3s7Y1Rk6YfOlxOlvEQKa9XXmLI+W4ZA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.4.31",
-        "@vue/shared": "3.4.31"
+        "@vue/compiler-core": "3.5.10",
+        "@vue/shared": "3.5.10"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.4.31",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.31.tgz",
-      "integrity": "sha512-einJxqEw8IIJxzmnxmJBuK2usI+lJonl53foq+9etB2HAzlPjAS/wa7r0uUpXw5ByX3/0uswVSrjNb17vJm1kQ==",
+      "version": "3.5.10",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.10.tgz",
+      "integrity": "sha512-to8E1BgpakV7224ZCm8gz1ZRSyjNCAWEplwFMWKlzCdP9DkMKhRRwt0WkCjY7jkzi/Vz3xgbpeig5Pnbly4Tow==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.24.7",
-        "@vue/compiler-core": "3.4.31",
-        "@vue/compiler-dom": "3.4.31",
-        "@vue/compiler-ssr": "3.4.31",
-        "@vue/shared": "3.4.31",
+        "@babel/parser": "^7.25.3",
+        "@vue/compiler-core": "3.5.10",
+        "@vue/compiler-dom": "3.5.10",
+        "@vue/compiler-ssr": "3.5.10",
+        "@vue/shared": "3.5.10",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.10",
-        "postcss": "^8.4.38",
+        "magic-string": "^0.30.11",
+        "postcss": "^8.4.47",
         "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.4.31",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.31.tgz",
-      "integrity": "sha512-RtefmITAje3fJ8FSg1gwgDhdKhZVntIVbwupdyZDSifZTRMiWxWehAOTCc8/KZDnBOcYQ4/9VWxsTbd3wT0hAA==",
+      "version": "3.5.10",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.10.tgz",
+      "integrity": "sha512-hxP4Y3KImqdtyUKXDRSxKSRkSm1H9fCvhojEYrnaoWhE4w/y8vwWhnosJoPPe2AXm5sU7CSbYYAgkt2ZPhDz+A==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.31",
-        "@vue/shared": "3.4.31"
+        "@vue/compiler-dom": "3.5.10",
+        "@vue/shared": "3.5.10"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -730,53 +767,53 @@
       "license": "MIT"
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.4.31",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.31.tgz",
-      "integrity": "sha512-VGkTani8SOoVkZNds1PfJ/T1SlAIOf8E58PGAhIOUDYPC4GAmFA2u/E14TDAFcf3vVDKunc4QqCe/SHr8xC65Q==",
+      "version": "3.5.10",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.10.tgz",
+      "integrity": "sha512-kW08v06F6xPSHhid9DJ9YjOGmwNDOsJJQk0ax21wKaUYzzuJGEuoKNU2Ujux8FLMrP7CFJJKsHhXN9l2WOVi2g==",
       "license": "MIT",
       "dependencies": {
-        "@vue/shared": "3.4.31"
+        "@vue/shared": "3.5.10"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.4.31",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.31.tgz",
-      "integrity": "sha512-LDkztxeUPazxG/p8c5JDDKPfkCDBkkiNLVNf7XZIUnJ+66GVGkP+TIh34+8LtPisZ+HMWl2zqhIw0xN5MwU1cw==",
+      "version": "3.5.10",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.10.tgz",
+      "integrity": "sha512-9Q86I5Qq3swSkFfzrZ+iqEy7Vla325M7S7xc1NwKnRm/qoi1Dauz0rT6mTMmscqx4qz0EDJ1wjB+A36k7rl8mA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.4.31",
-        "@vue/shared": "3.4.31"
+        "@vue/reactivity": "3.5.10",
+        "@vue/shared": "3.5.10"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.4.31",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.31.tgz",
-      "integrity": "sha512-2Auws3mB7+lHhTFCg8E9ZWopA6Q6L455EcU7bzcQ4x6Dn4cCPuqj6S2oBZgN2a8vJRS/LSYYxwFFq2Hlx3Fsaw==",
+      "version": "3.5.10",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.10.tgz",
+      "integrity": "sha512-t3x7ht5qF8ZRi1H4fZqFzyY2j+GTMTDxRheT+i8M9Ph0oepUxoadmbwlFwMoW7RYCpNQLpP2Yx3feKs+fyBdpA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.4.31",
-        "@vue/runtime-core": "3.4.31",
-        "@vue/shared": "3.4.31",
+        "@vue/reactivity": "3.5.10",
+        "@vue/runtime-core": "3.5.10",
+        "@vue/shared": "3.5.10",
         "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.4.31",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.31.tgz",
-      "integrity": "sha512-D5BLbdvrlR9PE3by9GaUp1gQXlCNadIZytMIb8H2h3FMWJd4oUfkUTEH2wAr3qxoRz25uxbTcbqd3WKlm9EHQA==",
+      "version": "3.5.10",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.10.tgz",
+      "integrity": "sha512-IVE97tt2kGKwHNq9yVO0xdh1IvYfZCShvDSy46JIh5OQxP1/EXSpoDqetVmyIzL7CYOWnnmMkVqd7YK2QSWkdw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.4.31",
-        "@vue/shared": "3.4.31"
+        "@vue/compiler-ssr": "3.5.10",
+        "@vue/shared": "3.5.10"
       },
       "peerDependencies": {
-        "vue": "3.4.31"
+        "vue": "3.5.10"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.4.31",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.31.tgz",
-      "integrity": "sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA==",
+      "version": "3.5.10",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.10.tgz",
+      "integrity": "sha512-VkkBhU97Ki+XJ0xvl4C9YJsIZ2uIlQ7HqPpZOS3m9VCvmROPaChZU6DexdMJqvz9tbgG+4EtFVrSuailUq5KGQ==",
       "license": "MIT"
     },
     "node_modules/anymatch": {
@@ -800,9 +837,9 @@
       "license": "MIT"
     },
     "node_modules/axios": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
-      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
@@ -1074,12 +1111,12 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.10",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
-      "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
+      "version": "0.30.11",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
+      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
+        "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
     "node_modules/mime-db": {
@@ -1132,9 +1169,9 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -1203,9 +1240,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.39",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
-      "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
+      "version": "8.4.47",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
+      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -1223,8 +1260,8 @@
       "license": "MIT",
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.0.1",
-        "source-map-js": "^1.2.0"
+        "picocolors": "^1.1.0",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -1250,13 +1287,13 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.1.tgz",
-      "integrity": "sha512-Elx2UT8lzxxOXMpy5HWQGZqkrQOtrVDDa/bm9l10+U4rQnVzbL/LgZ4NOM1MPIDyHk69W4InuYDF5dzRh4Kw1A==",
+      "version": "4.22.5",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.22.5.tgz",
+      "integrity": "sha512-WoinX7GeQOFMGznEcWA1WrTQCd/tpEbMkc3nuMs9BT0CPjMdSjPMTVClwWd4pgSQwJdP65SK9mTCNvItlr5o7w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/estree": "1.0.5"
+        "@types/estree": "1.0.6"
       },
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -1266,22 +1303,22 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.18.1",
-        "@rollup/rollup-android-arm64": "4.18.1",
-        "@rollup/rollup-darwin-arm64": "4.18.1",
-        "@rollup/rollup-darwin-x64": "4.18.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.18.1",
-        "@rollup/rollup-linux-arm-musleabihf": "4.18.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.18.1",
-        "@rollup/rollup-linux-arm64-musl": "4.18.1",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.18.1",
-        "@rollup/rollup-linux-riscv64-gnu": "4.18.1",
-        "@rollup/rollup-linux-s390x-gnu": "4.18.1",
-        "@rollup/rollup-linux-x64-gnu": "4.18.1",
-        "@rollup/rollup-linux-x64-musl": "4.18.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.18.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.18.1",
-        "@rollup/rollup-win32-x64-msvc": "4.18.1",
+        "@rollup/rollup-android-arm-eabi": "4.22.5",
+        "@rollup/rollup-android-arm64": "4.22.5",
+        "@rollup/rollup-darwin-arm64": "4.22.5",
+        "@rollup/rollup-darwin-x64": "4.22.5",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.22.5",
+        "@rollup/rollup-linux-arm-musleabihf": "4.22.5",
+        "@rollup/rollup-linux-arm64-gnu": "4.22.5",
+        "@rollup/rollup-linux-arm64-musl": "4.22.5",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.22.5",
+        "@rollup/rollup-linux-riscv64-gnu": "4.22.5",
+        "@rollup/rollup-linux-s390x-gnu": "4.22.5",
+        "@rollup/rollup-linux-x64-gnu": "4.22.5",
+        "@rollup/rollup-linux-x64-musl": "4.22.5",
+        "@rollup/rollup-win32-arm64-msvc": "4.22.5",
+        "@rollup/rollup-win32-ia32-msvc": "4.22.5",
+        "@rollup/rollup-win32-x64-msvc": "4.22.5",
         "fsevents": "~2.3.2"
       }
     },
@@ -1304,14 +1341,42 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.14",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.14.tgz",
+      "integrity": "sha512-VbQLQXC04io6AoAjIUWuZwW4MSYozkcP9KjLdrsG/00Q/yiwvhz9RQyt0nHXV10hi9NVnDNy1/wv7Dzq1lkOCQ==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -1326,15 +1391,15 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.3.tgz",
-      "integrity": "sha512-NPQdeCU0Dv2z5fu+ULotpuq5yfCS1BzKUIPhNbP3YBfAMGJXbt2nS+sbTFu+qchaqWTD+H3JK++nRwr6XIcp6A==",
+      "version": "5.4.8",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz",
+      "integrity": "sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.21.3",
-        "postcss": "^8.4.39",
-        "rollup": "^4.13.0"
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -1353,6 +1418,7 @@
         "less": "*",
         "lightningcss": "^1.21.0",
         "sass": "*",
+        "sass-embedded": "*",
         "stylus": "*",
         "sugarss": "*",
         "terser": "^5.4.0"
@@ -1370,6 +1436,9 @@
         "sass": {
           "optional": true
         },
+        "sass-embedded": {
+          "optional": true
+        },
         "stylus": {
           "optional": true
         },
@@ -1382,16 +1451,16 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.4.31",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.31.tgz",
-      "integrity": "sha512-njqRrOy7W3YLAlVqSKpBebtZpDVg21FPoaq1I7f/+qqBThK9ChAIjkRWgeP6Eat+8C+iia4P3OYqpATP21BCoQ==",
+      "version": "3.5.10",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.10.tgz",
+      "integrity": "sha512-Vy2kmJwHPlouC/tSnIgXVg03SG+9wSqT1xu1Vehc+ChsXsRd7jLkKgMltVEFOzUdBr3uFwBCG+41LJtfAcBRng==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.31",
-        "@vue/compiler-sfc": "3.4.31",
-        "@vue/runtime-dom": "3.4.31",
-        "@vue/server-renderer": "3.4.31",
-        "@vue/shared": "3.4.31"
+        "@vue/compiler-dom": "3.5.10",
+        "@vue/compiler-sfc": "3.5.10",
+        "@vue/runtime-dom": "3.5.10",
+        "@vue/server-renderer": "3.5.10",
+        "@vue/shared": "3.5.10"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -1402,6 +1471,15 @@
         }
       }
     },
+    "node_modules/vue-image-zoomer": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/vue-image-zoomer/-/vue-image-zoomer-2.4.1.tgz",
+      "integrity": "sha512-n0icSuYf51MgNakZ331j4pShIpgzVjSd25leVtiiMWEgwjNshDgAkvggfvj0slTD/CEqjNXuijZAN55me6CEWw==",
+      "license": "MIT",
+      "dependencies": {
+        "vue": "^3.2.25"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.3.tgz",
diff --git a/web/themes/custom/caravane/package.json b/web/themes/custom/caravane/package.json
index 30388b7..4cba72b 100644
--- a/web/themes/custom/caravane/package.json
+++ b/web/themes/custom/caravane/package.json
@@ -11,7 +11,9 @@
   "dependencies": {
     "axios": "^1.7.2",
     "pinia": "^2.1.7",
+    "swiper": "^11.1.14",
     "vue": "^3.4.29",
+    "vue-image-zoomer": "^2.4.1",
     "vue-router": "^4.4.3"
   },
   "devDependencies": {