contenu des étapes

composer.json

@@ -16,6 +16,7 @@
     ],
     "require": {
         "composer/installers": "^2.0",
+        "drupal/color_pickr": "^1.1",
         "drupal/config_rewrite": "^1.6",
         "drupal/core-composer-scaffold": "^10.2",
         "drupal/core-project-message": "^10.2",
@@ -24,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",

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": "b6ebb6bbd614bba5487d0d043fe1dbdd",
+    "content-hash": "ca842f57165ece6f809c97e1b33a8210",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -2504,6 +2504,50 @@
                 "source": "https://git.drupalcode.org/project/bulkdelete"
             }
         },
+        {
+            "name": "drupal/color_pickr",
+            "version": "1.1.2",
+            "source": {
+                "type": "git",
+                "url": "https://git.drupalcode.org/project/color_pickr.git",
+                "reference": "1.1.2"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://ftp.drupal.org/files/projects/color_pickr-1.1.2.zip",
+                "reference": "1.1.2",
+                "shasum": "3e7a797155709d5a52203daf4388e3eed0c187ca"
+            },
+            "require": {
+                "drupal/core": "^8 || ^9 || ^10"
+            },
+            "type": "drupal-module",
+            "extra": {
+                "drupal": {
+                    "version": "1.1.2",
+                    "datestamp": "1710084892",
+                    "security-coverage": {
+                        "status": "not-covered",
+                        "message": "Project has not opted into security advisory coverage!"
+                    }
+                }
+            },
+            "notification-url": "https://packages.drupal.org/8/downloads",
+            "license": [
+                "GPL-2.0-or-later"
+            ],
+            "authors": [
+                {
+                    "name": "sujan shrestha",
+                    "homepage": "https://www.drupal.org/user/3475737"
+                }
+            ],
+            "description": "Provides color pickr types, widgets, and formatters for drupal 9/10",
+            "homepage": "https://www.drupal.org/project/color_pickr",
+            "support": {
+                "source": "https://git.drupalcode.org/project/color_pickr"
+            }
+        },
         {
             "name": "drupal/config_devel",
             "version": "dev-1.x",
@@ -5387,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",

config/sync/block_content.type.logo_link.yml

@@ -4,5 +4,5 @@ status: true
 dependencies: {  }
 id: logo_link
 label: 'Logo link'
-revision: 0
+revision: false
 description: ''

config/sync/config_devel.settings.yml

@@ -1,5 +1,5 @@
 _core:
   default_config_hash: AF4cxceuiw6dhwOrF9ZgpyKC4xsWt4Yhvohb3WNgn8o
+langcode: fr
 auto_import: {  }
 auto_export: {  }
-langcode: fr

config/sync/core.entity_form_display.block_content.logo_link.default.yml

@@ -6,8 +6,10 @@ dependencies:
     - block_content.type.logo_link
     - field.field.block_content.logo_link.field_lien
     - field.field.block_content.logo_link.field_logo
+    - field.field.block_content.logo_link.field_losange_etape
     - image.style.thumbnail
   module:
+    - file
     - image
     - link
 id: block_content.logo_link.default
@@ -31,6 +33,13 @@ content:
       progress_indicator: throbber
       preview_image_style: thumbnail
     third_party_settings: {  }
+  field_losange_etape:
+    type: file_generic
+    weight: 28
+    region: content
+    settings:
+      progress_indicator: throbber
+    third_party_settings: {  }
   info:
     type: string_textfield
     weight: -5

config/sync/core.entity_form_display.node.etape.default.yml

@@ -5,6 +5,8 @@ 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
     - field.field.node.etape.field_geofield
@@ -17,6 +19,7 @@ dependencies:
   module:
     - address
     - autocomplete_deluxe
+    - color_pickr
     - datetime_range
     - field_group
     - geofield
@@ -37,7 +40,7 @@ third_party_settings:
       label: Details
       region: content
       parent_name: ''
-      weight: 7
+      weight: 8
       format_type: details_sidebar
       format_settings:
         classes: ''
@@ -55,7 +58,7 @@ mode: default
 content:
   field_adresse:
     type: address_default
-    weight: 4
+    weight: 0
     region: content
     settings: {  }
     third_party_settings: {  }
@@ -66,6 +69,22 @@ 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: 2
+    region: content
+    settings:
+      theme: classic
+      hide_description: false
+    third_party_settings: {  }
   field_dates:
     type: daterange_default
     weight: 14
@@ -74,7 +93,7 @@ content:
     third_party_settings: {  }
   field_galleries:
     type: entity_reference_autocomplete
-    weight: 6
+    weight: 7
     region: content
     settings:
       match_operator: CONTAINS
@@ -84,14 +103,14 @@ content:
     third_party_settings: {  }
   field_geofield:
     type: geofield_latlon
-    weight: 26
+    weight: 1
     region: content
     settings:
       html5_geolocation: false
     third_party_settings: {  }
   field_parties:
     type: paragraphs
-    weight: 5
+    weight: 6
     region: content
     settings:
       title: Paragraphe
@@ -145,7 +164,7 @@ content:
     third_party_settings: {  }
   field_vignette:
     type: image_image
-    weight: 3
+    weight: 4
     region: content
     settings:
       progress_indicator: throbber
@@ -173,7 +192,7 @@ content:
     third_party_settings: {  }
   title:
     type: string_textfield
-    weight: 0
+    weight: 3
     region: content
     settings:
       size: 60

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:
+  field_chiffres_cles:
-    type: image_image
+    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: {  }

config/sync/core.entity_view_display.block_content.logo_link.default.yml

@@ -6,8 +6,10 @@ dependencies:
     - block_content.type.logo_link
     - field.field.block_content.logo_link.field_lien
     - field.field.block_content.logo_link.field_logo
+    - field.field.block_content.logo_link.field_losange_etape
     - image.style.large
   module:
+    - file
     - image
     - linked_field
 id: block_content.logo_link.default
@@ -32,6 +34,14 @@ content:
         token: ''
     weight: 0
     region: content
+  field_losange_etape:
+    type: file_default
+    label: above
+    settings:
+      use_description_as_link_text: true
+    third_party_settings: {  }
+    weight: 1
+    region: content
 hidden:
   field_lien: true
   langcode: true

config/sync/core.entity_view_display.node.etape.default.yml

@@ -5,6 +5,8 @@ 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
     - field.field.node.etape.field_geofield
@@ -15,6 +17,7 @@ dependencies:
     - node.type.etape
   module:
     - address
+    - color_pickr
     - date_range_formatter
     - entity_reference_revisions
     - image
@@ -40,6 +43,24 @@ 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
+    settings: {  }
+    third_party_settings: {  }
+    weight: 9
+    region: content
   field_dates:
     type: date_range_without_time
     label: visually_hidden

config/sync/core.entity_view_display.node.etape.teaser.yml

@@ -6,6 +6,8 @@ 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
     - field.field.node.etape.field_geofield
@@ -29,6 +31,8 @@ content:
 hidden:
   field_adresse: true
   field_arret_numero: true
+  field_carte_sensible: true
+  field_couleur: true
   field_dates: true
   field_galleries: true
   field_geofield: true

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

config/sync/core.extension.yml

@@ -7,6 +7,7 @@ module:
   admin_toolbar: 0
   admin_toolbar_links_access_filter: 0
   advanced_text_formatter: 0
+  alter_routing: 0
   audiofield: 0
   autocomplete_deluxe: 0
   ban: 0
@@ -17,6 +18,7 @@ module:
   breakpoint: 0
   bulkdelete: 0
   ckeditor5: 0
+  color_pickr: 0
   config: 0
   config_devel: 0
   config_filter: 0
@@ -34,6 +36,7 @@ module:
   ctools: 0
   ctools_block: 0
   ctools_views: 0
+  custom_content: 0
   date_range_formatter: 0
   datetime: 0
   datetime_range: 0
@@ -65,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

config/sync/devel.toolbar.settings.yml

@@ -1,8 +1,8 @@
 _core:
   default_config_hash: IDzCy0l7vH5sENShziSE_TwGo7oDfS1yB4c26KU6WnE
+langcode: fr
 toolbar_items:
   - devel.cache_clear
   - devel.phpinfo
   - devel.run_cron
   - devel.theme_registry
-langcode: fr

config/sync/editor.editor.wysiwyg.yml

@@ -38,7 +38,7 @@ image_upload:
   status: true
   scheme: public
   directory: inline-images
-  max_size: ''
+  max_size: null
   max_dimensions:
-    width: 0
+    width: null
-    height: 0
+    height: null

config/sync/email_registration.settings.yml

@@ -1,4 +1,4 @@
 _core:
   default_config_hash: k024s6lEcCjGqAq_82KNi-RRCCc37Jxo5frFNChAqao
-login_with_username: false
 langcode: fr
+login_with_username: false

config/sync/field.field.block_content.logo_link.field_losange_etape.yml

@@ -0,0 +1,27 @@
+uuid: 94631641-f244-46e7-8d50-57f3b06307a4
+langcode: fr
+status: true
+dependencies:
+  config:
+    - block_content.type.logo_link
+    - field.storage.block_content.field_losange_etape
+  module:
+    - file
+id: block_content.logo_link.field_losange_etape
+field_name: field_losange_etape
+entity_type: block_content
+bundle: logo_link
+label: 'losange étape'
+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: svg
+  max_filesize: ''
+  description_field: false
+field_type: file

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

config/sync/field.field.node.etape.field_couleur.yml

@@ -0,0 +1,21 @@
+uuid: 00afcd92-55e1-4b1f-be01-29629d7650dc
+langcode: fr
+status: true
+dependencies:
+  config:
+    - field.storage.node.field_couleur
+    - node.type.etape
+  module:
+    - color_pickr
+id: node.etape.field_couleur
+field_name: field_couleur
+entity_type: node
+bundle: etape
+label: Couleur
+description: ''
+required: true
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings: {  }
+field_type: color_pickr_code

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

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
+id: paragraph.parties.field_diaporama
-field_name: field_images
+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

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

config/sync/field.storage.block_content.field_losange_etape.yml

@@ -0,0 +1,23 @@
+uuid: 723c21f0-51f2-4f7b-a5a1-80948dbdb42d
+langcode: fr
+status: true
+dependencies:
+  module:
+    - block_content
+    - file
+id: block_content.field_losange_etape
+field_name: field_losange_etape
+entity_type: block_content
+type: file
+settings:
+  target_type: file
+  display_field: false
+  display_default: false
+  uri_scheme: public
+module: file
+locked: false
+cardinality: 1
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false

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

config/sync/field.storage.node.field_couleur.yml

@@ -0,0 +1,19 @@
+uuid: 9173617a-6409-4a9f-bc43-05fdbd168431
+langcode: fr
+status: true
+dependencies:
+  module:
+    - color_pickr
+    - node
+id: node.field_couleur
+field_name: field_couleur
+entity_type: node
+type: color_pickr_code
+settings: {  }
+module: color_pickr
+locked: false
+cardinality: 1
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false

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

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
+id: paragraph.field_diaporama
-field_name: field_images
+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

config/sync/field_ui.settings.yml

@@ -1,4 +1,4 @@
 _core:
   default_config_hash: zZhJs6wF6FMXjS8njswFvmbk2XEGcj0nLI-mZCfAoFs
-field_prefix: field_
 langcode: fr
+field_prefix: field_

config/sync/file.settings.yml

@@ -1,9 +1,9 @@
 _core:
   default_config_hash: _5293QOM-Perj4qDT33F4EmNlI9Ge0bNd_WYrZilDPA
+langcode: fr
 description:
   type: textfield
   length: 128
 icon:
   directory: core/modules/file/icons
-langcode: fr
 make_unused_managed_files_temporary: false

config/sync/filter.settings.yml

@@ -1,5 +1,5 @@
 _core:
   default_config_hash: lbxA85k_ynsRFrQ1JCNbgazSNG5GTs5aoOSL0W-UsvM
+langcode: fr
 fallback_format: plain_text
 always_show_fallback_choice: false
-langcode: fr

config/sync/honeypot.settings.yml

@@ -1,12 +1,13 @@
 _core:
   default_config_hash: MkRrI2YYk2oy2dBC48Sfb-SPN2Nf9xNMJedYjbsBUFw
+langcode: fr
+protect_all_forms: false
 unprotected_forms:
   - user_login_form
   - search_form
   - search_block_form
   - views_exposed_form
   - honeypot_settings_form
-protect_all_forms: false
 log: true
 element_name: url
 time_limit: 5
@@ -20,4 +21,3 @@ form_settings:
   node_fil_form: false
   node_page_form: false
   node_static_form: false
-langcode: fr

config/sync/image.settings.yml

@@ -1,6 +1,6 @@
 _core:
   default_config_hash: 7CnygMhc8yrEJGdPf_5QRmPsMvr4QoXlsmMo3te3nbw
+langcode: fr
 preview_image: core/modules/image/sample.png
 allow_insecure_derivatives: false
 suppress_itok_output: false
-langcode: fr

config/sync/maillog.settings.yml

@@ -1,6 +1,6 @@
 _core:
   default_config_hash: UA1LGT2916TE3VyHCdi_cD-GPCb6ilm9KluygCKnqOI
+langcode: fr
 send: false
 log: true
 verbose: true
-langcode: fr

config/sync/menu_ui.settings.yml

@@ -1,4 +1,4 @@
 _core:
   default_config_hash: ENUzSsLjtl0THWvptK2LZ7BJtRbb032hiy3VTvjR7Pw
-override_parent_selector: false
 langcode: fr
+override_parent_selector: false

config/sync/node.type.etape.yml

@@ -10,8 +10,8 @@ third_party_settings:
     parent: ''
 name: Étape
 type: etape
-description: ''
+description: null
-help: ''
+help: null
 new_revision: true
 preview_mode: 0
 display_submitted: false

config/sync/node.type.gallerie_photo.yml

@@ -10,8 +10,8 @@ third_party_settings:
     parent: ''
 name: 'Gallerie Photo'
 type: gallerie_photo
-description: ''
+description: null
-help: ''
+help: null
 new_revision: true
 preview_mode: 0
 display_submitted: false

config/sync/node.type.static.yml

@@ -13,7 +13,7 @@ _core:
 name: Static
 type: static
 description: 'Static Page'
-help: ''
+help: null
 new_revision: true
 preview_mode: 0
 display_submitted: false

config/sync/page_manager.page.node_view.yml

@@ -1,18 +0,0 @@
-uuid: b2417728-ce2c-4a17-b699-76bf65be60eb
-langcode: fr
-status: true
-dependencies: {  }
-_core:
-  default_config_hash: RCVWP-yHwxSNiQORMIabDgHMEVqOMW58w80BQgRFJ4k
-id: node_view
-label: 'Vue du nœud'
-description: 'When enabled, this overrides the default Drupal behavior for displaying nodes at <em>/node/{node}</em>. If you add variants, you may use selection criteria such as node type or language or user access to provide different views of nodes. If no variant is selected, the default Drupal node view will be used. This page only affects nodes viewed as pages, it will not affect nodes viewed in lists or at other locations.'
-use_admin_theme: false
-path: '/node/{node}'
-access_logic: and
-access_conditions: {  }
-parameters:
-  node:
-    machine_name: node
-    label: Nœud
-    type: 'entity:node'

config/sync/pathauto.settings.yml

@@ -1,5 +1,6 @@
 _core:
   default_config_hash: QDedIRjSYDH1ZiuQZ1LIkF9_wOwsokd_Cidr-mXA25E
+langcode: fr
 enabled_entity_types:
   - user
 punctuation:
@@ -44,7 +45,6 @@ reduce_ascii: false
 case: true
 ignore_words: 'a, an, as, at, before, but, by, for, from, is, in, into, like, of, off, on, onto, per, since, than, the, this, that, to, up, via, with'
 update_action: 2
-langcode: fr
 safe_tokens:
   - alias
   - alias

config/sync/pathologic.settings.yml

@@ -1,10 +1,10 @@
 _core:
   default_config_hash: 8GufBtaRPlip9zXBTr8vzOQOHnvtFyi4xLV7si356oM
 langcode: fr
+protocol_style: full
+local_paths: ''
 scheme_whitelist:
   - http
   - https
   - files
   - internal
-protocol_style: full
-local_paths: ''

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

config/sync/search_api.settings.yml

@@ -1,7 +1,7 @@
 _core:
   default_config_hash: '-ts6YP3HWiO8vbWrV8j1VxyAgtOrC6LJAT-lqw3GFpM'
+langcode: fr
 default_cron_limit: 50
 cron_worker_runtime: 15
 default_tracker: default
 tracking_page_size: 100
-langcode: fr

config/sync/search_api_db.settings.yml

@@ -1,4 +1,4 @@
 _core:
   default_config_hash: I7OvOT30AHPJTjtFh59agVjIr3wZ3fxIaTNefRF3-OQ
-autocomplete_max_occurrences: 0.9
 langcode: fr
+autocomplete_max_occurrences: 0.9

config/sync/system.cron.yml

@@ -1,7 +1,7 @@
 _core:
   default_config_hash: 0CLCLyauRdR7iXOd-8irNf7IzFv7I2DZKjqkIYwk2Yo
+langcode: fr
 threshold:
   requirements_warning: 172800
   requirements_error: 1209600
-langcode: fr
+logging: true
-logging: 1

config/sync/system.date.yml

@@ -1,12 +1,12 @@
 _core:
   default_config_hash: GQGMdkmApapP8hCC1EBknnYV7rkIOfLs62l0ucgCkns
+langcode: fr
+first_day: 1
 country:
   default: FR
-first_day: 1
 timezone:
   default: Europe/Paris
   user:
     configurable: false
-    warn: false
     default: 0
-langcode: fr
+    warn: false

config/sync/system.diff.yml

@@ -1,6 +1,6 @@
 _core:
   default_config_hash: 7LA2fD9dNbf3WkO63uWgUshS6L-gq2vg8e9-ZUE6dq0
+langcode: fr
 context:
   lines_leading: 2
   lines_trailing: 2
-langcode: fr

config/sync/system.file.yml

@@ -1,8 +1,8 @@
 _core:
   default_config_hash: iVCUEmCQO_uzT2ReHxUBVpC1NjO4I3wb8-zF1a4vyKI
+langcode: fr
 allow_insecure_uploads: false
 default_scheme: public
 path:
   temporary: /tmp
 temporary_maximum_age: 21600
-langcode: fr

config/sync/system.logging.yml

@@ -1,4 +1,4 @@
 _core:
   default_config_hash: vWBxifROGDjDcIRD_9OAODkutkPss2kpPrFdCMNZU9g
-error_level: hide
 langcode: fr
+error_level: hide

config/sync/system.performance.yml

@@ -1,5 +1,6 @@
 _core:
   default_config_hash: bUb8UUGCJnZ5aiph4NCUr8rnJay_s8sKGe2JK_7_mzg
+langcode: fr
 cache:
   page:
     max_age: 0
@@ -15,4 +16,3 @@ js:
   preprocess: false
   gzip: true
 stale_file_threshold: 2592000
-langcode: fr

config/sync/system.rss.yml

@@ -1,8 +1,8 @@
 _core:
   default_config_hash: S5uQkVe5wkt0j4O7sfCxOPi4fX8a0aUfJd9o2bNfImM
+langcode: fr
+items:
+  view_mode: rss
+  limit: 10
 channel:
   description: ''
-items:
-  limit: 10
-  view_mode: rss
-langcode: fr

config/sync/system.theme.global.yml

@@ -1,5 +1,6 @@
 _core:
   default_config_hash: jm-1OD80QyXhj_1lyq6IEPXdggFjmpWKrLGixMkbFcw
+langcode: fr
 favicon:
   mimetype: image/vnd.microsoft.icon
   path: ''
@@ -14,4 +15,3 @@ logo:
   path: ''
   url: ''
   use_default: true
-langcode: fr

config/sync/taxonomy.vocabulary.saisons.yml

@@ -4,5 +4,6 @@ status: true
 dependencies: {  }
 name: Saisons
 vid: saisons
-description: ''
+description: null
 weight: 0
+new_revision: false

config/sync/taxonomy.vocabulary.thematiques.yml

@@ -4,5 +4,6 @@ status: true
 dependencies: {  }
 name: Thématiques
 vid: thematiques
-description: ''
+description: null
 weight: 0
+new_revision: false

config/sync/text.settings.yml

@@ -1,4 +1,4 @@
 _core:
   default_config_hash: LZ0H1Rt9gdNtb0VBlKOx7XC9_u4i3nEAyuWmmkld8Ao
-default_summary_length: 600
 langcode: fr
+default_summary_length: 600

config/sync/update.settings.yml

@@ -1,5 +1,6 @@
 _core:
   default_config_hash: g88bppZh2Uimhd8nWIoRyNIqCPNQ-ywV5hXa_f4Av8k
+langcode: fr
 check:
   disabled_extensions: false
   interval_days: 1
@@ -11,4 +12,3 @@ notification:
   emails:
     - dev@figureslibres.io
   threshold: all
-langcode: fr

config/sync/views.settings.yml

@@ -2,7 +2,6 @@ _core:
   default_config_hash: RzCmzrx-T-Sy8JX5OmtGKV_V_MxRlrxRkrI9c9igTHI
 langcode: fr
 display_extenders: {  }
-skip_cache: false
 sql_signature: false
 ui:
   show:
@@ -47,3 +46,4 @@ field_rewrite_elements:
   ins: INS
   q: Q
   s: S
+skip_cache: false

config/sync/views.view.archive.yml

@@ -29,6 +29,7 @@ display:
         type: mini
         options:
           offset: 0
+          pagination_heading_level: h4
           items_per_page: 10
           total_pages: 0
           id: 0

config/sync/views.view.block_content.yml

@@ -273,6 +273,7 @@ display:
         type: mini
         options:
           offset: 0
+          pagination_heading_level: h4
           items_per_page: 50
           total_pages: null
           id: 0

config/sync/views.view.content.yml

@@ -249,6 +249,7 @@ display:
       pager:
         type: full
         options:
+          pagination_heading_level: h4
           items_per_page: 50
           tags:
             next: 'Next ›'

config/sync/views.view.content_translations.yml

@@ -403,6 +403,7 @@ display:
         type: full
         options:
           offset: 0
+          pagination_heading_level: h4
           items_per_page: 50
           total_pages: null
           id: 0

config/sync/views.view.etapes.yml

@@ -3,12 +3,14 @@ langcode: fr
 status: true
 dependencies:
   config:
+    - field.storage.node.field_couleur
     - field.storage.node.field_dates
     - field.storage.node.field_geofield
     - field.storage.node.field_vignette
     - image.style.medium
     - node.type.etape
   module:
+    - color_pickr
     - date_range_formatter
     - geofield
     - image
@@ -216,7 +218,7 @@ display:
             value: ''
             options: '{"maxWidth":"300","minWidth":"50","autoPan":true}'
             view_mode: teaser
-          leaflet_map: esri-world_imagery
+          leaflet_map: osm-outdoors
           height: '100'
           height_unit: vh
           hide_empty_map: false
@@ -234,19 +236,19 @@ display:
             options: '{"position":"topright","setView":"untilPanOrZoom","returnToPrevBounds":true,"keepCurrentZoomLevel":true,"strings":{"title":"Locate my position"}}'
             automatic: false
           map_position:
-            force: false
+            force: true
             center:
-              lat: 0.0
+              lat: 46.99
-              lon: 0.0
+              lon: 2.8
-            zoomControlPosition: topleft
+            zoomControlPosition: bottomleft
-            zoom: 5
+            zoom: 6
-            minZoom: 1
+            minZoom: 6
             maxZoom: 18
             zoomFiner: 0
           weight: ''
           icon:
-            iconType: marker
+            iconType: html
-            iconUrl: ''
+            iconUrl: /sites/default/files/2024-08/test.svg
             shadowUrl: ''
             className: ''
             iconSize:
@@ -264,8 +266,8 @@ display:
             popupAnchor:
               x: ''
               'y': ''
-            html: '<div></div>'
+            html: "<div></div>\r\n<div></div>\r\n<div></div>\r\n<div class=\"nid\">{{ nid }}</div>\r\n<div class=\"couleur\">{{ field_couleur }}</div>"
-            html_class: leaflet-map-divicon
+            html_class: 'leaflet-map-divicon '
             circle_marker_options: '{"radius":100,"color":"red","fillColor":"#f03","fillOpacity":0.5}'
           leaflet_markercluster:
             control: false
@@ -464,6 +466,186 @@ display:
           multi_type: separator
           separator: ', '
           field_api_classes: false
+        field_adresse_postal_code:
+          id: field_adresse_postal_code
+          table: node__field_adresse
+          field: field_adresse_postal_code
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: standard
+          label: ''
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+        field_dates:
+          id: field_dates
+          table: node__field_dates
+          field: field_dates
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: field
+          label: ''
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: value
+          type: date_range_without_time
+          settings:
+            timezone_override: ''
+            one_day: 'd F Y'
+            one_month: 'd - {d} F Y'
+            several_months: 'd F - {d} {F} Y'
+            several_years: 'd F Y - {d} {F} {Y}'
+            single: 'd F Y'
+            single_all_day: 'd F Y'
+          group_column: value
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+        field_couleur:
+          id: field_couleur
+          table: node__field_couleur
+          field: field_couleur
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: field
+          label: ''
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: color_pickr
+          type: color_pickr_default
+          settings: {  }
+          group_column: color_pickr
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
       style:
         type: html_list
         options:
@@ -490,7 +672,9 @@ display:
         - url
         - 'user.node_grants:view'
         - user.permissions
-      tags: {  }
+      tags:
+        - 'config:field.storage.node.field_couleur'
+        - 'config:field.storage.node.field_dates'
   block_2:
     id: block_2
     display_title: Map
@@ -811,6 +995,134 @@ display:
           multi_type: separator
           separator: ', '
           field_api_classes: false
+        field_couleur:
+          id: field_couleur
+          table: node__field_couleur
+          field: field_couleur
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: field
+          label: ''
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: color_pickr
+          type: color_pickr_default
+          settings: {  }
+          group_column: color_pickr
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+        nid:
+          id: nid
+          table: node_field_data
+          field: nid
+          relationship: none
+          group_type: group
+          admin_label: ''
+          entity_type: node
+          entity_field: nid
+          plugin_id: field
+          label: ''
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: value
+          type: number_integer
+          settings:
+            thousand_separator: ''
+            prefix_suffix: true
+          group_column: value
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
       defaults:
         fields: false
       display_description: ''
@@ -824,6 +1136,7 @@ display:
         - 'user.node_grants:view'
         - user.permissions
       tags:
+        - 'config:field.storage.node.field_couleur'
         - 'config:field.storage.node.field_dates'
         - 'config:field.storage.node.field_geofield'
         - 'config:field.storage.node.field_vignette'

config/sync/views.view.files.yml

@@ -521,6 +521,7 @@ display:
         type: mini
         options:
           offset: 0
+          pagination_heading_level: h4
           items_per_page: 50
           total_pages: 0
           id: 0
@@ -1056,6 +1057,7 @@ display:
         type: mini
         options:
           offset: 0
+          pagination_heading_level: h4
           items_per_page: 10
           total_pages: 0
           id: 0

config/sync/views.view.frontpage.yml

@@ -30,6 +30,7 @@ display:
         type: full
         options:
           offset: 0
+          pagination_heading_level: h4
           items_per_page: 10
           total_pages: 0
           id: 0

config/sync/views.view.glossary.yml

@@ -196,6 +196,7 @@ display:
         type: mini
         options:
           offset: 0
+          pagination_heading_level: h4
           items_per_page: 36
           total_pages: 0
           id: 0

config/sync/views.view.locked_content.yml

@@ -368,6 +368,7 @@ display:
         type: full
         options:
           offset: 0
+          pagination_heading_level: h4
           items_per_page: 50
           total_pages: null
           id: 0

config/sync/views.view.maillog_overview.yml

@@ -280,6 +280,7 @@ display:
         type: full
         options:
           offset: 0
+          pagination_heading_level: h4
           items_per_page: 10
           total_pages: null
           id: 0

config/sync/views.view.static.yml

@@ -0,0 +1,862 @@
+uuid: d1525da1-29fa-4b6f-be7b-14cfbbe80cf1
+langcode: fr
+status: false
+dependencies:
+  config:
+    - field.storage.node.field_dates
+    - field.storage.node.field_geofield
+    - field.storage.node.field_vignette
+    - image.style.medium
+    - node.type.static
+  module:
+    - date_range_formatter
+    - geofield
+    - image
+    - leaflet_views
+    - node
+    - user
+id: static
+label: static
+module: views
+description: ''
+tag: ''
+base_table: node_field_data
+base_field: nid
+display:
+  default:
+    id: default
+    display_title: Default
+    display_plugin: default
+    position: 0
+    display_options:
+      title: étapes
+      fields:
+        title:
+          id: title
+          table: node_field_data
+          field: title
+          relationship: none
+          group_type: group
+          admin_label: ''
+          entity_type: node
+          entity_field: title
+          plugin_id: field
+          label: ''
+          exclude: false
+          alter:
+            alter_text: false
+            make_link: false
+            absolute: false
+            word_boundary: false
+            ellipsis: false
+            strip_tags: false
+            trim: false
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: true
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: value
+          type: string
+          settings:
+            link_to_entity: true
+          group_column: value
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+        field_geofield:
+          id: field_geofield
+          table: node__field_geofield
+          field: field_geofield
+          plugin_id: field
+      pager:
+        type: none
+        options:
+          offset: 0
+          items_per_page: 0
+      exposed_form:
+        type: basic
+        options:
+          submit_button: Appliquer
+          reset_button: false
+          reset_button_label: Réinitialiser
+          exposed_sorts_label: 'Trier par'
+          expose_sort_order: true
+          sort_asc_label: Asc
+          sort_desc_label: Desc
+      access:
+        type: perm
+        options:
+          perm: 'access content'
+      cache:
+        type: tag
+        options: {  }
+      empty: {  }
+      sorts: {  }
+      arguments:
+        field_thematiques_target_id:
+          id: field_thematiques_target_id
+          table: node__field_thematiques
+          field: field_thematiques_target_id
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: numeric
+          default_action: default
+          exception:
+            value: all
+            title_enable: false
+            title: All
+          title_enable: false
+          title: ''
+          default_argument_type: query_parameter
+          default_argument_options:
+            query_param: thematique
+            fallback: all
+            multiple: and
+          summary_options:
+            base_path: ''
+            count: true
+            override: false
+            items_per_page: 25
+          summary:
+            sort_order: asc
+            number_of_records: 0
+            format: default_summary
+          specify_validation: false
+          validate:
+            type: none
+            fail: 'not found'
+          validate_options: {  }
+          break_phrase: false
+          not: false
+        field_saison_target_id:
+          id: field_saison_target_id
+          table: node__field_saison
+          field: field_saison_target_id
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: numeric
+          default_action: default
+          exception:
+            value: all
+            title_enable: false
+            title: All
+          title_enable: false
+          title: ''
+          default_argument_type: query_parameter
+          default_argument_options:
+            query_param: saison
+            fallback: all
+            multiple: and
+          summary_options:
+            base_path: ''
+            count: true
+            override: false
+            items_per_page: 25
+          summary:
+            sort_order: asc
+            number_of_records: 0
+            format: default_summary
+          specify_validation: false
+          validate:
+            type: none
+            fail: 'not found'
+          validate_options: {  }
+          break_phrase: false
+          not: false
+      filters:
+        status:
+          id: status
+          table: node_field_data
+          field: status
+          entity_type: node
+          entity_field: status
+          plugin_id: boolean
+          value: '1'
+          group: 1
+          expose:
+            operator: ''
+        type:
+          id: type
+          table: node_field_data
+          field: type
+          relationship: none
+          group_type: group
+          admin_label: ''
+          entity_type: node
+          entity_field: type
+          plugin_id: bundle
+          operator: in
+          value:
+            static: static
+          group: 1
+          exposed: false
+          expose:
+            operator_id: ''
+            label: ''
+            description: ''
+            use_operator: false
+            operator: ''
+            operator_limit_selection: false
+            operator_list: {  }
+            identifier: ''
+            required: false
+            remember: false
+            multiple: false
+            remember_roles:
+              authenticated: authenticated
+            reduce: false
+          is_grouped: false
+          group_info:
+            label: ''
+            description: ''
+            identifier: ''
+            optional: true
+            widget: select
+            multiple: false
+            remember: false
+            default_group: All
+            default_group_multiple: {  }
+            group_items: {  }
+      style:
+        type: leaflet_map
+        options:
+          grouping: {  }
+          data_source:
+            field_geofield: field_geofield
+          entity_source: __base_table
+          name_field: ''
+          leaflet_tooltip:
+            value: title
+            options: '{"permanent":false,"direction":"center"}'
+          leaflet_popup:
+            value: ''
+            options: '{"maxWidth":"300","minWidth":"50","autoPan":true}'
+            view_mode: teaser
+          leaflet_map: esri-world_imagery
+          height: '100'
+          height_unit: vh
+          hide_empty_map: false
+          disable_wheel: false
+          gesture_handling: false
+          fitbounds_options: '{"padding":[0,0]}'
+          reset_map:
+            control: false
+            options: '{"position":"topleft","title":"Reset View"}'
+          map_scale:
+            control: false
+            options: '{"position":"bottomright","maxWidth":100,"metric":true,"imperial":false,"updateWhenIdle":false}'
+          locate:
+            control: false
+            options: '{"position":"topright","setView":"untilPanOrZoom","returnToPrevBounds":true,"keepCurrentZoomLevel":true,"strings":{"title":"Locate my position"}}'
+            automatic: false
+          map_position:
+            force: false
+            center:
+              lat: 0.0
+              lon: 0.0
+            zoomControlPosition: topleft
+            zoom: 5
+            minZoom: 1
+            maxZoom: 18
+            zoomFiner: 0
+          weight: ''
+          icon:
+            iconType: marker
+            iconUrl: ''
+            shadowUrl: ''
+            className: ''
+            iconSize:
+              x: ''
+              'y': ''
+            iconAnchor:
+              x: ''
+              'y': ''
+            shadowSize:
+              x: ''
+              'y': ''
+            shadowAnchor:
+              x: ''
+              'y': ''
+            popupAnchor:
+              x: ''
+              'y': ''
+            html: '<div></div>'
+            html_class: leaflet-map-divicon
+            circle_marker_options: '{"radius":100,"color":"red","fillColor":"#f03","fillOpacity":0.5}'
+          leaflet_markercluster:
+            control: false
+            include_path: false
+            options: '{"spiderfyOnMaxZoom":true,"showCoverageOnHover":true,"removeOutsideVisibleBounds":false}'
+            excluded: '0'
+          fullscreen:
+            control: false
+            options: '{"position":"topleft","pseudoFullscreen":false}'
+          path: '{"color":"#3388ff","opacity":"1.0","stroke":true,"weight":3,"fill":"depends","fillColor":"*","fillOpacity":"0.2","radius":"6"}'
+          geocoder:
+            control: false
+            settings:
+              autocomplete:
+                placeholder: 'Search Address'
+                title: 'Search an Address on the Map'
+              position: topright
+              input_size: 20
+              providers:
+                mapquest:
+                  weight: '0'
+                  checked: 0
+              min_terms: 4
+              delay: 800
+              zoom: 16
+              popup: false
+              options: ''
+          map_lazy_load:
+            lazy_load: true
+          feature_properties:
+            values: ''
+      row:
+        type: fields
+        options:
+          default_field_elements: true
+          inline: {  }
+          separator: ''
+          hide_empty: false
+      query:
+        type: views_query
+        options:
+          query_comment: ''
+          disable_sql_rewrite: false
+          distinct: false
+          replica: false
+          query_tags: {  }
+      relationships: {  }
+      header: {  }
+      footer: {  }
+      display_extenders: {  }
+    cache_metadata:
+      max-age: -1
+      contexts:
+        - 'languages:language_content'
+        - 'languages:language_interface'
+        - url
+        - 'user.node_grants:view'
+        - user.permissions
+      tags:
+        - 'config:field.storage.node.field_geofield'
+  block_1:
+    id: block_1
+    display_title: Liste
+    display_plugin: block
+    position: 1
+    display_options:
+      fields:
+        nid:
+          id: nid
+          table: node_field_data
+          field: nid
+          relationship: none
+          group_type: group
+          admin_label: ''
+          entity_type: node
+          entity_field: nid
+          plugin_id: field
+          label: ''
+          exclude: true
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: value
+          type: number_integer
+          settings:
+            thousand_separator: ''
+            prefix_suffix: true
+          group_column: value
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+        title:
+          id: title
+          table: node_field_data
+          field: title
+          relationship: none
+          group_type: group
+          admin_label: ''
+          entity_type: node
+          entity_field: title
+          plugin_id: field
+          label: ''
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: true
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: false
+            ellipsis: false
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: 'data-node-{{ nid }}'
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: value
+          type: string
+          settings:
+            link_to_entity: true
+          group_column: value
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+      style:
+        type: html_list
+        options:
+          grouping: {  }
+          row_class: ''
+          default_row_class: true
+          type: ul
+          wrapper_class: item-list
+          class: ''
+      row:
+        type: fields
+        options: {  }
+      defaults:
+        style: false
+        row: false
+        fields: false
+      display_description: ''
+      display_extenders: {  }
+    cache_metadata:
+      max-age: -1
+      contexts:
+        - 'languages:language_content'
+        - 'languages:language_interface'
+        - url
+        - 'user.node_grants:view'
+        - user.permissions
+      tags: {  }
+  block_2:
+    id: block_2
+    display_title: Map
+    display_plugin: block
+    position: 2
+    display_options:
+      fields:
+        field_geofield:
+          id: field_geofield
+          table: node__field_geofield
+          field: field_geofield
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: field
+          label: ''
+          exclude: true
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: value
+          type: geofield_default
+          settings:
+            output_format: wkt
+            output_escape: true
+          group_column: value
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+        field_dates:
+          id: field_dates
+          table: node__field_dates
+          field: field_dates
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: field
+          label: ''
+          exclude: true
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: value
+          type: date_range_without_time
+          settings:
+            timezone_override: ''
+            one_day: 'd F Y'
+            one_month: 'd - {d} F Y'
+            several_months: 'd F - {d} {F} Y'
+            several_years: 'd F Y - {d} {F} {Y}'
+            single: 'd F Y'
+            single_all_day: 'd F Y'
+          group_column: value
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+        field_vignette:
+          id: field_vignette
+          table: node__field_vignette
+          field: field_vignette
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: field
+          label: ''
+          exclude: true
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: target_id
+          type: image
+          settings:
+            image_link: content
+            image_style: medium
+            image_loading:
+              attribute: lazy
+          group_column: ''
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+        field_adresse_postal_code:
+          id: field_adresse_postal_code
+          table: node__field_adresse
+          field: field_adresse_postal_code
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: standard
+          label: ''
+          exclude: true
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+        title:
+          id: title
+          table: node_field_data
+          field: title
+          relationship: none
+          group_type: group
+          admin_label: ''
+          entity_type: node
+          entity_field: title
+          plugin_id: field
+          label: ''
+          exclude: false
+          alter:
+            alter_text: true
+            text: "{{ title }} ({{ field_adresse_postal_code }})\r\n{{ field_dates }}\r\n{{ field_vignette }}"
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: false
+            ellipsis: false
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: value
+          type: string
+          settings:
+            link_to_entity: true
+          group_column: value
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+      defaults:
+        fields: false
+      display_description: ''
+      display_extenders: {  }
+    cache_metadata:
+      max-age: -1
+      contexts:
+        - 'languages:language_content'
+        - 'languages:language_interface'
+        - url
+        - 'user.node_grants:view'
+        - user.permissions
+      tags:
+        - 'config:field.storage.node.field_dates'
+        - 'config:field.storage.node.field_geofield'
+        - 'config:field.storage.node.field_vignette'

config/sync/views.view.taxonomy_term.yml

@@ -29,6 +29,7 @@ display:
         type: mini
         options:
           offset: 0
+          pagination_heading_level: h4
           items_per_page: 10
           total_pages: 0
           id: 0

config/sync/views.view.user_admin_people.yml

@@ -462,6 +462,7 @@ display:
         type: full
         options:
           offset: 0
+          pagination_heading_level: h4
           items_per_page: 50
           total_pages: 0
           id: 0

config/sync/views.view.watchdog.yml

@@ -440,6 +440,7 @@ display:
         type: mini
         options:
           offset: 0
+          pagination_heading_level: h4
           items_per_page: 50
           total_pages: null
           id: 0

web/modules/custom/alter_routing/alter_routing.info.yml

@@ -0,0 +1,5 @@
+name: 'Alter Routing'
+type: module
+description: 'Custom module to alter routing and redirect node/2 to the homepage.'
+core_version_requirement: ^8 || ^9 || ^10
+package: Custom

web/modules/custom/alter_routing/alter_routing.module

@@ -0,0 +1,26 @@
+<?php
+
+/**
+ * Implements hook_preprocess_page().
+ */
+function alter_routing_preprocess_page(&$variables) {
+    // Check if the current page is a node page.
+    if (isset($page['#node']) && $page['#node'] instanceof \Drupal\node\NodeInterface) {
+      // Load the front page content directly from its path.
+      $front_page_path = \Drupal::config('system.site')->get('url');
+      $front_page_node = \Drupal\node\Entity\Node::load(\Drupal::entityTypeManager()->getStorage('node')->getQuery()
+        ->condition('type', 'page') // Change this to the content type if needed
+        ->condition('status', 1)
+        ->sort('created', 'DESC')
+        ->execute()
+      );
+  
+      // If front page content is found, replace node content with front page content.
+      if ($front_page_node) {
+        $view_builder = \Drupal::entityTypeManager()->getViewBuilder('node');
+        $rendered_content = $view_builder->view($front_page_node, 'full');
+        $page['content']['#markup'] = \Drupal::service('renderer')->render($rendered_content);
+      }
+    }
+}
+?>

web/themes/custom/caravane/assets/js/main.js

@@ -1,9 +1,13 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import '../scss/main.scss'
-import Etape from './vuejs/Etape.vue'
+import Modale from './vuejs/Modale.vue'
 
-import { useEtapeStore } from './stores/etape';
+import VueImageZoomer from 'vue-image-zoomer'
+import 'vue-image-zoomer/dist/style.css';
+
+import { useContentStore } from './stores/content';
+import router from './router/router';
 
 // Working with the history API
 // https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API
@@ -39,39 +43,60 @@ import { useEtapeStore } from './stores/etape';
     function init () {
       console.log('CaravaneTheme init()')
       initVues()
+      toggleMenu()
     }
 
     function initVues(){
-      initVueEtapeModale();
+      initVueContentModale();
-
-
     }
 
-    function initVueEtapeModale(){
+    function initVueContentModale(){
-      const app = createApp(Etape).use(createPinia());
+      const app = createApp(Modale)
-      const store = useEtapeStore();
+        .use(createPinia()).use(router)
-      app.mount('#etape-modale');
+        .use(VueImageZoomer);
+      const store = useContentStore();
+      app.mount('#content-modale');
 
       processEtapeLinks(store);
+      processStaticLinks(store);
+
+      setupEtapeMapPopup(store);
     }
 
 
-    function onClickEtapeLink(e, store){
+    function onClickContentLink(e, store, category){
       e.preventDefault();
+      let a;
+
+      const li = e.target.closest('li');
+      a = li.querySelector('a');
     
-      let a = e.currentTarget;
       let nid = a.dataset.nodeNid;
-      console.log(nid);
 
+      if (category === 'etape') {
         store.fetchEtapeData(nid);
+      } else if (category === 'static') {
+        store.fetchStaticData(nid);
+      }
 
       return null;
     }
 
+    function processStaticLinks(store){
+      let general_link_fields = document.querySelectorAll('#menu > ul > li:not(:first-of-type) > a');
+      for (let field of general_link_fields) {
+        let general_link_href = field.getAttribute('href');
+        const nid = general_link_href.charAt(general_link_href.length-1);
+        field.setAttribute('data-node-nid', nid);
+        field.addEventListener('click', (e) => onClickContentLink(e, store, 'static'));
+      }
+    }
+
 
     function processEtapeLinks(store){
-      let etape_link_fields = document.querySelectorAll('#etapes-liste div.views-field-title');
+      let etape_li = document.querySelectorAll('#etapes-liste li');
-      etape_link_fields.forEach((field) => {
+      etape_li.forEach((li) => {
+        let field = li.querySelector('div.views-field-title');
         let nid = null;
         let classList = field.classList;
         classList.forEach((classe) => {
@@ -79,20 +104,83 @@ import { useEtapeStore } from './stores/etape';
           let result = classe.match(reg);
           if (result) {
             nid = result[1];
-            console.log(nid);
           }
         })
         
         if (nid) {
           let a = field.querySelector('a');
           a.setAttribute('data-node-nid', nid);
-          a.addEventListener('click', (e) => onClickEtapeLink(e, store));
+          li.addEventListener('click', (e) => onClickContentLink(e, store, 'etape'));
+        }
+        let couleur = li.querySelector('.views-field-field-couleur .snippets-description').innerText;
+        let iconElements = li.querySelectorAll('.icone-arret > div');
+        for (let element of iconElements) {
+          element.style.backgroundColor = couleur;
         }
 
-        
       })
     }
 
+    function toggleMenu() {
+      const menuButton = document.querySelector('#block-caravane-mainnavigation > #menu');
+      const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul');
+      const menuTitle = document.querySelector('#menu-title');
+      const menuBurger = document.querySelector('#hamburger');
+      const menuH2 = document.querySelector('#menu > h2');
+      menuButton.addEventListener('click', (e) => { 
+        setTimeout(() => {
+          menuContainer.classList.toggle('open');
+          menuTitle.classList.toggle('open');
+          menuBurger.classList.toggle('open');
+          menuH2.classList.toggle('open');
+        }, 50);
+      })
+      document.addEventListener('click', (e) => {
+        if (!menuContainer.contains(e.target) && !menuBurger.contains(e.target)) {
+          menuContainer.classList.remove('open');
+          menuTitle.classList.remove('open');
+          menuBurger.classList.remove('open');
+          menuH2.classList.remove('open');  
+        }
+      })
+    }
+
+    function setupEtapeMapPopup(store) {
+      setTimeout(() => {
+        const icons = document.querySelectorAll('.leaflet-map-divicon');
+        for (let icon of icons) {
+          const colorContainer = icon.querySelector('.couleur');
+          const colorDiv = colorContainer.querySelector('div > div:nth-of-type(4)');
+          const color = colorDiv.innerText.substring(colorDiv.innerText.indexOf('>') + 1, colorDiv.innerText.indexOf('<', colorDiv.innerText.indexOf('>') + 1)).trim();
+          
+          const nid = icon.querySelector('.nid');
+          const nidValue = nid.querySelector('div > div').innerText;
+
+          icon.addEventListener('click', function(event) {
+            store.fetchEtapeData(nidValue);
+          });
+          
+          colorContainer.remove();
+          nid.remove();
+          const iconElements = icon.querySelectorAll('div');
+          for (let iconElement of iconElements) {
+            iconElement.style.backgroundColor = color;
+          }
+          icon.removeAttribute('title');
+
+          icon.addEventListener('mouseenter', function (event) {
+            icon.style.transform = `${icon.style.transform} scale(1.1)`;
+            const popup = document.querySelector('.leaflet-tooltip-center > div');
+            popup.style.opacity = "1";
+          });
+
+          icon.addEventListener('mouseleave', function (event) {
+            icon.style.transform = icon.style.transform.split(' ')[0] + icon.style.transform.split(' ')[1] + icon.style.transform.split(' ')[2];
+          })
+        }
+      }, 500);
+    }
+    
     init()
   } // end CaravaneTheme()
 

web/themes/custom/caravane/assets/js/router/router.js

@@ -0,0 +1,14 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import ModaleView from '../vuejs/Modale.vue';
+
+const routes = [
+    { path: '/node/:id', component: ModaleView, name: 'modale' },
+    { path: '/', component: ModaleView, name: 'home' },
+  ];
+  
+  const router = createRouter({
+    history: createWebHistory(),
+    routes,
+  });
+  
+  export default router;

web/themes/custom/caravane/assets/js/stores/content.js

@@ -0,0 +1,268 @@
+// query et traitement des contenus
+
+import { defineStore } from 'pinia';
+import REST from '../api/rest-axios';
+
+export const useContentStore = defineStore('content', {
+  state: () => ({
+      href: '',
+      etape: {
+        title: '',
+        adresse: {},
+        etape_number: '',
+        dates: {
+          start: {
+            d: '',
+            m: '',
+            y: '',
+          },
+          end: {
+            d: '',
+            m: '',
+            y: '',
+          },
+        },
+        geofield: {},
+        // galeries: [],
+        parties: [],
+        saison: {},
+        thematiques: [],
+        vignette: {},
+        couleur: '',
+        sensibleMap: {},
+        previous: {},
+        next: {},
+      },
+      page: {
+        title: '', 
+        text: '',
+      },
+      loading: false,
+      error: null,
+    }),
+    actions: {
+      async fetchEtapeData(nid) {
+        this.loading = true;
+        this.error = null;
+        this.etape = {};
+        this.page = {};
+        try {
+          const response = await REST.get(`/jsonapi/node/etape/`);
+          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") {
+                  this.href = metatag.attributes.href;
+                }
+              }
+              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 = {
+                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);
+              const partiesFetch = await this.fetchEtapeContent('field_parties', etape.relationships);
+              let partiesArray = []
+
+              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.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;
+            }
+          }
+        } catch (error) {
+          this.error = 'Failed to fetch data';
+          console.error('Issue with getNodeData', error);
+        } finally {
+          this.loading = false;
+        }
+      },
+      async fetchStaticData(nid) {
+        this.loading = true;
+        this.error = null;
+        this.etape = {};
+        this.page = {};
+        try {
+          const response = await REST.get(`/jsonapi/node/static/`);
+          for (let staticContent of response.data.data) {
+            if (staticContent.attributes.drupal_internal__nid == nid) {
+              staticContent.attributes.metatag.forEach(item => {
+                if (item.tag === 'meta') {
+                  this.page.title = item.attributes.content.split(' |')[0];
+                }
+                if (item.tag === 'link') {
+                  this.href = item.attributes.href;
+                }
+              })
+              this.page.text = staticContent.attributes.field_texte.value;
+            }
+          }
+          this.setActiveItemInMenu();
+        } catch (error) {
+          this.error = 'Failed to fetch data';
+          console.error('Issue with getNodeData', error);
+        } finally {
+          this.loading = false;
+        }
+      },
+      emptyAll() {
+        this.etape = {};
+        this.page = {};
+        this.setActiveItemInMenu();
+      },
+      setActiveItemInMenu() {
+        const title = this.etape.title || this.page.title;
+
+        const generalLinks = document.querySelectorAll('#menu > ul > li > a');
+        if (Object.entries(this.etape).length === 0 && Object.entries(this.page).length === 0) {
+          for (let link of generalLinks) {
+            link.classList.remove('is-active');
+          }
+          generalLinks[0].classList.add('is-active');
+        } else {
+          for (let link of generalLinks) {
+            if (link.innerText === title) {
+              link.classList.add('is-active');
+            } else {
+              link.classList.remove('is-active');
+            }
+          }
+        }
+
+        const etapeLinks = document.querySelectorAll('#etapes-liste li');
+        for (let link of etapeLinks) {
+          const a = link.querySelector('a');
+          if (a.innerText === title) {
+            link.classList.remove('inactive');
+          } else {
+            link.classList.add('inactive');
+          }
+        }
+        const inactiveLinks = document.querySelectorAll('#etapes-liste li.inactive');
+        if (inactiveLinks.length === etapeLinks.length) {
+          for (let link of inactiveLinks) {
+            link.classList.remove('inactive');
+          }
+        }
+      },
+      async fetchEtapeContent(field, relationships) {
+        if (relationships[field].data) {
+          try {
+            const contentLink = relationships[field].links.related.href;
+            const contentFetch = await REST.get(contentLink);
+            return contentFetch.data.data;
+          } catch (error) {
+            this.error = 'Failed to fetch data';
+            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],
+         }
+      }
+    },
+  });
+

web/themes/custom/caravane/assets/js/stores/etape.js

@@ -1,25 +0,0 @@
-import { defineStore } from 'pinia';
-import REST from '../api/rest-axios';
-
-export const useEtapeStore = defineStore('etape', {
-    state: () => ({
-      etapeData: null,
-      loading: false,
-      error: null,
-    }),
-    actions: {
-      async fetchEtapeData(nid) {
-        this.loading = true;
-        this.error = null;
-        try {
-          const response = await REST.get(`/node/${nid}?_format=json`);
-          this.etapeData = response.data;
-        } catch (error) {
-          this.error = 'Failed to fetch data';
-          console.error('Issue with getNodeData', error);
-        } finally {
-          this.loading = false;
-        }
-      },
-    },
-  });

web/themes/custom/caravane/assets/js/vuejs/Etape.vue

@@ -1,20 +0,0 @@
-<template>
-  <div v-if="etapeData">
-<!--     
-    <div v-if="loading">Loading...</div>
-    <div v-if="error">{{ error }}</div>
- -->    
-    <div>
-      <pre>{{ etapeData }}</pre>
-    </div>
-  </div>
-</template>
-
-<script setup>
-  import { storeToRefs } from 'pinia';
-  import { useEtapeStore } from '../stores/etape';
-
-  const store = useEtapeStore();
-
-  const { etapeData, loading, error } = storeToRefs(store);
-</script>

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>

web/themes/custom/caravane/assets/js/vuejs/Modale.vue

@@ -0,0 +1,328 @@
+<template>
+  <Transition>
+    <div v-if="isEtapeValid">
+      <div class="content-wrapper">
+        <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>
+          </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><b>GEOFIELD</b>{{etape.geofield}}</pre></div>
+      <div><pre><b>VIGNETTE</b>{{etape.vignette}}</pre></div>
+      <div><pre><b>GALERIES</b>{{etape.galeries}}</pre></div>
+      <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>
+  </Transition>
+
+  <ImageModale :isOpen="isModaleOpen" :image="currentImage" :swiperContent="swiperPopupContent" @close="closeImageModale" />
+
+  <Transition>
+    <div v-if="isPageValid">
+      <header>
+        <h1>{{ page.title }}</h1>
+      </header>
+      <main>
+        <div v-html="page.text"></div>
+      </main>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+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();
+const route = useRoute();
+
+const { loading, error, href, etape, page } = storeToRefs(store);
+
+watch(
+  () => route.params.id,
+  (newId) => {
+    if (!newId) {
+      store.emptyAll();
+    } else {
+      store.fetchEtapeData(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);
+    }
+  }
+);
+
+watch(
+  () => href.value,
+  (newHref) => {
+    const relativePath = newHref.split('.fr')[1];
+    if (relativePath && relativePath !== '' && relativePath !== '/') {
+      router.push(relativePath);
+    }
+  }
+);
+
+const isObjectEmpty = (obj) => {
+  if (!obj || typeof obj !== 'object') return true;
+
+  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 !== '';
+  });
+};
+
+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);
+      }
+    });
+  }
+};
+
+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 {
+      loading,
+      error,
+      etape,
+      page,
+      isEtapeValid,
+      isPageValid
+    };
+ */
+ </script>
+
+
+<style scss>
+.v-enter-active,
+.v-leave-active {
+  transition: all 0.3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+.v-leave-from {
+  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>

web/themes/custom/caravane/assets/scss/main.scss

@@ -2,20 +2,34 @@
 
 $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;
+$xl-font-size: 2.4rem;
 
 $main-color: #1a1918;
 $main-color-light: #635b58;
 $light-color: #faf1eb;
+$brand-color: #80c8bf;
+
+$menu-width: 15vw;
+$menu-margin: 2rem;
 
 body{
   font-family: 'Marianne', sans-serif;
   color: $main-color;
   margin: 0;
   padding: 0;
-  header {
+  overflow-y: scroll;
+  &.no-scroll {
+    overflow-y: hidden;
+  }
+  .layout-container {
+    > header {
       z-index: 2;
       position: relative;
       > div {
@@ -53,43 +67,152 @@ body{
           display: flex;
           justify-content: flex-end;
           grid-column: 16 / span 1;
-        width: 100%;
+          width: 10vw;
-        > div {
+          margin-top: 1.8vh;
-          width: 40%;
+          position: fixed;
+          right: $body-margin-x;
+          > #menu-title {
+            display: flex;
+            z-index: 2;
+            background-color: $brand-color;
+            position: fixed;
+            width: $menu-width;
+            right: 0;
+            top: 0;
+            padding-top: 2.8vh;
+            margin-right: $body-margin-x;
+            padding-bottom: 10px;
+            max-height: 0vh;
+            overflow: hidden;
+            height: 5vh;
+            transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
+            opacity: 0;
+            align-items: center;
+            > p {
+              padding-left: $menu-margin;
+              margin: 10px 0;
+              color: white;
+              font-size: $l-font-size;
+              font-family: 'Joost', sans-serif;
+              font-weight: bold;
+            }
+          }
+          > #menu-title.open {
+            opacity: 1;
+            max-height: 5vh;
+          }
+          > #menu {
             display: flex;
             align-items: center;
             justify-content: center;
             flex-direction: column;
             cursor: pointer;
             > h2 {
+              z-index: 2;
               margin-block: 0;
               font-size: $sm-font-size;
               color: $main-color-light;
               font-weight: normal;
               margin-bottom: 5px;
             }
+            > h2 {
+              display: none;
+            }
             > #hamburger {
+              position: fixed;
+              height: 5vh;
+              right: 0;
+              top: 0;
+              margin-right: $body-margin-x;
+              padding-top: 2.8vh;
+              padding-bottom: 10px;
+              z-index: 2;
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
-            width: 100%;
+              width: 2.4rem;
+              transition: transform 0.3s ease-out, opacity 0.3s ease-out;
               > div {
                 width: 100%;
                 height: 3px;
                 margin: 4px 0;
                 border-radius: 2px;
                 background-color: $main-color-light;
+                opacity: 1;
+                transition: transform 0.5s, opacity 0.2s;
               }
             }
+            > #hamburger:hover {
+              transform: scale(1.1);
+            }
+            > #hamburger.open {
+              transform: scale(0.7) translateX(-20px);
+              > div {
+                background-color: white;
+              }
+              > div:first-of-type {
+                transform: rotate(45deg);
+                margin-top: 50%;
+              }
+              > div:last-of-type {
+                transform: rotate(-45deg);
+                margin-top: -50%;
+              }
+              > div:nth-child(2) {
+                opacity: 0;
+              }
+            }
+            > #hamburger.open:hover {
+              transform: scale(0.75) translateX(-20px);
+            }
             > ul {
-            display: none;
+              list-style-type: none;
+              background-color: white;
+              position: fixed;
+              width: $menu-width;
+              right: $body-margin-x;
+              padding: 0;
+              padding-top: 1.5rem;
+              padding-bottom: 1.5rem;
+              top: -5vh;
+              opacity: 0;
+              transition: top 0.3s ease-out, opacity 0.2s ease-out;
+              z-index: 1;
+              > li {
+                padding-left: $menu-margin;
+                margin: 15px 0;
+                > a {
+                  color: $main-color;
+                  text-decoration: none;
+                }
+                > a.is-active::before,
+                > a:hover::before {
+                  content: '→';
+                  color: $brand-color;
+                  width: 2rem;
+                  display: inline-block;
+                  opacity: 1;
+                }
+                > a::before {
+                  content: '→';
+                  color: $brand-color;
+                  opacity: 0;
+                  display: inline-block;
+                  width: 0rem;
+                  transition: width 0.2s ease-out, opacity 0.2s ease-out;
+                }
+              }
+            }
+            > ul.open {
+              opacity: 1;
+              top: 7vh;
             }
           }
         }
       }
     }
-  main {
+    > main {
       z-index: 1;
       position: absolute;
       top: 0;
@@ -127,6 +250,138 @@ body{
               width: 100vw;
               .leaflet-container {
                 // add map style here
+                .leaflet-control-zoom {
+                  border: none;
+                  margin: 0;
+                  left: $body-margin-x;
+                  bottom: $body-margin-bottom;
+                  > a {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    font-size: $m-font-size;
+                    font-family: 'marianne', sans-serif;
+                    font-weight: lighter;
+                    width: 4vh;
+                    height: 4vh;
+                  }
+                  > a:first-of-type {
+                    border-top-left-radius: 2vh;
+                    border-top-right-radius: 2vh;
+
+                  }
+                  > a:last-of-type {
+                    border-bottom-left-radius: 2vh;
+                    border-bottom-right-radius: 2vh;
+                    > span {
+                      padding-bottom: 10px;
+                    }
+                  }
+                }
+                .leaflet-right {
+                  right: unset;
+                  left: 0;
+                }
+                .leaflet-map-divicon {
+                  width: 10px;
+                  height: 30px;
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: center;
+                  align-items: center;
+                  transition: transform 0.3s ease-out;
+                  > div {
+                    background-color: red;
+                    display: block;
+                    width: 20px;
+                    height: 10px;
+                    }
+                  > 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%);
+                  }
+                }
+              }
+              .leaflet-tooltip-center {
+                width: 20vw;
+                padding: 0;
+                border-radius: none;
+                box-shadow: none;
+                opacity: 1 !important;
+                border-radius: 0 !important;
+                background-color: transparent;
+                border: none;
+                pointer-events: none;
+                > div {
+                  display: grid;
+                  grid-template-columns: minmax(10px, 10vw) 10vw;
+                  grid-template-rows: 1.5fr 0.5fr;
+                  transform: translateY(-60%);
+                  background-color: white;
+                  opacity: 0;
+                  transition: opacity 0.3s ease-out;
+                  > div:first-of-type {
+                    grid-column: 1 / span 1;
+                    grid-row: 1 / span 1;
+                    font-family: 'Joost', sans-serif;
+                    font-size: $m-font-size;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                    padding-top: 10px;
+                    padding-left: 20px;
+                    padding-right: 20px;
+                    text-wrap: wrap;
+                    > a {
+                      font-weight: bold;
+                      text-decoration: none;
+                      color: $main-color;
+                      padding-right: 10px;
+                    }
+                  }
+                  > div:nth-of-type(2) {
+                    grid-column: 1 / span 1;
+                    grid-row: 2 / span 1;
+                    text-align: center;
+                    padding: 10px 0;
+                    > time {
+                      font-size: $sm-font-size;
+                      font-family: 'Marianne', sans-serif;
+                      font-weight: lighter;
+                    }
+                  }
+                  > a {
+                    display: block;
+                    grid-column: 2 / span 1;
+                    grid-row: 1 / span 2;
+                    overflow: hidden;
+                    width: 100%;
+                    height: 100%;
+                    padding: 0;
+                    > div {
+                      width: 100%;
+                      display: block;
+                      padding: 0;
+                      background-color: blue;
+                      max-height: 0;
+                      > img {
+                        padding: 0;
+                        width: 100%;
+                        height: auto;
+                        object-fit: cover;
+                        margin: 0;
+                        display: block;
+                      }
+                    }
+                  }
+
+                }
               }
             } 
             > .layout__region--third {
@@ -144,9 +399,28 @@ body{
                 pointer-events: auto;
                 ul {
                   list-style: none;
-                > li > div {
+                  > li {
                     display: flex;
-                  justify-content: flex-end;
+                    justify-content: end;
+                    align-items: center;
+                    margin: 30px 0;
+                    transform: scale(1);
+                    opacity: 1;
+                    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+                    cursor: pointer;
+                    > .infos-arret {
+                      display: grid;
+                      grid-template-columns: auto auto;
+                      grid-template-rows: auto auto;
+                      justify-content: end;
+                      margin-right: 20px;
+                      p {
+                        margin: 0;
+                      }
+                      > .views-field-title {
+                        grid-column: 1 / span 1;
+                        grid-row: 1 / span 1;
+                        margin-right: 10px;
                         a {
                           text-decoration: none;
                           color: $main-color;
@@ -154,23 +428,490 @@ body{
                           font-weight: bold;
                           font-size: $m-font-size;
                           display: inline-block;
-                    margin: 15px 0;
                           text-align: right;
                         }
                       }
+                      > .views-field-field-adresse-postal-code {
+                        grid-column: 2 / span 1;
+                        grid-row: 1 / span 1;
+                        color: $main-color;
+                        font-family: 'Joost', sans-serif;
+                        font-weight: lighter;
+                        font-size: $m-font-size;
+                        align-self: end;
+                        > span {
+                          > p::before {
+                            content: '(';
+                          }
+                          > p::after {
+                            content: ')';
+                          }
+                        }
+                        
+                      }
+                      > .views-field-field-dates {
+                        grid-column: 1 / span 2;
+                        grid-row: 2 / span 1;
+                        font-size: $sm-font-size;
+                        font-family: 'Marianne', sans-serif;
+                        font-weight: lighter;
+                        text-align: right;
+                        margin-top: 7px;
+                      }
+                      > .views-field-field-couleur {
+                        display: none;
+                      }
+                    }
+                    > .icone-arret {
+                      width: 10px;
+                      height: 30px;
+                      display: flex;
+                      flex-direction: column;
+                      justify-content: center;
+                      align-items: center;
+                      > div {
+                        background-color: red;
+                        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);
+                        }
+                      }
+                    }
+                  }
+                  > li:hover {
+                    transform: scale(1.05);
+                  }
+                  > li.inactive {
+                    opacity: 0.6;
                   }
                 }
               }
             } 
           }
+          > .user-login-form {
+            height: 90vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            > div {
+              margin: 20px 0;
             }
-    > #etape-modale > div {
+          }
-      z-index: 2;
+        }
-      position: relative;
+      }
-      top: 15vh;
+      > #content-modale {
+        > div:not(.image-viewer-wrapper, .image-modale) {
+          padding-bottom: 40vh;
+          background-color: red;
+          > .content-wrapper {
             left: 25vw;
             width: 50vw;
-      background-color: rgba(255,255,255,0.5);
+            top: 15vh;
+            z-index: 2;
+            position: relative;
+            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;
+                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%;
+                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;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        > .image-viewer-wrapper {
+          backdrop-filter: blur(3px);
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          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);
+              }
+            }
+          }
+        }
+      }
     }
   } 
 }

web/themes/custom/caravane/caravane.theme

@@ -1,5 +1,5 @@
 <?php
-
+use GuzzleHttp\Psr7\Uri;
 /**
  * @file
  * Functions to support theming in the caravane theme.
@@ -27,6 +27,14 @@ function caravane_preprocess_html(&$variables) {
  */
 function caravane_preprocess_page(&$variables) {
 
+  if (\Drupal::service('path.current')->getPath() == '/node/2') {
+    // Fetch content from the homepage.
+    // $homepage_url = \Drupal::service('path.current')->getPath();
+    $base_url = \Drupal::request()->getSchemeAndHttpHost();
+    $uri = new Uri($base_url);
+    $homepage_content = \Drupal::httpClient()->get($uri);
+    $variables['homepage_content'] = $homepage_content->getBody();
+  }
 }
 
 /**
@@ -36,22 +44,26 @@ function caravane_preprocess_node(&$variables) {
 
 }
 
-
+function cavarane_preprocess_block(&$variables) {
-function caravane_preprocess_contanier(&$variables) {
 
 }
 
+function caravane_theme_suggestions_views_view_field_alter(array &$suggestions, array $variables) {
+  $view = $variables['view'];
+  $display_id = $variables['view']->current_display;
+  if ($display_id == 'block_1' && $view->id() == 'etapes') {
+    $suggestions[] = 'views_view_field__block_1__etape_list';
+  }
+  if ($display_id == 'block_2') {
+    $suggestions[] = 'views_view_field__block_2__popup_map';
+  }
+}
 
-
+function caravane_theme_suggestions_views_view_fields_alter(array &$suggestions, array $variables) {
-// function A(){
+  $view = $variables['view'];
-//   $attr = 6;
+  $display_id = $variables['view']->current_display;
-//   B($attr);
+  $view_id = $view->id();
-//   print($attr);
+  if ($display_id == 'block_1' && $view_id == 'etapes') {
-// }
+    $suggestions[] = 'views_view_fields__block_2__liste_etapes';
-
+  }
-// function B($attr){
+}
-//   $attr = 3;
-//   print($attr);
-// }
-
-// A();

web/themes/custom/caravane/package-lock.json

@@ -10,7 +10,10 @@
       "dependencies": {
         "axios": "^1.7.2",
         "pinia": "^2.1.7",
-        "vue": "^3.4.29"
+        "swiper": "^11.1.14",
+        "vue": "^3.4.29",
+        "vue-image-zoomer": "^2.4.1",
+        "vue-router": "^4.4.3"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.0.5",
@@ -18,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",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
-      "integrity": "sha512-WzfbgXOkGzZiXXCqk43kKwZjzwx4oulxZi3nq2TYL9mOjQv6kYwul9mz6ID36njuL7Xkp6nJEfok848Zj10j/w==",
+      "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"
       },
@@ -30,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",
@@ -428,9 +466,9 @@
       "license": "MIT"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.18.1",
+      "version": "4.22.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.5.tgz",
-      "integrity": "sha512-lncuC4aHicncmbORnx+dUaAgzee9cm/PbIqgWz1PpXuwc+sa1Ct83tnqUDy/GFKleLiN7ZIeytM6KJ4cAn1SxA==",
+      "integrity": "sha512-SU5cvamg0Eyu/F+kLeMXS7GoahL+OoizlclVFX3l5Ql6yNlywJJ0OuqTzUx0v+aHhPHEB/56CT06GQrRrGNYww==",
       "cpu": [
         "arm"
       ],
@@ -442,9 +480,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.18.1",
+      "version": "4.22.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.18.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.5.tgz",
-      "integrity": "sha512-F/tkdw0WSs4ojqz5Ovrw5r9odqzFjb5LIgHdHZG65dFI1lWTWRVy32KDJLKRISHgJvqUeUhdIvy43fX41znyDg==",
+      "integrity": "sha512-S4pit5BP6E5R5C8S6tgU/drvgjtYW76FBuG6+ibG3tMvlD1h9LHVF9KmlmaUBQ8Obou7hEyS+0w+IR/VtxwNMQ==",
       "cpu": [
         "arm64"
       ],
@@ -456,9 +494,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.18.1",
+      "version": "4.22.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.5.tgz",
-      "integrity": "sha512-vk+ma8iC1ebje/ahpxpnrfVQJibTMyHdWpOGZ3JpQ7Mgn/3QNHmPq7YwjZbIE7km73dH5M1e6MRRsnEBW7v5CQ==",
+      "integrity": "sha512-250ZGg4ipTL0TGvLlfACkIxS9+KLtIbn7BCZjsZj88zSg2Lvu3Xdw6dhAhfe/FjjXPVNCtcSp+WZjVsD3a/Zlw==",
       "cpu": [
         "arm64"
       ],
@@ -470,9 +508,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.18.1",
+      "version": "4.22.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.18.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.5.tgz",
-      "integrity": "sha512-IgpzXKauRe1Tafcej9STjSSuG0Ghu/xGYH+qG6JwsAUxXrnkvNHcq/NL6nz1+jzvWAnQkuAJ4uIwGB48K9OCGA==",
+      "integrity": "sha512-D8brJEFg5D+QxFcW6jYANu+Rr9SlKtTenmsX5hOSzNYVrK5oLAEMTUgKWYJP+wdKyCdeSwnapLsn+OVRFycuQg==",
       "cpu": [
         "x64"
       ],
@@ -484,9 +522,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.18.1",
+      "version": "4.22.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.18.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.5.tgz",
-      "integrity": "sha512-P9bSiAUnSSM7EmyRK+e5wgpqai86QOSv8BwvkGjLwYuOpaeomiZWifEos517CwbG+aZl1T4clSE1YqqH2JRs+g==",
+      "integrity": "sha512-PNqXYmdNFyWNg0ma5LdY8wP+eQfdvyaBAojAXgO7/gs0Q/6TQJVXAXe8gwW9URjbS0YAammur0fynYGiWsKlXw==",
       "cpu": [
         "arm"
       ],
@@ -498,9 +536,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.18.1",
+      "version": "4.22.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.18.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.5.tgz",
-      "integrity": "sha512-5RnjpACoxtS+aWOI1dURKno11d7krfpGDEn19jI8BuWmSBbUC4ytIADfROM1FZrFhQPSoP+KEa3NlEScznBTyQ==",
+      "integrity": "sha512-kSSCZOKz3HqlrEuwKd9TYv7vxPYD77vHSUvM2y0YaTGnFc8AdI5TTQRrM1yIp3tXCKrSL9A7JLoILjtad5t8pQ==",
       "cpu": [
         "arm"
       ],
@@ -512,9 +550,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.18.1",
+      "version": "4.22.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.18.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.5.tgz",
-      "integrity": "sha512-8mwmGD668m8WaGbthrEYZ9CBmPug2QPGWxhJxh/vCgBjro5o96gL04WLlg5BA233OCWLqERy4YUzX3bJGXaJgQ==",
+      "integrity": "sha512-oTXQeJHRbOnwRnRffb6bmqmUugz0glXaPyspp4gbQOPVApdpRrY/j7KP3lr7M8kTfQTyrBUzFjj5EuHAhqH4/w==",
       "cpu": [
         "arm64"
       ],
@@ -526,9 +564,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.18.1",
+      "version": "4.22.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.18.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.5.tgz",
-      "integrity": "sha512-dJX9u4r4bqInMGOAQoGYdwDP8lQiisWb9et+T84l2WXk41yEej8v2iGKodmdKimT8cTAYt0jFb+UEBxnPkbXEQ==",
+      "integrity": "sha512-qnOTIIs6tIGFKCHdhYitgC2XQ2X25InIbZFor5wh+mALH84qnFHvc+vmWUpyX97B0hNvwNUL4B+MB8vJvH65Fw==",
       "cpu": [
         "arm64"
       ],
@@ -540,9 +578,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.18.1",
+      "version": "4.22.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.18.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.5.tgz",
-      "integrity": "sha512-V72cXdTl4EI0x6FNmho4D502sy7ed+LuVW6Ym8aI6DRQ9hQZdp5sj0a2usYOlqvFBNKQnLQGwmYnujo2HvjCxQ==",
+      "integrity": "sha512-TMYu+DUdNlgBXING13rHSfUc3Ky5nLPbWs4bFnT+R6Vu3OvXkTkixvvBKk8uO4MT5Ab6lC3U7x8S8El2q5o56w==",
       "cpu": [
         "ppc64"
       ],
@@ -554,9 +592,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.18.1",
+      "version": "4.22.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.18.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.5.tgz",
-      "integrity": "sha512-f+pJih7sxoKmbjghrM2RkWo2WHUW8UbfxIQiWo5yeCaCM0TveMEuAzKJte4QskBp1TIinpnRcxkquY+4WuY/tg==",
+      "integrity": "sha512-PTQq1Kz22ZRvuhr3uURH+U/Q/a0pbxJoICGSprNLAoBEkyD3Sh9qP5I0Asn0y0wejXQBbsVMRZRxlbGFD9OK4A==",
       "cpu": [
         "riscv64"
       ],
@@ -568,9 +606,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.18.1",
+      "version": "4.22.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.18.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.5.tgz",
-      "integrity": "sha512-qb1hMMT3Fr/Qz1OKovCuUM11MUNLUuHeBC2DPPAWUYYUAOFWaxInaTwTQmc7Fl5La7DShTEpmYwgdt2hG+4TEg==",
+      "integrity": "sha512-bR5nCojtpuMss6TDEmf/jnBnzlo+6n1UhgwqUvRoe4VIotC7FG1IKkyJbwsT7JDsF2jxR+NTnuOwiGv0hLyDoQ==",
       "cpu": [
         "s390x"
       ],
@@ -582,9 +620,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.18.1",
+      "version": "4.22.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.5.tgz",
-      "integrity": "sha512-7O5u/p6oKUFYjRbZkL2FLbwsyoJAjyeXHCU3O4ndvzg2OFO2GinFPSJFGbiwFDaCFc+k7gs9CF243PwdPQFh5g==",
+      "integrity": "sha512-N0jPPhHjGShcB9/XXZQWuWBKZQnC1F36Ce3sDqWpujsGjDz/CQtOL9LgTrJ+rJC8MJeesMWrMWVLKKNR/tMOCA==",
       "cpu": [
         "x64"
       ],
@@ -596,9 +634,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.18.1",
+      "version": "4.22.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.18.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.5.tgz",
-      "integrity": "sha512-pDLkYITdYrH/9Cv/Vlj8HppDuLMDUBmgsM0+N+xLtFd18aXgM9Nyqupb/Uw+HeidhfYg2lD6CXvz6CjoVOaKjQ==",
+      "integrity": "sha512-uBa2e28ohzNNwjr6Uxm4XyaA1M/8aTgfF2T7UIlElLaeXkgpmIJ2EitVNQxjO9xLLLy60YqAgKn/AqSpCUkE9g==",
       "cpu": [
         "x64"
       ],
@@ -610,9 +648,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.18.1",
+      "version": "4.22.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.18.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.5.tgz",
-      "integrity": "sha512-W2ZNI323O/8pJdBGil1oCauuCzmVd9lDmWBBqxYZcOqWD6aWqJtVBQ1dFrF4dYpZPks6F+xCZHfzG5hYlSHZ6g==",
+      "integrity": "sha512-RXT8S1HP8AFN/Kr3tg4fuYrNxZ/pZf1HemC5Tsddc6HzgGnJm0+Lh5rAHJkDuW3StI0ynNXukidROMXYl6ew8w==",
       "cpu": [
         "arm64"
       ],
@@ -624,9 +662,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.18.1",
+      "version": "4.22.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.18.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.5.tgz",
-      "integrity": "sha512-ELfEX1/+eGZYMaCIbK4jqLxO1gyTSOIlZr6pbC4SRYFaSIDVKOnZNMdoZ+ON0mrFDp4+H5MhwNC1H/AhE3zQLg==",
+      "integrity": "sha512-ElTYOh50InL8kzyUD6XsnPit7jYCKrphmddKAe1/Ytt74apOxDq5YEcbsiKs0fR3vff3jEneMM+3I7jbqaMyBg==",
       "cpu": [
         "ia32"
       ],
@@ -638,9 +676,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.18.1",
+      "version": "4.22.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.18.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.5.tgz",
-      "integrity": "sha512-yjk2MAkQmoaPYCSu35RLJ62+dz358nE83VfTePJRp8CG7aMg25mEJYpXFiD+NcevhX8LxD5OP5tktPXnXN7GDw==",
+      "integrity": "sha512-+lvL/4mQxSV8MukpkKyyvfwhH266COcWlXE/1qxwN08ajovta3459zrjLghYMgDerlzNwLAcFpvU+WWE5y6nAQ==",
       "cpu": [
         "x64"
       ],
@@ -652,9 +690,9 @@
       ]
     },
     "node_modules/@types/estree": {
-      "version": "1.0.5",
+      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
       "dev": true,
       "license": "MIT"
     },
@@ -673,53 +711,53 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.4.31",
+      "version": "3.5.10",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.31.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.10.tgz",
-      "integrity": "sha512-skOiodXWTV3DxfDhB4rOf3OGalpITLlgCeOwb+Y9GJpfQ8ErigdBUHomBzvG78JoVE8MJoQsb+qhZiHfKeNeEg==",
+      "integrity": "sha512-iXWlk+Cg/ag7gLvY0SfVucU8Kh2CjysYZjhhP70w9qI4MvSox4frrP+vDGvtQuzIcgD8+sxM6lZvCtdxGunTAA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.24.7",
+        "@babel/parser": "^7.25.3",
-        "@vue/shared": "3.4.31",
+        "@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",
+      "version": "3.5.10",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.31.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.10.tgz",
-      "integrity": "sha512-wK424WMXsG1IGMyDGyLqB+TbmEBFM78hIsOJ9QwUVLGrcSk0ak6zYty7Pj8ftm7nEtdU/DGQxAXp0/lM/2cEpQ==",
+      "integrity": "sha512-DyxHC6qPcktwYGKOIy3XqnHRrrXyWR2u91AjP+nLkADko380srsC2DC3s7Y1Rk6YfOlxOlvEQKa9XXmLI+W4ZA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.4.31",
+        "@vue/compiler-core": "3.5.10",
-        "@vue/shared": "3.4.31"
+        "@vue/shared": "3.5.10"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.4.31",
+      "version": "3.5.10",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.31.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.10.tgz",
-      "integrity": "sha512-einJxqEw8IIJxzmnxmJBuK2usI+lJonl53foq+9etB2HAzlPjAS/wa7r0uUpXw5ByX3/0uswVSrjNb17vJm1kQ==",
+      "integrity": "sha512-to8E1BgpakV7224ZCm8gz1ZRSyjNCAWEplwFMWKlzCdP9DkMKhRRwt0WkCjY7jkzi/Vz3xgbpeig5Pnbly4Tow==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.24.7",
+        "@babel/parser": "^7.25.3",
-        "@vue/compiler-core": "3.4.31",
+        "@vue/compiler-core": "3.5.10",
-        "@vue/compiler-dom": "3.4.31",
+        "@vue/compiler-dom": "3.5.10",
-        "@vue/compiler-ssr": "3.4.31",
+        "@vue/compiler-ssr": "3.5.10",
-        "@vue/shared": "3.4.31",
+        "@vue/shared": "3.5.10",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.10",
+        "magic-string": "^0.30.11",
-        "postcss": "^8.4.38",
+        "postcss": "^8.4.47",
         "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.4.31",
+      "version": "3.5.10",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.31.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.10.tgz",
-      "integrity": "sha512-RtefmITAje3fJ8FSg1gwgDhdKhZVntIVbwupdyZDSifZTRMiWxWehAOTCc8/KZDnBOcYQ4/9VWxsTbd3wT0hAA==",
+      "integrity": "sha512-hxP4Y3KImqdtyUKXDRSxKSRkSm1H9fCvhojEYrnaoWhE4w/y8vwWhnosJoPPe2AXm5sU7CSbYYAgkt2ZPhDz+A==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.31",
+        "@vue/compiler-dom": "3.5.10",
-        "@vue/shared": "3.4.31"
+        "@vue/shared": "3.5.10"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -729,53 +767,53 @@
       "license": "MIT"
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.4.31",
+      "version": "3.5.10",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.31.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.10.tgz",
-      "integrity": "sha512-VGkTani8SOoVkZNds1PfJ/T1SlAIOf8E58PGAhIOUDYPC4GAmFA2u/E14TDAFcf3vVDKunc4QqCe/SHr8xC65Q==",
+      "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",
+      "version": "3.5.10",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.31.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.10.tgz",
-      "integrity": "sha512-LDkztxeUPazxG/p8c5JDDKPfkCDBkkiNLVNf7XZIUnJ+66GVGkP+TIh34+8LtPisZ+HMWl2zqhIw0xN5MwU1cw==",
+      "integrity": "sha512-9Q86I5Qq3swSkFfzrZ+iqEy7Vla325M7S7xc1NwKnRm/qoi1Dauz0rT6mTMmscqx4qz0EDJ1wjB+A36k7rl8mA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.4.31",
+        "@vue/reactivity": "3.5.10",
-        "@vue/shared": "3.4.31"
+        "@vue/shared": "3.5.10"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.4.31",
+      "version": "3.5.10",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.31.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.10.tgz",
-      "integrity": "sha512-2Auws3mB7+lHhTFCg8E9ZWopA6Q6L455EcU7bzcQ4x6Dn4cCPuqj6S2oBZgN2a8vJRS/LSYYxwFFq2Hlx3Fsaw==",
+      "integrity": "sha512-t3x7ht5qF8ZRi1H4fZqFzyY2j+GTMTDxRheT+i8M9Ph0oepUxoadmbwlFwMoW7RYCpNQLpP2Yx3feKs+fyBdpA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.4.31",
+        "@vue/reactivity": "3.5.10",
-        "@vue/runtime-core": "3.4.31",
+        "@vue/runtime-core": "3.5.10",
-        "@vue/shared": "3.4.31",
+        "@vue/shared": "3.5.10",
         "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.4.31",
+      "version": "3.5.10",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.31.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.10.tgz",
-      "integrity": "sha512-D5BLbdvrlR9PE3by9GaUp1gQXlCNadIZytMIb8H2h3FMWJd4oUfkUTEH2wAr3qxoRz25uxbTcbqd3WKlm9EHQA==",
+      "integrity": "sha512-IVE97tt2kGKwHNq9yVO0xdh1IvYfZCShvDSy46JIh5OQxP1/EXSpoDqetVmyIzL7CYOWnnmMkVqd7YK2QSWkdw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.4.31",
+        "@vue/compiler-ssr": "3.5.10",
-        "@vue/shared": "3.4.31"
+        "@vue/shared": "3.5.10"
       },
       "peerDependencies": {
-        "vue": "3.4.31"
+        "vue": "3.5.10"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.4.31",
+      "version": "3.5.10",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.31.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.10.tgz",
-      "integrity": "sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA==",
+      "integrity": "sha512-VkkBhU97Ki+XJ0xvl4C9YJsIZ2uIlQ7HqPpZOS3m9VCvmROPaChZU6DexdMJqvz9tbgG+4EtFVrSuailUq5KGQ==",
       "license": "MIT"
     },
     "node_modules/anymatch": {
@@ -799,9 +837,9 @@
       "license": "MIT"
     },
     "node_modules/axios": {
-      "version": "1.7.2",
+      "version": "1.7.7",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
-      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
@@ -1073,12 +1111,12 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.10",
+      "version": "0.30.11",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
-      "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
+      "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": {
@@ -1131,9 +1169,9 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.0.1",
+      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -1202,9 +1240,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.39",
+      "version": "8.4.47",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
-      "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
+      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -1222,8 +1260,8 @@
       "license": "MIT",
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.0.1",
+        "picocolors": "^1.1.0",
-        "source-map-js": "^1.2.0"
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -1249,13 +1287,13 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.18.1",
+      "version": "4.22.5",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.1.tgz",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.22.5.tgz",
-      "integrity": "sha512-Elx2UT8lzxxOXMpy5HWQGZqkrQOtrVDDa/bm9l10+U4rQnVzbL/LgZ4NOM1MPIDyHk69W4InuYDF5dzRh4Kw1A==",
+      "integrity": "sha512-WoinX7GeQOFMGznEcWA1WrTQCd/tpEbMkc3nuMs9BT0CPjMdSjPMTVClwWd4pgSQwJdP65SK9mTCNvItlr5o7w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/estree": "1.0.5"
+        "@types/estree": "1.0.6"
       },
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -1265,22 +1303,22 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.18.1",
+        "@rollup/rollup-android-arm-eabi": "4.22.5",
-        "@rollup/rollup-android-arm64": "4.18.1",
+        "@rollup/rollup-android-arm64": "4.22.5",
-        "@rollup/rollup-darwin-arm64": "4.18.1",
+        "@rollup/rollup-darwin-arm64": "4.22.5",
-        "@rollup/rollup-darwin-x64": "4.18.1",
+        "@rollup/rollup-darwin-x64": "4.22.5",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.18.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.22.5",
-        "@rollup/rollup-linux-arm-musleabihf": "4.18.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.22.5",
-        "@rollup/rollup-linux-arm64-gnu": "4.18.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.22.5",
-        "@rollup/rollup-linux-arm64-musl": "4.18.1",
+        "@rollup/rollup-linux-arm64-musl": "4.22.5",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.18.1",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.22.5",
-        "@rollup/rollup-linux-riscv64-gnu": "4.18.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.22.5",
-        "@rollup/rollup-linux-s390x-gnu": "4.18.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.22.5",
-        "@rollup/rollup-linux-x64-gnu": "4.18.1",
+        "@rollup/rollup-linux-x64-gnu": "4.22.5",
-        "@rollup/rollup-linux-x64-musl": "4.18.1",
+        "@rollup/rollup-linux-x64-musl": "4.22.5",
-        "@rollup/rollup-win32-arm64-msvc": "4.18.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.22.5",
-        "@rollup/rollup-win32-ia32-msvc": "4.18.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.22.5",
-        "@rollup/rollup-win32-x64-msvc": "4.18.1",
+        "@rollup/rollup-win32-x64-msvc": "4.22.5",
         "fsevents": "~2.3.2"
       }
     },
@@ -1303,14 +1341,42 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.2.0",
+      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "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",
@@ -1325,15 +1391,15 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.3.3",
+      "version": "5.4.8",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz",
-      "integrity": "sha512-NPQdeCU0Dv2z5fu+ULotpuq5yfCS1BzKUIPhNbP3YBfAMGJXbt2nS+sbTFu+qchaqWTD+H3JK++nRwr6XIcp6A==",
+      "integrity": "sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.21.3",
-        "postcss": "^8.4.39",
+        "postcss": "^8.4.43",
-        "rollup": "^4.13.0"
+        "rollup": "^4.20.0"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -1352,6 +1418,7 @@
         "less": "*",
         "lightningcss": "^1.21.0",
         "sass": "*",
+        "sass-embedded": "*",
         "stylus": "*",
         "sugarss": "*",
         "terser": "^5.4.0"
@@ -1369,6 +1436,9 @@
         "sass": {
           "optional": true
         },
+        "sass-embedded": {
+          "optional": true
+        },
         "stylus": {
           "optional": true
         },
@@ -1381,16 +1451,16 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.4.31",
+      "version": "3.5.10",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.31.tgz",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.10.tgz",
-      "integrity": "sha512-njqRrOy7W3YLAlVqSKpBebtZpDVg21FPoaq1I7f/+qqBThK9ChAIjkRWgeP6Eat+8C+iia4P3OYqpATP21BCoQ==",
+      "integrity": "sha512-Vy2kmJwHPlouC/tSnIgXVg03SG+9wSqT1xu1Vehc+ChsXsRd7jLkKgMltVEFOzUdBr3uFwBCG+41LJtfAcBRng==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.31",
+        "@vue/compiler-dom": "3.5.10",
-        "@vue/compiler-sfc": "3.4.31",
+        "@vue/compiler-sfc": "3.5.10",
-        "@vue/runtime-dom": "3.4.31",
+        "@vue/runtime-dom": "3.5.10",
-        "@vue/server-renderer": "3.4.31",
+        "@vue/server-renderer": "3.5.10",
-        "@vue/shared": "3.4.31"
+        "@vue/shared": "3.5.10"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -1400,6 +1470,30 @@
           "optional": true
         }
       }
+    },
+    "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",
+      "integrity": "sha512-sv6wmNKx2j3aqJQDMxLFzs/u/mjA9Z5LCgy6BE0f7yFWMjrPLnS/sPNn8ARY/FXw6byV18EFutn5lTO6+UsV5A==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
     }
   }
 }

web/themes/custom/caravane/package.json

@@ -11,7 +11,10 @@
   "dependencies": {
     "axios": "^1.7.2",
     "pinia": "^2.1.7",
-    "vue": "^3.4.29"
+    "swiper": "^11.1.14",
+    "vue": "^3.4.29",
+    "vue-image-zoomer": "^2.4.1",
+    "vue-router": "^4.4.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.5",

web/themes/custom/caravane/templates/block--caravane-mainnavigation.html.twig

@@ -36,7 +36,8 @@
 #}
 {% set heading_id = attributes.id ~ '-menu'|clean_id %}
 <nav role="navigation" aria-labelledby="{{ heading_id }}"{{ attributes|without('role', 'aria-labelledby') }}>
-  <div>
+  <div id="menu-title"><p>Menu</p></div>
+  <div id="menu">
     {# Label. If not displayed, we still provide it for screen readers. #}
     {% if not configuration.label_display %}
       {% set title_attributes = title_attributes.addClass('visually-hidden') %}

web/themes/custom/caravane/templates/block--views-block--etapes-block-1.html.twig

@@ -0,0 +1,40 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+<div{{ attributes }}>
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes }}>{{ label }}</h2>
+  {% endif %}
+  {{ title_suffix }}
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</div>

web/themes/custom/caravane/templates/page--node--2.html.twig

@@ -0,0 +1,92 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a single page.
+ *
+ * The doctype, html, head and body tags are not in this template. Instead they
+ * can be found in the html.html.twig template in this directory.
+ *
+ * Available variables:
+ *
+ * General utility variables:
+ * - base_path: The base URL path of the Drupal installation. Will usually be
+ *   "/" unless you have installed Drupal in a sub-directory.
+ * - is_front: A flag indicating if the current page is the front page.
+ * - logged_in: A flag indicating if the user is registered and signed in.
+ * - is_admin: A flag indicating if the user has permission to access
+ *   administration pages.
+ *
+ * Site identity:
+ * - front_page: The URL of the front page. Use this instead of base_path when
+ *   linking to the front page. This includes the language domain or prefix.
+ *
+ * Page content (in order of occurrence in the default page.html.twig):
+ * - messages: Status and error messages. Should be displayed prominently.
+ * - node: Fully loaded node, if there is an automatically-loaded node
+ *   associated with the page and the node ID is the second argument in the
+ *   page's path (e.g. node/12345 and node/12345/revisions, but not
+ *   comment/reply/12345).
+ *
+ * Regions:
+ * - page.header: Items for the header region.
+ * - page.primary_menu: Items for the primary menu region.
+ * - page.secondary_menu: Items for the secondary menu region.
+ * - page.highlighted: Items for the highlighted content region.
+ * - page.help: Dynamic help text, mostly for admin pages.
+ * - page.content: The main content of the current page.
+ * - page.sidebar_first: Items for the first sidebar.
+ * - page.sidebar_second: Items for the second sidebar.
+ * - page.footer: Items for the footer region.
+ * - page.breadcrumb: Items for the breadcrumb region.
+ *
+ * @see template_preprocess_page()
+ * @see html.html.twig
+ *
+ * @ingroup themeable
+ */
+#}
+<div class="layout-container">
+
+  <header role="banner">
+    {{ page.header }}
+  </header>
+
+  {{ page.primary_menu }}
+  {{ page.secondary_menu }}
+
+  {{ page.breadcrumb }}
+
+  {{ page.highlighted }}
+
+  {{ page.help }}
+
+  <main role="main">
+    <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
+
+    <div class="layout-content">
+     {{ page.content }}
+    </div>{# /.layout-content #}
+
+    {% if page.sidebar_first %}
+      <aside class="layout-sidebar-first" role="complementary">
+        {{ page.sidebar_first }}
+      </aside>
+    {% endif %}
+
+    {% if page.sidebar_second %}
+      <aside class="layout-sidebar-second" role="complementary">
+        {{ page.sidebar_second }}
+      </aside>
+    {% endif %}
+
+    <div id="content-modale"></div>
+  </main>
+
+  {% if page.footer %}
+    <footer role="contentinfo">
+      {{ page.footer }}
+    </footer>
+  {% endif %}
+  {{ homepage_content }}
+
+</div>{# /.layout-container #}

web/themes/custom/caravane/templates/page.html.twig

@@ -79,7 +79,7 @@
       </aside>
     {% endif %}
 
-    <div id="etape-modale"></div>
+    <div id="content-modale"></div>
   </main>
 
   {% if page.footer %}

web/themes/custom/caravane/templates/views-view-field--block-1--etape-list.html.twig

@@ -0,0 +1,23 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a single field in a view.
+ *
+ * Available variables:
+ * - view: The view that the field belongs to.
+ * - field: The field handler that can process the input.
+ * - row: The raw result of the database query that generated this field.
+ * - output: The processed output that will normally be used.
+ *
+ * When fetching output from the row this construct should be used:
+ * data = row[field.field_alias]
+ *
+ * The above will guarantee that you'll always get the correct data, regardless
+ * of any changes in the aliasing that might happen if the view is modified.
+ *
+ * @see template_preprocess_views_view_field()
+ *
+ * @ingroup themeable
+ */
+#}
+<p>{{- output -}}</p>

web/themes/custom/caravane/templates/views-view-field--block-2--popup-map.html.twig

@@ -0,0 +1,32 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a single field in a view.
+ *
+ * Available variables:
+ * - view: The view that the field belongs to.
+ * - field: The field handler that can process the input.
+ * - row: The raw result of the database query that generated this field.
+ * - output: The processed output that will normally be used.
+ *
+ * When fetching output from the row this construct should be used:
+ * data = row[field.field_alias]
+ *
+ * The above will guarantee that you'll always get the correct data, regardless
+ * of any changes in the aliasing that might happen if the view is modified.
+ *
+ * @see template_preprocess_views_view_field()
+ *
+ * @ingroup themeable
+ */
+#}
+<div>
+    {% if output %}
+        {% set separated_contents = output|split('\n') %}
+        {% for content in separated_contents %}
+            {% if content != '' %}
+                <div class="separated-content">{{ content|trim }}</div>
+            {% endif %}
+        {% endfor %}
+    {% endif %}
+</div

web/themes/custom/caravane/templates/views-view-fields--block-2--liste-etapes.html.twig

@@ -0,0 +1,61 @@
+{#
+/**
+ * @file
+ * Default view template to display all the fields in a row.
+ *
+ * Available variables:
+ * - view: The view in use.
+ * - fields: A list of fields, each one contains:
+ *   - content: The output of the field.
+ *   - raw: The raw data for the field, if it exists. This is NOT output safe.
+ *   - class: The safe class ID to use.
+ *   - handler: The Views field handler controlling this field.
+ *   - inline: Whether or not the field should be inline.
+ *   - wrapper_element: An HTML element for a wrapper.
+ *   - wrapper_attributes: List of attributes for wrapper element.
+ *   - separator: An optional separator that may appear before a field.
+ *   - label: The field's label text.
+ *   - label_element: An HTML element for a label wrapper.
+ *   - label_attributes: List of attributes for label wrapper.
+ *   - label_suffix: Colon after the label.
+ *   - element_type: An HTML element for the field content.
+ *   - element_attributes: List of attributes for HTML element for field content.
+ *   - has_label_colon: A boolean indicating whether to display a colon after
+ *     the label.
+ *   - element_type: An HTML element for the field content.
+ *   - element_attributes: List of attributes for HTML element for field content.
+ * - row: The raw result from the query, with all data it fetched.
+ *
+ * @see template_preprocess_views_view_fields()
+ *
+ * @ingroup themeable
+ */
+#}
+<div class="infos-arret">
+    {% for field in fields -%}
+    {{ field.separator }}
+    {%- if field.wrapper_element -%}
+        <{{ field.wrapper_element }}{{ field.wrapper_attributes }}>
+    {%- endif %}
+    {%- if field.label -%}
+        {%- if field.label_element -%}
+        <{{ field.label_element }}{{ field.label_attributes }}>{{ field.label }}{{ field.label_suffix }}</{{ field.label_element }}>
+        {%- else -%}
+        {{ field.label }}{{ field.label_suffix }}
+        {%- endif %}
+    {%- endif %}
+    {%- if field.element_type -%}
+        <{{ field.element_type }}{{ field.element_attributes }}>{{ field.content }}</{{ field.element_type }}>
+    {%- else -%}
+        {{ field.content }}
+    {%- endif %}
+    {%- if field.wrapper_element -%}
+        </{{ field.wrapper_element }}>
+    {%- endif %}
+    {%- endfor %}
+</div>
+<div class="icone-arret">
+    <div></div>
+    <div></div>
+    <div></div>
+</div>