d9-eql/web/themes/custom/eql/scss/print.scss

/* -----------------------/*
 * 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 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 */
    * {
      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($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,
    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;
            .top_top{
                flex-direction: column !important;
                .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;
                }
            }
            .top_bottom{
                width: 100% !important;
            }
        }
        .layout__region--first{
            display: none;
        }
        .layout__region--second{
            flex: 0 1 100% !important;
        }
    }

}