/* ═══════════════════════════ Le chat porte-bonheur : le maneki-neko et son occasion ═══════════════════════════
 *
 * Le chat japonais aux pattes levées, devant un disque de couleur, avec l'occasion qu'on fête, un nom,
 * un vœu en kanji sur le ventre et une phrase. Servie **seulement** sur sa fiche
 * (`views/product-affiche.liquid`). Le pourquoi des choix est dans `lib/maneki-affiche.js`.
 *
 * ── Quatre styles, une seule mise en page ──
 *
 * Le style est un attribut (`[data-style]`) : le chat, le disque et le texte ne bougent pas, seules
 * les couleurs changent.
 * - **Vermillon** : le papier washi, l'encre chaude, le disque rouge d'un drapeau d'autrefois.
 * - **Indigo** : la nuit bleue, le disque d'or, le texte crème — celui qu'on offre.
 * - **Sakura** : le rose des cerisiers, le disque rose soutenu, l'encre prune.
 * - **Matcha** : le vert pâle d'un thé battu, le disque vert profond.
 *
 * **Le chat est celui de l'atelier**, découpé en couches (`npm run maneki`) : le corps clair, les taches,
 * le collier et le grelot prennent la couleur du style, le trait reste l'encre. Sur le fond sombre
 * d'Indigo le contour du chat s'efface dans la nuit, mais son corps crème se lit : c'est voulu, il se
 * découpe sur le disque d'or.
 *
 * Polices : Cormorant Garamond (le nom, la phrase) et Josefin Sans (les lignes en capitales espacées),
 * déjà servies par nous (point 2). **Aucun kanji n'est du texte** : ce sont des tracés, donc aucune police
 * CJK à charger — le vœu se lit même si la page ne la connaît pas.
 *
 * ── 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 `.mn` exprès, pour que les échantillons du
 * formulaire se colorent avec les mêmes variables.
 * --mn-fond / --mn-texte : le papier et l'encre ; --mn-accent : les lignes en capitales (occasion, vœu) ;
 * --mn-doux : la mention ; --mn-filet : le cadre ; --mn-disque : le disque, les taches et le collier ;
 * --mn-corps : le corps du chat ; --mn-grelot : le grelot ; --mn-trait : le trait et le kanji.
 * **Contrastes mesurés** (`tests/maneki.test.js`) : texte ≥ 7, accent et mention ≥ 4,5 sur le papier.
 */
[data-style="Vermillon"] {
  --mn-fond: #f5eddc; --mn-texte: #231a15; --mn-accent: #9b2f1c; --mn-doux: #6a574b; --mn-filet: #b64a33;
  --mn-disque: #c9452d; --mn-corps: #fffaf0; --mn-grelot: #d4a03c; --mn-trait: #1f1712;
}
[data-style="Indigo"] {
  --mn-fond: #17213a; --mn-texte: #f3e9d2; --mn-accent: #d9b45a; --mn-doux: #b9b3a6; --mn-filet: #a88b45;
  --mn-disque: #d2aa4c; --mn-corps: #fbf4e4; --mn-grelot: #e6c46a; --mn-trait: #1b1410;
  --mn-tache: #b4452f; --mn-collier: #b4452f;
}
[data-style="Sakura"] {
  --mn-fond: #f7e3df; --mn-texte: #3b1f2b; --mn-accent: #8a3350; --mn-doux: #7a5560; --mn-filet: #c4788a;
  --mn-disque: #d98597; --mn-corps: #fffaf8; --mn-grelot: #d4a03c; --mn-trait: #2a1620;
  --mn-collier: #b4506a;
}
[data-style="Matcha"] {
  --mn-fond: #e3e8d3; --mn-texte: #1f2a1c; --mn-accent: #3f5e37; --mn-doux: #5a6a52; --mn-filet: #6f8f5e;
  --mn-disque: #6f8f5e; --mn-corps: #fbfaf0; --mn-grelot: #c99a3a; --mn-trait: #1a2217;
  --mn-collier: #3f6b4a;
}

/* ── L'affiche ──
 *
 * Tout est en `cqw` : l'affiche se lit sur sa propre largeur. Les rapports vendus vont de 1,333
 * (30 × 40) à 1,5 (40 × 60) ; le chat garde sa taille et c'est l'air autour de lui qui absorbe l'écart
 * (`justify-content: center`), jamais une taille de texte qui changerait avec le format. */
.mn {
  --fond: var(--mn-fond); --texte: var(--mn-texte);
  --mn-echelle: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 9cqw 9cqw 8cqw; box-sizing: border-box; text-align: center; line-height: 1;
  font-family: "Cormorant Garamond", Georgia, serif;
}
.mn :where(p) { margin: 0; padding: 0; }
.mn [hidden] { display: none !important; }

/* Le cadre : un filet épais et un filet fin, en retrait l'un de l'autre. */
.mn__cadre {
  position: absolute; inset: 3.6cqw; border: .3cqw solid var(--mn-filet); pointer-events: none;
}
.mn__cadre::after { content: ""; position: absolute; inset: 1cqw; border: .12cqw solid var(--mn-filet); }

/* Les lignes en capitales espacées : l'occasion en haut, le vœu sous le nom. Josefin Sans, comme les
   affiches de naissance. L'espacement des lettres laisse un blanc après la dernière : on le compense à
   gauche pour que la ligne soit centrée sur l'encre. */
.mn__occasion, .mn__voeu, .mn__mention {
  font-family: "Josefin Sans", system-ui, sans-serif; text-transform: uppercase; font-weight: 600;
}
.mn__occasion {
  font-size: 2.3cqw; letter-spacing: .3em; padding-left: .3em; color: var(--mn-accent);
  margin-bottom: 3.4cqw; line-height: 1.35; text-wrap: balance; max-width: 80cqw;
}

/* Le chat : 58 % de la largeur. Le disque et son anneau débordent un peu de la boîte du dessin. */
.mn__chat { width: 58cqw; height: auto; flex: none; overflow: visible; display: block; }
.mn__anneau { fill: none; stroke: var(--mn-disque); stroke-width: 9; opacity: .55; }
.mn__disque { fill: var(--mn-disque); }
.mn__corps { fill: var(--mn-corps); }
.mn__tache { fill: var(--mn-tache, var(--mn-disque)); }
.mn__collier { fill: var(--mn-collier, var(--mn-disque)); }
.mn__grelot { fill: var(--mn-grelot); }
.mn__trait { fill: var(--mn-trait); }
/* Le kanji est en Noto Sans JP Bold, plus gras que le trait du chat : un filet de la couleur du corps
   l'amincit de quelques unités, il se lit comme les lignes qui l'entourent. */
.mn__kanji { fill: var(--mn-trait); stroke: var(--mn-corps); stroke-width: 11; stroke-linejoin: round; paint-order: stroke; }

.mn__nom {
  margin-top: 4.6cqw; width: 100%; font-style: italic; font-weight: 500; letter-spacing: .005em;
  font-size: calc(10.4cqw * var(--mn-echelle)); line-height: 1.05; white-space: nowrap; color: var(--mn-texte);
}
.mn__voeu {
  display: flex; align-items: center; justify-content: center; gap: 2.2cqw; margin-top: 2.6cqw;
  font-size: 2.5cqw; letter-spacing: .3em; color: var(--mn-accent);
}
.mn__voeu span { padding-left: .3em; }
.mn__voeu i { width: .9cqw; height: .9cqw; background: currentColor; transform: rotate(45deg); flex: none; }
.mn__phrase {
  margin-top: 4.4cqw; max-width: 72cqw; font-style: italic; font-weight: 500; font-size: 4.2cqw; line-height: 1.22;
  text-wrap: balance; color: var(--mn-texte);
}
.mn__mention {
  margin-top: 3.8cqw; font-size: 2.2cqw; letter-spacing: .24em; padding-left: .24em; font-weight: 400;
  color: var(--mn-doux); max-width: 76cqw; line-height: 1.4;
}
.affiche__affiche.mn .mn__mention.affiche-exemple { opacity: .6; }

/* ── Le formulaire ── */
.mn-occasions, .mn-styles, .mn-voeux { display: grid; gap: .8rem; }
.mn-occasions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mn-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mn-voeux { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mn-occasions input, .mn-styles input, .mn-voeux input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mn-occasions label, .mn-styles label, .mn-voeux label {
  display: flex; cursor: pointer; margin: 0; box-sizing: border-box; min-height: 4.8rem;
  border: .15rem solid rgba(var(--color-foreground), .15); border-radius: .8rem; line-height: 1.2;
}
.mn-occasions label { align-items: center; gap: 1rem; padding: .6rem 1rem; font-size: 1.4rem; font-weight: 600; text-align: left; }
.mn-oc-kanji {
  flex: none; width: 3.4rem; height: 3.4rem; display: inline-grid; place-items: center; border-radius: 50%;
  background: rgb(var(--ocre-fonce)); color: #fff; font-size: 1.8rem; font-weight: 700; line-height: 1;
}
.mn-voeux label { flex-direction: column; align-items: center; justify-content: center; gap: .3rem; padding: .6rem .2rem; font-size: 1.15rem; font-weight: 600; text-align: center; }
.mn-voeux svg { width: 3.6rem; height: 3.6rem; fill: rgb(var(--color-foreground)); }
.mn-styles label { flex-direction: column; align-items: flex-start; gap: .4rem; padding: .8rem 1rem 1rem; font-size: 1.4rem; font-weight: 600; }
.mn-styles small { font-size: 1.2rem; font-weight: 400; color: rgba(var(--color-foreground), .7); }
/* L'échantillon : le papier du style et son disque, en miniature. */
.mn-echantillon { width: 100%; height: 3.6rem; display: grid; place-items: center; border-radius: .4rem; background: var(--mn-fond); border: .1rem solid rgba(0, 0, 0, .12); }
.mn-echantillon i { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--mn-disque); box-shadow: 0 0 0 .3rem var(--mn-fond), 0 0 0 .4rem var(--mn-filet); }
.mn-occasions input:checked + label, .mn-styles input:checked + label, .mn-voeux input:checked + label { border-color: rgb(var(--color-foreground)); }
.mn-occasions input:focus-visible + label, .mn-styles input:focus-visible + label, .mn-voeux input:focus-visible + label {
  outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem;
}
.mn-idees { display: flex; gap: .6rem; margin-top: .6rem; align-items: flex-start; }
.mn-idees[hidden] { display: none; }
.mn-idees-liste { display: flex; flex-wrap: wrap; gap: .6rem; flex: 1; min-width: 0; }
.mn-idees-liste button {
  min-height: 4.4rem; padding: .4rem 1.2rem; border: .1rem solid currentColor; border-radius: 99rem; background: transparent;
  font: inherit; font-size: 1.3rem; cursor: pointer; text-align: left; max-width: 100%;
}
.mn-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;
}
.mn-de svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.mn-de svg circle { fill: currentColor; stroke: none; }
@media (min-width: 750px) { .mn-voeux { grid-template-columns: repeat(4, minmax(0, 1fr)); } }