/* « Pêle-mêle photos » (30 oct. 2026) : plusieurs photos du client sur une affiche — cœur, grille, polaroïds, ou autour
 * d'une définition de dictionnaire.
 *
 * Quatre styles, un seul balisage (`[data-style]`) : le papier, l'encre des textes, le cadre des polaroïds et les tons des
 * cases vides. Les photos gardent leurs couleurs ; seul le choix « noir et blanc » les change, par un filtre que la
 * fabrication rejoue. Pinyon Script, Cormorant Garamond, Playfair Display et Montserrat sont déjà déclarées par
 * `theme.css` ; Caveat (la légende d'un polaroïd) est déclarée ici, embarquée comme les autres. Rien à télécharger chez un tiers.
 *
 * **Les couleurs sont celles du produit** (point 6 quater) et vivent ici, en tête, jamais plus bas : un test
 * refuse toute valeur littérale après la première règle `.pm`. */

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/caveat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/caveat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

[data-style="Blanc"] {
  --p-fond: #ffffff; --p-encre: #1b1612; --p-doux: #6a625a; --p-pola: #fdfcf9; --p-legende: #3a2c20; --p-ombre: 40, 30, 20;
  --p-ton-0: #ece8e1; --p-ton-1: #dfd9cf; --p-ton-2: #f3efe8; --p-ton-3: #d8d2c6; --p-ton-4: #e8e2d8; --p-ton-5: #e2dccf; --p-poste-1: #c2453d; --p-poste-2: #2f5b99;
}
[data-style="Écru"] {
  --p-fond: #f6efe2; --p-encre: #3a2c20; --p-doux: #75654f; --p-pola: #fdfaf2; --p-legende: #3a2c20; --p-ombre: 58, 44, 32;
  --p-ton-0: #e8dcc6; --p-ton-1: #dccdb3; --p-ton-2: #efe4cf; --p-ton-3: #d4c4a8; --p-ton-4: #e3d6bd; --p-ton-5: #dacab0; --p-poste-1: #b4473a; --p-poste-2: #2c5282;
}
[data-style="Sauge"] {
  --p-fond: #e8eee4; --p-encre: #2c3a2a; --p-doux: #51634d; --p-pola: #fbfdf9; --p-legende: #2c3a2a; --p-ombre: 44, 58, 42;
  --p-ton-0: #d3dccd; --p-ton-1: #c4d0bd; --p-ton-2: #dde5d7; --p-ton-3: #b9c7b1; --p-ton-4: #ccd8c5; --p-ton-5: #c0cdb8; --p-poste-1: #a8473e; --p-poste-2: #2f5c7d;
}
[data-style="Nuit"] {
  --p-fond: #13233b; --p-encre: #f3eddf; --p-doux: #c3bba8; --p-pola: #f6f1e6; --p-legende: #2a2118; --p-ombre: 4, 10, 20;
  --p-ton-0: #243a5a; --p-ton-1: #2d4668; --p-ton-2: #1d3150; --p-ton-3: #34506f; --p-ton-4: #283f5f; --p-ton-5: #30486a; --p-poste-1: #e0574d; --p-poste-2: #6a9be0;
}

/* ── L'affiche ──
 *
 * Tout est en `cqw` : l'affiche se lit sur sa propre largeur. La boîte des photos garde le rapport de son dessin
 * (`--pm-ratio`) et prend la largeur que le serveur lui donne (`--pm-w`). Chaque case y est posée en pour cent. Le
 * texte autour se resserre (`--pm-e-*`, posé par l'éditeur) plutôt que de passer à la ligne ou de déborder. */
.pm {
  --fond: var(--p-fond); --texte: var(--p-encre);
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw;
  padding: 6cqw 5cqw; line-height: 1.2; font-family: "Montserrat", system-ui, sans-serif;
}
.pm :where(p, ol, li) { margin: 0; padding: 0; }
.pm [hidden] { display: none !important; }
/* L'exemple est montré en pleine couleur ; la classe reste, la fabrication le masque. */
.pm .affiche-exemple { opacity: 1; }

.pm__titre, .pm__signature {
  width: 100%; text-align: center; white-space: nowrap; font-family: "Pinyon Script", "Sacramento", cursive; font-weight: 400; line-height: 1.25; color: var(--p-encre);
}
.pm__titre { font-size: calc(10.5cqw * var(--pm-e-titre, 1)); }
.pm__signature { font-size: calc(6.4cqw * var(--pm-e-signature, 1)); }
.pm__ligne {
  width: 100%; text-align: center; white-space: nowrap; font-size: calc(2.3cqw * var(--pm-e-ligne, 1)); font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: var(--p-doux);
}

/* Le bloc de définition : le mot, sa prononciation et sa nature, puis les sens numérotés — la page d'un dictionnaire. */
.pm__def { width: 84cqw; color: var(--p-encre); border-bottom: .3cqw solid var(--p-doux); padding-bottom: 2.4cqw; }
.pm__def-mot { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 10cqw; line-height: 1.1; letter-spacing: -.01em; }
.pm__def-meta { margin-top: .8cqw !important; font-size: 3.1cqw; color: var(--p-doux); }
.pm__def-phon { font-family: "Montserrat", system-ui, sans-serif; letter-spacing: .02em; }
.pm__def-meta i { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.12em; margin-left: 1.2cqw; }
.pm__def-sens { margin-top: 2.2cqw !important; padding-left: 5.2cqw !important; font-family: "Cormorant Garamond", Georgia, serif; font-size: 3.4cqw; line-height: 1.26; display: grid; gap: 1cqw; }
.pm__def-sens li::marker { font-family: "Playfair Display", Georgia, serif; font-weight: 700; }

/* La boîte des photos : au rapport du dessin ; chaque case est posée en pour cent (style en ligne, écrit par le module). */
.pm__plan { position: relative; flex: none; width: var(--pm-w); aspect-ratio: var(--pm-ratio); }
.pm__cadres { position: absolute; inset: 0; }
/* Le cœur, et le cœur en quatre : la mosaïque est rognée par la courbe (le même polygone que `COEUR_CSS`, `pelemele-calcul.mjs`, un test les compare). */
.pm[data-mise^="coeur"] .pm__cadres { clip-path: polygon(50% 23.92%, 50.01% 23.72%, 50.06% 23.15%, 50.19% 22.21%, 50.45% 20.94%, 50.87% 19.38%, 51.48% 17.58%, 52.3% 15.59%, 53.36% 13.48%, 54.68% 11.33%, 56.25% 9.19%, 58.08% 7.14%, 60.15% 5.25%, 62.46% 3.57%, 64.98% 2.16%, 67.68% 1.07%, 70.52% 0.34%, 73.47% 0%, 76.48% 0.07%, 79.49% 0.55%, 82.48% 1.44%, 85.37% 2.74%, 88.12% 4.41%, 90.68% 6.45%, 93.01% 8.8%, 95.06% 11.44%, 96.79% 14.31%, 98.18% 17.39%, 99.18% 20.62%, 99.79% 23.96%, 100% 27.38%, 99.79% 30.83%, 99.18% 34.29%, 98.18% 37.74%, 96.79% 41.14%, 95.06% 44.49%, 93.01% 47.78%, 90.68% 51%, 88.12% 54.14%, 85.37% 57.22%, 82.48% 60.23%, 79.49% 63.18%, 76.48% 66.07%, 73.47% 68.91%, 70.52% 71.7%, 67.68% 74.43%, 64.98% 77.11%, 62.46% 79.72%, 60.15% 82.26%, 58.08% 84.71%, 56.25% 87.06%, 54.68% 89.28%, 53.36% 91.35%, 52.3% 93.25%, 51.48% 94.96%, 50.87% 96.45%, 50.45% 97.7%, 50.19% 98.69%, 50.06% 99.42%, 50.01% 99.85%, 50% 100%, 49.99% 99.85%, 49.94% 99.42%, 49.81% 98.69%, 49.55% 97.7%, 49.13% 96.45%, 48.52% 94.96%, 47.7% 93.25%, 46.64% 91.35%, 45.32% 89.28%, 43.75% 87.06%, 41.92% 84.71%, 39.85% 82.26%, 37.54% 79.72%, 35.02% 77.11%, 32.32% 74.43%, 29.48% 71.7%, 26.53% 68.91%, 23.52% 66.07%, 20.51% 63.18%, 17.52% 60.23%, 14.63% 57.22%, 11.88% 54.14%, 9.32% 51%, 6.99% 47.78%, 4.94% 44.49%, 3.21% 41.14%, 1.82% 37.74%, 0.82% 34.29%, 0.21% 30.83%, 0% 27.38%, 0.21% 23.96%, 0.82% 20.62%, 1.82% 17.39%, 3.21% 14.31%, 4.94% 11.44%, 6.99% 8.8%, 9.32% 6.45%, 11.88% 4.41%, 14.63% 2.74%, 17.52% 1.44%, 20.51% 0.55%, 23.52% 0.07%, 26.53% 0%, 29.48% 0.34%, 32.32% 1.07%, 35.02% 2.16%, 37.54% 3.57%, 39.85% 5.25%, 41.92% 7.14%, 43.75% 9.19%, 45.32% 11.33%, 46.64% 13.48%, 47.7% 15.59%, 48.52% 17.58%, 49.13% 19.38%, 49.55% 20.94%, 49.81% 22.21%, 49.94% 23.15%, 49.99% 23.72%); }
.pm__c { position: absolute; margin: 0; }
.pm__c img, .pm__fond { position: absolute; inset: .55cqw; display: block; width: calc(100% - 1.1cqw); height: calc(100% - 1.1cqw); max-width: none; object-fit: cover; object-position: 50% 32%; }
.pm[data-nb="Oui"] .pm__c img { filter: grayscale(1); }

/* Les polaroïds : un cadre clair, la photo carrée, une marge plus haute pour la légende, écrite en vrai texte. */
.pm__pola {
  position: absolute; inset: 4% 6%; display: block; background: var(--p-pola); box-shadow: 0 .3cqw 1cqw rgba(var(--p-ombre), .28);
}
.pm__pola img, .pm__pola .pm__fond { inset: auto; left: 6%; top: 5%; width: 88%; height: 72%; }
.pm__legende {
  position: absolute; left: 5%; right: 5%; top: 80%; bottom: 3%; display: flex; align-items: center; justify-content: center;
  overflow: hidden; white-space: nowrap; text-align: center; color: var(--p-legende);
  font-family: "Caveat", "Sacramento", cursive; font-weight: 700; line-height: 1;
  font-size: calc(var(--pm-w) / var(--pm-col, 3) * .175 * var(--pm-e-legende, 1));
}
.pm__legende:empty { display: none; }

/* Les cases vides : un ton par case, comme des photos qui attendent. Elles se cliquent (à l'écran seulement) pour
 * déposer une photo, et disparaissent à la fabrication avec tout exemple. */
.pm__fond { background: var(--p-ton-0); }
.pm__c--vide[data-ton="1"] .pm__fond { background: var(--p-ton-1); }
.pm__c--vide[data-ton="2"] .pm__fond { background: var(--p-ton-2); }
.pm__c--vide[data-ton="3"] .pm__fond { background: var(--p-ton-3); }
.pm__c--vide[data-ton="4"] .pm__fond { background: var(--p-ton-4); }
.pm__c--vide[data-ton="5"] .pm__fond { background: var(--p-ton-5); }
.pm__c--invite { cursor: pointer; }
/* Dans l'aperçu réduit du téléphone, la scène laisse passer le toucher : les cases n'y sont qu'un dessin. */
.affiche__scene--mini .pm__c--invite { pointer-events: none; }

/* ── Le formulaire ── */
.pm-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.pm-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pm-styles label {
  display: flex; flex-direction: column; align-items: center; gap: .5rem; cursor: pointer; margin: 0; min-height: 4.4rem;
  font-size: 1.4rem; font-weight: 600; text-align: center; line-height: 1.25;
  border: .15rem solid rgba(var(--color-foreground), .15); border-radius: .8rem; padding: .8rem .6rem;
}
.pm-styles input:checked + label { border-color: rgb(var(--color-foreground)); }
.pm-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
/* L'échantillon : le papier et une grille de quatre cases, aux couleurs du style. */
.pm-echantillon {
  display: block; width: 100%; max-width: 12rem; aspect-ratio: 3 / 2; border-radius: .4rem; overflow: hidden; pointer-events: none;
  background: linear-gradient(90deg, var(--p-ton-0) 0 45%, var(--p-fond) 45% 55%, var(--p-ton-3) 55% 100%) center / 70% 60% no-repeat, var(--p-fond);
  border: .1rem solid rgba(var(--color-foreground), .2);
}
.pm-alerte { margin: 0; padding: 1rem 1.2rem; border-radius: .6rem; border: .15rem solid rgba(var(--rouge), .5); background: rgb(var(--rouge-fond)); color: rgb(var(--rouge)); font-weight: 600; font-size: 1.4rem; }

/* Les photos déposées : une rangée de vignettes dans l'ordre des cases. L'ordre décide de la place de chacune ; une
 * vignette se retire, avance ou recule. Cibles de 44 px. */
.pm-photos { padding: 0; border: 0; margin: 0; min-width: 0; display: grid; gap: .8rem; }
.pm-photos legend { font-weight: 600; padding: 0; margin-bottom: .4rem; }
.pm-photos legend small { font-weight: 400; }
.pm-photos__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr)); gap: .8rem; }
.pm-photos__liste[hidden] { display: none; }
.pm-vignette { position: relative; display: grid; gap: .4rem; align-content: start; }
.pm-vignette__cadre { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: .6rem; background: rgba(var(--color-foreground), .08); }
.pm-vignette__cadre img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.pm-vignette--envoi .pm-vignette__cadre { opacity: .55; }
.pm-vignette__rang { position: absolute; top: .4rem; left: .4rem; min-width: 2.2rem; height: 2.2rem; padding: 0 .4rem; border-radius: 1.1rem; background: rgb(var(--color-foreground)); color: rgb(var(--color-background)); font-size: 1.2rem; font-weight: 700; line-height: 2.2rem; text-align: center; }
.pm-vignette__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
.pm-vignette__actions button { min-height: 4.4rem; padding: 0; border: .1rem solid rgba(var(--color-foreground), .25); border-radius: .6rem; background: transparent; color: inherit; font-size: 1.6rem; cursor: pointer; }
.pm-vignette__actions button[disabled] { opacity: .35; cursor: default; }
.pm-vignette__legende { width: 100%; min-height: 4.4rem; font-size: 1.6rem; padding: 0 .8rem; border-radius: .6rem; border: .1rem solid rgba(var(--color-foreground), .25); background: transparent; color: inherit; }
.pm-photos__bouton { width: 100%; min-height: 4.8rem; margin: 0; padding: 0 1.8rem; cursor: pointer; box-sizing: border-box; }
.pm-photos__bouton[hidden] { display: none; }
.pm-photos__retour:empty, .pm-photos__etat:empty { display: none; }
.pm-photos__etat { margin: 0; font-size: 1.4rem; font-weight: 600; }
.pm-nb { display: flex; gap: .8rem; }
.pm-nb input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pm-nb label { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 4.4rem; margin: 0; padding: .6rem 1rem; cursor: pointer; text-align: center; font-size: 1.4rem; font-weight: 600; border: .15rem solid rgba(var(--color-foreground), .15); border-radius: .8rem; }
.pm-nb input:checked + label { border-color: rgb(var(--color-foreground)); }
.pm-nb input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.pm-pistes { font-size: 1.4rem; margin-top: .4rem; }
.pm-pistes summary { cursor: pointer; font-weight: 600; min-height: 4.4rem; display: flex; align-items: center; }
.pm-pistes ol { margin: .4rem 0 0; padding-left: 2.2rem; display: grid; gap: .4rem; }
@media (min-width: 750px) { .pm-styles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Des mises en page qui racontent leur sujet (31 oct. 2026) ──
 *
 * Le voyage (des cartes postales « par avion »), la naissance (une carte au milieu des photos), les douze mois (un cadran),
 * une vie (un chemin en serpentin) et l'équipe (un trombinoscope de badges). Les couleurs viennent des variables de tête :
 * `--p-poste-1` et `--p-poste-2` sont le rouge et le bleu du liseré « par avion », propres à chaque papier. */

/* Le tracé qui relie ou entoure les photos rondes : le cadran des mois, le chemin d'une vie. Derrière les cases, sous leur anneau de papier. */
.pm__chemin { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--p-doux); pointer-events: none; }
.pm__rond { position: absolute; display: block; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 .8cqw var(--p-fond); background: var(--p-fond); }
.pm__rond img, .pm__rond .pm__fond { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

/* Le texte écrit dans la mise en page (la carte de naissance, le centre du cadran) : il peut passer à la ligne, il se resserre en hauteur. */
.pm__texte { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9cqw; text-align: center; }
.pm__texte .pm__titre, .pm__texte .pm__signature, .pm__texte .pm__ligne { white-space: normal; overflow-wrap: anywhere; text-wrap: balance; }

/* Douze mois : le mois 12 en haut, comme midi sur un cadran ; un numéro sur chaque photo ronde. */
.pm[data-mise="mois"] .pm__rond { inset: 1.2%; }
.pm__mois {
  position: absolute; right: -.4cqw; bottom: -.4cqw; min-width: 4.6cqw; height: 4.6cqw; border-radius: 2.3cqw; padding: 0 .5cqw;
  background: var(--p-encre); color: var(--p-fond); font-size: 2.5cqw; font-weight: 700; line-height: 4.6cqw; text-align: center;
  box-shadow: 0 0 0 .5cqw var(--p-fond); z-index: 2;
}
.pm[data-mise="mois"] .pm__texte .pm__titre { font-size: calc(7.6cqw * var(--pm-e-titre, 1)); line-height: 1.1; }
.pm[data-mise="mois"] .pm__texte .pm__signature { font-size: calc(5cqw * var(--pm-e-signature, 1)); line-height: 1.1; }
.pm[data-mise="mois"] .pm__texte .pm__ligne { font-size: calc(2.1cqw * var(--pm-e-ligne, 1)); letter-spacing: .2em; }

/* La naissance : une bande entre deux rangées de photos, comme la carte glissée dans un berceau. */
.pm[data-mise="naissance"] .pm__texte { background: rgba(var(--p-ombre), .08); border-block: .3cqw solid var(--p-doux); outline: .22cqw solid var(--p-doux); outline-offset: -1.3cqw; }
.pm[data-mise="naissance"] .pm__texte .pm__titre { font-size: calc(9.6cqw * var(--pm-e-titre, 1)); line-height: 1.05; }
.pm[data-mise="naissance"] .pm__texte .pm__signature { font-size: calc(5.2cqw * var(--pm-e-signature, 1)); line-height: 1.1; }
.pm[data-mise="naissance"] .pm__texte .pm__ligne { font-size: calc(2.3cqw * var(--pm-e-ligne, 1)); letter-spacing: .2em; }

/* Une vie : chaque étape est un rond, son âge dessous ; le chemin passe de rond en rond. */
.pm[data-mise="vie"] .pm__rond { left: 12%; top: 3%; width: 76%; aspect-ratio: 1; }
.pm[data-mise="vie"] .pm__legende {
  position: absolute; left: 0; right: 0; top: 79%; bottom: auto; height: 17%; display: flex; align-items: center; justify-content: center;
  color: var(--p-encre); font-size: calc(var(--pm-w) / var(--pm-col, 3) * .2 * var(--pm-e-legende, 1));
}
.pm[data-mise="vie"] .pm__c--vide .pm__legende { display: none; }

/* Le voyage : une carte postale — liseré « par avion », la photo, un timbre, un cachet, le lieu écrit sur la bande du bas. */
.pm__carte {
  position: absolute; inset: 4% 3%; display: block; padding: 1.1cqw;
  background: linear-gradient(var(--p-pola), var(--p-pola)) content-box,
    repeating-linear-gradient(-45deg, var(--p-poste-1) 0 1.2cqw, var(--p-pola) 1.2cqw 2cqw, var(--p-poste-2) 2cqw 3.2cqw, var(--p-pola) 3.2cqw 4cqw);
  box-shadow: 0 .3cqw 1cqw rgba(var(--p-ombre), .3);
}
.pm__carte img, .pm__carte .pm__fond { inset: auto; left: 2.6cqw; top: 2.6cqw; width: calc(100% - 5.2cqw); height: calc(79% - 2.6cqw); }
.pm__carte .pm__legende {
  position: absolute; left: 2.6cqw; right: 2.6cqw; top: auto; bottom: 1.2cqw; height: 17%; display: flex; align-items: center; justify-content: center;
  overflow: hidden; white-space: nowrap; color: var(--p-legende); font-family: "Caveat", "Sacramento", cursive; font-weight: 700; line-height: 1;
  font-size: calc(var(--pm-w) / var(--pm-col, 2) * .125 * var(--pm-e-legende, 1));
}
.pm__timbre {
  position: absolute; right: 4.4cqw; top: 4cqw; width: 6cqw; height: 7.2cqw; transform: rotate(4deg); outline: .5cqw dotted var(--p-pola); outline-offset: -.26cqw;
  background: radial-gradient(circle at 50% 38%, var(--p-poste-1) 0 1.2cqw, transparent 1.25cqw), linear-gradient(var(--p-ton-3), var(--p-ton-3)) 50% 50% / 80% 82% no-repeat, var(--p-pola);
  box-shadow: 0 .2cqw .6cqw rgba(var(--p-ombre), .4);
}
.pm__cachet {
  position: absolute; right: 8.6cqw; top: 6.4cqw; width: 7.4cqw; height: 7.4cqw; border: .3cqw solid rgba(var(--p-ombre), .7); border-radius: 50%; transform: rotate(-12deg);
  background: repeating-linear-gradient(0deg, transparent 0 1cqw, rgba(var(--p-ombre), .6) 1cqw 1.25cqw) 0 .5cqw / 100% 5.6cqw no-repeat;
}
.pm__c--vide .pm__timbre, .pm__c--vide .pm__cachet { display: none; }

/* L'équipe : un badge de salarié — un bandeau sombre percé de sa fente, la photo, le nom en capitales, la fonction à la main. */
.pm__badge {
  position: absolute; inset: 3% 5%; display: block; overflow: hidden; border-radius: 1.6cqw; background: var(--p-pola); box-shadow: 0 .3cqw 1cqw rgba(var(--p-ombre), .28);
}
.pm__badge::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 11%; background: var(--p-legende); }
.pm__fente { position: absolute; left: 50%; top: 3.4%; width: 26%; height: 3.4%; transform: translateX(-50%); border-radius: 1cqw; background: var(--p-pola); }
.pm__badge img, .pm__badge .pm__fond { inset: auto; left: 9%; top: 15%; width: 82%; height: 54%; }
.pm__badge .pm__legende {
  position: absolute; left: 4%; right: 4%; top: 71%; bottom: 3%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2em;
  overflow: hidden; white-space: nowrap; text-align: center; color: var(--p-legende); line-height: 1.05;
}
.pm__nom { font-family: "Montserrat", system-ui, sans-serif; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: calc(var(--pm-w) / var(--pm-col, 3) * .092 * var(--pm-e-legende, 1)); }
.pm__role { font-family: "Caveat", "Sacramento", cursive; font-weight: 700; font-style: normal; font-size: calc(var(--pm-w) / var(--pm-col, 3) * .14 * var(--pm-e-legende, 1)); }
.pm__nom:empty, .pm__role:empty { display: none; }