css filtres

web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css

@@ -609,6 +609,7 @@ header .header:hover + .header_nav_container {
 
 footer {
   z-index: 100;
+  margin-top: 3rem;
 }
 
 .footer {
@@ -814,34 +815,72 @@ footer {
     margin-top: 3rem;
   }
 }
+.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1,
+.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 {
+  background-color: white;
+  padding: 0.3rem 1rem 1rem 1rem;
+  width: 100%;
+}
+.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 h2,
 .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 h2 {
   text-transform: uppercase;
   font-family: "gilroy-medium";
   font-size: 0.7rem;
 }
+.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 h2::after,
 .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 h2::after {
   content: " :";
 }
-.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 label {
+.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-select,
-  text-transform: lowercase;
+.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-select {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  margin-bottom: 0.5rem;
+  border-bottom: solid black 0.5px;
+  padding-top: 0.5rem;
   font-size: 0.7rem;
   font-family: "gilroy-light";
 }
-.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 h2 {
+.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-select label,
-  text-transform: uppercase;
+.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-select label {
-  font-family: "gilroy-medium";
+  width: 50%;
-  font-size: 0.7rem;
-}
-.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 h2::after {
-  content: " :";
-}
-.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 label {
   text-transform: lowercase;
+  font-size: 0.7rem;
+  font-family: "gilroy-light";
+  padding-bottom: 0.2rem;
+}
+.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-select select,
+.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-select select {
+  background-color: white;
+  border: none;
+  width: 50%;
   font-size: 0.6rem;
-  font-family: "gilroy-light";
+  font-family: "gilroy-medium";
+  padding-bottom: 0.2rem;
 }
-.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .form-select#edit-field-mots-clefs-target-id--2 {
+.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-textfield label,
-  max-width: 100%;
+.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-textfield label {
+  text-transform: lowercase;
+  font-size: 0.7rem;
+  font-family: "gilroy-light";
+  padding-bottom: 0.2rem;
+}
+.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .form-actions,
+.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .form-actions {
+  padding-top: 1rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .form-actions input,
+.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .form-actions input {
+  background-color: white;
+  border: solid black 0.5px;
+  width: 45%;
+  padding: 0.3rem 0.2rem;
+  font-size: 0.7rem;
+  font-family: "gilroy-light";
 }
 
 #logo-animated-container {
@@ -1456,6 +1495,15 @@ footer {
   width: fit-content;
   padding-left: 0.5rem;
   background: black;
+  display: flex;
+  justify-content: center;
+  flex: 0 0 40%;
+  margin-top: 1rem;
+  margin-bottom: 2rem !important;
+  color: white;
+  background: black;
+  text-transform: uppercase;
+  font-size: 0.6rem;
 }
 @media (max-width: 810px) {
   #home .__container-deroulement .config_pages--type--deroulement .field_field_calendrier .file--application-pdf {
@@ -1963,21 +2011,28 @@ body {
   cursor: pointer;
 }
 
-.prev, .next {
+#lightbox .prev,
+#lightbox .next {
   position: absolute;
   top: 50%;
-  color: white;
+  transform: translateY(-50%);
-  font-size: 30px;
+  z-index: 10;
   cursor: pointer;
-  user-select: none;
 }
 
-.prev {
+#lightbox .prev img,
-  left: 30px;
+#lightbox .next img {
+  width: 40px; /* adapte si besoin */
+  height: 40px;
+  pointer-events: none; /* évite que l'image bloque le clic */
 }
 
-.next {
+#lightbox .prev {
-  right: 30px;
+  left: 20px;
+}
+
+#lightbox .next {
+  right: 20px;
 }
 
 /*pages*/
@@ -3886,6 +3941,7 @@ main {
   display: flex;
   flex-direction: column;
   align-items: center;
+  margin: 2rem;
 }
 #ressources .layout-content .content_container #block-quartiers-de-demain-titredepage {
   margin-top: 3rem;

web/themes/custom/quartiers_de_demain/dist/assets/img/prev-blanc.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   width="90.490662"
+   height="90.491997"
+   viewBox="0 0 90.490662 90.491995"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath393">
+      <path
+         d="M 0,0 H 1920 V 9000 H 0 Z"
+         transform="translate(-918.03445,-2163.9844)"
+         id="path393" />
+    </clipPath>
+  </defs>
+  <g
+     id="g1"
+     transform="translate(-1178.8006,-9024.7622)">
+    <g
+       id="g696">
+      <path
+         id="path392"
+         d="m 0,0 c -18.507,0 -33.509,15.003 -33.509,33.51 0,18.506 15.002,33.509 33.509,33.509 18.507,0 33.509,-15.003 33.509,-33.509 C 33.509,15.003 18.507,0 0,0 Z"
+         style="fill:none;stroke:#ffffff;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(1.3333333,0,0,-1.3333333,1224.0459,9114.6875)"
+         clip-path="url(#clipPath393)" />
+      <path
+         id="path394"
+         d="M 0,0 -9.997,-8.944 0,-17.887"
+         style="fill:none;stroke:#ffffff;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(1.3333333,0,0,-1.3333333,1228.3967,9058.0833)" />
+    </g>
+  </g>
+</svg>

web/themes/custom/quartiers_de_demain/src/assets/img/prev-blanc.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   width="90.490662"
+   height="90.491997"
+   viewBox="0 0 90.490662 90.491995"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath393">
+      <path
+         d="M 0,0 H 1920 V 9000 H 0 Z"
+         transform="translate(-918.03445,-2163.9844)"
+         id="path393" />
+    </clipPath>
+  </defs>
+  <g
+     id="g1"
+     transform="translate(-1178.8006,-9024.7622)">
+    <g
+       id="g696">
+      <path
+         id="path392"
+         d="m 0,0 c -18.507,0 -33.509,15.003 -33.509,33.51 0,18.506 15.002,33.509 33.509,33.509 18.507,0 33.509,-15.003 33.509,-33.509 C 33.509,15.003 18.507,0 0,0 Z"
+         style="fill:none;stroke:#ffffff;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(1.3333333,0,0,-1.3333333,1224.0459,9114.6875)"
+         clip-path="url(#clipPath393)" />
+      <path
+         id="path394"
+         d="M 0,0 -9.997,-8.944 0,-17.887"
+         style="fill:none;stroke:#ffffff;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(1.3333333,0,0,-1.3333333,1228.3967,9058.0833)" />
+    </g>
+  </g>
+</svg>

web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js

@@ -474,101 +474,207 @@ $(document).ready(function(){
 
 
 //////////////// start lightbox galerie image page site////////////////////////
+// Sélection des images à ouvrir dans la lightbox
+let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
+let currentIndex;
 
-    // Sélection des images et de leurs légendes dans la galerie
+// Création de la lightbox
-    let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
+const lightbox = document.createElement('div');
-    let currentIndex;
+lightbox.id = 'lightbox';
+lightbox.classList.add('lightbox');
+document.body.appendChild(lightbox);
 
-    // Création de la lightbox et de ses éléments
+// Image affichée dans la lightbox
-    const lightbox = document.createElement('div');
+const img = document.createElement('img');
-    lightbox.id = 'lightbox';
+img.classList.add('lightbox-content');
-    lightbox.classList.add('lightbox');
+lightbox.appendChild(img);
-    document.body.appendChild(lightbox);
 
-    const img = document.createElement('img');
+// Légende
-    lightbox.appendChild(img);
+const caption = document.createElement('p');
+caption.classList.add('caption');
+lightbox.appendChild(caption);
 
-    // Élément pour afficher la légende
+// Bouton de fermeture
-    const caption = document.createElement('p');
+const closeBtn = document.createElement('span');
-    caption.classList.add('caption');
+closeBtn.classList.add('close');
-    lightbox.appendChild(caption);
+closeBtn.innerHTML = '×';
+lightbox.appendChild(closeBtn);
 
-    const closeBtn = document.createElement('span');
+// Bouton précédent avec image
-    closeBtn.classList.add('close');
+const prevBtn = document.createElement('a');
-    closeBtn.innerHTML = '×';
+prevBtn.classList.add('prev');
-    lightbox.appendChild(closeBtn);
+const prevImg = document.createElement('img');
+prevImg.src = "/themes/custom/quartiers_de_demain/dist/assets/img/prev-blanc.svg"; // 🔁 adapte ce chemin
+prevImg.alt = 'Précédent';
+prevBtn.appendChild(prevImg);
+lightbox.appendChild(prevBtn);
 
-    const prevBtn = document.createElement('a');
+// Bouton suivant avec image
-    prevBtn.classList.add('prev');
+const nextBtn = document.createElement('a');
-    prevBtn.innerHTML = '❮';
+nextBtn.classList.add('next');
-    lightbox.appendChild(prevBtn);
+const nextImg = document.createElement('img');
+nextImg.src = '/themes/custom/quartiers_de_demain/dist/assets/img/next-blanc.svg'; // 🔁 adapte ce chemin
+nextImg.alt = 'Suivant';
+nextBtn.appendChild(nextImg);
+lightbox.appendChild(nextBtn);
 
-    const nextBtn = document.createElement('a');
+// Fonction d'affichage
-    nextBtn.classList.add('next');
+function showImage(index) {
-    nextBtn.innerHTML = '❯';
+  if (index < 0) index = images.length - 1;
-    lightbox.appendChild(nextBtn);
+  if (index >= images.length) index = 0;
+  currentIndex = index;
 
-    // Fonction pour afficher l'image et la légende à l'index donné
+  img.src = images[currentIndex].getAttribute('src');
-    function showImage(index) {
-    if (index < 0) index = images.length - 1;
-    if (index >= images.length) index = 0;
-    currentIndex = index;
 
-    // Mettre à jour l'image
+  const captionText = images[currentIndex]
-    img.src = images[currentIndex].getAttribute('src');
+    .closest('.cadre-img-zoom')
+    ?.nextElementSibling?.querySelector('.image-field-caption p')
+    ?.textContent || '';
 
-    // Récupérer la légende associée (le paragraphe dans blockquote suivant l'image)
+  caption.textContent = captionText;
-    const captionText = images[currentIndex]
+  lightbox.style.display = 'flex';
-      .closest('.cadre-img-zoom')
+}
-      .nextElementSibling.querySelector('.image-field-caption p')
+
-      .textContent;
+// Clic sur une image
+images.forEach((image, index) => {
+  image.addEventListener('click', () => {
+    showImage(index);
+  });
+});
+
+// Navigation & fermeture
+closeBtn.addEventListener('click', () => lightbox.style.display = 'none');
+prevBtn.addEventListener('click', (e) => {
+  e.stopPropagation();
+  showImage(currentIndex - 1);
+});
+nextBtn.addEventListener('click', (e) => {
+  e.stopPropagation();
+  showImage(currentIndex + 1);
+});
+
+// Clic en dehors de l'image pour fermer
+lightbox.addEventListener('click', (e) => {
+  if (e.target === lightbox) lightbox.style.display = 'none';
+});
+
+// Clavier
+document.addEventListener('keydown', (e) => {
+  if (lightbox.style.display === 'flex') {
+    if (e.key === 'Escape') lightbox.style.display = 'none';
+    else if (e.key === 'ArrowLeft') showImage(currentIndex - 1);
+    else if (e.key === 'ArrowRight') showImage(currentIndex + 1);
+  }
+});
+
+//     // Sélection des images et de leurs légendes dans la galerie
+//     let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
+//     let currentIndex;
+
+//     // Création de la lightbox et de ses éléments
+//     const lightbox = document.createElement('div');
+//     lightbox.id = 'lightbox';
+//     lightbox.classList.add('lightbox');
+//     document.body.appendChild(lightbox);
+
+//     const img = document.createElement('img');
+//     lightbox.appendChild(img);
+
+//     // Élément pour afficher la légende
+//     const caption = document.createElement('p');
+//     caption.classList.add('caption');
+//     lightbox.appendChild(caption);
+
+//     const closeBtn = document.createElement('span');
+//     closeBtn.classList.add('close');
+//     closeBtn.innerHTML = '&times;';
+//     lightbox.appendChild(closeBtn);
+
+//     // const prevBtn = document.createElement('a');
+//     // prevBtn.classList.add('prev');
+//     // prevBtn.innerHTML = '&#10094;';
+//     // lightbox.appendChild(prevBtn);
+//     const prevBtn = document.createElement('a');
+// prevBtn.classList.add('prev');
+// const prevImg = document.createElement('img');
+// prevImg.src = '/img/arrow-left.svg'; // <-- adapte le chemin à ton projet
+// prevImg.alt = 'Précédent';
+// prevBtn.appendChild(prevImg);
+
+
+//     // const nextBtn = document.createElement('a');
+//     // nextBtn.classList.add('next');
+//     // nextBtn.innerHTML = '&#10095;';
+//     // lightbox.appendChild(nextBtn);
+//     const nextBtn = document.createElement('a');
+// nextBtn.classList.add('next');
+// const nextImg = document.createElement('img');
+// nextImg.src = '/img/arrow-right.svg'; // <-- adapte ici aussi
+// nextImg.alt = 'Suivant';
+// nextBtn.appendChild(nextImg);
+
+
+//     // Fonction pour afficher l'image et la légende à l'index donné
+//     function showImage(index) {
+//     if (index < 0) index = images.length - 1;
+//     if (index >= images.length) index = 0;
+//     currentIndex = index;
+
+//     // Mettre à jour l'image
+//     img.src = images[currentIndex].getAttribute('src');
+
+//     // Récupérer la légende associée (le paragraphe dans blockquote suivant l'image)
+//     const captionText = images[currentIndex]
+//       .closest('.cadre-img-zoom')
+//       .nextElementSibling.querySelector('.image-field-caption p')
+//       .textContent;
       
-    caption.textContent = captionText || ''; // Affiche la légende ou une chaîne vide si elle est absente
+//     caption.textContent = captionText || ''; // Affiche la légende ou une chaîne vide si elle est absente
-    lightbox.style.display = 'flex';
+//     lightbox.style.display = 'flex';
-    }
+//     }
 
-    // Événements de clic sur chaque image pour ouvrir le lightbox avec la légende
+//     // Événements de clic sur chaque image pour ouvrir le lightbox avec la légende
-    images.forEach((image, index) => {
+//     images.forEach((image, index) => {
-    image.addEventListener('click', () => {
+//     image.addEventListener('click', () => {
-      showImage(index);
+//       showImage(index);
-    });
+//     });
-    });
+//     });
 
-    // Fermer le lightbox
+//     // Fermer le lightbox
-    closeBtn.addEventListener('click', () => {
+//     closeBtn.addEventListener('click', () => {
-    lightbox.style.display = 'none';
+//     lightbox.style.display = 'none';
-    });
+//     });
 
-    // Navigation pour images précédente et suivante
+//     // Navigation pour images précédente et suivante
-    prevBtn.addEventListener('click', (e) => {
+//     prevBtn.addEventListener('click', (e) => {
-    e.stopPropagation();
+//     e.stopPropagation();
-    showImage(currentIndex - 1);
+//     showImage(currentIndex - 1);
-    });
+//     });
 
-    nextBtn.addEventListener('click', (e) => {
+//     nextBtn.addEventListener('click', (e) => {
-    e.stopPropagation();
+//     e.stopPropagation();
-    showImage(currentIndex + 1);
+//     showImage(currentIndex + 1);
-    });
+//     });
 
-    // Fermer le lightbox en cliquant en dehors de l'image
+//     // Fermer le lightbox en cliquant en dehors de l'image
-    lightbox.addEventListener('click', (e) => {
+//     lightbox.addEventListener('click', (e) => {
-    if (e.target === lightbox) {
+//     if (e.target === lightbox) {
-      lightbox.style.display = 'none';
+//       lightbox.style.display = 'none';
-    }
+//     }
-    });
+//     });
 
-    // Ajout des contrôles clavier (Échap, flèches gauche/droite)
+//     // Ajout des contrôles clavier (Échap, flèches gauche/droite)
-    document.addEventListener('keydown', (e) => {
+//     document.addEventListener('keydown', (e) => {
-    if (lightbox.style.display === 'flex') {
+//     if (lightbox.style.display === 'flex') {
-      if (e.key === 'Escape') {
+//       if (e.key === 'Escape') {
-        lightbox.style.display = 'none';
+//         lightbox.style.display = 'none';
-      } else if (e.key === 'ArrowLeft') {
+//       } else if (e.key === 'ArrowLeft') {
-        showImage(currentIndex - 1);
+//         showImage(currentIndex - 1);
-      } else if (e.key === 'ArrowRight') {
+//       } else if (e.key === 'ArrowRight') {
-        showImage(currentIndex + 1);
+//         showImage(currentIndex + 1);
-      }
+//       }
-    }
+//     }
-    });
+//     });
 
 
 //////////////// end lightbox galerie image page site////////////////////////

web/themes/custom/quartiers_de_demain/src/assets/scss/pages/ressources.scss

@@ -9,6 +9,7 @@
             display: flex;
             flex-direction: column;
             align-items: center;
+            margin: 2rem;
 
             #block-quartiers-de-demain-titredepage{
                 margin-top: 3rem;

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/_aside.scss

@@ -1,63 +0,0 @@
-.layout-sidebar-first{
-    width: 20%;
-    // display: flex;
-    position: fixed;
-    // left: 3%;
-    top: $header-height-big;
-    // z-index: 98;
-    margin: 1rem 2rem;
-    background-color: transparent;
-
-    @media(max-width:891px){
-        margin-left: 5%;
-        margin-top: 9rem;
-    }
-    @media (max-width:500px) {
-        width: 80%;
-        margin-top: 3rem;
-    }
-
-
-    #block-quartiers-de-demain-formulaireexposeactuspage-1{
-        h2{
-            text-transform: uppercase;
-            font-family: "gilroy-medium";
-            font-size: 0.7rem;
-            &::after{
-                content: ' :';
-            }
-        }
-        label{
-            text-transform: lowercase;
-            font-size: 0.7rem;
-            font-family: 'gilroy-light';
-        }
-        .form-select #edit-field-type-d-actualite-target-id--2{
-        }
-
-        input #edit-submit-actus--2{
-
-        }
-    }
-
-    #block-quartiers-de-demain-formulaireexposeressourcespage-1{
-        h2{
-            text-transform: uppercase;
-            font-family: "gilroy-medium";
-            font-size: 0.7rem;
-            &::after{
-                content: ' :';
-            }
-        }
-        label{
-            text-transform: lowercase;
-            font-size: 0.6rem;
-            font-family: 'gilroy-light';
-        }
-
-        .form-select#edit-field-mots-clefs-target-id--2{
-            max-width: 100%;
-        }
-
-    }
-}

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/aside.scss

@@ -0,0 +1,99 @@
+.layout-sidebar-first{
+    width: 20%;
+    // display: flex;
+    position: fixed;
+    // left: 3%;
+    top: $header-height-big;
+    // z-index: 98;
+    margin: 1rem 2rem;
+    background-color: transparent;
+
+    @media(max-width:891px){
+        margin-left: 5%;
+        margin-top: 9rem;
+    }
+    @media (max-width:500px) {
+        width: 80%;
+        margin-top: 3rem;
+    }
+
+
+    // #block-quartiers-de-demain-formulaireexposeactuspage-1{
+    //     h2{
+    //         text-transform: uppercase;
+    //         font-family: "gilroy-medium";
+    //         font-size: 0.7rem;
+    //         &::after{
+    //             content: ' :';
+    //         }
+    //     }
+    //     label{
+    //         text-transform: lowercase;
+    //         font-size: 0.7rem;
+    //         font-family: 'gilroy-light';
+    //     }
+    // }
+
+    #block-quartiers-de-demain-formulaireexposeressourcespage-1,     
+    #block-quartiers-de-demain-formulaireexposeactuspage-1{
+        background-color: white;
+        padding: 0.3rem 1rem 1rem 1rem;
+        width: 100%;
+        h2{
+            text-transform: uppercase;
+            font-family: "gilroy-medium";
+            font-size: 0.7rem;
+            &::after{
+                content: ' :';
+            }   
+        }
+        .js-form-type-select{
+            display: flex;
+            flex-direction: row;
+            justify-content: space-evenly;
+            margin-bottom: 0.5rem;
+            border-bottom: solid black 0.5px ;
+            padding-top: 0.5rem;
+            font-size: 0.7rem;
+            font-family: 'gilroy-light';
+            label{
+                width: 50%;
+                text-transform: lowercase;
+                font-size: 0.7rem;
+                font-family: 'gilroy-light';
+                padding-bottom: 0.2rem;
+            }
+            select{
+                background-color: white;
+                border: none;
+                width: 50%;
+                font-size: 0.6rem;
+                font-family: 'gilroy-medium';
+                padding-bottom: 0.2rem;
+            }
+        }
+        .js-form-type-textfield{
+            label{
+
+                text-transform: lowercase;
+                font-size: 0.7rem;
+                font-family: 'gilroy-light';
+                padding-bottom: 0.2rem;
+            }
+        }
+        .form-actions{
+            padding-top:1rem ;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            input{
+                background-color: white;
+                border: solid black 0.5px;
+                width: 45%;
+                padding: 0.3rem 0.2rem;
+                font-size: 0.7rem;
+                font-family: 'gilroy-light';
+            }
+        }
+    }
+}

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/footer.scss

@@ -1,5 +1,6 @@
 footer{
     z-index: 100;
+    margin-top: 3rem;
 }
 .footer{
     display: flex;    

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/lightbox.scss

@@ -50,20 +50,43 @@ body {
     cursor: pointer;
   }
   
-  .prev, .next {
+  // .prev, .next {
-    position: absolute;
+  //   position: absolute;
-    top: 50%;
+  //   top: 50%;
-    color: white;
+  //   color: white;
-    font-size: 30px;
+  //   font-size: 30px;
-    cursor: pointer;
+  //   cursor: pointer;
-    user-select: none;
+  //   user-select: none;
-  }
+  // }
   
-  .prev {
+  // .prev {
-    left: 30px;
+  //   left: 30px;
-  }
+  // }
   
-  .next {
+  // .next {
-    right: 30px;
+  //   right: 30px;
-  }
+  // }
-  
+  
+#lightbox .prev,
+#lightbox .next {
+position: absolute;
+top: 50%;
+transform: translateY(-50%);
+z-index: 10;
+cursor: pointer;
+}
+
+#lightbox .prev img,
+#lightbox .next img {
+  width: 40px; /* adapte si besoin */
+  height: 40px;
+  pointer-events: none; /* évite que l'image bloque le clic */
+}
+
+#lightbox .prev {
+  left: 20px;
+}
+
+#lightbox .next {
+  right: 20px;
+}

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss

@@ -237,9 +237,16 @@
                 .file--application-pdf{
                     width: fit-content;
                     padding-left: 0.5rem;
-                    // padding-bottom: 0.2rem;
-                    // padding-top: 0.2rem;
                     background: black;
+                    display: flex;
+                    justify-content: center;
+                    flex: 0 0 40%;
+                    margin-top: 1rem;
+                    margin-bottom: 2rem !important;
+                    color: white;
+                    background: black;
+                    text-transform: uppercase;
+                    font-size: 0.6rem;
                     @media (max-width:810px) {  
                         margin-left: 0;
                     }

web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss

@@ -36,6 +36,7 @@
 @import "partials/lightbox";
 
 
+
 // @import "partials/slick_custom";
 
 

web/themes/custom/quartiers_de_demain/templates/field--paragraph--site-diapo.html.twig

@@ -77,30 +77,8 @@
     <div id="lightbox" class="lightbox">
       <span class="close">&times;</span>
       <img class="lightbox-content" id="lightbox-img">
-      <a class="prev" id="prev">
+      <a class="prev" id="prev"><img src="/themes/custom/quartiers_de_demain/dist/assets/img/prev.svg" alt="Précédent"></a>
-            <svg />
+      <a class="next" id="next"><img src="/themes/custom/quartiers_de_demain/dist/assets/img/next.svg" alt="Suivant"></a>
-        </clipPath>
-      </defs>
-      <g
-        id="g1"
-        transform="translate(-1178.8005,-9024.7618)">
-        <g
-          id="g696">
-          <path
-            id="path392"
-            d="m 0,0 c -18.507,0 -33.509,15.003 -33.509,33.51 0,18.506 15.002,33.509 33.509,33.509 18.507,0 33.509,-15.003 33.509,-33.509 C 33.509,15.003 18.507,0 0,0 Z"
-            style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-            transform="matrix(1.3333333,0,0,-1.3333333,1224.0459,9114.6875)"
-            clip-path="url(#clipPath393)" />
-          <path
-            id="path394"
-            d="M 0,0 -9.997,-8.944 0,-17.887"
-            style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-            transform="matrix(1.3333333,0,0,-1.3333333,1228.3967,9058.0833)" />
-        </g>
-      </g>
-</svg></a>
-      <a class="next" id="next">&#10095;</a>
     </div>
   </div>
 {% endif %}