/* ═══════════════════════════ L'affiche street art ═══════════════════════════
 *
 * Servie **seulement** sur la fiche « street art » (`views/product-affiche.liquid`), après `aquarelle.css` dont elle
 * reprend l'attente et les sections du formulaire : c'est un portrait IA comme les autres, avec une autre consigne
 * (`lib/streetart-affiche.js`).
 *
 * L'image que Gemini rend est **toute l'affiche** : le couple en pochoir, le mur de béton, les coulures, le lettrage
 * (« TOI & MOI »). La page n'écrit rien dessus. Elle est rendue en 2:3 et **remplit** la feuille quel que soit le format
 * (`object-fit: cover`) : de 1,333 (30 × 40) à 1,5 (40 × 60), c'est un peu de haut et de bas qui absorbe l'écart — 11 %
 * au plus, sur le 30 × 40 — et la consigne garde visages et lettrage dans la zone centrale pour que rien d'important
 * ne soit coupé. Un mur de béton recadré reste un mur de béton ; des marges de papier autour le feraient ressembler à
 * une photo mal imprimée.
 *
 * Aucune couleur de l'affiche n'est écrite ici : elles sont dans l'image. Les seules couleurs de ce fichier sont celles du tag de l'animal
 * (plus bas) et le papier de repli (`--aq-papier-defaut`), qui ne se voit qu'avant le premier affichage de l'image.
 */
.aquarelle--streetart { --aq-papier-defaut: #8c8984; }

/* Le portrait remplit toute la feuille, centré : le couple est au milieu de l'image, c'est le haut et le bas qui s'effacent. */
.aquarelle--streetart .aquarelle__portrait { inset: 0; }
.aquarelle--streetart .aquarelle__portrait img { object-position: 50% 50%; -webkit-mask-image: none; mask-image: none; }

/* ═══════════════════ Le tag de l'animal : son nom à la bombe ═══════════════════
 *
 * Seul l'animal écrit sur l'image (`lib/streetart-affiche.js`, `aNom`) : son nom en grand, une ligne dessous, du **vrai texte** posé en bas de
 * l'affiche — jamais peint par l'IA, qui se trompe d'une lettre sur un prénom. L'image garde son dernier sixième libre (coulures sur fond noir).
 * Sedgwick Ave Display, une écriture de tag, embarquée (`public/fonts/`, OFL) ; un contour sombre, une lueur de la couleur de la bombe et
 * une ombre portée le détachent des coulures. Tout est en `cqw`, la largeur de l'affiche : le tag suit le format.
 *
 * Des couleurs de **produit**, pas de charte (point 6 quater) : celles de la palette de la consigne, ici et nulle part ailleurs.
 */
@font-face {
  font-family: "Sedgwick Ave Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/sedgwick-ave-display-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: "Sedgwick Ave Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/sedgwick-ave-display-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;
}

[data-couleur="Jaune fluo"] { --sa-tag: #f4ff3a; --sa-halo: 244, 255, 58; }
[data-couleur="Rose fluo"]  { --sa-tag: #ff3fa4; --sa-halo: 255, 63, 164; }
[data-couleur="Turquoise"]  { --sa-tag: #1de9d6; --sa-halo: 29, 233, 214; }
[data-couleur="Violet"]     { --sa-tag: #c277ff; --sa-halo: 194, 119, 255; }
[data-couleur="Blanc"]      { --sa-tag: #ffffff; --sa-halo: 255, 255, 255; }
/* Le sportif a sa palette (celle de la consigne : bleu électrique et orange incandescent) ; le blanc et le jaune fluo sont ceux de l'animal. */
[data-couleur="Orange"]          { --sa-tag: #ff7a1a; --sa-halo: 255, 122, 26; }
[data-couleur="Bleu électrique"] { --sa-tag: #2f8bff; --sa-halo: 47, 139, 255; }
.aquarelle--streetart { --sa-contour: #0b0614; }

/* Le bloc du tag : posé au pied de la feuille quel que soit le format (l'image est recadrée dessous), légèrement penché comme un tag. */
.streetart__tag {
  position: absolute; left: 5cqw; right: 5cqw; bottom: 5.5cqw; z-index: 2;
  display: flex; flex-direction: column; align-items: stretch; gap: .6cqw;
  transform: rotate(-3deg); pointer-events: none;
}
.streetart__nom, .streetart__ligne {
  margin: 0; text-align: center; white-space: nowrap;
  font-family: "Sedgwick Ave Display", "Permanent Marker", cursive; font-weight: 400; line-height: 1.05;
  paint-order: stroke fill; -webkit-text-stroke: 1.1cqw var(--sa-contour); stroke-linejoin: round;
}
/* Le nom : la couleur de la bombe, avec sa lueur (le brouillard de peinture autour des lettres) et une ombre portée. */
.streetart__nom {
  font-size: calc(14cqw * var(--sa-ech, 1)); color: var(--sa-tag);
  text-shadow: 0 0 2.2cqw rgba(var(--sa-halo), .75), .7cqw .9cqw 0 rgba(0, 0, 0, .55);
}
/* La ligne dessous : plus petite, blanche — le nom est la vedette, la ligne le sous-titre. */
.streetart__ligne {
  font-size: calc(5.4cqw * var(--sa-ech, 1)); color: #fff; -webkit-text-stroke-width: .8cqw;
  text-shadow: .4cqw .5cqw 0 rgba(0, 0, 0, .55);
}
.streetart__tag [hidden] { display: none !important; }

/* L'exemple se montre en pleine couleur (la règle commune des exemples le délave) ; il s'efface dès qu'un portrait est prêt, et la
   fabrication le masque de toute façon (`.affiche-exemple`, `lib/fabrique-affiche.js`). */
.aquarelle--streetart .streetart__nom.affiche-exemple { opacity: 1; }
.aquarelle--streetart[data-etat="pret"] .streetart__nom.affiche-exemple { display: none; }
.aquarelle--streetart[data-etat="attente"] .streetart__tag { opacity: .5; }

/* ── Le choix de la couleur : de vrais boutons radio, une pastille de la couleur de la bombe, cible de 44 px ── */
.sa-couleurs { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: .6rem; }
.sa-couleurs__titre { flex: 0 0 100%; font-weight: 600; font-size: 1.4rem; }
.sa-couleurs input { position: absolute; opacity: 0; pointer-events: none; }
.sa-couleurs label {
  display: inline-flex; align-items: center; gap: .6rem; margin: 0; min-height: 4.4rem; padding: 0 1.2rem 0 .8rem;
  border: .2rem solid rgba(var(--color-foreground), .15); border-radius: 2.2rem; cursor: pointer; font-size: 1.3rem; font-weight: 600;
}
.sa-couleurs__pastille { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--sa-tag); box-shadow: inset 0 0 0 .1rem rgba(0, 0, 0, .35); flex: none; }
.sa-couleurs input:checked + label { border-color: rgb(var(--navy)); box-shadow: 0 0 0 .1rem rgb(var(--navy)); }
.sa-couleurs input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .3rem; }

/* ── Le choix du sport (sportif) : cinq vrais boutons radio, cibles de 44 px, avant la photo ── */
.sa-sports { display: flex; flex-wrap: wrap; gap: .8rem; }
.sa-sports input { position: absolute; opacity: 0; pointer-events: none; }
.sa-sports label {
  display: inline-flex; align-items: center; justify-content: center; margin: 0; min-height: 4.4rem; padding: 0 1.8rem;
  border: .2rem solid rgba(var(--color-foreground), .15); border-radius: 2.2rem; cursor: pointer; font-size: 1.4rem; font-weight: 600;
}
.sa-sports input:checked + label { border-color: rgb(var(--navy)); box-shadow: 0 0 0 .1rem rgb(var(--navy)); background: rgba(var(--navy), .06); }
.sa-sports input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .3rem; }