twig header print

web/themes/custom/eql/dist/assets/css/bundle.css

@@ -621,16 +621,28 @@ svg.ext {
     display: block;
   }
   .path-projets-complets .layout-content .print-header {
-    position: absolute;
-    top: 1cm;
-    right: 1cm;
+    position: relative !important;
+    top: auto !important;
+    right: auto !important;
+    display: flex !important;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #ccc;
+    break-after: avoid;
+    page-break-after: avoid;
+  }
+  .path-projets-complets .layout-content .print-header__left,
+  .path-projets-complets .layout-content .print-header__right {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: 1rem;
   }
   .path-projets-complets .layout-content .print-header img {
-    width: 2cm;
-    height: auto;
+    max-height: 55px;
+    width: auto;
   }
   .path-projets-complets .layout-content .print-header__text {
     text-transform: uppercase;
@@ -639,7 +651,7 @@ svg.ext {
     font-size: 0.8rem;
     font-weight: 500;
     text-transform: uppercase;
-    text-align: end;
+    text-align: right;
   }
   .path-projets-complets .layout-content .view-header,
   .path-projets-complets .layout-content .view-filters {
@@ -815,8 +827,6 @@ svg.ext {
     content: ":";
     padding-left: 0.5rem;
   }
-}
-@media print {
   .path-projets-complets .layout-content .views-row .projet-header-print .path-projets-complets .layout-content {
     width: 100% !important;
     margin: 0 auto !important;

web/themes/custom/eql/scss/global/print/_projets-complets-print.scss

@@ -5,6 +5,7 @@
   * {
     box-shadow: none !important;
   }
+  
   img {
     max-width: 100%;
     height: auto;
@@ -24,20 +25,44 @@
         // width: 80vw;
     
       .print-header {
-        position: absolute;
-        top: 1cm;
-        right: 1cm;
-        display: flex;
+        // position: absolute;
+        // top: 1cm;
+        // right: 1cm;
+        // display: flex;
+        // align-items: center;
+        // gap: 0.5rem;
+        position: relative !important;
+        top: auto !important;
+        right: auto !important;
+    
+        display: flex !important;
+        justify-content: space-between;
         align-items: center;
-        gap: 0.5rem;
+    
+        width: 100%;
+        margin-bottom: 1.5rem;
+        padding-bottom: 1rem;
+        border-bottom: 1px solid #ccc;
+    
+        break-after: avoid;
+        page-break-after: avoid;
       }
     
+      // .print-header img {
+      //   width: 2cm;
+      //   height: auto;
+      // }
+      .print-header__left,
+      .print-header__right {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+      }
       .print-header img {
-        width: 2cm;
-        height: auto;
+        max-height: 55px;
+        width: auto;
       }
-    
-      .print-header__text {
+          .print-header__text {
         text-transform: uppercase;
         font-family: "Source Code Pro";
       
@@ -45,7 +70,7 @@
         font-size: 0.8rem;
         font-weight: 500;
         text-transform: uppercase;
-        text-align: end;
+        text-align: right;
       }
       
       .view-header, 
@@ -263,7 +288,8 @@
           }
         }
       
-        @media print {
+
+          
           .path-projets-complets {
             .layout-content {
               width: 100% !important;
@@ -294,12 +320,10 @@
                 display: block;
               
               }
-              blockquote{
-                
-              }
+
             }
           }
-        }
+        
     
         }
         .projet-body-print{

web/themes/custom/eql/templates/layout/page.html.twig

@@ -36,8 +36,8 @@
 
     
 
-      <header role="banner" class="no-print">
-        <section id="header-top">
+      <header role="banner" >
+        <section id="header-top" class="print-header-first-page">
           {{ page.header_top_left }}
           {{ page.header_top_rigth }}
         </section>

web/themes/custom/eql/templates/node--view--projets.html.twig

@@ -94,17 +94,25 @@
 
   <div class="projet-content"{{ content_attributes }}>
     {# {{ content }} #}
-    {# <div class="print-header">
-      <div class="print-header__text">
-        ENGAGÉS POUR LA QUALITÉ<br>
-        DU LOGEMENT DE DEMAIN
-      </div>
-      <img src="{{ directory }}/images/sceau_excellence_def.png" alt="">
-</div> #}
+    
 
 {# <div class="projet-content"> #}
 
+
     <div class="projet-header-print">
+      <div class="print-header">
+        <div class="print-header__left">
+          <img src="{{ directory }}/images/gouv.png" alt="">
+          <img src="{{ directory }}/images/EPAU_noir.png" alt="">
+        </div>
+        <div class="print-header__right">
+          <div class="print-header__text">
+            ENGAGÉS POUR LA QUALITÉ<br>
+            DU LOGEMENT DE DEMAIN
+          </div>
+          <img src="{{ directory }}/images/sceau_excellence_def.png" alt="">
+        </div> 
+      </div>
       {{ content.field_photo }}
       {{ content.title }}
       {{ content.field_equipe }}