/* ═══════════════════ L'apéro et le pastaga : deux affiches, un cadre à angles droits ═══════════════════
 *
 * Servie **seulement** sur leurs fiches (`views/product-affiche.liquid`) : une mise en page d'affiche n'a rien à
 * faire dans le chemin critique du reste du site.
 *
 * ── Ce que la feuille tient ──
 *
 * - **Aucun angle arrondi** (Fred, 6 nov. 2026 : « les angles de l'affiche carrés, pas arrondis », puis « idem coins
 *   carrés » pour la seconde). Les références arrondissent et échancrent leurs cadres et leurs cartouches ; ici
 *   le cadre, les cartouches, la dédicace et les mentions ont leurs quatre angles droits, et un essai refuse tout
 *   `border-radius` entre le début de la feuille et la section « Le formulaire ». Le cadre est **double** (un filet
 *   fin dehors, un trait épais dedans) et porte un petit losange à chaque angle : la seule ornementation, et elle a
 *   des pointes, pas des courbes.
 * - **L'illustration est de l'image, tout le reste est du texte** : un fichier sur fond blanc pur, posé en
 *   `mix-blend-mode: multiply` pour se fondre dans le papier. Le papier vieilli est un dégradé, pas une image. Un
 *   halo pêche derrière le verre le fait ressortir — c'est lui qui donne à la page sa chaleur.
 * - **Tout est en `cqw`** : l'écart entre les cinq formats s'absorbe dans la hauteur de l'illustration, qui prend
 *   la place qui reste (avec un plancher), jamais dans la taille d'un texte. `--bu-e1`, `--bu-e2` et `--bu-ep`
 *   resserrent les titres et les prénoms, `--bu-t` le texte du bas : le serveur estime, le script reprend au pixel.
 *
 * ── 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 `.bu` exprès, pour que les échantillons du formulaire se colorent avec les
 * mêmes variables. Les quatre papiers de chaque variante sont clairs : l'illustration est en `multiply`.
 */
@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;
}

/* papier, bord du papier (là où il a vieilli), fond des cartouches, filets du cadre */
[data-style="Parchemin"] { --bu-papier: #f7e8cc; --bu-papier-2: #e9cf9e; --bu-cartouche: #fcf3e1; --bu-filet: #6b4f33; --bu-taches: .16; }
[data-style="Blanc"]     { --bu-papier: #fffdf9; --bu-papier-2: #f1ebdf; --bu-cartouche: #ffffff; --bu-filet: #5a4838; --bu-taches: 0; }
[data-style="Pêche"]     { --bu-papier: #fde4d1; --bu-papier-2: #f4c3a0; --bu-cartouche: #fff2e8; --bu-filet: #77472e; --bu-taches: .08; }
[data-style="Menthe"]    { --bu-papier: #e5f1e3; --bu-papier-2: #c4dcc6; --bu-cartouche: #f4faf2; --bu-filet: #3d6649; --bu-taches: .06; }
[data-style="Soleil"]    { --bu-papier: #fde68f; --bu-papier-2: #f3c64c; --bu-cartouche: #fff7de; --bu-filet: #6d4f14; --bu-taches: .12; }
[data-style="Crème"]     { --bu-papier: #fbf2de; --bu-papier-2: #ecdcb6; --bu-cartouche: #fffaf0; --bu-filet: #5f4b2c; --bu-taches: .1; }

/* l'encre, l'accent et le halo de chaque variante */
.bu, .bu-styles { --bu-encre: #1b2a41; --bu-blanc: #ffffff; }
.bu[data-variante="apero"] { --bu-accent: #bd4607; --bu-contour: #3a1707; --bu-ombre: rgba(209, 80, 11, .30); --bu-halo: rgba(255, 150, 60, .32); --bu-bleu: #2f5d7c; }
.bu[data-variante="pastaga"] { --bu-accent: #1d4f86; --bu-contour: #1b2a41; --bu-ombre: rgba(245, 190, 40, .85); --bu-halo: rgba(255, 252, 232, .9); --bu-bleu: #2c6aa3; }

/* ── L'affiche ── */
.bu {
  --bu-t: 1; --bu-e1: 1; --bu-e2: 1; --bu-ep: 1;
  position: relative; display: flex; padding: 3.2cqw; isolation: isolate; color: var(--bu-encre);
  font-family: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif; line-height: 1.18;
  background:
    radial-gradient(ellipse at 14% 10%, rgba(170, 110, 40, var(--bu-taches)), transparent 34%),
    radial-gradient(ellipse at 90% 94%, rgba(170, 110, 40, var(--bu-taches)), transparent 38%),
    radial-gradient(ellipse at 50% 46%, transparent 52%, var(--bu-papier-2) 135%),
    var(--bu-papier);
}
.bu[data-variante="pastaga"] {
  background:
    radial-gradient(ellipse at 14% 10%, rgba(170, 110, 40, var(--bu-taches)), transparent 34%),
    radial-gradient(ellipse at 50% 42%, transparent 50%, var(--bu-papier-2) 140%),
    linear-gradient(180deg, color-mix(in srgb, var(--bu-papier) 72%, var(--bu-blanc)) 0%, var(--bu-papier) 58%, var(--bu-papier-2) 100%);
}
/* le filet fin, dehors : le cadre épais vient dedans */
.bu::before { content: ""; position: absolute; inset: 2cqw; border: .28cqw solid var(--bu-filet); pointer-events: none; }
.bu :where(p) { margin: 0; padding: 0; }
.bu [hidden] { display: none !important; }

.bu__cadre {
  flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 1.8cqw; position: relative;
  border: .9cqw solid var(--bu-filet); padding: 3.2cqw 4.4cqw 3cqw;
}
/* un losange à chaque angle : des pointes, pas des courbes */
.bu__coin {
  position: absolute; width: 2.8cqw; height: 2.8cqw; background: var(--bu-accent); transform: rotate(45deg);
  box-shadow: 0 0 0 .35cqw var(--bu-papier);
}
.bu__coin--hg { top: -1.85cqw; left: -1.85cqw; } .bu__coin--hd { top: -1.85cqw; right: -1.85cqw; }
.bu__coin--bg { bottom: -1.85cqw; left: -1.85cqw; } .bu__coin--bd { bottom: -1.85cqw; right: -1.85cqw; }

/* ── Le titre ── */
.bu__titre { flex: none; display: flex; flex-direction: column; align-items: center; gap: .6cqw; text-align: center; min-width: 0; }
.bu__t1, .bu__t2 {
  width: 100%; font-family: "Anton", Impact, "Arial Narrow", sans-serif; font-weight: 400; text-transform: uppercase;
  line-height: 1.08; letter-spacing: .03em;
}
.bu__t1 { font-size: calc(7cqw * var(--bu-e1)); white-space: nowrap; }
.bu__t2 { font-size: calc(5.6cqw * var(--bu-e2)); white-space: nowrap; }
/* L'apéro : orange cerné de brun sombre, ombre décalée — lisible sur le papier sans remesurer un contraste. */
.bu[data-variante="apero"] .bu__t1, .bu[data-variante="apero"] .bu__t2 {
  color: var(--bu-accent); -webkit-text-stroke: .26cqw var(--bu-contour); paint-order: stroke fill; text-shadow: .42cqw .42cqw 0 var(--bu-ombre);
}
/* Le pastaga : une petite ligne, puis le gros du titre sur deux lignes, en bleu nuit à ombre jaune. */
.bu[data-variante="pastaga"] .bu__t1 { font-size: calc(5.2cqw * var(--bu-e1)); color: var(--bu-encre); }
.bu[data-variante="pastaga"] .bu__t2 {
  font-size: calc(9.2cqw * var(--bu-e2)); white-space: normal; text-wrap: balance; line-height: 1.04;
  color: var(--bu-encre); text-shadow: .5cqw .5cqw 0 var(--bu-ombre);
}

/* ── L'illustration ── */
.bu__dessin { flex: 1 1 0; min-height: 30cqw; position: relative; min-width: 0; }
.bu__dessin::before {
  content: ""; position: absolute; inset: 2% 8%; background: radial-gradient(closest-side, var(--bu-halo), transparent 74%); pointer-events: none;
}
.bu__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply;
}

/* ── Le cartouche ── */
.bu__cartouche {
  flex: none; position: relative; text-align: center; background: var(--bu-cartouche);
  border: .5cqw solid var(--bu-filet); padding: 2.2cqw 3cqw 2.4cqw;
  box-shadow: inset 0 0 0 .9cqw var(--bu-cartouche), inset 0 0 0 1.2cqw var(--bu-filet);
  display: flex; flex-direction: column; align-items: center; gap: .8cqw;
}
.bu__cuvee { width: 100%; display: flex; align-items: center; gap: 2cqw; font-weight: 700; font-size: calc(3.1cqw * var(--bu-t)); letter-spacing: .22em; text-transform: uppercase; color: var(--bu-encre); }
.bu__cuvee::before, .bu__cuvee::after { content: ""; flex: 1; border-top: .3cqw solid var(--bu-accent); }
.bu__prenoms {
  width: 100%; font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; white-space: nowrap;
  font-size: calc(9cqw * var(--bu-ep)); line-height: 1.12; color: var(--bu-encre);
}
.bu__surnom {
  width: 100%; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
  font-size: calc(4cqw * var(--bu-ep)); color: var(--bu-encre);
}
.bu__surnom::before, .bu__surnom::after { content: "—"; margin: 0 .5em; color: var(--bu-accent); }
.bu__elu { width: 100%; font-weight: 700; text-transform: uppercase; white-space: nowrap; font-size: calc(4.2cqw * var(--bu-ep)); line-height: 1.22; color: var(--bu-encre); }
.bu__elu-mot { font-weight: 600; }
.bu__nom { font-weight: 800; }
.bu__cartouche .bu__nom::before { content: ""; }

/* la dédicace : un cadre blanc à écrire au stylo, et son filet pointillé */
.bu__dedicace {
  width: 100%; margin-top: 1cqw; min-height: 7cqw; display: flex; align-items: flex-end; justify-content: center;
  background: var(--bu-blanc); border-bottom: .4cqw dotted var(--bu-filet); padding: 1cqw 2.4cqw .5cqw;
}
.bu__dedicace p { font-family: "Caveat", "Segoe Script", cursive; font-weight: 600; font-size: calc(4.9cqw * var(--bu-t)); line-height: 1.12; text-wrap: balance; color: var(--bu-encre); overflow-wrap: anywhere; }

/* ── Le texte du bas et les mentions ── */
.bu__texte { flex: none; text-align: center; font-weight: 600; font-size: calc(3.7cqw * var(--bu-t)); line-height: 1.22; text-wrap: balance; overflow-wrap: anywhere; }
.bu__texte b { font-weight: 800; }
.bu__mentions { flex: none; display: flex; align-items: stretch; justify-content: center; gap: 2.4cqw; }
.bu__mention {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--bu-cartouche); border: .35cqw solid var(--bu-filet); padding: 1.2cqw 1.6cqw;
  box-shadow: inset 0 0 0 .55cqw var(--bu-cartouche), inset 0 0 0 .8cqw var(--bu-filet);
  font-weight: 600; font-size: calc(2.9cqw * var(--bu-t)); line-height: 1.2; text-wrap: balance; overflow-wrap: anywhere;
}
/* la vague entre les deux mentions : le pastaga seulement */
.bu__vague { display: none; flex: none; align-self: center; width: 15cqw; fill: none; stroke: var(--bu-bleu); stroke-width: 2; stroke-linecap: square; }
.bu[data-variante="pastaga"] .bu__vague { display: block; }
.bu[data-variante="pastaga"] .bu__mention { background: var(--bu-papier); box-shadow: none; border-width: .3cqw; }

/* ── Le formulaire ──
 *
 * Les échantillons du style, les dés et les pastilles. Ils prennent les variables du style qu'ils montrent. */
.bu-ligne__rang { display: flex; gap: .6rem; align-items: end; }
.bu-ligne__champ { flex: 1; min-width: 0; }
.bu-ligne__champ label { display: block; font-size: 1.3rem; margin-bottom: .3rem; }
.bu-ligne__champ input { width: 100%; }
.bu-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;
}
.bu-de svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.bu-de svg circle { fill: currentColor; stroke: none; }
.bu-de[hidden], .bu-tout[hidden], .bu-titres[hidden] { display: none; }
.bu-tout { justify-self: start; margin-bottom: 1.6rem; }
.bu-titres { margin: -.4rem 0 1.6rem; }
.bu-titres__legende { margin: 0 0 .6rem; font-size: 1.3rem; }
.bu-idees { display: flex; flex-wrap: wrap; gap: .6rem; }
.bu-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%;
}
.bu-aide-dedicace { display: block; margin-top: .4rem; font-size: 1.2rem; opacity: .8; }
.bu-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bu-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.bu-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;
}
.bu-styles label small { font-weight: 400; font-size: 1.2rem; opacity: .8; }
.bu-styles input:checked + label { border-color: rgb(var(--color-foreground)); }
.bu-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.bu-echantillon {
  display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; max-width: 10rem; height: 4rem;
  background: var(--bu-papier); border: .25rem double var(--bu-filet); color: var(--bu-encre);
}
.bu-echantillon b { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 1.4rem; letter-spacing: .1em; text-transform: uppercase; }
.bu-echantillon i { display: block; width: .8rem; height: .8rem; background: var(--bu-filet); }
.bu-echantillon i + i { background: var(--bu-papier-2); }
@media (min-width: 750px) { .bu-styles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }