ressource

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

@@ -1181,57 +1181,108 @@ input {
   font-weight: normal;
   margin: 0;
 }
+.home-page-layout-content .layout-content .layout--onecol h5 {
+  font-size: 5rem;
+  font-weight: 900;
+  margin: 0;
+  line-height: 0.6;
+}
 @media (max-width: 891px) {
-  .home-page-layout-content .layout-content .layout--onecol h4 {
+  .home-page-layout-content .layout-content .layout--onecol h5 {
     font-size: 4rem;
+    line-height: 0.9;
   }
 }
 @media (max-width: 520px) {
-  .home-page-layout-content .layout-content .layout--onecol h4 {
+  .home-page-layout-content .layout-content .layout--onecol h5 {
     font-size: 3rem;
   }
 }
-.home-page-layout-content .layout-content .layout--onecol h5 {
+.home-page-layout-content .layout-content .layout--onecol img {
+  height: auto;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+.home-page-layout-content .layout-content .layout--onecol .block-region-content {
+  display: grid;
+  grid-column: repeat(2, 1fr);
+}
+@media (max-width: 891px) {
+  .home-page-layout-content .layout-content .layout--onecol .block-region-content {
+    display: flex;
+    flex-direction: column;
+  }
+}
+.home-page-layout-content .layout-content .layout--onecol .block-region-content .block-views-blockhome-block-1 {
+  margin-bottom: 2rem;
+}
+@media (max-width: 500px) {
+  .home-page-layout-content .layout-content .layout--onecol .block-region-content .block-views-blockhome-block-1 img {
+    width: -moz-available;
+  }
+}
+.home-page-layout-content .layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f {
+  display: none !important;
+  grid-column: 1;
+  grid-row: 2/span 2;
+  width: 80%;
+  border: solid #fdc300 1px;
+  background-color: rgb(255, 255, 255);
+  font-weight: 800;
+  padding: 2rem;
+  margin-right: 1rem;
+}
+@media (max-width: 891px) {
+  .home-page-layout-content .layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f {
+    font-size: 4rem;
+  }
+}
+@media (max-width: 520px) {
+  .home-page-layout-content .layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f {
+    font-size: 3rem;
+  }
+}
+.home-page-layout-content .layout-content .layout--onecol .block-region-content h5 {
   font-size: 5rem;
   font-weight: 900;
   margin: 0;
   line-height: 0.6;
 }
 @media (max-width: 891px) {
-  .home-page-layout-content .layout-content .layout--onecol h5 {
+  .home-page-layout-content .layout-content .layout--onecol .block-region-content h5 {
     font-size: 4rem;
     line-height: 0.9;
   }
 }
 @media (max-width: 520px) {
-  .home-page-layout-content .layout-content .layout--onecol h5 {
+  .home-page-layout-content .layout-content .layout--onecol .block-region-content h5 {
     font-size: 3rem;
   }
 }
-.home-page-layout-content .layout-content .layout--onecol img {
+.home-page-layout-content .layout-content .layout--onecol .block-region-content img {
   height: auto;
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
-.home-page-layout-content .layout-content .layout--onecol .block-region-content {
+.home-page-layout-content .layout-content .layout--onecol .block-region-content .block-region-content {
   display: grid;
   grid-template-rows: repeat(8, 1fr);
 }
 @media (max-width: 891px) {
-  .home-page-layout-content .layout-content .layout--onecol .block-region-content {
+  .home-page-layout-content .layout-content .layout--onecol .block-region-content .block-region-content {
     display: flex;
     flex-direction: column;
   }
 }
-.home-page-layout-content .layout-content .layout--onecol .block-region-content .block-block-content3d4d153c-9da8-49e2-be7a-d2245f5716ee {
+.home-page-layout-content .layout-content .layout--onecol .block-region-content .block-region-content .block-block-content3d4d153c-9da8-49e2-be7a-d2245f5716ee {
   grid-row: 1/span 3;
 }
-.home-page-layout-content .layout-content .layout--onecol .block-region-content .block-views-blockhome-block-1 {
+.home-page-layout-content .layout-content .layout--onecol .block-region-content .block-region-content .block-views-blockhome-block-1 {
   grid-row: 2/span 6;
   margin-bottom: 2rem;
 }
 @media (max-width: 500px) {
-  .home-page-layout-content .layout-content .layout--onecol .block-region-content .block-views-blockhome-block-1 img {
+  .home-page-layout-content .layout-content .layout--onecol .block-region-content .block-region-content .block-views-blockhome-block-1 img {
     width: -moz-available;
   }
 }
@@ -2073,23 +2124,40 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 }
 
 .page-node-site .node-type-ressource {
-  width: 80%;
+  width: 70%;
   margin: auto;
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(4, auto);
+  grid-template-rows: repeat(2, auto);
+  padding-top: 3rem;
 }
-.page-node-site .node-type-ressource .image-site {
-  width: 40%;
-  height: fit-content;
+.page-node-site .node-type-ressource .image-ressource {
+  grid-row: 1;
+  grid-column: 1/span 2;
   margin-right: 2rem;
 }
-.page-node-site .node-type-ressource .image-site img {
-  width: 100%;
-  height: auto;
+.page-node-site .node-type-ressource .image-ressource img {
+  height: 400px;
+  width: auto;
 }
-.page-node-site .node-type-ressource .filtered-content {
-  width: 40%;
+.page-node-site .node-type-ressource .infos-content {
+  grid-row: 1;
+  grid-column: 3/span 4;
+}
+.page-node-site .node-type-ressource .infos-content .field--name-field-type-de-ressource {
+  text-transform: uppercase;
+  font-size: 1.5rem;
+}
+.page-node-site .node-type-ressource .infos-content .field--name-field-sous-titre {
+  font-size: 2rem;
+}
+.page-node-site .node-type-ressource .infos-content .field--name-field-auteur {
+  font-weight: 800;
+  font-size: 1.4rem;
 }
 .page-node-site .node-type-ressource .body-content {
+  grid-row: 2;
+  grid-column: 1/span 3;
   width: 100%;
   margin-top: 2rem;
 }

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

@@ -1,33 +1,40 @@
 .page-node-site{
     .node-type-ressource{
-        width: 80%;
+        width: 70%;
         margin: auto;
-        display: flex;
+        display: grid;
+        grid-template-columns: repeat(4, auto);
+        grid-template-rows: repeat(2, auto);
+        padding-top: 3rem;
 
-
-        .image-site{
-            width: 40%;
-            height: fit-content;
+        .image-ressource{
+            grid-row: 1;
+            grid-column: 1 /span 2;
             margin-right: 2rem;
+
             img{
-                width: 100%;
-                height: auto;
+                height: 400px;
+                width: auto;
             }
         }
-        .filtered-content{
-            width: 40%;
-            .field--name-field-type-de-ressource,
-            .field--name-field-sous-titre,
-            .field--name-field-auteur,
-            .field--name-field-site{
-                
+        .infos-content{
+            grid-row: 1;
+            grid-column: 3 /span 4;
+            .field--name-field-type-de-ressource{
+                text-transform: uppercase;
+                font-size: 1.5rem;
             }
-            .field--name-body{
-                
-
+            .field--name-field-sous-titre{
+                font-size: 2rem;
+            }
+            .field--name-field-auteur{
+                font-weight: 800;
+                font-size: 1.4rem;
             }
         }
         .body-content {
+            grid-row: 2;
+            grid-column: 1 /span 3;
             width: 100%;
             margin-top: 2rem;
           }

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

@@ -74,13 +74,13 @@
 
   {# Afficher le champ image séparément #}
   {% if image_field_content %}
-    <div class="image-site">
+    <div class="image-ressource">
       {{ image_field_content }}
     </div>
   {% endif %}
 
   {# Envelopper les autres champs dans des divs distinctes #}
-  <div class="filtered-content">
+  <div class="infos-content">
     {% if label and not page %}
       <h2{{ title_attributes }}>
         <a href="{{ url }}" rel="bookmark">{{ label }}</a>