index page projets

config/sync/block.block.erabletheme_leprogramme_2.yml

@@ -0,0 +1,31 @@
+uuid: fdcecdf1-6b41-44be-9a67-d1bc81a2eab3
+langcode: fr
+status: true
+dependencies:
+  config:
+    - system.menu.le-
+  module:
+    - menu_block
+  theme:
+    - erabletheme
+id: erabletheme_leprogramme_2
+theme: erabletheme
+region: sidebar_first
+weight: 0
+provider: null
+plugin: 'menu_block:le-'
+settings:
+  id: 'menu_block:le-'
+  label: 'Le Programme'
+  label_display: visible
+  provider: menu_block
+  follow: false
+  follow_parent: child
+  label_link: false
+  label_type: block
+  level: 1
+  depth: 0
+  expand_all_items: false
+  parent: 'le-:'
+  suggestion: le_
+visibility: {  }

config/sync/block.block.erabletheme_unequestion.yml

@@ -1,6 +1,6 @@
 uuid: 8eb6829e-ca59-4575-9995-09c358c6044e
 langcode: fr
-status: true
+status: false
 dependencies:
   content:
     - 'block_content:link:82c97cc5-9a38-42e6-852f-e160d945a338'

config/sync/block.block.erabletheme_votrequestionnexistepas.yml

@@ -1,6 +1,6 @@
 uuid: 06d94b61-c1be-4382-b4e0-2184f06300c7
 langcode: fr
-status: true
+status: false
 dependencies:
   content:
     - 'block_content:link:40c00cc4-49aa-41f8-b27c-3545c6be2982'

config/sync/page_manager.page_variant.home-panels_variant-0.yml

@@ -46,8 +46,8 @@ variant_settings:
       uuid: 42e5f5be-e990-4ced-854c-3f431dbfdcc0
     41595e31-d8d6-4940-a1e5-8687c04af5a5:
       id: sitesmap_block
-      label: 'Sites map Block'
+      label: 'Carte des projets lauréats 2024'
-      label_display: '0'
+      label_display: visible
       provider: erable_mod
       context_mapping: {  }
       region: content

config/sync/views.view.projets.yml

@@ -11,6 +11,8 @@ dependencies:
     - image.style.medium
     - node.type.projet
     - system.menu.main
+  content:
+    - 'config_pages:les_projets:7af1760d-0b6b-42ed-8032-76310f6a4eb2'
   module:
     - image_delta_formatter
     - node
@@ -168,12 +170,7 @@ display:
           replica: false
           query_tags: {  }
       relationships: {  }
-      header:
+      header: {  }
-        entity_config_pages:
-          id: entity_config_pages
-          table: views
-          field: entity_config_pages
-          plugin_id: entity
       footer: {  }
       display_extenders: {  }
     cache_metadata:
@@ -685,8 +682,8 @@ display:
           alter:
             alter_text: false
             text: ''
-            make_link: false
+            make_link: true
-            path: ''
+            path: '/taxonomy/term/{{ field_th__target_id }}'
             absolute: false
             external: false
             replace_spaces: false
@@ -732,7 +729,7 @@ display:
           delta_offset: 0
           delta_reversed: false
           delta_first_last: false
-          multi_type: separator
+          multi_type: ul
           separator: ', '
           field_api_classes: false
       defaults:
@@ -747,8 +744,8 @@ display:
           group_type: group
           admin_label: ''
           plugin_id: entity
-          empty: true
+          empty: false
-          target: b8729588-5a4f-450a-ac00-e472ef8922be
+          target: 7af1760d-0b6b-42ed-8032-76310f6a4eb2
           view_mode: default
           tokenize: true
           bypass_access: false

web/modules/custom/erable_mod/assets/css/carte-interactive.css

@@ -1,7 +1,7 @@
 #sites-map-container {
   position: relative;
   margin: 0 auto;
-  max-width: 40vw;
+  width: 100%;
 }
 
 #map_base {

web/modules/custom/erable_mod/assets/css/carte-interactive.old.css

@@ -1,91 +0,0 @@
-#sites-map-container {
-  text-align: center;
-  position: relative;
-  width: 100%;  /* Prend toute la largeur du conteneur parent */
-  max-width: 800px; /* Optionnel : Limiter la largeur maximale */
-  margin: 0 auto; /* Centrer le conteneur */
-  height: auto; /* Permet à la hauteur de s'ajuster automatiquement */
-  @media (max-width: 810px) {
-    width: 80%;  /* Prend toute la largeur du conteneur parent */
-  }
-  @media (max-width: 530px) {
-    width: 100%;  /* Prend toute la largeur du conteneur parent */
-    height: 485px;
-  }
-  @media (max-width: 400px) {
-    width: 100%;  /* Prend toute la largeur du conteneur parent */
-    height: 430px;
-  }
-}
-
-
-
-/* Changer la couleur au survol (hover) */
-#sites-map-container .site-link:hover{
-  cursor: pointer;
-}
-
-
-/* Styles du popup (caché par défaut) */
-#sites-map-container #popup {
-  display: none;
-  position: absolute;
-  z-index: 1000;
-  text-align: left;
-  padding-left: 1rem;
-  pointer-events: none;
-  @media (max-width: 1090px) {
-    bottom: 20px;
-  }
-
-}
-
-/* Position du popup à droite lorsque l'écran est plus grand que 1090px */
-@media (min-width: 1090px) {
-  #sites-map-container #popup {
-    top: 50%; /* Centrer verticalement */
-    left: 80%; /* Placer le popup à droite de la carte */
-    transform: translateY(-50%); /* Ajuster pour centrer verticalement */
-    width: 300px;
-  }
-}
-
-
-#sites-map-container strong{
-  color: #f7002b;
-}
-#sites-map-container a{
-  display: none;
-  align-items: center;
-  color: white;
-  background: black;
-  text-transform: uppercase;
-  font-size: 0.8rem;
-  padding-left: 0.5rem;
-  text-decoration: none;
-  margin-top: 0.7rem;
-  height: 1.3rem;
-}
-#sites-map-container a:after{
-        display: inline-flex;
-        content: url("../img/noun-arrow-to-right.svg");
-        padding-right: 0.2rem;
-        padding-left: 0.2rem;
-
-}
-
-#popup-content{
-  width: 300px;
-  padding-right: 30px;
-
-  p{
-    font-size: 0.7rem;
-  }
-  @media (max-width : 810px) {
-    width: 300px;
-    background-color: white;
-    border-radius: 5px;
-    padding: 0.5rem;
-    padding-left: 1rem;
-  }
-}

web/modules/custom/erable_mod/assets/js/carte-interactive.js

@@ -186,7 +186,7 @@ function placeProjectsIcons(projectsIcons) {
 
     const territory = findTerritory(lat, lon);
 
-    console.log(icon.dataset.title, territory);
+    // console.log(icon.dataset.title, territory);
 
 
     if (territory && localisationMapPlacements[territory]) {
@@ -261,8 +261,11 @@ function hidePopup(){
 
 placeProjectsIcons(projectsIcons);
 // debugMapPlacement();
-
+document.addEventListener('DOMContentLoaded', () => {
-window.addEventListener('resize', placeProjectsIcons(projectsIcons));
+  window.addEventListener('resize', () => {
+    placeProjectsIcons(projectsIcons)
+  });
+});
 
 function debugMapPlacement() {
   const container = document.querySelector('#sites-map-container');

web/modules/custom/erable_mod/assets/js/carte-interactive.js.old

@@ -1,115 +0,0 @@
-// // Sélection des éléments principaux
-const svgElement = document.querySelector('#sites-map-container svg');
-const popup = document.querySelector('#sites-map-container #popup');
-const popupContent = document.querySelector('#sites-map-container #popup-content');
-const modalBackground = document.querySelector('#sites-map-container #modal-background');
-
-// Vérifiez si la page contient la classe '.node-type-site'
-const isSitePage = document.body.classList.contains('node-type-site');
-console.log(isSitePage);
-
-
-
-// Fonction pour afficher le popup
-function showPopup(content, x, y, isLeftHalf) {
-    // Si on est sur une page avec la classe 'node-type-site', ne pas afficher le popup
-    if (isSitePage) return;
-
-    popupContent.innerHTML = content;
-
-
-    // Afficher le popup et le fond de modal
-    popup.style.display = 'block';
-    modalBackground.style.display = 'block';
-
-}
-
-// Fonction pour fermer le popup
-function closePopup() {
-    popup.style.display = 'none';
-    modalBackground.style.display = 'none'; // Désactiver le fond modal
-}
-
-// Gérer le survol des cercles (au lieu du clic)
-svgElement.addEventListener('mouseover', function(event) {
-    if (event.target.classList.contains('site-link')) {
-        const content = event.target.getAttribute('data-content');
-
-        // Afficher le popup avec la position et l'alignement adaptés
-        showPopup(content);
-    }
-
-    // Gestion du changement de couleur sur le cercle
-    if (event.target.tagName === 'circle') {
-        event.target.setAttribute('fill', 'red');
-    }
-});
-
-// Fermer le popup lorsque la souris quitte le cercle
-svgElement.addEventListener('mouseout', function(event) {
-    if (event.target.classList.contains('site-link')) {
-        closePopup();
-    }
-
-    // Réinitialiser la couleur du cercle au survol de la souris
-    if (event.target.tagName === 'circle') {
-        event.target.setAttribute('fill', 'black'); // Remettre en noir
-    }
-});
-
-
-// Mettre à jour la logique de calcul des positions
-function recalculateSitePositions() {
-    const allSites = document.querySelectorAll('.site-link');
-
-    allSites.forEach((site, index) => {
-        const geofield = site.getAttribute('data-geofield'); // Assurez-vous que ces attributs sont bien définis
-        const lon = parseFloat(geofield.split(',')[0]);
-        const lat = parseFloat(geofield.split(',')[1]);
-
-        const x = round((lon - lonLeft) / (lonRight - lonLeft) * vp_w);
-        const y = round((latTop - lat) / (latTop - latBottom) * vp_h);
-
-        site.setAttribute('transform', `translate(${x}, ${y})`);
-    });
-}
-
-window.addEventListener('resize', function() {
-    recalculateSitePositions();
-    if (popup.style.display === 'block') {
-        const currentPopupRect = popup.getBoundingClientRect();
-        const rect = svgElement.getBoundingClientRect();
-        showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.top);
-    }
-});
-
-// Gérer le clic ou le toucher des cercles
-function handleCircleClick(content) {
-    showPopup(content, event.clientX, event.clientY, event.target.getAttribute('data-left-half') === 'true');
-}
-
-// Écouter les événements de clic et de toucher sur le SVG
-svgElement.addEventListener('click', function(event) {
-    if (event.target.classList.contains('site-link') || event.target.tagName === 'rect') {
-        const content = event.target.getAttribute('data-content');
-        handleCircleClick(content);
-    }
-});
-
-
-///////////////////// page site point rouge  quand sur page ///////////////////////
-
-// Récupérer l'ID de la page depuis la classe du body
-const body = document.querySelector('body');
-const pageId = body.className.match(/node-id-(\d+)/)[1];  // Extraire l'ID de la page
-
-// Sélectionner le groupe SVG qui a l'ID correspondant
-const matchingGroup = document.querySelector(`#site-${pageId}`);
-
-// Si un groupe correspondant est trouvé, changer la couleur du cercle à l'intérieur
-if (matchingGroup) {
-    const circle = matchingGroup.querySelector('circle');  // Sélectionner le cercle à l'intérieur du groupe
-    if (circle) {
-        circle.setAttribute('fill', 'red');  // Changer la couleur du cercle
-    }
-}

web/modules/custom/erable_mod/erable_mod.libraries.yml

@@ -1,7 +1,6 @@
 sites_map_block:
   css:
     theme:
-      assets/css/fontface.scss: {}
       assets/css/carte-interactive.css: {}
   js:
-    assets/js/carte-interactive.js: {}
+    assets/js/carte-interactive.js: {}

web/modules/custom/erable_mod/erable_mod.module

@@ -11,7 +11,7 @@
 function erable_mod_theme() {
   return array(
     'svg_mapsites' => array(
-      'variables' => array('vpw' => null, 'vph' => null, 'sites' => []),
+      'variables' => array('sites' => [], 'intro' => null),
     ),
   );
-}
+}

web/modules/custom/erable_mod/src/Plugin/Block/SitesMap.php

@@ -26,6 +26,9 @@ class SitesMap extends BlockBase {
     $allSites = \Drupal::entityTypeManager()->getStorage('node')
           ->loadByProperties(['type' => 'projet', 'status' => 1]);
 
+    $intro_text = \Drupal::entityTypeManager()->getStorage('config_pages')
+          ->load('2')->get('field_intro')-> value;
+
     $sites_paths = "";
 
     foreach($allSites as $index => $site){
@@ -35,11 +38,8 @@ class SitesMap extends BlockBase {
 
       $link_options = ['absolute' => FALSE, 'attributes' => ['class' => 'site-link']];
       $site_link_object = Link::createFromRoute("voir le site", 'entity.node.canonical', ['node' => $site->id()], $link_options);
-      // $link = $site_link_object->toString()->getGeneratedLink();
       $href = $site_link_object->getUrl()->toString();
 
-      // $datacontent = htmlspecialchars("<strong>$title</strong><br>$subtitle<br>$link");
-
       $geofield = $site->get('field_carte')->get(0);
       $lon = $geofield->lon;
       $lat = $geofield->lat;
@@ -60,6 +60,7 @@ class SitesMap extends BlockBase {
       'svg_mapsites' => [
         '#theme' => 'svg_mapsites',
         '#sites' => $sites_paths,
+        '#intro' => $intro_text,
         '#attached' => [
           'library' => [
             'erable_mod/sites_map_block',
@@ -69,9 +70,6 @@ class SitesMap extends BlockBase {
     ];
 
     return $return;
-    // return [
-    //   '#markup' => $this->t('Hello, Sites Map!'),
-    // ];
   }
   public function getCacheMaxAge() {
     return 0;

web/modules/custom/erable_mod/templates/svg-mapsites.html.twig

@@ -1,3 +1,6 @@
+<div class="projets_intro">
+  {{ intro|raw }}
+</div>
 <div id="sites-map-container">
   {# <svg {{ svg_attributes }}>
     <path {{ path_attributes }}></path>

web/themes/erabletheme/assets/cercle_dessin.svg

@@ -0,0 +1 @@
+<svg width="108.419" xmlns="http://www.w3.org/2000/svg" height="108.092" fill="none"><g style="fill: rgb(0, 0, 0);"><path d="M53.605 108.065a9.942 9.942 0 0 0-1.683-.015c-.776.074-3.383-.459-3.919-.802-.12-.078-.544-.173-.941-.214-.398-.036-1.149-.187-1.669-.329-1.571-.426-2.372-.605-3.239-.722-.454-.061-.976-.218-1.16-.348-.183-.13-.568-.277-.855-.329-.286-.052-.941-.269-1.455-.485-.515-.216-1.094-.376-1.289-.356-.195.026-.482-.088-.64-.242-.157-.153-.678-.418-1.159-.589-1.398-.498-4.034-1.643-4.601-2-.287-.181-.618-.318-.736-.306-.119.015-.47-.176-.782-.416-.544-.421-1.082-.749-2.93-1.788-.462-.26-1.662-1.102-2.667-1.871-1.005-.768-2.065-1.548-2.356-1.731-1.029-.649-6.502-3.595-7.426-4.943-.215-.316-.772-.947-1.236-1.404-.464-.457-1.019-1.089-1.234-1.403-.957-1.407-4.13-6.791-4.157-7.056-.015-.161-.485-1.022-1.04-1.913-1.297-2.082-2.961-5.629-3.547-7.561-.434-1.43-1.57-7.99-1.434-8.281.037-.076-.175-1.157-.466-2.403.038-9.187-1.287-5.212-.92-12.207.157-2.86 1.497-15.281 2.09-16.902.827-2.259 1.863-8.206 3.081-9.679 2.466-2.983 5.326-6.077 6.373-6.897a331.45 331.45 0 0 0 2.877-2.306c2.684-2.171 4.009-3.036 5.78-3.77a61.243 61.243 0 0 0 2.928-1.325c.803-.394 2.124-.95 2.936-1.237a25.144 25.144 0 0 0 2.831-1.239c.746-.396 1.471-.731 1.611-.746.141-.016 1.287-.493 2.546-1.061 1.352-.611 2.904-1.153 3.791-1.326C38.279 1.595 48.11.304 50.512.075c2.113-.199 4.148.004 5.369.541.353.156 1.005.311 1.449.345.443.031 1.619.344 2.612.69 1.005.349 2.173.608 2.632.584 1.245-.063 2.552.205 4.005.823 2.906 1.237 3.112 1.297 7.301 2.128.55.109 1.556.574 2.254 1.042.693.465 1.785 1.028 2.427 1.253 1.139.398 1.861.898 3.304 2.288.668.644 2.241 1.329 3.442 1.5.688.099 2.242 1.319 3.43 2.694.511.591 1.203 1.175 1.538 1.297.836.304 3.976 2.848 4.815 3.901.378.475.935 1.364 1.238 1.976.396.799.779 1.244 1.354 1.577 1.051.608 3.679 3.578 5.005 5.656.708 1.111 1.141 2.043 1.321 2.849.148.659.381 1.508.517 1.887s.41 1.224.609 1.877c.199.654.798 2.43 1.331 3.948a32.715 32.715 0 0 1 1.47 5.669c.275 1.601.475 2.965.444 3.031-.03.066-.026 1.398.027 2.96.046 1.687-.03 3.39-.191 4.196a49.596 49.596 0 0 0-.483 3.115c-.118.967-.345 2.324-.506 3.015-.162.691-.4 2.003-.53 2.916-.339 2.386-.762 3.629-1.628 4.779-.896 1.19-1.067 1.577-1.143 2.596-.03.418-.312 1.229-.624 1.803-.828 1.519-1.051 2.2-1.079 3.295-.03 1.39-.395 2.141-1.358 2.849-.792.582-2.13 2.184-2.101 2.514.018.218-1.209 1.778-2.233 2.838-.484.5-1.064 1.388-1.289 1.973-.743 1.929-.935 2.148-2.357 2.696-.777.3-1.786.906-2.46 1.477a32.982 32.982 0 0 1-2.165 1.67c-.563.386-1.486 1.326-2.052 2.09-.567.763-1.363 1.57-1.769 1.792a7.793 7.793 0 0 0-1.31.934c-.314.291-.973.638-1.465.77-.492.133-1.032.333-1.2.444-.168.111-.874.356-1.569.544-.885.239-1.549.582-2.211 1.141-1.959 1.658-4.901 2.981-8.047 3.62-2.589.525-4.31 1.086-5.494 1.79-.774.461-2.885 1.185-4.734 1.625-2.313.55-3.404.834-3.68.955-.161.071-.665.086-1.123.037Zm11.404-5.251c1.352-.507 2.76-1.112 3.129-1.345a7.618 7.618 0 0 1 1.262-.632 9.23 9.23 0 0 0 1.17-.534c.319-.179.976-.48 1.463-.668.485-.189 1.709-.801 2.718-1.361 3.161-1.754 5.087-2.725 6.308-3.18.649-.241 1.826-.83 2.616-1.308 1.472-.89 4.242-3.18 4.469-3.694.07-.158.67-.79 1.334-1.404 1.89-1.751 3.441-3.641 4.071-4.963.317-.667 1.319-2.101 2.225-3.187 2.657-3.183 4.402-6.134 5.559-9.401.864-2.44 1.26-3.663 1.242-3.834-.011-.082.118-.537.281-1.011l.94-2.737c1.279-3.724 2.232-9.935 2.194-14.312-.026-2.377-.468-4.975-1.311-7.59-.594-1.847-.887-2.947-1.452-5.446-.617-2.733-1.277-4.228-2.804-6.348a153.158 153.158 0 0 1-2.514-3.62c-1.558-2.329-2.612-3.568-4.566-5.365-3.876-3.566-9.096-7.295-13.422-9.589-3.367-1.786-6.413-3.278-6.965-3.412a2.806 2.806 0 0 1-.721-.31c-.181-.119-.705-.291-1.164-.384-.46-.092-1.882-.514-3.163-.937-1.28-.424-3.041-1.005-3.914-1.293-2.397-.791-5.922-1.512-7.357-1.506-.703.002-1.613-.121-2.023-.274-1.063-.4-3.245-.461-7.132-.203-3.309.22-5.433.624-8.653 1.645-.49.155-1.521.407-2.292.558-.826.163-2.402.738-3.838 1.401-4.856 2.24-8.656 4.091-9.375 4.567-.404.267-.864.5-1.024.516-.354.031-1.939.737-2.765 1.222-.333.195-.675.363-.759.372-.282.031-3.641 2.079-4.599 2.806-2.041 1.55-6.245 6.104-7.152 7.748-.364.659-1.769 5.258-2.138 6.998-.189.892-.41 2.774-.49 4.183-.081 1.408-.289 3.311-.463 4.228-1.535 8.969-2.899 13.525-.996 21.686.682 2.874 3.432 10.78 4.56 13.111.774 1.598 2.258 5.12 2.291 5.436.131 1.258 4.504 8.963 6.197 10.921 1.889 2.184 8.381 4.947 11.007 6.135.748.338 1.95.977 2.67 1.418 2.256 1.383 3.337 1.889 7.401 3.467 2.172.844 4.344 1.707 4.827 1.918.482.211 1.961.682 3.286 1.047 2.215.61 2.631.657 5.149.58 1.506-.046 4.873-.333 7.482-.638 4.608-.539 4.813-.581 7.201-1.477Z" style="stroke-width: 0.999992; fill: rgb(36, 180, 150);" class="fills"/></g></svg>

web/themes/erabletheme/assets/shapes/shape_1.svg

@@ -0,0 +1 @@
+<svg width="222.286" xmlns="http://www.w3.org/2000/svg" height="250.807" viewBox="7878 1982 222.286 250.807" fill="none"><path d="M7956.274 1986.469c25.826-15.086 24.896 10.832 72.919 35.887 41.211 21.501 51.92 2.311 60.932 33.947 16.959 59.537 14.65 49.316-21.976 102.812-42.619 62.248-26.611 59.748-96.892 70.804-48.919 7.695-58.343 2.108-81.909-42.677-23.049-43.801-6.853-33.684 11.987-90.202 25.777-77.331-4.474-75.867 54.939-110.571Z" style="fill: rgb(177, 178, 181); fill-opacity: 1;" class="fills"/></svg>

web/themes/erabletheme/assets/shapes/shape_2.svg

@@ -0,0 +1 @@
+<svg width="246.591" xmlns="http://www.w3.org/2000/svg" height="246.879" viewBox="8155 1982 246.591 246.879" fill="none"><path d="M8256.909 1982.503c76.411 8.718 66.157-14.28 112 36 36.824 40.387 2.098 33.617 12 100 8.098 54.284 31.324 71.301 15 81-75.676 44.968-62.248 32.62-153 1-56.582-19.714-40.462-17.852-68-78-23.129-50.519-26.519-38.204-8-88 11.481-30.87 16.98-12.188 53-33 23.98-13.855 14.077-21.615 37-19Z" style="fill: rgb(177, 178, 181); fill-opacity: 1;" class="fills"/></svg>

web/themes/erabletheme/assets/shapes/shape_3.svg

@@ -0,0 +1 @@
+<svg width="230.664" xmlns="http://www.w3.org/2000/svg" height="241.787" viewBox="7868 2259 230.664 241.787" fill="none"><path d="M7963.867 2265.939c58.528-9.681 50.845-14.68 94 23 46.178 40.32 38.587 30.769 40 94 1.253 56.102 5.89 49.362-36 85-47.444 40.362-34.76 34.359-98 29-54.76-4.641-56.58.554-79-44-29.58-58.779-14.343-40.179 1-111 3.183-14.695 10.234-4.116 26.788-17.274 9.446-7.509 4.162-4.495 12.212-13.726 26.091-29.92 8.862-40.015 39-45Z" style="fill: rgb(177, 178, 181); fill-opacity: 1;" class="fills"/></svg>

web/themes/erabletheme/assets/shapes/shape_4.svg

@@ -0,0 +1 @@
+<svg width="219.442" xmlns="http://www.w3.org/2000/svg" height="223.162" viewBox="8214 2263 219.442 223.162" fill="none"><path d="M8285.563 2265.424c70.579-3.629 54.165-9.494 108 36 40.831 34.506 28.952 26.455 34 84 4.952 56.455 16.723 53.83-19 87-29.611 27.496-26.449 5.468-79 4-66.782-1.865-64.362 27.389-100-9-27.695-28.278 9.074-29.852 5-88-3.259-46.519-31.368-34.647-16-69 18.632-41.647 20.913-42.629 67-45Z" style="fill: rgb(177, 178, 181); fill-opacity: 1;" class="fills"/></svg>

web/themes/erabletheme/css/styles.css

@@ -58,8 +58,22 @@ a {
         margin-top: calc(10vh + 3rem);
     }
 } */
+body {
+  background-color: lightgrey;
+}
+
 .layout-container {
-  margin: 0 !important;
+  display: flex;
+}
+
+main:has(#block-erabletheme-leprogramme-2) {
+  display: flex;
+  flex-direction: column-reverse;
+}
+@media screen and (min-width: 760px) {
+  main:has(#block-erabletheme-leprogramme-2) {
+    flex-direction: row-reverse;
+  }
 }
 
 strong {
@@ -808,7 +822,7 @@ body.toolbar-fixed header[role=banner] {
 }
 .views-row article.actu-teaser > div:first-of-type {
   width: 100%;
-  aspect-ratio: 16/9;
+  aspect-ratio: 20/9;
   overflow: hidden;
   padding-left: 3vw;
   padding-right: 3vw;
@@ -851,6 +865,7 @@ body.toolbar-fixed header[role=banner] {
 }
 .views-row article.actu-teaser h2 {
   margin-bottom: 0.5rem;
+  margin-top: 1rem !important;
   font-family: "Barlow Condensed", sans-serif;
   font-size: 1.2rem;
   padding: 0 3vw;
@@ -959,7 +974,8 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   background-color: white;
   width: 100%;
   box-sizing: border-box;
-  padding: 4rem 1rem;
+  padding: 3rem 1rem;
+  margin: 2rem 0;
 }
 .home_introduction h2 {
   display: none;
@@ -975,12 +991,12 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   width: 50%;
   height: auto;
 }
-@media (min-width: 760px) {
+@media (min-width: 1080px) {
   .home_introduction > .logo img {
     width: 100%;
   }
 }
-@media (min-width: 760px) {
+@media (min-width: 1080px) {
   .home_introduction > .logo {
     width: 170%;
     margin: 0 3rem;
@@ -998,9 +1014,15 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
 }
 @media (min-width: 760px) {
   .home_introduction article > div p {
+    padding-left: 3rem;
     padding-right: 3rem;
   }
 }
+@media (min-width: 1080px) {
+  .home_introduction article > div p {
+    padding-left: 0;
+  }
+}
 @media (min-width: 760px) {
   .home_introduction article > div {
     padding: 0 !important;
@@ -1045,6 +1067,10 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
     margin-left: 20vw;
     margin-right: 20vw;
     width: calc(100% - 40vw);
+  }
+}
+@media (min-width: 1080px) {
+  .home_introduction {
     display: flex;
     justify-content: space-around;
   }
@@ -1150,18 +1176,74 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   }
 }
 
-#sites-map-container #popup h3 {
+.map-projets {
+  background-color: white;
+  padding: 1rem 0;
+  margin-left: 3vw;
+  width: calc(100% - 3vw * 2);
+}
+@media (min-width: 760px) {
+  .map-projets {
+    margin-left: 20vw;
+    width: calc(100% - 40vw);
+  }
+}
+@media (min-width: 1080px) {
+  .map-projets {
+    margin-left: 25vw;
+    width: calc(100% - 50vw);
+  }
+}
+.map-projets > h2 {
+  font-family: "Barlow Condensed", sans-serif;
+  font-size: 1.2rem;
+  padding: 0 3vw;
+  margin-top: 1rem;
+  color: #038788;
+  text-transform: uppercase;
+}
+.map-projets > h2 a {
+  color: #038788;
+}
+@media (min-width: 760px) {
+  .map-projets > h2 {
+    font-size: 2.3rem;
+  }
+}
+.map-projets > .projets_intro {
+  padding: 0 3vw;
+  font-family: "Marianne", sans-serif;
+  font-size: 1rem;
+  line-height: 1.4;
+}
+.map-projets > .projets_intro h1, .map-projets > .projets_intro h2, .map-projets > .projets_intro h3,
+.map-projets > .projets_intro h4, .map-projets > .projets_intro h5, .map-projets > .projets_intro h6 {
+  font-family: "Barlow", sans-serif;
+  color: black;
+  font-size: 1.6rem;
+}
+.map-projets > .projets_intro a {
+  color: black;
+}
+.map-projets > .projets_intro > p {
+  margin: 1rem 0;
+}
+.map-projets > #sites-map-container {
+  margin: 0 2rem;
+  width: calc(100% - 4rem);
+}
+.map-projets > #sites-map-container #popup h3 {
   font-family: "Marianne", sans-serif;
   font-size: 0.9rem;
   color: #038788;
   font-weight: 800;
 }
 @media (min-width: 760px) {
-  #sites-map-container #popup h3 {
+  .map-projets > #sites-map-container #popup h3 {
     font-size: 1.2rem;
   }
 }
-#sites-map-container #popup p {
+.map-projets > #sites-map-container #popup p {
   font-family: "Marianne", sans-serif;
   font-size: 1rem;
   line-height: 1.4;
@@ -1169,15 +1251,14 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
 
 .fullpage {
   margin-bottom: 10vh;
-  margin-top: -3vh;
   padding-top: 3vh;
-  background: linear-gradient(to bottom, #fcf9ee 80%, white 100%);
+  padding-bottom: 3vh;
+  background-color: white;
   position: relative;
 }
-.fullpage > h2 {
+.fullpage h2 {
-  margin-top: 5vh;
+  margin-top: 5vh !important;
   margin-bottom: 7vh;
-  background-color: #fcf9ee;
   z-index: 1;
   position: relative;
   width: auto;
@@ -1189,51 +1270,21 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   color: #038788;
   text-transform: uppercase;
 }
-.fullpage > h2 a {
+.fullpage h2 a {
   color: #038788;
 }
 @media (min-width: 760px) {
-  .fullpage > h2 {
+  .fullpage h2 {
     font-size: 2.3rem;
   }
 }
-@media (min-width: 760px) {
-  .fullpage > h2 {
-    background-color: unset;
-  }
-}
 .fullpage .legende {
   display: block !important;
   font-size: 0.8rem;
   color: #314e41;
 }
 .fullpage .fullpage_content > h2 {
-  margin-top: 5vh;
   margin-bottom: 1rem;
-  background-color: #fcf9ee;
-  z-index: 1;
-  position: relative;
-  width: auto;
-  display: inline-block;
-  font-family: "Barlow Condensed", sans-serif;
-  font-size: 1.2rem;
-  padding: 0 3vw;
-  margin-top: 1rem;
-  color: #038788;
-  text-transform: uppercase;
-}
-.fullpage .fullpage_content > h2 a {
-  color: #038788;
-}
-@media (min-width: 760px) {
-  .fullpage .fullpage_content > h2 {
-    font-size: 2.3rem;
-  }
-}
-@media (min-width: 760px) {
-  .fullpage .fullpage_content > h2 {
-    background-color: unset;
-  }
 }
 .fullpage .fullpage_content .sous_titre {
   font-size: 1.2rem;
@@ -1313,7 +1364,7 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
 }
 @media (min-width: 760px) {
   .fullpage {
-    margin-top: 2vh;
+    margin-top: 5vh;
     padding-top: 0;
     width: 75vw;
     margin-left: 12.5vw;
@@ -1321,7 +1372,8 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
 }
 @media (min-width: 1080px) {
   .fullpage {
-    width: 50%;
+    margin-top: 13vh;
+    width: 50vw;
     margin-left: 25%;
   }
 }
@@ -1333,12 +1385,121 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   }
 }
 
+@media (min-width: 760px) {
+  main:has(#block-erabletheme-leprogramme-2) .fullpage {
+    width: 70vw;
+    margin-left: 2vw;
+  }
+}
+@media (min-width: 1080px) {
+  main:has(#block-erabletheme-leprogramme-2) .fullpage {
+    width: 50vw;
+    margin-left: 3vw;
+    margin-right: 24vw;
+  }
+}
+
+aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) {
+  height: auto;
+  margin-top: 2vh;
+  margin-bottom: 2vh;
+}
+@media screen and (min-width: 760px) {
+  aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) {
+    margin-top: 5vh;
+    margin-bottom: 0;
+  }
+}
+@media screen and (min-width: 1080px) {
+  aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) {
+    margin-top: 13vh;
+  }
+}
+aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div {
+  width: auto;
+  display: inline-block;
+}
+@media screen and (min-width: 760px) {
+  aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div {
+    position: sticky;
+    top: 5vh;
+    width: 27vw;
+  }
+}
+@media screen and (min-width: 1080px) {
+  aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div {
+    top: 12vh;
+    width: 22vw;
+  }
+}
+aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 {
+  padding: 1.5rem;
+  background-color: white;
+  margin-left: 2vw;
+}
+aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > h2 {
+  padding-bottom: 1rem;
+  border-bottom: solid 1px #038788;
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+}
+aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > h2 > span {
+  font-family: "Marianne", sans-serif;
+  font-size: 0.9rem;
+  color: #038788;
+  font-weight: 800;
+}
+@media (min-width: 760px) {
+  aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > h2 > span {
+    font-size: 1.2rem;
+  }
+}
+aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > h2 > div {
+  mask-image: url("/themes/erabletheme/assets/icons/arrow-down-s-line.svg");
+  background-size: contain;
+  background-color: #038788;
+  width: 1.3rem;
+  height: 1.3rem;
+  color: #038788;
+  transform: rotate(0deg);
+  transition: transform 0.3s ease;
+}
+aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > h2 > div.closed {
+  transform: rotate(180deg);
+}
+aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > ul {
+  max-height: 100vh;
+  overflow: hidden;
+  transition: max-height 0.6s ease;
+}
+aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > ul > li {
+  margin: 1rem 0;
+  font-family: "Marianne", sans-serif;
+  font-size: 1rem;
+  line-height: 1.4;
+}
+aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > ul > li > a {
+  color: black;
+  font-size: 0.9rem;
+}
+aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > ul > li > a:hover, aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > ul > li > a.is-active {
+  font-weight: 800;
+}
+aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > ul.closed {
+  max-height: 0vh;
+}
+
 .paragraph--type--membre-equipe {
   height: auto;
   display: grid;
   grid-template-columns: 30vw auto 1fr;
   grid-auto-rows: auto;
   margin-bottom: 5vh;
+  padding: 0 3vw !important;
+}
+.paragraph--type--membre-equipe:first-of-type {
+  margin-top: 5vh;
 }
 .paragraph--type--membre-equipe > div:first-of-type {
   grid-row: 1/3;
@@ -1348,14 +1509,26 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
 .paragraph--type--membre-equipe > div:first-of-type > div {
   width: 20vw;
   height: 20vw;
-  overflow: hidden;
+  position: relative;
-  border-radius: 10vw;
 }
 .paragraph--type--membre-equipe > div:first-of-type > div img {
+  border-radius: 10vw;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
+.paragraph--type--membre-equipe > div:first-of-type > div::after {
+  top: 0;
+  left: 0;
+  position: absolute;
+  content: "";
+  height: 100%;
+  width: 100%;
+  background-image: url("/themes/erabletheme/assets/cercle_dessin.svg");
+  background-size: cover;
+  display: block;
+  pointer-events: none;
+}
 .paragraph--type--membre-equipe > div:nth-of-type(2),
 .paragraph--type--membre-equipe > div:nth-of-type(3) {
   margin-bottom: 2vh;
@@ -1380,6 +1553,10 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   font-size: 1rem;
   line-height: 1.4;
 }
+.paragraph--type--membre-equipe > div:last-of-type > div > p {
+  margin-top: 0 !important;
+  padding-left: 0;
+}
 @media (min-width: 760px) {
   .paragraph--type--membre-equipe {
     grid-template-columns: 10vw auto 1fr;
@@ -1392,7 +1569,7 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   .paragraph--type--membre-equipe > div:nth-of-type(2) {
     padding-left: 3vw;
   }
-  .paragraph--type--membre-equipe > div:last-of-type {
+  .paragraph--type--membre-equipe > div:last-of-type > div > p {
     padding-left: 3vw;
   }
 }
@@ -1431,6 +1608,7 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   display: grid;
   grid-template-columns: 0.3fr 1fr;
   align-items: center;
+  padding: 0 3vw;
 }
 .content_partenaires .views-row article > div:first-of-type > div:first-of-type > div {
   width: 30vw;
@@ -1699,6 +1877,7 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   grid-row: 1/7;
   align-self: center;
   justify-self: center;
+  position: relative;
 }
 .fullpage.meetup > .meetup_list > .views-row > a > article > a:not(.author, .offre-title, [title="Voir le profil utilisateur."]) > img, .fullpage.meetup > .meetup_list > .views-row > article > a:not(.author, .offre-title, [title="Voir le profil utilisateur."]) > img {
   width: 10rem;
@@ -1707,6 +1886,18 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   padding: 1rem;
   margin-right: 1rem;
 }
+.fullpage.meetup > .meetup_list > .views-row > a > article > a:not(.author, .offre-title, [title="Voir le profil utilisateur."])::after, .fullpage.meetup > .meetup_list > .views-row > article > a:not(.author, .offre-title, [title="Voir le profil utilisateur."])::after {
+  top: 1.2rem;
+  left: 1.2rem;
+  position: absolute;
+  content: "";
+  width: 8rem;
+  height: 8rem;
+  background-image: url("/themes/erabletheme/assets/cercle_dessin.svg");
+  background-size: cover;
+  display: block;
+  pointer-events: none;
+}
 .fullpage.meetup > .meetup_list > .views-row > a > article > p.occupation, .fullpage.meetup > .meetup_list > .views-row > article > p.occupation {
   grid-column: 2;
   grid-row: 1/2;
@@ -2048,6 +2239,204 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   display: none;
 }
 
+.fullpage.projets {
+  padding-top: 5vh;
+}
+@media (min-width: 1080px) {
+  .fullpage.projets > .intro_map {
+    display: flex;
+    flex-direction: row;
+  }
+}
+.fullpage.projets > .intro_map > header {
+  margin-right: 5vw;
+  padding: 0 3vw;
+  font-family: "Marianne", sans-serif;
+  font-size: 1rem;
+  line-height: 1.4;
+}
+.fullpage.projets > .intro_map > header h1, .fullpage.projets > .intro_map > header h2, .fullpage.projets > .intro_map > header h3,
+.fullpage.projets > .intro_map > header h4, .fullpage.projets > .intro_map > header h5, .fullpage.projets > .intro_map > header h6 {
+  padding: 0 !important;
+  margin: 0 !important;
+  font-family: "Barlow", sans-serif;
+  color: black;
+  font-size: 1.6rem;
+}
+.fullpage.projets > .intro_map > header > h2 {
+  margin-bottom: 5vh !important;
+  padding-bottom: 3.5vh !important;
+  border-bottom: 1px solid #038788;
+  font-family: "Barlow Condensed", sans-serif;
+  font-size: 1.2rem;
+  padding: 0 3vw;
+  margin-top: 1rem;
+  color: #038788;
+  text-transform: uppercase;
+}
+.fullpage.projets > .intro_map > header > h2 a {
+  color: #038788;
+}
+@media (min-width: 760px) {
+  .fullpage.projets > .intro_map > header > h2 {
+    font-size: 2.3rem;
+  }
+}
+@media (min-width: 1080px) {
+  .fullpage.projets > .intro_map > header > h2 {
+    width: 100%;
+  }
+}
+.fullpage.projets > .intro_map .projets_intro {
+  display: none;
+}
+.fullpage.projets > .intro_map #sites-map-container {
+  width: 70%;
+  padding: 0 !important;
+}
+@media screen and (min-width: 760px) {
+  .fullpage.projets > .intro_map #sites-map-container {
+    width: 50%;
+  }
+}
+@media (min-width: 1080px) {
+  .fullpage.projets > .intro_map #sites-map-container {
+    margin-right: 8vw !important;
+    width: 85%;
+  }
+}
+.fullpage.projets > .intro_map #sites-map-container #popup h3 {
+  font-family: "Marianne", sans-serif;
+  font-size: 0.9rem;
+  color: #038788;
+  font-weight: 800;
+}
+@media (min-width: 760px) {
+  .fullpage.projets > .intro_map #sites-map-container #popup h3 {
+    font-size: 1.2rem;
+  }
+}
+.fullpage.projets > .intro_map #sites-map-container #popup p {
+  font-family: "Marianne", sans-serif;
+  font-size: 1rem;
+  line-height: 1.4;
+}
+.fullpage.projets > .projets_list {
+  display: grid;
+  margin: 3vh 3vw;
+  margin-top: 8vh;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+}
+@media (min-width: 760px) {
+  .fullpage.projets > .projets_list {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 1080px) {
+  .fullpage.projets > .projets_list {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+.fullpage.projets > .projets_list > h3 {
+  display: none;
+}
+.fullpage.projets > .projets_list > .views-row {
+  display: grid;
+  grid-template-columns: 0.5fr 1fr;
+  grid-template-rows: repeat(4, auto);
+}
+.fullpage.projets > .projets_list > .views-row > .views-field-field-diaporama {
+  grid-column: 1;
+  grid-row: 1/5;
+  align-self: center;
+}
+.fullpage.projets > .projets_list > .views-row > .views-field-field-diaporama > .field-content {
+  width: 8rem;
+  height: 8rem;
+}
+.fullpage.projets > .projets_list > .views-row > .views-field-field-diaporama > .field-content > a {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.fullpage.projets > .projets_list > .views-row > .views-field-field-diaporama > .field-content > a img {
+  width: 100%;
+  height: 100%;
+  mask-image: url("/themes/erabletheme/assets/shapes/shape_1.svg");
+  mask-repeat: no-repeat;
+  mask-size: 100% 100%;
+  mask-position: center;
+  object-fit: cover;
+}
+.fullpage.projets > .projets_list > .views-row > .views-field-title {
+  grid-column: 2;
+  grid-row: 1;
+  margin-bottom: 1rem;
+  font-family: "Marianne", sans-serif;
+  font-size: 0.9rem;
+  color: #038788;
+  font-weight: 800;
+}
+.fullpage.projets > .projets_list > .views-row > .views-field-title a {
+  color: #038788;
+}
+@media (min-width: 760px) {
+  .fullpage.projets > .projets_list > .views-row > .views-field-title {
+    font-size: 1.2rem;
+  }
+}
+.fullpage.projets > .projets_list > .views-row > .views-field-field-sous-titre {
+  grid-column: 2;
+  grid-row: 2;
+  font-size: 1.1rem !important;
+  margin-bottom: 1rem;
+  line-height: 1.3;
+  font-family: "Barlow", sans-serif;
+  color: black;
+  font-size: 1.6rem;
+}
+.fullpage.projets > .projets_list > .views-row > .views-field-field-sous-titre a {
+  color: black;
+}
+.fullpage.projets > .projets_list > .views-row > .views-field-field-localisation-textuel {
+  grid-column: 2;
+  grid-row: 3;
+  margin-bottom: 1rem;
+  font-family: "Marianne", sans-serif;
+  font-size: 1rem;
+  line-height: 1.4;
+}
+.fullpage.projets > .projets_list > .views-row > .views-field-field-localisation-textuel a {
+  color: black;
+}
+.fullpage.projets > .projets_list > .views-row > .views-field-field-th {
+  grid-column: 2;
+  grid-row: 4;
+}
+.fullpage.projets > .projets_list > .views-row > .views-field-field-th ul li {
+  display: inline-block;
+  font-size: 0.8rem !important;
+  background-color: #d3f0ea;
+  margin: 0.2rem;
+  transition: background-color 0.3s ease;
+  font-family: "Marianne", sans-serif;
+  font-size: 1rem;
+  line-height: 1.4;
+}
+.fullpage.projets > .projets_list > .views-row > .views-field-field-th ul li:hover {
+  background-color: #8ec2b8;
+}
+.fullpage.projets > .projets_list > .views-row > .views-field-field-th ul li a {
+  display: block;
+  color: black;
+  padding: 0.2rem 0.4rem;
+}
+
 @media (min-width: 760px) {
   .fullpage.actus .actus_list {
     display: grid;

web/themes/erabletheme/erabletheme.theme

@@ -11,7 +11,6 @@
 function erabletheme_preprocess_html(&$variables) {
 
 }
-
 /**
  * Implements hook_preprocess_HOOK() for page.html.twig.
  */
@@ -47,7 +46,7 @@ function erabletheme_preprocess_node__view__meetup(&$variables) {
       'nom' => "",
     ];
   }
-  
+
 }
 
 /**
@@ -61,8 +60,16 @@ function erabletheme_preprocess_region(&$variables) {
   $t="t";
 }
 
-function erabletheme_preprocess_views_view(&$variables) {
+
-  $t="t";
+function erabletheme_preprocess_views_view(array &$variables) {
+  if ($variables['view']->current_display === 'page_1') {
+    $block_id = 'sitesmap_block';
+    $block = \Drupal::service('plugin.manager.block')->createInstance($block_id, []);
+    if ($block) {
+      $block_render_array = $block->build();
+      $variables['custom_sites_map'] = $block_render_array;
+    }
+  }
 }
 
 /* fonctionne mais meilleure méthode avec les suggestions page--xxx */
@@ -77,7 +84,7 @@ function erabletheme_theme_suggestions_views_view_alter(array &$suggestions, arr
   //     $suggestions[] = 'views_view__content_gouvernance';
   //   } elseif (isset($view_title) && $view_title === 'Partenaires') {
   //     $suggestions[] = 'views_view__content_partenaires';
-  //   } 
+  //   }
     // elseif (isset($view) && $view === 'Meetup en ligne') {
     //   $suggestions[] = 'views_view__content_meetup';
     // }
@@ -96,9 +103,12 @@ function erabletheme_theme_suggestions_views_view_alter(array &$suggestions, arr
     case 'partenaires':
       $suggestions[] = 'views_view__content_partenaires';
       break;
-    case 'meetup':
+      case 'meetup':
-      $suggestions[] = 'views_view__content_meetup';
+        $suggestions[] = 'views_view__content_meetup';
-      break;
+        break;
+      case 'projets':
+        $suggestions[] = 'views_view__content_projets';
+        break;
   }
 }
 
@@ -145,4 +155,4 @@ function erabletheme_theme_suggestions_region_alter(array &$suggestions, array $
     }
 
   }
-}
+}

web/themes/erabletheme/js/erabletheme.js

@@ -232,6 +232,39 @@
       programSubmenu.addEventListener("mouseenter", showSubmenu);
       programSubmenu.addEventListener("mouseleave", hideSubmenu);
 
+      //
+      // Aside menu toggle
+      //
+
+      const sideMenuTitle = document.querySelector('#block-erabletheme-leprogramme-2 h2');
+      if (sideMenuTitle) {
+        sideMenuTitle.addEventListener('click', () => {
+          const sideMenu = document.querySelector('#block-erabletheme-leprogramme-2 > ul');
+          const titleArrow = sideMenuTitle.querySelector('div');
+          if (!sideMenu.classList.contains('closed')) {
+            sideMenu.classList.add('closed');
+            titleArrow.classList.add('closed');
+          } else {
+            sideMenu.classList.remove('closed');
+            titleArrow.classList.remove('closed');
+          }
+        });
+      }
+
+      //
+      // index projets random shape
+      //
+
+      if (document.querySelector('.projets_list')) {
+        const projets = document.querySelectorAll('.projets_list > .views-row');
+        const shapesAmount = 4;
+        for (let i = 0; i < projets.length; i++) {
+          const randomShape = Math.floor(Math.random() * shapesAmount) + 1;
+          const img = projets[i].querySelector('img');
+          img.style.maskImage = `url('/themes/erabletheme/assets/shapes/shape_${randomShape}.svg')`;
+        }
+      }
+
     }
   }
 

web/themes/erabletheme/scss/_fullpage.scss

@@ -1,21 +1,17 @@
 .fullpage {
     margin-bottom: 10vh;
-    margin-top: -3vh;
     padding-top: 3vh;
-    @include beige_gradient();
+    padding-bottom: 3vh;
+    background-color: white;
     position: relative;
-    > h2 {
+    h2 {
-      margin-top: 5vh;
+      margin-top: 5vh !important;
       margin-bottom: 7vh;
-      background-color: $beige;
       z-index: 1;
       position: relative;
       width: auto;
       display: inline-block;
       @include main_title();
-      @media (min-width: $breakpoint_tablet) {
-          background-color: unset;
-      }
     }
 
     .legende {
@@ -26,17 +22,7 @@
 
     .fullpage_content {
         > h2 {
-          margin-top: 5vh;
           margin-bottom: 1rem;
-          background-color: $beige;
-          z-index: 1;
-          position: relative;
-          width: auto;
-          display: inline-block;
-          @include main_title();
-          @media (min-width: $breakpoint_tablet) {
-              background-color: unset;
-          }
         }
 
         .sous_titre {
@@ -82,7 +68,6 @@
           display: none;
         }
 
-
         h3, h4, h5, h6 {
           margin-bottom: 1rem;
           padding-left: $x_margin;
@@ -94,14 +79,15 @@
         margin-bottom: 8vh;
     }
     @media (min-width: $breakpoint_tablet) {
-        margin-top: 2vh;
+      margin-top: 5vh;
-        padding-top: 0;
+      padding-top: 0;
-        width: 75vw;
+      width: 75vw;
-        margin-left: 12.5vw;
+      margin-left: 12.5vw;
     }
     @media (min-width: $breakpoint_desktop) {
-        width: 50%;
+      margin-top: 13vh;
-        margin-left: 25%;
+      width: 50vw;
+      margin-left: 25%;
     }
 
     &.large-container {
@@ -112,3 +98,91 @@
       }
     }
 }
+
+main:has(#block-erabletheme-leprogramme-2) {
+  .fullpage {
+    @media (min-width: $breakpoint_tablet) {
+      width: 70vw;
+      margin-left: 2vw;
+    }
+    @media (min-width: $breakpoint_desktop) {
+      width: 50vw;
+      margin-left: 3vw;
+      margin-right: 24vw;
+    }
+  }
+}
+
+aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) {
+  height: auto;
+  margin-top: 2vh;
+  margin-bottom: 2vh;
+  @media screen and (min-width: $breakpoint_tablet) {
+    margin-top: 5vh;
+    margin-bottom: 0;
+  }
+  @media screen and (min-width: $breakpoint_desktop) {
+    margin-top: 13vh;
+  }
+  > div {
+    width: auto;
+    display: inline-block;
+    @media screen and (min-width: $breakpoint_tablet) {
+      position: sticky;
+      top: 5vh;
+      width: 27vw;
+    }
+    @media screen and (min-width: $breakpoint_desktop) {
+      top: 12vh;
+      width: 22vw;
+    }
+    #block-erabletheme-leprogramme-2 {
+      padding: 1.5rem;
+      background-color: white;
+      margin-left: 2vw;
+      > h2 {
+        padding-bottom: 1rem;
+        border-bottom: solid 1px $teal;
+        display: flex;
+        justify-content: space-between;
+        cursor: pointer;
+        > span {
+          @include sous_titre();
+        }
+        > div {
+          mask-image: url('/themes/erabletheme/assets/icons/arrow-down-s-line.svg');
+          background-size: contain;
+          background-color: $teal;
+          width: 1.3rem;
+          height: 1.3rem;
+          color: $teal;
+          transform: rotate(0deg);
+          transition: transform 0.3s ease;
+          &.closed {
+            transform: rotate(180deg);
+          }
+        }
+      }
+      > ul {
+        max-height: 100vh;
+        overflow: hidden;
+        transition: max-height 0.6s ease;
+        > li {
+          margin: 1rem 0;
+          @include main_text_content();
+          > a {
+            color: black;
+            font-size: $m_font_size;
+            &:hover,
+            &.is-active {
+              font-weight: 800;
+            }
+          }
+        }
+        &.closed {
+          max-height: 0vh;
+        }
+      }
+    }
+  }
+}

web/themes/erabletheme/scss/_gouvernance.scss

@@ -1,57 +1,77 @@
 .paragraph--type--membre-equipe {
-    height: auto;
+  height: auto;
-    display: grid;
+  display: grid;
-    grid-template-columns: 30vw auto 1fr;
+  grid-template-columns: 30vw auto 1fr;
-    grid-auto-rows: auto;
+  grid-auto-rows: auto;
-    margin-bottom: 5vh;
+  margin-bottom: 5vh;
-    > div:first-of-type {
+  padding: 0 3vw !important;
-        grid-row: 1 / 3;
+  &:first-of-type {
-        display: flex;
+    margin-top: 5vh;
-        align-items: center;
+  }
-        > div {
+  > div:first-of-type {
-            width: 20vw;
+      grid-row: 1 / 3;
-            height: 20vw;
+      display: flex;
-            overflow: hidden;
+      align-items: center;
+      > div {
+          width: 20vw;
+          height: 20vw;
+          position: relative;
+          img {
             border-radius: 10vw;
-            img {
+            width: 100%;
-                width: 100%;
+            height: 100%;
-                height: 100%;
+            object-fit: cover;
-                object-fit: cover;
+          }
-            }
+          &::after {
-        }
+            top: 0;
+            left: 0;
+            position: absolute;
+            content: '';
+            height: 100%;
+            width: 100%;
+            background-image: url('/themes/erabletheme/assets/cercle_dessin.svg');
+            background-size: cover;
+            display: block;
+            pointer-events: none;
+          }
+      }
+  }
+
+  > div:nth-of-type(2),
+  > div:nth-of-type(3) {
+    margin-bottom: 2vh;
+    align-self: flex-end;
+    @include sous_titre();
+  }
+
+  > div:nth-of-type(3) {
+      padding-left: 0.5rem;
+  }
+
+  > div:last-of-type {
+    grid-column: 2 / 4;
+    @include main_text_content();
+    > div > p {
+      margin-top: 0 !important;
+      padding-left: 0;
+    }
+  }
+  @media (min-width: $breakpoint_tablet) {
+    grid-template-columns: 10vw auto 1fr;
+    > div:first-of-type > div {
+      width: 10vw;
+      height: 10vw;
+      border-radius: 5vw;
     }
 
-    > div:nth-of-type(2),
+    > div:nth-of-type(2) {
-    > div:nth-of-type(3) {
+      padding-left: 3vw;
-      margin-bottom: 2vh;
-      align-self: flex-end;
-      @include sous_titre();
     }
 
-    > div:nth-of-type(3) {
+    > div:last-of-type > div > p {
-        padding-left: 0.5rem;
+      padding-left: 3vw;
-    }
-
-    > div:last-of-type {
-      grid-column: 2 / 4;
-      @include main_text_content();
-    }
-    @media (min-width: $breakpoint_tablet) {
-        grid-template-columns: 10vw auto 1fr;
-        > div:first-of-type > div {
-                width: 10vw;
-                height: 10vw;
-                border-radius: 5vw;
-        }
-
-        > div:nth-of-type(2) {
-            padding-left: 3vw;
-        }
-
-        > div:last-of-type {
-            padding-left: 3vw;
-        }
     }
+  }
 
 }
 

web/themes/erabletheme/scss/_home.scss

@@ -2,7 +2,8 @@
   background-color: white;
   width: 100%;
   box-sizing: border-box;
-  padding: 4rem 1rem;
+  padding: 3rem 1rem;
+  margin: 2rem 0;
   h2 {
     display: none;
   }
@@ -15,14 +16,11 @@
     img {
       width: 50%;
       height: auto;
-      @media (min-width: $breakpoint_tablet) {
+      @media (min-width: $breakpoint_desktop) {
           width: 100%;
       }
-      @media (min-width: $breakpoint_desktop) {
-          //width: 18vw;
-      }
     }
-    @media (min-width: $breakpoint_tablet) {
+    @media (min-width: $breakpoint_desktop) {
       width: 170%;
       margin: 0 3rem;
     }
@@ -34,8 +32,12 @@
       @include main_text_content();
       width: 100%;
       @media (min-width: $breakpoint_tablet) {
+        padding-left: 3rem;
         padding-right: 3rem;
       }
+      @media (min-width: $breakpoint_desktop) {
+        padding-left: 0;
+      }
     }
     @media (min-width: $breakpoint_tablet) {
       padding: 0 !important;
@@ -61,6 +63,8 @@
     margin-left: 20vw;
     margin-right: 20vw;
     width: calc(100% - 40vw);
+  }
+  @media (min-width: $breakpoint_desktop) {
     display: flex;
     justify-content: space-around;
   }
@@ -122,13 +126,46 @@
     }
 }
 
-#sites-map-container {
+.map-projets {
-  #popup {
+  background-color: white;
-    h3 {
+  padding: 1rem 0;
-      @include sous_titre();
+  margin-left: $x_margin;
+  width: calc(100% - #{$x_margin} * 2);
+  @media (min-width: $breakpoint_tablet) {
+    margin-left: 20vw;
+    width: calc(100% - 40vw);
+  }
+  @media (min-width: $breakpoint_desktop) {
+    margin-left: 25vw;
+    width: calc(100% - 50vw);
+  }
+  > h2 {
+    @include main_title();
+  }
+  > .projets_intro {
+    padding: 0 3vw;
+    @include main_text_content();
+    h1, h2, h3,
+    h4, h5, h6 {
+      @include sous_titre_alt();
     }
-    p {
+    a {
-      @include main_text_content();
+      color: black;
+    }
+    > p {
+      margin: 1rem 0;
+    }
+  }
+  > #sites-map-container {
+    margin: 0 2rem;
+    width: calc(100% - 4rem);
+    #popup {
+      h3 {
+        @include sous_titre();
+      }
+      p {
+        @include main_text_content();
+      }
     }
   }
 }

web/themes/erabletheme/scss/_meetup.scss

@@ -116,6 +116,7 @@
                     grid-row: 1/7;
                     align-self: center;
                     justify-self: center;
+                    position: relative;
                     > img {
                         width: 10rem;
                         height: 10rem;
@@ -123,6 +124,18 @@
                         padding: 1rem;
                         margin-right: 1rem;
                     }
+                    &::after {
+                      top: 1.2rem;
+                      left: 1.2rem;
+                      position: absolute;
+                      content: '';
+                      width: 8rem;
+                      height: 8rem;
+                      background-image: url('/themes/erabletheme/assets/cercle_dessin.svg');
+                      background-size: cover;
+                      display: block;
+                      pointer-events: none;
+                    }
                 }
                 > p.occupation {
                     grid-column: 2;

web/themes/erabletheme/scss/_partenaires.scss

@@ -11,6 +11,7 @@
                 display: grid;
                 grid-template-columns: 0.3fr 1fr;
                 align-items: center;
+                padding: 0 3vw;
                 > div:first-of-type {
                     > div {
                         width: 30vw;

web/themes/erabletheme/scss/_projets.scss

@@ -0,0 +1,150 @@
+.fullpage.projets {
+  padding-top: 5vh;
+  > .intro_map {
+    @media (min-width: $breakpoint_desktop) {
+      display: flex;
+      flex-direction: row;
+    }
+    > header {
+      margin-right: 5vw;
+      padding: 0 3vw;
+      @include main_text_content();
+      h1, h2, h3,
+      h4, h5, h6 {
+        padding: 0 !important;
+        margin: 0 !important;
+        @include sous_titre_alt();
+      }
+      > h2 {
+        margin-bottom: 5vh !important;
+        padding-bottom: 3.5vh !important;
+        border-bottom: 1px solid $teal;
+        @include main_title();
+        @media (min-width: $breakpoint_desktop) {
+          width: 100%;
+        }
+      }
+    }
+    .projets_intro {
+      display: none;
+    }
+    #sites-map-container {
+      width: 70%;
+      padding: 0 !important;
+      @media screen and (min-width: $breakpoint_tablet) {
+        width: 50%;
+      }
+      @media (min-width: $breakpoint_desktop) {
+        margin-right: 8vw !important;
+        width: 85%;
+      }
+      #popup {
+        h3 {
+          @include sous_titre();
+        }
+        p {
+          @include main_text_content();
+        }
+      }
+    }
+  }
+  > .projets_list {
+    display: grid;
+    margin: 3vh $x_margin;
+    margin-top: 8vh;
+    grid-template-columns: 1fr;
+    gap: 2rem;
+    @media (min-width: $breakpoint_tablet) {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    @media (min-width: $breakpoint_desktop) {
+        grid-template-columns: repeat(3, 1fr);
+    }
+    > h3 {
+      display: none;
+    }
+    > .views-row{
+      display: grid;
+      grid-template-columns: 0.5fr 1fr;
+      grid-template-rows: repeat(4, auto);
+      > .views-field-field-diaporama {
+        grid-column: 1;
+        grid-row: 1/5;
+        align-self: center;
+        > .field-content {
+          width: 8rem;
+          height: 8rem;
+          > a {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            display: block;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            img {
+              width: 100%;
+              height: 100%;
+              mask-image: url('/themes/erabletheme/assets/shapes/shape_1.svg');
+              mask-repeat: no-repeat;
+              mask-size: 100% 100%;
+              mask-position: center;
+              object-fit: cover;
+            }
+          }
+        }
+      }
+      > .views-field-title {
+        grid-column: 2;
+        grid-row: 1;
+        margin-bottom: 1rem;
+        a {
+          color: $teal;
+        }
+        @include sous_titre();
+      }
+      > .views-field-field-sous-titre {
+        grid-column: 2;
+        grid-row: 2;
+        font-size: 1.1rem !important;
+        margin-bottom: 1rem;
+        line-height: 1.3;
+        a {
+          color: black;
+        }
+        @include sous_titre_alt();
+      }
+      > .views-field-field-localisation-textuel {
+        grid-column: 2;
+        grid-row: 3;
+        margin-bottom: 1rem;
+        @include main_text_content();
+        a {
+          color: black;
+        }
+      }
+      > .views-field-field-th {
+        grid-column: 2;
+        grid-row: 4;
+        ul {
+          li {
+            display: inline-block;
+            font-size: 0.8rem !important;
+            background-color: #d3f0ea;
+            margin: 0.2rem;
+            transition: background-color 0.3s ease;
+            @include main_text_content();
+            &:hover {
+              background-color: #8ec2b8;
+            }
+            a {
+              display: block;
+              color: black;
+              padding: 0.2rem 0.4rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}

web/themes/erabletheme/scss/global/_global.scss

@@ -6,8 +6,20 @@
     }
 } */
 
+body {
+  background-color: lightgrey;
+}
+
 .layout-container {
-    margin: 0 !important;
+    display: flex;
+}
+
+main:has(#block-erabletheme-leprogramme-2) {
+  display: flex;
+  flex-direction: column-reverse;
+  @media screen and (min-width: $breakpoint_tablet) {
+    flex-direction: row-reverse;
+  }
 }
 
 strong {

web/themes/erabletheme/scss/partials/_articles_teaser.scss

@@ -5,7 +5,7 @@
       box-sizing: border-box;
         > div:first-of-type {
             width: 100%;
-            aspect-ratio: 16 / 9;
+            aspect-ratio: 20 / 9;
             overflow: hidden;
             padding-left: $x_margin;
             padding-right: $x_margin;
@@ -49,6 +49,7 @@
 
         h2 {
           margin-bottom: 0.5rem;
+          margin-top: 1rem !important;
           @include main_title();
         }
     }

web/themes/erabletheme/scss/styles.scss

@@ -22,5 +22,6 @@
 @import "_partenaires.scss";
 @import "_consultation.scss";
 @import "_meetup.scss";
+@import "_projets.scss";
 @import "_actualites.scss";
 @import "_faq.scss";

web/themes/erabletheme/templates/block--erabletheme-leprogramme-2.html.twig

@@ -0,0 +1,64 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a menu 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: HTML attributes for the containing element.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: HTML attributes for the title element.
+ * - content_attributes: HTML attributes for the content element.
+ * - 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.
+ *
+ * Headings should be used on navigation menus that consistently appear on
+ * multiple pages. When this menu block's label is configured to not be
+ * displayed, it is automatically made invisible using the 'visually-hidden' CSS
+ * class, which still keeps it visible for screen-readers and assistive
+ * technology. Headings allow screen-reader and keyboard only users to navigate
+ * to or skip the links.
+ * See http://juicystudio.com/article/screen-readers-display-none.php and
+ * http://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
+ *
+ * @ingroup themeable
+ */
+#}
+{% set heading_id = attributes.id ~ '-menu'|clean_id %}
+{% set active_item_found = false %}
+
+{% for item in content['#items'] %}
+  {% if item.in_active_trail %}
+    {% set active_item_found = true %}
+  {% endif %}
+{% endfor %}
+
+{% if active_item_found %}
+  <nav role="navigation" aria-labelledby="{{ heading_id }}"{{ attributes|without('role', 'aria-labelledby') }}>
+    {# Label. If not displayed, we still provide it for screen readers. #}
+    {% if not configuration.label_display %}
+      {% set title_attributes = title_attributes.addClass('visually-hidden') %}
+    {% endif %}
+    {{ title_prefix }}
+    <h2{{ title_attributes.setAttribute('id', heading_id) }}>
+      <span>{{ configuration.label }}</span>
+      <div></div>
+    </h2>
+    {{ title_suffix }}
+
+    {# Menu. #}
+    {% block content %}
+      {{ content }}
+    {% endblock %}
+  </nav>
+{% endif %}

web/themes/erabletheme/templates/block--sitesmap-block.html.twig

@@ -28,7 +28,7 @@
  * @ingroup themeable
  */
 #}
-<div{{ attributes }}>
+<div{{ attributes.addClass('map-projets') }}>
   {{ title_prefix }}
   {% if label %}
     <h2{{ title_attributes }}>{{ label }}</h2>

web/themes/erabletheme/templates/views-view--content-projets.html.twig

@@ -0,0 +1,67 @@
+{#
+/**
+ * @file
+ * Default theme implementation for main view template.
+ *
+ * Available variables:
+ * - attributes: Remaining HTML attributes for the element.
+ * - css_name: A CSS-safe version of the view name.
+ * - css_class: The user-specified classes names, if any.
+ * - header: The optional header.
+ * - footer: The optional footer.
+ * - rows: The results of the view query, if any.
+ * - empty: The content to display if there are no rows.
+ * - pager: The optional pager next/prev links to display.
+ * - exposed: Exposed widget form/info to display.
+ * - feed_icons: Optional feed icons to display.
+ * - more: An optional link to the next page of results.
+ * - title: Title of the view, only used when displaying in the admin preview.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the view title.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the view title.
+ * - attachment_before: An optional attachment view to be displayed before the
+ *   view content.
+ * - attachment_after: An optional attachment view to be displayed after the
+ *   view content.
+ * - dom_id: Unique id for every view being printed to give unique class for
+ *   JavaScript.
+ *
+ * @see template_preprocess_views_view()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    dom_id ? 'js-view-dom-id-' ~ dom_id,
+  ]
+%}
+<div{{ attributes.addClass(classes).addClass('fullpage', 'projets', 'large-container') }}>
+
+  <div class="intro_map">
+    {% if header %}
+      <header>
+        <h2>
+          {{ view_array['#title']['#markup'] }}
+        </h2>
+        {{ header }}
+      </header>
+    {% endif %}
+  {{ custom_sites_map }}
+  </div>
+
+    {{ exposed }}
+    {{ attachment_before }}
+   <div class="projets_list">
+      {% if rows -%}
+        {{ rows }}
+      {% elseif empty -%}
+        {{ empty }}
+      {% endif %}
+      {{ pager }}
+    </div>
+
+    {{ attachment_after }}
+    {{ more }}
+</div>