css page pour candidater

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

@@ -0,0 +1,94 @@
+@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%;
+    max-width: 800px;
+    margin: 0 auto;
+    height: auto;
+  }
+  @media (max-width: 810px) {
+    #sites-map-container {
+      width: 80%;
+   }
+  }
+  @media (max-width: 530px) {
+    #sites-map-container {
+      width: 100%;
+      height: 485px;
+   }
+  }
+  @media (max-width: 400px) {
+    #sites-map-container {
+      width: 100%;
+      height: 430px;
+   }
+  }
+  #sites-map-container .site-link:hover {
+    cursor: pointer;
+  }
+  #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;
+   }
+  }
+  @media (min-width: 1090px) {
+    #sites-map-container #popup {
+      top: 50%;
+      left: 80%;
+      transform: translateY(-50%);
+      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;
@@ -2743,6 +2754,55 @@ body {
   padding-left: 0.2rem;
 }
 
+#pour_candidater .node-type-static {
+  width: 80%;
+}
+#pour_candidater #sites-map-container {
+  width: 50%;
+}
+#pour_candidater .field_field_title {
+  color: rgb(7, 50, 194);
+  font-size: 1.2rem;
+}
+@media (max-width: 500px) {
+  #pour_candidater .field_field_title {
+    width: 80%;
+  }
+}
+#pour_candidater .paragraph--type--static-parts {
+  width: 65%;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem;
+  font-family: "gilroy-regular";
+}
+@media (max-width: 500px) {
+  #pour_candidater .paragraph--type--static-parts {
+    width: 90%;
+  }
+}
+#pour_candidater .paragraph--type--static-parts .field_field_title {
+  color: rgb(7, 50, 194);
+  font-size: 1.2rem;
+}
+@media (max-width: 500px) {
+  #pour_candidater .paragraph--type--static-parts .field_field_title {
+    width: 80%;
+  }
+}
+#pour_candidater .paragraph--type--static-parts .colone-picto svg {
+  display: none;
+}
+#pour_candidater .field_body {
+  width: 65%;
+  margin: auto;
+  padding: 1rem;
+  font-family: "gilroy-regular";
+  text-align: start;
+}
+
 .node-type-static main {
   background-color: #f6f7f3;
 }
@@ -3284,107 +3344,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/pages/pour_candidater.scss

@@ -0,0 +1,50 @@
+#pour_candidater{
+    .node-type-static{
+        width: 80%;
+    }
+
+    #sites-map-container{
+        width: 50% ;
+    }
+    .field_field_title{
+        color: $blue_QDD;
+        font-size: 1.2rem;
+        @media(max-width: 500px){
+            width: 80%;
+        }
+    }
+
+    .paragraph--type--static-parts{
+        width: 65%;
+        margin: auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 1rem;
+        font-family: "gilroy-regular";
+      
+        @media(max-width: 500px){
+            width: 90%;
+        }
+        .field_field_title{
+            color: $blue_QDD;
+            font-size: 1.2rem;
+            @media(max-width: 500px){
+                width: 80%;
+            }
+        }
+        .colone-picto{
+            svg{
+                display: none;
+            }
+        }
+    }
+
+    .field_body{
+        width: 65%;
+        margin: auto;       
+        padding: 1rem;
+        font-family: "gilroy-regular";
+        text-align: start;
+    }
+}

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

@@ -43,11 +43,11 @@
 @import "pages/home";
 @import "pages/consultation";
 @import "pages/partenaires";
-// @import "pages/presentation";
+@import "pages/pour_candidater";
 @import "pages/static";
 @import "pages/actualite";
 @import "pages/node-type-site";
 @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";

web/themes/custom/quartiers_de_demain/templates/page--node--33.html.twig

@@ -0,0 +1,97 @@
+{#
+/**
+ * @file
+ * Claro's theme implementation to display a single Drupal page.
+ *
+ * The doctype, html, head, and body tags are not in this template. Instead
+ * they can be found in the html.html.twig template normally located in the
+ * core/modules/system directory.
+ *
+ * Available variables:
+ *
+ * General utility variables:
+ * - base_path: The base URL path of the Drupal installation. Will usually be
+ *   "/" unless you have installed Drupal in a sub-directory.
+ * - is_front: A flag indicating if the current page is the front page.
+ * - logged_in: A flag indicating if the user is registered and signed in.
+ * - is_admin: A flag indicating if the user has permission to access
+ *   administration pages.
+ *
+ * Site identity:
+ * - front_page: The URL of the front page. Use this instead of base_path when
+ *   linking to the front page. This includes the language domain or prefix.
+ *
+ * Page content (in order of occurrence in the default page.html.twig):
+ * - node: Fully loaded node, if there is an automatically-loaded node
+ *   associated with the page and the node ID is the second argument in the
+ *   page's path (e.g. node/12345 and node/12345/revisions, but not
+ *   comment/reply/12345).
+ *
+ * Regions:
+ * - page.header: Items for the header region.
+ * - page.pre_content: Items for the pre-content region.
+ * - page.breadcrumb: Items for the breadcrumb region.
+ * - page.highlighted: Items for the highlighted region.
+ * - page.help: Dynamic help text, mostly for admin pages.
+ * - page.content: The main content of the current page.
+ *
+ * @see template_preprocess_page()
+ * @see html.html.twig
+ */
+#}
+<div class="layout-container pour_candidater" >
+
+  <header role="banner">
+    {{ page.header_left }}
+    {{ page.header_right }}
+    {{ page.header_nav }}
+  </header>
+
+  {{ page.primary_menu }}
+  {{ page.secondary_menu }}
+
+  {{ page.breadcrumb }}
+
+  {{ page.highlighted }}
+
+  {{ page.help }}
+
+  <main role="main" id="pour_candidater">
+    <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
+
+    <div class="layout-content">
+      {{ page.content }}
+    </div>{# /.layout-content #}
+
+    {% if page.sidebar_first %}
+      <aside class="layout-sidebar-first" role="complementary">
+        {{ page.sidebar_first }}
+      </aside>
+    {% endif %}
+
+    {% if page.sidebar_second %}
+      <aside class="layout-sidebar-second" role="complementary">
+        {{ page.sidebar_second }}
+      </aside>
+    {% endif %}
+
+  </main>
+
+  {# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
+    <footer role="contentinfo">
+      {# <section id="footer-top"> #}
+          <span class="totop"><a href="#" id="toTop"><i class="arrow-up"></i></a></span>
+      {# </section>  #}
+      <div class="footer">
+        <section id="footer-left">{{ page.footer_left }}</section> 
+        <div class='first-row'>
+          <section id="footer-middle">{{ page.footer_middle }}</section> 
+          <section id="footer-right">{{ page.footer_right }}</section> 
+        </div>
+
+      </div> 
+      {# <section id="footer-bottom">{{ page.footer_bottom }}</section>  #}
+    </footer>
+  {# {% endif %} #}
+
+</div>{# /.layout-container #}