:root {
  /* largeur de la carte */
  --card-width: 75mm;

  /* hauteur de la carte */
  --card-height: 125mm;

  /* bordure de la carte */
  --card-border: 1px solid rgba(0, 0, 0, 0.3);

  /* marges pour les bords en couleur et entre les zones de la carte */
  --card-spacing: 5mm;

  /* Dans l'ordre, hauteurs de: type de carte / titre / image / texte résumé / pied de page (pictos, qrcode)*/
  --card-recto-zone-height: 5mm 20mm 50mm 20mm 20mm;

  /* Dans l'ordre, hauteurs de: type de carte / titre / texte long / pied de page (pictos, qrcode)*/
  --card-verso-zone-height: 5mm 20mm 70mm 20mm;

  /* typo type de la carte (en haut à droite) */
  --type-font-family: tahoma, sans-serif;
  --type-font-size: 10px;
  --type-color: #222;
  --type-text-transform: uppercase;

  /* typo titre de la carte */
  --title-font-family: garamond, serif;
  --title-font-size: 20px;
  --title-color: #222;
  --title-text-transform: uppercase;

  /* typo texte recto de la carte */
  --text-font-family: tahoma, sans-serif;
  --text-font-size: 16px;
  --text-color: #222;

  /* typo texte verso de la carte */
  --longtext-font-family: tahoma, sans-serif;
  --longtext-font-size: 16px;
  --longtext-color: #222;

  /* typo lien pied de page de la carte */
  --link-font-family: tahoma, sans-serif;
  --link-font-size: 10px;
  --link-color: #222;

  /* typo texte pictos pied de page de la carte */
  --picto-font-family: tahoma, sans-serif;
  --picto-font-size: 8px;
  --picto-color: #222;
}

.page-qrcard {
  background-color: transparent;
  width: 100%;
  display: flex;
  padding: 1em 0;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 3em 1em;
}

.qrcard {
  font-size: initial;
  line-height: 1.1em;
  border: var(--card-border);
  width: var(--card-width);
  height: var(--card-height);
  padding: var(--card-spacing);
  display: grid;
  grid-gap: 0;
  align-content: start;
  grid-template-columns: 1fr;
}
.qrcard.front {
  grid-template-rows: var(--card-recto-zone-height);
}

.qrcard.back {
  grid-template-rows: var(--card-verso-zone-height);
}

.qrcard-header {
  display: flex;
  justify-content: space-between;
  background: #fff;
}
.complexity {
  font-size: 8px;
  width: 10mm;
  margin-right: 2mm;
  margin-left: 1mm;
}
.card-type {
  font-family: var(--type-font-family);
  font-size: var(--type-font-size);
  color: var(--type-color);
  text-transform: var(--type-text-transform);
  margin-right: 1mm;
}

.qrcard-title {
  text-align: center;
  font-family: var(--title-font-family);
  font-size: var(--title-font-size);
  color: var(--title-color);
  text-transform: var(--title-text-transform);
  margin: 0;
  display: flex;
  width: 100%;
  align-items: center;
  overflow: hidden;
  justify-content: center;
  background: #fff;
}

.qrcard-image {
  display: flex;
  align-items: center;
  align-content: center;
  margin: 0;
  overflow: hidden;
  width: 100%;
  background: white;
}
.qrcard-image img {
  width: 243px;
  display: block;
  object-fit: contain !important;
  border-radius: 0;
  height: 100% !important;
}

.qrcard-text {
  font-family: var(--text-font-family);
  font-size: var(--text-font-size);
  color: var(--text-color);
  text-align: center;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  background: white !important;
  padding: 1mm;
}

.qrcard-footer {
  margin-top: var(--card-spacing);
  background: white !important;
  padding: 1mm;
  display: flex;
  justify-content: space-around;
  align-content: center;
  align-items: center;
}

.boite1,
.boite2,
.boite3,
.qrcode {
  width: 12mm;
  text-align: center;
  font-family: var(--picto-font-family);
  font-size: var(--picto-font-size);
  color: var(--picto-color);
}
.mini-picto img {
  max-width: 9mm !important;
  margin-bottom: 2px;
}
.mini-text {
  text-transform: uppercase;
  line-height: 1em;
  word-break: break-word;
}

.link {
  width: 39mm;
  text-align: center;
  position: relative;
  line-height: 1em;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
  align-content: space-around;
  height: 100%;
}

.card-link {
  word-break: break-word;
  padding: 0;
  line-height: 0.9em;
  font-family: var(--link-font-family);
  font-size: var(--link-font-size);
  color: var(--link-color);
  margin: 0;
}

/*QR code parameters */
.qrcode,
.qrcode img {
  width: 13mm;
}
.qrcode {
  margin: 0;
}

.logo-cc {
  width: 12mm;
}

.logo {
  width: 10mm;
  height: auto;
  max-height: 13mm;
}

/* flip */
.card-plus-actions-container {
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
}
.flip-container {
  perspective: 1000;
  transform-style: preserve-3d;
}

.flip-container:hover .back,
.flip-container.hover .back {
  transform: rotateY(0deg);
}

.flip-container:hover .front,
.flip-container.hover .front {
  transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
  width: var(--card-width);
  height: var(--card-height);
}

.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

.flipper .front,
.flipper .back {
  backface-visibility: hidden;
  transition: 0.6s;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  position: absolute;
  top: 0;
  left: 0;
}

.flipper .front {
  z-index: 2;
}

.flipper .back {
  transform: rotateY(-180deg);
}

/* vertical */
.vertical.flip-container {
  position: relative;
}

.vertical .back {
  transform: rotateX(180deg);
}

.vertical.flip-container .flipper {
  transform-origin: 100% 213.5px;
}

.vertical.flip-container:hover .back,
.vertical.flip-container.hover .back {
  transform: rotateX(0deg);
}

.vertical.flip-container:hover .front,
.vertical.flip-container.hover .front {
  transform: rotateX(180deg);
}

.card-actions {
  margin-top: 115mm;
  opacity: 0;
  transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 1000ms;
}
.bazar-entry:hover .card-actions {
  margin-top: 126mm;
  opacity: 1;
}

.qrcard-main-content {
  display: block;
  padding: 2mm;
  background: white !important;
  overflow: hidden;
  font-family: var(--longtext-font-family);
  font-size: var(--longtext-font-size);
  color: var(--longtext-color);
  text-align: left;
  line-height: 1.143em !important;
  font-size: 12px !important;
}

.qrcard-main-content ul {
  padding-left: 1rem;
}

.page-qrcard img {
  border-radius: 0;
  object-fit: contain;
}
.qrcard-to-print {
  break-before: avoid-page;
  break-after: avoid-page;
  break-inside: avoid;
  display: inline-block;
  width: calc(2 * var(--card-width));
  position: relative;
  height: var(--card-height);
  --card-border: 1px solid black;
}
.qrcard-to-print .qrcard.front {
  position: absolute;
  top: 0;
  left: 0;
}
.qrcard-to-print .qrcard.back {
  position: absolute;
  top: 0;
  left: var(--card-width);
}
.page-qrcard.print .back {
  border-left: none;
}

.page-qrcard.print.monochrome {
  filter: grayscale(100) !important;
}
.page-qrcard.print.monochrome .qrcard {
  background-color: transparent !important;
}

.btn-group-qrcards {
  margin-top: 1em;
  border: 1px solid var(--primary-color);
  border-radius: 6px;
}

.qrcard-actions {
  width: var(--card-width);
  position: absolute;
  bottom: -28px;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}
.qrcard-to-print .qrcard-actions {
  width: calc(2 * var(--card-width));
}

.flex-between {
  display: flex;
  justify-content: space-between;
}

[data-id='bf_plus'] .BAZ_label {
  display: none;
}

.col-md-6 .col-md-4 .bazar-entry-edit-image {
  flex-direction: column;
}

/* hide yeswiki interface in print mode, and do some tweaks */
@media print {
  @page {
    size: A4 landscape;
    margin: 0;
  }

  ::-webkit-scrollbar {
    display: none;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    margin: 0;
  }
  a[href]::after {
    content: none;
  }
  .footer,
  #yw-topnav,
  #yw-header,
  #yw-footer,
  .debug,
  .BAZ_fiche_info,
  .filters-col,
  .no-print {
    display: none !important;
  }
  #yw-main {
    padding: 0;
  }

  .qrcard-to-print {
    transform: rotate(90deg);
    transform-origin: 250px 250px; /* chiffre empirique pour que les cartes soient collées au bord, pythagore-skills fealure */
    break-inside: avoid;
  }
  .qrcard-to-print:nth-child(2n + 1) {
    break-before: page;
  }
  .qrcard-to-print .qrcard-header,
  .qrcard-to-print .qrcard-title,
  .qrcard-to-print .qrcard-image {
    background: white !important;
  }
  .page-qrcard {
    display: grid;
    grid-template-columns: var(--card-height) var(--card-height);
    grid-template-rows: calc(2 * var(--card-width));
    padding: 0 0 110px 0; /* 110px pour compenser la rotation des cartes */
    margin: 0;
    font-size: 0;
    letter-spacing: 0;
    word-spacing: 0;
    min-width: calc(2 * var(--card-height));
    min-height: calc(2 * var(--card-width));
  }
}

.verso .format-menu,
.verso .more-styles .aceditor-btn-line,
.verso .pages,
.verso .attach-file-uploader,
.verso .actions-builder-button,
.verso .aceditor-btn-help {
  display: none;
}