print

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

@@ -99,6 +99,12 @@
   display: none;
 }
 
+@media screen {
+  .print_only {
+    display: none;
+  }
+}
+
 .layout-container {
   font-family: "Marianne", sans-serif;
   margin: none;
@@ -250,171 +256,6 @@ svg.ext {
     margin: auto;
   }
 }
-/* -----------------------/*
- * Reset CSS Print "Bretzel"
- * Made par Alsacréations
- /* ---------------------- */
-/*
- * 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
-*/
-@media print {
-  /* Dimension et marges de page */
-  @page {
-    size: A4 portrait;
-    margin: 1.5cm 1.5cm;
-  }
-  /* Reset général */
-  * {
-    all: unset;
-    display: revert;
-    box-sizing: border-box;
-  }
-  img {
-    max-width: 100%;
-  }
-  input,
-  textarea,
-  select {
-    all: revert;
-  }
-  /* On redéfinit les styles globaux (12pt = 16px) */
-  body {
-    width: auto;
-    margin: 0;
-    font-family: serif;
-    font-size: 12pt;
-    font-family: Georgia, serif;
-    line-height: 1.5;
-    color: #000000 !important;
-    background-color: #ffffff !important;
-  }
-  #fotter-bottom {
-    box-shadow: none !important;
-    border-top: rgba(0, 0, 0, 0.5);
-  }
-  #fotter-bottom a[href^=http]:after,
-  #fotter-bottom a[href^=https]:after {
-    content: "";
-  }
-  /* Espacements typographiques (15pt = 20px) */
-  p,
-  blockquote,
-  label,
-  ul,
-  ol {
-    margin-block: 0 15pt;
-  }
-  p:last-child {
-    margin-bottom: 0;
-  }
-  /* Titrages (24pt = 32px) */
-  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;
-  }
-  /* Pas de veuves ou orphelines (3 lignes minimum) */
-  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;
-  }
-  /* Styles des liens */
-  a,
-  a:link,
-  a:visited {
-    background: transparent !important;
-    color: unset;
-    font-weight: 700;
-    text-decoration: underline !important;
-  }
-  /* On affiche l'URL des liens externes */
-  a[href^=http]:after,
-  a[href^=https]:after {
-    content: " (" attr(href) ")";
-  }
-  /* On masque les vidéos, header et menu de navigation */
-  video,
-  object,
-  iframe,
-  header,
-  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;
-  }
-  .page-node-type-projet .layout__region--top .top_top .block-entity-fieldnodefield-photo {
-    width: 100% !important;
-  }
-  .page-node-type-projet .layout__region--top .top_top .top_right {
-    width: 100% !important;
-  }
-  .page-node-type-projet .layout__region--top .top_bottom {
-    width: 100% !important;
-  }
-  .page-node-type-projet .layout__region--first {
-    display: none;
-  }
-  .page-node-type-projet .layout__region--second {
-    flex: 0 1 100% !important;
-  }
-}
 /*pages*/
 /*
 @import "pages/partials/header_footer";

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

@@ -0,0 +1,202 @@
+/*!**********************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./scss/print.scss ***!
+  \**********************************************************************************************************/
+@charset "UTF-8";
+/* -----------------------/*
+ * Reset CSS Print "Bretzel"
+ * Made par Alsacréations
+ /* ---------------------- */
+/*
+ * 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
+*/
+@media print {
+  /* Dimension et marges de page */
+  @page {
+    size: A4 portrait;
+    margin: 1.5cm 1.5cm;
+    @bottom-center {
+      content: "Page " counter(page) " / " counter(pages);
+    }
+  }
+  @page :first {
+    @top-center {
+      content: "Titre du document";
+      font-size: 14pt;
+      font-weight: bold;
+    }
+  }
+  /* Reset général */
+  * {
+    all: unset;
+    display: revert;
+    box-sizing: border-box;
+  }
+  img {
+    max-width: 100%;
+  }
+  input,
+  textarea,
+  select {
+    all: revert;
+  }
+  /* On redéfinit les styles globaux (12pt = 16px) */
+  body {
+    width: auto;
+    margin: 0;
+    font-family: serif;
+    font-size: 12pt;
+    font-family: Georgia, serif;
+    line-height: 1.5;
+    color: #000000 !important;
+    background-color: #ffffff !important;
+  }
+  .back-cover {
+    break-before: page;
+    margin-top: 55rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .back-cover h2 {
+    margin-top: 1rem;
+    color: rgb(9, 57, 139);
+    font-size: 1.2rem;
+  }
+  .back-cover h2 ::before {
+    content: "";
+    border-top: 1px solid black;
+  }
+  .back-cover .view-id-partenaires .view-content img {
+    width: 5rem;
+    height: auto;
+  }
+  .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 (24pt = 32px) */
+  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;
+  }
+  /* Pas de veuves ou orphelines (3 lignes minimum) */
+  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;
+  }
+  /* Styles des liens */
+  a,
+  a:link,
+  a:visited {
+    background: transparent !important;
+    color: unset;
+    font-weight: 700;
+    text-decoration: underline !important;
+  }
+  /* On affiche l'URL des liens externes */
+  a[href^=http]:after,
+  a[href^=https]:after {
+    content: " (" attr(href) ")";
+  }
+  /* On masque les vidéos, header et menu de navigation */
+  video,
+  object,
+  iframe,
+  header,
+  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;
+  }
+  .page-node-type-projet .layout__region--top .top_top .block-entity-fieldnodefield-photo {
+    width: 100% !important;
+  }
+  .page-node-type-projet .layout__region--top .top_top .slick-dots, .page-node-type-projet .layout__region--top .top_top .slick-arrow {
+    display: none;
+  }
+  .page-node-type-projet .layout__region--top .top_top .top_right {
+    width: 100% !important;
+  }
+  .page-node-type-projet .layout__region--top .top_bottom {
+    width: 100% !important;
+  }
+  .page-node-type-projet .layout__region--first {
+    display: none;
+  }
+  .page-node-type-projet .layout__region--second {
+    flex: 0 1 100% !important;
+  }
+}

web/themes/custom/eql/eql.info.yml

@@ -9,6 +9,9 @@ base theme: false
 libraries:
   - eql/global-css
   - eql/global-js
+  - eql/print_only
+  # - eql/pagedjs
+
 
 
 regions:

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

@@ -12,10 +12,19 @@ global-js:
     dist/assets/bundle.js: {}
     # librairies/slick-1.8.1/slick/slick.js: {}
     librairies/slick-1.8.1/slick/slick.min.js: {}
+  dependencies:
+    - core/jquery
 
+# pagedjs:
+#   version: 1.x
+#   js:
+#     https://unpkg.com/pagedjs/dist/paged.js: {}
+#     dist/assets/js/paged-setup.js: {}
+#   dependencies:
+#     - core/jquery
 
 
-
- 
-  dependencies:
-    - core/jquery
+print_only:
+  css:
+    theme:
+      dist/assets/css/print.css: {}

web/themes/custom/eql/package.json

@@ -14,9 +14,12 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "css-loader": "^7.1.2",
+    "extract-loader": "^4.0.3",
     "file-loader": "^6.2.0",
+    "mini-css-extract-plugin": "^2.9.2",
     "node-sass": "*",
-    "sass": "^1.77.2",
+    "sass": "^1.89.2",
     "sass-loader": "^14.2.1",
     "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4"

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

@@ -0,0 +1,142 @@
+// window.runPagedIfPrinting = function () {
+//     console.log("📄 Impression via iframe");
+  
+//     // 1. Créer une iframe cachée
+//     const iframe = document.createElement("iframe");
+//     iframe.style.position = "fixed";
+//     iframe.style.left = "-100vw"; // hors de la vue
+//     iframe.style.top = "-100vh";
+//     iframe.style.width = "0";
+//     iframe.style.height = "0";
+//     iframe.style.visibility = "hidden";
+//     iframe.setAttribute("aria-hidden", "true");
+  
+//     document.body.appendChild(iframe);
+  
+//     // 2. Copier tout le document dans l’iframe
+//     const clonedHTML = document.documentElement.outerHTML;
+//     const doc = iframe.contentWindow.document;
+//     doc.open();
+//     doc.write(clonedHTML);
+//     doc.close();
+  
+//     // 3. Attendre que tout soit chargé
+//     iframe.onload = () => {
+//         console.log("📦 Iframe chargée, injection manuelle de Paged.js");
+      
+//         const pagedScript = iframe.contentDocument.createElement("script");
+//         pagedScript.src = "https://unpkg.com/pagedjs/dist/paged.js";
+//         pagedScript.onload = () => {
+//           console.log("📚 Paged.js chargé, génération des pages...");
+      
+//           const previewer = new iframe.contentWindow.Paged.Previewer();
+      
+//           previewer.preview().then(() => {
+//             console.log("🖨️ Aperçu prêt, impression dans iframe…");
+      
+//             setTimeout(() => {
+//                 const printScript = iframe.contentDocument.createElement("script");
+//                 printScript.textContent = `
+//                   window.addEventListener("load", () => {
+//                     setTimeout(() => {
+//                       window.print();
+//                       window.onafterprint = () => window.close(); // facultatif
+//                     }, 100);
+//                   });
+//                 `;
+//                 iframe.contentDocument.body.appendChild(printScript);
+//               }, 300);
+              
+//           });
+//         };
+      
+//         // Injecte le script dans <head> de l’iframe
+//         iframe.contentDocument.head.appendChild(pagedScript);
+//       };
+      
+//   };
+  
+//   // 📎 Listeners impression
+//   function setupPagedPrintListeners() {
+//     window.addEventListener("beforeprint", (e) => {
+//       e.preventDefault(); // empêcher la version native
+//     });
+  
+//     if (window.matchMedia) {
+//       window.matchMedia("print").addEventListener("change", (e) => {
+//         if (e.matches) {
+//           window.runPagedIfPrinting();
+//         }
+//       });
+//     }
+  
+//     console.log("✅ Paged.js listeners (iframe) installés.");
+//   }
+  
+//   if (document.readyState !== "loading") {
+//     setupPagedPrintListeners();
+//   } else {
+//     document.addEventListener("DOMContentLoaded", setupPagedPrintListeners);
+//   }
+  
+
+window.runPagedIfPrinting = function () {
+    console.log("📄 Impression détectée — Paged.js va s'exécuter");
+  
+    if (typeof Paged !== "undefined" && Paged.Previewer) {
+      // Sauvegarde du DOM actuel
+      const original = document.body.cloneNode(true);
+  
+      const previewer = new Paged.Previewer();
+  
+      previewer.preview().then(() => {
+        console.log("📃 Paged.js rendu terminé");
+  
+        const restoreDOM = () => {
+          console.log("🔄 Restauration du DOM après impression");
+          document.body.replaceWith(original);
+          window.removeEventListener("afterprint", restoreDOM);
+        };
+  
+        // ✅ Restauration après impression (ou annulation)
+        window.addEventListener("afterprint", restoreDOM);
+      });
+    } else {
+      console.warn("❌ Paged.js non chargé ou Previewer indisponible !");
+    }
+  };
+  
+  // Initialisation automatique
+  function setupPagedPrintListeners() {
+    // Classique
+    window.addEventListener("beforeprint", window.runPagedIfPrinting);
+  
+    // Pour certains navigateurs modernes
+    if (window.matchMedia) {
+      const mediaQueryList = window.matchMedia("print");
+      if (mediaQueryList.addEventListener) {
+        mediaQueryList.addEventListener("change", (e) => {
+          if (e.matches) {
+            window.runPagedIfPrinting();
+          }
+        });
+      } else {
+        // Safari fallback
+        mediaQueryList.addListener((e) => {
+          if (e.matches) {
+            window.runPagedIfPrinting();
+          }
+        });
+      }
+    }
+  
+    console.log("✅ Paged.js listeners installés.");
+  }
+  
+  // Démarrage au bon moment
+  if (document.readyState !== "loading") {
+    setupPagedPrintListeners();
+  } else {
+    document.addEventListener("DOMContentLoaded", setupPagedPrintListeners);
+  }
+  

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

@@ -4,6 +4,13 @@
         display: none;
     }
 }
+.print_only{
+    @media screen {
+        display: none;
+    }
+     
+}
+
 .layout-container {
     font-family: $font-family-default;
     margin: none;

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

@@ -10,13 +10,25 @@
  * 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
 */
-
+// @media screen{
 @media print {
     /* Dimension et marges de page */
     @page {
       size: A4 portrait;
       margin: 1.5cm 1.5cm;
-    }
+      // @bottom-center {
+      //   content: "Page " counter(page) " / " counter(pages);
+      // }      
+    }
+    // @page:first {
+    //   @top-center {
+    //     content: "Titre du document";
+    //     font-size: 14pt;
+    //     font-weight: bold;
+    //   }
+    // }
+
+   
   
     /* Reset général */
     * {
@@ -45,14 +57,45 @@
       color: #000000 !important;
       background-color: #ffffff !important;
     }
-    #fotter-bottom{
-        box-shadow: none !important;
-        border-top: rgba($color: #000000, $alpha: 0.5);
-        a[href^="http"]:after,
-        a[href^="https"]:after {
-          content: "";
+    // #fotter-bottom{
+    //     box-shadow: none !important;
+    //     border-top: rgba($color: #000000, $alpha: 0.5);
+    //     a[href^="http"]:after,
+    //     a[href^="https"]:after {
+    //       content: "";
+    //     }
+    // }
+    .back-cover{
+      break-before: page;
+      // margin-top: 55rem;
+      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,
@@ -166,6 +209,19 @@
                 .block-entity-fieldnodefield-photo{
                     width: 100% !important;
                 }
+                .slick-dots, .slick-arrow{
+                    display: none;
+                }
+                // .slick-list{
+                //     overflow: visible;
+                //     .slick-track{
+                //     display: flex;
+                //     flex-direction: row;
+                //     flex-wrap: wrap;
+                //     width: 100%;
+                //     }
+
+                // }
                 .top_right{
                     width: 100% !important;
                 }
@@ -182,5 +238,5 @@
         }
     }
 
-  }
+}
   

web/themes/custom/eql/scss/styles.scss

@@ -14,7 +14,6 @@
 // @import "global/_reset";
 @import "global/_typography";
 @import "global/_mediaqueries";
-@import "global/_print";
 // @import "global/_nodetyperessource.scss";
 
 

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

@@ -42,6 +42,7 @@
   <js-placeholder token="{{ placeholder_token }}">
   </head>
   <body{{ attributes.addClass(body_classes) }}>
+    
     {#
       Keyboard navigation/accessibility link to main content section in
       page.html.twig.

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

@@ -30,50 +30,59 @@
  * @see html.html.twig
  */
 #}
- 
-<div class="layout-container">
 
-  
 
-    <header role="banner">
-      <section id="header-top">
-        {{ page.header_top_left }}
-        {{ page.header_top_rigth }}
-      </section>
-      {{ page.header_bottom }}
-    </header>
+  <div class="layout-container">
 
-    {{ page.help }}
+    
 
-    <main role="main">
-      <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
+      <header role="banner" class="no-print">
+        <section id="header-top">
+          {{ page.header_top_left }}
+          {{ page.header_top_rigth }}
+        </section>
+        {{ page.header_bottom }}
+      </header>
 
-      <div class="layout-content">
-        {{ page.content }}
-      </div>{# /.layout-content #}
+      <div class="print_only cover no-print-after">{# div pour couverture print only #}
+          {{ page.header_top_left }}
+          {{ page.header_top_rigth }}
+      </div>
 
-      {% if page.sidebar_first %}
-        <aside class="layout-sidebar-first" role="complementary">
-          {{ page.sidebar_first }}
-        </aside>
-      {% endif %}
+      {{ page.help }}
 
-      {% if page.sidebar_second %}
-        <aside class="layout-sidebar-second" role="complementary">
-          {{ page.sidebar_second }}
-        </aside>
-      {% endif %}
+      <main role="main">
+        <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
 
-    </main>
+        <div class="layout-content">
+          {{ page.content }}
+        </div>{# /.layout-content #}
 
-    <footer role="contentinfo">
-      {{ page.footer_top }}
-      <section id="fotter-bottom">
+        {% if page.sidebar_first %}
+          <aside class="layout-sidebar-first" role="complementary">
+            {{ page.sidebar_first }}
+          </aside>
+        {% endif %}
+
+        {% if page.sidebar_second %}
+          <aside class="layout-sidebar-second" role="complementary">
+            {{ page.sidebar_second }}
+          </aside>
+        {% endif %}
+
+      </main>
+
+      <footer role="contentinfo" class="no-print">
+        {{ page.footer_top }}
+        <section id="fotter-bottom">
+          {{ page.footer_bottom_left }}
+          {{ page.footer_bottom_middle }}
+          {{ page.footer_bottom_right }}
+        </section>
+      </footer>
+      <div class="print_only back-cover no-print-after">{# div pour 4eme de couverture print only #}
         {{ page.footer_bottom_left }}
         {{ page.footer_bottom_middle }}
-        {{ page.footer_bottom_right }}
-      </section>
-    </footer>
-
-</div>{# /.layout-container #}
+      </div>
 
+  </div>{# /.layout-container #}

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

@@ -1,41 +1,32 @@
-const webpack = require("webpack");
 const path = require("path");
-
-let config = {
-    mode: 'development',
-    entry: [
-        "./scripts/main.js",
-        "./scripts/extlink.js",
-        "./scss/styles.scss",
-
-    ],
-    
-    output: {
-        path: path.resolve(__dirname, "./dist/assets"),
-        filename: "./bundle.js"
-    },
-
-    module: {
-        rules: [
-            {
-                test: /\.scss$/i,
-                use: [
-                    {
-                        loader: 'file-loader',
-                        options: {
-                            name: './css/bundle.css',
-                        }
-                    },
-                    // Compile le Sass en CSS
-                    "sass-loader"
-                ],
-            },
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+module.exports = {
+  mode: "development",
+  entry: {
+    bundle: "./scss/styles.scss",       // Pour l'affichage normal
+    print: "./scss/print.scss",         // Feuille de style print séparée
+    scripts: ["./scripts/main.js", "./scripts/extlink.js"]
+  },
+  output: {
+    path: path.resolve(__dirname, "./dist/assets"),
+    filename: "js/[name].js", // produit scripts.js
+  },
+  module: {
+    rules: [
+      {
+        test: /\.scss$/i,
+        use: [
+          MiniCssExtractPlugin.loader,
+          "css-loader",
+          "sass-loader"
         ],
-    }
-}
-
-
-
-
-
-module.exports = config;
+      },
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: "css/[name].css", // donne bundle.css et print.css
+    }),
+  ],
+};