/* Affiche A4 à imprimer.
   ---------------------------------------------------------------------
   Tout est en millimètres : un A4 fait 210 sur 297, et l'aperçu comme
   l'impression partent des mêmes valeurs. L'aperçu de la console applique
   simplement une mise à l'échelle sur le bloc entier.

   Les couleurs viennent de la personnalisation de l'établissement, posées en
   variables par l'écran qui affiche l'affiche. Les valeurs ci-dessous ne sont
   qu'un repli. */
.affiche {
  --af-fond: #FFFFFF;
  --af-encre: #1E1B1A;
  --af-accent: #6E1F2A;
  --af-doux: #6E6266;
  --af-trait: #E2DDDA;

  width: 210mm;
  height: 297mm;
  box-sizing: border-box;
  background: var(--af-fond);
  color: var(--af-encre);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Position de référence pour l'échelle appliquée par l'aperçu. */
  transform-origin: top left;
}

/* --- Zones communes --------------------------------------------------- */
.af-titre {
  font-size: 15mm;
  line-height: 1.1;
  font-weight: 700;
  text-align: center;
  /* Un titre long ne doit pas pousser le QR hors de la page : il se coupe. */
  overflow-wrap: anywhere;
}
.af-slogan {
  font-size: 7mm;
  line-height: 1.3;
  text-align: center;
  color: var(--af-doux);
  overflow-wrap: anywhere;
}
.af-marque {
  font-size: 6mm;
  letter-spacing: .3mm;
  font-weight: 700;
  text-align: center;
  color: var(--af-accent);
}
.af-logo { display: block; height: 18mm; max-width: 90mm; object-fit: contain; margin: 0 auto; }

.af-qr {
  width: var(--qr);
  height: var(--qr);
  margin: 0 auto;
  padding: 3mm;
  background: #FFFFFF;
  border: .4mm solid var(--af-trait);
  border-radius: 2mm;
  box-sizing: content-box;
}
.af-qr img { width: 100%; height: 100%; display: block; }

/* La mention légale est obligatoire et ne bouge pas : elle occupe son propre
   pied de page, hors des zones que l'établissement remplit. Rien ne peut la
   recouvrir puisqu'aucune zone n'est en position absolue. */
.af-mention {
  margin-top: auto;
  padding: 6mm 12mm;
  font-size: 3.6mm;
  line-height: 1.3;
  text-align: center;
  color: var(--af-doux);
  border-top: .3mm solid var(--af-trait);
}

/* --- Modèle « bandeau » ----------------------------------------------- */
/* La photo occupe le haut sur toute la largeur, le QR ferme le bas. */
.af-bande { height: 105mm; flex: none; overflow: hidden; }
.af-bande img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sans photo, un filet et non un aplat : un tiers de page en dégradé se lit
   comme une image manquante, pas comme un parti pris. Le filet suffit à tenir
   le haut de l'affiche. */
.af-filet { height: 6mm; flex: none; background: var(--af-accent); }
.af-bandeau .af-corps {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 6mm;
  padding: 12mm 16mm;
  min-height: 0;
}
/* Sans photo, le corps occupe la page entière : les zones s'espacent un peu
   plus, sinon le bloc paraît tassé au milieu d'un grand blanc. Règle placée
   après celle du modèle, dont elle a la même spécificité. */
.af-sans-image .af-corps { gap: 10mm; }

/* --- Modèle « centré » ------------------------------------------------- */
/* Le QR est le sujet, la photo n'est qu'un médaillon : un établissement sans
   belle photo garde une affiche présentable. */
.af-centre {
  align-items: stretch;
  justify-content: center;
  gap: 8mm;
  padding: 20mm 18mm 0;
}
.af-medaillon {
  width: 58mm; height: 58mm;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto;
  border: 1mm solid var(--af-trait);
}
.af-centre .af-mention { margin-left: -18mm; margin-right: -18mm; }

/* --- Aperçu à l'écran -------------------------------------------------- */
/* Le cadre réserve la place de l'affiche réduite, et l'affiche est mise à
   l'échelle sans être redessinée : ce qu'on voit est ce qui sortira. */
.af-cadre {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.af-cadre .affiche { position: absolute; top: 0; left: 0; }