/*
 * Certificats — rendu écran des modèles (finances/certificate_design.py).
 *
 * Chaque élément est positionné en ligne (style inline généré côté serveur) en
 * points PDF d'une page A4 paysage, convertis avec l'unité
 * --u = largeur de la page / 841,89 : l'écran reproduit le PDF à l'identique,
 * du téléphone au plein écran.
 */
@font-face { font-family: "WA Cert Serif"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/certificat/LiberationSerif-Regular.bf2a189ca51c.woff2") format("woff2"), url("../fonts/certificat/LiberationSerif-Regular.d3a50b998dc2.ttf") format("truetype"); }
@font-face { font-family: "WA Cert Serif"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/certificat/LiberationSerif-Bold.6c8d63050f69.woff2") format("woff2"), url("../fonts/certificat/LiberationSerif-Bold.3f04434f0699.ttf") format("truetype"); }
@font-face { font-family: "WA Cert Serif"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("../fonts/certificat/LiberationSerif-Italic.b1cc66295dd8.woff2") format("woff2"), url("../fonts/certificat/LiberationSerif-Italic.0d0b22f99687.ttf") format("truetype"); }
@font-face { font-family: "WA Cert Serif"; font-weight: 700; font-style: italic; font-display: swap;
  src: url("../fonts/certificat/LiberationSerif-BoldItalic.e00e315d5c1f.woff2") format("woff2"), url("../fonts/certificat/LiberationSerif-BoldItalic.0a1d7d91cf56.ttf") format("truetype"); }
@font-face { font-family: "WA Cert Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/certificat/LiberationSans-Regular.8fb0fbd280e3.woff2") format("woff2"), url("../fonts/certificat/LiberationSans-Regular.83ccce97cdf8.ttf") format("truetype"); }
@font-face { font-family: "WA Cert Sans"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/certificat/LiberationSans-Bold.f94ab0519f23.woff2") format("woff2"), url("../fonts/certificat/LiberationSans-Bold.b1be8d9e42b2.ttf") format("truetype"); }

.wa-cert {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  container-type: inline-size;
}
.wa-cert__page {
  --u: calc(100cqw / 841.89);
  position: relative;
  width: 100%;
  aspect-ratio: 841.89 / 595.28;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.wa-cert__page .wa-el {
  position: absolute;
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.wa-cert__page .wa-el--t {
  line-height: 1;
  white-space: nowrap;
  text-shadow: none;
  text-transform: none;
}
.wa-cert__page .wa-el--img { object-fit: contain; }
.wa-cert__page .wa-el--qr img {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* Plein écran : le certificat entier tient dans la fenêtre, sans défilement. */
.wa-cert--plein-ecran {
  max-width: min(100%, calc((100vh - 96px) * 841.89 / 595.28));
}
.wa-cert-details { max-width: 1120px; margin: 20px auto 0; }

/* Miniatures du studio : même rendu, sans ombre ni lien cliquable. */
.wa-cert--miniature { display: block; width: 100%; max-width: none; }
.wa-cert--miniature .wa-cert__page { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18); }
.wa-cert--miniature .wa-el--qr { pointer-events: none; }

@media print {
  @page { size: A4 landscape; margin: 0; }
  .wa-cert { max-width: none; }
  .wa-cert__page { box-shadow: none; }
}

/* Studio entreprise : les vignettes de modèles sont de vrais certificats miniatures. */
.cert-template-card .cert-template-card__thumb--vrai {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px;
  border-radius: 0;
  background: #eef1f5;
}
.cert-template-card__thumb--vrai::before,
.cert-template-card__thumb--vrai::after { content: none; display: none; }
.cert-template-grid:has(.cert-template-card__thumb--vrai) {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}