Merge branch 'master' of gitea-figureslibres.io:bachir/drupal-quartiersdedemain

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

@@ -255,6 +255,33 @@ header {
   top: 0;
   transition: none;
 }
+header .language-switcher-language-url {
+  text-transform: uppercase;
+  color: white;
+}
+header .language-switcher-language-url ul {
+  display: flex;
+  flex-direction: row;
+  font-size: 0.6rem;
+  padding: 0;
+  width: fit-content;
+}
+@media (max-width: 810px) {
+  header .language-switcher-language-url ul {
+    font-size: 0.9rem;
+  }
+}
+header .language-switcher-language-url ul li a {
+  color: white;
+  font-family: "gilroy-light";
+}
+header .language-switcher-language-url ul li:nth-child(1)::after {
+  content: " / ";
+  white-space: pre;
+}
+header .language-switcher-language-url ul .is-active {
+  font-family: "gilroy-bold";
+}
 @media (max-width: 810px) {
   header {
     height: 100vh;
@@ -401,6 +428,11 @@ header .header_nav_container {
   transition: transform 0.3s ease-in-out;
   z-index: -1;
 }
+@media (max-width: 1090px) {
+  header .header_nav_container {
+    height: fit-content;
+  }
+}
 @media (max-width: 500px) {
   header .header_nav_container {
     flex: 0 0 40%;
@@ -457,6 +489,10 @@ header .header_nav_container #block-quartiers-de-demain-entete ul li:not(:last-o
   padding-bottom: 0.3rem;
   width: 60%; /* Réduit la largeur du soulignement à 50% */
 }
+header .header_nav_container #block-quartiers-de-demain-selecteurdelangue {
+  width: fit-content;
+  margin: auto;
+}
 header .header_nav_container.hidden {
   transform: translateX(30%);
 }
@@ -2672,6 +2708,12 @@ body {
   grid-column: 2;
   grid-row: 2;
 }
+#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto p:nth-of-type(3) {
+  grid-column: 1/span 2;
+  grid-row: 3;
+  font-size: 0.6rem;
+  padding-top: 1rem;
+}
 #consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto h5 {
   font-size: 3.5rem;
   font-family: "gilroy-semibold";
@@ -2719,13 +2761,6 @@ body {
 #consultation .layout-content .content_container .node-type-static #paragraph-id--12 .field_field_texte {
   width: 80%;
 }
-#consultation .layout-content .content_container .node-type-static #paragraph-id--12::after {
-  content: "";
-  display: block;
-  border-bottom: solid 1px rgb(7, 50, 194);
-  width: 100%;
-  padding-bottom: 2rem;
-}
 #consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_texte .colone-picto {
   display: flex;
   flex-direction: row;

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

@@ -661,6 +661,30 @@ document.addEventListener("DOMContentLoaded", function() {
 });
 
 
+document.addEventListener("DOMContentLoaded", function () {
+  // Fonction pour déplacer le bloc en fonction de la taille de l'écran
+  function moveLanguageSwitcher() {
+    const languageSwitcher = document.getElementById("block-quartiers-de-demain-selecteurdelangue");
+    const navContainer = document.querySelector(".header_nav_container");
+
+    if (window.innerWidth <= 810) { // Si écran téléphone
+      if (languageSwitcher && navContainer && !navContainer.contains(languageSwitcher)) {
+        navContainer.appendChild(languageSwitcher); // Déplace le bloc dans header_nav_container
+      }
+    } else { // Si écran non téléphone
+      const headerRightContainer = document.querySelector(".header_right_container");
+      if (languageSwitcher && headerRightContainer && !headerRightContainer.contains(languageSwitcher)) {
+        headerRightContainer.appendChild(languageSwitcher); // Remet le bloc dans sa position initiale
+      }
+    }
+  }
+
+  // Déclencher au chargement et au redimensionnement
+  moveLanguageSwitcher();
+  window.addEventListener("resize", moveLanguageSwitcher);
+});
+
+
 })(jQuery, window);
 
 

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

@@ -11,6 +11,46 @@ header{
    
     // transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
     // transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
+    
+    .language-switcher-language-url{
+        text-transform: uppercase;
+        color: white;
+
+        ul{
+            display: flex;
+            flex-direction: row;   
+            font-size:0.6rem;
+            padding: 0;
+            width: fit-content;
+
+            @media(max-width: 810px){
+                font-size: 00.9rem;      
+            }
+            // @media(max-width: 500px){
+            //     flex-direction: column;
+            //     // margin-bottom: 0;
+            //     margin: auto;      
+            // }
+            li a {
+                color: white;
+                font-family: 'gilroy-light';
+
+            }
+            li:nth-child(1){
+                &::after{
+                    content: " / ";
+                    white-space: pre;
+                    @media(max-width: 660px){
+                        // content:none ;      
+                    }
+                }
+            }
+            .is-active{
+                font-family: 'gilroy-bold';
+            }
+        }
+    }
+    
     @media(max-width: 810px){
         height: 100vh;
     }
@@ -146,6 +186,7 @@ header{
         z-index: -1 ;
         @media(max-width: 1090px){
             // text-align:left;
+            height: fit-content;
         }
         @media(max-width: 500px){
             flex: 0 0 40%;
@@ -205,6 +246,48 @@ header{
 
             }
         }
+        #block-quartiers-de-demain-selecteurdelangue{
+            width: fit-content;
+            margin: auto;
+        //     .language-switcher-language-url{
+        //         text-transform: uppercase;
+        //         color: white;
+    
+        //         ul{
+        //             display: flex;
+        //             flex-direction: row;   
+        //             font-size:0.6rem;
+        //             padding: 0;
+    
+        //             @media(max-width: 660px){
+        //                 margin-bottom: 0;      
+        //             }
+        //             @media(max-width: 500px){
+        //                 flex-direction: column;
+        //                 // margin-bottom: 0;
+        //                 margin: auto;      
+        //             }
+        //             li a {
+        //                 color: white;
+        //                 font-family: 'gilroy-light';
+    
+        //             }
+        //             li:nth-child(1){
+        //                 &::after{
+        //                     content: " / ";
+        //                     white-space: pre;
+        //                     @media(max-width: 660px){
+        //                         content:none ;      
+        //                     }
+        //                 }
+        //             }
+        //             .is-active{
+        //                 font-family: 'gilroy-bold';
+        //             }
+        //         }
+        //     }
+        }
+       
     }
 
   .header_nav_container.hidden {