/* ═══════════════════════════ L'affiche du rouleau ═══════════════════════════
 *
 * « Papyrus domesticus » : le rouleau de la maison en planche d'histoire naturelle. Servie
 * **seulement** sur sa fiche (`views/product-affiche.liquid`).
 *
 * ── Quatre styles, une seule planche ──
 *
 * - **Naturaliste** : la gravure d'un vieux traité. Papier crème, encre sépia, Cormorant
 *   italique, hachures sur l'ombre du rouleau.
 * - **Plan** : le dessin d'exécution. Bleu de Prusse, trait blanc, quadrillage, cotes
 *   (≈ 10 cm, Ø ≈ 11 cm — les mesures d'un rouleau ordinaire, au « ≈ » près), Roboto Condensed.
 * - **Pop** : aplats vifs, trait gras, Anton en capitales.
 * - **Épuré** : noir sur blanc, trait fin, Inter maigre.
 *
 * Toutes les polices sont servies par nous (point 2) : Cormorant Garamond, Roboto Condensed et
 * Inter par `theme.css`, Anton ici.
 *
 * ── 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 `.rp` 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;
}

/* --r-fond : le papier de l'affiche ; --r-encre : le texte et le trait ; --r-papier : la feuille
   de papier toilette ; --r-corps : le rouleau ; --r-ombre : son ombre ; --r-accent : les numéros,
   les flèches, le verdict ; --r-sur : ce qu'on écrit sur l'accent ; --r-doux : l'intérieur du tube. */
[data-style="Naturaliste"] { --r-fond: #f1e8d4; --r-encre: #3b2a1a; --r-papier: #fbf6ea; --r-corps: #efe3c8; --r-ombre: #dcc9a2; --r-accent: #8c3b22; --r-sur: #f1e8d4; --r-doux: #e2d2ad; }
[data-style="Plan"] { --r-fond: #1d4f8f; --r-encre: #e9f1ff; --r-papier: #1d4f8f; --r-corps: #1d4f8f; --r-ombre: #2a60a8; --r-accent: #ffd84d; --r-sur: #1d4f8f; --r-doux: #1a4681; }
[data-style="Pop"] { --r-fond: #ffe14d; --r-encre: #1a1033; --r-papier: #ffffff; --r-corps: #ff6fa8; --r-ombre: #e0407f; --r-accent: #2f5bff; --r-sur: #ffffff; --r-doux: #ffd0e3; }
[data-style="Épuré"] { --r-fond: #ffffff; --r-encre: #161616; --r-papier: #ffffff; --r-corps: #ffffff; --r-ombre: #ececec; --r-accent: #161616; --r-sur: #ffffff; --r-doux: #f2f2f0; }

/* ── 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 figure, qui remplit la place laissée par le texte (`meet`),
 * jamais dans une taille de texte qui changerait avec le format. */
.rp {
  --fond: var(--r-fond); --texte: var(--r-encre); --rp-trait: 1.6;
  padding: 6cqw 6.5cqw 4.6cqw; text-align: center; line-height: 1.15;
  font-family: "Cormorant Garamond", Georgia, serif;
}
.rp p, .rp figure { margin: 0; }
.rp [hidden] { display: none !important; }
.rp[data-style="Plan"] { font-family: "Roboto Condensed", system-ui, sans-serif; --rp-trait: 1.2; }
.rp[data-style="Pop"] { font-family: "Inter", system-ui, sans-serif; --rp-trait: 3; }
.rp[data-style="Épuré"] { font-family: "Inter", system-ui, sans-serif; --rp-trait: 1; }
[data-sens="Par-dessus"] .rp-sens-dessous, [data-sens="Par-dessous"] .rp-sens-dessus { display: none; }

.rp__planche { font-size: 1.7cqw; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; }
.rp__titre { font-size: 10cqw; font-style: italic; font-weight: 500; line-height: 1.05; margin-top: 1.4cqw; white-space: nowrap; }
/* La variété tient sur une ligne et se resserre (`--ech`, ajusté par le script) : un nom de
   famille long ne passe pas à la ligne sous un titre qui, lui, ne bouge pas. */
.rp__variete { font-size: calc(2.7cqw * var(--ech, 1)); margin-top: 1.2cqw; white-space: nowrap; }
.rp__variete b { font-weight: 700; }
.rp__filet { flex: none; height: .25cqw; background: var(--r-encre); margin: 2.8cqw 20cqw 0; opacity: .55; }

/* Les deux figures : la grande, qui remplit sa case en gardant ses proportions, et la coupe. */
.rp__figures {
  flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 25%;
  grid-template-rows: minmax(0, 1fr); align-items: center; gap: 2cqw; margin-top: 1.6cqw;
}
.rp__figure { display: flex; flex-direction: column; height: 100%; min-height: 0; justify-content: center; }
/* Le dessin garde son rapport et se réduit si la case manque de hauteur : la légende « Fig. 1 »
   reste collée dessous, au lieu de tomber au bas d'une case trop haute. */
.rp__fig { flex: 0 1 auto; min-height: 0; width: 100%; height: auto; overflow: visible; }
.rp__encart { border: .3cqw solid var(--r-encre); padding: 1.4cqw 1.2cqw 1cqw; }
.rp__coupe { display: block; width: 100%; height: auto; overflow: visible; }
.rp__legende-fig { font-size: 1.45cqw; font-style: italic; margin-top: .7cqw; line-height: 1.25; }

/* Le dessin. `non-scaling-stroke` : l'épaisseur du trait se règle en `cqw`, pas dans le repère
   du dessin, donc elle suit l'affiche et non la taille de la figure. */
.rp svg * { vector-effect: non-scaling-stroke; }
.rp-corps, .rp-face { fill: var(--r-corps); stroke: var(--r-encre); stroke-width: calc(var(--rp-trait) * .2cqw); }
.rp-ombre { fill: var(--r-ombre); }
/* Le haut de la feuille qui s'enroule par-dessus : la surface y tourne vers le haut, une ombre
   légère le dit — sans elle, la feuille se lit comme un panneau posé devant le rouleau. */
.rp-courbe { opacity: .45; }
.rp-reflet { fill: none; stroke: var(--r-sur); stroke-width: calc(var(--rp-trait) * .25cqw); stroke-linecap: round; opacity: .6; }
.rp-spirale { fill: none; stroke: var(--r-encre); stroke-width: calc(var(--rp-trait) * .08cqw); opacity: .55; }
.rp-tube { fill: var(--r-doux); stroke: var(--r-encre); stroke-width: calc(var(--rp-trait) * .15cqw); }
.rp-papier { fill: var(--r-papier); stroke: var(--r-encre); stroke-width: calc(var(--rp-trait) * .2cqw); stroke-linejoin: round; }
.rp-papier-trait { fill: none; stroke: var(--r-encre); stroke-width: calc(var(--rp-trait) * .35cqw); }
.rp-pointilles, .rp-pli { fill: none; stroke: var(--r-encre); stroke-width: calc(var(--rp-trait) * .1cqw); stroke-dasharray: .4cqw .6cqw; opacity: .7; }
.rp-pli { stroke-dasharray: none; opacity: .35; }
.rp-bras { fill: none; stroke: var(--r-encre); stroke-width: calc(var(--rp-trait) * .3cqw); stroke-linecap: round; stroke-linejoin: round; }
.rp-mur { fill: none; stroke: var(--r-encre); stroke-width: calc(var(--rp-trait) * .12cqw); opacity: .5; }
.rp-hach-mur { stroke: var(--r-encre); stroke-width: .1cqw; opacity: .5; }
.rp-sol { fill: var(--r-encre); opacity: .08; }
.rp-hach { fill: url(#rp-hach); display: none; }
/* Le trait des hachures suit le dessin, lui : en `non-scaling-stroke`, ses 0,6 deviendraient
   0,6 px d'écran, et la gravure sortirait 2,5 fois plus pâle au tirage qu'à l'aperçu. */
.rp svg .rp-hach-trait { vector-effect: none; stroke: var(--r-encre); stroke-width: .6; opacity: .45; }
.rp-fleche { fill: none; stroke: var(--r-accent); stroke-width: calc(var(--rp-trait) * .22cqw); }
.rp-fleche-bout { fill: var(--r-accent); }
.rp-cotes { display: none; fill: none; stroke: var(--r-encre); stroke-width: .12cqw; }
.rp-cotes text { fill: var(--r-encre); stroke: none; font-size: 12px; text-anchor: middle; font-family: "Roboto Condensed", system-ui, sans-serif; }
.rp-cote-plein { fill: var(--r-encre); stroke: none; }
.rp-num circle { fill: var(--r-accent); stroke: var(--r-fond); stroke-width: .25cqw; }
.rp-num text { fill: var(--r-sur); font-size: 11px; font-weight: 700; text-anchor: middle; font-family: "Inter", system-ui, sans-serif; }

/* La légende : six entrées, deux colonnes. */
.rp__legende {
  flex: none; list-style: none; padding: 0; margin: 2.2cqw 0 0; text-align: left;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3cqw 3.4cqw;
}
.rp__legende li { display: flex; gap: 1.4cqw; align-items: baseline; font-size: 1.95cqw; line-height: 1.25; }
.rp__n {
  flex: none; display: inline-grid; place-items: center; width: 2.8cqw; height: 2.8cqw; border-radius: 50%;
  background: var(--r-accent); color: var(--r-sur); font: 700 1.5cqw/1 "Inter", system-ui, sans-serif; transform: translateY(-.2cqw);
}
.rp__legende b { display: block; font-size: 2.2cqw; }

.rp__verdict { flex: none; margin-top: 2.6cqw; border-top: .3cqw solid var(--r-encre); border-bottom: .3cqw solid var(--r-encre); padding: 1.5cqw 0 1.7cqw; }
.rp__verdict-titre { font-size: 1.6cqw; letter-spacing: .28em; text-transform: uppercase; font-weight: 600; }
.rp__verdict-sens { font-size: 6cqw; font-weight: 700; line-height: 1.05; margin-top: .6cqw; color: var(--r-accent); }
.rp__devise { flex: none; font-size: 2.5cqw; font-style: italic; margin-top: 2cqw; overflow-wrap: anywhere; }
.rp__pied { flex: none; font-size: 1.35cqw; margin-top: 1.4cqw; opacity: .75; letter-spacing: .04em; }

/* ── Naturaliste : les hachures de la gravure ── */
.rp[data-style="Naturaliste"] .rp-hach { display: inline; }
/* Les jambages de Cormorant (le p, le y) descendent loin sous la ligne : la variété s'en écarte. */
.rp[data-style="Naturaliste"] .rp__variete { margin-top: 2.4cqw; }

/* ── Plan : quadrillage, cotes, capitales ── */
.rp[data-style="Plan"] .rp-cotes { display: inline; }
.rp[data-style="Plan"] .rp__titre { font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 6.6cqw; letter-spacing: .04em; }
.rp[data-style="Plan"] .rp__encart { border-style: dashed; }
.rp[data-style="Plan"] .rp__legende b, .rp[data-style="Plan"] .rp__verdict-sens { text-transform: uppercase; }
.rp[data-style="Plan"] .rp__legende-fig, .rp[data-style="Plan"] .rp__devise { font-style: normal; }
.rp[data-style="Plan"]::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14;
  background-image: linear-gradient(var(--r-encre) .08cqw, transparent .08cqw), linear-gradient(90deg, var(--r-encre) .08cqw, transparent .08cqw);
  background-size: 4cqw 4cqw;
}

/* ── Pop : Anton, aplats, verdict en pavé ── */
.rp[data-style="Pop"] .rp__titre { font-family: "Anton", Impact, sans-serif; font-style: normal; font-weight: 400; text-transform: uppercase; font-size: 8.6cqw; color: var(--r-accent); letter-spacing: .01em; }
.rp[data-style="Pop"] .rp__verdict { border: none; background: var(--r-encre); color: var(--r-fond); border-radius: 2cqw; }
.rp[data-style="Pop"] .rp__verdict-sens { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; color: var(--r-fond); }
.rp[data-style="Pop"] .rp__encart { border-radius: 2cqw; background: var(--r-papier); }
.rp[data-style="Pop"] .rp__legende-fig, .rp[data-style="Pop"] .rp__devise { font-style: normal; font-weight: 600; }

/* ── Épuré : un trait, de la place ── */
.rp[data-style="Épuré"] .rp__titre { font-style: normal; font-weight: 200; font-size: 8.6cqw; letter-spacing: -.02em; }
.rp[data-style="Épuré"] .rp__verdict-sens { font-weight: 300; color: var(--r-encre); }
.rp[data-style="Épuré"] .rp__n { background: none; color: var(--r-encre); border: .15cqw solid var(--r-encre); }
.rp[data-style="Épuré"] .rp__filet { opacity: 0; }
.rp[data-style="Épuré"] .rp-reflet { display: none; }

/* ── Le formulaire ── */
.rp-sens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.rp-sens input, .rp-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rp-sens label, .rp-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;
}
.rp-sens svg { width: 4.4rem; height: 4.4rem; fill: none; stroke: currentColor; stroke-width: 2; }
.rp-sens__mur { opacity: .45; }
.rp-sens__feuille { stroke-width: 3.4; stroke-linecap: round; }
.rp-sens input:checked + label, .rp-styles input:checked + label { border-color: rgb(var(--color-foreground)); }
.rp-sens input:focus-visible + label, .rp-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.rp-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.rp-styles label small { font-weight: 400; font-size: 1.2rem; opacity: .8; }
.rp-echantillon {
  display: grid; place-items: center; width: 100%; max-width: 12rem; height: 4.4rem; border-radius: .4rem;
  background: var(--r-fond); color: var(--r-encre); border: .1rem solid rgba(var(--color-foreground), .15);
  font-size: 1.9rem; line-height: 1;
}
.rp-styles [data-style="Naturaliste"] .rp-echantillon { font-family: "Cormorant Garamond", serif; font-style: italic; }
.rp-styles [data-style="Plan"] .rp-echantillon { font-family: "Roboto Condensed", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 1.5rem; letter-spacing: .06em; }
.rp-styles [data-style="Pop"] .rp-echantillon { font-family: "Anton", Impact, sans-serif; text-transform: uppercase; color: var(--r-accent); }
.rp-styles [data-style="Épuré"] .rp-echantillon { font-family: "Inter", sans-serif; font-weight: 200; }
.rp-devises { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.rp-devises__choix {
  font: inherit; font-size: 1.3rem; line-height: 1.25; text-align: left; cursor: pointer; min-height: 4.4rem;
  padding: .6rem 1rem; border-radius: 2rem; border: .1rem solid rgba(var(--color-foreground), .25);
  background: rgb(var(--color-background)); color: rgb(var(--color-foreground));
}