ajout de imgs fullspread bleed

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

@@ -238,27 +238,39 @@ img {
   width: calc(62.5% - 1mm);
 }
 
-.imgfullspreadleft {
+.imgfullspreadleft,
+.imgfullspreadright,
+.imgfullspreadright_bleedtop,
+.imgfullspreadright_bleed {
   break-before: left;
   break-after: left;
   width: 149mm;
   overflow: hidden;
 }
 
-.imgfullspreadright {
-  break-before: left;
-  break-after: left;
-  width: 149mm;
-  overflow: hidden;
+.imgfullspreadright_bleedtop {
+  margin-top: -22mm;
+  height: 220mm;
 }
 
-.imgfullspreadleft img {
+.imgfullspreadright_bleed {
+  margin-top: -22mm;
+  height: 242mm;
+}
+
+.imgfullspreadleft img,
+.imgfullspreadright img {
   height: 198mm;
   width: auto;
 }
 
-.imgfullspreadright img {
-  height: 198mm;
+.imgfullspreadright_bleedtop img {
+  height: 220mm;
+  width: auto;
+}
+
+.imgfullspreadright_bleed img {
+  height: 242mm;
   width: auto;
 }
 
@@ -269,13 +281,33 @@ img {
 }
 
 .imgfullspreadright-right {
-  width: 149mm;
+  width: 143mm;
   margin-left: -8mm;
   overflow: hidden;
   display: flex;
   justify-content: flex-end;
 }
 
+
+.imgfullspreadright_bleedtop-right, .imgfullspreadright_bleed-right {
+  width: 173mm;
+  height: 220mm !important;
+  margin-top: -22mm;
+  margin-left: -8mm;
+  overflow: hidden;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.imgfullspreadright_bleed-right, .imgfullspreadright_bleed-right img {
+  height: 242mm !important;
+}
+
+.imgfullspreadright_bleedtop-right img, .imgfullspreadright_bleed-right img {
+  height: 220mm;
+  width: auto;
+}
+
 .imgfullspreadright-right img {
   height: 198mm;
   width: auto;

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

@@ -161,21 +161,27 @@
                 }
             }
             // images fullspread
-            let fullspreadEl = document.querySelectorAll('.imgfullspreadleft, .imgfullspreadright');
+            let fullspreadEl = document.querySelectorAll('.imgfullspreadleft, .imgfullspreadright, .imgfullspreadright_bleedtop, .imgfullspreadright_bleed');
             for (let i = 0; i < fullspreadEl.length; i++) {
                 let imgSrc = fullspreadEl[i].firstElementChild.getAttribute('src');
                 let nextPage = fullspreadEl[i].closest('.pagedjs_page').nextElementSibling.querySelectorAll('.pagedjs_page_content');
                 let imgOverflowEl = document.createElement('div');
                 if (fullspreadEl[i].classList.contains('imgfullspreadleft')) {
                     imgOverflowEl.setAttribute('class', 'imgfullspreadleft-right');
-                } else {
+                } else if (fullspreadEl[i].classList.contains('imgfullspreadright')) {
                     imgOverflowEl.setAttribute('class', 'imgfullspreadright-right');
+                } else if (fullspreadEl[i].classList.contains('imgfullspreadright_bleedtop')) {
+                    imgOverflowEl.setAttribute('class', 'imgfullspreadright_bleedtop-right');
+                } else if (fullspreadEl[i].classList.contains('imgfullspreadright_bleed')) {
+                    imgOverflowEl.setAttribute('class', 'imgfullspreadright_bleed-right');
                 }
                 let imgOverflow = document.createElement('img');
                 imgOverflow.src = imgSrc;
                 imgOverflowEl.append(imgOverflow);
                 nextPage[0].append(imgOverflowEl);
-                if (fullspreadEl[i].classList.contains('imgfullspreadright')) {
+                if (fullspreadEl[i].classList.contains('imgfullspreadright')
+                || fullspreadEl[i].classList.contains('imgfullspreadright_bleedtop')
+                || fullspreadEl[i].classList.contains('imgfullspreadright_bleed')) {
                     let imgMargin = imgOverflowEl.getBoundingClientRect().right - fullspreadEl[i].firstElementChild.getBoundingClientRect().right;
                     fullspreadEl[i].firstElementChild.style.marginLeft = imgMargin + 'px';
                 }