responsive page 1 projet

web/themes/custom/eql/css-compiled/styles.css

@@ -3151,16 +3151,25 @@ a {
       font-family: "Source Code Pro";
       font-size: 2.8rem;
       font-weight: 500; }
+      @media (max-width: 810px) {
+        .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodetitle .field--name-title {
+          font-size: 1.7rem; } }
   .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-equipe {
     grid-column: 2 / span 7; }
+    @media (max-width: 810px) {
+      .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-equipe {
+        padding-top: 0.5rem; } }
     .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-equipe .field--name-field-equipe {
       color: #09398b;
       font-size: 1.5rem;
       font-weight: 900;
       text-transform: uppercase; }
+      @media (max-width: 810px) {
+        .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-equipe .field--name-field-equipe {
+          font-size: 1rem; } }
   .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-incube {
     padding-top: 2rem;
-    grid-column: 2;
+    grid-column: 2 / span 4;
     width: fit-content; }
     .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-incube .field--name-field-incube {
       background-color: red;
@@ -3168,17 +3177,31 @@ a {
       font-weight: 800;
       padding-right: 0.3rem;
       padding-left: 0.2rem; }
+    @media (max-width: 810px) {
+      .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-incube {
+        grid-column: 2 / span 4; } }
   .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-photo {
     grid-column-start: 5;
     grid-column-end: 9; }
+    @media (max-width: 810px) {
+      .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-photo {
+        grid-column: 1 / span 10; } }
     .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-photo img {
       padding-top: 2rem;
       width: 600px;
       max-height: 360px;
       object-fit: cover; }
+      @media (max-width: 810px) {
+        .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-photo img {
+          padding-top: 1rem;
+          object-fit: contain;
+          width: 100%; } }
 
 .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--first {
   margin-top: 5rem; }
+  @media (max-width: 479px) {
+    .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--first {
+      display: none; } }
   .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--first .block-region-first {
     display: flex;
     justify-content: flex-end;
@@ -3206,8 +3229,16 @@ a {
 .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second {
   margin-top: 5rem;
   flex: 0 1 50%; }
+  @media (max-width: 479px) {
+    .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second {
+      flex: 0 1 100%;
+      margin-top: 1rem; } }
   .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second {
     width: 90%; }
+    @media (max-width: 479px) {
+      .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second {
+        width: 80%;
+        margin: auto; } }
     .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .block-entity-fieldnodebody p {
       margin-top: 0; }
     .path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--second .block-region-second .block-entity-fieldnodebody .field--type-text-with-summary {

web/themes/custom/eql/scss/global/_mediaqueries.scss

@@ -136,7 +136,7 @@
                 }
             }
         }
-    }                            
+    }  
 }
 
 

web/themes/custom/eql/scss/pages/_projet.scss

@@ -15,10 +15,15 @@
                             // position: relative;
                             display: grid;
                             grid-template-columns: 1fr repeat(8, 1fr) 1fr;
+                            // @media (max-width: 479px) {
+                            //     display: flex;
+                            //     flex-direction: column;                                
+                            // }
 
                             .block-block-contentbfb4368c-4f85-4329-88f1-8769161aa66f{
                                 grid-column: 1 / span 10;
                                 background-color: $blue-light;
+                                
                                 .field--name-body{
                                     vertical-align: middle;
                                     color: $white;
@@ -57,20 +62,29 @@
                                     font-family: "Source Code Pro";
                                     font-size: 2.8rem;
                                     font-weight: 500;
+                                    @media (max-width: 810px){
+                                        font-size: 1.7rem;
+                                    }
                                 }
                             }
                             .block-entity-fieldnodefield-equipe{
                                 grid-column: 2 / span 7;
+                                @media (max-width: 810px){
+                                    padding-top: 0.5rem;
+                                }
                                 .field--name-field-equipe{
                                     color: $blue-dark;
                                     font-size: 1.5rem;
                                     font-weight: 900;
                                     text-transform: uppercase ;
+                                    @media (max-width: 810px){
+                                        font-size: 1rem;
+                                    }
                                 }
                             }
                             .block-entity-fieldnodefield-incube{
                                 padding-top: 2rem;
-                                grid-column: 2;
+                                grid-column: 2 / span 4;
                                 width: fit-content;
                                 .field--name-field-incube{
                                     background-color: red;
@@ -79,16 +93,28 @@
                                     padding-right: 0.3rem;
                                     padding-left: 0.2rem;
                                 }
+                                @media (max-width: 810px) {
+                                    grid-column: 2 / span 4;
+                                }
                             }
                             .block-entity-fieldnodefield-photo{
                                 grid-column-start: 5;
                                 grid-column-end: 9;
+                                @media (max-width: 810px) {
+                                    grid-column: 1 / span 10;
+                               
+                                }
                                 img{
                                     padding-top: 2rem;
                                     width: 600px;
                                     // height: auto;
                                     max-height: 360px;
                                     object-fit: cover;
+                                    @media (max-width: 810px) {
+                                        padding-top: 1rem;
+                                        object-fit: contain;
+                                        width: 100%;                                 
+                                    }
                                 }
                                 
                                 // position: relative;
@@ -102,6 +128,9 @@
                     .layout__region--first{
                         // margin-top: 18rem;
                         margin-top: 5rem;
+                        @media (max-width: 479px){
+                            display: none;
+                        }
                         .block-region-first{
                             display: flex;
                             justify-content: flex-end;
@@ -143,8 +172,17 @@
                         margin-top: 5rem;
                         flex: 0 1 50%;
                         // margin-top: 18rem;
+                        @media (max-width: 479px) {
+                            flex: 0 1 100%;
+                            margin-top: 1rem;
+                            
+                        }
                         .block-region-second{
                             width: 90%;
+                            @media (max-width: 479px) {
+                                width: 80%;
+                                margin: auto;                                
+                            }
                             .block-entity-fieldnodebody{
                                 p{
                                     margin-top: 0;