From c06774e52bed7dfbdb3ca59a7ffad54135a47bb5 Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Mon, 22 Sep 2025 15:49:17 +0200
Subject: [PATCH] responsive home actus

---
 .../custom/eql/dist/assets/css/bundle.css     | 58 +++++++++++++++++++
 web/themes/custom/eql/scss/pages/_home.scss   | 24 +++++++-
 .../custom/eql/scss/partials/_header.scss     | 26 +++++++++
 3 files changed, 107 insertions(+), 1 deletion(-)

diff --git a/web/themes/custom/eql/dist/assets/css/bundle.css b/web/themes/custom/eql/dist/assets/css/bundle.css
index 87e1c40..bdb4f70 100644
--- a/web/themes/custom/eql/dist/assets/css/bundle.css
+++ b/web/themes/custom/eql/dist/assets/css/bundle.css
@@ -608,6 +608,11 @@ svg.ext {
   display: flex;
   justify-content: end;
 }
+@media (max-width: 810px) {
+  .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_photo {
+    width: 100%;
+  }
+}
 .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_photo .field--name-field-images .field__item {
   display: flex;
   max-height: 420px;
@@ -647,6 +652,11 @@ svg.ext {
   align-content: center;
   color: rgb(9, 57, 139) !important;
 }
+@media (max-width: 810px) {
+  .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos {
+    width: 100%;
+  }
+}
 .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-date:empty,
 .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-lieu:empty,
 .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-title:empty,
@@ -658,6 +668,11 @@ svg.ext {
 .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-date {
   font-size: 1.3rem;
 }
+@media (min-width: 811px) {
+  .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-date {
+    font-size: 0.9rem;
+  }
+}
 .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-date div {
   display: flex !important;
   flex-direction: row;
@@ -670,6 +685,11 @@ svg.ext {
   padding-right: 1rem;
   width: fit-content;
 }
+@media (min-width: 811px) {
+  .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-date time {
+    font-size: 0.9rem;
+  }
+}
 .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-lieu {
   font-size: 1.3rem;
   padding-top: 1rem;
@@ -680,6 +700,8 @@ svg.ext {
 @media (max-width: 811px) {
   .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-lieu {
     display: inline-flex;
+    font-size: 0.9rem;
+    padding-top: 0.5rem;
   }
 }
 .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-title {
@@ -690,6 +712,12 @@ svg.ext {
 .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-title h2 a {
   color: rgb(9, 57, 139) !important;
 }
+@media (max-width: 810px) {
+  .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-title {
+    font-size: 1rem;
+    padding-top: 0.5rem;
+  }
+}
 .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-sous-titre {
   display: none;
   font-weight: 800;
@@ -703,6 +731,12 @@ svg.ext {
   padding-top: 2rem;
   font-size: 1.3rem;
 }
+@media (max-width: 810px) {
+  .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-actu-type {
+    font-size: 0.9rem;
+    padding-top: 1rem;
+  }
+}
 .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field:not(.field--name-field-images) {
   width: 100%;
 }
@@ -6302,10 +6336,19 @@ body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefiel
   height: 100%;
   align-items: center;
 }
+@media (max-width: 810px) {
+  #header-top .region-header-top-left #block-logogouv {
+    width: 30%;
+  }
+}
 #header-top .region-header-top-left #block-logogouv img {
   width: 100%;
   height: auto;
 }
+#header-top .region-header-top-left #block-eql-logoepau {
+  height: 100%;
+  align-content: center;
+}
 #header-top .region-header-top-left #block-logoeql {
   display: flex;
   height: 100%;
@@ -6315,6 +6358,11 @@ body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefiel
   width: 100%;
   height: auto;
 }
+@media (max-width: 810px) {
+  #header-top .region-header-top-left #block-logoeql img {
+    width: 80%;
+  }
+}
 #header-top .region-header-top-rigth {
   display: flex;
   flex-direction: row;
@@ -6336,6 +6384,11 @@ body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefiel
 #header-top .region-header-top-rigth #block-eql-identitedusite :link {
   color: rgb(9, 57, 139) !important;
 }
+@media (max-width: 870px) {
+  #header-top .region-header-top-rigth #block-eql-identitedusite {
+    display: none;
+  }
+}
 #header-top .region-header-top-rigth #block-logoeql {
   padding-left: 1rem;
   padding-right: 2.5rem;
@@ -6344,6 +6397,11 @@ body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefiel
   width: 80px;
   height: auto;
 }
+@media (max-width: 870px) {
+  #header-top .region-header-top-rigth #block-logoeql {
+    padding-right: 1rem;
+  }
+}
 #header-top .region-header-top-rigth #block-burger {
   z-index: 1;
   background-color: rgb(0, 158, 227);
diff --git a/web/themes/custom/eql/scss/pages/_home.scss b/web/themes/custom/eql/scss/pages/_home.scss
index 41d95f5..513c905 100644
--- a/web/themes/custom/eql/scss/pages/_home.scss
+++ b/web/themes/custom/eql/scss/pages/_home.scss
@@ -70,6 +70,9 @@
                                         width: 50%;
                                         display: flex;
                                         justify-content: end;
+                                        @media(max-width:810px){
+                                           width: 100%;
+                                        }
                                         .field--name-field-images {
                                                 .field__item{
                                                     display: flex;
@@ -107,6 +110,9 @@
                                         width: 45%;
                                         align-content: center;
                                         color: $blue-dark !important;
+                                        @media(max-width:810px){
+                                            width: 100%;
+                                         }
                                         .field--name-field-date,
                                         .field--name-field-lieu,
                                         .field--name-title,
@@ -127,6 +133,7 @@
                                         font-size: 1.3rem;
                                         @media (min-width: 811px) {
                                             // margin-top: 5rem;
+                                            font-size: 0.9rem;
                                         }
                                         div{
                                             display: flex !important;
@@ -138,7 +145,11 @@
                                             font-size: 1.3rem;
                                             font-weight: 800;
                                             padding-right: 1rem;
-                                            width: fit-content;            
+                                            width: fit-content;    
+                                            @media (min-width: 811px) {
+                                                
+                                                font-size: 0.9rem;
+                                            }        
                                         }
                                     }
     
@@ -151,6 +162,8 @@
                                     
                                         @media (max-width: 811px){
                                             display: inline-flex;
+                                            font-size: 0.9rem;
+                                            padding-top: 0.5rem;
                                         }
                                         
                                     }
@@ -161,6 +174,10 @@
                                         h2 a {
                                             color: $blue-dark !important;
                                         }
+                                        @media(max-width:810px){
+                                            font-size: 1rem;
+                                            padding-top: 0.5rem;
+                                         }
                                     }
         
                                     .field--name-field-sous-titre {
@@ -174,6 +191,11 @@
                                     .field--name-field-actu-type {
                                         padding-top: 2rem;
                                         font-size: 1.3rem;
+                                        @media(max-width:810px){
+                                            font-size: 0.9rem;
+                                            padding-top: 1rem;
+                                         }
+                                        
                                     }
         
                                     .field:not(.field--name-field-images) {
diff --git a/web/themes/custom/eql/scss/partials/_header.scss b/web/themes/custom/eql/scss/partials/_header.scss
index 3c2627d..2e10be6 100644
--- a/web/themes/custom/eql/scss/partials/_header.scss
+++ b/web/themes/custom/eql/scss/partials/_header.scss
@@ -33,14 +33,25 @@
         color: $black;  
         // font-weight: 800;
         flex: 1;
+        
         #block-logogouv{
             display: flex;
             height: 100%;
             align-items: center;
+            @media (max-width: 810px){
+              width: 30%;
+            }
             img{
                 width: 100%;
                 height: auto;
             }
+            
+        }
+
+  
+        #block-eql-logoepau{
+            height: 100%;
+            align-content: center;          
         }
         #block-logoeql{
             display: flex;
@@ -52,6 +63,12 @@
                 width: 100%;
                 height: auto;
             }
+            @media (max-width: 810px){
+                
+                img{
+                    width: 80%;
+                }
+            }
         }
     } 
     .region-header-top-rigth{
@@ -75,6 +92,9 @@
             :link{
                 color: $blue-dark !important;
             }
+            @media (max-width: 870px){
+                display: none;
+            }   
             
         }  
         #block-logoeql{
@@ -84,6 +104,12 @@
                 width: 80px;
                 height: auto;
             }
+            @media (max-width: 870px){
+                padding-right: 1rem;
+                // img{
+                //     width: 50px;
+                // }
+            } 
           
         }