/* « 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;
}

@font-face {
  font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/anton-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: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/anton-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;
}
@font-face {
  font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/courier-prime-bold-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: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/courier-prime-bold-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; --p-contour: transparent;
}
[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; --p-contour: #51634d;
}
/* « Poudre » : le rose du grand cœur (7 nov. 2026) — un papier rosé, une encre brun-bordeaux, un fil de la même teinte. */
[data-style="Poudre"] {
  --p-fond: #f8e9e6; --p-encre: #4a2428; --p-doux: #8a5a5e; --p-pola: #fdf6f4; --p-legende: #4a2428; --p-ombre: 74, 36, 40;
  --p-ton-0: #efd3cf; --p-ton-1: #e8c4c0; --p-ton-2: #f3dcd8; --p-ton-3: #e2bab6; --p-ton-4: #ecccc8; --p-ton-5: #e6c1bd; --p-poste-1: #b4473a; --p-poste-2: #2c5282; --p-contour: #b9757c;
}
[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; --p-contour: #d9b86c;
}

[data-style="Rose électrique"] {
  --p-fond: #0a0510; --p-encre: #fff1fb; --p-doux: #ffb3e6; --p-pola: #fdfcf9; --p-legende: #3a2c20; --p-ombre: 4, 0, 10;
  --p-ton-0: #2a0f2c; --p-ton-1: #3a1240; --p-ton-2: #220b28; --p-ton-3: #4a1650; --p-ton-4: #301036; --p-ton-5: #40144a; --p-poste-1: #ff2bb5; --p-poste-2: #8a6bff;
  --t-c1: #fff4fc; --t-c2: #ff8ad6; --t-c3: #b3157c; --t-c4: #ff9fe0; --t-c5: #fff0fa; --t-bord: #fde7f8; --t-sombre: #3a0a30;
  --t-halo: 255, 43, 181; --t-halo2: 150, 60, 255; --t-eclair: #fff0fb; --t-eclair-rgb: 255, 120, 220;
}
[data-style="Or flamme"] {
  --p-fond: #0b0603; --p-encre: #fff3d6; --p-doux: #ffd08a; --p-pola: #fdfcf9; --p-legende: #3a2c20; --p-ombre: 10, 4, 0;
  --p-ton-0: #2e1a0a; --p-ton-1: #3d2208; --p-ton-2: #271406; --p-ton-3: #4a280a; --p-ton-4: #331c08; --p-ton-5: #432608; --p-poste-1: #ff8a1e; --p-poste-2: #ffd24a;
  --t-c1: #fff6d0; --t-c2: #ffb84a; --t-c3: #c4551a; --t-c4: #ffd27a; --t-c5: #fff5da; --t-bord: #fff0c8; --t-sombre: #3a1604;
  --t-halo: 255, 140, 30; --t-halo2: 255, 60, 20; --t-eclair: #fff3b0; --t-eclair-rgb: 255, 190, 60;
}
[data-style="Bleu orage"] {
  --p-fond: #04081a; --p-encre: #eaf0ff; --p-doux: #a9bdff; --p-pola: #fdfcf9; --p-legende: #3a2c20; --p-ombre: 0, 2, 12;
  --p-ton-0: #0f1a3a; --p-ton-1: #142250; --p-ton-2: #0b1430; --p-ton-3: #1a2a64; --p-ton-4: #101c42; --p-ton-5: #172458; --p-poste-1: #4a6cff; --p-poste-2: #ffd84a;
  --t-c1: #ffe27a; --t-c2: #ffb52e; --t-c3: #3e5cf0; --t-c4: #86a2ff; --t-c5: #cfdcff; --t-bord: #e8f0ff; --t-sombre: #060d3a;
  --t-halo: 70, 110, 255; --t-halo2: 40, 70, 200; --t-eclair: #f2f6ff; --t-eclair-rgb: 140, 170, 255;
}
[data-style="Vert acide"] {
  --p-fond: #040a05; --p-encre: #efffe0; --p-doux: #b8f07a; --p-pola: #fdfcf9; --p-legende: #3a2c20; --p-ombre: 0, 8, 2;
  --p-ton-0: #0f2a12; --p-ton-1: #123612; --p-ton-2: #0b2210; --p-ton-3: #17481a; --p-ton-4: #10300f; --p-ton-5: #144016; --p-poste-1: #b7ff2e; --p-poste-2: #2fd36a;
  --t-c1: #f6ffd2; --t-c2: #b7ff2e; --t-c3: #1c8f2a; --t-c4: #7dff9a; --t-c5: #ecfff0; --t-bord: #f2ffe4; --t-sombre: #052a0c;
  --t-halo: 80, 235, 70; --t-halo2: 20, 160, 90; --t-eclair: #f4ffcf; --t-eclair-rgb: 170, 255, 80;
}

/* ── Les quatre manèges (7 nov. 2026) ──
 * « Rouge et or », « Bleu et or » et « Rose pastel » sont les trois ambiances des nacelles (les `--m-*` : toit, frise, nacelles, ciel) ; « Moutarde » est le
 * papier des billets ; la foire de nuit reprend les couleurs de lueur du collage (« Rose électrique »…) et le manège vu d'en haut les papiers (« Poudre »…). */
[data-style="Rouge et or"] {
  --p-fond: #f3e6cc; --p-encre: #7d1a22; --p-doux: #1f5b57; --p-pola: #f6ecd6; --p-legende: #3a2c20; --p-ombre: 60, 30, 20;
  --p-ton-0: #ece0c4; --p-ton-1: #e3d4b3; --p-ton-2: #f1e6cc; --p-ton-3: #dccaa4; --p-ton-4: #e7d9ba; --p-ton-5: #e0cfab; --p-contour: transparent;
  --m-a: #b3282d; --m-b: #f6ecd6; --m-or: #d9a441; --m-or-clair: #e8c778; --m-profond: #7d1a22; --m-n0: #1f6f6a; --m-n1: #b3282d; --m-n2: #d9a441;
  --m-ciel1: #cfe6df; --m-ciel2: #f7d9b8; --m-poteau: #b78a2c; --m-torsade: #f1d684; --m-socle: #5a3a2a; --m-halo: 255, 224, 138; --m-ampoule: #fff3b8;
}
[data-style="Bleu et or"] {
  --p-fond: #f1e7d2; --p-encre: #14284d; --p-doux: #2b5a7a; --p-pola: #f6ecd6; --p-legende: #14284d; --p-ombre: 20, 40, 77;
  --p-ton-0: #dde5ee; --p-ton-1: #cfdbe8; --p-ton-2: #e6ecf3; --p-ton-3: #c3d2e2; --p-ton-4: #d6e0ea; --p-ton-5: #c9d6e4; --p-contour: transparent;
  --m-a: #1f3f73; --m-b: #f6ecd6; --m-or: #d9a441; --m-or-clair: #e8c778; --m-profond: #14284d; --m-n0: #2b6f9e; --m-n1: #1f3f73; --m-n2: #d9a441;
  --m-ciel1: #dbe7f2; --m-ciel2: #f4e4c8; --m-poteau: #b78a2c; --m-torsade: #f1d684; --m-socle: #3a2f3a; --m-halo: 255, 224, 138; --m-ampoule: #fff3b8;
}
[data-style="Rose pastel"] {
  --p-fond: #fff1d6; --p-encre: #752c46; --p-doux: #3f6e5f; --p-pola: #fff6ef; --p-legende: #5a2a3a; --p-ombre: 90, 42, 58;
  --p-ton-0: #f5dde0; --p-ton-1: #efcfd4; --p-ton-2: #f9e7e8; --p-ton-3: #e9c4cb; --p-ton-4: #f1d6da; --p-ton-5: #ecc9cf; --p-contour: transparent;
  --m-a: #e58ea0; --m-b: #fff6ef; --m-or: #cf9a4a; --m-or-clair: #e6c28a; --m-profond: #752c46; --m-n0: #7fb8a3; --m-n1: #e58ea0; --m-n2: #f1c66a;
  --m-ciel1: #fde8ee; --m-ciel2: #fff1d6; --m-poteau: #c79a4b; --m-torsade: #f1dba8; --m-socle: #7a4a45; --m-halo: 255, 230, 160; --m-ampoule: #fff6cc;
}
[data-style="Moutarde"] {
  --p-fond: #e9b44c; --p-encre: #12423f; --p-doux: #5a3e12; --p-pola: #fbf1dc; --p-legende: #12423f; --p-ombre: 40, 26, 6;
  --p-ton-0: #efd9a8; --p-ton-1: #e6cc96; --p-ton-2: #f3e2bb; --p-ton-3: #dec088; --p-ton-4: #ead2a0; --p-ton-5: #e2c48e; --p-poste-1: #a81f1c; --p-poste-2: #12423f; --p-contour: transparent;
  --m-point: #c8932d;
}

/* ── 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__ph, .pm__fond { position: absolute; inset: .55cqw; display: block; width: calc(100% - 1.1cqw); height: calc(100% - 1.1cqw); max-width: none; }
/* Le cadre de la photo la rogne ; la photo y remplit tout et porte le cadrage du client (`--photo-zoom`, `--photo-x`, `--photo-y`,
 * posés par `styleCadrage`, `lib/cadrage-photo.js`) : le même geste que sur les affiches à une photo. Sans cadrage, la photo est
 * centrée comme avant (`--pm-py` : la hauteur à laquelle chaque mise en page la regarde). */
.pm__ph { overflow: hidden; --pm-py: 32%; }
.pm__ph img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--photo-x, 50%) var(--photo-y, var(--pm-py)); transform: scale(var(--photo-zoom, 1)); transform-origin: var(--photo-x, 50%) var(--photo-y, var(--pm-py)); }
.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 .pm__ph, .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%; }
/* Le cadrage se règle dans une fenêtre (`cadrage.css`) : le bouton se pose en bas à droite de la vignette. */
.pm-vignette__cadrer { position: absolute; right: .4rem; bottom: .4rem; }
.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 .pm__ph, .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 .pm__ph, .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 .pm__ph, .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; }

/* ── Le collage « tee-shirt » (6 nov. 2026) ──
 *
 * Un fond noir, une lueur de la couleur du style, des éclairs, un titre en chrome et les prénoms à la plume par-dessus, des photos
 * qui se chevauchent et se fondent. Tout est dégradé et tracé : aucun filtre flou (il coûterait cher à 300 dpi) et aucune image.
 * Les photos ne sont pas détourées : un masque ovale adoucit leurs bords et une lueur de la couleur du style les sépare. */
.pm[data-mise="tee"] {
  padding: 5cqw 8cqw; justify-content: flex-start; gap: 2cqw; isolation: isolate;
  background-color: var(--p-fond);
  background-image:
    radial-gradient(ellipse 80% 38% at 50% 64%, rgba(var(--t-halo), .62), transparent 74%),
    radial-gradient(ellipse 60% 22% at 50% 14%, rgba(var(--t-halo2), .42), transparent 72%);
}
.pm[data-mise="tee"] .pm__plan { flex: 1 1 0; min-height: 0; aspect-ratio: auto; margin-top: 0; }
.pm__eclairs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pm__eclair-halo, .pm__eclair, .pm__etincelle { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.pm__eclair-halo { stroke: rgba(var(--t-eclair-rgb), .5); stroke-width: 1.3; }
.pm__eclair { stroke: var(--t-eclair); stroke-width: .36; }
.pm__etincelle { fill: var(--t-eclair); stroke: none; }
.pm[data-mise="tee"] .pm__texte { z-index: 3; gap: 0; }
.pm[data-mise="tee"] .pm__titre {
  white-space: nowrap; overflow-wrap: normal; text-wrap: nowrap; text-transform: uppercase;
  font-family: "Playfair Display", Georgia, serif; font-weight: 900; line-height: .98; letter-spacing: -.005em;
  font-size: calc(21cqw * var(--pm-e-titre, 1));
  color: transparent; background: linear-gradient(180deg, var(--t-c1) 0%, var(--t-c2) 42%, var(--t-c3) 50%, var(--t-c4) 58%, var(--t-c5) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: .32cqw var(--t-bord); paint-order: stroke fill;
  filter: drop-shadow(0 .5cqw .5cqw rgba(var(--p-ombre), .65));
}
.pm[data-mise="tee"] .pm__signature {
  position: relative; z-index: 4; margin-top: -5.6cqw; transform: rotate(-5deg);
  white-space: nowrap; text-wrap: nowrap; overflow-wrap: normal;
  font-family: "Pinyon Script", "Sacramento", cursive; font-weight: 400; font-size: calc(11.5cqw * var(--pm-e-signature, 1)); line-height: 1.2;
  color: var(--t-c5);
  text-shadow: 0 0 .9cqw rgba(var(--t-halo), .95), 0 0 2.4cqw rgba(var(--t-halo), .7), 0 .35cqw .4cqw rgba(var(--p-ombre), .75);
}
.pm[data-mise="tee"] > .pm__ligne { color: var(--p-doux); letter-spacing: .3em; margin-top: auto; }
/* Les photos : un ovale qui s'estompe sur ses bords, et dessous la lueur du style. */
.pm[data-mise="tee"] .pm__c::before {
  content: ""; position: absolute; inset: -9% -12%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(var(--t-halo), .8), transparent 74%);
}
.pm[data-mise="tee"] .pm__c .pm__ph, .pm[data-mise="tee"] .pm__c .pm__fond {
  z-index: 1; inset: 0; width: 100%; height: 100%; --pm-py: 28%;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 58%, transparent 99%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 58%, transparent 99%);
}
.pm[data-mise="tee"] .pm__c img { filter: contrast(1.06) saturate(1.08); }
.pm[data-mise="tee"][data-nb="Oui"] .pm__c img { filter: grayscale(1) contrast(1.1); }

/* ── Le grand cœur et son texte (7 nov. 2026) ──
 *
 * Une photo découpée en un cœur au creux peu profond et à la pointe arrondie, puis un bloc
 * de texte à la façon d'un dictionnaire — le titre à la plume, « [Léa] nom », un filet, un message centré. Le contenu est calé en haut
 * (`flex-start`) : ce qui dépasse sort par le bas, là où l'éditeur le mesure. Le fil fin autour du cœur est celui du style (`--p-contour`,
 * transparent sur le papier blanc de la capture d'origine). Pas de filtre, tout est dégradé et tracé : rien ne coûte cher à 300 dpi. */
.pm[data-mise="coeurtexte"] { justify-content: flex-start; gap: 0; padding: 7cqw 8cqw 6cqw; background: var(--p-fond); }
.pm[data-mise="coeurtexte"] .pm__cadres { clip-path: polygon(50% 6%, 51.16% 5.96%, 52.24% 5.83%, 53.25% 5.64%, 54.22% 5.38%, 55.14% 5.06%, 56.04% 4.7%, 56.92% 4.31%, 57.81% 3.89%, 58.7% 3.45%, 59.62% 3%, 60.58% 2.55%, 61.59% 2.11%, 62.66% 1.69%, 63.81% 1.3%, 65.05% 0.94%, 66.38% 0.62%, 67.84% 0.36%, 69.41% 0.17%, 71.13% 0.04%, 73% 0%, 75.5% 0.07%, 77.89% 0.3%, 80.17% 0.67%, 82.34% 1.18%, 84.39% 1.84%, 86.33% 2.65%, 88.15% 3.59%, 89.85% 4.67%, 91.42% 5.89%, 92.88% 7.25%, 94.2% 8.74%, 95.39% 10.37%, 96.45% 12.13%, 97.38% 14.01%, 98.17% 16.03%, 98.82% 18.18%, 99.34% 20.45%, 99.7% 22.84%, 99.93% 25.36%, 100% 28%, 99.87% 31.71%, 99.51% 35.35%, 98.9% 38.92%, 98.08% 42.42%, 97.05% 45.86%, 95.81% 49.23%, 94.4% 52.54%, 92.8% 55.79%, 91.04% 58.99%, 89.13% 62.13%, 87.07% 65.21%, 84.88% 68.25%, 82.57% 71.24%, 80.16% 74.18%, 77.64% 77.08%, 75.04% 79.94%, 72.36% 82.75%, 69.63% 85.54%, 66.83% 88.28%, 64% 91%, 62.97% 91.95%, 61.99% 92.83%, 61.05% 93.66%, 60.14% 94.43%, 59.28% 95.15%, 58.46% 95.81%, 57.67% 96.42%, 56.91% 96.98%, 56.19% 97.48%, 55.5% 97.94%, 54.84% 98.34%, 54.21% 98.7%, 53.6% 99.02%, 53.02% 99.28%, 52.47% 99.51%, 51.94% 99.69%, 51.42% 99.83%, 50.93% 99.92%, 50.46% 99.98%, 50% 100%, 49.54% 99.98%, 49.07% 99.92%, 48.58% 99.83%, 48.06% 99.69%, 47.53% 99.51%, 46.98% 99.28%, 46.4% 99.02%, 45.79% 98.7%, 45.16% 98.34%, 44.5% 97.94%, 43.81% 97.48%, 43.09% 96.98%, 42.33% 96.42%, 41.54% 95.81%, 40.72% 95.15%, 39.86% 94.43%, 38.95% 93.66%, 38.01% 92.83%, 37.03% 91.95%, 36% 91%, 33.17% 88.28%, 30.38% 85.54%, 27.64% 82.75%, 24.96% 79.94%, 22.36% 77.08%, 19.84% 74.18%, 17.43% 71.24%, 15.12% 68.25%, 12.93% 65.21%, 10.88% 62.13%, 8.96% 58.99%, 7.2% 55.79%, 5.6% 52.54%, 4.19% 49.23%, 2.95% 45.86%, 1.92% 42.42%, 1.1% 38.92%, 0.49% 35.35%, 0.13% 31.71%, 0% 28%, 0.07% 25.36%, 0.3% 22.84%, 0.66% 20.45%, 1.18% 18.18%, 1.83% 16.03%, 2.62% 14.01%, 3.55% 12.13%, 4.61% 10.37%, 5.8% 8.74%, 7.13% 7.25%, 8.58% 5.89%, 10.15% 4.67%, 11.85% 3.59%, 13.67% 2.65%, 15.61% 1.84%, 17.66% 1.18%, 19.83% 0.67%, 22.11% 0.3%, 24.5% 0.07%, 27% 0%, 28.87% 0.04%, 30.59% 0.17%, 32.16% 0.36%, 33.62% 0.62%, 34.95% 0.94%, 36.19% 1.3%, 37.34% 1.69%, 38.41% 2.11%, 39.42% 2.55%, 40.38% 3%, 41.3% 3.45%, 42.19% 3.89%, 43.08% 4.31%, 43.96% 4.7%, 44.86% 5.06%, 45.78% 5.38%, 46.75% 5.64%, 47.76% 5.83%, 48.84% 5.96%); }
.pm[data-mise="coeurtexte"] .pm__plan { margin-top: 1.6cqw; }
.pm[data-mise="coeurtexte"] .pm__c .pm__ph, .pm[data-mise="coeurtexte"] .pm__c .pm__fond { inset: 0; width: 100%; height: 100%; --pm-py: 36%; }
.pm__contour { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--p-contour); stroke-linejoin: round; pointer-events: none; }
.pm__bloc { width: 84cqw; margin-top: 3.4cqw; display: flex; flex-direction: column; align-items: stretch; color: var(--p-encre); }
.pm[data-mise="coeurtexte"] .pm__titre, .pm[data-mise="coeurtexte"] .pm__signature { text-align: left; }
.pm[data-mise="coeurtexte"] .pm__titre { font-family: "Sacramento", "Pinyon Script", cursive; font-size: calc(10.4cqw * var(--pm-e-titre, 1)); line-height: 1.05; }
.pm[data-mise="coeurtexte"] .pm__signature {
  margin-top: 1.2cqw; font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: calc(4.1cqw * var(--pm-e-signature, 1)); line-height: 1.25; color: var(--p-encre);
}
.pm__filet { border: 0; margin: 2.4cqw 0 2.8cqw; height: .32cqw; width: 100%; background: var(--p-encre); }
.pm__message {
  text-align: center; text-wrap: pretty; overflow-wrap: break-word; font-family: "Playfair Display", Georgia, serif; font-weight: 400;
  font-size: calc(3.3cqw * var(--pm-e-message, 1)); line-height: 1.52; color: var(--p-encre);
}
.pm[data-mise="coeurtexte"][data-nb="Oui"] .pm__c img { filter: grayscale(1); }

/* Le formulaire du message : le compteur sous le champ, les idées en pastilles pleine largeur (cibles de 44 px). */
.pm-message__compte { margin: .4rem 0 0; font-size: 1.2rem; text-align: right; color: rgba(var(--color-foreground), .6); }
.pm-message__compte:empty { display: none; }
.pm-idees ol { list-style: none; padding-left: 0; }
.pm-idee {
  display: block; width: 100%; min-height: 4.4rem; padding: .9rem 1.2rem; text-align: left; font: inherit; font-size: 1.4rem; line-height: 1.4; cursor: pointer;
  color: inherit; background: transparent; border: .1rem solid rgba(var(--color-foreground), .25); border-radius: .8rem;
}
.pm-idee:hover { border-color: rgb(var(--color-foreground)); }
.pm-idee:focus-visible { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }


/* ── Les quatre manèges (7 nov. 2026) ──
 *
 * Toute la famille monte sur le manège : une scène dessinée (`.pm__scene`, écrite par `pelemele-calcul.mjs`, sans aucune couleur : des classes
 * `m-…` recolorées ici) et une tête ronde à chaque place. Le titre, le nom de la famille et la ligne sont du vrai texte autour de la scène. Les
 * ampoules clignotent de la foire sont les seules animations (coupées sous `prefers-reduced-motion`) ; la fabrication les fige. Aucun filtre. */
.pm__scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pm__c--rond .pm__ph, .pm__c--rond .pm__fond { inset: 0; width: 100%; height: 100%; border-radius: 50%; --pm-py: 30%; }
.pm[data-mise="nacelles"] .pm__c--rond .pm__ph, .pm[data-mise="nacelles"] .pm__c--rond .pm__fond { box-shadow: 0 0 0 .5cqw var(--m-or); }
.pm[data-mise="foire"] .pm__c--rond .pm__ph, .pm[data-mise="foire"] .pm__c--rond .pm__fond { box-shadow: 0 0 0 .4cqw var(--t-c1); }
.pm[data-mise="dessus"] .pm__c--rond .pm__ph, .pm[data-mise="dessus"] .pm__c--rond .pm__fond { box-shadow: 0 0 0 .45cqw var(--p-ton-1); }

/* Les nacelles : un manège de la Belle Époque vu de face. */
.pm[data-mise="nacelles"] { justify-content: center; gap: 2cqw; padding: 6cqw 6cqw 5cqw; background: linear-gradient(180deg, var(--m-ciel1) 0%, var(--m-ciel2) 100%); }
.pm[data-mise="nacelles"] .pm__titre { font-family: "Playfair Display", Georgia, serif; font-weight: 900; font-size: calc(8.6cqw * var(--pm-e-titre, 1)); letter-spacing: .01em; color: var(--m-profond); }
.pm[data-mise="nacelles"] .pm__signature { font-family: "Playfair Display", Georgia, serif; font-weight: 900; font-size: calc(7.2cqw * var(--pm-e-signature, 1)); color: var(--m-profond); margin-top: 1cqw; }
.pm[data-mise="nacelles"] .pm__ligne { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: calc(4.2cqw * var(--pm-e-ligne, 1)); letter-spacing: 0; text-transform: none; color: var(--p-doux); }
.m-toit-a { fill: var(--m-a); } .m-toit-b { fill: var(--m-b); } .m-feston { stroke: var(--m-or); stroke-width: 2; }
.m-toit-contour { fill: none; stroke: var(--m-or); stroke-width: 3; }
.m-or { fill: var(--m-or); } .m-or-clair { fill: var(--m-or-clair); } .m-frise { fill: var(--m-profond); }
.m-mat { stroke: var(--m-profond); stroke-width: 3; fill: var(--m-profond); }
.m-halo { fill: rgba(var(--m-halo), .45); } .m-ampoule { fill: var(--m-ampoule); stroke: var(--m-or); stroke-width: 1; }
.m-poteau { stroke: var(--m-poteau); stroke-width: 9; } .m-poteau-torsade { stroke: var(--m-torsade); stroke-width: 9; stroke-dasharray: 3 8; }
.m-damier { fill: url(#pm-damier); stroke: var(--m-profond); stroke-width: 2; } .m-damier-a { fill: var(--m-b); } .m-damier-b { fill: var(--m-a); } .m-socle { fill: var(--m-socle); }
.pm__nacelle { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.m-nacelle-corps { stroke: var(--m-profond); stroke-width: 2; vector-effect: non-scaling-stroke; fill: var(--m-n0); }
.m-n1 .m-nacelle-corps { fill: var(--m-n1); } .m-n2 .m-nacelle-corps { fill: var(--m-n2); }
.m-nacelle-filet { fill: none; stroke: var(--m-or); stroke-width: 3; vector-effect: non-scaling-stroke; } .m-n2 .m-nacelle-filet { stroke: var(--m-profond); }
.m-nacelle-bouton { fill: var(--m-or); } .m-n2 .m-nacelle-bouton { fill: var(--m-profond); }
.m-nacelle-rebord { fill: var(--m-b); stroke: var(--m-or); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.pm[data-mise="nacelles"] .pm__legende--plaque {
  position: absolute; left: 0; right: 0; bottom: auto; z-index: 2; border-radius: .5cqw; background: var(--m-b); border: .35cqw solid var(--m-or);
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; color: var(--m-profond); font-size: calc(var(--pm-w) * .029 * var(--pm-e-legende, 1)); padding: 0 .7cqw;
}

/* La foire de nuit : le manège allumé, les têtes dans une frise de lumières. */
.pm[data-mise="foire"] {
  justify-content: center; gap: 2cqw; padding: 6cqw 0; isolation: isolate; background-color: var(--p-fond);
  background-image: radial-gradient(ellipse 90% 34% at 50% 64%, rgba(var(--t-halo), .34), transparent 72%), radial-gradient(ellipse 70% 26% at 50% 10%, rgba(var(--t-halo2), .5), transparent 72%);
}
.pm[data-mise="foire"] .pm__titre {
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: calc(10.5cqw * var(--pm-e-titre, 1)); color: var(--t-c5);
  text-shadow: 0 0 .8cqw rgba(var(--t-halo), .95), 0 0 2.4cqw rgba(var(--t-halo), .75);
}
.pm[data-mise="foire"] .pm__signature {
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 500; font-size: calc(7cqw * var(--pm-e-signature, 1)); color: var(--t-c4); margin-top: 3cqw;
  text-shadow: 0 0 .7cqw rgba(var(--t-halo), .9), 0 0 2cqw rgba(var(--t-halo), .6);
}
.pm[data-mise="foire"] .pm__ligne { color: var(--p-doux); letter-spacing: .22em; }
.m-neon-halo { stroke-width: 10; opacity: .28; }
.m-etoile { fill: var(--t-c5); opacity: .75; }
.m-roue { fill: none; stroke: rgba(var(--t-halo2), .9); stroke-width: 3; } .m-roue line { stroke: rgba(var(--t-halo2), .9); stroke-width: 2; }
.m-cabine { fill: var(--t-c2); opacity: .8; }
.m-lampe { fill: var(--t-c1); } .m-lampe.m-c2 { fill: var(--t-c2); } .m-lampe.m-c3 { fill: var(--t-c4); }
.pm[data-mise="foire"] .m-toit-a { fill: rgba(var(--t-halo2), .5); } .pm[data-mise="foire"] .m-toit-b { fill: rgba(var(--t-halo), .42); }
.m-neon-toit { fill: none; stroke: var(--t-c2); stroke-width: 3; stroke-linejoin: round; }
.pm[data-mise="foire"] .m-or { stroke: var(--t-c1); }
.m-tableau { fill: var(--p-fond); stroke: var(--t-c2); stroke-width: 3; }
.m-plateau { fill: var(--t-c2); } .m-reflet { fill: rgba(var(--t-halo), .22); } .m-reflet-trait { fill: var(--t-c1); opacity: .35; }
.pm[data-mise="foire"] .pm__legende {
  position: absolute; left: -20%; right: -20%; top: calc(100% + 2.4cqw); bottom: auto; height: auto; overflow: visible;
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 500; color: var(--t-c4); font-size: calc(var(--pm-w) * .03 * var(--pm-e-legende, 1));
  text-shadow: 0 0 .5cqw rgba(var(--t-halo), .9);
}
.tw0 { animation: tw 1.8s ease-in-out infinite; } .tw1 { animation: tw 1.8s ease-in-out .9s infinite; }
@keyframes tw { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .tw0, .tw1 { animation: none; } }

/* Les billets : un billet de manège par personne, sous l'auvent d'un stand. */
.pm[data-mise="billets"] {
  justify-content: flex-start; gap: 1.6cqw; padding: 18cqw 6cqw 0; background-color: var(--p-fond);
  background-image: radial-gradient(circle, var(--m-point) 1.7px, transparent 2.2px); background-size: 18px 18px;
}
.pm[data-mise="billets"]::before, .pm[data-mise="billets"]::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 0; background: repeating-linear-gradient(90deg, var(--p-poste-1) 0 10cqw, var(--p-pola) 10cqw 20cqw);
}
.pm[data-mise="billets"]::before { top: 0; height: 9cqw; border-bottom: .5cqw solid var(--p-legende); }
.pm[data-mise="billets"]::after {
  top: 9cqw; height: 5cqw; -webkit-mask: radial-gradient(circle 5cqw at 5cqw 0, black 99%, transparent 100%) 0 0 / 10cqw 5cqw repeat-x; mask: radial-gradient(circle 5cqw at 5cqw 0, black 99%, transparent 100%) 0 0 / 10cqw 5cqw repeat-x;
}
.pm[data-mise="billets"] .pm__plan { margin-top: auto; }
.pm[data-mise="billets"] .pm__titre {
  font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; font-size: calc(13cqw * var(--pm-e-titre, 1)); color: var(--p-poste-1);
  text-shadow: .6cqw .6cqw 0 var(--p-legende);
}
.pm[data-mise="billets"] .pm__signature {
  font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .03em; font-size: calc(5.6cqw * var(--pm-e-signature, 1)); color: var(--p-pola);
  width: calc(100% + 12cqw); margin: auto -6cqw 0; padding: 2.2cqw 0; background: var(--p-poste-1); border-top: .5cqw solid var(--p-legende); border-bottom: .5cqw solid var(--p-legende);
}
.pm[data-mise="billets"] .pm__ligne { font-family: "Courier Prime", ui-monospace, monospace; font-weight: 700; color: var(--p-doux); letter-spacing: .16em; margin: 1.6cqw 0 2cqw; }
.pm__billet {
  position: absolute; inset: 5% 3%; display: block; background: var(--p-pola); border: .35cqw solid var(--p-legende); border-radius: 1.2cqw; box-shadow: .5cqw .6cqw 0 rgba(var(--p-ombre), .22);
}
.pm__billet::before { content: ""; position: absolute; inset: 4%; border: .2cqw dashed var(--p-poste-1); border-radius: .8cqw; pointer-events: none; }
.pm__billet::after { content: ""; position: absolute; left: 52%; top: 8%; bottom: 8%; border-left: .25cqw dashed var(--p-legende); pointer-events: none; }
.pm__billet-photo { position: absolute; left: 4%; top: 11%; height: 78%; aspect-ratio: 1; display: block; }
.pm__billet-photo .pm__rond { position: absolute; inset: 0; display: block; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 .4cqw var(--p-poste-1); }
.pm__billet-photo .pm__ph, .pm__billet-photo .pm__fond { inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.pm__billet-no { position: absolute; left: 56%; top: 14%; right: 6%; }
.pm__billet-no::before {
  content: "N° " attr(data-no); font-family: "Courier Prime", ui-monospace, monospace; font-weight: 700; color: var(--p-poste-1); letter-spacing: .08em; font-size: calc(var(--pm-w) / var(--pm-col, 2) * .042);
}
.pm__billet-no::after { content: "★ ★ ★"; position: absolute; right: 0; top: 0; color: var(--p-poste-1); font-size: calc(var(--pm-w) / var(--pm-col, 2) * .036); letter-spacing: .1em; }
.pm[data-mise="billets"] .pm__legende {
  left: 56%; right: 5%; top: 34%; bottom: 20%; justify-content: flex-start; font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .02em;
  color: var(--p-legende); font-size: calc(var(--pm-w) / var(--pm-col, 2) * .105 * var(--pm-e-legende, 1));
}

/* Vu d'en haut : un manège rond, la famille en cercle autour du toit. */
.pm[data-mise="dessus"] { justify-content: center; gap: 2cqw; padding: 6cqw 5cqw; background: var(--p-fond); }
.pm[data-mise="dessus"] .pm__titre { font-family: "Playfair Display", Georgia, serif; font-weight: 600; font-size: calc(8.4cqw * var(--pm-e-titre, 1)); color: var(--p-encre); margin-bottom: 1cqw; }
.pm[data-mise="dessus"] .pm__signature { font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .3em; font-size: calc(3.1cqw * var(--pm-e-signature, 1)); color: var(--p-doux); margin-top: 3cqw; }
.pm[data-mise="dessus"] .pm__ligne { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: calc(3.8cqw * var(--pm-e-ligne, 1)); color: var(--p-encre); }
.m-plaque { fill: var(--p-ton-3); } .m-bord-a { fill: var(--p-ton-3); } .m-bord-b { fill: var(--p-ton-1); }
.m-quartier-a { fill: var(--p-ton-0); } .m-quartier-b { fill: var(--p-ton-2); } .m-lisere { fill: none; stroke: var(--p-pola); stroke-width: 5; } .m-point { fill: var(--p-pola); }
.m-toit-fond { fill: var(--p-pola); } .pm[data-mise="dessus"] .m-toit-a { fill: var(--p-poste-2); } .pm[data-mise="dessus"] .m-toit-b { fill: var(--p-pola); }
.pm[data-mise="dessus"] .m-mat { fill: var(--p-legende); stroke: none; } .m-mat-coeur { fill: var(--p-pola); }
.pm[data-mise="dessus"] .pm__c--rond::before { content: ""; position: absolute; inset: -14%; border-radius: 50%; background: var(--p-pola); }
.pm[data-mise="dessus"] .pm__legende {
  position: absolute; left: -7%; right: -7%; top: auto; bottom: -8%; height: 24%; border-radius: 99cqw; padding: 0 .8cqw; z-index: 3; background: var(--p-pola); border: .25cqw solid var(--p-legende); z-index: 2;
  font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; color: var(--p-legende); font-size: calc(var(--pm-w) * .0235 * var(--pm-e-legende, 1));
}
.pm__c--rond .pm__legende:empty { display: none; }