From 4a81d84919e201a7f215c104b1d0c2c0c8f07250 Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Tue, 14 Oct 2025 15:10:07 +0200
Subject: [PATCH] responsive node site

---
 web/themes/custom/reha/dist/css/bundle.css    | 85 +++++++++++++++++++
 .../custom/reha/scss/pages/_node-site.scss    | 68 ++++++++++++++-
 2 files changed, 151 insertions(+), 2 deletions(-)

diff --git a/web/themes/custom/reha/dist/css/bundle.css b/web/themes/custom/reha/dist/css/bundle.css
index 98edcd7..f04d12b 100644
--- a/web/themes/custom/reha/dist/css/bundle.css
+++ b/web/themes/custom/reha/dist/css/bundle.css
@@ -2998,6 +2998,13 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   grid-template-columns: repeat(8 1fr);
   grid-template-rows: repeat(3 auto);
 }
+@media (max-width: 810px) {
+  .page-node-site .region-content {
+    width: 100vw;
+    display: flex;
+    flex-direction: column;
+  }
+}
 .page-node-site .region-content #block-reha-prevnextblock {
   display: flex;
   flex-direction: row;
@@ -3009,11 +3016,26 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   justify-content: space-between;
   margin: auto;
 }
+@media (max-width: 810px) {
+  .page-node-site .region-content #block-reha-prevnextblock {
+    width: 95%;
+  }
+}
+@media (max-width: 810px) {
+  .page-node-site .region-content #block-reha-prevnextblock span {
+    font-size: 0.6rem !important;
+  }
+}
 .page-node-site .region-content #block-reha-prevnextblock .next-site {
   border: none;
   padding: 0.5rem 1rem;
   margin-left: auto;
 }
+@media (max-width: 810px) {
+  .page-node-site .region-content #block-reha-prevnextblock .next-site {
+    padding-top: 0.1rem;
+  }
+}
 .page-node-site .region-content #block-reha-prevnextblock .next-site ::after {
   content: url("../../dist/images/noun-arrow-1569918-black.svg");
   padding-left: 0.5rem;
@@ -3023,6 +3045,11 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   border: none;
   padding: 0.5rem 1rem;
 }
+@media (max-width: 810px) {
+  .page-node-site .region-content #block-reha-prevnextblock .prev-site {
+    padding-top: 0.1rem;
+  }
+}
 .page-node-site .region-content #block-reha-prevnextblock .prev-site ::before {
   content: url("../../dist/images/noun-arrow-1569918-black.svg");
   display: inline-block;
@@ -3051,11 +3078,23 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   flex-direction: row;
   margin: auto;
 }
+@media (max-width: 810px) {
+  .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site {
+    flex-direction: column;
+    height: auto;
+  }
+}
 .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site .image-site {
   height: 520px;
   width: 771px;
   order: 1;
 }
+@media (max-width: 810px) {
+  .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site .image-site {
+    height: auto;
+    width: 100vw;
+  }
+}
 .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site .image-site .field--name-field-image {
   width: 100%;
   margin: auto;
@@ -3064,6 +3103,11 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   z-index: 999;
   bottom: -40px;
 }
+@media (max-width: 810px) {
+  .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site .image-site .field--name-field-image .slick-dots {
+    width: 100vw;
+  }
+}
 .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site .image-site .field--name-field-image .slick-list {
   padding: 0 !important;
 }
@@ -3077,12 +3121,24 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   width: auto;
   object-fit: contain;
 }
+@media (max-width: 810px) {
+  .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site .image-site .field--name-field-image .slick-list .field__item img {
+    height: auto;
+    width: 100vw;
+  }
+}
 .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site .image-site .field--name-field-image .slick-list .field__item blockquote {
   font-style: italic;
   margin: 0;
   padding-top: 0.5rem;
   font-size: 0.8rem;
 }
+@media (max-width: 810px) {
+  .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site .image-site .field--name-field-image .slick-list .field__item blockquote {
+    font-size: 0.6rem;
+    padding-left: 0.5rem;
+  }
+}
 .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site .image-site .field--name-field-image .slick-list .field__item blockquote p {
   margin: 0;
 }
@@ -3101,6 +3157,7 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 @media (max-width: 891px) {
   .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site .infos-content-site {
     width: auto;
+    margin-left: 0rem;
   }
 }
 .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site .infos-content-site h1 {
@@ -3204,18 +3261,46 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   flex-direction: row-reverse;
   justify-content: space-between;
 }
+@media (max-width: 810px) {
+  .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site {
+    width: 100%;
+    display: flex;
+    flex-direction: column-reverse;
+    padding-top: 1rem;
+    font-size: 1.1rem;
+  }
+}
 .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site .summary-content {
   width: 75%;
 }
+@media (max-width: 810px) {
+  .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site .summary-content {
+    width: 90%;
+    padding: 1rem;
+  }
+  .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site .summary-content p {
+    margin: 0;
+  }
+}
 .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site .links-content {
   width: 15%;
   margin-top: 1.5rem;
 }
+@media (max-width: 810px) {
+  .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site .links-content {
+    width: 100%;
+  }
+}
 .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site .links-content .field--type-file {
   border: none;
   margin-bottom: 1rem;
   background-color: transparent;
 }
+@media (max-width: 810px) {
+  .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site .links-content .field--type-file {
+    margin-bottom: 0;
+  }
+}
 .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site .links-content .field__item {
   padding: 0.5rem;
   border: solid black 1px;
diff --git a/web/themes/custom/reha/scss/pages/_node-site.scss b/web/themes/custom/reha/scss/pages/_node-site.scss
index 66771e4..0f15200 100644
--- a/web/themes/custom/reha/scss/pages/_node-site.scss
+++ b/web/themes/custom/reha/scss/pages/_node-site.scss
@@ -11,6 +11,11 @@
         display: grid;
         grid-template-columns: repeat(8 1fr);
         grid-template-rows: repeat(3 auto);
+        @media(max-width:810px){
+            width: 100vw;
+            display: flex;
+            flex-direction: column;
+        }
        
         #block-reha-prevnextblock{
             display: flex;
@@ -22,19 +27,35 @@
             height: fit-content;
             justify-content: space-between;
             margin: auto;
+            @media(max-width:810px){
+                width: 95%;
+            }
+            span{
+                @media(max-width:810px){
+                    font-size: 0.6rem !important;
+                }
+            }
+            
             .next-site{
                 border: none;
                 padding: 0.5rem 1rem;
                 margin-left: auto;
+                @media(max-width:810px){
+                    padding-top: 0.1rem; 
+                } 
                 ::after{
                     content: url('../../dist/images/noun-arrow-1569918-black.svg');
                     padding-left: 0.5rem;
-                    padding-top: 0.1rem;                    
+                    padding-top: 0.1rem;   
+                                   
                 }
             }
             .prev-site{
                 border: none;
                 padding: 0.5rem 1rem;
+                @media(max-width:810px){
+                    padding-top: 0.1rem; 
+                } 
                 ::before{
                     content: url('../../dist/images/noun-arrow-1569918-black.svg');
                     display: inline-block;
@@ -42,6 +63,7 @@
                     padding-left: 0.5rem;
                 }
             }
+            
         }
 
         #block-reha-titredepage{
@@ -63,16 +85,28 @@
                     display: flex;
                     flex-direction: row;
                     margin: auto;
+                    @media (max-width:810px){
+                        flex-direction: column;
+                        height: auto;
+                        // max-height: 300px;
+                    }
                     .image-site{
                         height: 520px;
                         width: 771px;
                         order: 1;
+                        @media (max-width:810px){
+                            height: auto;
+                            width: 100vw;
+                        }
                         .field--name-field-image{
                             width: 100%;
                             margin: auto;
                             .slick-dots{
                                 z-index: 999;
                                 bottom: -40px;
+                                @media (max-width:810px){
+                                    width: 100vw;
+                                }
                             }
                             .slick-list{
                                 padding: 0 !important;
@@ -84,12 +118,20 @@
                                         height: 520px;
                                         width: auto;
                                         object-fit: contain;
+                                        @media (max-width:810px){
+                                            height: auto;
+                                            width: 100vw;
+                                        }
                                     }
                                     blockquote{
                                         font-style: italic;
                                         margin: 0;   
                                         padding-top: 0.5rem;
-                                        font-size: 0.8rem;             
+                                        font-size: 0.8rem;  
+                                        @media(max-width:810px){
+                                            font-size: 0.6rem;
+                                            padding-left: 0.5rem;
+                                        }           
                                         p{
                                             margin: 0;
                                         }
@@ -114,6 +156,7 @@
                         justify-content: center;
                         @media(max-width: 891px){
                             width: auto;
+                            margin-left: 0rem;
                         }
                         h1{
                             order: 3;
@@ -225,16 +268,37 @@
                     display: flex;
                     flex-direction: row-reverse;
                     justify-content: space-between;
+                    @media(max-width:810px){
+                        width: 100%;
+                        display: flex;
+                        flex-direction: column-reverse;
+                        padding-top: 1rem;
+                        font-size: 1.1rem;
+                    }
                     .summary-content{
                         width: 75%;
+                        @media(max-width:810px){
+                            width: 90%;
+                            padding: 1rem;
+                            p{
+                                margin: 0;
+                            }
+                         }
                     }
                     .links-content{
                         width: 15%;
                         margin-top: 1.5rem;
+                        @media(max-width:810px){
+                            width: 100%;
+                        }
                         .field--type-file{
                             border: none;
                             margin-bottom: 1rem;
                             background-color: transparent;
+                            @media(max-width:810px){
+                                margin-bottom: 0;
+                            }
+
                         }
                         .field__item{
                             padding: 0.5rem;