node actu page

web/themes/custom/reha/dist/css/bundle.css

@@ -3220,6 +3220,87 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   display: none;
 }
 
+.node-type-actualite {
+  width: 100vw;
+}
+.node-type-actualite .entete_actu {
+  display: flex;
+  flex-direction: row;
+  width: 75%;
+  margin: auto;
+  align-items: center;
+}
+.node-type-actualite .entete_actu .image-actualite {
+  width: 60%;
+  height: 100%;
+}
+.node-type-actualite .entete_actu .image-actualite img {
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+}
+.node-type-actualite .entete_actu .infos-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border: solid #fdc300 1px;
+  background-color: rgb(255, 255, 255);
+  padding: 1rem;
+  height: 350px;
+  width: 30%;
+  position: relative;
+  right: 5%;
+  margin-bottom: 30px;
+}
+.node-type-actualite .entete_actu .infos-content h2 {
+  order: 2;
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  padding: 0;
+}
+.node-type-actualite .entete_actu .infos-content .field--name-field-sous-titre {
+  order: 3;
+  font-size: 1.3rem;
+}
+.node-type-actualite .entete_actu .infos-content .field--name-field-date {
+  order: 4;
+  font-weight: 900;
+  padding-bottom: 1rem;
+}
+.node-type-actualite .entete_actu .infos-content .field--name-field-type-d-actualite {
+  order: 1;
+  text-transform: uppercase;
+  font-size: 1.2rem;
+}
+.node-type-actualite .entete_actu .infos-content .field--name-field-site {
+  order: 5;
+  background-color: rgb(153, 147, 174);
+  color: white;
+  border-radius: 50px;
+  width: fit-content;
+  padding: 0.2rem 0.9rem;
+}
+.node-type-actualite .entete_actu .infos-content .field--name-field-site .field__item {
+  display: inline;
+  color: white;
+  font-weight: 900;
+  font-size: 0.8rem;
+  vertical-align: top;
+}
+.node-type-actualite .entete_actu .infos-content ul.links {
+  order: 6;
+  display: none;
+}
+.node-type-actualite .body-content .summary-content {
+  width: 60%;
+  margin: auto;
+}
+.node-type-actualite .body-content .links-content {
+  width: 15%;
+  margin-left: 15%;
+}
+
 .page-mon-espace-de-travail .layout-content {
   width: 50%;
   margin-left: 8%;

web/themes/custom/reha/scss/pages/node-actualite.scss

@@ -1,49 +1,84 @@
-.page-node-site{
     .node-type-actualite{
-        width: 70%;
-        margin: auto;
-        display: grid;
-        grid-template-columns: repeat(4, auto);
-        grid-template-rows: repeat(2, auto);
-        padding-top: 3rem;
-
-        .image-actualite{
-            grid-row: 1;
-            grid-column: 1 /span 2;
-            margin-right: 2rem;
-
-            img{
-                height: fit-content;
-                // width: auto;
+        width: 100vw;
+        .entete_actu{
+            display: flex;
+            flex-direction: row;
+            width: 75%;
+            margin: auto;
+            align-items: center;
+            .image-actualite{
+                width: 60%;
+                height: 100%;
+                img{
+                    width: 100%;
+                    height: auto;
+                    object-fit: contain;
+                }
             }
-        }
-        .infos-content{
-            grid-row: 1;
-            grid-column: 3 /span 4;
-            border: solid $yellow-puca 1px;
-            background-color: $white-button;
-            padding: 1rem;
-            .field--name-field-type-de-actualite{
-                text-transform: uppercase;
-                font-size: 1.5rem;
-            }
-            .field--name-field-sous-titre{
-                font-size: 2rem;
-            }
-            .field--name-field-auteur{
-                font-weight: 800;
-                font-size: 1.4rem;
+            .infos-content{
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                border: solid $yellow-puca 1px;
+                background-color: $white-button;
+                padding: 1rem;
+                height: 350px;
+                width: 30%;
+                position: relative;
+                right: 5%;
+                margin-bottom: 30px;
+                h2{
+                    order: 2;
+                    margin: 0;
+                    font-size: 1.5rem;
+                    font-weight: 600;
+                    padding: 0;;
+                }
+                .field--name-field-sous-titre {
+                    order: 3;
+                    font-size: 1.3rem;
+                }
+                .field--name-field-date{
+                    order: 4;
+                    font-weight: 900;
+                    padding-bottom: 1rem;
+                }
+            
+                .field--name-field-type-d-actualite{
+                    order: 1;
+                    text-transform: uppercase;
+                    font-size: 1.2rem;
+                }
+                .field--name-field-site{
+                    order: 5;
+                    background-color: $gris-violet;
+                    color: white;
+                    border-radius: 50px;
+                    width: fit-content;
+                    padding: 0.2rem 0.9rem;
+                    .field__item{
+                        display: inline;
+                        color: white;
+                        font-weight: 900;
+                        font-size: 0.8rem;
+                        vertical-align: top;
+                    }         
+                }
+                ul.links{
+                    order: 6;
+                    display: none;
+                }
             }
+    
         }
         .body-content {
-            grid-row: 2;
-            grid-column: 1 /span 3;
-            width: 100%;
-            margin-top: 2rem;
-            .field--name-field-fichiers{
-                width: fit-content;
+            .summary-content{
+                width: 60%;
+                margin: auto;
+            }
+            .links-content{
+                width: 15%;
+                margin-left: 15%;
             }
-
         }
     }   
-}

web/themes/custom/reha/scss/reha.scss

@@ -41,4 +41,5 @@
 @import "pages/ressources";
 @import "pages/node-ressource";
 @import "pages/actualites";
+@import "pages/node-actualite";
 @import "pages/page-mon-espace-de-travail";

web/themes/custom/reha/templates/node--actualite.html.twig

@@ -72,27 +72,25 @@
 
   {{ title_prefix }}
 
-  {# Afficher le champ image séparément #}
-  {% if image_field_content %}
-    <div class="image-actualite">
-      {{ image_field_content }}
-    </div>
-  {% endif %}
-
-  {# Envelopper les autres champs dans des divs distinctes #}
-  <div class="infos-content">
-    {% if label and not page %}
-      <h2{{ title_attributes }}>
-        <a href="{{ url }}" rel="bookmark">{{ label }}</a>
-      </h2>
+  <div class="entete_actu">
+    {% if image_field_content %}
+      <div class="image-actualite">
+        {{ image_field_content }}
+      </div>
     {% endif %}
 
-    {% for field_name, field_content in filtered_content %}
-      {{ field_content }}
-    {% endfor %}
-  </div>
+    <div class="infos-content">
+      {% if label and not page %}
+        <h2{{ title_attributes }}>
+          <a href="{{ url }}" rel="bookmark">{{ label }}</a>
+        </h2>
+      {% endif %}
 
-  {# Ajouter une nouvelle div pour le champ body et fichiers #}
+      {% for field_name, field_content in filtered_content %}
+        {{ field_content }}
+      {% endfor %}
+    </div>
+  </div>
   {% if body_field_content is defined or files_field_content is defined %}
     <div class="body-content">
       {% if body_field_content is defined %}