mobile header & home

web/themes/custom/reha/css/reha.css

@@ -208,7 +208,6 @@ header {
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
   @media (max-width: 800px) {
     header {
-      height: 100px;
       width: 800px; } }
   header .region-header {
     display: inline-grid;
@@ -230,7 +229,6 @@ header {
         object-fit: contain; }
       @media (max-width: 891px) {
         header .region-header #block-reha-logoministere {
-          width: 10%;
           padding-left: 1rem; } }
     header .region-header #block-reha-logoreha {
       display: none;
@@ -251,7 +249,6 @@ header {
       height: fit-content; }
       @media (max-width: 891px) {
         header .region-header #block-reha-connexionutilisateur {
-          width: 10%;
           padding-left: 1rem; } }
       header .region-header #block-reha-connexionutilisateur .bouton-connexion {
         padding-right: 3rem; }
@@ -476,20 +473,57 @@ footer {
   footer div {
     display: flex;
     flex-direction: row; }
+    @media (max-width: 891px) {
+      footer div {
+        flex-wrap: wrap; } }
+    @media (max-width: 520px) {
+      footer div {
+        flex-direction: column; } }
   footer h2 {
     font-size: 1.3rem; }
   footer section:not(:first-of-type) {
     border-left: #fdc300 solid 5px;
     padding-left: 2rem; }
+    @media (max-width: 891px) {
+      footer section:not(:first-of-type) {
+        margin-left: 1rem;
+        margin-right: 1rem;
+        border-left: #fdc300 solid 2px; } }
+    @media (max-width: 520px) {
+      footer section:not(:first-of-type) {
+        margin-left: 1rem;
+        margin-right: 1rem;
+        border-left: none;
+        border-top: #fdc300 solid 2px; } }
   footer section:not(:last-of-type) {
     padding-right: 5rem; }
+    @media (max-width: 891px) {
+      footer section:not(:last-of-type) {
+        padding-right: 0; } }
+    @media (max-width: 520px) {
+      footer section:not(:last-of-type) {
+        padding-right: 0; } }
+  footer section:last-of-type {
+    padding-right: 5rem; }
+    @media (max-width: 891px) {
+      footer section:last-of-type {
+        border-top: #fdc300 solid 2px;
+        border-left: none; } }
 
 #footer-left {
-  margin-left: 10rem; }
+  margin-left: 10%; }
+  @media (max-width: 891px) {
+    #footer-left {
+      margin-left: 1rem;
+      padding-left: 2rem;
+      width: 40%; } }
+  @media (max-width: 520px) {
+    #footer-left {
+      margin-left: 1rem;
+      padding-left: 2rem; } }
   #footer-left div {
     display: flex;
-    flex-direction: column;
-    padding-right: 2rem; }
+    flex-direction: column; }
     #footer-left div #block-reha-pieddepage ul {
       padding-left: 0; }
     #footer-left div #block-reha-logoreha-3 {
@@ -500,6 +534,10 @@ footer {
       #footer-left div .social-media-links--platforms svg.ext {
         display: none; }
 
+@media (max-width: 891px) {
+  #footer-middle {
+    width: 40%; } }
+
 #footer-middle #block-reha-operateurduprogramme {
   display: flex;
   flex-direction: column; }

web/themes/custom/reha/scss/partials/_footer.scss

@@ -8,6 +8,13 @@ footer{
     div{
         display: flex;
         flex-direction: row;
+        @media(max-width: 891px){
+            // // flex-direction: row;
+            flex-wrap: wrap;
+        }
+        @media(max-width: 520px){
+            flex-direction: column;
+        }
     }
 
     h2{font-size: 1.3rem;}
@@ -16,18 +23,62 @@ footer{
     section:not(:first-of-type){
         border-left: $yellow-puca solid 5px;
         padding-left: 2rem;
+        @media(max-width: 891px){
+            margin-left: 1rem;
+            margin-right: 1rem;
+            border-left: $yellow-puca solid 2px;
+
+            // border-left: none;
+            // border-top: $yellow-puca solid 2px;
+        }
+        @media(max-width: 520px){
+            margin-left: 1rem;
+            margin-right: 1rem;
+            border-left: none;
+            border-top: $yellow-puca solid 2px;
+        }
     }
     section:not(:last-of-type){
         padding-right: 5rem;
+        @media(max-width: 891px){
+            padding-right: 0;
+        }
+        @media(max-width: 520px){
+            padding-right: 0;
+        }
+
+    }
+    section:last-of-type{
+        padding-right: 5rem;
+        @media(max-width: 891px){
+            border-top: $yellow-puca solid 2px;
+            border-left: none;
+        }
+
+
     }
 }
 
 #footer-left {
-margin-left: 10rem;
+margin-left: 10%;
+@media(max-width: 891px){
+    margin-left: 1rem;
+    padding-left: 2rem;
+    width: 40%;
+
+}
+@media(max-width: 520px){
+    margin-left: 1rem;
+    padding-left: 2rem;
+}
     div{
     display: flex;
     flex-direction: column;
-    padding-right: 2rem;
+    // padding-right: 2rem;
+    // @media(max-width: 891px){
+
+    //     padding-right: 0;
+    // }
         #block-reha-pieddepage {
             ul{
                 padding-left: 0;
@@ -47,6 +98,9 @@ margin-left: 10rem;
 }
 
 #footer-middle{
+    @media(max-width: 891px){
+        width: 40%;
+    }
     #block-reha-operateurduprogramme{
         display: flex;
         flex-direction: column;

web/themes/custom/reha/scss/partials/_header.scss

@@ -12,7 +12,7 @@ header{
     top: 0;
     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
     @media (max-width:800px) {
-            height: 100px;
+            // height: 100px;
             width: 800px;
  
      }
@@ -39,7 +39,7 @@ header{
                     object-fit: contain;
                 }
             @media (max-width:891px) {
-                width: 10%;
+                // width: 10%;
                 padding-left: 1rem;
             }   
             
@@ -69,7 +69,7 @@ header{
             flex-direction: column;
             height: fit-content;
             @media (max-width:891px) {
-                width: 10%;
+                // width: 10%;
                 padding-left: 1rem;
             }