/* ═══════════════════════════ « La recette du cocktail de la bande » ═══════════════════════════
 *
 * 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.
 *
 * ── La fiche de recette d'un cocktail qui n'existe que chez eux, quatre styles ──
 *
 * Le contenu et la structure ne bougent pas : un verre, le nom du cocktail, les ingrédients, la
 * préparation, « à servir », une signature. Chaque style a son papier, son écriture et son verre ; les
 * deux premiers sont d'un autre âge, les deux derniers sont une fête (refonte du 6 nov. 2026 : le carnet
 * et l'ardoise, deux aplats d'interface sans matière, ont été remplacés) :
 * - **Carte déco** : la carte d'un bar des années trente — bleu nuit, or, filets doubles aux angles
 *   rentrants, un éventail de rayons derrière la coupe, le nom en Marcellus, le texte en Cormorant ;
 * - **Vieux manuel** : la page d'un manuel de bar des années cinquante — papier jauni aux bords brûlés,
 *   plis de pliage, rond de tasse, cadre à double filet, tapé à la machine (Courier Prime), le nom en
 *   Playfair entre deux filets doubles, un bandeau d'encre en tête ; le gobelet dans son médaillon ;
 * - **Tiki** : le menu d'un bar tropical — vert profond tendu de toile, cadre de vrais bambous à nœuds,
 *   bandeau tapa orange en tête et en pied, le nom en Anton (Fredoka pour le texte) ; le grand verre
 *   à l'ombrelle ;
 * - **Rétro soixante** : la carte d'un cocktail de salon des années 60 — papier peint turquoise à pois,
 *   carte crème à gros bord arrondi et ombre décalée, un soleil atomique derrière le shaker, le nom en
 *   Damion (Josefin Sans pour le reste).
 *
 * Polices servies par nous (point 2) : Marcellus, Cormorant Garamond, Playfair Display, Josefin Sans et
 * Fredoka par `theme.css`, Anton, Damion et Courier Prime ici. **Aucune marque** : les verres sont des
 * dessins génériques, sans logo.
 *
 * ── Les palettes ──
 *
 * **Ce sont des couleurs de produit, pas de charte** (point 6 quater) : en clair, toutes ici, en tête, et
 * nulle part ailleurs. `[data-style]` ne nomme pas `.ck` exprès, pour que les échantillons du formulaire
 * se colorent avec les mêmes variables.
 *
 * **Aucune ombre portée sur `.ck` lui-même** : la fabrication remet à zéro l'ombre de l'affiche
 * (`cssDeRendu`, pour que le relief du cadre de la fiche ne s'imprime pas) ; tout cadre ou relief est un
 * pseudo-élément ou un enfant (`.ck__in`), jamais l'ombre de l'affiche.
 */
@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: "Damion";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/damion-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: "Damion";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/damion-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;
}

/* --k-fond : le papier ; --k-encre : le texte ; --k-accent : le surtitre, les puces, le verre, « à servir » ;
   --k-doux : le texte en retrait (la signature) ; --k-filet : les lignes ; --k-nom : le nom du cocktail ;
   --k-cadre / --k-cadre-fonce : le cadre (l'or de la carte déco, l'encre du manuel, le bambou du tiki) et son
   ombre ; --k-trou : réservé (le papier d'un trou) ; --k-bande / --k-sur-bande : le bandeau (l'encre du manuel,
   le tapa du tiki) et ce qu'on y écrit ; --k-soleil : les rayons, le rond de tasse, les pois ;
   --k-turquoise : les titres de section et le filet du soleil ; --k-clair : un reflet (le nœud du bambou, le
   médaillon, les pois du papier peint) ; --k-bord : le bord du papier (la brûlure du manuel, la toile du tiki,
   le papier peint) ; --k-ombre : l'ombre décalée ou la tache. */
[data-style="Carte déco"] {
  --k-fond: #0f1d33; --k-encre: #f4ead2; --k-accent: #d8b15a; --k-doux: #c3cad6; --k-filet: #6f5d2f; --k-nom: #ecc872;
  --k-cadre: #d8b15a; --k-cadre-fonce: #8b7234; --k-trou: #0f1d33; --k-bande: #d8b15a; --k-sur-bande: #0f1d33;
  --k-soleil: #d8b15a; --k-turquoise: #d8b15a; --k-clair: #f6dc94; --k-bord: #0f1d33; --k-ombre: #1c2f4f;
}
[data-style="Vieux manuel"] {
  --k-fond: #efe0b6; --k-encre: #2e2216; --k-accent: #8c2f1b; --k-doux: #5d4a32; --k-filet: #b39a64; --k-nom: #2e2216;
  --k-cadre: #2e2216; --k-cadre-fonce: #b39a64; --k-trou: #2e2216; --k-bande: #2e2216; --k-sur-bande: #efe0b6;
  --k-soleil: #d9bf86; --k-turquoise: #8c2f1b; --k-clair: #f6ebc9; --k-bord: #c9ab6e; --k-ombre: #a98a55;
}
[data-style="Tiki"] {
  --k-fond: #123a31; --k-encre: #fcefd2; --k-accent: #f4a340; --k-doux: #cfe0c8; --k-filet: #3f7a63; --k-nom: #f8d56b;
  --k-cadre: #8a5a2f; --k-cadre-fonce: #4f3118; --k-trou: #123a31; --k-bande: #f4a340; --k-sur-bande: #123a31;
  --k-soleil: #123a31; --k-turquoise: #f4a340; --k-clair: #c98f50; --k-bord: #0b2a23; --k-ombre: #0a211b;
}
[data-style="Rétro soixante"] {
  --k-fond: #f8f0dd; --k-encre: #2b2a33; --k-accent: #b83d15; --k-doux: #565464; --k-filet: #13706a; --k-nom: #b83d15;
  --k-cadre: #2b2a33; --k-cadre-fonce: #2b2a33; --k-trou: #2b2a33; --k-bande: #13706a; --k-sur-bande: #f8f0dd;
  --k-soleil: #efb62c; --k-turquoise: #13706a; --k-clair: #f3c14d; --k-bord: #13706a; --k-ombre: #b83d15;
}

/* ── L'affiche ──
 *
 * Tout est en `cqw` : l'affiche se lit sur sa propre largeur (le cadre est le conteneur de requête), donc
 * le même dessin tient de l'aperçu de 360 px au 70 × 100 imprimé. Les rapports vendus vont de 1,333
 * (30 × 40) à 1,5 (40 × 60) : l'écart s'absorbe dans l'air entre les blocs (`space-evenly`), jamais dans
 * une taille de texte qui changerait avec le format. `--ck-t` est la taille du texte des listes : l'éditeur
 * part de 1,4 — une recette courte se lit en grand — et descend au pixel jusqu'à ce que tout tienne ;
 * `--ech`, posée sur le nom, celle du nom, qui se resserre sans jamais se couper en plein mot. */
.ck {
  --ck-t: 1; --ck-base: 3.9cqw;
  --ck-corps: "Cormorant Garamond"; --ck-nom: "Marcellus"; --ck-titres: "Marcellus"; --ck-fort: 400;
  display: flex; flex-direction: column; position: relative; isolation: isolate;
  padding: 7cqw 8.5cqw;
  background-color: var(--k-fond); color: var(--k-encre);
  font-family: var(--ck-corps), Georgia, serif; font-size: calc(var(--ck-base) * var(--ck-t)); line-height: 1.2; font-weight: 500;
}
.ck :where(p, ol, ul, li, h3) { margin: 0; padding: 0; list-style: none; }
.ck [hidden] { display: none !important; }
/* L'exemple en pleine couleur (même règle que « La recette de l'amour ») : presque tout est exemple au premier
   affichage, et à 40 % l'affiche entière paraîtrait délavée. La classe `affiche-exemple` reste : c'est elle que
   la fabrication masque, et que l'éditeur retire à la frappe. */
.affiche__affiche.ck .affiche-exemple { opacity: 1; }
.ck__in { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2.6cqw; position: relative; z-index: 1; }

.ck__tete { position: relative; display: grid; justify-items: center; gap: 1cqw; text-align: center; }
.ck__tete > * { position: relative; z-index: 1; }
.ck__verre { display: none; box-sizing: border-box; width: 10.5cqw; height: 10.5cqw; fill: none; stroke: var(--k-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ck__verre circle { fill: var(--k-accent); stroke: none; }
.ck[data-style="Carte déco"] .ck__verre--coupe, .ck[data-style="Vieux manuel"] .ck__verre--gobelet,
.ck[data-style="Tiki"] .ck__verre--tiki, .ck[data-style="Rétro soixante"] .ck__verre--shaker { display: block; }
.ck__kicker { font-family: var(--ck-titres), Georgia, serif; font-size: .74em; letter-spacing: .22em; text-transform: uppercase; color: var(--k-accent); font-weight: 700; }
.ck__nom {
  width: 100%; font-family: var(--ck-nom), Georgia, serif; font-weight: var(--ck-fort); color: var(--k-nom);
  font-size: calc(14cqw * var(--ech, 1)); line-height: 1.06; text-wrap: balance; overflow-wrap: normal; padding-bottom: .5cqw;
}

/* La recette se lit de haut en bas : les ingrédients, puis la préparation, chacun sur toute la largeur. Pas de
   `min-height: 0` : un bloc trop haut doit faire déborder `.ck__in` (que l'éditeur mesure), pas se recouvrir. */
.ck__corps { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; gap: 3cqw; width: 100%; }
.ck__ing, .ck__prep { display: flex; flex-direction: column; gap: 1.6cqw; min-width: 0; }
.ck__titre { font-family: var(--ck-titres), Georgia, serif; font-size: .72em; letter-spacing: .22em; text-transform: uppercase; color: var(--k-accent); font-weight: 700; border-bottom: 1px solid var(--k-filet); padding-bottom: .8cqw; }
.ck__liste, .ck__etapes { display: grid; gap: calc(1.3cqw * var(--ck-t)); }
.ck__liste li, .ck__etapes li { position: relative; padding-left: 1.6em; overflow-wrap: anywhere; }
.ck__liste li::before { content: ""; position: absolute; left: .25em; top: .5em; width: .5em; height: .5em; border-radius: 50%; background: var(--k-accent); }
.ck__etapes { counter-reset: etape; }
.ck__etapes li { counter-increment: etape; }
.ck__etapes li::before { content: counter(etape); position: absolute; left: 0; top: .02em; width: 1.2em; text-align: center; font-weight: 700; color: var(--k-accent); }

.ck__pied { display: grid; gap: 1.2cqw; text-align: center; border-top: 1px solid var(--k-filet); padding-top: 2cqw; }
.ck__lbl { font-family: var(--ck-titres), Georgia, serif; font-size: .68em; letter-spacing: .2em; text-transform: uppercase; color: var(--k-accent); font-weight: 700; }
.ck__servir { text-wrap: balance; overflow-wrap: anywhere; }
.ck__servir b { font-family: var(--ck-nom), Georgia, serif; font-weight: var(--ck-fort); font-size: 1.35em; color: var(--k-nom); }
.ck__signature { font-size: .86em; color: var(--k-doux); text-wrap: balance; overflow-wrap: anywhere; }

/* ── Carte déco : la carte d'un bar des années trente — bleu nuit, or, angles rentrants, éventail. ──
 *
 * Le cadre est en deux pseudo-éléments : `::before` trace le double filet, `::after` creuse les quatre angles
 * (un quart de disque du papier, cerclé d'or) — c'est ce qui fait « déco ». Ni l'un ni l'autre ne capte le toucher. */
.ck[data-style="Carte déco"] {
  --ck-base: 3.5cqw; --ck-corps: "Cormorant Garamond"; --ck-nom: "Marcellus"; --ck-titres: "Marcellus"; --ck-fort: 400;
  padding: 11.5cqw 12cqw 9.5cqw; font-weight: 600; line-height: 1.18; font-variant-numeric: lining-nums;
}
.ck[data-style="Carte déco"]::before {
  content: ""; position: absolute; inset: 3.4cqw; pointer-events: none; z-index: 0;
  border: .55cqw solid var(--k-cadre);
  box-shadow: inset 0 0 0 1.1cqw var(--k-fond), inset 0 0 0 1.5cqw var(--k-cadre-fonce);
}
.ck[data-style="Carte déco"]::after {
  content: ""; position: absolute; inset: 3.4cqw; pointer-events: none; z-index: 2;
  background:
    radial-gradient(circle at 0 0, var(--k-fond) 0 3.1cqw, var(--k-cadre) 3.1cqw 3.65cqw, transparent 3.7cqw) 0 0 / 3.7cqw 3.7cqw no-repeat,
    radial-gradient(circle at 100% 0, var(--k-fond) 0 3.1cqw, var(--k-cadre) 3.1cqw 3.65cqw, transparent 3.7cqw) 100% 0 / 3.7cqw 3.7cqw no-repeat,
    radial-gradient(circle at 0 100%, var(--k-fond) 0 3.1cqw, var(--k-cadre) 3.1cqw 3.65cqw, transparent 3.7cqw) 0 100% / 3.7cqw 3.7cqw no-repeat,
    radial-gradient(circle at 100% 100%, var(--k-fond) 0 3.1cqw, var(--k-cadre) 3.1cqw 3.65cqw, transparent 3.7cqw) 100% 100% / 3.7cqw 3.7cqw no-repeat;
}
/* L'éventail : des rayons d'or qui montent de la coupe, estompés vers le bord (un masque à deux couches : la moitié
   haute seulement, et une couronne qui s'efface). */
.ck[data-style="Carte déco"] .ck__tete::before {
  content: ""; position: absolute; z-index: 0; left: 50%; top: -9cqw; width: 38cqw; height: 38cqw; transform: translateX(-50%); border-radius: 50%;
  background: repeating-conic-gradient(from -88deg at 50% 50%, color-mix(in srgb, var(--k-accent) 70%, transparent) 0 1.1deg, transparent 1.1deg 7.5deg);
  -webkit-mask-image: linear-gradient(to bottom, black 0 50%, transparent 50%), radial-gradient(circle, transparent 0 17%, black 19%, black 58%, transparent 70%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, black 0 50%, transparent 50%), radial-gradient(circle, transparent 0 17%, black 19%, black 58%, transparent 70%);
  mask-composite: intersect;
}
.ck[data-style="Carte déco"] .ck__verre { width: 11.5cqw; height: 11.5cqw; stroke-width: 1.9; }
.ck[data-style="Carte déco"] .ck__kicker { font-weight: 400; letter-spacing: .36em; padding-left: .36em; }
.ck[data-style="Carte déco"] .ck__nom { font-size: calc(10.4cqw * var(--ech, 1)); line-height: 1.1; letter-spacing: .02em; }
/* Le filet de l'en-tête : deux traits d'or et un losange (deux triangles dessinés en dégradé conique, aucun élément de plus). */
.ck[data-style="Carte déco"] .ck__tete::after {
  content: ""; display: block; width: 100%; height: 3cqw; margin-top: 1cqw;
  background:
    conic-gradient(from 135deg at 50% 0%, var(--k-accent) 0 90deg, transparent 90deg) 50% 0 / 3cqw 1.5cqw no-repeat,
    conic-gradient(from -45deg at 50% 100%, var(--k-accent) 0 90deg, transparent 90deg) 50% 100% / 3cqw 1.5cqw no-repeat,
    linear-gradient(var(--k-accent), var(--k-accent)) 0 50% / calc(50% - 3cqw) .3cqw no-repeat,
    linear-gradient(var(--k-accent), var(--k-accent)) 100% 50% / calc(50% - 3cqw) .3cqw no-repeat;
}
.ck[data-style="Carte déco"] .ck__titre, .ck[data-style="Carte déco"] .ck__lbl { font-weight: 400; letter-spacing: .3em; text-align: center; }
.ck[data-style="Carte déco"] .ck__titre { border-bottom: .3cqw double var(--k-cadre-fonce); padding-bottom: 1.2cqw; }
.ck[data-style="Carte déco"] .ck__liste li::before { border-radius: 0; transform: rotate(45deg); width: .38em; height: .38em; top: .58em; left: .3em; }
.ck[data-style="Carte déco"] .ck__etapes li::before { font-family: "Marcellus", serif; font-weight: 400; }
.ck[data-style="Carte déco"] .ck__pied { border-top: .3cqw double var(--k-cadre-fonce); }
.ck[data-style="Carte déco"] .ck__servir b { font-size: 1.3em; letter-spacing: .03em; }
.ck[data-style="Carte déco"] .ck__signature { font-style: italic; font-weight: 500; }

/* ── Vieux manuel : la page d'un manuel de bar des années cinquante, jaunie, pliée, tachée. ──
 *
 * Le papier vieilli est un empilement de dégradés sur le fond : la brûlure des bords (une ellipse qui s'assombrit
 * vers les angles), un rond de tasse en bas à droite. Les plis sont `::before` (trois filets estompés : le pli
 * central et les deux d'un dépliant), le cadre à double filet est `::after`. Rien n'est une image. */
.ck[data-style="Vieux manuel"] {
  --ck-base: 3.2cqw; --ck-corps: "Courier Prime"; --ck-nom: "Playfair Display"; --ck-titres: "Courier Prime"; --ck-fort: 800;
  padding: 9.5cqw 11cqw 9cqw; font-weight: 400; line-height: 1.3;
  background-image:
    radial-gradient(circle at 93% 94%, transparent 0 4.4cqw, color-mix(in srgb, var(--k-ombre) 55%, transparent) 4.5cqw 5.2cqw, transparent 5.4cqw),
    radial-gradient(circle at 93% 94%, color-mix(in srgb, var(--k-ombre) 14%, transparent) 0 4.5cqw, transparent 4.6cqw),
    radial-gradient(ellipse at 50% 46%, transparent 52%, color-mix(in srgb, var(--k-bord) 85%, transparent) 100%);
}
.ck[data-style="Vieux manuel"]::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - .3cqw), color-mix(in srgb, var(--k-encre) 12%, transparent) calc(50% - .3cqw) calc(50% - .1cqw), color-mix(in srgb, var(--k-clair) 50%, transparent) calc(50% - .1cqw) calc(50% + .3cqw), transparent calc(50% + .3cqw)),
    linear-gradient(180deg, transparent calc(33.3% - .1cqw), color-mix(in srgb, var(--k-encre) 9%, transparent) calc(33.3% - .1cqw) calc(33.3% + .15cqw), transparent calc(33.3% + .15cqw)),
    linear-gradient(180deg, transparent calc(66.6% - .1cqw), color-mix(in srgb, var(--k-encre) 9%, transparent) calc(66.6% - .1cqw) calc(66.6% + .15cqw), transparent calc(66.6% + .15cqw));
}
.ck[data-style="Vieux manuel"]::after {
  content: ""; position: absolute; inset: 4.2cqw; pointer-events: none; z-index: 0;
  border: 1.1cqw double var(--k-cadre);
}
.ck[data-style="Vieux manuel"] .ck__tete { gap: 1.4cqw; }
.ck[data-style="Vieux manuel"] .ck__verre {
  width: 13cqw; height: 13cqw; padding: 1.1cqw; stroke: var(--k-encre); stroke-width: 2.4; border-radius: 50%;
  border: .45cqw double var(--k-cadre); background: var(--k-clair);
}
.ck[data-style="Vieux manuel"] .ck__verre circle { fill: var(--k-accent); }
.ck[data-style="Vieux manuel"] .ck__kicker { background: var(--k-bande); color: var(--k-sur-bande); font-size: .7em; letter-spacing: .32em; padding: .7cqw 3.2cqw .7cqw 3.5cqw; }
.ck[data-style="Vieux manuel"] .ck__nom {
  font-size: calc(11.8cqw * var(--ech, 1)); line-height: 1.06; letter-spacing: -.005em;
  border-top: .9cqw double var(--k-cadre); border-bottom: .9cqw double var(--k-cadre); padding: 1.4cqw 0 1.6cqw;
}
.ck[data-style="Vieux manuel"] .ck__titre { letter-spacing: .26em; border-bottom: .35cqw dotted var(--k-cadre); }
.ck[data-style="Vieux manuel"] .ck__liste li::before { width: .4em; height: .4em; top: .55em; left: .3em; border-radius: 0; }
.ck[data-style="Vieux manuel"] .ck__etapes li { padding-left: 1.9em; }
.ck[data-style="Vieux manuel"] .ck__etapes li::before { content: counter(etape) "."; width: 1.6em; text-align: left; }
.ck[data-style="Vieux manuel"] .ck__pied { border-top: .35cqw dotted var(--k-cadre); }
.ck[data-style="Vieux manuel"] .ck__servir b { font-size: 1.2em; }
.ck[data-style="Vieux manuel"] .ck__signature { font-style: italic; }

/* ── Tiki : le menu d'un bar tropical — toile tendue, bambous à nœuds, bandeaux tapa. ── */
.ck[data-style="Tiki"] {
  --ck-base: 3.3cqw; --ck-corps: "Fredoka"; --ck-nom: "Anton"; --ck-titres: "Fredoka"; --ck-fort: 400;
  padding: 10.5cqw 11cqw; font-weight: 500; line-height: 1.22;
}
/* La toile : des fils verticaux et horizontaux de la teinte du bord, très fins, sur le vert du fond. */
.ck[data-style="Tiki"]::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--k-bord) 55%, transparent) 0 .22cqw, transparent .22cqw 1cqw),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--k-bord) 40%, transparent) 0 .18cqw, transparent .18cqw 1.5cqw);
}
/* Le cadre est un pseudo-élément, **pas un `box-shadow` de l'affiche** : la fabrication remet à zéro l'ombre de
   l'affiche (`cssDeRendu`, pour qu'elle ne s'imprime pas), et un cadre dessiné ainsi disparaîtrait du tirage.
   Quatre bambous (deux horizontaux, deux verticaux), chacun un dégradé en travers (reflet, bois, ombre) et des
   nœuds ; l'angle est recouvert par le bambou du dessus. */
.ck[data-style="Tiki"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    repeating-linear-gradient(90deg, transparent 0 13cqw, var(--k-cadre-fonce) 13cqw 14.2cqw, var(--k-clair) 14.2cqw 14.8cqw, transparent 14.8cqw 22cqw) 0 0 / 100% 4cqw no-repeat,
    linear-gradient(180deg, var(--k-clair), var(--k-cadre) 38%, var(--k-cadre-fonce)) 0 0 / 100% 4cqw no-repeat,
    repeating-linear-gradient(90deg, transparent 0 7cqw, var(--k-cadre-fonce) 7cqw 8.2cqw, var(--k-clair) 8.2cqw 8.8cqw, transparent 8.8cqw 22cqw) 0 100% / 100% 4cqw no-repeat,
    linear-gradient(0deg, var(--k-clair), var(--k-cadre) 38%, var(--k-cadre-fonce)) 0 100% / 100% 4cqw no-repeat,
    repeating-linear-gradient(180deg, transparent 0 16cqw, var(--k-cadre-fonce) 16cqw 17.2cqw, var(--k-clair) 17.2cqw 17.8cqw, transparent 17.8cqw 27cqw) 0 0 / 4cqw 100% no-repeat,
    linear-gradient(90deg, var(--k-clair), var(--k-cadre) 38%, var(--k-cadre-fonce)) 0 0 / 4cqw 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 9cqw, var(--k-cadre-fonce) 9cqw 10.2cqw, var(--k-clair) 10.2cqw 10.8cqw, transparent 10.8cqw 27cqw) 100% 0 / 4cqw 100% no-repeat,
    linear-gradient(270deg, var(--k-clair), var(--k-cadre) 38%, var(--k-cadre-fonce)) 100% 0 / 4cqw 100% no-repeat;
}
.ck[data-style="Tiki"] .ck__nom { text-transform: uppercase; letter-spacing: .05em; font-size: calc(12.4cqw * var(--ech, 1)); line-height: 1.08; text-shadow: .45cqw .45cqw 0 var(--k-cadre-fonce), .9cqw .9cqw 0 var(--k-bord); }
.ck[data-style="Tiki"] .ck__kicker { font-weight: 600; letter-spacing: .26em; }
/* Le tapa : un zigzag orange, en tête et en pied. */
.ck[data-style="Tiki"] .ck__tete::after, .ck[data-style="Tiki"] .ck__pied::before {
  content: ""; display: block; width: 100%; height: 3cqw;
  background:
    linear-gradient(135deg, var(--k-bande) 25%, transparent 25%) 0 0 / 3cqw 3cqw,
    linear-gradient(225deg, var(--k-bande) 25%, transparent 25%) 0 0 / 3cqw 3cqw;
}
.ck[data-style="Tiki"] .ck__tete::after { margin-top: 1cqw; }
.ck[data-style="Tiki"] .ck__pied { border-top: 0; padding-top: 0; gap: 1.8cqw; }
.ck[data-style="Tiki"] .ck__pied::before { margin-bottom: .4cqw; transform: scaleY(-1); }
.ck[data-style="Tiki"] .ck__titre, .ck[data-style="Tiki"] .ck__lbl { font-weight: 600; letter-spacing: .2em; }
.ck[data-style="Tiki"] .ck__titre { border-bottom: .4cqw dotted var(--k-filet); }
.ck[data-style="Tiki"] .ck__liste li::before { border-radius: 0; transform: rotate(45deg); width: .42em; height: .42em; top: .55em; }
.ck[data-style="Tiki"] .ck__etapes li::before { font-family: "Anton", sans-serif; font-weight: 400; }
.ck[data-style="Tiki"] .ck__servir b { letter-spacing: .04em; text-transform: uppercase; font-size: 1.2em; }

/* ── Rétro soixante : un salon des années 60 — papier peint à pois, carte crème à gros bord et ombre décalée. ──
 *
 * La carte est `.ck__in` : son ombre décalée est celle d'un enfant de l'affiche, pas de l'affiche elle-même,
 * donc elle s'imprime. Le soleil atomique derrière le shaker n'en déborde pas (`overflow: hidden`). */
.ck[data-style="Rétro soixante"] {
  --ck-base: 3cqw; --ck-corps: "Josefin Sans"; --ck-nom: "Damion"; --ck-titres: "Josefin Sans"; --ck-fort: 400;
  padding: 6cqw 6.5cqw 7.5cqw 6.5cqw; font-weight: 500; line-height: 1.26;
  background-color: var(--k-bord);
  background-image:
    radial-gradient(circle at 25% 25%, var(--k-clair) 0 1.35cqw, transparent 1.45cqw),
    radial-gradient(circle at 75% 75%, var(--k-fond) 0 .75cqw, transparent .85cqw),
    radial-gradient(circle at 75% 25%, var(--k-soleil) 0 .35cqw, transparent .45cqw),
    radial-gradient(circle at 25% 75%, var(--k-soleil) 0 .35cqw, transparent .45cqw);
  background-size: 9cqw 9cqw;
}
.ck[data-style="Rétro soixante"] .ck__in {
  background: var(--k-fond); border: .9cqw solid var(--k-cadre); border-radius: 4.5cqw;
  box-shadow: 1.6cqw 1.6cqw 0 var(--k-ombre); padding: 5.5cqw 6.5cqw 4.8cqw; overflow: hidden;
}
.ck[data-style="Rétro soixante"] .ck__tete::before {
  content: ""; position: absolute; z-index: 0; left: 50%; top: -5.5cqw; width: 30cqw; height: 30cqw; transform: translateX(-50%); border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--k-soleil) 0 6deg, transparent 6deg 15deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 22%, black 24%, black 38%, transparent 70%);
  mask-image: radial-gradient(circle, transparent 0 22%, black 24%, black 38%, transparent 70%);
}
.ck[data-style="Rétro soixante"] .ck__verre { stroke-width: 2.4; width: 11cqw; height: 11cqw; }
.ck[data-style="Rétro soixante"] .ck__kicker { font-weight: 700; letter-spacing: .3em; color: var(--k-turquoise); background: var(--k-fond); padding: .2cqw 2cqw; }
.ck[data-style="Rétro soixante"] .ck__nom { font-size: calc(13.8cqw * var(--ech, 1)); line-height: 1.02; }
.ck[data-style="Rétro soixante"] .ck__tete::after {
  content: ""; display: block; width: 100%; height: 1.8cqw; margin-top: 1.2cqw; border-radius: 1cqw;
  background: linear-gradient(90deg, var(--k-accent) 0 33.3%, var(--k-soleil) 33.3% 66.6%, var(--k-turquoise) 66.6%);
}
.ck[data-style="Rétro soixante"] .ck__titre, .ck[data-style="Rétro soixante"] .ck__lbl { font-weight: 700; letter-spacing: .26em; color: var(--k-turquoise); }
.ck[data-style="Rétro soixante"] .ck__titre { border-bottom: .5cqw solid var(--k-turquoise); }
.ck[data-style="Rétro soixante"] .ck__liste li::before { background: var(--k-turquoise); width: .55em; height: .55em; top: .42em; }
.ck[data-style="Rétro soixante"] .ck__etapes li::before { color: var(--k-accent); font-weight: 700; }
.ck[data-style="Rétro soixante"] .ck__pied { border-top: .5cqw dotted var(--k-turquoise); }
.ck[data-style="Rétro soixante"] .ck__servir b { font-size: 1.55em; }
/* ── Le formulaire ── */
.ck-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.ck-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ck-styles label { display: grid; gap: .3rem; padding: .8rem; border: .1rem solid rgba(var(--encre), .18); border-radius: .8rem; cursor: pointer; min-height: 4.4rem; }
.ck-styles input:checked + label { border-color: rgb(var(--encre)); box-shadow: inset 0 0 0 .1rem rgb(var(--encre)); }
.ck-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.ck-echantillon { display: flex; align-items: center; gap: .4rem; height: 3.6rem; padding: 0 .8rem; border-radius: .4rem; background-color: var(--k-fond); color: var(--k-nom); font-family: "Marcellus", serif; font-weight: 400; font-size: 1.6rem; line-height: 1; }
.ck-echantillon b { font-weight: inherit; margin-right: auto; }
.ck-echantillon i { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--k-accent); }
.ck-styles label[data-style="Carte déco"] .ck-echantillon { font-family: "Marcellus", serif; font-size: 1.5rem; letter-spacing: .04em; box-shadow: inset 0 0 0 .2rem var(--k-fond), inset 0 0 0 .3rem var(--k-cadre); }
.ck-styles label[data-style="Vieux manuel"] .ck-echantillon { font-family: "Playfair Display", serif; font-weight: 800; font-size: 1.5rem; background-image: radial-gradient(ellipse at 50% 46%, transparent 55%, var(--k-bord) 130%); border-block: .3rem double var(--k-cadre); border-radius: 0; }
.ck-styles label[data-style="Tiki"] .ck-echantillon { font-family: "Anton", sans-serif; font-weight: 400; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .04em; box-shadow: inset 0 0 0 .3rem var(--k-cadre); }
.ck-styles label[data-style="Rétro soixante"] .ck-echantillon { font-family: "Damion", cursive; font-weight: 400; font-size: 2rem; background-color: var(--k-bord); color: var(--k-fond); box-shadow: inset 0 -.3rem 0 var(--k-soleil); }
.ck-styles__nom { font-weight: 600; }
.ck-styles small { color: rgba(var(--encre), .7); }

.ck-bloc { position: relative; }
.ck-tout { margin: .4rem 0 .8rem; }
.ck-lignes { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.ck-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 4.4rem; gap: .6rem; align-items: end; }
.ck-ligne[hidden] { display: none; }
.ck-ligne__nom { font-weight: 600; }
.ck-de { display: inline-flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; border: .1rem solid rgba(var(--encre), .25); border-radius: .8rem; background: rgb(var(--color-background)); color: rgb(var(--encre)); cursor: pointer; padding: 0; }
.ck-de svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ck-de svg circle { fill: currentColor; stroke: none; }
.ck-de[hidden], .ck-idees[hidden], .ck-tout[hidden], .ck-plus-ligne[hidden] { display: none; }
.ck-plus-ligne { margin-top: .8rem; }
.ck-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.ck-idees button { font: inherit; font-size: 1.3rem; padding: .6rem 1rem; min-height: 4.4rem; border-radius: 99rem; border: .1rem solid rgba(var(--encre), .25); background: rgb(var(--color-background)); color: rgb(var(--encre)); cursor: pointer; text-align: left; }
.ck-de:focus-visible, .ck-idees button:focus-visible { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }