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

/* -----------------------/*
 * 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
*/

@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;
  }

  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;

      .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%;
      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;
  }

  /* 2) Couverture (print only) */
  .cover.print-only {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    min-height: 100vh;
    padding: 2cm 1.5cm;
    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 {
    @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; }
}