/* ═══════════════════════════ Le ticket de caisse ═══════════════════════════
 *
 * Servie **seulement** sur sa fiche (`views/product-affiche.liquid`) : une mise en page d'affiche n'a rien à
 * faire dans le chemin critique du reste du site.
 *
 * ── Un reçu d'une vie à deux, quatre mondes (7 nov. 2026) ──
 *
 * Le contenu et la structure ne bougent pas : des lignes « quantité · moment · prix », un total qui dit « TOUT »,
 * les jours et les week-ends comptés, un code-barres qui encode la date. Chaque style est un papier qu'on reconnaît
 * sans le nommer, **plein cadre** — un ticket blanc sur un mur blanc ne donne pas envie d'être accroché :
 * - **Thermique** (celui que la fiche ouvre) : le ticket posé sur un aplat outremer, bord déchiré, ombre portée, une
 *   ligne surlignée au feutre ;
 * - **Listing** : le papier continu à picots des années 80, bandes vertes et blanches, trous, pli en accordéon,
 *   encre de matrice de points ;
 * - **Carbone** : la facture manuscrite du commerçant, papier rose autocopiant, stylo bille bleu, un moment entouré
 *   à la main, tampon PAYÉ à l'encre violette ;
 * - **Manège** : une pile de tickets de fête foraine, un par moment, de toutes les couleurs, numérotés, tombés en
 *   éventail sur une toile verte ; le gros ticket du bas donne le total.
 *
 * **Aucune enseigne, aucun logo, aucune marque** : ni caisse, ni supermarché, ni compagnie.
 *
 * Polices servies par nous (point 2) : Courier Prime, Anton et Caveat (déjà embarquées pour d'autres affiches) et
 * DotGothic16 (récupérée une fois chez Google, seuls ses sous-ensembles latins ; notice dans `public/fonts/OFL.txt`).
 *
 * ── Les palettes ──
 *
 * **Ce sont des couleurs de produit, pas de charte** (point 6 quater) : en clair, en tête, par style. `[data-style]`
 * ne nomme pas `.tk` exprès, pour que les échantillons du formulaire se colorent avec les mêmes variables.
 */
@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: "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-20C4, 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: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/courier-prime-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: 400; font-display: swap;
  src: url("/fonts/courier-prime-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;
}
@font-face {
  font-family: "DotGothic16";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dotgothic16-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: "DotGothic16";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dotgothic16-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;
}

/* --k-fond : ce qui entoure ou porte le ticket ; --k-papier : le papier ; --k-encre : le texte ; --k-doux : le texte
   secondaire ; --k-accent : le total et ce qui se détache ; --k-trait : les filets ; --k-hl-fond / --k-hl-texte : la
   ligne surlignée ; --k-bic : le stylo bille (Carbone). Les cinq papiers du Manège (`--k-m1` à `--k-m6`) et leur
   encre (`--k-m1-t` …) sont plus bas, avec le style. */
[data-style="Thermique"] {
  --k-fond: #2433c4; --k-papier: #fbfaf5; --k-encre: #26262a; --k-doux: #55555c; --k-accent: #26262a; --k-trait: #26262a;
  --k-hl-fond: #d8ff2e; --k-hl-texte: #26262a;
  --k-police: "Courier Prime", "Courier New", monospace;
}
[data-style="Listing"] {
  --k-fond: #fdfdfa; --k-papier: #fdfdfa; --k-encre: #1b2c8c; --k-doux: #3f4da3; --k-accent: #b3261e; --k-trait: #1b2c8c;
  --k-hl-fond: #1b2c8c; --k-hl-texte: #ffffff; --k-bande: #d9eed6; --k-marge: #eff0e9; --k-trou: #26282a;
  --k-police: "DotGothic16", "Courier New", monospace;
}
[data-style="Carbone"] {
  --k-fond: #f6c8c0; --k-papier: #f6c8c0; --k-encre: #b3382c; --k-doux: #b3382c; --k-accent: #b3382c; --k-trait: #b3382c;
  --k-bic: #1d3a9e; --k-hl-fond: transparent; --k-hl-texte: #1d3a9e; --k-tampon: #5a36a6;
  --k-police: "Courier Prime", "Courier New", monospace;
}
[data-style="Manège"] {
  --k-fond: #0b5f58; --k-papier: #f4ecd8; --k-encre: #1d1d1f; --k-doux: #1d1d1f; --k-accent: #e23d3a; --k-trait: #1d1d1f;
  --k-hl-fond: #f6c026; --k-hl-texte: #b3261e;
  --k-m0: #f4ecd8; --k-m0-t: #1d1d1f; --k-m1: #e23d3a; --k-m1-t: #fbefe0; --k-m2: #f6c026; --k-m2-t: #1d1d1f;
  --k-m3: #f4a9bd; --k-m3-t: #3a0f1d; --k-m4: #2c61b8; --k-m4-t: #fbefe0; --k-m5: #8fd1b0; --k-m5-t: #0f2c22; --k-m6: #f4ecd8; --k-m6-t: #1d1d1f;
  --k-police: "Anton", Impact, "Arial Narrow", sans-serif;
}

/* ── L'affiche ──
 *
 * Tout est en `cqw`, et le texte passe par `--u` (un centième de la largeur, réduit par `--tk-t` quand le ticket
 * déborde : l'éditeur resserre de 1 à 0,6 par paliers, la fabrication retrouve la même valeur). **Un seul
 * balisage, quatre mondes** : les quatre en-têtes sont dans la page, la feuille n'en montre qu'un. Le relief (ombre
 * du ticket, de la pile) est porté par `.tk__cale`, jamais par `.affiche__affiche`, dont la fabrication retire
 * l'ombre : un cadre posé là disparaîtrait du tirage (point 11 sexagies quater). */
.tk {
  --tk-t: 1; --nb: 7;
  --u: calc(1cqw * var(--tk-t));
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--k-fond); color: var(--k-encre); font-family: var(--k-police); line-height: 1.3;
}
.tk :where(p, ul, ol) { margin: 0; padding: 0; }
.tk i { font-style: normal; }
.tk__cale { position: absolute; inset: 0; }
.tk__papier { position: absolute; inset: 0; }
.tk__lignes { list-style: none; display: grid; }
.tk__lignes li { display: grid; align-items: baseline; min-width: 0; }
.tk__lignes li > i { display: none; }
.tk__lignes .l { overflow-wrap: anywhere; min-width: 0; }
.tk__lignes .pr { text-align: right; white-space: nowrap; }
.tk .affiche-exemple { opacity: 1; }
/* Ce que chaque style ne montre pas. */
.tk__h, .tk__souche, .tk__tampon, .tk__lbl--ls, .tk__bc, .tk__date, .tk__merci, .tk__fin { display: none; }
.tk__tout { font-weight: 700; }
.tk__chiffres span + span::before { content: " · "; white-space: pre; }
.tk__tete :where(b) { font-weight: 700; }

/* ── 1. Thermique : le ticket posé sur un aplat ── */
.tk[data-style="Thermique"] { background: radial-gradient(120% 90% at 50% 25%, #3d50ee 0%, #2433c4 55%, #1b27a0 100%); }
.tk[data-style="Thermique"] .tk__cale {
  inset: auto; left: 50%; top: 50%; width: 78cqw; transform: translate(-50%, -50%) rotate(-1.4deg);
  filter: drop-shadow(0 2.2cqw 2.4cqw rgba(0, 0, 70, .5)) drop-shadow(0 .3cqw .5cqw rgba(0, 0, 40, .35));
}
.tk[data-style="Thermique"] .tk__papier {
  --z: 2.4cqw; position: relative; inset: auto;
  background: linear-gradient(90deg, rgba(0, 0, 0, .05), transparent 7%, transparent 93%, rgba(0, 0, 0, .06)), linear-gradient(#fcfbf6, #f1efe6);
  padding: calc(6.4 * var(--u)) calc(4 * var(--u)) calc(6.6 * var(--u));
  font-size: calc(2.6 * var(--u)); line-height: 1.5;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--z) 51% repeat-x,
                conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--z) 51% repeat-x;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--z) 51% repeat-x,
                conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--z) 51% repeat-x;
}
.tk[data-style="Thermique"] .tk__corps { position: relative; }
.tk[data-style="Thermique"] .tk__h--th { display: grid; justify-items: center; text-align: center; gap: .1cqw; padding-bottom: calc(2 * var(--u)); border-bottom: .3cqw dashed rgba(38, 38, 42, .75); margin-bottom: calc(1.2 * var(--u)); text-transform: uppercase; }
.tk[data-style="Thermique"] .tk__h--th b { font-size: calc(5.2 * var(--u)); letter-spacing: .06em; line-height: 1.15; overflow-wrap: anywhere; }
.tk[data-style="Thermique"] .tk__h--th span { letter-spacing: .14em; font-size: calc(2.3 * var(--u)); }
.tk[data-style="Thermique"] .tk__lignes { padding-bottom: calc(1.2 * var(--u)); border-bottom: .3cqw dashed rgba(38, 38, 42, .75); }
.tk[data-style="Thermique"] .tk__lignes li { grid-template-columns: calc(4.6 * var(--u)) 1fr auto; column-gap: calc(1.2 * var(--u)); padding: .35cqw calc(.8 * var(--u)); text-transform: uppercase; }
.tk[data-style="Thermique"] .tk__lignes .q { opacity: .7; }
.tk[data-style="Thermique"] .tk__lignes li.tk__hl { background: linear-gradient(transparent 10%, var(--k-hl-fond) 10% 90%, transparent 90%); margin-inline: calc(-1 * var(--u)); padding-inline: calc(1.8 * var(--u)); transform: rotate(-.5deg); font-weight: 700; }
.tk[data-style="Thermique"] .tk__total { text-transform: uppercase; display: flex; justify-content: space-between; align-items: baseline; margin-top: calc(1.2 * var(--u)); letter-spacing: .04em; font-weight: 700; }
.tk[data-style="Thermique"] .tk__lbl--autre { font-size: calc(5.4 * var(--u)); }
.tk[data-style="Thermique"] .tk__tout { font-size: calc(5.4 * var(--u)); }
.tk[data-style="Thermique"] .tk__chiffres { margin: .4cqw 0 calc(2.4 * var(--u)); text-align: center; letter-spacing: .1em; font-size: calc(2.3 * var(--u)); text-transform: uppercase; }
.tk[data-style="Thermique"] .tk__bc { display: block; height: calc(11 * var(--u)); width: 78%; margin: 0 auto; fill: #1d1d20; }
.tk[data-style="Thermique"] .tk__date { display: block; text-align: center; letter-spacing: .5em; font-size: calc(2.2 * var(--u)); margin: .8cqw 0 calc(2 * var(--u)); }
.tk[data-style="Thermique"] .tk__merci { display: block; text-align: center; letter-spacing: .1em; font-size: calc(2.3 * var(--u)); text-transform: uppercase; }

/* ── 2. Listing : le papier continu à picots ── */
.tk[data-style="Listing"] { background: repeating-linear-gradient(180deg, #fdfdfa 0 calc(16.8 * var(--u)), var(--k-bande) calc(16.8 * var(--u)) calc(33.6 * var(--u))); }
.tk[data-style="Listing"]::before, .tk[data-style="Listing"]::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 8.2cqw; z-index: 1;
  background:
    radial-gradient(circle at 50% 50%, var(--k-trou) 0 1.1cqw, #6f736c 1.2cqw 1.5cqw, transparent 1.6cqw) 0 2.2cqw / 8.2cqw 11.2cqw,
    var(--k-marge);
}
.tk[data-style="Listing"]::before { left: 0; border-right: .3cqw dashed #b4b9ad; }
.tk[data-style="Listing"]::after { right: 0; border-left: .3cqw dashed #b4b9ad; }
.tk[data-style="Listing"] .tk__cale::before { content: ""; position: absolute; left: 0; right: 0; top: 64%; height: 4cqw; z-index: 3; pointer-events: none;
  background: linear-gradient(transparent, rgba(0, 0, 0, .08) 46%, rgba(255, 255, 255, .55) 54%, transparent); }
.tk[data-style="Listing"] .tk__papier { z-index: 2; padding: calc(5.6 * var(--u)) 11cqw 0; font-size: calc(3.3 * var(--u)); line-height: calc(5.6 * var(--u)); text-shadow: .08cqw 0 0 currentColor; text-transform: uppercase; }
.tk[data-style="Listing"] .tk__h--ls { display: block; }
.tk[data-style="Listing"] .tk__h--ls p { margin: 0; }
.tk[data-style="Listing"] .tk__split { display: flex; justify-content: space-between; gap: calc(2 * var(--u)); }
.tk[data-style="Listing"] .tk__ls-cols { border-top: .3cqw dashed currentColor; margin-top: calc(1.4 * var(--u)); padding-top: calc(0.3 * var(--u)); }
.tk[data-style="Listing"] .tk__lignes li { grid-template-columns: calc(6 * var(--u)) 1fr auto; column-gap: calc(1.4 * var(--u)); }
.tk[data-style="Listing"] .tk__lignes li.tk__hl { color: var(--k-hl-texte); background: var(--k-hl-fond); margin-inline: calc(-1.4 * var(--u)); padding-inline: calc(1.4 * var(--u)); text-shadow: none; }
.tk[data-style="Listing"] .tk__lbl--ls { display: inline; }
.tk[data-style="Listing"] .tk__lbl--autre { display: none; }
.tk[data-style="Listing"] .tk__total { color: var(--k-accent); display: flex; justify-content: space-between; font-size: calc(4.2 * var(--u)); line-height: calc(11.2 * var(--u)); border-top: .5cqw double var(--k-accent); border-bottom: .5cqw double var(--k-accent); margin-top: calc(5.6 * var(--u)); }
.tk[data-style="Listing"] .tk__tout { font-weight: 400; }
.tk[data-style="Listing"] .tk__chiffres { display: flex; justify-content: space-between; }
.tk[data-style="Listing"] .tk__chiffres span + span::before { content: none; }
.tk[data-style="Listing"] .tk__fin { display: block; }
.tk[data-style="Listing"] .tk__bc { display: block; height: calc(16.8 * var(--u)); width: 70%; fill: var(--k-encre); }

/* ── 3. Carbone : la facture manuscrite ── */
.tk[data-style="Carbone"] { background: radial-gradient(90% 60% at 20% 15%, rgba(255, 255, 255, .35), transparent 60%), linear-gradient(180deg, #f8d2cb, #f3bdb4); }
.tk[data-style="Carbone"] .tk__souche { text-transform: uppercase; display: flex; position: absolute; left: 0; right: 0; top: 0; height: 11cqw; align-items: center; justify-content: space-between; padding: 0 7cqw;
  border-bottom: .35cqw dashed rgba(179, 56, 44, .7); font-size: calc(2.2 * var(--u)); letter-spacing: .12em; font-weight: 700; background: linear-gradient(180deg, rgba(255, 255, 255, .28), transparent); }
.tk[data-style="Carbone"] .tk__souche::before, .tk[data-style="Carbone"] .tk__souche::after { content: ""; position: absolute; top: 3.6cqw; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: #c9a79f; box-shadow: inset 0 .3cqw .5cqw rgba(0, 0, 0, .35); }
.tk[data-style="Carbone"] .tk__souche::before { left: 2cqw; }
.tk[data-style="Carbone"] .tk__souche::after { right: 2cqw; }
.tk[data-style="Carbone"] .tk__corps { position: absolute; inset: 11cqw 0 0; padding: calc(3.4 * var(--u)) 8cqw 0; }
.tk[data-style="Carbone"] .tk__h--cb { display: block; }
.tk[data-style="Carbone"] .tk__cb-top { display: flex; justify-content: space-between; align-items: baseline; }
.tk[data-style="Carbone"] .tk__cb-top b { text-transform: uppercase; font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: calc(13 * var(--u)); line-height: 1; letter-spacing: .02em; }
.tk[data-style="Carbone"] .tk__cb-top span { font-weight: 700; font-size: calc(3 * var(--u)); letter-spacing: .1em; }
.tk[data-style="Carbone"] .tk__cb-meta { display: flex; justify-content: space-between; gap: calc(2 * var(--u)); margin-top: calc(2.4 * var(--u)); font-size: calc(2.6 * var(--u)); letter-spacing: .08em; text-transform: uppercase; }
.tk[data-style="Carbone"] .tk__main { font-family: "Caveat", "Segoe Script", cursive; font-size: calc(5 * var(--u)); color: var(--k-bic); text-transform: none; letter-spacing: 0; font-weight: 700; text-decoration: none; border-bottom: .25cqw solid rgba(179, 56, 44, .5); padding: 0 calc(1.4 * var(--u)); overflow-wrap: anywhere; }
.tk[data-style="Carbone"] .tk__cb-cols { display: grid; grid-template-columns: calc(8 * var(--u)) 1fr auto; margin-top: calc(3 * var(--u)); padding: calc(1.1 * var(--u)) 0; border-top: .6cqw solid var(--k-encre); border-bottom: .3cqw solid var(--k-encre); font-size: calc(2.4 * var(--u)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.tk[data-style="Carbone"] .tk__lignes li { grid-template-columns: calc(8 * var(--u)) 1fr auto; font-family: "Caveat", "Segoe Script", cursive; font-weight: 700; font-size: calc(4.8 * var(--u)); line-height: 1.2; color: var(--k-bic); padding: calc(1 * var(--u)) 0 calc(.6 * var(--u)); border-bottom: .25cqw solid rgba(179, 56, 44, .4); }
.tk[data-style="Carbone"] .tk__lignes li:nth-child(odd) { transform: rotate(-.35deg); }
.tk[data-style="Carbone"] .tk__lignes li:nth-child(even) { transform: rotate(.3deg) translateX(.4cqw); }
.tk[data-style="Carbone"] .tk__lignes .q { padding-left: calc(1.6 * var(--u)); }
.tk[data-style="Carbone"] .tk__lignes .pr { padding-right: .8cqw; }
.tk[data-style="Carbone"] .tk__lignes li.tk__hl .l { justify-self: start; border: .4cqw solid var(--k-bic); border-radius: 48% 52% 50% 50% / 62% 56% 44% 40%; padding: 0 calc(2.4 * var(--u)); margin: -.4cqw 0 -.2cqw calc(-1.6 * var(--u)); transform: rotate(-1.4deg); }
.tk[data-style="Carbone"] .tk__total { text-transform: uppercase; display: flex; justify-content: flex-start; gap: calc(4 * var(--u)); align-items: baseline; margin-top: calc(2.2 * var(--u)); font-weight: 700; letter-spacing: .16em; }
.tk[data-style="Carbone"] .tk__lbl--autre { font-size: calc(3 * var(--u)); }
.tk[data-style="Carbone"] .tk__tout { text-transform: none; font-family: "Caveat", "Segoe Script", cursive; font-weight: 700; font-size: calc(14 * var(--u)); line-height: 1; color: var(--k-bic); letter-spacing: 0; text-decoration: underline double; text-decoration-thickness: .55cqw; text-underline-offset: 1cqw; }
.tk[data-style="Carbone"] .tk__chiffres { margin-top: calc(1.4 * var(--u)); font-size: calc(2.5 * var(--u)); letter-spacing: .08em; text-transform: uppercase; }
.tk[data-style="Carbone"] .tk__tampon { display: block; position: absolute; right: 7cqw; bottom: 7cqw; transform: rotate(-13deg); color: var(--k-tampon); border: .8cqw solid currentColor; outline: .3cqw solid currentColor; outline-offset: .6cqw; border-radius: 1.2cqw; padding: .6cqw 3cqw .2cqw; text-align: center; font-family: "Anton", Impact, sans-serif; font-size: calc(12 * var(--u)); line-height: 1.05; mix-blend-mode: multiply; opacity: .88; text-transform: uppercase; }
.tk[data-style="Carbone"] .tk__tampon small { display: block; font-family: "Courier Prime", monospace; font-size: calc(2.2 * var(--u)); font-weight: 700; letter-spacing: .14em; border-top: .3cqw solid currentColor; padding: .8cqw 0 .6cqw; }

/* ── 4. Manège : une pile de tickets de fête foraine ── */
.tk[data-style="Manège"] { background: radial-gradient(120% 80% at 50% 20%, #12857a 0%, #0b5f58 60%, #08463f 100%); }
.tk[data-style="Manège"]::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 7cqw, transparent 7cqw 14cqw); z-index: -1; }
.tk[data-style="Manège"] .tk__cale { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(1.1 * var(--u)); padding: 4.6cqw 0; filter: drop-shadow(0 .9cqw .9cqw rgba(0, 0, 0, .35)); }
.tk[data-style="Manège"] :is(.tk__papier, .tk__corps, .tk__tete) { display: contents; }
.tk[data-style="Manège"] :is(.tk__h--mg, .tk__lignes li, .tk__pied) {
  --n: 2.2cqw;
  position: relative; width: 84cqw; align-items: center;
  -webkit-mask: radial-gradient(circle at 0 50%, #0000 var(--n), #000 calc(var(--n) + .1cqw)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 var(--n), #000 calc(var(--n) + .1cqw)) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, #0000 var(--n), #000 calc(var(--n) + .1cqw)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 var(--n), #000 calc(var(--n) + .1cqw)) right / 51% 100% no-repeat;
}
.tk[data-style="Manège"] .tk__h--mg { display: grid; grid-template-columns: 1fr; justify-items: center; align-content: center; text-align: center; background: var(--k-m0); color: var(--k-m0-t); height: calc(14 * var(--u)); margin-bottom: calc(.8 * var(--u)); transform: rotate(.6deg); text-transform: uppercase; }
.tk[data-style="Manège"] .tk__h--mg b { font-weight: 400; font-size: calc(7 * var(--u)); line-height: 1; letter-spacing: .04em; white-space: nowrap; overflow: hidden; max-width: 76cqw; }
.tk[data-style="Manège"] .tk__h--mg span { font-family: "Courier Prime", monospace; font-weight: 700; font-size: calc(2.2 * var(--u)); letter-spacing: .14em; }
.tk[data-style="Manège"] .tk__lignes { counter-reset: n; gap: calc(1.3 * var(--u)); width: 84cqw; }
.tk[data-style="Manège"] .tk__lignes li { counter-increment: n; grid-template-columns: calc(6 * var(--u)) 1fr 22cqw; height: clamp(calc(7.5 * var(--u)), calc(72cqw / var(--nb)), calc(11 * var(--u))); padding: 0 0 0 calc(3.6 * var(--u)); text-transform: uppercase; background: var(--k-m0); color: var(--k-m0-t); }
.tk[data-style="Manège"] .tk__lignes li[data-c="1"] { background: var(--k-m1); color: var(--k-m1-t); transform: rotate(.9deg) translateX(1.8cqw); }
.tk[data-style="Manège"] .tk__lignes li[data-c="2"] { background: var(--k-m2); color: var(--k-m2-t); transform: rotate(-.6deg) translateX(-.8cqw); }
.tk[data-style="Manège"] .tk__lignes li[data-c="3"] { background: var(--k-m3); color: var(--k-m3-t); transform: rotate(1.3deg) translateX(1cqw); }
.tk[data-style="Manège"] .tk__lignes li[data-c="4"] { background: var(--k-m4); color: var(--k-m4-t); transform: rotate(-1deg) translateX(-1.8cqw); }
.tk[data-style="Manège"] .tk__lignes li[data-c="5"] { background: var(--k-m5); color: var(--k-m5-t); transform: rotate(.7deg) translateX(1.2cqw); }
.tk[data-style="Manège"] .tk__lignes li[data-c="0"] { transform: rotate(-1.2deg) translateX(-1.6cqw); }
.tk[data-style="Manège"] .tk__lignes li[data-c="6"] { background: var(--k-m6); color: var(--k-m6-t); transform: rotate(-1.1deg) translateX(-1cqw); }
.tk[data-style="Manège"] .tk__lignes li.tk__hl { background: var(--k-hl-fond); color: var(--k-hl-texte); box-shadow: inset 0 0 0 .6cqw #b3261e; z-index: 2; transform: rotate(.7deg) translateX(1.2cqw) scale(1.04); }
.tk[data-style="Manège"] .tk__lignes .q { font-family: "Courier Prime", monospace; font-weight: 700; font-size: calc(3.4 * var(--u)); text-align: center; opacity: .85; }
.tk[data-style="Manège"] .tk__lignes .l { font-size: calc(4.7 * var(--u)); line-height: 1; padding-right: 1cqw; white-space: nowrap; overflow: hidden; }
.tk[data-style="Manège"] .tk__lignes .pr { height: 100%; display: grid; align-content: center; justify-items: center; border-left: .45cqw dashed currentColor; font-size: calc(3.1 * var(--u)); line-height: 1.15; text-align: center; padding: 0 .6cqw 0 .8cqw; margin: 0 2.4cqw 0 0; overflow: hidden; }
.tk[data-style="Manège"] .tk__lignes .pr::before { content: "N° " counter(n, decimal-leading-zero); font-family: "Courier Prime", monospace; font-weight: 700; font-size: calc(1.9 * var(--u)); letter-spacing: .12em; opacity: .8; }
.tk[data-style="Manège"] .tk__pied { display: grid; grid-template-columns: 1fr 22cqw; height: calc(25 * var(--u)); margin-top: calc(.8 * var(--u)); padding-left: calc(5 * var(--u)); background: var(--k-m1); color: var(--k-m1-t); transform: rotate(-1.4deg); }
.tk[data-style="Manège"] .tk__total { display: block; }
.tk[data-style="Manège"] .tk__lbl--autre { text-transform: uppercase; display: block; font-family: "Courier Prime", monospace; font-weight: 700; font-size: calc(2.4 * var(--u)); letter-spacing: .3em; }
.tk[data-style="Manège"] .tk__tout { display: block; font-weight: 400; font-size: calc(17 * var(--u)); line-height: .9; text-transform: uppercase; }
.tk[data-style="Manège"] .tk__tout::after { content: "."; }
.tk[data-style="Manège"] .tk__chiffres { height: 100%; display: grid; align-content: center; justify-items: center; text-align: center; border-left: .5cqw dashed currentColor; font-family: "Courier Prime", monospace; font-weight: 700; font-size: calc(2 * var(--u)); line-height: 1.7; white-space: nowrap; text-transform: uppercase; margin-right: 2.6cqw; }
.tk[data-style="Manège"] .tk__chiffres span + span::before { content: none; }

/* ── Le formulaire ──
 *
 * Les échantillons du style, les lignes et les dés. Les échantillons prennent les variables du style qu'ils montrent. */
.tk-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tk-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.tk-styles label {
  display: flex; flex-direction: column; align-items: center; gap: .3rem; cursor: pointer; margin: 0;
  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;
}
.tk-styles label small { font-weight: 400; font-size: 1.2rem; opacity: .8; }
.tk-styles input:checked + label { border-color: rgb(var(--color-foreground)); }
.tk-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.tk-echantillon { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; max-width: 10rem; height: 4rem; border-radius: .6rem; background: var(--k-fond); color: var(--k-encre); }
.tk-echantillon b { font-family: var(--k-police); font-weight: 700; font-size: 1.3rem; letter-spacing: .1em; text-transform: uppercase; padding: .2rem .6rem; background: var(--k-papier); border-radius: .3rem; }
.tk-echantillon i { display: block; width: .8rem; height: .8rem; border-radius: 50%; background: var(--k-accent); }
[data-style="Manège"] .tk-echantillon i:nth-of-type(2) { background: var(--k-m2); }
[data-style="Manège"] .tk-echantillon i:nth-of-type(3) { background: var(--k-m3); }
[data-style="Listing"] .tk-echantillon { background: repeating-linear-gradient(180deg, #fdfdfa 0 .8rem, var(--k-bande) .8rem 1.6rem); }
[data-style="Carbone"] .tk-echantillon b { color: var(--k-encre); }
@media (min-width: 750px) { .tk-styles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tk-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.tk-ligne { display: flex; gap: .6rem; align-items: end; }
.tk-ligne[hidden] { display: none; }
.tk-ligne__champs { flex: 1; min-width: 0; display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 8.4rem; gap: .6rem; align-items: end; }
.tk-ligne__champs label.tk-ligne__nom { display: block; font-size: 1.3rem; margin-bottom: .3rem; }
.tk-ligne__champs input { width: 100%; min-width: 0; }
.tk-ligne__q input { text-align: center; }
.tk-de {
  width: 4.4rem; height: 4.4rem; display: inline-flex; align-items: center; justify-content: center; flex: none;
  border: .1rem solid currentColor; border-radius: .8rem; background: transparent; cursor: pointer;
}
.tk-de svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.tk-de svg circle { fill: currentColor; stroke: none; }
.tk-de[hidden], .tk-tout[hidden], .tk-plus-ligne[hidden] { display: none; }
.tk-tout { justify-self: start; margin-bottom: 1.2rem; }
.tk-plus-ligne { margin-top: 1rem; }