6 次代碼提交 a64f9abaca ... 2b3e19430c

作者 SHA1 備註 提交日期
  ouidade 2b3e19430c responsive page /ressource 1 周之前
  ouidade b52522fa33 responsive page /ressources 1 周之前
  ouidade fc9112e31e responsive page /actualites 1 周之前
  ouidade 8599dc1377 responsive page programme 1 周之前
  ouidade 43236af036 responsive dropdown connexion 1 周之前
  ouidade 75051ebfa5 h2 infos content actus home aligne left 1 周之前

+ 112 - 3
web/themes/custom/reha/dist/css/bundle.css

@@ -194,7 +194,7 @@
 }
 }
 @media (max-width: 500px) {
 @media (max-width: 500px) {
   .layout-content {
   .layout-content {
-    padding-top: 0;
+    padding-top: 2rem;
   }
   }
 }
 }
 .layout-content .layout__region--first {
 .layout-content .layout__region--first {
@@ -203,6 +203,12 @@
 .layout-content .layout__region--second {
 .layout-content .layout__region--second {
   flex: 0 1 75%;
   flex: 0 1 75%;
 }
 }
+@media (max-width: 810px) {
+  .layout-content .layout__region--second {
+    flex: 0 1 90%;
+    margin: auto;
+  }
+}
 .layout-content .layout__region--second.view-id-home {
 .layout-content .layout__region--second.view-id-home {
   margin: 0;
   margin: 0;
 }
 }
@@ -647,6 +653,11 @@ header[role=banner] #block-reha-views-block-current-user-block-block-1 .connecte
   clip-path: inset(0px -10px -10px -10px);
   clip-path: inset(0px -10px -10px -10px);
   padding: 5% 10% 110px 20%;
   padding: 5% 10% 110px 20%;
 }
 }
+@media (max-width: 450px) {
+  header[role=banner] #block-reha-views-block-current-user-block-block-1 .connected .connected-full {
+    width: 90vw;
+  }
+}
 @media (max-width: 500px) {
 @media (max-width: 500px) {
   header[role=banner] #block-reha-views-block-current-user-block-block-1 .connected .connected-full .titre {
   header[role=banner] #block-reha-views-block-current-user-block-block-1 .connected .connected-full .titre {
     font-size: 1.4rem;
     font-size: 1.4rem;
@@ -2451,6 +2462,11 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
     width: 40%;
     width: 40%;
   }
   }
 }
 }
+@media (max-width: 810px) {
+  .page-sitespilotes .view-display-id-page_1 .views-row {
+    width: 100%;
+  }
+}
 .page-sitespilotes .view-display-id-page_1 .views-row:hover {
 .page-sitespilotes .view-display-id-page_1 .views-row:hover {
   transform: scale(1.05);
   transform: scale(1.05);
   transition: 0.3s transform ease, 0.3s box-shadow ease;
   transition: 0.3s transform ease, 0.3s box-shadow ease;
@@ -2590,6 +2606,11 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 .page-sitespilotes .view-display-id-page_1 footer .view-display-id-block_2 .views-row:hover {
 .page-sitespilotes .view-display-id-page_1 footer .view-display-id-block_2 .views-row:hover {
   transform: none;
   transform: none;
 }
 }
+@media (max-width: 810px) {
+  .page-sitespilotes .view-display-id-page_1 footer .view-display-id-block_2 .views-row {
+    width: 100%;
+  }
+}
 .page-sitespilotes .view-display-id-page_1 footer .view-display-id-block_2 .views-row .node-type-site {
 .page-sitespilotes .view-display-id-page_1 footer .view-display-id-block_2 .views-row .node-type-site {
   margin: auto;
   margin: auto;
   display: flex;
   display: flex;
@@ -2775,6 +2796,7 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   padding-top: 0.5rem;
   padding-top: 0.5rem;
   font-weight: 600;
   font-weight: 600;
   font-size: 1.3rem;
   font-size: 1.3rem;
+  text-align: left !important;
 }
 }
 .block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite > .entete_actu .infos-content .field--name-field-sous-titre {
 .block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite > .entete_actu .infos-content .field--name-field-sous-titre {
   padding-top: 0 rem;
   padding-top: 0 rem;
@@ -2879,6 +2901,11 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   margin-top: 0.6rem;
   margin-top: 0.6rem;
   border-bottom: #fdc300 solid 2px;
   border-bottom: #fdc300 solid 2px;
 }
 }
+@media (max-width: 810px) {
+  .page-programme .layout__region--first .block-region-first {
+    display: none;
+  }
+}
 .page-programme .block-region-second h2 {
 .page-programme .block-region-second h2 {
   font-weight: 1000;
   font-weight: 1000;
   font-size: 1.8rem;
   font-size: 1.8rem;
@@ -2887,11 +2914,21 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   width: 80%;
   width: 80%;
   font-size: 1.2rem;
   font-size: 1.2rem;
 }
 }
+@media (max-width: 810px) {
+  .page-programme .block-region-second .block-views-blockhome-block-1 {
+    width: 100%;
+  }
+}
 .page-programme .block-region-second .view-display-id-block_1 {
 .page-programme .block-region-second .view-display-id-block_1 {
   margin: 0;
   margin: 0;
   width: 80%;
   width: 80%;
   padding-top: 1rem;
   padding-top: 1rem;
 }
 }
+@media (max-width: 810px) {
+  .page-programme .block-region-second .view-display-id-block_1 {
+    width: 100%;
+  }
+}
 .page-programme .block-region-second .block-config-pages-block {
 .page-programme .block-region-second .block-config-pages-block {
   margin: 0;
   margin: 0;
   width: 80%;
   width: 80%;
@@ -3194,6 +3231,13 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   max-height: 17rem;
   max-height: 17rem;
   padding-bottom: 5rem;
   padding-bottom: 5rem;
 }
 }
+@media (max-width: 450px) {
+  .page-ressources .view-ressources #views-exposed-form-ressources-page-1 {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 6rem;
+  }
+}
 .page-ressources .view-ressources #views-exposed-form-ressources-page-1::before {
 .page-ressources .view-ressources #views-exposed-form-ressources-page-1::before {
   content: "FILTRER :";
   content: "FILTRER :";
   grid-column: 1;
   grid-column: 1;
@@ -3201,10 +3245,20 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   display: block;
   display: block;
   line-height: 5;
   line-height: 5;
 }
 }
+@media (max-width: 450px) {
+  .page-ressources .view-ressources #views-exposed-form-ressources-page-1::before {
+    line-height: 3;
+  }
+}
 .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item, .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-actions {
 .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item, .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-actions {
   padding-bottom: 0.5rem;
   padding-bottom: 0.5rem;
   align-self: end;
   align-self: end;
 }
 }
+@media (max-width: 450px) {
+  .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item, .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-actions {
+    align-self: auto;
+  }
+}
 .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item-combine {
 .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item-combine {
   grid-column: 1/span 8;
   grid-column: 1/span 8;
   grid-row: 2;
   grid-row: 2;
@@ -3214,16 +3268,31 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   grid-row: 3;
   grid-row: 3;
   width: 45%;
   width: 45%;
 }
 }
+@media (max-width: 450px) {
+  .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .js-form-item-field-site-target-id {
+    width: 100%;
+  }
+}
 .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item-field-themes-target-id {
 .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item-field-themes-target-id {
   grid-column: 3/span 4;
   grid-column: 3/span 4;
   grid-row: 3;
   grid-row: 3;
   width: 45%;
   width: 45%;
 }
 }
+@media (max-width: 450px) {
+  .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item-field-themes-target-id {
+    width: 100%;
+  }
+}
 .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item-field-type-de-ressource-target-id {
 .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item-field-type-de-ressource-target-id {
   width: 45%;
   width: 45%;
   grid-column: 5/span 6;
   grid-column: 5/span 6;
   grid-row: 3;
   grid-row: 3;
 }
 }
+@media (max-width: 450px) {
+  .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item-field-type-de-ressource-target-id {
+    width: 100%;
+  }
+}
 .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-select {
 .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-select {
   background: white;
   background: white;
   border: solid gray 1px;
   border: solid gray 1px;
@@ -3254,6 +3323,12 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   transform: scale(1.05);
   transform: scale(1.05);
   transition: 0.3s transform ease, 0.3s box-shadow ease;
   transition: 0.3s transform ease, 0.3s box-shadow ease;
 }
 }
+@media (max-width: 450px) {
+  .page-ressources .view-ressources .views-row {
+    width: 100%;
+    margin-bottom: 3rem;
+  }
+}
 .page-ressources .view-ressources .views-row .node-type-ressource {
 .page-ressources .view-ressources .views-row .node-type-ressource {
   width: 100%;
   width: 100%;
   display: flex !important;
   display: flex !important;
@@ -3358,15 +3433,38 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   grid-template-rows: repeat(2, auto);
   grid-template-rows: repeat(2, auto);
   padding-top: 3rem;
   padding-top: 3rem;
 }
 }
+@media (max-width: 510px) {
+  .node-type-ressource {
+    display: flex;
+    flex-direction: column;
+    padding-top: 0;
+  }
+}
 .node-type-ressource .image-ressource {
 .node-type-ressource .image-ressource {
   grid-row: 1;
   grid-row: 1;
   grid-column: 2;
   grid-column: 2;
   margin-right: 2rem;
   margin-right: 2rem;
 }
 }
-.node-type-ressource .image-ressource img {
+@media (max-width: 510px) {
+  .node-type-ressource .image-ressource {
+    width: 100%;
+  }
+}
+@media (max-width: 510px) {
+  .node-type-ressource .image-ressource .field__item {
+    display: flex;
+    width: 100%;
+  }
+}
+.node-type-ressource .image-ressource .field__item img {
   height: 400px;
   height: 400px;
   width: auto;
   width: auto;
 }
 }
+@media (max-width: 510px) {
+  .node-type-ressource .image-ressource .field__item img {
+    margin: auto;
+  }
+}
 .node-type-ressource .infos-content {
 .node-type-ressource .infos-content {
   grid-row: 1;
   grid-row: 1;
   grid-column: 3/span 4;
   grid-column: 3/span 4;
@@ -3374,6 +3472,11 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   border: none;
   border: none;
   background-color: transparent;
   background-color: transparent;
 }
 }
+@media (max-width: 510px) {
+  .node-type-ressource .infos-content {
+    width: 85%;
+  }
+}
 .node-type-ressource .infos-content .field--name-field-type-de-ressource {
 .node-type-ressource .infos-content .field--name-field-type-de-ressource {
   text-transform: uppercase;
   text-transform: uppercase;
   font-size: 1rem;
   font-size: 1rem;
@@ -3414,6 +3517,12 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   width: 100%;
   width: 100%;
   margin-top: 2rem;
   margin-top: 2rem;
 }
 }
+@media (max-width: 510px) {
+  .node-type-ressource .body-content {
+    width: 80%;
+    margin: auto;
+  }
+}
 .node-type-ressource .body-content .field--name-field-fichiers {
 .node-type-ressource .body-content .field--name-field-fichiers {
   width: fit-content;
   width: fit-content;
 }
 }
@@ -3442,7 +3551,7 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 @media (max-width: 891px) {
 @media (max-width: 891px) {
   .page-actualites .view-actus {
   .page-actualites .view-actus {
     flex-direction: column;
     flex-direction: column;
-    width: 100%;
+    width: 90%;
   }
   }
 }
 }
 .page-actualites .view-actus .views-row {
 .page-actualites .view-actus .views-row {

+ 5 - 1
web/themes/custom/reha/scss/global/_layout.scss

@@ -43,13 +43,17 @@ $width-menu-slidedown : 550px;
         width: 90%;
         width: 90%;
     }
     }
     @media (max-width:500px) {
     @media (max-width:500px) {
-       padding-top: 0;
+       padding-top: 2rem;
     }
     }
     .layout__region--first{
     .layout__region--first{
         flex: 0 1 25%;
         flex: 0 1 25%;
     }
     }
     .layout__region--second{
     .layout__region--second{
         flex: 0 1 75%;
         flex: 0 1 75%;
+        @media (max-width:810px){
+            flex: 0 1 90%;
+            margin: auto;
+        }
         &.view-id-home{
         &.view-id-home{
             margin: 0;
             margin: 0;
         }
         }

+ 1 - 1
web/themes/custom/reha/scss/pages/_actualites.scss

@@ -15,7 +15,7 @@
         justify-content: space-between;
         justify-content: space-between;
         @media (max-width:891px) {
         @media (max-width:891px) {
             flex-direction: column;
             flex-direction: column;
-            width: 100%;
+            width: 90%;
         }
         }
         .views-row{
         .views-row{
             width: 28%;
             width: 28%;

+ 48 - 38
web/themes/custom/reha/scss/pages/_le-programme.scss

@@ -46,6 +46,9 @@
                     }
                     }
                 }
                 }
             }
             }
+            @media (max-width:810px){
+               display: none;
+            }
         }
         }
     }
     }
     .block-region-second{
     .block-region-second{
@@ -56,59 +59,66 @@
         .block-views-blockhome-block-1{
         .block-views-blockhome-block-1{
             width: 80%;
             width: 80%;
             font-size: 1.2rem;
             font-size: 1.2rem;
+            @media (max-width:810px){
+                width: 100%;
+            }
         }
         }
         .view-display-id-block_1{
         .view-display-id-block_1{
             margin: 0;
             margin: 0;
             width: 80%;
             width: 80%;
             padding-top: 1rem;
             padding-top: 1rem;
+            @media (max-width:810px){
+                width: 100%;
+            }
         }
         }
+        
 
 
-    .block-config-pages-block{
-        margin: 0;
-        width: 80%;
-        padding-top: 1rem;
-        .config_pages--partenaires--full{
-            .paragraph--type--partenaire{
-                width: 100%;
-                padding-bottom: 3rem;
-                height: 205px;
-                display: flex;
-                flex-direction: column;
-                flex-wrap: wrap;
-                justify-content: center;
-                align-content: baseline;
-                @media (max-width: 810px){
+        .block-config-pages-block{
+            margin: 0;
+            width: 80%;
+            padding-top: 1rem;
+            .config_pages--partenaires--full{
+                .paragraph--type--partenaire{
+                    width: 100%;
+                    padding-bottom: 3rem;
+                    height: 205px;
                     display: flex;
                     display: flex;
                     flex-direction: column;
                     flex-direction: column;
-                }
-                .paragraph--type--partenaire>* {
-                flex: 1 1 80px;
-                }
-                .field--name-field-logo{
-                    width: fit-content;
-                    padding-right: 1rem;
-                }
-                .field--name-field-nom{
-                    font-weight: 900;
-                    font-size: 1.2rem
-                }
-                .field--name-field-texte{
-                    .field__item{
-                        p{
-                            strong{
-                                background-color: none;
+                    flex-wrap: wrap;
+                    justify-content: center;
+                    align-content: baseline;
+                    @media (max-width: 810px){
+                        display: flex;
+                        flex-direction: column;
+                    }
+                    .paragraph--type--partenaire>* {
+                    flex: 1 1 80px;
+                    }
+                    .field--name-field-logo{
+                        width: fit-content;
+                        padding-right: 1rem;
+                    }
+                    .field--name-field-nom{
+                        font-weight: 900;
+                        font-size: 1.2rem
+                    }
+                    .field--name-field-texte{
+                        .field__item{
+                            p{
+                                strong{
+                                    background-color: none;
+                                }
                             }
                             }
                         }
                         }
                     }
                     }
+                    .field--name-field-lien{
+                        background-color: none;
+                    }
+                
+                
                 }
                 }
-                .field--name-field-lien{
-                    background-color: none;
-                }
-            
-            
             }
             }
         }
         }
     }
     }
-    }
 }
 }
 
 

+ 6 - 0
web/themes/custom/reha/scss/pages/_les-sites-pilotes.scss

@@ -29,6 +29,9 @@
             @media (max-width:1200px){
             @media (max-width:1200px){
                 width: 40%;
                 width: 40%;
             }
             }
+            @media (max-width:810px){
+                width: 100%;
+            }
             &:hover{
             &:hover{
                 transform: scale(1.05);
                 transform: scale(1.05);
                 transition: 0.3s transform ease, 0.3s box-shadow ease;   
                 transition: 0.3s transform ease, 0.3s box-shadow ease;   
@@ -170,6 +173,9 @@
                     &:hover{
                     &:hover{
                         transform: none;
                         transform: none;
                     }
                     }
+                    @media (max-width:810px){
+                        width: 100%;
+                    }
                     .node-type-site{
                     .node-type-site{
                         margin: auto;
                         margin: auto;
                         display: flex;
                         display: flex;

+ 29 - 5
web/themes/custom/reha/scss/pages/_node-ressource.scss

@@ -9,16 +9,33 @@
         // #block-reha-titredepage{
         // #block-reha-titredepage{
         //     display: block !important;
         //     display: block !important;
         // }
         // }
-
+        @media (max-width:510px){
+            display: flex;
+            flex-direction: column;
+            padding-top: 0;
+        }
         .image-ressource{
         .image-ressource{
             grid-row: 1;
             grid-row: 1;
             grid-column: 2;
             grid-column: 2;
             margin-right: 2rem;
             margin-right: 2rem;
-
-            img{
-                height: 400px;
-                width: auto;
+            @media (max-width:510px){
+                width: 100%;
+            }
+            .field__item{
+                @media (max-width:510px){
+                    display: flex;
+                    width: 100%;
+                }  
+                img{
+                    height: 400px;
+                    width: auto;
+                    @media (max-width:510px){
+                        margin: auto;
+                    } 
+                }     
             }
             }
+
+           
         }
         }
         .infos-content{
         .infos-content{
             grid-row: 1;
             grid-row: 1;
@@ -26,6 +43,9 @@
             margin-left: 2rem;
             margin-left: 2rem;
             border: none;
             border: none;
             background-color:transparent;
             background-color:transparent;
+            @media(max-width:510px){
+                width: 85%;
+            }
             .field--name-field-type-de-ressource{
             .field--name-field-type-de-ressource{
                 text-transform: uppercase;
                 text-transform: uppercase;
                 font-size: 1rem;
                 font-size: 1rem;
@@ -66,6 +86,10 @@
             grid-column: 2 /span 3;
             grid-column: 2 /span 3;
             width: 100%;
             width: 100%;
             margin-top: 2rem;
             margin-top: 2rem;
+            @media (max-width:510px){
+                width: 80%;
+                margin: auto;
+            }
             .field--name-field-fichiers{
             .field--name-field-fichiers{
                 width: fit-content;
                 width: fit-content;
             }
             }

+ 24 - 1
web/themes/custom/reha/scss/pages/_ressources.scss

@@ -24,18 +24,29 @@
             height: fit-content;
             height: fit-content;
             max-height: 17rem;
             max-height: 17rem;
             padding-bottom: 5rem;
             padding-bottom: 5rem;
+            @media (max-width:450px){
+                display: flex;
+                flex-direction: column;
+                margin-bottom: 6rem;
+            }
             &::before{
             &::before{
                 content: 'FILTRER :';
                 content: 'FILTRER :';
                 grid-column: 1;
                 grid-column: 1;
                 grid-row: 1;
                 grid-row: 1;
                 display: block;
                 display: block;
                 line-height: 5;   
                 line-height: 5;   
+                @media (max-width:450px){
+                line-height: 3; 
+                }
                 
                 
             }
             }
             .form-item, .form-actions{ 
             .form-item, .form-actions{ 
                 // margin: 1rem;
                 // margin: 1rem;
                 padding-bottom: 0.5rem;
                 padding-bottom: 0.5rem;
                 align-self: end;
                 align-self: end;
+                @media (max-width:450px){
+                    align-self: auto; 
+                }
             }
             }
             .form-item-combine{
             .form-item-combine{
                 grid-column: 1 /span 8;
                 grid-column: 1 /span 8;
@@ -47,17 +58,25 @@
                 grid-column: 1 /span 4;
                 grid-column: 1 /span 4;
                 grid-row: 3;
                 grid-row: 3;
                 width: 45%;
                 width: 45%;
+                @media (max-width:450px){
+                    width: 100%; 
+                }
             }
             }
             .form-item-field-themes-target-id{
             .form-item-field-themes-target-id{
                 grid-column: 3 /span 4;
                 grid-column: 3 /span 4;
                 grid-row: 3;
                 grid-row: 3;
                 width: 45%;
                 width: 45%;
-                
+                @media (max-width:450px){
+                    width: 100%; 
+                }
             }
             }
             .form-item-field-type-de-ressource-target-id{
             .form-item-field-type-de-ressource-target-id{
                 width: 45%;
                 width: 45%;
                 grid-column: 5 /span 6;
                 grid-column: 5 /span 6;
                 grid-row: 3;
                 grid-row: 3;
+                @media (max-width:450px){
+                    width: 100%; 
+                }
             }
             }
             
             
             .form-select{
             .form-select{
@@ -92,6 +111,10 @@
                 transform: scale(1.05);
                 transform: scale(1.05);
                 transition: 0.3s transform ease, 0.3s box-shadow ease;   
                 transition: 0.3s transform ease, 0.3s box-shadow ease;   
             }
             }
+            @media (max-width:450px){
+                width: 100%; 
+                margin-bottom: 3rem;
+            }
             .node-type-ressource{             
             .node-type-ressource{             
                 width: 100%;
                 width: 100%;
                 // margin: auto;
                 // margin: auto;

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

@@ -71,6 +71,7 @@
                             padding-top: 0.5rem;
                             padding-top: 0.5rem;
                             font-weight: 600;
                             font-weight: 600;
                             font-size: 1.3rem;
                             font-size: 1.3rem;
+                            text-align: left !important;
                         }
                         }
                         .field--name-field-sous-titre{
                         .field--name-field-sous-titre{
                             padding-top: 0 rem;
                             padding-top: 0 rem;

+ 3 - 0
web/themes/custom/reha/scss/partials/_header.scss

@@ -356,6 +356,9 @@ header[role=banner]{
                     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
                     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
                     clip-path: inset(0px -10px -10px -10px);
                     clip-path: inset(0px -10px -10px -10px);
                     padding: 5% 10% $header-height 20%;
                     padding: 5% 10% $header-height 20%;
+                    @media (max-width:450px){
+                        width: 90vw;
+                    }
                     .titre{
                     .titre{
                         @media (max-width:500px) {
                         @media (max-width:500px) {
                             font-size: 1.4rem;
                             font-size: 1.4rem;