responsive home

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

@@ -2215,12 +2215,12 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   width: 16vw;
   margin-left: 12%;
   padding-top: 1rem;
-  padding-left: 2rem;
   padding-bottom: 5rem;
 }
 @media (max-width: 891px) {
   .home-page-layout-content .block-block-content3bb825b3-ab84-4861-a4f2-2a5e5eed74de {
-    width: 36%;
+    width: 60%;
+    margin-left: 3%;
     padding-bottom: 4rem;
   }
 }
@@ -2335,7 +2335,6 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 @media (max-width: 900px) {
   .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field--type-image .field__items .field__item blockquote {
     left: 0;
-    top: 0;
     width: 100%;
   }
 }
@@ -2346,7 +2345,9 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 }
 @media (max-width: 900px) {
   .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .image-site .field--type-image .field__items .field__item blockquote p {
-    font-size: 0.8rem;
+    font-size: 0.7rem;
+    padding-bottom: 0.1rem;
+    padding-left: 0.2rem;
   }
 }
 .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .entete_site .infos-content-site {
@@ -2456,12 +2457,23 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   margin-top: 1rem;
   margin-bottom: 4rem;
 }
+@media (max-width: 891px) {
+  .home-page-layout-content .block-block-content9e601647-144f-4e8e-b9e1-7d744f9141d7 {
+    margin-top: 0;
+    margin-bottom: 2rem;
+  }
+}
 .home-page-layout-content .block-block-content9e601647-144f-4e8e-b9e1-7d744f9141d7 .field--type-link {
   padding-left: 0.5rem;
   padding-right: 0.3rem;
   padding-bottom: 0.3rem;
   padding-top: 0.3rem;
 }
+@media (max-width: 891px) {
+  .home-page-layout-content .block-block-content9e601647-144f-4e8e-b9e1-7d744f9141d7 .field--type-link {
+    font-size: 0.8rem;
+  }
+}
 
 .page-sitespilotes h1 {
   width: 80%;
@@ -2777,6 +2789,11 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   background-color: white;
   padding-bottom: 3rem;
 }
+@media (max-width: 890px) {
+  .block-views-blockactus-block-1 {
+    padding-bottom: 0rem;
+  }
+}
 .block-views-blockactus-block-1 h2 {
   width: 80%;
   font-size: 2rem;
@@ -2786,6 +2803,13 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   text-align: center;
   margin-bottom: 4rem;
 }
+@media (max-width: 890px) {
+  .block-views-blockactus-block-1 h2 {
+    padding-top: 2rem;
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+  }
+}
 .block-views-blockactus-block-1 .view-id-actus {
   width: 100%;
   margin: auto;
@@ -2794,6 +2818,11 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 .block-views-blockactus-block-1 .view-id-actus .slick-track {
   padding-left: 7rem;
 }
+@media (max-width: 890px) {
+  .block-views-blockactus-block-1 .view-id-actus .slick-track {
+    padding-left: 1rem !important;
+  }
+}
 .block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite {
   width: 90%;
   height: 100%;
@@ -2837,6 +2866,11 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   height: fit-content;
   width: 100%;
 }
+@media (max-width: 890px) {
+  .block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite > .entete_actu .infos-content {
+    width: 90%;
+  }
+}
 .block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite > .entete_actu .infos-content h1 {
   display: none;
 }
@@ -2878,6 +2912,11 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   }
 }
 
+@media (max-width: 890px) {
+  .page--home .home-page-layout-content .block-region-content {
+    padding-bottom: 2rem;
+  }
+}
 .page--home .home-page-layout-content .block-views-blockhome-block-1 .view-display-id-block_1 {
   width: 60%;
   margin: auto;
@@ -2890,7 +2929,8 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 @media (max-width: 891px) {
   .page--home .home-page-layout-content .block-views-blockhome-block-1 .view-display-id-block_1 {
     width: 80%;
-    padding-top: 3rem;
+    padding-top: 1rem;
+    font-size: 1rem;
   }
 }
 .page--home .home-page-layout-content .block-views-blockhome-block-1 .view-display-id-block_1 .field-content p:nth-of-type(n+2), .page--home .home-page-layout-content .block-views-blockhome-block-1 .view-display-id-block_1 h3, .page--home .home-page-layout-content .block-views-blockhome-block-1 .view-display-id-block_1 ul {
@@ -2904,12 +2944,25 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   margin-top: 2rem;
   margin-bottom: 4rem;
 }
+@media (max-width: 890px) {
+  .page--home .home-page-layout-content .block-block-content793e5016-2b96-4802-9f38-1cd3768775b5 {
+    width: 80%;
+    margin: auto;
+    padding-top: 1rem;
+  }
+}
 .page--home .home-page-layout-content .block-block-content793e5016-2b96-4802-9f38-1cd3768775b5 .field--type-link {
   padding-left: 0.5rem;
   padding-right: 0.3rem;
   padding-bottom: 0.3rem;
   padding-top: 0.3rem;
 }
+@media (max-width: 891px) {
+  .page--home .home-page-layout-content .block-block-content793e5016-2b96-4802-9f38-1cd3768775b5 .field--type-link {
+    width: 80%;
+    font-size: 0.8rem;
+  }
+}
 .page--home .home-page-layout-content .block-block-content793e5016-2b96-4802-9f38-1cd3768775b5 .field--type-link .field__item::after {
   content: url("../dist/images/noun-arrow-1569918-black.svg");
 }
@@ -3028,7 +3081,7 @@ 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) {
+@media (max-width: 890px) {
   .page-node-site .region-content {
     width: 100vw;
     display: flex;
@@ -3046,12 +3099,12 @@ 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) {
+@media (max-width: 890px) {
   .page-node-site .region-content #block-reha-prevnextblock {
     width: 95%;
   }
 }
-@media (max-width: 810px) {
+@media (max-width: 890px) {
   .page-node-site .region-content #block-reha-prevnextblock span {
     font-size: 0.6rem !important;
   }
@@ -3061,7 +3114,7 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   padding: 0.5rem 1rem;
   margin-left: auto;
 }
-@media (max-width: 810px) {
+@media (max-width: 890px) {
   .page-node-site .region-content #block-reha-prevnextblock .next-site {
     padding-top: 0.1rem;
   }
@@ -3075,7 +3128,7 @@ 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) {
+@media (max-width: 890px) {
   .page-node-site .region-content #block-reha-prevnextblock .prev-site {
     padding-top: 0.1rem;
   }
@@ -3108,7 +3161,7 @@ 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) {
+@media (max-width: 890px) {
   .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site {
     flex-direction: column;
     height: auto;
@@ -3119,7 +3172,7 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   width: 771px;
   order: 1;
 }
-@media (max-width: 810px) {
+@media (max-width: 890px) {
   .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site .image-site {
     height: auto;
     width: 100vw;
@@ -3133,7 +3186,7 @@ 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) {
+@media (max-width: 890px) {
   .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site .image-site .field--name-field-image .slick-dots {
     width: 100vw;
   }
@@ -3151,7 +3204,7 @@ 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) {
+@media (max-width: 890px) {
   .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;
@@ -3163,7 +3216,7 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   padding-top: 0.5rem;
   font-size: 0.8rem;
 }
-@media (max-width: 810px) {
+@media (max-width: 890px) {
   .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;
@@ -3291,7 +3344,7 @@ 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) {
+@media (max-width: 890px) {
   .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site {
     width: 100%;
     display: flex;
@@ -3303,20 +3356,21 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site .summary-content {
   width: 75%;
 }
-@media (max-width: 810px) {
+@media (max-width: 890px) {
   .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;
+    text-align: start !important;
   }
 }
 .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) {
+@media (max-width: 890px) {
   .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site .links-content {
     width: 100%;
   }
@@ -3326,7 +3380,7 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   margin-bottom: 1rem;
   background-color: transparent;
 }
-@media (max-width: 810px) {
+@media (max-width: 890px) {
   .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site .links-content .field--type-file {
     margin-bottom: 0;
   }

web/themes/custom/reha/scss/pages/_node-site.scss

@@ -11,7 +11,7 @@
         display: grid;
         grid-template-columns: repeat(8 1fr);
         grid-template-rows: repeat(3 auto);
-        @media(max-width:810px){
+        @media(max-width:890px){
             width: 100vw;
             display: flex;
             flex-direction: column;
@@ -27,11 +27,11 @@
             height: fit-content;
             justify-content: space-between;
             margin: auto;
-            @media(max-width:810px){
+            @media(max-width:890px){
                 width: 95%;
             }
             span{
-                @media(max-width:810px){
+                @media(max-width:890px){
                     font-size: 0.6rem !important;
                 }
             }
@@ -40,7 +40,7 @@
                 border: none;
                 padding: 0.5rem 1rem;
                 margin-left: auto;
-                @media(max-width:810px){
+                @media(max-width:890px){
                     padding-top: 0.1rem; 
                 } 
                 ::after{
@@ -53,7 +53,7 @@
             .prev-site{
                 border: none;
                 padding: 0.5rem 1rem;
-                @media(max-width:810px){
+                @media(max-width:890px){
                     padding-top: 0.1rem; 
                 } 
                 ::before{
@@ -85,7 +85,7 @@
                     display: flex;
                     flex-direction: row;
                     margin: auto;
-                    @media (max-width:810px){
+                    @media (max-width:890px){
                         flex-direction: column;
                         height: auto;
                         // max-height: 300px;
@@ -94,7 +94,7 @@
                         height: 520px;
                         width: 771px;
                         order: 1;
-                        @media (max-width:810px){
+                        @media (max-width:890px){
                             height: auto;
                             width: 100vw;
                         }
@@ -104,7 +104,7 @@
                             .slick-dots{
                                 z-index: 999;
                                 bottom: -40px;
-                                @media (max-width:810px){
+                                @media (max-width:890px){
                                     width: 100vw;
                                 }
                             }
@@ -118,7 +118,7 @@
                                         height: 520px;
                                         width: auto;
                                         object-fit: contain;
-                                        @media (max-width:810px){
+                                        @media (max-width:890px){
                                             height: auto;
                                             width: 100vw;
                                         }
@@ -128,7 +128,7 @@
                                         margin: 0;   
                                         padding-top: 0.5rem;
                                         font-size: 0.8rem;  
-                                        @media(max-width:810px){
+                                        @media(max-width:890px){
                                             font-size: 0.6rem;
                                             padding-left: 0.5rem;
                                         }           
@@ -268,7 +268,7 @@
                     display: flex;
                     flex-direction: row-reverse;
                     justify-content: space-between;
-                    @media(max-width:810px){
+                    @media(max-width:890px){
                         width: 100%;
                         display: flex;
                         flex-direction: column-reverse;
@@ -277,25 +277,26 @@
                     }
                     .summary-content{
                         width: 75%;
-                        @media(max-width:810px){
+                        @media(max-width:890px){
                             width: 90%;
                             padding: 1rem;
                             p{
                                 margin: 0;
+                                text-align: start !important;
                             }
                          }
                     }
                     .links-content{
                         width: 15%;
                         margin-top: 1.5rem;
-                        @media(max-width:810px){
+                        @media(max-width:890px){
                             width: 100%;
                         }
                         .field--type-file{
                             border: none;
                             margin-bottom: 1rem;
                             background-color: transparent;
-                            @media(max-width:810px){
+                            @media(max-width:890px){
                                 margin-bottom: 0;
                             }
 

web/themes/custom/reha/scss/pages/home/_home-view-actualites.scss

@@ -1,6 +1,9 @@
 .block-views-blockactus-block-1{
     background-color: white;
     padding-bottom: 3rem;
+    @media(max-width: 890px){
+        padding-bottom: 0rem;
+    }
     h2{
         width: 80%;
         font-size: 2rem;
@@ -9,6 +12,11 @@
         padding-top: 1rem;
         text-align: center;
         margin-bottom: 4rem;
+        @media(max-width: 890px){
+            padding-top: 2rem;
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+        }
     }
     .view-id-actus{
         width: 100%;
@@ -19,6 +27,9 @@
         // }
         .slick-track{
             padding-left: 7rem;
+            @media(max-width: 890px){
+                padding-left: 1rem !important;
+            }
         }
         .views-row{
             // width: 30vw !important;
@@ -70,6 +81,9 @@
                     .infos-content{
                         height: fit-content;
                         width: 100%;
+                        @media(max-width: 890px){
+                            width: 90%;
+                        }
                         h1{
                             display: none;
                         }

web/themes/custom/reha/scss/pages/home/_home-view-presentation.scss

@@ -1,6 +1,13 @@
 .page--home{
+    
 
     .home-page-layout-content{
+        .block-region-content{
+            @media(max-width:890px){
+                padding-bottom: 2rem;
+            }
+        }
+       
         .block-views-blockhome-block-1{
     
             .view-display-id-block_1{
@@ -13,7 +20,8 @@
                 font-size: 1.3rem;
                 @media(max-width: 891px){
                     width: 80%;
-                    padding-top: 3rem;
+                    padding-top: 1rem;
+                    font-size: 1rem;
                 } 
                     /* Masquer tous les paragraphes après le premier */
                 .field-content p:nth-of-type(n+2), h3, ul {
@@ -29,11 +37,20 @@
             position: relative;
             margin-top: 2rem;
             margin-bottom: 4rem;
+            @media(max-width: 890px){
+                width: 80%;
+                margin: auto;
+                padding-top: 1rem;
+            }
             .field--type-link{
                 padding-left: 0.5rem;
                 padding-right: 0.3rem;
                 padding-bottom: 0.3rem;
                 padding-top: 0.3rem;
+                @media(max-width: 891px){
+                    width: 80%;
+                    font-size: 0.8rem;
+                }
                 .field__item::after{    
                         content: url('../dist/images/noun-arrow-1569918-black.svg');
                 }

web/themes/custom/reha/scss/pages/home/_home-view-sites.scss

@@ -9,13 +9,10 @@
     width: 16vw;
     margin-left: 12%;
     padding-top: 1rem;
-    padding-left: 2rem;
     padding-bottom: 5rem;
     @media(max-width: 891px){
-        // margin-bottom: 1rem;
-        // margin-top: 2rem;
-        width: 36%;
-        // margin: auto;
+        width: 60%;
+        margin-left: 3%;
         padding-bottom: 4rem;
     }
     p{
@@ -120,7 +117,7 @@
                                         bottom: 0px;
                                         @media(max-width: 900px){
                                             left: 0;
-                                            top: 0;
+                                            // top: 0;
                                             width: 100%;
                                         }
                                         p{
@@ -128,7 +125,9 @@
                                             padding-left: 1rem;
                                             padding-bottom: 1rem;
                                             @media(max-width: 900px){
-                                                font-size: 0.8rem;
+                                                font-size: 0.7rem;
+                                                padding-bottom: 0.1rem;
+                                                padding-left: 0.2rem;
                                             }
                                         }
                                     }
@@ -254,12 +253,19 @@
         // top: -10px;
         margin-top: 1rem;
         margin-bottom: 4rem;
+        @media(max-width: 891px){
+           margin-top: 0;
+           margin-bottom: 2rem;
+        }
 
         .field--type-link{
             padding-left: 0.5rem;
             padding-right: 0.3rem;
             padding-bottom: 0.3rem;
             padding-top: 0.3rem;
+            @media(max-width: 891px){
+                font-size: 0.8rem;
+            }
         }
 
     }