@charset "UTF-8";

/* =========================================================================
   comprendrelamesse.fr — les flyers à imprimer
   -------------------------------------------------------------------------
   Chargée par la seule page /flyers. Deux régimes dans un même fichier :

     écran      les feuilles sont réduites à l'échelle, posées dans un cadre,
                pour qu'on voie ce qu'on va imprimer avant de l'imprimer ;
     impression une feuille A4 par modèle, sans marge, à la taille exacte —
                c'est le navigateur qui compose, aucun PDF n'est nécessaire.

   Les couleurs des feuilles sont écrites en clair, et non en jetons : une
   feuille destinée au papier doit rester noire sur blanc, même quand le
   lecteur a choisi le thème sombre.
   ========================================================================= */


/* 1 — La page elle-même ================================================== */

.flyers__intro {
  max-width: var(--mesure);
}

.flyers__partage {
  margin: var(--e-6) 0;
  padding: var(--e-5);
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-md);
  background: var(--papier-haut);
}

.flyers__partage h2 {
  margin-bottom: var(--e-2);
}

.flyers__partage p {
  max-width: var(--mesure);
}

.flyers__lien {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  align-items: center;
  margin-top: var(--e-4);
}

.flyers__adresse {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-md);
  font-weight: 600;
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--filet);
  border-radius: var(--r-sm);
  background: var(--papier-bas);
}

.flyers__canaux {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-4);
}

/* Le repli du bouton « Copier le lien » a besoin d'une zone de texte
   réellement présente mais invisible : display:none empêche la sélection. */
.hors-ecran {
  position: fixed;
  top: -100vh;
  left: -100vw;
  opacity: 0;
}

/* 2 — Un modèle ========================================================== */

.modele {
  margin: var(--e-7) 0;
  padding-top: var(--e-6);
  border-top: 2px solid var(--encre);
}

.modele__titre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-3);
}

.modele__lettre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.modele__quoi {
  max-width: var(--mesure);
  margin-top: var(--e-3);
}

.modele__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  margin: var(--e-4) 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-sm);
  color: var(--encre-pale);
}

.modele__specs b {
  color: var(--encre);
  font-weight: 600;
}

.modele__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-bottom: var(--e-5);
}

/* 3 — Le cadre d'aperçu ================================================== */

/*
 * La feuille mesure toujours 210 × 297 mm : on ne la redimensionne pas, on la
 * met à l'échelle. Une feuille réduite par transform garde ses proportions et
 * ses graisses exactes ; une feuille redessinée en pourcentages ne montrerait
 * plus ce qui sortira de l'imprimante, ce qui est tout l'objet d'un aperçu.
 */
.cadre {
  --z: 0.62;
  overflow: hidden;
  width: calc(210mm * var(--z));
  height: calc(297mm * var(--z));
  max-width: 100%;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-sm);
  box-shadow: var(--ombre);
  background: #fff;
}

@media (max-width: 52em) { .cadre { --z: 0.46; } }
@media (max-width: 38em) { .cadre { --z: 0.33; } }
@media (max-width: 26em) { .cadre { --z: 0.26; } }

.feuille {
  position: relative;
  width: 210mm;
  height: 297mm;
  transform: scale(var(--z));
  transform-origin: top left;
  background: #fff;
  color: #1b1917;
  display: grid;
}

/* Les traits de coupe. Assez nets pour guider les ciseaux, assez pâles pour
   ne pas rester visibles sur le flyer découpé. */
.coupe {
  position: absolute;
  pointer-events: none;
}

.coupe--v { top: 0; bottom: 0; border-left: 0.2mm dashed #c8c2b8; }
.coupe--h { left: 0; right: 0; border-top: 0.2mm dashed #c8c2b8; }

/* Les positions, en classes et non en attribut style : la CSP du site
   interdit le style en ligne, y compris sur un attribut. */
.coupe--x20   { left: 20mm; }
.coupe--x525  { left: 52.5mm; }
.coupe--x105  { left: 105mm; }
.coupe--x1575 { left: 157.5mm; }
.coupe--x190  { left: 190mm; }

.coupe--y11   { top: 11mm; }
.coupe--y66   { top: 66mm; }
.coupe--y99   { top: 99mm; }
.coupe--y121  { top: 121mm; }
.coupe--y1485 { top: 148.5mm; }
.coupe--y176  { top: 176mm; }
.coupe--y198  { top: 198mm; }
.coupe--y231  { top: 231mm; }
.coupe--y286  { top: 286mm; }

/* 4 — Le vocabulaire commun aux quatre modèles =========================== */

.feuille * { box-sizing: border-box; }

.f-kick {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8a5a3c;
}

.f-titre {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
               Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.01em;
}

.f-titre em { font-style: italic; color: #9b2b23; }

.f-lede { color: #46423c; line-height: 1.4; }

.f-points { list-style: none; margin: 0; padding: 0; }

.f-points li { position: relative; line-height: 1.3; }

.f-points li::before {
  content: "";
  position: absolute;
  left: 0;
  border-radius: 50%;
  background: #8a5a3c;
}

.f-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1b1917;
}

.f-gratuit {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.f-fine { color: #6f685e; line-height: 1.28; }

/*
 * Le verset occupe le blanc que laissaient les deux petits formats. Il n'est
 * pas un ornement : c'est la seule phrase du flyer qui ne parle pas du site.
 */
.f-verset {
  margin: 0;
  padding: 0;
  border-left: 0.5mm solid #e0d8cc;
}

.f-verset p {
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
               Georgia, "Times New Roman", serif;
  font-style: italic;
  color: #46423c;
  line-height: 1.34;
}

.f-verset cite {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-style: normal;
  letter-spacing: 0.04em;
  color: #8a5a3c;
}

/*
 * Le QR porte sa zone de silence de quatre modules : la taille ci-dessous est
 * donc celle de la boite, et le code lui-meme n'en occupe que les quatre
 * cinquiemes. C'est voulu — sans cette marge blanche, beaucoup de telephones
 * ne trouvent pas le code — mais cela veut dire qu'il faut la compter.
 */
.f-qr { display: block; flex: none; }


/* 5 — A · le flyer A6, quatre par feuille ================================ */

/* 105 × 148,5 mm : exactement la moitié de l'A4 dans les deux sens. Deux
   coupes, quatre flyers, aucune chute. */
.feuille--a6 {
  grid-template-columns: 105mm 105mm;
  grid-template-rows: 148.5mm 148.5mm;
}

.a6 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 9mm 8.5mm 7mm;
}

.a6 .f-kick { font-size: 6.4pt; margin-bottom: 3.2mm; }
.a6 .f-titre { font-size: 19.5pt; margin-bottom: 3.8mm; }
.a6 .f-lede { font-size: 8.1pt; margin-bottom: 4.2mm; }
.a6 .f-points { display: flex; flex-direction: column; gap: 1.5mm; margin-bottom: 4.4mm; }
.a6 .f-points li { font-size: 7.7pt; padding-left: 4.2mm; }
.a6 .f-points li::before { width: 1.4mm; height: 1.4mm; top: 1.4mm; }
.a6 .f-verset { margin-top: auto; padding: 0.5mm 0 0.5mm 3.5mm; }
.a6 .f-verset p { font-size: 8.4pt; }
.a6 .f-verset cite { font-size: 5.7pt; margin-top: 1.2mm; }
.a6 .f-gratuit {
  margin-top: 4.5mm;
  font-size: 6.4pt;
  padding: 1.8mm 0;
  border-top: 0.5mm solid #1b1917;
  border-bottom: 0.2mm solid #ded8cf;
}
/* Une seule marge automatique par carte, sur le verset : deux se partagent
   le blanc restant et plus rien ne tient au bas de la carte. */
.a6__pied { display: flex; align-items: flex-end; gap: 4mm; margin-top: 4mm; }
.a6 .f-qr { width: 21mm; height: 21mm; }
.a6 .f-url { font-size: 11pt; }
.a6__pied .f-fine { font-size: 6.2pt; margin-top: 0.8mm; }
.a6__mentions { font-size: 5.3pt; margin-top: 3mm; }


/* 6 — B · le marque-page, huit par feuille =============================== */

/* 52,5 × 148,5 mm : le quart de la largeur, la moitié de la hauteur. */
.feuille--marque {
  grid-template-columns: repeat(4, 52.5mm);
  grid-template-rows: 148.5mm 148.5mm;
}

.marque {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 7mm 6mm 6mm;
  border-top: 1.6mm solid #8a5a3c;
}

.marque .f-kick { font-size: 5.7pt; letter-spacing: 0.1em; margin-bottom: 2.6mm; }
.marque .f-titre { font-size: 13.2pt; margin-bottom: 3mm; }
.marque .f-lede { font-size: 6.6pt; margin-bottom: 3.6mm; }
.marque .f-points {
  display: flex;
  flex-direction: column;
  gap: 1.5mm;
  padding-top: 3mm;
  border-top: 0.2mm solid #ded8cf;
}
.marque .f-points li { font-size: 6.5pt; padding-left: 3.4mm; }
.marque .f-points li::before { width: 1.1mm; height: 1.1mm; top: 1.1mm; }
.marque .f-verset { margin-top: auto; padding: 0.5mm 0 0.5mm 2.8mm; }
.marque .f-verset p { font-size: 7.2pt; }
.marque .f-verset cite { font-size: 5.2pt; margin-top: 1mm; }
.marque__pied { margin-top: 5mm; padding-top: 4mm; text-align: center; }
.marque .f-qr { width: 23mm; height: 23mm; margin: 0 auto 2mm; }
.marque .f-url { font-size: 7.9pt; }
.marque .f-gratuit { font-size: 5.4pt; color: #6f685e; margin-top: 1.2mm; }


/* 7 — C · la carte de poche, dix par feuille ============================= */

/* 85 × 55 mm, le format d'une carte de visite : elle tient dans un
   portefeuille, et l'on peut en laisser une pile au fond de l'église. */
.feuille--carte {
  grid-template-columns: 85mm 85mm;
  grid-template-rows: repeat(5, 55mm);
  justify-content: center;
  align-content: center;
}

.carte {
  display: flex;
  gap: 4mm;
  overflow: hidden;
  padding: 6mm 6mm 5.5mm;
}

.carte__texte { display: flex; flex-direction: column; flex: 1 1 auto; }
.carte .f-kick { font-size: 5.6pt; margin-bottom: 2mm; }
.carte .f-titre { font-size: 12.6pt; margin-bottom: 2mm; }
.carte .f-lede { font-size: 6.3pt; }
.carte .f-url { font-size: 8.4pt; margin-top: auto; }
.carte .f-gratuit { font-size: 5.3pt; color: #6f685e; margin-top: 0.8mm; }
.carte .f-qr { width: 23mm; height: 23mm; align-self: center; }


/* 8 — D · le bandeau, trois par feuille ================================== */

/* 210 × 99 mm : toute la largeur de la feuille, le tiers de sa hauteur. Pour
   un panneau d'affichage, où il faut être lisible à deux mètres. */
.feuille--bandeau {
  grid-template-columns: 210mm;
  grid-template-rows: repeat(3, 99mm);
}

.bandeau {
  display: flex;
  overflow: hidden;
}

.bandeau__texte {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 11mm 9mm 9mm 14mm;
}

.bandeau .f-kick { font-size: 7.4pt; margin-bottom: 4mm; }
.bandeau .f-titre { font-size: 27pt; max-width: 122mm; margin-bottom: 4.5mm; }
.bandeau .f-lede { font-size: 9.4pt; max-width: 118mm; margin-bottom: 5mm; }
.bandeau .f-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2mm 6mm;
  max-width: 125mm;
}
.bandeau .f-points li { font-size: 8.2pt; padding-left: 4.4mm; }
.bandeau .f-points li::before { width: 1.6mm; height: 1.6mm; top: 1.5mm; }
.bandeau__mentions { font-size: 6pt; margin-top: auto; padding-top: 4mm; }

.bandeau__carton {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 62mm;
  padding: 9mm 7mm;
  background: #f3f0ea;
  border-left: 0.2mm solid #ded8cf;
  text-align: center;
}

/* Le code porte sa zone de silence blanche : posee telle quelle sur le
   carton beige, elle ressemblait a un defaut d'impression. Encadree, elle
   devient une etiquette. */
.bandeau .f-qr {
  width: 34mm;
  height: 34mm;
  padding: 2mm;
  margin-bottom: 3.5mm;
  background: #fff;
  border: 0.2mm solid #e0d8cc;
}
.bandeau .f-url { font-size: 12.4pt; }
.bandeau .f-gratuit { font-size: 6.6pt; color: #46423c; margin-top: 2mm; }
.bandeau__carton .f-fine { font-size: 6.2pt; margin-top: 3mm; }


/* 9 — L'impression ======================================================= */

@media print {
  /*
   * Aucune marge : les traits de coupe et les formats sont calculés sur la
   * feuille entière. Les navigateurs ajoutent sinon un demi-centimètre qui
   * décale tout et rend les repères faux.
   */
  @page { size: A4; margin: 0; }

  /*
   * Tout ce qui entoure la feuille est remis a zero.
   *
   * Une feuille fait exactement 297 mm : le moindre reste de marge, de gouttiere
   * ou de hauteur minimale la pousse de quelques millimetres et fait sortir une
   * seconde page vide de l'imprimante. C'est arrive, et cela ne se voit pas a
   * l'ecran.
   */
  html, body {
    margin: 0;
    padding: 0;
    background: #fff;
  }

  /* .page et non main : la classe l'emporte sur le nom de la balise, et c'est
     le rembourrage de « main.page » qui ajoutait les deux centimetres de trop. */
  main, .page, .wrap, .flyers__tete {
    width: auto;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  /*
   * Tout ce qui n'est pas le contenu disparaît — par la négative, et non en
   * nommant l'en-tête, le pied de page, la bannière d'installation et
   * l'invitation aux notifications une par une. Le jour où une bannière de
   * plus s'ajoutera au gabarit, elle ne sortira pas de l'imprimante au milieu
   * d'une planche de flyers.
   */
  body > *:not(main) { display: none !important; }

  /* Et dans le contenu, tout ce qui explique plutôt que d'imprimer. */
  .flyers__tete, .flyers__intro, .flyers__partage,
  .modele__entete, .modele__actions { display: none !important; }

  .modele { margin: 0; padding: 0; border: 0; }

  /* Le cadre d'aperçu n'existe plus : la feuille reprend sa taille réelle. */
  /*
   * Le cadre reprend la taille de la feuille, a un cheveu pres.
   *
   * 297 mm valent 842,27 points ; la page A4 que compose le navigateur en fait
   * 841,92. Une feuille haute de 297 mm pile depasse donc d'un tiers de point,
   * et ce tiers de point suffit a faire sortir une seconde feuille blanche de
   * l'imprimante. Le cadre est donc rogne de deux dixiemes de millimetre, et
   * coupe ce qui depasse — il n'y a rien a cet endroit, la derniere rangee s'y
   * arrete exactement.
   */
  .cadre {
    --z: 1;
    width: 210mm;
    height: 296.8mm;
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    break-after: page;
  }

  .cadre:last-of-type { break-after: auto; }

  .feuille { transform: none; }

  /*
   * « Imprimer ce modèle seul » : le script pose .n-imprime-que sur <html> et
   * .est-choisi sur la section demandée. Sans cela — un Ctrl+P ordinaire —
   * les quatre modèles sortent, un par feuille, ce qui est exactement ce
   * qu'on veut quand on les découvre.
   */
  .n-imprime-que .modele { display: none; }
  .n-imprime-que .modele.est-choisi { display: block; }
  .n-imprime-que .modele.est-choisi .cadre { break-after: auto; }
}