/* ═══════════════════════════ La cuvée de la famille ═══════════════════════════
 *
 * Servie **seulement** sur sa fiche (`views/product-affiche.liquid`).
 *
 * ── L'étiquette d'une bouteille qui n'existe pas, quatre identités ──
 *
 * Le contenu et la structure ne bougent pas : une grappe, « Édition unique », le nom de la cuvée, le millésime
 * entre deux filets, « mis en bouteille par la famille … », un séparateur, trois notes de dégustation, puis
 * la mention de degré et « 75 cl ». Chaque style est une étiquette qu'on reconnaît sans la nommer, **et deux
 * sur quatre sont d'époque** (6 nov. 2026 : les quatre d'avant étaient des aplats d'interface, sans papier
 * ni matière) :
 * - **Étiquette 1900** : l'étiquette gravée d'une vieille cave — papier ivoire taché de rousseurs, double cadre
 *   lie-de-vin, quatre coins en fleuron, la grappe dans un médaillon, une rosace guillochée en filigrane,
 *   capitales de gravure (Playfair Display), notes en italique (Cormorant) ;
 * - **Belle époque** : l'affiche lithographiée d'un marchand de vin vers 1910 — bleu de nuit, crème, rouge
 *   tomate et jaune moutarde, la grappe en aplats devant des rayons, « Édition unique » sur un ruban à queue
 *   d'aronde, le nom en Anton à l'ombre portée rouge, coins en triangles ;
 * - **Noir et or** : la nuit et le filet doré, des capitales gravées (Marcellus), le nom en dégradé d'or,
 *   un éventail art déco, les coins en fleuron et la rosace en filigrane ;
 * - **Rosé** : rose pâle et prune, le nom à la plume (Pinyon Script), le reste en Josefin Sans, un store
 *   festonné en haut et en bas, des pois, la grappe en aplats.
 *
 * Polices servies par nous (point 2) : Playfair Display, Cormorant Garamond, Marcellus, Pinyon Script et
 * Josefin Sans par `theme.css`, Anton et Courier Prime ici. **Aucune marque, aucun terme protégé** : ni domaine,
 * ni appellation, ni logo de producteur — la grappe, la rosace et les fleurons sont dessinés par nous, dans la
 * page (`views/affiche-cuvee.liquid`) ; aucun filtre SVG, et **aucune ombre ne tient à `.affiche__affiche`** :
 * `cssDeRendu` la remet à zéro à la fabrication, tout cadre est sur l'étiquette ou un de ses pseudo-éléments.
 *
 * ── 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 `.cu` 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: "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;
}

/* --cu-fond : le papier de l'affiche, autour de l'étiquette ; --cu-etiq : le fond de l'étiquette ; --cu-bord :
   son bord ; --cu-filet : le filet intérieur et les séparateurs ; --cu-titre : le nom de la cuvée, le millésime
   et la famille ; --cu-texte : les notes ; --cu-accent : le surtitre, les titres de section, la mention de
   degré, la grappe. Les autres sont le décor propre à un style : --cu-tache (rousseurs du papier ancien),
   --cu-rayon (les rayons et les coins), --cu-feuille (la feuille de vigne), --cu-ombre (l'ombre portée du nom),
   --cu-or-1 / --cu-or-2 (le dégradé d'or), --cu-pois (les pois du rosé). */
[data-style="Étiquette 1900"] {
  --cu-fond: #e2d2ac; --cu-etiq: #f7efdc; --cu-bord: #6e1b26; --cu-filet: #a0412f;
  --cu-titre: #5a1220; --cu-texte: #2a1a15; --cu-accent: #7a1f2b;
  --cu-tache: #b07a3a4a; --cu-tache-2: #8a5a2a36; --cu-feuille: #7a1f2b;
}
[data-style="Belle époque"] {
  --cu-fond: #1d2c4d; --cu-etiq: #f4e6c3; --cu-bord: #1d2c4d; --cu-filet: #b5352b;
  --cu-titre: #1d2c4d; --cu-texte: #22243a; --cu-accent: #a82f25;
  --cu-rayon: #e0a526; --cu-feuille: #3c6e47; --cu-ombre: #b5352b;
}
[data-style="Noir et or"] {
  --cu-fond: #0b0a08; --cu-etiq: #17140e; --cu-bord: #c9a45c; --cu-filet: #c9a45c;
  --cu-titre: #ecd7a1; --cu-texte: #f3ead2; --cu-accent: #d9bb7a;
  --cu-or-1: #f6e3ab; --cu-or-2: #c29a45; --cu-rayon: #c9a45c;
}
[data-style="Rosé"] {
  --cu-fond: #f1c9cc; --cu-etiq: #fbeeee; --cu-bord: #a23b57; --cu-filet: #c9708a;
  --cu-titre: #8a2540; --cu-texte: #3b2229; --cu-accent: #8a2540;
  --cu-pois: #f7dde1; --cu-feuille: #5f8f5a;
}

/* ── L'affiche ──
 *
 * Tout est en `cqw`. L'étiquette prend toute la hauteur de l'affiche ; l'écart entre les formats s'absorbe
 * dans la hauteur des trois notes (une grille de trois rangées égales), jamais dans une taille de texte.
 * `--cu-t` est la taille du texte des notes, 1 ou moins : le serveur l'estime, le script la reprend au pixel. */
.cu {
  --cu-t: 1;
  --cu-f-titre: "Playfair Display", Georgia, serif; --cu-f-corps: "Cormorant Garamond", Georgia, serif;
  display: flex; flex-direction: column; padding: 4.6cqw;
  background-color: var(--cu-fond); color: var(--cu-texte); font-family: var(--cu-f-corps); line-height: 1.2;
}
.cu :where(p, ul) { margin: 0; padding: 0; }
.cu__etiquette {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative;
  background: var(--cu-etiq); border: .6cqw solid var(--cu-bord); padding: 4.4cqw 6cqw 3.6cqw;
}

/* Les ornements : cachés par défaut, chaque style montre les siens. Ils passent derrière le texte (z-index 0),
   tout ce qui s'écrit est au-dessus (z-index 1). */
.cu__rosace, .cu__coin { display: none; position: absolute; z-index: 0; pointer-events: none; fill: none; stroke: var(--cu-filet); }
.cu__coin { width: 8cqw; height: 8cqw; stroke-width: 1.5; stroke-linecap: round; }
.cu__coin-plein { fill: var(--cu-filet); stroke: none; }
.cu__coin--hg { top: 2.4cqw; left: 2.4cqw; }
.cu__coin--hd { top: 2.4cqw; right: 2.4cqw; transform: scaleX(-1); }
.cu__coin--bg { bottom: 2.4cqw; left: 2.4cqw; transform: scaleY(-1); }
.cu__coin--bd { bottom: 2.4cqw; right: 2.4cqw; transform: scale(-1); }
.cu__rosace { left: 50%; top: 58%; width: 80cqw; height: 80cqw; margin: -40cqw 0 0 -40cqw; stroke-width: .35; opacity: .16; }
.cu__tete, .cu__nom, .cu__millesime, .cu__mise, .cu__sep, .cu__notes-titre, .cu__notes, .cu__pied { position: relative; z-index: 1; }

/* La grappe : sans style particulier, un trait ; certains styles la peignent en aplats. */
.cu__tige, .cu__feuille { fill: none; }

/* La tête : la grappe et le surtitre. */
.cu__tete { flex: none; display: flex; flex-direction: column; align-items: center; }
.cu__icone { width: 10.5cqw; height: auto; fill: none; stroke: var(--cu-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cu__kicker { margin-top: 1cqw; font-weight: 700; font-size: 2.2cqw; letter-spacing: .32em; text-transform: uppercase; color: var(--cu-accent); }

/* Le nom de la cuvée en très grand, le millésime entre deux filets, la famille qui signe. */
.cu__nom {
  flex: none; width: 100%; white-space: nowrap; margin-top: 2.2cqw; font-family: var(--cu-f-titre); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--cu-titre); font-size: calc(9.4cqw * var(--ech, 1)); line-height: 1.15;
}
.cu__millesime {
  flex: none; width: 100%; display: flex; align-items: center; gap: 3cqw; margin-top: 1.4cqw;
  font-family: var(--cu-f-titre); font-weight: 400; font-size: 12.5cqw; line-height: 1.05; color: var(--cu-titre); font-variant-numeric: lining-nums;
}
.cu__millesime span { flex: none; }
.cu__trait { flex: 1; height: 0; border-top: .35cqw solid var(--cu-filet); }
.cu__mise { flex: none; width: 100%; margin-top: 2cqw; font-size: 3.4cqw; font-weight: 600; letter-spacing: .04em; color: var(--cu-texte); overflow-wrap: anywhere; text-wrap: balance; }
.cu__famille {
  display: inline-block; max-width: 100%; white-space: nowrap; vertical-align: baseline; text-transform: uppercase; font-weight: 700;
  letter-spacing: .12em; color: var(--cu-titre); font-size: calc(1.18em * var(--ech, 1));
}

/* Le séparateur : un filet, un losange, un filet. */
.cu__sep { flex: none; width: 100%; display: flex; align-items: center; gap: 2cqw; margin: 3cqw 0 2.2cqw; }
.cu__sep i { flex: 1; border-top: .3cqw solid var(--cu-filet); }
.cu__sep b { width: 1.6cqw; height: 1.6cqw; background: var(--cu-accent); transform: rotate(45deg); }

/* Les trois notes : une grille de trois rangées égales, qui absorbe la hauteur du format. */
.cu__notes-titre { flex: none; font-weight: 700; font-size: 2.4cqw; letter-spacing: .3em; text-transform: uppercase; color: var(--cu-accent); }
.cu__notes {
  flex: 1; min-height: 0; width: 100%; list-style: none; margin-top: 1.6cqw; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 1cqw;
}
.cu__note {
  min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 2cqw;
  font-style: italic; font-weight: 600; font-size: calc(5cqw * var(--cu-t)); line-height: 1.2; color: var(--cu-texte); overflow-wrap: anywhere; text-wrap: balance;
}

/* Un petit losange entre deux notes, pour qu'on les lise comme trois lignes d'une même carte. */
.cu__note + .cu__note { position: relative; }
.cu__note + .cu__note::before {
  content: ""; position: absolute; top: -1cqw; left: 50%; width: .9cqw; height: .9cqw; margin-left: -.45cqw;
  background: var(--cu-filet); transform: rotate(45deg);
}

/* Le pied : la mention de degré, et « 75 cl ». */
.cu__pied {
  flex: none; width: 100%; margin-top: 2cqw; padding-top: 2.2cqw; border-top: .3cqw solid var(--cu-filet); font-variant-numeric: lining-nums;
  display: flex; align-items: baseline; justify-content: center; gap: 3.4cqw; flex-wrap: nowrap;
}
.cu__degre { white-space: nowrap; font-weight: 700; font-size: calc(3.4cqw * var(--ech, 1)); letter-spacing: .08em; color: var(--cu-accent); text-transform: uppercase; min-width: 0; }
.cu__degre[hidden] { display: none; }
.cu__cl { flex: none; font-weight: 700; font-size: 3.4cqw; letter-spacing: .12em; color: var(--cu-titre); }

/* ── Étiquette 1900 : l'étiquette gravée d'une vieille cave ──
 * Le papier est ivoire et vieilli : rousseurs et bords plus sombres en dégradés posés **sur l'étiquette** (sous le
 * texte). Un double cadre lie-de-vin, quatre fleurons, la grappe dans un médaillon à double anneau, la rosace
 * guillochée en filigrane derrière les notes, des filets doubles autour du millésime. */
.cu[data-style="Étiquette 1900"] { padding: 4cqw; }
.cu[data-style="Étiquette 1900"] .cu__etiquette {
  border-width: .8cqw; padding-top: 5.4cqw; padding-bottom: 4.6cqw;
  box-shadow: inset 0 0 0 1.2cqw var(--cu-etiq), inset 0 0 0 1.55cqw var(--cu-filet), inset 0 0 0 2.2cqw var(--cu-etiq), inset 0 0 0 2.45cqw var(--cu-filet),
    inset 0 0 9cqw var(--cu-tache);
  background-image:
    radial-gradient(ellipse 34% 20% at 6% 4%, var(--cu-tache), transparent),
    radial-gradient(ellipse 30% 24% at 96% 38%, var(--cu-tache-2), transparent),
    radial-gradient(ellipse 36% 18% at 10% 96%, var(--cu-tache), transparent),
    radial-gradient(ellipse 22% 14% at 88% 90%, var(--cu-tache-2), transparent),
    radial-gradient(circle at 24% 62%, var(--cu-tache) 0 .5cqw, transparent .7cqw),
    radial-gradient(circle at 78% 21%, var(--cu-tache-2) 0 .45cqw, transparent .65cqw),
    radial-gradient(circle at 62% 80%, var(--cu-tache) 0 .35cqw, transparent .55cqw),
    radial-gradient(circle at 41% 11%, var(--cu-tache-2) 0 .3cqw, transparent .5cqw);
}
.cu[data-style="Étiquette 1900"] .cu__rosace, .cu[data-style="Étiquette 1900"] .cu__coin { display: block; stroke: var(--cu-bord); }
/* Le pied tient entre les deux fleurons du bas : la ligne du degré se mesure contre sa propre boîte (`resserrer`), qui doit donc être plus étroite. */
.cu[data-style="Étiquette 1900"] .cu__pied, .cu[data-style="Noir et or"] .cu__pied { width: auto; align-self: stretch; margin-inline: 4.8cqw; }
.cu[data-style="Étiquette 1900"] .cu__coin-plein { fill: var(--cu-bord); }
.cu[data-style="Étiquette 1900"] .cu__rosace { opacity: .08; }
.cu[data-style="Étiquette 1900"] .cu__icone {
  box-sizing: content-box; width: 9.6cqw; padding: 1.1cqw; border: .35cqw solid var(--cu-bord); border-radius: 50%;
  box-shadow: 0 0 0 .75cqw var(--cu-etiq), 0 0 0 1cqw var(--cu-filet); stroke: var(--cu-bord);
}
.cu[data-style="Étiquette 1900"] .cu__feuille { fill: var(--cu-feuille); stroke: none; }
.cu[data-style="Étiquette 1900"] .cu__grains circle { fill: var(--cu-bord); stroke: none; }
.cu[data-style="Étiquette 1900"] .cu__kicker { margin-top: 2.2cqw; font-size: 2.1cqw; letter-spacing: .4em; }
.cu[data-style="Étiquette 1900"] .cu__nom { letter-spacing: .07em; font-size: calc(9cqw * var(--ech, 1)); }
.cu[data-style="Étiquette 1900"] .cu__millesime { font-weight: 700; font-size: 11.5cqw; }
.cu[data-style="Étiquette 1900"] .cu__trait { height: .9cqw; border-top: .3cqw solid var(--cu-filet); border-bottom: .3cqw solid var(--cu-filet); }
.cu[data-style="Étiquette 1900"] .cu__mise { font-style: italic; font-weight: 600; font-size: 3.5cqw; letter-spacing: .02em; }
.cu[data-style="Étiquette 1900"] .cu__famille { font-style: normal; font-weight: 700; letter-spacing: .16em; }
.cu[data-style="Étiquette 1900"] .cu__sep b { width: 2cqw; height: 2cqw; background: var(--cu-bord); box-shadow: 0 0 0 .5cqw var(--cu-etiq), 0 0 0 .75cqw var(--cu-filet); }
.cu[data-style="Étiquette 1900"] .cu__note { font-size: calc(5.1cqw * var(--cu-t)); }
.cu[data-style="Étiquette 1900"] .cu__note + .cu__note::before { background: var(--cu-bord); }

/* ── Belle époque : l'affiche lithographiée d'un marchand de vin ──
 * Quatre couleurs d'imprimeur : bleu de nuit, crème, rouge tomate, jaune moutarde. Les rayons sortent du haut de
 * l'étiquette (l'étiquette rogne ce qui dépasse), « Édition unique » est un ruban à queue d'aronde, la grappe
 * est peinte en aplats, le nom en Anton porte une ombre franche, les coins sont des triangles moutarde. */
.cu[data-style="Belle époque"] { --cu-f-titre: "Anton", Impact, sans-serif; padding: 3.4cqw; }
.cu[data-style="Belle époque"] .cu__etiquette {
  overflow: hidden; border-width: .9cqw; padding-top: 4.6cqw;
  box-shadow: inset 0 0 0 1cqw var(--cu-etiq), inset 0 0 0 1.4cqw var(--cu-bord), inset 0 0 0 1.9cqw var(--cu-etiq), inset 0 0 0 2.2cqw var(--cu-filet);
  background-image:
    linear-gradient(135deg, var(--cu-rayon) 0 5.5cqw, transparent 5.5cqw),
    linear-gradient(225deg, var(--cu-rayon) 0 5.5cqw, transparent 5.5cqw),
    linear-gradient(45deg, var(--cu-rayon) 0 5.5cqw, transparent 5.5cqw),
    linear-gradient(315deg, var(--cu-rayon) 0 5.5cqw, transparent 5.5cqw);
  background-size: 51% 51%; background-position: 0 0, 100% 0, 0 100%, 100% 100%; background-repeat: no-repeat;
}
.cu[data-style="Belle époque"] .cu__tete::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 24%; width: 78cqw; height: 78cqw; margin: -39cqw 0 0 -39cqw;
  background: repeating-conic-gradient(from -4deg, var(--cu-rayon) 0 4deg, transparent 4deg 10deg);
  -webkit-mask-image: radial-gradient(circle, black 8%, transparent 48%); mask-image: radial-gradient(circle, black 8%, transparent 48%);
  opacity: .62;
}
.cu[data-style="Belle époque"] .cu__icone { width: 14.5cqw; stroke: var(--cu-bord); stroke-width: 1.6; }
.cu[data-style="Belle époque"] .cu__tige { stroke: var(--cu-bord); stroke-width: 2.4; }
.cu[data-style="Belle époque"] .cu__feuille { fill: var(--cu-feuille); stroke: var(--cu-bord); stroke-width: 1.4; }
.cu[data-style="Belle époque"] .cu__grains circle { fill: var(--cu-accent); stroke: var(--cu-bord); stroke-width: 1.4; }
.cu[data-style="Belle époque"] .cu__kicker {
  margin-top: 1.4cqw; padding: .9cqw 6.5cqw; background: var(--cu-accent); color: var(--cu-etiq); font-size: 2.3cqw; letter-spacing: .3em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 2.4cqw) 50%, 100% 100%, 0 100%, 2.4cqw 50%);
}
.cu[data-style="Belle époque"] .cu__nom {
  font-weight: 400; letter-spacing: .06em; font-size: calc(11cqw * var(--ech, 1)); line-height: 1.1; margin-top: 2.6cqw;
  text-shadow: .5cqw .5cqw 0 var(--cu-ombre);
}
.cu[data-style="Belle époque"] .cu__millesime { font-weight: 900; font-size: 12cqw; }
.cu[data-style="Belle époque"] .cu__trait { height: .8cqw; border-top: .8cqw dotted var(--cu-filet); }
.cu[data-style="Belle époque"] .cu__mise { font-weight: 700; font-size: 3.2cqw; letter-spacing: .06em; text-transform: uppercase; }
.cu[data-style="Belle époque"] .cu__famille { font-weight: 400; letter-spacing: .08em; font-family: "Anton", Impact, sans-serif; font-size: calc(1.2em * var(--ech, 1)); }
.cu[data-style="Belle époque"] .cu__sep i { border-top: .5cqw solid var(--cu-bord); }
.cu[data-style="Belle époque"] .cu__sep b { width: 2.2cqw; height: 2.2cqw; background: var(--cu-filet); transform: rotate(45deg); }
.cu[data-style="Belle époque"] .cu__note { font-size: calc(5.2cqw * var(--cu-t)); font-weight: 700; }
.cu[data-style="Belle époque"] .cu__note + .cu__note::before { width: 1.3cqw; height: 1.3cqw; margin-left: -.65cqw; top: -1.2cqw; background: var(--cu-filet); border-radius: 50%; transform: none; }
.cu[data-style="Belle époque"] .cu__pied { border-top: .8cqw double var(--cu-bord); }

/* ── Noir et or : la nuit, le filet doré, un éventail art déco ──
 * Le nom est en dégradé d'or (`background-clip: text`, du texte qui reste du texte pour la fabrication), un éventail de
 * rayons dorés sort du haut de l'étiquette, les quatre fleurons et la rosace en filigrane sont dorés eux aussi. */
.cu[data-style="Noir et or"] { --cu-f-titre: "Marcellus", "Playfair Display", Georgia, serif; }
.cu[data-style="Noir et or"] .cu__etiquette {
  overflow: hidden; border-width: .5cqw;
  box-shadow: inset 0 0 0 1.5cqw var(--cu-etiq), inset 0 0 0 1.8cqw var(--cu-filet), inset 0 0 0 2.6cqw var(--cu-etiq), inset 0 0 0 2.8cqw var(--cu-filet);
}
.cu[data-style="Noir et or"] .cu__rosace, .cu[data-style="Noir et or"] .cu__coin { display: block; }
.cu[data-style="Noir et or"] .cu__rosace { stroke: var(--cu-rayon); opacity: .12; }
.cu[data-style="Noir et or"] .cu__coin { stroke: var(--cu-or-1); width: 7.4cqw; height: 7.4cqw; }
.cu[data-style="Noir et or"] .cu__coin-plein { fill: var(--cu-or-1); }
.cu[data-style="Noir et or"] .cu__tete::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 26%; width: 90cqw; height: 90cqw; margin: -45cqw 0 0 -45cqw;
  background: repeating-conic-gradient(from -5deg, var(--cu-rayon) 0 2deg, transparent 2deg 7.5deg);
  -webkit-mask-image: radial-gradient(circle, black 5%, transparent 44%); mask-image: radial-gradient(circle, black 5%, transparent 44%);
  opacity: .3;
}
.cu[data-style="Noir et or"] .cu__icone { stroke: var(--cu-or-1); }
.cu[data-style="Noir et or"] .cu__grains circle { fill: var(--cu-etiq); stroke: var(--cu-or-1); stroke-width: 2; }
.cu[data-style="Noir et or"] .cu__nom {
  font-weight: 400; letter-spacing: .1em; font-size: calc(9cqw * var(--ech, 1));
  color: var(--cu-or-1); background: linear-gradient(180deg, var(--cu-or-1) 18%, var(--cu-or-2) 52%, var(--cu-or-1) 82%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cu[data-style="Noir et or"] .cu__millesime { font-weight: 400; letter-spacing: .06em; }
.cu[data-style="Noir et or"] .cu__trait { height: .9cqw; border-top: .3cqw solid var(--cu-filet); border-bottom: .3cqw solid var(--cu-filet); }
.cu[data-style="Noir et or"] .cu__famille { font-weight: 400; letter-spacing: .14em; }
.cu[data-style="Noir et or"] .cu__sep b { box-shadow: 0 0 0 .5cqw var(--cu-etiq), 0 0 0 .7cqw var(--cu-filet); }

/* ── Rosé : rose pâle et prune, le nom à la plume, un store festonné et des pois ──
 * Les festons sont deux rangées de demi-cercles posées en haut et en bas **de l'étiquette** (pseudo-éléments, rognés par son
 * arrondi) ; les pois sont à peine plus foncés que le fond ; la grappe est peinte en aplats, prune et sauge. */
.cu[data-style="Rosé"] { --cu-f-titre: "Pinyon Script", "Brush Script MT", cursive; --cu-f-corps: "Josefin Sans", system-ui, sans-serif; }
.cu[data-style="Rosé"] .cu__etiquette {
  overflow: hidden; border-radius: 3.6cqw; border-width: .5cqw; padding-top: 6.4cqw; padding-bottom: 6cqw;
  box-shadow: inset 0 0 0 1.4cqw var(--cu-etiq), inset 0 0 0 1.7cqw var(--cu-filet);
  background-image: radial-gradient(circle at 50% 50%, var(--cu-pois) 0 .9cqw, transparent 1cqw);
  background-size: 5.2cqw 5.2cqw;
}
.cu[data-style="Rosé"] .cu__etiquette::before, .cu[data-style="Rosé"] .cu__etiquette::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2.8cqw; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 0, var(--cu-filet) 0 1.3cqw, transparent 1.38cqw) 0 0 / 3.6cqw 2.8cqw repeat-x;
}
.cu[data-style="Rosé"] .cu__etiquette::before { top: 0; }
.cu[data-style="Rosé"] .cu__etiquette::after { bottom: 0; transform: scaleY(-1); }
.cu[data-style="Rosé"] .cu__icone { width: 11.5cqw; }
.cu[data-style="Rosé"] .cu__tige { stroke: var(--cu-feuille); stroke-width: 2.6; }
.cu[data-style="Rosé"] .cu__feuille { fill: var(--cu-feuille); stroke: none; }
.cu[data-style="Rosé"] .cu__grains circle { fill: var(--cu-accent); stroke: none; }
.cu[data-style="Rosé"] .cu__nom { font-weight: 400; text-transform: none; letter-spacing: .01em; font-size: calc(12cqw * var(--ech, 1)); line-height: 1.2; }
.cu[data-style="Rosé"] .cu__millesime { font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 300; letter-spacing: .22em; font-size: 10.5cqw; }
.cu[data-style="Rosé"] .cu__trait { border-top-style: dotted; border-top-width: .6cqw; }
.cu[data-style="Rosé"] .cu__mise { font-weight: 400; }
.cu[data-style="Rosé"] .cu__famille { font-weight: 600; }
.cu[data-style="Rosé"] .cu__note { font-style: normal; font-weight: 400; font-size: calc(4.3cqw * var(--cu-t)); }
.cu[data-style="Rosé"] .cu__sep { gap: 2.4cqw; }
.cu[data-style="Rosé"] .cu__sep b { width: 2cqw; height: 2cqw; border-radius: 50%; transform: none; box-shadow: 0 0 0 .5cqw var(--cu-etiq), 0 0 0 .8cqw var(--cu-filet); }

/* ── Le formulaire ── */
.cu-notes { display: grid; gap: 1.2rem; margin-bottom: 1.6rem; }
.cu-notes__titre { font-weight: 700; font-size: 1.6rem; margin: 0; }
.cu-note { padding: 0; margin: 0; min-width: 0; }
.cu-note label { display: block; font-size: 1.3rem; margin-bottom: .3rem; }
.cu-note__rang { display: flex; gap: .6rem; align-items: end; }
.cu-note__rang input { flex: 1; min-width: 0; }
.cu-date__label { display: block; margin-top: 1rem; font-size: 1.3rem; }
.cu-date { width: 100%; max-width: 22rem; }
.cu-de {
  width: 4.4rem; height: 4.4rem; display: inline-flex; align-items: center; justify-content: center;
  border: .1rem solid currentColor; border-radius: .8rem; background: transparent; cursor: pointer; flex: none;
}
.cu-de svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.cu-de svg circle { fill: currentColor; stroke: none; }
.cu-de[hidden], .cu-tout[hidden], .cu-idees[hidden] { display: none; }
.cu-tout { justify-self: start; }
.cu-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.cu-idees 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%;
}
.cu-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cu-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.cu-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;
}
.cu-styles label small { font-weight: 400; font-size: 1.2rem; opacity: .8; }
.cu-styles input:checked + label { border-color: rgb(var(--color-foreground)); }
.cu-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.cu-echantillon {
  display: grid; gap: .3rem; width: 100%; max-width: 10rem; padding: .5rem; text-align: center;
  background: var(--cu-etiq); border: .2rem solid var(--cu-bord); border-radius: .4rem;
}
.cu-echantillon b {
  font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 1.3rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cu-titre); line-height: 1.3;
}
.cu-echantillon i { display: block; height: .5rem; border-radius: .3rem; background: var(--cu-filet); opacity: .85; }
@media (min-width: 750px) { .cu-styles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }