css print

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

@@ -293,6 +293,9 @@ svg.ext {
   img {
     max-width: 100%;
   }
+  ul {
+    list-style-type: none;
+  }
   input,
   textarea,
   select {
@@ -401,6 +404,10 @@ svg.ext {
   .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,
   a:link,
@@ -438,7 +445,7 @@ svg.ext {
   }
   .page-node-type-projet .layout__region--top .top_top .slick-dots,
   .page-node-type-projet .layout__region--top .top_top .slick-arrow {
-    display: none;
+    display: none !important;
   }
   .page-node-type-projet .layout__region--top .top_top .top_right {
     width: 100% !important;
@@ -450,40 +457,43 @@ svg.ext {
     display: none;
   }
   .page-node-type-projet .layout__region--second {
-    flex: 0 1 100% !important;
+    flex: 0 0 100% !important;
-  }
+    margin-left: 10%;
-  /* --- Couverture : header-top en page 1 --- */
+    margin-right: 10%;
-  .layout-container header {
-    position: static !important;
     width: 100% !important;
-    box-shadow: none !important;
   }
-  #header-top {
+  /* 1) Le header du site ne s’imprime jamais */
+  .layout-container header[role=banner] {
+    display: none !important;
+  }
+  /* 2) Couverture (print only) */
+  .cover.print-only {
     display: flex !important;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    height: 100vh;
+    min-height: 100vh;
     padding: 2cm 1.5cm;
     text-align: center;
     page-break-after: always;
-    background: #ffffff !important;
+    break-after: page;
-    color: #000000 !important;
+    background: #fff !important;
+    color: #000 !important;
   }
-  /* On cache le menu du bas du header (la barre de navigation horizontale) */
+  /* Reprend tes règles “logo + titre” mais sur la cover */
-  .region-header-bottom {
+  .cover.print-only .region-header-top-left img {
-    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 {
+  .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;
+  }
 }
 /* 2) MODE DEBUG : voir la version print en écran via body.debug-print */
 @media screen {
@@ -498,6 +508,9 @@ svg.ext {
   body.debug-print img {
     max-width: 100%;
   }
+  body.debug-print ul {
+    list-style-type: none;
+  }
   body.debug-print input,
   body.debug-print textarea,
   body.debug-print select {
@@ -620,6 +633,12 @@ svg.ext {
   body.debug-print .field--name-field-titre {
     page-break-after: avoid;
   }
+  body.debug-print {
+    /* Pas de saut de page après ces éléments */
+  }
+  body.debug-print h1 {
+    page-break-before: right;
+  }
   body.debug-print {
     /* Styles des liens */
   }
@@ -665,7 +684,7 @@ svg.ext {
   }
   body.debug-print .page-node-type-projet .layout__region--top .top_top .slick-dots,
   body.debug-print .page-node-type-projet .layout__region--top .top_top .slick-arrow {
-    display: none;
+    display: none !important;
   }
   body.debug-print .page-node-type-projet .layout__region--top .top_top .top_right {
     width: 100% !important;
@@ -677,7 +696,24 @@ svg.ext {
     display: none;
   }
   body.debug-print .page-node-type-projet .layout__region--second {
-    flex: 0 1 100% !important;
+    flex: 0 0 100% !important;
+    margin-left: 10%;
+    margin-right: 10%;
+    width: 100% !important;
+  }
+  .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;
+  }
+  /* cacher les éléments print-only à l'écran */
+  .print-only {
+    display: none;
   }
 }
 /*pages*/

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 --- */
+  /* 2) Couverture (print only) */
-    .layout-container header {
+  .cover.print-only {
-      position: static !important;   // ne plus être fixed en print
+    display: flex !important;
-      width: 100% !important;
+    flex-direction: column;
-      box-shadow: none !important;
+    justify-content: center;
-    }
+    align-items: center;
 
-    #header-top {
+    min-height: 100vh;
-      display: flex !important;
+    padding: 2cm 1.5cm;
-      flex-direction: column;
+    text-align: center;
-      justify-content: center;
-      align-items: center;
 
-      height: 100vh;             // occupe la hauteur de la "page"
+    page-break-after: always;
-      padding: 2cm 1.5cm;        // marges internes
+    break-after: page;
-      text-align: center;
-      page-break-after: always;  // 👉 le contenu commence sur la page suivante
 
-      background: #ffffff !important;
+    background: #fff !important;
-      color: #000000 !important;
+    color: #000 !important;
-    }
+  }
 
-    /* On cache le menu du bas du header (la barre de navigation horizontale) */
+   /* Reprend tes règles “logo + titre” mais sur la cover */
-    .region-header-bottom {
+   .cover.print-only .region-header-top-left img {
-      display: none !important;
+    max-height: 3cm;
-    }
+    height: auto;
+    width: auto;
+  }
 
-    /* Si tu as un logo + titre dans #header-top, tu peux les grossir un peu : */
+  .cover.print-only .region-header-top-rigth #block-eql-identitedusite {
-    #header-top .region-header-top-left img {
+    font-size: 1.4rem;
-      max-height: 3cm;
+    text-transform: uppercase;
-      height: auto;
+  }
-      width: auto;
-    }
 
-    #header-top .region-header-top-rigth #block-eql-identitedusite {
+  /* Optionnel : pas d’URL affichée sur la cover */
-      font-size: 1.4rem;
+  .cover.print-only a[href^="http"]:after {
-      text-transform: uppercase;
+    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; }
 }

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

@@ -32,7 +32,7 @@
 #}
 
 
-  <div class="layout-container">
+  <div class="layout-container print-page">
 
     
 
@@ -44,7 +44,7 @@
         {{ page.header_bottom }}
       </header>
 
-      <div class="print_only cover no-print-after">{# div pour couverture print only #}
+      <div class="print-only cover print no-print-after">{# div pour couverture print only #}
           {{ page.header_top_left }}
           {{ page.header_top_rigth }}
       </div>
@@ -80,7 +80,7 @@
           {{ page.footer_bottom_right }}
         </section>
       </footer>
-      <div class="print_only back-cover no-print-after">{# div pour 4eme de couverture print only #}
+      <div class="print print-only back-cover no-print-after">{# div pour 4eme de couverture print only #}
         {{ page.footer_bottom_left }}
         {{ page.footer_bottom_middle }}
       </div>