css print

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

@@ -25,7 +25,9 @@
   img {
     max-width: 100%;
   }
-
+  ul{
+    list-style-type: none;
+  }
   input,
   textarea,
   select {
@@ -157,6 +159,10 @@
   .field--name-field-titre {
     page-break-after: avoid;
   }
+    /* Pas de saut de page après ces éléments */
+    h1{
+      page-break-before: right;
+    }
 
   /* Styles des liens */
   a,
@@ -197,10 +203,12 @@
         .block-entity-fieldnodefield-photo {
           width: 100% !important;
         }
+        img{
 
+        }
         .slick-dots,
         .slick-arrow {
-          display: none;
+          display: none !important;
         }
 
         .top_right {
@@ -218,12 +226,12 @@
     }
 
     .layout__region--second {
-      flex: 0 1 100% !important;
+      flex: 0 0 100% !important;
+      margin-left: 10%;
+      margin-right: 10%;
+      width: 100% !important;
     }
   }
-
-
-
 }
 
 /* 1) VRAIE feuille d'impression */
@@ -240,45 +248,45 @@
 
   @include print-base();
 
+  /* 1) Le header du site ne s’imprime jamais */
+  .layout-container header[role="banner"] {
+    display: none !important;
+  }
 
-    /* --- Couverture : header-top en page 1 --- */
-    .layout-container header {
-      position: static !important;   // ne plus être fixed en print
-      width: 100% !important;
-      box-shadow: none !important;
-    }
-  
-    #header-top {
-      display: flex !important;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-  
-      height: 100vh;             // occupe la hauteur de la "page"
-      padding: 2cm 1.5cm;        // marges internes
-      text-align: center;
-      page-break-after: always;  // 👉 le contenu commence sur la page suivante
-  
-      background: #ffffff !important;
-      color: #000000 !important;
-    }
-  
-    /* On cache le menu du bas du header (la barre de navigation horizontale) */
-    .region-header-bottom {
-      display: none !important;
-    }
-  
-    /* Si tu as un logo + titre dans #header-top, tu peux les grossir un peu : */
-    #header-top .region-header-top-left img {
-      max-height: 3cm;
-      height: auto;
-      width: auto;
-    }
-  
-    #header-top .region-header-top-rigth #block-eql-identitedusite {
-      font-size: 1.4rem;
-      text-transform: uppercase;
-    }
+  /* 2) Couverture (print only) */
+  .cover.print-only {
+    display: flex !important;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    min-height: 100vh;
+    padding: 2cm 1.5cm;
+    text-align: center;
+
+    page-break-after: always;
+    break-after: page;
+
+    background: #fff !important;
+    color: #000 !important;
+  }
+
+   /* Reprend tes règles “logo + titre” mais sur la cover */
+   .cover.print-only .region-header-top-left img {
+    max-height: 3cm;
+    height: auto;
+    width: auto;
+  }
+
+  .cover.print-only .region-header-top-rigth #block-eql-identitedusite {
+    font-size: 1.4rem;
+    text-transform: uppercase;
+  }
+
+  /* Optionnel : pas d’URL affichée sur la cover */
+  .cover.print-only a[href^="http"]:after {
+    display: none;
+  }
 
 }
 
@@ -287,4 +295,16 @@
   body.debug-print {
     @include print-base();
   }
+  .cover.print-only {
+    display: none;
+  }
+  body.debug-print .print-page {
+    width: 210mm;
+    height: 297mm;
+    margin: 2rem auto;
+    background: #fff;
+    box-shadow: 0 0 0 1px red; // limite page
+  }
+   /* cacher les éléments print-only à l'écran */
+   .print-only { display: none; }
 }