/* ═══════════════════════════ « La recette de l'amour » ═══════════════════════════
 *
 * 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 cuisine d'un couple, quatre styles ──
 *
 * Le contenu et la structure ne bougent pas ; chaque style a son papier, son écriture et sa façon de
 * poser les titres. Le premier est celui que la fiche ouvre : le carnet de grand-mère, le plus
 * reconnaissable et le plus tendre.
 * - **Carnet** : papier crème rayé, le prénom à la plume
 *   (Pinyon Script) et tout le reste à la main (Caveat).
 * - **Bristol** : la fiche cartonnée tapée à la machine (Courier Prime), un filet rouge en tête, des
 *   lignes bleues ; l'annotation, elle, est à l'encre bleue, à la main, par-dessus.
 * - **Vintage** : le livre de cuisine des années 60. Un bandeau rouge tomate, un cadre double, le
 *   prénom en Playfair italique, le texte en Cormorant.
 * - **Ardoise** : la craie sur le tableau du bistrot, dans un cadre de bois ; le prénom au pinceau
 *   (Damion), le reste à la craie (Caveat).
 *
 * Toutes les polices sont servies par nous (point 2) : Cormorant, Pinyon Script, Josefin Sans et
 * Playfair Display par `theme.css`, Caveat, Courier Prime et Damion ici.
 *
 * ── Les palettes ──
 *
 * **Ce sont des couleurs de produit, pas de charte** (point 6 quater) : elles sont en clair, toutes
 * ici, en tête, et nulle part ailleurs. `[data-style]` ne nomme pas `.ra` exprès, pour que les
 * échantillons du formulaire se colorent avec les mêmes variables.
 */
@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;
}
@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;
}
@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;
}

/* --r-fond : le papier ; --r-encre : le texte ; --r-accent : le surtitre, les puces, l'ingrédient secret ;
   --r-doux : le texte en retrait (la fin du temps de cuisson, la conservation) ; --r-filet : les lignes ;
   --r-note : l'annotation à la main ; --r-bande : le bandeau du Vintage (le papier ailleurs) et
   --r-sur-bande : ce qui s'y écrit ; --r-cadre : le cadre de bois de l'Ardoise (le papier ailleurs). */
[data-style="Carnet"] {
  --r-fond: #f5ecd8; --r-encre: #33261b; --r-accent: #9c3f26; --r-doux: #66503f; --r-filet: #c9b48f; --r-note: #2c5a89;
  --r-bande: #f5ecd8; --r-sur-bande: #9c3f26; --r-cadre: #f5ecd8;
}
[data-style="Bristol"] {
  --r-fond: #fdfbf4; --r-encre: #1c1c1c; --r-accent: #b3261e; --r-doux: #55524a; --r-filet: #9db6d6; --r-note: #1d4e9e;
  --r-bande: #fdfbf4; --r-sur-bande: #b3261e; --r-cadre: #fdfbf4;
}
[data-style="Vintage"] {
  --r-fond: #f3e5bf; --r-encre: #2a2117; --r-accent: #a82f1d; --r-doux: #594727; --r-filet: #a82f1d; --r-note: #4d5a22;
  --r-bande: #a82f1d; --r-sur-bande: #fbf0cf; --r-cadre: #f3e5bf;
}
[data-style="Ardoise"] {
  --r-fond: #25312d; --r-encre: #f2efe4; --r-accent: #f0c869; --r-doux: #c9d2c6; --r-filet: #667a70; --r-note: #f7aaa2;
  --r-bande: #25312d; --r-sur-bande: #f0c869; --r-cadre: #8b6b46;
}

/* ── 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, jamais dans une
 * taille de texte qui changerait avec le format. `--ra-t` est la taille du texte des listes, 1 ou
 * moins : l'éditeur la reprend au pixel quand huit ingrédients longs débordent, et `--ra-ech` celle
 * du prénom, qui se resserre sans jamais passer à la ligne. `font-size` de `.ra` est le corps du
 * texte courant : tout le reste s'écrit en `em`, donc se resserre avec lui. */
.ra {
  --ra-t: 1; --ra-ech: 1; --ra-base: 3.95cqw;
  --ra-corps: "Caveat"; --ra-noms: "Pinyon Script"; --ra-etiquette: "Caveat";
  display: flex; flex-direction: column; position: relative;
  padding: 7cqw 8.5cqw;
  background-color: var(--r-fond); color: var(--r-encre);
  font-family: var(--ra-corps), "Segoe Script", cursive; font-size: calc(var(--ra-base) * var(--ra-t)); line-height: 1.18; font-weight: 500;
}
.ra :where(p, ol, ul, li, h3) { margin: 0; padding: 0; list-style: none; }
.ra [hidden] { display: none !important; }
/* L'exemple en pleine couleur (même règle que « Le Bilan » et « Nos voyages ») : 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.ra .affiche-exemple { opacity: 1; }
.ra__in { flex: 1; min-height: 0; display: grid; grid-template-rows: auto auto 1fr auto; gap: 2.6cqw; position: relative; }

.ra__tete { text-align: center; display: grid; gap: .9cqw; justify-items: center; }
.ra__kicker { display: inline-flex; align-items: center; gap: 1.6cqw; font-family: var(--ra-etiquette), cursive; font-size: .72em; letter-spacing: .2em; text-transform: uppercase; color: var(--r-accent); font-weight: 700; }
.ra__coeur { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; }
.ra__noms { font-family: var(--ra-noms), "Segoe Script", cursive; font-weight: 400; font-size: calc(12.6cqw * var(--ra-ech)); line-height: 1.05; text-wrap: balance; overflow-wrap: normal; padding-bottom: .4cqw; width: 100%; }
.ra__et { color: var(--r-accent); }
.ra__pour { font-size: .92em; color: var(--r-doux); }
.ra__plus { margin-left: .4em; }
.ra__plus i { font-style: normal; color: var(--r-accent); font-weight: 700; }
.ra__plus b { font-weight: 700; color: var(--r-encre); }

.ra__temps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3cqw; border-top: 1px solid var(--r-filet); border-bottom: 1px solid var(--r-filet); padding: 1.8cqw 0; text-align: center; }
.ra__lbl { display: block; font-family: var(--ra-etiquette), cursive; font-size: .64em; letter-spacing: .18em; text-transform: uppercase; color: var(--r-accent); font-weight: 700; }
.ra__temps b { display: block; font-size: 1.12em; font-weight: 700; line-height: 1.12; overflow-wrap: anywhere; }
.ra__cuisson i { display: block; font-style: normal; font-size: .84em; color: var(--r-doux); margin-top: .3cqw; }

/* Les ingrédients sur deux colonnes, puis la préparation sur toute la largeur : une recette se lit de haut en
   bas, et la place se partage mieux qu'avec deux colonnes inégales — huit ingrédients longs font quatre
   rangées, pas vingt lignes étroites. Pas de `min-height: 0` : un bloc trop haut doit faire déborder
   `.ra__in` (que l'éditeur mesure), pas se recouvrir. */
.ra__corps { display: flex; flex-direction: column; gap: 2.6cqw; align-self: center; width: 100%; }
.ra__ing, .ra__prep { display: flex; flex-direction: column; gap: 1.4cqw; min-width: 0; }
.ra__titre { font-family: var(--ra-etiquette), cursive; font-size: .72em; letter-spacing: .2em; text-transform: uppercase; color: var(--r-accent); font-weight: 700; border-bottom: 1px solid var(--r-filet); padding-bottom: .8cqw; }
.ra__liste { column-count: 2; column-gap: 7cqw; }
.ra__liste li { break-inside: avoid; margin-bottom: calc(1.4cqw * var(--ra-t)); }
.ra__etapes { display: grid; gap: calc(1.4cqw * var(--ra-t)); }
.ra__liste li, .ra__etapes li { position: relative; padding-left: 1.5em; overflow-wrap: anywhere; }
.ra__liste li::before { content: ""; position: absolute; left: .2em; top: .5em; width: .5em; height: .5em; border-radius: 50%; background: var(--r-accent); }
.ra__etapes { counter-reset: etape; }
.ra__etapes li { counter-increment: etape; }
.ra__etapes li::before { content: counter(etape); position: absolute; left: 0; top: .05em; width: 1.1em; text-align: center; font-weight: 700; color: var(--r-accent); }
.ra__annotation { font-family: "Caveat", cursive; font-weight: 600; font-size: 1.12em; color: var(--r-note); transform: rotate(-3deg); transform-origin: right center; margin-top: .6cqw; align-self: flex-end; text-align: right; padding-right: .3em; overflow-wrap: anywhere; }

.ra__pied { display: grid; gap: 1.2cqw; text-align: center; border-top: 1px solid var(--r-filet); padding-top: 2cqw; }
.ra__conservation { font-size: .86em; color: var(--r-doux); text-wrap: balance; }
.ra__conservation .ra__lbl { display: inline; margin-right: .5em; }
.ra__secret { display: grid; gap: .2cqw; justify-items: center; }
.ra__secret b { font-family: var(--ra-noms), "Segoe Script", cursive; font-weight: 400; font-size: 2.1em; line-height: 1.1; color: var(--r-accent); text-wrap: balance; overflow-wrap: anywhere; }

/* ── Carnet : papier crème rayé, le prénom à la plume et le reste à la main. ──
   (Une tache de tasse de café y a été dessinée, puis retirée le jour même, 27 oct. 2026 : sur l'affiche
   imprimée, elle se lisait comme un défaut.) */
.ra[data-style="Carnet"] {
  background-image: repeating-linear-gradient(180deg, transparent 0 6.4cqw, color-mix(in srgb, var(--r-filet) 38%, transparent) 6.4cqw calc(6.4cqw + 1px));
}
.ra[data-style="Carnet"] .ra__noms { font-size: calc(14.5cqw * var(--ra-ech)); }

/* ── Bristol : la fiche cartonnée tapée à la machine, un filet rouge, des lignes bleues. ── */
.ra[data-style="Bristol"] {
  --ra-base: 2.7cqw; --ra-corps: "Courier Prime"; --ra-noms: "Courier Prime"; --ra-etiquette: "Courier Prime";
  padding: 6.5cqw 8cqw; font-weight: 400; line-height: 1.32;
  background-image: repeating-linear-gradient(180deg, transparent 0 5.2cqw, color-mix(in srgb, var(--r-filet) 45%, transparent) 5.2cqw calc(5.2cqw + 1px));
  box-shadow: inset 0 1.8cqw 0 0 var(--r-accent);
}
.ra[data-style="Bristol"] .ra__in { padding-top: 2.4cqw; }
.ra[data-style="Bristol"] .ra__kicker { letter-spacing: .26em; font-weight: 700; }
.ra[data-style="Bristol"] .ra__noms { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: calc(7.6cqw * var(--ra-ech)); line-height: 1.12; }
.ra[data-style="Bristol"] .ra__et { font-weight: 400; }
.ra[data-style="Bristol"] .ra__temps b { font-weight: 700; }
.ra[data-style="Bristol"] .ra__secret b { font-weight: 700; font-size: 1.5em; text-transform: uppercase; letter-spacing: .04em; }
.ra[data-style="Bristol"] .ra__lbl, .ra[data-style="Bristol"] .ra__titre { letter-spacing: .14em; }

/* ── Vintage : le livre de cuisine des années 60, un bandeau tomate, un cadre double. ── */
.ra[data-style="Vintage"] {
  --ra-base: 3.3cqw; --ra-corps: "Cormorant Garamond"; --ra-noms: "Playfair Display"; --ra-etiquette: "Josefin Sans";
  padding: 5cqw; font-weight: 600; line-height: 1.22;
}
.ra[data-style="Vintage"] .ra__in { border: .5cqw double var(--r-accent); padding: 0 0 3.2cqw; gap: 3cqw; }
.ra[data-style="Vintage"] .ra__tete { background: var(--r-bande); color: var(--r-sur-bande); padding: 3.2cqw 4cqw 3cqw; gap: 1.2cqw; }
.ra[data-style="Vintage"] .ra__kicker { color: var(--r-sur-bande); font-weight: 600; font-size: .62em; }
.ra[data-style="Vintage"] .ra__noms { font-family: var(--ra-noms), Georgia, serif; font-style: italic; font-weight: 700; font-size: calc(9cqw * var(--ra-ech)); line-height: 1.04; }
.ra[data-style="Vintage"] .ra__et { color: var(--r-sur-bande); font-weight: 400; }
.ra[data-style="Vintage"] .ra__pour { color: var(--r-sur-bande); font-style: italic; }
.ra[data-style="Vintage"] .ra__plus i, .ra[data-style="Vintage"] .ra__plus b { color: var(--r-sur-bande); }
.ra[data-style="Vintage"] .ra__temps, .ra[data-style="Vintage"] .ra__corps, .ra[data-style="Vintage"] .ra__pied { margin-inline: 4cqw; width: auto; }
.ra[data-style="Vintage"] .ra__lbl, .ra[data-style="Vintage"] .ra__titre { font-weight: 600; letter-spacing: .22em; font-size: .6em; }
.ra[data-style="Vintage"] .ra__titre { border-bottom: 1px solid var(--r-accent); }
.ra[data-style="Vintage"] .ra__liste li::before { border-radius: 0; transform: rotate(45deg); width: .38em; height: .38em; top: .55em; }
.ra[data-style="Vintage"] .ra__etapes li::before { font-family: "Playfair Display", Georgia, serif; font-style: italic; }
.ra[data-style="Vintage"] .ra__annotation { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 400; font-size: .98em; }
.ra[data-style="Vintage"] .ra__secret b { font-style: italic; font-weight: 700; font-size: 1.7em; }

/* ── Ardoise : la craie sur le tableau du bistrot, dans un cadre de bois. ── */
.ra[data-style="Ardoise"] {
  --ra-noms: "Damion";
  padding: 8.2cqw 9.5cqw;
  box-shadow: inset 0 0 0 2.4cqw var(--r-cadre), inset 0 0 0 2.9cqw color-mix(in srgb, var(--r-fond) 55%, black);
}
.ra[data-style="Ardoise"] .ra__noms { color: var(--r-accent); font-size: calc(12.4cqw * var(--ra-ech)); }
.ra[data-style="Ardoise"] .ra__et { color: var(--r-encre); }
.ra[data-style="Ardoise"] .ra__temps { border-top-style: dashed; border-bottom-style: dashed; }
.ra[data-style="Ardoise"] .ra__pied { border-top-style: dashed; }
.ra[data-style="Ardoise"] .ra__titre { border-bottom-style: dashed; }
.ra[data-style="Ardoise"] .ra__secret b { color: var(--r-accent); }

/* ── Le formulaire ── */
.ra-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.ra-styles input { position: absolute; opacity: 0; pointer-events: none; }
.ra-styles label { display: grid; gap: .3rem; padding: .8rem; border: .1rem solid rgba(var(--encre), .18); border-radius: .8rem; cursor: pointer; min-height: 4.4rem; }
.ra-styles input:checked + label { border-color: rgb(var(--encre)); box-shadow: inset 0 0 0 .1rem rgb(var(--encre)); }
.ra-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.ra-echantillon { display: flex; align-items: center; gap: .4rem; height: 3.6rem; padding: 0 .8rem; border-radius: .4rem; background-color: var(--r-fond); color: var(--r-encre); font-family: "Caveat", cursive; font-weight: 600; font-size: 2rem; line-height: 1; box-shadow: inset 0 -.1rem 0 var(--r-filet); }
.ra-echantillon b { font-weight: inherit; margin-right: auto; }
.ra-echantillon i { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--r-accent); }
.ra-styles label[data-style="Carnet"] .ra-echantillon { font-family: "Pinyon Script", cursive; font-weight: 400; font-size: 2.2rem; }
.ra-styles label[data-style="Bristol"] .ra-echantillon { font-family: "Courier Prime", monospace; font-weight: 700; font-size: 1.3rem; text-transform: uppercase; box-shadow: inset 0 .4rem 0 var(--r-accent); }
.ra-styles label[data-style="Vintage"] .ra-echantillon { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 700; font-size: 1.5rem; background-color: var(--r-bande); color: var(--r-sur-bande); box-shadow: inset 0 0 0 .1rem var(--r-fond), inset 0 0 0 .2rem var(--r-bande); }
.ra-styles label[data-style="Vintage"] .ra-echantillon i { background: var(--r-sur-bande); }
.ra-styles label[data-style="Ardoise"] .ra-echantillon { font-family: "Damion", cursive; font-weight: 400; font-size: 1.9rem; box-shadow: inset 0 0 0 .3rem var(--r-cadre); }
.ra-styles__nom { font-weight: 600; }
.ra-styles small { color: rgba(var(--encre), .7); }

.ra-bloc { position: relative; }
.ra-tout { margin: .4rem 0 .8rem; }
.ra-lignes { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.ra-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 4.4rem; gap: .6rem; align-items: end; }
.ra-ligne[hidden] { display: none; }
.ra-ligne__nom { font-weight: 600; }
.ra-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; }
.ra-de svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ra-de svg circle { fill: currentColor; stroke: none; }
.ra-de[hidden], .ra-idees[hidden], .ra-tout[hidden], .ra-plus-ligne[hidden] { display: none; }
.ra-plus-ligne { margin-top: .8rem; }
.ra-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.ra-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; }
.ra-de:focus-visible, .ra-idees button:focus-visible { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }