@font-face {
  font-family: "Marianne";
  src: url("marianne-regular.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Marianne";
  src: url("marianne-bold.ttf");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Marianne";
  src: url("marianne-thin.ttf");
  font-weight: 100; // weasy print n"accepte pas lighter
  font-style: normal;
}

@page {
  size: A4;
  margin: 17mm 17mm 34mm; // add margin at the bottom to add address

  @bottom-center {
    font-size: 8pt;
    content: counter(page) " / " counter(pages);
    margin-top: 17mm;
    white-space: nowrap;
  }

  @bottom-left {
    content: element(footer);
  }
}

#attestation {
  @media screen {
    .a4-container {
      display: flex;
      flex-direction: column;
      justify-content: space-between; // This will push the footer down
      max-width: 21cm;
      min-height: 29.7cm;
      padding: 17mm;
      margin: 0 auto;
      background: #FFFFFF;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); // Optional: for better visualization
      position: relative;
    }
  }

  font-family: Marianne;

  header {
    display: flex;
    justify-content: space-between;

    p {
      margin: 0;
    }
  }

  .official-layout & {
    .direction {
      margin-top: 5.25mm;
    }
  }

  .bloc-marque {
    margin-bottom: 14mm;
    margin-right: 17mm; // 4x 4.25mm
  }

  .marianne {
    height: 4.25mm;
    margin-bottom: 1mm;
  }

  .intitule {
    font-size: 12pt;
    font-weight: bold;
    margin: 0 0 1mm;
    line-height: 12pt;
  }

  .devise {
    height: 8.5mm;
    margin: 0;
  }

  // weasyprint flexbox with img is broken
  // so we're using old inline tricks
  .logo-co-emetteur,
  .direction {
    display: inline-block;
    vertical-align: top;
  }

  .logo-co-emetteur {
    img {
      max-height: 28mm;
      margin-right: 5mm;
    }
  }

  .direction {
    margin: 5.25mm 0 23.3mm;
    line-height: 14pt;
    font-weight: bold;
  }

  .body-start {
    margin-top: 12.6mm; // from masque traitement de texte
  }

  .main {
    font-size: 10pt;

    .header {
      &:first-of-type {
        font-size: 10pt;
      }

      &:last-of-type {
        font-size: 8pt;
      }
    }
  }

  h1,
  h2 {
    // both titles have the same size
    font-size: 12pt;
    font-weight: bold;
  }

  h1 {
    margin: 14mm 0 8mm;
  }

  h2 {
    margin: 0;
  }

  h3 {
    font-size: 10pt; // same as text
    font-weight: bold;
  }

  li p {
    margin: 0.25rem 0;
  }

  .signature {
    text-align: right;
    margin-top: 14mm;
    margin-right: 25mm;
  }

  .signature,
  .logo-free-layout {
    img {
      max-height: 50mm;
      max-width: 50mm;
    }
  }

  footer {
    position: running(footer);
    font-size: 7pt;
    font-weight: 100;
    white-space: nowrap;

    @media screen {
      position: absolute;
      bottom: 0;
    }
  }

  .tdc-repetition li {
    margin-bottom: 5mm;
    padding-left: 3mm;

    dl {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 1mm 10mm;
    }

    .invisible {
      visibility: hidden;
      height: 0;
    }
  }
}