css print

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

@@ -29,13 +29,13 @@ eval("{jQuery(function ($) {\n  console.log('salut');\n\n  // MENU BURGER\n  con
 
 /***/ }),
 
-/***/ "./scripts/print.js":
-/*!**************************!*\
-  !*** ./scripts/print.js ***!
-  \**************************/
+/***/ "./scripts/paged-print.js":
+/*!********************************!*\
+  !*** ./scripts/paged-print.js ***!
+  \********************************/
 /***/ (function() {
 
-eval("{jQuery(function ($) {\n    console.log('salut print');\n});\n\n//# sourceURL=webpack://dev.eql.fr/./scripts/print.js?\n}");
+eval("{(function (Drupal, once) {\n    Drupal.behaviors.pagedPrint = {\n      attach(context) {\n        once('pagedPrint', 'body', context).forEach(() => {\n          const params = new URLSearchParams(window.location.search);\n          if (params.get('print') === '1' && window.PagedPolyfill) {\n            window.PagedPolyfill.preview();\n          }\n        });\n      }\n    };\n  })(Drupal, once);\n\n//# sourceURL=webpack://dev.eql.fr/./scripts/paged-print.js?\n}");
 
 /***/ }),
 
@@ -74,7 +74,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-ext
 /******/ 	// This entry module can't be inlined because the eval devtool is used.
 /******/ 	__webpack_modules__["./scripts/main.js"](0, {}, __webpack_require__);
 /******/ 	__webpack_modules__["./scripts/extlink.js"](0, {}, __webpack_require__);
-/******/ 	__webpack_modules__["./scripts/print.js"](0, {}, __webpack_require__);
+/******/ 	__webpack_modules__["./scripts/paged-print.js"](0, {}, __webpack_require__);
 /******/ 	var __webpack_exports__ = {};
 /******/ 	__webpack_modules__["./scss/styles.scss"](0, __webpack_exports__, __webpack_require__);
 /******/ 	

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

@@ -264,456 +264,118 @@ svg.ext {
     margin: auto;
   }
 }
-/* -----------------------/*
- * Feuille de style Print "Bretzel" adaptée
- * Made par Alsacréations + tweaks EQL
- /* ---------------------- */
-/*
- * Ressources et documentations :
- * 1- https://www.docuseal.co/blog/css-print-page-style
- * 2- https://www.alsacreations.com/astuce/lire/1160-Une-feuille-de-styles-de-base-pour-le-media-print.html
-*/
-/* Colors used for EQL */
-/* 1) VRAIE feuille d'impression */
-@media print {
-  /* Dimension et marges de page */
-  @page {
-    size: A4 portrait;
-    margin: 1.5cm 1.5cm;
-    @bottom-center {
-      content: "Page " counter(page) " / " counter(pages);
-    }
-  }
-  /* Reset général */
-  * {
-    all: unset;
-    display: revert;
-    box-sizing: border-box;
-  }
-  img {
-    max-width: 100%;
-  }
-  ul {
-    list-style-type: none;
-  }
-  input,
-  textarea,
-  select {
-    all: revert;
-  }
-  /* Styles globaux (12pt = 16px) */
-  body,
-  p,
-  span {
-    width: auto;
-    margin: 0;
-    font-family: "Marianne", serif !important;
-    font-size: 12pt;
-    line-height: 1.5;
-    color: #000000 !important;
-    background-color: #ffffff !important;
-  }
-  .back-cover {
-    break-before: page;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-  .back-cover .region h2 {
-    margin-top: 0;
-    color: rgb(9, 57, 139);
-    font-size: 1.2rem;
-  }
-  .back-cover .view-id-partenaires .view-content img {
-    width: 5rem;
-    height: auto;
+/* -------------------------
+   Paged.js : format + compteur
+-------------------------- */
+@page {
+  size: A4 portrait;
+  margin: 1.5cm;
+  @bottom-center {
+    content: "Page " counter(page) " / " counter(pages);
+    font-size: 9pt;
   }
-  .back-cover .view-id-partenaires .view-content a[href^=http]:after {
-    display: none;
-  }
-  .back-cover .view-id-partenaires .views-row-wrapper {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
-  /* Espacements typographiques (15pt = 20px) */
-  p,
-  blockquote,
-  label,
-  ul,
-  ol {
-    margin-block: 0 15pt;
-  }
-  p:last-child {
-    margin-bottom: 0;
-  }
-  /* Titrages */
-  h1 {
-    margin-block: 0 24pt;
-    font-weight: 700;
-    font-size: 18pt;
-    line-height: 1.1;
-  }
-  h2 {
-    margin-block: 0 18pt;
-    font-weight: 700;
-    font-size: 16pt;
-    line-height: 1.1;
-  }
-  h3 {
-    margin-block: 0 15pt;
-    font-weight: 700;
-    font-size: 14pt;
-  }
-  h4 {
-    margin-block: 0 12pt;
-    font-weight: 700;
-    font-size: 12pt;
-  }
-  /* Classes dédiées print / no-print */
-  .print {
-    display: revert;
-  }
-  .no-print {
-    display: none;
-  }
-  /* Veuves / orphelines */
-  p,
-  blockquote {
-    orphans: 3;
-    widows: 3;
-  }
-  /* Pas de saut de page au sein de ces éléments */
-  blockquote,
-  ul,
-  ol,
-  figure,
-  table,
-  .paragraph,
-  footer,
-  .top_top,
-  .top_bottom {
-    page-break-inside: avoid;
-  }
-  /* Pas de saut de page après ces éléments */
-  h1,
-  h2,
-  h3,
-  h4,
-  caption,
-  .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,
-  a:visited {
-    background: transparent !important;
-    color: unset;
-    font-weight: 700;
-    text-decoration: underline !important;
-  }
-  /* Afficher l'URL des liens externes */
-  a[href^=http]:after,
-  a[href^=https]:after {
-    content: " (" attr(href) ")";
-  }
-  /* Masquer vidéos, header, nav… */
-  video,
-  object,
-  iframe,
-  nav {
-    display: none !important;
-    width: 0 !important;
-    height: 0 !important;
-    overflow: hidden !important;
-  }
-  /*  Style page projet */
-  .page-node-type-projet .layout__region--top {
-    width: 100% !important;
-    padding-top: 0rem !important;
-  }
-  .page-node-type-projet .layout__region--top .top_top {
-    flex-direction: column !important;
+}
+/* Pas de numéro sur cover / back-cover */
+.cover {
+  page: cover;
+}
+
+.back-cover {
+  page: backcover;
+}
+
+@page cover {
+  @bottom-center {
+    content: none;
   }
-  .page-node-type-projet .layout__region--top .top_top .block-entity-fieldnodefield-photo {
-    width: 100% !important;
+}
+@page backcover {
+  @bottom-center {
+    content: none;
   }
-  .page-node-type-projet .layout__region--top .top_top .slick-dots,
-  .page-node-type-projet .layout__region--top .top_top .slick-arrow {
+}
+/* -------------------------
+   PRINT (Ctrl+P)
+-------------------------- */
+@media print {
+  /* Cache l’UI du site */
+  header[role=banner],
+  footer[role=contentinfo],
+  nav,
+  .slick-arrow,
+  .slick-dots,
+  .layout__region--first {
     display: none !important;
   }
-  .page-node-type-projet .layout__region--top .top_top .top_right {
-    width: 100% !important;
+  .layout__region--top {
+    flex: 0 1 100% !important;
   }
-  .page-node-type-projet .layout__region--top .top_bottom {
+  .layout__region--top .block-entity-fieldnodefield-photo,
+  .layout__region--top .top_right {
     width: 100% !important;
   }
-  .page-node-type-projet .layout__region--first {
-    display: none;
-  }
-  .page-node-type-projet .layout__region--second {
-    flex: 0 0 100% !important;
-    margin-left: 10%;
-    margin-right: 10%;
-    width: 100% !important;
+  .top_top {
+    flex-direction: column !important;
   }
-  /* 1) Le header du site ne s’imprime jamais */
-  .layout-container header[role=banner] {
-    display: none !important;
+  .layout__region--second {
+    flex: 0 1 100% !important;
+    margin: auto;
+    margin-left: 3rem;
   }
-  /* 2) Couverture (print only) */
+  /* Cover */
   .cover.print-only {
     display: flex !important;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
     min-height: 100vh;
-    padding: 2cm 1.5cm;
+    align-items: center;
+    justify-content: center;
     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;
-  }
-}
-/* 2) MODE DEBUG : voir la version print en écran via body.debug-print */
-@media screen {
-  body.debug-print {
-    /* Reset général */
-  }
-  body.debug-print * {
-    all: unset;
-    display: revert;
-    box-sizing: border-box;
-  }
-  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 {
-    all: revert;
-  }
-  body.debug-print {
-    /* Styles globaux (12pt = 16px) */
-  }
-  body.debug-print body,
-  body.debug-print p,
-  body.debug-print span {
-    width: auto;
-    margin: 0;
-    font-family: "Marianne", serif !important;
-    font-size: 12pt;
-    line-height: 1.5;
-    color: #000000 !important;
-    background-color: #ffffff !important;
-  }
-  body.debug-print .back-cover {
+  /* Back cover */
+  .back-cover.print-only {
     break-before: page;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-  body.debug-print .back-cover .region h2 {
-    margin-top: 0;
-    color: rgb(9, 57, 139);
-    font-size: 1.2rem;
-  }
-  body.debug-print .back-cover .view-id-partenaires .view-content img {
-    width: 5rem;
-    height: auto;
   }
-  body.debug-print .back-cover .view-id-partenaires .view-content a[href^=http]:after {
-    display: none;
-  }
-  body.debug-print .back-cover .view-id-partenaires .views-row-wrapper {
+  .back-cover.print-only .views-row-wrapper {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
   }
-  body.debug-print {
-    /* Espacements typographiques (15pt = 20px) */
-  }
-  body.debug-print p,
-  body.debug-print blockquote,
-  body.debug-print label,
-  body.debug-print ul,
-  body.debug-print ol {
-    margin-block: 0 15pt;
-  }
-  body.debug-print p:last-child {
-    margin-bottom: 0;
-  }
-  body.debug-print {
-    /* Titrages */
-  }
-  body.debug-print h1 {
-    margin-block: 0 24pt;
-    font-weight: 700;
-    font-size: 18pt;
-    line-height: 1.1;
-  }
-  body.debug-print h2 {
-    margin-block: 0 18pt;
-    font-weight: 700;
-    font-size: 16pt;
-    line-height: 1.1;
-  }
-  body.debug-print h3 {
-    margin-block: 0 15pt;
-    font-weight: 700;
-    font-size: 14pt;
+  /* Optionnel : éviter l’URL après liens sur la cover */
+  .cover.print-only a[href^=http]::after,
+  .cover.print-only a[href^=https]::after {
+    content: "" !important;
   }
-  body.debug-print h4 {
-    margin-block: 0 12pt;
-    font-weight: 700;
-    font-size: 12pt;
-  }
-  body.debug-print {
-    /* Classes dédiées print / no-print */
-  }
-  body.debug-print .print {
-    display: revert;
-  }
-  body.debug-print .no-print {
-    display: none;
-  }
-  body.debug-print {
-    /* Veuves / orphelines */
-  }
-  body.debug-print p,
-  body.debug-print blockquote {
-    orphans: 3;
-    widows: 3;
-  }
-  body.debug-print {
-    /* Pas de saut de page au sein de ces éléments */
-  }
-  body.debug-print blockquote,
-  body.debug-print ul,
-  body.debug-print ol,
-  body.debug-print figure,
-  body.debug-print table,
-  body.debug-print .paragraph,
-  body.debug-print footer,
-  body.debug-print .top_top,
-  body.debug-print .top_bottom {
-    page-break-inside: avoid;
-  }
-  body.debug-print {
-    /* Pas de saut de page après ces éléments */
-  }
-  body.debug-print h1,
-  body.debug-print h2,
-  body.debug-print h3,
-  body.debug-print h4,
-  body.debug-print caption,
-  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 */
-  }
-  body.debug-print a,
-  body.debug-print a:link,
-  body.debug-print a:visited {
-    background: transparent !important;
-    color: unset;
-    font-weight: 700;
-    text-decoration: underline !important;
-  }
-  body.debug-print {
-    /* Afficher l'URL des liens externes */
-  }
-  body.debug-print a[href^=http]:after,
-  body.debug-print a[href^=https]:after {
-    content: " (" attr(href) ")";
-  }
-  body.debug-print {
-    /* Masquer vidéos, header, nav… */
-  }
-  body.debug-print video,
-  body.debug-print object,
-  body.debug-print iframe,
-  body.debug-print nav {
-    display: none !important;
-    width: 0 !important;
-    height: 0 !important;
-    overflow: hidden !important;
-  }
-  body.debug-print {
-    /*  Style page projet */
-  }
-  body.debug-print .page-node-type-projet .layout__region--top {
-    width: 100% !important;
-    padding-top: 0rem !important;
-  }
-  body.debug-print .page-node-type-projet .layout__region--top .top_top {
-    flex-direction: column !important;
-  }
-  body.debug-print .page-node-type-projet .layout__region--top .top_top .block-entity-fieldnodefield-photo {
-    width: 100% !important;
-  }
-  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 {
+}
+/* -------------------------
+   SCREEN preview (Paged.js)
+-------------------------- */
+@media screen {
+  /* En écran normal : cacher print-only */
+  body:not(.use-paged) .print-only {
     display: none !important;
   }
-  body.debug-print .page-node-type-projet .layout__region--top .top_top .top_right {
-    width: 100% !important;
-  }
-  body.debug-print .page-node-type-projet .layout__region--top .top_bottom {
-    width: 100% !important;
+  /* Fond et affichage pages */
+  body.use-paged {
+    background: #ddd;
   }
-  body.debug-print .page-node-type-projet .layout__region--first {
-    display: none;
-  }
-  body.debug-print .page-node-type-projet .layout__region--second {
-    flex: 0 0 100% !important;
-    margin-left: 10%;
-    margin-right: 10%;
-    width: 100% !important;
+  body.use-paged .pagedjs_pages {
+    width: 100%;
+    padding: 2rem 0;
   }
-  .cover.print-only {
-    display: none;
+  body.use-paged .pagedjs_page {
+    margin: 1rem auto;
+    background: #fff;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
   }
-  body.debug-print .print-page {
+  body.use-paged .pagedjs_pagebox {
     width: 210mm;
-    height: 297mm;
-    margin: 2rem auto;
+    min-height: 297mm;
+    margin: 0 auto;
     background: #fff;
-    box-shadow: 0 0 0 1px red;
   }
-  /* cacher les éléments print-only à l'écran */
-  .print-only {
-    display: none;
+  /* Paged.js met le contenu dans .pagedjs_page_content : on évite les surprises */
+  body.use-paged .pagedjs_page_content {
+    display: block;
   }
 }
 /*pages*/

web/themes/custom/eql/eql.libraries.yml

@@ -13,9 +13,15 @@ global-js:
     # librairies/slick-1.8.1/slick/slick.js: {}
     librairies/slick-1.8.1/slick/slick.min.js: {}
 
-
-
-
  
   dependencies:
     - core/jquery
+
+
+# paged_print:
+#   js:
+#     vendor/pagedjs/paged.polyfill.js: {}
+#     js/paged-print.js: {}
+#   dependencies:
+#     - core/drupal
+#     - core/once

web/themes/custom/eql/eql.theme

@@ -15,6 +15,12 @@ use Drupal\node\NodeInterface;
 
 
 function eql_preprocess_html(&$variables) {
+  $request = \Drupal::request();
+  if ($request->query->get('print') === '1') {
+    $variables['#attached']['library'][] = 'eql/paged_print';
+    $variables['attributes']['class'][] = 'use-paged';
+  }
+
   $node = \Drupal::routeMatch()->getParameter('node');
 
   if ($node instanceof \Drupal\node\NodeInterface) {

web/themes/custom/eql/scripts/paged-print.js

@@ -0,0 +1,12 @@
+(function (Drupal, once) {
+    Drupal.behaviors.pagedPrint = {
+      attach(context) {
+        once('pagedPrint', 'body', context).forEach(() => {
+          const params = new URLSearchParams(window.location.search);
+          if (params.get('print') === '1' && window.PagedPolyfill) {
+            window.PagedPolyfill.preview();
+          }
+        });
+      }
+    };
+  })(Drupal, once);

web/themes/custom/eql/scripts/print.js

@@ -1,3 +0,0 @@
-jQuery(function ($) {
-    console.log('salut print');
-});

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

@@ -1,310 +1,110 @@
-/* -----------------------/*
- * Feuille de style Print "Bretzel" adaptée
- * Made par Alsacréations + tweaks EQL
- /* ---------------------- */
+/* -------------------------
+   Paged.js : format + compteur
+-------------------------- */
+@page {
+  size: A4 portrait;
+  margin: 1.5cm;
 
-/*
- * Ressources et documentations :
- * 1- https://www.docuseal.co/blog/css-print-page-style
- * 2- https://www.alsacreations.com/astuce/lire/1160-Une-feuille-de-styles-de-base-pour-le-media-print.html
-*/
-
-@import "variables/_colors";
-@import "variables/_typography";
-
-// Mixin commun pour les styles d'impression
-@mixin print-base() {
-
-  /* Reset général */
-  * {
-    all: unset;
-    display: revert;
-    box-sizing: border-box;
-  }
-
-  img {
-    max-width: 100%;
-  }
-  ul{
-    list-style-type: none;
-  }
-  input,
-  textarea,
-  select {
-    all: revert;
-  }
-
-  /* Styles globaux (12pt = 16px) */
-  body,
-  p,
-  span {
-    width: auto;
-    margin: 0;
-    font-family: "Marianne", serif !important;
-    font-size: 12pt;
-    line-height: 1.5;
-    color: #000000 !important;
-    background-color: #ffffff !important;
-  }
-
-  .back-cover {
-    break-before: page;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    .region {
-      h2 {
-        margin-top: 0;
-        color: $blue-dark;
-        font-size: 1.2rem;
-      }
-    }
-
-    .view-id-partenaires {
-      .view-content {
-        img {
-          width: 5rem;
-          height: auto;
-        }
-
-        a[href^="http"]:after {
-          display: none;
-        }
-      }
-
-      .views-row-wrapper {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-      }
-    }
-  }
-
-  /* Espacements typographiques (15pt = 20px) */
-  p,
-  blockquote,
-  label,
-  ul,
-  ol {
-    margin-block: 0 15pt;
+  @bottom-center {
+    content: "Page " counter(page) " / " counter(pages);
+    font-size: 9pt;
   }
+}
 
-  p:last-child {
-    margin-bottom: 0;
-  }
-
-  /* Titrages */
-  h1 {
-    margin-block: 0 24pt;
-    font-weight: 700;
-    font-size: 18pt;
-    line-height: 1.1;
-  }
-
-  h2 {
-    margin-block: 0 18pt;
-    font-weight: 700;
-    font-size: 16pt;
-    line-height: 1.1;
-  }
-
-  h3 {
-    margin-block: 0 15pt;
-    font-weight: 700;
-    font-size: 14pt;
-  }
-
-  h4 {
-    margin-block: 0 12pt;
-    font-weight: 700;
-    font-size: 12pt;
-  }
-
-  /* Classes dédiées print / no-print */
-  .print {
-    display: revert;
-  }
-
-  .no-print {
-    display: none;
-  }
-
-  /* Veuves / orphelines */
-  p,
-  blockquote {
-    orphans: 3;
-    widows: 3;
-  }
-
-  /* Pas de saut de page au sein de ces éléments */
-  blockquote,
-  ul,
-  ol,
-  figure,
-  table,
-  .paragraph,
-  footer,
-  .top_top,
-  .top_bottom {
-    page-break-inside: avoid;
-  }
-
-  /* Pas de saut de page après ces éléments */
-  h1,
-  h2,
-  h3,
-  h4,
-  caption,
-  .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,
-  a:visited {
-    background: transparent !important;
-    color: unset;
-    font-weight: 700;
-    text-decoration: underline !important;
-  }
+/* Pas de numéro sur cover / back-cover */
+.cover { page: cover; }
+.back-cover { page: backcover; }
 
-  /* Afficher l'URL des liens externes */
-  a[href^="http"]:after,
-  a[href^="https"]:after {
-    content: " (" attr(href) ")";
-  }
+@page cover { @bottom-center { content: none; } }
+@page backcover { @bottom-center { content: none; } }
 
-  /* Masquer vidéos, header, nav… */
-  video,
-  object,
-  iframe,
-  nav {
+/* -------------------------
+   PRINT (Ctrl+P)
+-------------------------- */
+@media print {
+  /* Cache l’UI du site */
+  header[role="banner"],
+  footer[role="contentinfo"],
+  nav, 
+  .slick-arrow, 
+  .slick-dots,
+  .layout__region--first{
     display: none !important;
-    width: 0 !important;
-    height: 0 !important;
-    overflow: hidden !important;
   }
-
-  /*  Style page projet */
-  .page-node-type-projet {
-    .layout__region--top {
-      width: 100% !important;
-      padding-top: 0rem !important;
-
-      .top_top {
-        flex-direction: column !important;
-
-        .block-entity-fieldnodefield-photo {
-          width: 100% !important;
-        }
-        img{
-
-        }
-        .slick-dots,
-        .slick-arrow {
-          display: none !important;
-        }
-
-        .top_right {
-          width: 100% !important;
-        }
-      }
-
-      .top_bottom {
-        width: 100% !important;
-      }
-    }
-
-    .layout__region--first {
-      display: none;
-    }
-
-    .layout__region--second {
-      flex: 0 0 100% !important;
-      margin-left: 10%;
-      margin-right: 10%;
+  .layout__region--top{
+    flex: 0 1 100% !important;
+    .block-entity-fieldnodefield-photo, 
+    .top_right{
       width: 100% !important;
     }
   }
-}
-
-/* 1) VRAIE feuille d'impression */
-@media print {
-  /* Dimension et marges de page */
-  @page {
-    size: A4 portrait;
-    margin: 1.5cm 1.5cm;
-    @bottom-center {
-      content: "Page " counter(page) " / " counter(pages);
-    }
-  
-  }
-
-  @include print-base();
-
-  /* 1) Le header du site ne s’imprime jamais */
-  .layout-container header[role="banner"] {
-    display: none !important;
+  .top_top{
+    flex-direction: column !important;
   }
+.layout__region--second{
+  flex: 0 1 100% !important;
+  margin: auto;
+  margin-left: 3rem;
+}
 
-  /* 2) Couverture (print only) */
+  /* Cover */
   .cover.print-only {
     display: flex !important;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
     min-height: 100vh;
-    padding: 2cm 1.5cm;
+    align-items: center;
+    justify-content: center;
     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;
+  /* Back cover */
+  .back-cover.print-only {
+    break-before: page;
+    .views-row-wrapper{
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
   }
 
-  .cover.print-only .region-header-top-rigth #block-eql-identitedusite {
-    font-size: 1.4rem;
-    text-transform: uppercase;
+  /* Optionnel : éviter l’URL après liens sur la cover */
+  .cover.print-only a[href^="http"]::after,
+  .cover.print-only a[href^="https"]::after {
+    content: "" !important;
   }
 
-  /* 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 */
+/* -------------------------
+   SCREEN preview (Paged.js)
+-------------------------- */
 @media screen {
-  body.debug-print {
-    @include print-base();
+  /* En écran normal : cacher print-only */
+  body:not(.use-paged) .print-only { display: none !important; }
+
+  /* Fond et affichage pages */
+  body.use-paged { background: #ddd; }
+
+  body.use-paged .pagedjs_pages {
+    width: 100%;
+    padding: 2rem 0;
   }
-  .cover.print-only {
-    display: none;
+
+  body.use-paged .pagedjs_page {
+    margin: 1rem auto;
+    background: #fff;
+    box-shadow: 0 0 0 1px rgba(0,0,0,.35);
   }
-  body.debug-print .print-page {
+
+  body.use-paged .pagedjs_pagebox {
     width: 210mm;
-    height: 297mm;
-    margin: 2rem auto;
+    min-height: 297mm;
+    margin: 0 auto;
     background: #fff;
-    box-shadow: 0 0 0 1px red; // limite page
   }
-   /* cacher les éléments print-only à l'écran */
-   .print-only { display: none; }
+  /* Paged.js met le contenu dans .pagedjs_page_content : on évite les surprises */
+  body.use-paged .pagedjs_page_content {
+    display: block;
+  }
 }

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

@@ -37,7 +37,7 @@
     <head-placeholder token="{{ placeholder_token }}">
     <title>{{ head_title|safe_join(' | ') }}</title>
     <css-placeholder token="{{ placeholder_token }}">
-
+    {#<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>#}
 
   <js-placeholder token="{{ placeholder_token }}">
   </head>

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

@@ -44,10 +44,10 @@
         {{ page.header_bottom }}
       </header>
 
-      <div class="print-only cover print no-print-after">{# div pour couverture print only #}
+      {# <div class="print-only cover print no-print-after"> 
           {{ page.header_top_left }}
           {{ page.header_top_rigth }}
-      </div>
+      </div> #}
 
       {{ page.help }}
 

web/themes/custom/eql/webpack.config.js

@@ -108,7 +108,7 @@ let config = {
     entry: [
         "./scripts/main.js",
         "./scripts/extlink.js",
-        "./scripts/print.js",
+        "./scripts/paged-print.js",
         "./scss/styles.scss",
     ],