mots clefs mode site

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

@@ -3864,16 +3864,17 @@ body {
 }
 .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .infos {
   margin-top: 1rem;
-  font-size: 0.5rem;
+  font-size: 0.4rem;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   padding-bottom: 0.5rem;
   font-family: "gilroy-light";
   order: 3;
+  width: 60%;
 }
 .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .infos div div:nth-of-type(2) {
-  font-size: 0.7rem;
+  font-size: 0.5rem;
   border-bottom: solid 0.1px rgb(247, 0, 43);
   padding-bottom: 0.5rem;
 }
@@ -3881,18 +3882,31 @@ body {
   color: rgb(247, 0, 43);
   text-transform: uppercase;
   font-family: "gilroy-regular" !important;
-  font-size: 0.5rem !important;
+  font-size: 0.4rem !important;
   margin-bottom: 0;
   margin-top: 0.5rem;
 }
 .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .infos div {
   flex: 1 1 auto;
-  min-width: 50%;
+  min-width: 25%;
 }
 .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .infos div:has(.field_field_region) {
   border-bottom: none;
   padding-bottom: 0;
 }
+.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .mots-clefs {
+  margin-top: 1rem;
+  order: 4;
+  color: rgb(7, 50, 194);
+  font-size: 0.5rem;
+  margin-left: 1rem;
+}
+.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .mots-clefs h2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.1rem;
+  font-size: 0.4rem;
+  text-transform: uppercase;
+}
 .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_parties) {
   margin-top: 2rem;
   width: 100%;

web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss

@@ -201,50 +201,66 @@
     
                 .infos{
                     margin-top: 1rem;
-                    font-size: 0.5rem;
+                    font-size: 0.4rem;
                     display: flex;
                     flex-direction: row;
                     flex-wrap: wrap;
                     padding-bottom: 0.5rem;
                     font-family: 'gilroy-light';
                     order: 3;
-                   div{
+                    width: 60%;
-                    div:nth-of-type(2){
+                    div{
-                        font-size: 0.7rem;
+                        div:nth-of-type(2){
-                        border-bottom: solid 0.1px $red_QDD;
+                            font-size: 0.5rem;
-                        padding-bottom: 0.5rem;
+                            border-bottom: solid 0.1px $red_QDD;
-                    }
+                            padding-bottom: 0.5rem;
-                   } 
+                        }
+                    } 
                     .field--label-above{
                             color: $red_QDD ;
                             text-transform: uppercase;
                             font-family: 'gilroy-regular' !important;
-                            font-size: 0.5rem !important;
+                            font-size: 0.4rem !important;
                             margin-bottom: 0 ;
                             margin-top: 0.5rem;
 
-                        }
+                    }
                   
                         
-                        div{
+                    div{
-                            flex: 1 1 auto;
+                        flex: 1 1 auto;
-                            min-width: 50%;
+                        min-width: 25%;
-                        }
+                    }
-                        // div .field_field_porteur_s_de_site{
+                    // div .field_field_porteur_s_de_site{
-                        //     border-bottom: none;
+                    //     border-bottom: none;
-                        //     padding-bottom: 0;
+                    //     padding-bottom: 0;
-                        // }
+                    // }
-                        // div .field_field_nom_de_la_commune_nb_d_hab{
+                    // div .field_field_nom_de_la_commune_nb_d_hab{
-                        //     border-bottom: none;
+                    //     border-bottom: none;
-                        //     padding-bottom: 0;
+                    //     padding-bottom: 0;
-                        // }
+                    // }
-                        div:has(.field_field_region){
+                    div:has(.field_field_region){
-                            border-bottom: none;
+                        border-bottom: none;
-                            padding-bottom: 0;
+                        padding-bottom: 0;
 
-                        }
+                    }
                         
                 }
+
+                .mots-clefs{
+                    margin-top: 1rem;
+                    order: 4;
+                    color: $blue_QDD;
+                    font-size: 0.5rem;
+                    margin-left: 1rem;
+                    h2{
+                        margin-top: 0.5rem;
+                        margin-bottom: 0.1rem;
+                        font-size: 0.4rem;
+                        text-transform: uppercase;
+                    }
+                }
+
                 .field_field_parties{
                     // div{width: fit-content;}
                     // width: 70%;

web/themes/custom/quartiers_de_demain/templates/block--entity-field--node--field-mots-clefs.html.twig

@@ -0,0 +1,42 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a 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: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - 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.
+ *
+ * @see template_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+<div class="mots-clefs" {{ attributes }}>
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes }}>{{ label }}</h2>
+  {% endif %}
+  {{ title_suffix }}
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</div>
+
+