hauteur header

web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css

@@ -0,0 +1,106 @@
+@font-face {
+  font-family: 'gilroy-semibold';
+  src: url('../css/fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff');
+}
+#sites-map-container {
+  background-color: transparent;
+  text-align: center;
+  position: relative;
+  width: 155%;
+ /* 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) {
+  #sites-map-container {
+    width: 80%;
+   /* Prend toute la largeur du conteneur parent */
+ }
+}
+@media (max-width: 530px) {
+  #sites-map-container {
+    width: 100%;
+   /* Prend toute la largeur du conteneur parent */
+    height: 485px;
+ }
+}
+@media (max-width: 400px) {
+  #sites-map-container {
+    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 {
+  font-family: 'gilroy-light';
+  display: none;
+  position: absolute;
+  z-index: 1000;
+  text-align: left;
+  padding-left: 1rem;
+  pointer-events: none;
+}
+@media (max-width: 1090px) {
+  #sites-map-container #popup {
+    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;
+  font-family: 'gilroy-bold';
+}
+#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;
+}
+#popup-content p {
+  font-size: 0.7rem;
+}
+@media (max-width: 810px) {
+  #popup-content {
+    width: 300px;
+    background-color: white;
+    border-radius: 5px;
+    padding: 0.5rem;
+    padding-left: 1rem;
+ }
+}

web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss

@@ -1,98 +0,0 @@
-@font-face {
-  font-family: 'gilroy-semibold';
-  src: url('../css/fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff');
-}
-#sites-map-container {
-  background-color: transparent;
-  text-align: center;
-  position: relative;
-  width: 155%;  /* 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 {
-  font-family: 'gilroy-light';
-  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;
-  font-family: 'gilroy-bold';
-}
-#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/q2d_mod/q2d_mod.libraries.yml

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

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

@@ -2,6 +2,7 @@
 /*quartiers_de_demain*/
 /*global*/
 /* Colors used for quartiers_de_demain */
+@import "/home/ouidade/Developer/docker-quartiersdedemain/src/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css";
 p {
   font-size: 0.8rem;
 }
@@ -481,6 +482,11 @@ header .header:hover + .header_nav_container {
     height: 160px;
   }
 }
+@media (min-width: 1400px) {
+  .header--collapsed {
+    height: 250px;
+  }
+}
 .header--collapsed .qdd-header {
   opacity: 1 !important;
 }
@@ -527,6 +533,11 @@ header .header:hover + .header_nav_container {
     height: 170px;
   }
 }
+@media (min-width: 1400px) {
+  .header--collapsed-already {
+    height: 250px;
+  }
+}
 .header--collapsed-already .header_left_container {
   flex: 0 0 65%;
   transform-origin: bottom right;
@@ -3284,107 +3295,4 @@ main {
   height: auto;
   aspect-ratio: 1/1;
   object-fit: cover;
-}
-
-@font-face {
-  font-family: "gilroy-semibold";
-  src: url("../css/fonts/Gilroy/gilroy-semibold-webfont.woff") format("woff");
-}
-#sites-map-container {
-  background-color: transparent;
-  text-align: center;
-  position: relative;
-  width: 155%; /* 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) {
-  #sites-map-container {
-    width: 80%; /* Prend toute la largeur du conteneur parent */
-  }
-}
-@media (max-width: 530px) {
-  #sites-map-container {
-    width: 100%; /* Prend toute la largeur du conteneur parent */
-    height: 485px;
-  }
-}
-@media (max-width: 400px) {
-  #sites-map-container {
-    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 {
-  font-family: "gilroy-light";
-  display: none;
-  position: absolute;
-  z-index: 1000;
-  text-align: left;
-  padding-left: 1rem;
-  pointer-events: none;
-}
-@media (max-width: 1090px) {
-  #sites-map-container #popup {
-    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;
-  font-family: "gilroy-bold";
-}
-
-#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;
-}
-#popup-content p {
-  font-size: 0.7rem;
-}
-@media (max-width: 810px) {
-  #popup-content {
-    width: 300px;
-    background-color: white;
-    border-radius: 5px;
-    padding: 0.5rem;
-    padding-left: 1rem;
-  }
 }

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

@@ -1,4 +1,4 @@
-
+$header-height-big : 250px;
 $header-height : 200px;
 $header-height-pad : 160px;
 $header-height-small : 70px;

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

@@ -226,6 +226,9 @@ header{
     @media(max-width: 1090px) {
         height: $header-height-pad;
     }
+    @media (min-width: 1400px) {
+        height: $header-height-big;
+    }
     .qdd-header{
         opacity: 1 !important;
     }
@@ -264,6 +267,9 @@ header{
         width: 100%;
         height: 170px;
        }
+    @media (min-width: 1400px) {
+        height: $header-height-big;
+    }
     .header_left_container{
         flex: 0 0 65%;
         transform-origin: bottom right; 

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

@@ -50,4 +50,4 @@
 @import "pages/lessites.scss";
 
 
-@import "/home/ouidade/Developer/docker-quartiersdedemain/src/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss";
+@import "/home/ouidade/Developer/docker-quartiersdedemain/src/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css";