correction bug paragraphes latour/lampe qui sautent et suppression des espaces blancs avant les paragraphes où ça n'est pas nécessaire

user/themes/carnet-atterrissage/css/mep_carnet.css

@@ -2,11 +2,13 @@
   --cols: 8;
   --rows: 8;
   --guts: 4mm;
+  --beige: #fbf2e7;
+  --ocre: #d98a29;
 }
 
 @page {
     size: 165mm 230mm;
-    margin-top: 8mm;
+    margin-top: 16mm;
     margin-bottom: 16mm;
     bleed: 6mm;
     color: black;
@@ -15,6 +17,46 @@
 @page:left {
   margin-left: 16mm;
   margin-right: 8mm;
+  @left-middle {
+    content: counter(page);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: 'Ortica';
+    font-weight: bold;
+    font-size: 8pt;
+    color: var(--ocre);
+    height: 30mm;
+  }
+  @left-top {
+    content: 'Titre sous-section';
+    white-space: nowrap;
+    font-family: 'Ortica';
+    font-weight: bold;
+    font-size: 8pt;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    text-align: right;
+  }
+  @left-bottom {
+    content: 'Partie générale';
+    white-space: nowrap;
+    font-family: 'Ortica';
+    font-weight: bold;
+    font-size: 8pt;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+  }
+}
+
+.pagedjs_margin-left-top div, .pagedjs_margin-left-bottom div {
+  display: block;
+  min-width: max-content;
+  transform: rotate(-90deg);
 }
 
 @page:right {
@@ -22,13 +64,12 @@
   margin-right: 16mm;
 }
 
-* {
+body {
   font-family: 'Public';
-  hyphens: auto;
 }
 
 h2 {
-	color: blue;
+  color: blue;
 }
 
 h3 {
@@ -69,6 +110,8 @@ h3 {
   padding-left: calc(var(--pagedjs-pagebox-width) / var(--cols));
   line-height: 12pt;
   font-size: 9pt;
+  text-align: justify;
+  hyphens: auto;
 }
 
 .labeur p:before {
@@ -81,12 +124,60 @@ h3 {
   padding-left: 3mm;
 }
 
+.latour, .lampe {
+  font-family: 'Novel';
+  font-weight: normal;
+  margin-left: calc(var(--pagedjs-pagebox-width) / var(--cols));
+  margin-right: -16mm;
+  margin-bottom: 20mm;
+  background-color: var(--beige);
+  line-height: 12pt;
+  font-size: 9pt;
+  padding-right: 18mm;
+  padding-left: calc(var(--pagedjs-pagebox-width) / var(--cols));
+  padding-bottom: 10mm;
+  padding-top: 10mm;
+}
+
+.pagedjs_left_page .latour, .pagedjs_left_page .lampe {
+  padding-right: 10mm;
+  width: 128.375mm;
+}
+
+.latour[data-split-original="true"] {
+  padding-bottom: 1mm !important;
+}
+
+.latour[data-split-from] {
+  padding-top: 1mm !important;
+}
+
+.latour-header, .lampe-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  line-height: 1.1;
+/*   font-family: 'Novel';
+ */  font-weight: bold;
+}
+
+.latour-header div:first-of-type,
+.lampe-header div:first-of-type {
+  margin-top: 1mm;
+  margin-right: 2mm;
+}
+
+.lampe {
+  margin-top: 20mm;
+  padding-top: 3mm;
+  padding-bottom: 3mm;
+}
+
 img {
   width: 100%;
 }
 
 .fullpage2imgs {
-  break-before: right;
   width: 130mm;
   height: 210mm;
 }
@@ -96,4 +187,40 @@ img {
   margin-left: -10mm;
   width: 171mm;
   height: 230mm;
-}
+}
+
+.bottomimg {
+  width: 100%;
+}
+
+.bottomimg img {
+  height: 100%;
+}
+
+.tripleimgs {
+ break-before: page; 
+ break-after: page
+}
+
+.tripleimgs img:nth-of-type(2) {
+  width: calc(50% - 1mm);
+  margin-right: 2mm;
+}
+
+.tripleimgs img:last-of-type {
+  width: calc(50% - 1mm);
+}
+
+.tripleimgs2 {
+  break-before: page; 
+  break-after: page
+}
+
+.tripleimgs2 img:nth-of-type(2) {
+  width: calc(37.5% - 1mm);
+  margin-right: 2mm;
+}
+
+.tripleimgs2 img:last-of-type {
+  width: calc(62.5% - 1mm);
+}

user/themes/carnet-atterrissage/fonts/fonts.css

@@ -17,3 +17,27 @@
     font-weight: 500;
 }
 
+@font-face {
+    font-family: 'Novel';
+    src: url('NovelSans/novelsanspro_regular-webfont.woff2'), format('woff2');
+    font-weight: normal;
+}
+
+@font-face {
+    font-family: 'Novel';
+    src: url('NovelSans/novelsanspro_bold-webfont.woff2'), format('woff2');
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: 'Ortica';
+    src: url('Ortica/OrticaAngular-Bold.woff2'), format('woff2');
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: 'Ortica';
+    src: url('Ortica/OrticaLinear-Light.woff2'), format('woff2');
+    font-weight: light;
+}
+

user/themes/carnet-atterrissage/templates/partials/base.html.twig

@@ -63,20 +63,90 @@
     }
 
     // cleaner le balisage des éléments contenant plusieurs paragraphes
+    let contentToParse = [];
     let labeurs = document.getElementsByClassName("labeur");
     for(let i = 0; i < labeurs.length; i++) {
-        if (labeurs[i].childNodes.length == 1) {
-            labeurs[i].innerHTML = '<p>' + labeurs[i].innerHTML + '</p>';
+        contentToParse.push(labeurs[i]);
+    }
+    let latours = document.getElementsByClassName("latour");
+    for(let i = 0; i < latours.length; i++) {
+        contentToParse.push(latours[i]);
+    }
+    let lampes = document.getElementsByClassName("lampe");
+    for(let i = 0; i < lampes.length; i++) {
+        contentToParse.push(lampes[i]);
+    }
+
+    for(let i = 0; i < contentToParse.length; i++) {
+        if (contentToParse[i].childNodes.length == 1) {
+            contentToParse[i].innerHTML = '<p>' + contentToParse[i].innerHTML + '</p>';
         } else {
-            labeurs[i].innerHTML = "<p>" + labeurs[i].innerHTML.replace("<p>", "");
+            contentToParse[i].innerHTML = "<p>" + contentToParse[i].innerHTML.replace("<p>", "");
         }
-        for(j = 0; j < labeurs[i].childNodes.length; j++) {
-            if (labeurs[i].childNodes[j].innerHTML != undefined) {
-                labeurs[i].childNodes[j].innerHTML = labeurs[i].childNodes[j].innerHTML.replaceAll(' :', '&nbsp;:');
+        // headers latour / lampe
+        if (contentToParse[i].classList.contains("latour")) {
+            contentToParse[i].childNodes[0].innerHTML = "<div class='latour-header'><div><img src='{{ url('theme://assets/map.png') }}' alt='carte'></div><div>" + contentToParse[i].childNodes[0].innerHTML + "</div></div>";
+        } else if (contentToParse[i].classList.contains("lampe")) {
+            contentToParse[i].childNodes[0].innerHTML = "<div class='lampe-header'><div><img src='{{ url('theme://assets/lampe.png') }}' alt='lampe'></div><div>" + contentToParse[i].childNodes[0].innerHTML + "</div></div>";
+        }
+        // micro-typo
+        for(j = 0; j < contentToParse[i].childNodes.length; j++) {
+            let contentHTML = contentToParse[i].childNodes[j].innerHTML;
+            if (contentHTML != undefined) {
+                contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' :', '&nbsp;:');
+                contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' ?', '&nbsp;?');
+                contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' !', '&nbsp;!');
+                contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll('« ', '«&nbsp;');
+                contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' »', '&nbsp;»');
+                contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll('“', '«&nbsp;');
+                contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll('”', '&nbsp;»');
+                contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' min', '&nbsp;min');
             }
         }
-    }   
+    }  
 
+    // fonction s'éxecute après le rendu de pagedJS
+    // cf https://pagedjs.org/documentation/10-handlers-hooks-and-custom-javascript/
+    class setMarginTexts extends Paged.Handler {
+        constructor(chunker, polisher, caller) {
+            super(chunker, polisher, caller);
+        }
+
+        afterPreview(pages) {
+            // afficher correctement les éléments en marge
+            let topLeftBoxes = document.getElementsByClassName('pagedjs_margin-left-top');
+            for (let i = 0; i < topLeftBoxes.length; i++) {
+                topLeftBoxes[i].childNodes[0].style.marginTop = topLeftBoxes[i].childNodes[0].offsetWidth / 2 - topLeftBoxes[i].childNodes[0].offsetHeight / 2 + "px";
+            }
+            let bottomLeftBoxes = document.getElementsByClassName('pagedjs_margin-left-bottom');
+            for (let i = 0; i < bottomLeftBoxes.length; i++) {
+                bottomLeftBoxes[i].childNodes[0].style.marginBottom = bottomLeftBoxes[i].childNodes[0].offsetWidth / 2 - bottomLeftBoxes[i].childNodes[0].offsetHeight / 2 + "px";
+            }
+
+            // cleaner pour que les paragraphes tombent sur la marge haute
+            for(let i = 0; i < labeurs.length; i++) {
+                if (labeurs[i] == labeurs[i].parentNode.firstElementChild
+                    && !labeurs[i].firstElementChild.hasAttribute("data-split-from")) {
+                    labeurs[i].firstElementChild.style.marginTop = "0px";
+                }
+            }
+            // pareil pour les titres temps
+            for (let i = 0; i < moments.length; i++) {
+                if (moments[i].previousElementSibling?.tagName === "P"
+                    && moments[i].previousElementSibling == moments[i].parentNode.firstElementChild) {
+                        moments[i].parentNode.removeChild(moments[i].parentNode.firstElementChild);
+                    }
+            }
+            // images collées en bas
+            let bottomImgs = document.getElementsByClassName('bottomimg');
+            for (let i = 0; i < bottomImgs.length; i++) {
+                let page = bottomImgs[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
+                bottomImgs[i].style.transform = 'translateY(' + (page.getBoundingClientRect().bottom - bottomImgs[i].firstElementChild.getBoundingClientRect().bottom) + 'px)';
+            }
+        }
+    }
+    Paged.registerHandlers(setMarginTexts);
+ 
 </script>
 </body>
 </html>