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

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

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

        .slick-dots,
        .slick-arrow {
          display: none;
        }

        .top_right {
          width: 100% !important;
        }
      }

      .top_bottom {
        width: 100% !important;
      }
    }

    .layout__region--first {
      display: none;
    }

    .layout__region--second {
      flex: 0 1 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();


    /* --- Couverture : header-top en page 1 --- */
    .layout-container header {
      position: static !important;   // ne plus être fixed en print
      width: 100% !important;
      box-shadow: none !important;
    }
  
    #header-top {
      display: flex !important;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  
      height: 100vh;             // occupe la hauteur de la "page"
      padding: 2cm 1.5cm;        // marges internes
      text-align: center;
      page-break-after: always;  // 👉 le contenu commence sur la page suivante
  
      background: #ffffff !important;
      color: #000000 !important;
    }
  
    /* On cache le menu du bas du header (la barre de navigation horizontale) */
    .region-header-bottom {
      display: none !important;
    }
  
    /* Si tu as un logo + titre dans #header-top, tu peux les grossir un peu : */
    #header-top .region-header-top-left img {
      max-height: 3cm;
      height: auto;
      width: auto;
    }
  
    #header-top .region-header-top-rigth #block-eql-identitedusite {
      font-size: 1.4rem;
      text-transform: uppercase;
    }

}

/* 2) MODE DEBUG : voir la version print en écran via body.debug-print */
@media screen {
  body.debug-print {
    @include print-base();
  }
}