/* ═══════════════════ Les portraits d'animaux costumés : six habillages, un balisage ═══════════════════
 *
 * Servie **seulement** sur ces six fiches (`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 (`lib/animaux-affiche.js`), avec une autre consigne et un habillage de texte à lui.
 *
 * L'image que Gemini rend est **toute l'affiche** : elle remplit la feuille (`object-fit: cover`, rendue en 2:3, un peu de haut et de bas recadré selon le
 * format) et la consigne garde le haut et le bas libres. **La page pose dessus son habillage, en vrai texte** — le nom de l'animal et une ligne, plus des mots
 * fixes par marché — : jamais peint par l'IA, qui se trompe d'une lettre sur un prénom. Tout est ancré aux bords de la **feuille**, pas de l'image, et en
 * `cqw` : l'habillage suit le format et n'est jamais coupé par le recadrage.
 *
 * Des couleurs de **produit**, pas de charte (point 6 quater) : celles de chaque habillage, déclarées ici et nulle part ailleurs.
 */
.aquarelle--animal, .aquarelle-section--animal {
  --aq-papier-defaut: #8a8076;
  /* Portrait royal : l'or d'une plaque de musée sur une toile sombre. */
  --an-or-clair: #f1d98c; --an-or: #cfa44a; --an-or-bas: #bf9a45; --an-or-fonce: #8c6a22; --an-brun: #2b1c0b;
  /* Pop art : noir et blanc francs sur les aplats de couleur de l'image. */
  --an-noir: #0c0c0e; --an-blanc: #ffffff;
  /* Directeur : la carte de visite d'un cabinet. */
  --an-carte: #fbfaf7; --an-marine: #1d2a47; --an-gris: #4d5568;
  /* Journal : le papier d'un quotidien. */
  --an-papier: #f2ead6; --an-encre: #1a1612;
  /* Magazine : le ruban rouge d'une couverture. */
  --an-rouge: #c2123d; --an-prune: #2a0e1c;
  /* Les quatre fonds de la une, pastilles du formulaire : les teintes du fond que l'IA peint, à quelques pas près. */
  --an-fond-rose: #f0c3cd; --an-fond-blanc: #ffffff; --an-fond-bleu: #bde0f3; --an-fond-jaune: #f8eaa6;
  /* Film : un jaune doré d'affiche de cinéma. */
  --an-cine-or: #ffd45c; --an-cine-clair: #fff3c2; --an-cine-bronze: #c98a14; --an-cine-nuit: 8, 6, 15;
}

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

/* ── L'habillage : une couche qui recouvre la feuille et ne capte rien (on cadre l'affiche, pas le texte) ── */
.animal { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.animal::before, .animal::after { content: ""; position: absolute; pointer-events: none; }
.animal p {
  position: absolute; z-index: 1; left: 6cqw; right: 6cqw; margin: 0; text-align: center; white-space: nowrap; line-height: 1.1;
}
.animal [hidden] { display: none !important; }

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

/* ═══════════ 1. Portrait royal : la plaque dorée d'un tableau de musée ═══════════ */
[data-style="royal"] .animal::before {
  left: 14cqw; right: 14cqw; bottom: 4.5cqw; height: 22cqw; border-radius: .6cqw;
  background: linear-gradient(135deg, var(--an-or-clair) 0%, var(--an-or) 45%, var(--an-or-bas) 100%);
  box-shadow: inset 0 0 0 .5cqw var(--an-or-fonce), inset 0 0 0 .9cqw var(--an-or-clair), 0 1.2cqw 3cqw rgba(0, 0, 0, .55);
}
[data-style="royal"] .animal p { left: 18cqw; right: 18cqw; color: var(--an-brun); }
[data-style="royal"] .animal__haut {
  bottom: 21.4cqw; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 2.4cqw; letter-spacing: .28em; text-transform: uppercase;
}
[data-style="royal"] .animal__nom {
  bottom: 12.6cqw; font-family: "Playfair Display", Georgia, serif; font-weight: 800; font-size: calc(6.6cqw * var(--an-ech, 1)); letter-spacing: .02em;
}
[data-style="royal"] .animal__ligne {
  bottom: 7.4cqw; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 700; font-size: calc(3.8cqw * var(--an-ech, 1));
}

/* ═══════════ 2. Pop art : le nom en gros, contour noir et ombre franche, sur l'aplat de l'image ═══════════ */
[data-style="pop"] .animal__nom {
  bottom: 13.5cqw; font-family: "Anton", Impact, sans-serif; text-transform: uppercase; letter-spacing: .03em; line-height: 1;
  font-size: calc(16cqw * var(--an-ech, 1)); color: var(--an-blanc);
  paint-order: stroke fill; -webkit-text-stroke: 1.8cqw var(--an-noir); text-shadow: 1.2cqw 1.2cqw 0 var(--an-noir);
}
[data-style="pop"] .animal__ligne {
  left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: 88cqw; bottom: 5.5cqw; padding: .9cqw 3cqw .5cqw;
  font-family: "Anton", Impact, sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: calc(4.6cqw * var(--an-ech, 1));
  color: var(--an-noir); background: var(--an-blanc); border: .6cqw solid var(--an-noir); box-shadow: .8cqw .8cqw 0 var(--an-noir);
}

/* ═══════════ 3. Directeur : la carte de visite posée au pied de l'affiche ═══════════ */
[data-style="patron"] .animal::before {
  left: 11cqw; right: 11cqw; bottom: 5cqw; height: 22cqw; background: var(--an-carte); border-radius: .8cqw;
  box-shadow: 0 1.4cqw 3.4cqw rgba(0, 0, 0, .45); border-left: 2.4cqw solid var(--an-marine);
}
[data-style="patron"] .animal p { left: 17cqw; right: 15cqw; text-align: left; }
[data-style="patron"] .animal__haut {
  bottom: 22cqw; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 2.1cqw; letter-spacing: .26em; text-transform: uppercase; color: var(--an-gris);
}
[data-style="patron"] .animal__nom {
  bottom: 13.2cqw; font-family: "Montserrat", sans-serif; font-weight: 800; font-size: calc(6.4cqw * var(--an-ech, 1)); color: var(--an-marine);
}
[data-style="patron"] .animal__ligne {
  bottom: 8cqw; font-family: "Inter", sans-serif; font-weight: 500; font-size: calc(3.5cqw * var(--an-ech, 1)); color: var(--an-gris); letter-spacing: .01em;
}

/* ═══════════ 4. Le trône : la une du quotidien, et l'écriteau sur la porte ═══════════ */
[data-style="trone"] .animal::before {
  left: 0; right: 0; top: 0; height: 23cqw; background: var(--an-papier);
  border-bottom: .5cqw solid var(--an-encre); box-shadow: 0 .9cqw 0 -.2cqw var(--an-papier), 0 1.1cqw 0 0 var(--an-encre);
}
[data-style="trone"] .animal p { color: var(--an-encre); }
[data-style="trone"] .animal__haut {
  top: 2.6cqw; font-family: "Playfair Display", Georgia, serif; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-size: 7.4cqw;
}
[data-style="trone"] .animal__ligne {
  top: 13.6cqw; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 700; font-size: calc(4.6cqw * var(--an-ech, 1));
}
[data-style="trone"] .animal__nom {
  left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: 84cqw; bottom: 5cqw; padding: 1.4cqw 4cqw; border-radius: 1cqw;
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: calc(5.2cqw * var(--an-ech, 1)); letter-spacing: .02em; text-transform: uppercase;
  color: var(--an-encre); background: var(--an-papier); border: .5cqw solid var(--an-encre); box-shadow: .8cqw .8cqw 0 rgba(0, 0, 0, .35);
}

/* ═══════════ 5. La une : le nom de l'animal est le titre du magazine, une bande rouge porte le gros titre ═══════════ */
[data-style="une"] .animal__haut {
  top: 3.4cqw; color: var(--an-prune); font-family: "Josefin Sans", sans-serif; font-weight: 700; font-size: 2.3cqw; letter-spacing: .3em; text-transform: uppercase;
}
[data-style="une"] .animal__nom {
  top: 6.2cqw; color: var(--an-prune); font-family: "Playfair Display", Georgia, serif; font-weight: 900; text-transform: uppercase; letter-spacing: .01em;
  line-height: 1; font-size: calc(18cqw * var(--an-ech, 1));
}
[data-style="une"] .animal::before {
  left: 0; right: 0; bottom: 0; height: 13cqw; background: var(--an-rouge);
}
[data-style="une"] .animal__ligne {
  bottom: 3.9cqw; color: var(--an-blanc); font-family: "Josefin Sans", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  font-size: calc(5.2cqw * var(--an-ech, 1));
}

/* ═══════════ 6. Le film : une affiche de cinéma, l'accroche en haut, le titre en bas ═══════════ */
[data-style="film"] .animal::before {
  left: 0; right: 0; top: 0; height: 26cqw; background: linear-gradient(to bottom, rgba(var(--an-cine-nuit), .72), rgba(var(--an-cine-nuit), 0));
}
[data-style="film"] .animal::after {
  left: 0; right: 0; bottom: 0; height: 52cqw; background: linear-gradient(to top, rgba(var(--an-cine-nuit), .86) 18%, rgba(var(--an-cine-nuit), 0));
}
[data-style="film"] .animal p { color: var(--an-blanc); }
[data-style="film"] .animal__haut, [data-style="film"] .animal__ligne, [data-style="film"] .animal__bas { text-shadow: 0 .3cqw 1.2cqw rgba(0, 0, 0, .7); }
[data-style="film"] .animal__haut {
  top: 3.4cqw; font-family: "Roboto Condensed", sans-serif; font-weight: 700; font-size: 2.8cqw; letter-spacing: .42em; text-transform: uppercase; color: var(--an-cine-or);
}
[data-style="film"] .animal__ligne {
  top: 8.4cqw; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 700; font-size: calc(4.8cqw * var(--an-ech, 1));
}
[data-style="film"] .animal__nom {
  bottom: 9.6cqw; font-family: "Anton", Impact, sans-serif; text-transform: uppercase; letter-spacing: .04em; line-height: 1; font-size: calc(17cqw * var(--an-ech, 1));
  color: var(--an-cine-or); background: linear-gradient(to bottom, var(--an-cine-clair) 8%, var(--an-cine-or) 46%, var(--an-cine-bronze) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 .5cqw .9cqw rgba(0, 0, 0, .7));
}
[data-style="film"] .animal__bas {
  bottom: 3.6cqw; font-family: "Roboto Condensed", sans-serif; font-weight: 500; font-size: 2.3cqw; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .8);
}

/* ── Le choix avant de peindre : le même bloc que les palettes de l'aquarelle (vignettes d'exemple), quatre colonnes au plus ── */
/* Les idées en pastilles : les mêmes règles que les affiches de moto et de véhicule (recopiées, leur feuille ne charge pas ici). */
.mo-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.mo-idees[hidden] { display: none; }
.mo-idee {
  min-height: 4.4rem; padding: .6rem 1.2rem; font: inherit; font-size: 1.3rem; line-height: 1.25; text-align: left; cursor: pointer;
  border: .1rem solid rgba(var(--color-foreground), .25); border-radius: 2.2rem; background: transparent; color: inherit;
}
.mo-idee:hover { border-color: rgb(var(--navy)); }
.mo-idee:focus-visible { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.mo-idee[aria-pressed="true"] { border-color: rgb(var(--navy)); box-shadow: 0 0 0 .1rem rgb(var(--navy)); }

/* Anton, déjà servie à d'autres feuilles : même fichier, déclarée ici parce que chaque feuille est autonome. */
@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;
}

/* ── Le fond de la une : quatre vrais boutons radio, une pastille de la couleur, cibles de 44 px ── */
.an-fonds { display: flex; flex-wrap: wrap; gap: .8rem; }
.an-fonds input { position: absolute; opacity: 0; pointer-events: none; }
.an-fonds label {
  display: inline-flex; align-items: center; gap: .6rem; margin: 0; min-height: 4.4rem; padding: 0 1.4rem 0 .8rem;
  border: .2rem solid rgba(var(--color-foreground), .15); border-radius: 2.2rem; cursor: pointer; font-size: 1.3rem; font-weight: 600;
}
.an-fonds__pastille { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--an-fond-rose); box-shadow: inset 0 0 0 .1rem rgba(0, 0, 0, .3); flex: none; }
.an-fonds label[data-fond="Blanc"] .an-fonds__pastille { background: var(--an-fond-blanc); }
.an-fonds label[data-fond="Bleu ciel"] .an-fonds__pastille { background: var(--an-fond-bleu); }
.an-fonds label[data-fond="Jaune"] .an-fonds__pastille { background: var(--an-fond-jaune); }
.an-fonds input:checked + label { border-color: rgb(var(--navy)); box-shadow: 0 0 0 .1rem rgb(var(--navy)); }
.an-fonds input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .3rem; }