/* ═══════════════════════════ Vos mots en vinyle ═══════════════════════════
 *
 * Le texte du client en sillons autour d'un disque. Servie **seulement** sur sa fiche
 * (`views/product-affiche.liquid`).
 *
 * ── Quatre styles, une seule mise en page ──
 *
 * - **Classique** : crème et noir, la maquette que le marché vend. Roboto Condensed en capitales.
 * - **Minuit** : bleu nuit et or pâle, Josefin Sans très espacée.
 * - **Moutarde** : jaune des années soixante-dix, brun, Fredoka.
 * - **Bordeaux** : rose pâle et bordeaux, Cormorant en italique.
 *
 * Les sillons sont toujours en Roboto Condensed : leur largeur est calculée pour cette police
 * (`vinyle-calcul.mjs`), un style ne la change 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 `.vy` exprès, pour que les
 * échantillons du formulaire se colorent avec les mêmes variables.
 *
 * --v-fond : le papier ; --v-texte : le titre et l'artiste ; --v-doux : label, sortie et mot du
 * bas ; --v-disque : le vinyle ; --v-sillon : le texte des sillons ; --v-etiquette : le rond du
 * milieu ; --v-trait : le filet sous le titre et les anneaux du disque.
 * **Contrastes mesurés** (WCAG) : le texte sur le papier ≥ 7, le doux ≥ 4,5, le sillon sur le
 * disque ≥ 10 — un texte de 2 mm doit se lire sans effort.
 */
[data-style="Classique"] { --v-fond: #f2ecde; --v-texte: #17140f; --v-doux: #4a4337; --v-disque: #17140f; --v-sillon: #f0e8d4; --v-etiquette: #b8322a; --v-trait: #f0e8d4; }
[data-style="Minuit"] { --v-fond: #0f1a2e; --v-texte: #f3ead2; --v-doux: #c3bda9; --v-disque: #05080f; --v-sillon: #ead9a8; --v-etiquette: #c9a64d; --v-trait: #ead9a8; }
[data-style="Moutarde"] { --v-fond: #e9b53c; --v-texte: #2b1a0e; --v-doux: #4a2f14; --v-disque: #2b1a0e; --v-sillon: #f7e5b8; --v-etiquette: #c0481d; --v-trait: #f7e5b8; }
[data-style="Bordeaux"] { --v-fond: #f4e5e1; --v-texte: #4a0f1e; --v-doux: #6a3a44; --v-disque: #4a0f1e; --v-sillon: #f8e0d9; --v-etiquette: #d99f8d; --v-trait: #f8e0d9; }

/* Polices de titre : par style, une variable que le titre lit. */
[data-style="Classique"] { --v-f-titre: "Roboto Condensed", system-ui, sans-serif; --v-titre-graisse: 800; --v-titre-espace: .02em; --v-titre-casse: uppercase; --v-titre-style: normal; --v-titre-k: .56; --v-f-ligne: "Cormorant Garamond", Georgia, serif; }
[data-style="Minuit"] { --v-f-titre: "Josefin Sans", system-ui, sans-serif; --v-titre-graisse: 600; --v-titre-espace: .16em; --v-titre-casse: uppercase; --v-titre-style: normal; --v-titre-k: .8; --v-f-ligne: "Josefin Sans", system-ui, sans-serif; }
[data-style="Moutarde"] { --v-f-titre: "Fredoka", system-ui, sans-serif; --v-titre-graisse: 600; --v-titre-espace: 0; --v-titre-casse: none; --v-titre-style: normal; --v-titre-k: .58; --v-f-ligne: "Fredoka", system-ui, sans-serif; }
[data-style="Bordeaux"] { --v-f-titre: "Cormorant Garamond", Georgia, serif; --v-titre-graisse: 600; --v-titre-espace: 0; --v-titre-casse: none; --v-titre-style: italic; --v-titre-k: .44; --v-f-ligne: "Cormorant Garamond", Georgia, serif; }

/* ── L'affiche ──
 *
 * Tout est en `cqw`. Les rapports vendus vont de 1,333 (30 × 40) à 1,5 (40 × 60) : l'écart
 * s'absorbe dans la hauteur de la case du disque, qui garde son rond (`meet`), jamais dans une
 * taille de texte qui changerait avec le format. */
.vy {
  --fond: var(--v-fond); --texte: var(--v-texte);
  padding: 7cqw 7cqw 5.5cqw; line-height: 1.15; gap: 0;
}
.vy p { margin: 0; }
.vy [hidden] { display: none !important; }

/* La tête : le titre à gauche, la fiche du disque à droite, un filet dessous. Le titre tient sur
   une ligne s'il peut, sinon sur deux (`vy__titre--deux`), et se resserre (`--ech`, estimé ici,
   repris au pixel par le script) : un titre de vingt-huit signes ne rapetisse pas à l'excès sous
   une fiche qui, elle, ne bouge pas. */
.vy__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 3cqw; }
.vy__titre {
  /* Pas d'`overflow: hidden` : l'accent d'un « È » majuscule dépasse de l'interligne, et il était
     rogné. Le script mesure `scrollWidth`, qui compte le débordement sans qu'on le cache. */
  flex: 1 1 auto; min-width: 0; white-space: nowrap;
  font-family: var(--v-f-titre); font-weight: var(--v-titre-graisse); letter-spacing: var(--v-titre-espace);
  text-transform: var(--v-titre-casse); font-style: var(--v-titre-style);
  font-size: calc(9.2cqw * var(--ech, 1)); line-height: 1.02; padding-bottom: .12em; color: var(--v-texte);
}
.vy__titre--deux { white-space: normal; text-wrap: balance; }
/* Un mot plus long que la case — vingt-huit « W » d'affilée — se coupe en dernier recours plutôt que de
   déborder de l'affiche. */
.vy__titre, .vy__artiste, .vy__message { overflow-wrap: anywhere; }
.vy__fiche { flex: none; max-width: 36cqw; text-align: right; font-family: var(--v-f-ligne); color: var(--v-doux); padding-bottom: .6cqw; }
.vy__artiste { font-size: 2.5cqw; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v-texte); }
.vy__ligne { font-size: 2.2cqw; font-style: italic; line-height: 1.25; overflow-wrap: anywhere; }
.vy[data-style="Minuit"] .vy__ligne, .vy[data-style="Moutarde"] .vy__ligne { font-style: normal; font-size: 2cqw; }
.vy__filet { flex: none; height: .45cqw; background: var(--v-texte); margin-top: 2cqw; }

/* Le disque : une case qui prend la place laissée, un SVG carré qui s'y inscrit. */
.vy__disque { position: relative; flex: 1; min-height: 0; margin: 3.5cqw -1.5cqw 3cqw; }
.vy__disque svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vy__vinyle { fill: var(--v-disque); }
.vy__bord { fill: none; stroke: var(--v-trait); stroke-width: 1.4; opacity: .35; }
.vy__reflet { fill: var(--v-sillon); opacity: .07; }
.vy__etiquette { fill: var(--v-etiquette); }
.vy__anneau { fill: none; stroke: var(--v-fond); stroke-width: 2; opacity: .7; }
.vy__trou { fill: var(--v-fond); }
.vy__sillons text { font-family: "Roboto Condensed", system-ui, sans-serif; font-weight: 500; fill: var(--v-sillon); }

.vy__message {
  flex: none; text-align: center; font-family: var(--v-f-ligne); font-size: 2cqw; font-weight: 600;
  letter-spacing: .18em; padding-left: .18em; text-transform: uppercase; color: var(--v-doux);
}
.vy[data-style="Bordeaux"] .vy__message { font-style: italic; text-transform: none; letter-spacing: .04em; font-size: 2.8cqw; }

/* ── Le formulaire ── */
.vy-note { font-size: 1.25rem; line-height: 1.4; margin: .2rem 0 0; color: rgba(var(--color-foreground), .7); }
.vy-note--compteur { font-variant-numeric: tabular-nums; }
.affiche__champ textarea { font: inherit; font-size: 1.6rem; padding: .8rem .9rem; border: 1px solid rgba(var(--color-foreground), .3); border-radius: 6px; width: 100%; resize: vertical; background: rgb(var(--color-background)); color: inherit; line-height: 1.4; }
.vy-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.vy-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vy-styles label {
  display: flex; flex-direction: column; align-items: center; gap: .4rem; cursor: pointer; margin: 0;
  font-size: 1.4rem; font-weight: 600; text-align: center; line-height: 1.25; min-height: 4.4rem;
  border: .15rem solid rgba(var(--color-foreground), .15); border-radius: .8rem; padding: .8rem .6rem;
}
.vy-styles label small { font-weight: 400; font-size: 1.2rem; opacity: .8; }
.vy-styles input:checked + label { border-color: rgb(var(--color-foreground)); }
.vy-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
/* L'échantillon : le papier du style, et un petit disque dessus. */
.vy-echantillon {
  display: grid; place-items: center; width: 100%; max-width: 12rem; height: 5.6rem; border-radius: .4rem;
  background: var(--v-fond); border: .1rem solid rgba(var(--color-foreground), .15);
}
.vy-echantillon i {
  display: block; width: 4.2rem; height: 4.2rem; border-radius: 50%; background: var(--v-disque);
  box-shadow: inset 0 0 0 .5rem var(--v-disque), inset 0 0 0 .6rem var(--v-sillon);
  background-image: radial-gradient(circle, var(--v-fond) 0 .2rem, var(--v-etiquette) .2rem 1.1rem, var(--v-disque) 1.1rem);
}