preprocess field page projet

.vscode/launch.json

@@ -8,7 +8,6 @@
             "name": "Listen for Xdebug",
             "type": "php",
             "request": "launch",
-            "serverSourceRoot":"192.168.1.40",
             "port": 9001,
             "pathMappings": {
                 "/var/www/d9": "${workspaceFolder}"

web/themes/custom/eql/css-compiled/styles.css

@@ -2996,88 +2996,120 @@ a {
 .path-node.page-node-type-projet .layout-container {
   overflow: unset; }
 
-.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top {
-  padding-top: 2rem;
-  display: grid;
-  grid-template-columns: 1fr repeat(8, 1fr) 1fr; }
-  .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodetitle {
-    grid-column: 7 / span 9;
-    grid-row: 2;
-    margin: 0;
-    padding-right: 25%; }
-    .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodetitle .field--name-title {
-      font-family: "Source Code Pro";
-      font-size: 1.5rem;
-      font-weight: 500;
-      color: #009ee3; }
-      @media (max-width: 810px) {
-        .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodetitle .field--name-title {
-          font-size: 1.7rem; } }
-  .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-equipe {
-    grid-column: 7 / span 9;
-    grid-row: 3;
-    padding-right: 25%;
-    margin-top: 2rem; }
-    @media (max-width: 810px) {
-      .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-equipe {
-        padding-top: 0.5rem; } }
-    .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-equipe .field--name-field-equipe {
-      color: #09398b;
-      font-size: 1.5rem;
-      font-weight: 900;
-      text-transform: uppercase; }
-      @media (max-width: 810px) {
-        .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-equipe .field--name-field-equipe {
-          font-size: 1rem; } }
-  .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-incube {
-    grid-column: 7 / span 7;
-    grid-row: 4;
-    margin-top: 2rem;
-    width: fit-content; }
-    .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-incube .field--name-field-incube {
-      background-color: red;
-      color: white;
-      font-weight: 800;
-      padding-right: 0.3rem;
-      padding-left: 0.2rem; }
-    @media (max-width: 810px) {
-      .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-incube {
-        grid-column: 2 / span 4; } }
-  .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-photo {
-    grid-column: 2 /span 5;
-    grid-row: 2 / span 6;
-    margin-right: 2rem; }
-    @media (max-width: 810px) {
-      .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-photo {
-        grid-column: 1 / span 10; } }
-    .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-photo img {
-      width: 65%;
-      object-fit: cover; }
-      @media (max-width: 810px) {
-        .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-photo img {
-          padding-top: 1rem;
-          object-fit: cover;
-          width: 100%; } }
-  .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-adresse {
-    margin-top: 3rem;
-    grid-row: 10; }
-    .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-adresse .field--name-field-adresse {
-      text-transform: uppercase;
-      font-weight: 800;
-      font-size: 0.9rem; }
-      .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-adresse .field--name-field-adresse .address {
-        display: flex;
-        flex-direction: row;
+.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top {
+  padding-top: 4rem;
+  margin-left: 10%;
+  margin-right: 10%; }
+  .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 2rem; }
+    .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .block-entity-fieldnodefield-photo {
+      width: 60%;
+      padding-right: 2rem; }
+      .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .block-entity-fieldnodefield-photo img {
+        width: 65%;
+        object-fit: cover; }
+        @media (max-width: 810px) {
+          .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .block-entity-fieldnodefield-photo img {
+            padding-top: 1rem;
+            object-fit: cover;
+            width: 100%; } }
+    .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right {
+      width: 40%; }
+      .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodetitle {
         margin: 0; }
-        .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-adresse .field--name-field-adresse .address .locality::after {
-          content: ",";
-          margin-right: 0.3rem; }
-  .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-etape-du-projet {
-    grid-row: 10; }
-  .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-moa {
-    grid-row: 10; }
-  .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-projet {
-    grid-row: 10; }
+        .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodetitle .field--name-title {
+          font-family: "Marianne";
+          font-size: 2.5rem;
+          font-weight: 800;
+          color: #009ee3; }
+          @media (max-width: 810px) {
+            .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodetitle .field--name-title {
+              font-size: 1.7rem; } }
+      .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodefield-equipe {
+        margin-top: 2rem; }
+        @media (max-width: 810px) {
+          .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodefield-equipe {
+            padding-top: 0.5rem; } }
+        .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodefield-equipe .field--name-field-equipe {
+          color: #09398b;
+          font-size: 1.5rem;
+          font-weight: 900;
+          text-transform: uppercase; }
+          @media (max-width: 810px) {
+            .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodefield-equipe .field--name-field-equipe {
+              font-size: 1rem; } }
+      .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodefield-incube {
+        margin-top: 2rem;
+        width: fit-content; }
+        .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodefield-incube .field--name-field-incube {
+          background-color: red;
+          color: white;
+          font-weight: 800;
+          padding-right: 0.3rem;
+          padding-left: 0.2rem; }
+  .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom {
+    display: flex;
+    flex-direction: row;
+    margin: auto;
+    border: 0.1rem solid;
+    justify-content: space-evenly; }
+    .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-adresse {
+      padding-left: 1rem; }
+      .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-adresse .field--name-field-adresse {
+        margin-top: .83em; }
+        .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-adresse .field--name-field-adresse .address {
+          margin: auto;
+          display: flex;
+          flex-direction: column;
+          justify-content: start;
+          margin: 0; }
+        .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-adresse .field--name-field-adresse::after {
+          content: ""; }
+    .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-etape-du-projet {
+      padding-left: 1rem;
+      padding-right: 1rem;
+      padding-bottom: 1rem;
+      border-left: 0.1rem solid; }
+      .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-etape-du-projet h2 {
+        color: #09398b;
+        font-size: 1.2rem;
+        font-weight: 900;
+        text-transform: uppercase;
+        margin-bottom: 0rem !important; }
+        .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-etape-du-projet h2:after {
+          content: ' :'; }
+      .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-etape-du-projet .field__label {
+        display: none; }
+    .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-type-de-moa {
+      padding-left: 1rem;
+      border-left: 0.1rem solid;
+      padding-bottom: 1rem; }
+      .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-type-de-moa h2 {
+        color: #09398b;
+        font-size: 1.2rem;
+        font-weight: 900;
+        text-transform: uppercase;
+        margin-bottom: 0rem !important; }
+        .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-type-de-moa h2:after {
+          content: ' :'; }
+      .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-type-de-moa .field__label {
+        display: none; }
+    .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-type-de-projet {
+      padding-left: 1rem;
+      padding-bottom: 1rem;
+      border-left: 0.1rem solid; }
+      .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-type-de-projet h2 {
+        color: #09398b;
+        font-size: 1.2rem;
+        font-weight: 900;
+        text-transform: uppercase;
+        margin-bottom: 0rem !important; }
+        .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-type-de-projet h2:after {
+          content: ' :'; }
+      .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-type-de-projet .field__label {
+        display: none; }
 
 .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--first {
   margin-top: 5rem; }

web/themes/custom/eql/eql.theme

@@ -41,10 +41,40 @@ function eql_preprocess_field(&$variables) {
     $type_protagoniste = $node->get('field_type_de_protagoniste')->getString();
     $variables['attributes']['class'][] = 'type-de-protagoniste-' . $type_protagoniste;
     }
-    // if ($field_name == 'field--name-title'){
-    // $name_title = $node->get('field--name-title')->getString();
-    // $variables['attributes']['class'][] = 'name_title-' . $name_title;
-    // }  
+    if ($field_name == 'field--name-field-type-de-moa'){
+    $type_de_moa = $node->get('field--name-field-type-de-moa')->getString();
+    $variables['attributes']['class'][] = 'filtre-projet-' . $type_de_moa;
+    }  
+  }
+}
+
+
+function eql_preprocess_layout__threecol_25_50_25(&$variables) {
+  $node = \Drupal::routeMatch()->getParameter('node');
+  $type = $node->gettype();
+
+  if($type == "projet"){
+    $variables['content']['top_bottom'] = [];
+    $variables['content']['top_right'] = [];
+    $variables['content']['top_left'] = [];
+    foreach ($variables['content']['top'] as $key => $value) {
+      //   // tu fais ce que tu as a faire
+      if(isset($value['#base_plugin_id']) && $value['#base_plugin_id']== 'entity_field'){
+      $t = 't';
+        if($value['#derivative_plugin_id']=="node:field_type_de_moa" || $value['#derivative_plugin_id']=="node:field_adresse"|| $value['#derivative_plugin_id']=="node:field_type_de_projet" || $value['#derivative_plugin_id']=="node:field_etape_du_projet") {
+          $variables['content']['top_bottom'][] = $variables['content']['top'][$key];
+          unset($variables["content"]["top"][$key]); 
+        }
+        if($value['#derivative_plugin_id']=="node:title" || $value['#derivative_plugin_id']=="node:field_equipe" || $value['#derivative_plugin_id']=="node:field_incube"){
+          $variables['content']['top_right'][] = $variables['content']['top'][$key];
+          unset($variables["content"]["top"][$key]);
+        }
+        if($value['#derivative_plugin_id']=="node:field_photo"){
+          $variables['content']['top_left'][] = $variables['content']['top'][$key];
+          unset($variables["content"]["top"][$key]);
+        }
+      }
+    }
   }
 }
 

web/themes/custom/eql/scss/pages/_projet.scss

@@ -7,75 +7,19 @@
             #block-contenudelapageprincipale{
                 .layout--threecol-25-50-25{
                     .layout__region--top{
-                        
-                        .block-region-top{
-                            padding-top: 2rem;
-                            display: grid;
-                            grid-template-columns: 1fr repeat(8, 1fr) 1fr;
-
-                            .block-entity-fieldnodetitle{
-
-                                grid-column: 7 / span 9;
-                                grid-row: 2;
-                                margin: 0;
-                                padding-right: 25%;
-
-                                .field--name-title{
-                                    font-family: "Source Code Pro";
-                                    font-size: 1.5rem;
-                                    font-weight: 500;
-                                    color: $blue-light;
-                                    @media (max-width: 810px){
-                                        font-size: 1.7rem;
-                                    }
-                                }
-                            }
-                            .block-entity-fieldnodefield-equipe{
-                                grid-column: 7 / span 9;
-                                grid-row: 3;
-                                padding-right: 25%;
-                                margin-top: 2rem;
-
-                                // grid-column: 8 / span 8;
-                                @media (max-width: 810px){
-                                    padding-top: 0.5rem;
-                                }
-                                .field--name-field-equipe{
-                                    color: $blue-dark;
-                                    font-size: 1.5rem;
-                                    font-weight: 900;
-                                    text-transform: uppercase ;
-                                    @media (max-width: 810px){
-                                        font-size: 1rem;
-                                    }
-                                }
-                            }
-                            .block-entity-fieldnodefield-incube{
-                                grid-column: 7 / span 7;
-                                grid-row: 4;
-                                margin-top: 2rem ;
-                                // padding-top: 2rem;
-                                // grid-column: 8 ;
-                                width: fit-content;
-                                .field--name-field-incube{
-                                    background-color: red;
-                                    color: white;
-                                    font-weight: 800;
-                                    padding-right: 0.3rem;
-                                    padding-left: 0.2rem;
-                                }
-                                @media (max-width: 810px) {
-                                    grid-column: 2 / span 4;
-                                }
-                            }
+                        padding-top: 4rem;
+                        margin-left: 10%;
+                        margin-right: 10%;
+                        .top_top{
+                            display: flex;
+                            flex-direction: row;
+                            margin-bottom: 2rem;
                             .block-entity-fieldnodefield-photo{
-                                grid-column: 2 /span 5;
-                                grid-row: 2 / span 6;
-                                margin-right: 2rem;
-                                @media (max-width: 810px) {
-                                    grid-column: 1 / span 10;
-                               
-                                }
+                                width: 60%;
+                                padding-right: 2rem;
+                                // margin-right: 2rem;
+                                // @media (max-width: 810px) {
+                                // }
                                 img{
                                     // padding-top: 2rem;
                                     // width: 600px;
@@ -89,48 +33,145 @@
                                         width: 100%;                                 
                                     }
                                 }
-                                
-                                // position: relative;
-                                // bottom: -50%;
-                                
+                                // // position: relative;
+                                // // bottom: -50%;
                             }
 
-                            .block-entity-fieldnodefield-adresse{
-                                margin-top: 3rem;
-                                // grid-column: 7 / span 9;
-                                grid-row: 10;
-                                // padding-right: 25%;
+                            .top_right{
+                                width: 40%;
+                                .block-entity-fieldnodetitle{
+                                    margin: 0;
+                                    .field--name-title{
+                                        font-family: "Marianne";
+                                        font-size: 2.5rem;
+                                        font-weight: 800;
+                                        color: $blue-light;
+                                        @media (max-width: 810px){
+                                            font-size: 1.7rem;
+                                        }
+                                    }
+                                }
+                                .block-entity-fieldnodefield-equipe{
+                                    margin-top: 2rem;
+                                    // grid-column: 8 / span 8;
+                                    @media (max-width: 810px){
+                                        padding-top: 0.5rem;
+                                    }
+                                    .field--name-field-equipe{
+                                        color: $blue-dark;
+                                        font-size: 1.5rem;
+                                        font-weight: 900;
+                                        text-transform: uppercase ;
+                                        @media (max-width: 810px){
+                                            font-size: 1rem;
+                                        }
+                                    }
+                                }
+                                .block-entity-fieldnodefield-incube{
+                                    margin-top: 2rem ;
+                                    // padding-top: 2rem;
+                                    // grid-column: 8 ;
+                                    width: fit-content;
+                                    .field--name-field-incube{
+                                        background-color: red;
+                                        color: white;
+                                        font-weight: 800;
+                                        padding-right: 0.3rem;
+                                        padding-left: 0.2rem;
+                                    }
+                                    @media (max-width: 810px) {
+                                        // grid-column: 2 / span 4;
+                                    }
+                                }
+                            }
+
+                        }
 
-                                // grid-column: 8 / span 10;
+                        .top_bottom{
+                            display: flex;
+                            flex-direction: row;
+                            margin: auto;
+                            border: 0.1rem solid;
+                            justify-content: space-evenly;
+                            .block-entity-fieldnodefield-adresse{
+                                padding-left: 1rem;
+                                // margin-block-start: .83em;
                                 .field--name-field-adresse{
-                                    text-transform: uppercase;
-                                    font-weight: 800;
-                                    font-size: 0.9rem;
+                                    margin-top: .83em;       
                                     .address{
+                                        margin: auto;
                                         display: flex;
-                                        flex-direction: row;
+                                        flex-direction: column;
+                                        justify-content: start;
                                         margin: 0;
-                                        .locality::after{
-                                            content:",";
-                                            margin-right: 0.3rem;
-                                        }
+                                        // .locality::after{
+                                        //     content:",";
+                                        //     margin-right: 0.3rem;
+                                        // }
+                                    }
+                                    &::after{
+                                        content: "";
                                     }
-                                   
                                 }
                             }
                             .block-entity-fieldnodefield-etape-du-projet{
-                                // grid-column: 2/span 8;
-                                grid-row: 10;
+                                padding-left: 1rem;
+                                padding-right: 1rem;
+                                padding-bottom: 1rem;
+                                border-left: 0.1rem solid ;
+                                h2{
+                                    color: $blue-dark;
+                                    font-size: 1.2rem;
+                                    font-weight: 900;
+                                    text-transform: uppercase ;
+                                    margin-bottom: 0rem !important;
+                                    &:after{
+                                        content: ' :';
+                                    }    
+                                }
+                                .field__label{
+                                    display: none;
+                                }
                             }
                             .block-entity-fieldnodefield-type-de-moa{
-                                grid-row: 10;
+                                padding-left: 1rem;
+                                border-left: 0.1rem solid ;
+                                padding-bottom: 1rem;
+                                h2{
+                                    color: $blue-dark;
+                                    font-size: 1.2rem;
+                                    font-weight: 900;
+                                    text-transform: uppercase ;
+                                    margin-bottom: 0rem !important;
+                                    &:after{
+                                        content: ' :';
+                                    }    
+                                }
+                                .field__label{
+                                    display: none;
+                                }
                             }
                             .block-entity-fieldnodefield-type-de-projet{
-                                grid-row: 10;
+                                padding-left: 1rem;
+                                padding-bottom: 1rem;
+                                border-left: 0.1rem solid ;
+                                h2{
+                                    color: $blue-dark;
+                                    font-size: 1.2rem;
+                                    font-weight: 900;
+                                    text-transform: uppercase ;
+                                    margin-bottom: 0rem !important;
+                                    &:after{
+                                        content: ' :';
+                                    }    
                                 }
-                        } 
-                    }
-            
+                                .field__label{
+                                    display: none;
+                                }
+                            }
+                        }
+
+                }
                     .layout__region--first{
                         // margin-top: 18rem;
                         margin-top: 5rem;

web/themes/custom/eql/templates/field--field-type-de-moa.html.twig

@@ -0,0 +1,89 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ *
+ * @see template_preprocess_field()
+ */
+#}
+
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+    label_display == 'inline' ? 'clearfix',
+    
+  ]
+%}
+{%
+  set title_classes = [
+    'field__label',
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+
+
+{% if label_hidden %}
+	{% if multiple %}
+		<div{{attributes.addClass(classes,'field__items')}}>
+
+
+			{% for item in items %}
+				<div{{item.attributes.addClass('field__item')}}{{ item.content }}></div>
+			{% endfor %}
+		</div>
+	{% else %}
+		{% for item in items %}
+
+
+			<div {{ attributes.addClass(classes, 'field__item') }}>{{ item.content }}</div>
+
+		{% endfor %}
+	{% endif %}
+{% else %}
+	<div{{attributes.addClass(classes)}}>
+		<div{{title_attributes.addClass(title_classes)}}>{{ label }}</div>
+		{% if multiple %}
+			<div class="field__items">
+			{% endif %}
+			{% for item in items %}
+				<div{{item.attributes.addClass('field__item')}}>{{ item.content }}</div>
+			{% endfor %}
+			{% if multiple %}
+			</div>
+		{% endif %}
+	</div>
+{% endif %}

web/themes/custom/eql/templates/layout--threecol-25-50-25.html.twig

@@ -0,0 +1,62 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a three column layout.
+ *
+ * This template provides a three column 25%-50%-25% display layout, with
+ * additional areas for the top and the bottom.
+ *
+ * Available variables:
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'layout',
+    'layout--threecol-25-50-25',
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    {% if content.top %}
+      <div {{ region_attributes.top.addClass('layout__region', 'layout__region--top') }}>
+        <div class='top_top'>
+          {{ content.top_left }}
+          <div class='top_right'>
+            {{content.top_right}}
+          </div>
+        </div>
+        <div class='top_bottom'>
+          {{content.top_bottom}}
+        </div>
+      </div>
+    {% endif %}
+
+    {% if content.first %}
+      <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
+        {{ content.first }}
+      </div>
+    {% endif %}
+
+    {% if content.second %}
+      <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
+        {{ content.second }}
+      </div>
+    {% endif %}
+
+    {% if content.third %}
+      <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
+        {{ content.third }}
+      </div>
+    {% endif %}
+
+    {% if content.bottom %}
+      <div {{ region_attributes.bottom.addClass('layout__region', 'layout__region--bottom') }}>
+        {{ content.bottom }}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}