/* ═══════════════════ 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;
  /* Petit marin : le bleu marine d'une marinière, l'écume, le cordage. */
  --an-mer: #14284b; --an-ecume: #f6f3ea; --an-cordage: #d6b673;
  /* Petit explorateur : le vert sombre d'une toile de tente, le kraft d'un carnet de route, le sable d'une carte. */
  --an-foret: #22331f; --an-kraft: #c9a15b; --an-sable: #f3ead7;
}

/* 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 {
  /* 6,6 cqw : « LA GAZETTE DU TRÔNE » mesure alors 83 cqw, il tient dans la boîte (à 7,4 il en faisait 93 et, centré dans une boîte plus étroite que lui, il partait
     de la gauche et débordait à droite). Le rembourrage à gauche compense l'espace que l'interlettrage ajoute après la dernière lettre. */
  top: 3cqw; left: 3cqw; right: 3cqw; padding-left: .04em; font-family: "Playfair Display", Georgia, serif; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-size: 6.6cqw;
}
[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; }

/* ═══════════ 7. Petit marin : le bandeau bleu marine d'un navire, double filet d'écume ═══════════ */
[data-style="marin"] .animal::before {
  left: 9cqw; right: 9cqw; bottom: 4.5cqw; height: 23cqw; border-radius: .6cqw; background: var(--an-mer);
  box-shadow: inset 0 0 0 .5cqw var(--an-mer), inset 0 0 0 .85cqw var(--an-ecume), 0 1.2cqw 3cqw rgba(0, 0, 0, .45);
}
[data-style="marin"] .animal p { left: 14cqw; right: 14cqw; color: var(--an-ecume); }
[data-style="marin"] .animal__haut {
  bottom: 22cqw; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 2.1cqw; letter-spacing: .3em; text-transform: uppercase; color: var(--an-cordage);
}
[data-style="marin"] .animal__nom {
  bottom: 12.4cqw; font-family: "Playfair Display", Georgia, serif; font-weight: 800; font-size: calc(6.6cqw * var(--an-ech, 1)); letter-spacing: .02em;
}
[data-style="marin"] .animal__ligne {
  bottom: 7.2cqw; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: calc(3.9cqw * var(--an-ech, 1));
}

/* ═══════════ 8. Petit explorateur : le bandeau vert forêt d'un carnet d'expédition, double filet kraft ═══════════ */
[data-style="explorateur"] .animal::before {
  left: 9cqw; right: 9cqw; bottom: 4.5cqw; height: 23cqw; border-radius: .6cqw; background: var(--an-foret);
  box-shadow: inset 0 0 0 .5cqw var(--an-foret), inset 0 0 0 .85cqw var(--an-kraft), 0 1.2cqw 3cqw rgba(0, 0, 0, .45);
}
[data-style="explorateur"] .animal p { left: 14cqw; right: 14cqw; color: var(--an-sable); }
[data-style="explorateur"] .animal__haut {
  bottom: 22cqw; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 2.1cqw; letter-spacing: .3em; text-transform: uppercase; color: var(--an-kraft);
}
[data-style="explorateur"] .animal__nom {
  bottom: 12.4cqw; font-family: "Playfair Display", Georgia, serif; font-weight: 800; font-size: calc(6.6cqw * var(--an-ech, 1)); letter-spacing: .02em;
}
[data-style="explorateur"] .animal__ligne {
  bottom: 7.2cqw; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: calc(3.9cqw * var(--an-ech, 1));
}
/* ═══════════ 8. DOGUE : la couverture d'un magazine de mode, titre noir en haut, son nom en grand en bas ═══════════
   Le fond de l'image est un blanc de studio (la consigne le demande continu) : tout le texte est de l'encre sur du blanc, lisible par construction.
   « DOGUE » est un mot fixe (`an_haut`), jamais peint par l'IA. Le rouge ne sert qu'à la ligne de couverture. */
[data-style="dogue"] .animal__haut, [data-style="griffes"] .animal__haut {
  top: 2.4cqw; left: 3cqw; right: 3cqw; color: var(--an-noir); font-family: "Playfair Display", Georgia, serif; font-weight: 900; font-size: 22.5cqw;
  line-height: 1; letter-spacing: -.01em; text-transform: uppercase;
}
[data-style="dogue"] .animal__nom, [data-style="griffes"] .animal__nom {
  bottom: 14.5cqw; color: var(--an-noir); font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 800; line-height: 1;
  font-size: calc(11.5cqw * var(--an-ech, 1));
}
[data-style="dogue"] .animal__ligne, [data-style="griffes"] .animal__ligne {
  bottom: 8.4cqw; color: var(--an-rouge); font-family: "Josefin Sans", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  font-size: calc(3.3cqw * var(--an-ech, 1));
}
[data-style="dogue"] .animal__bas, [data-style="griffes"] .animal__bas {
  bottom: 3.6cqw; color: var(--an-gris); font-family: "Josefin Sans", sans-serif; font-weight: 600; font-size: 2cqw; letter-spacing: .3em; text-transform: uppercase;
}
/* Le portrait est plus étroit (84 % de la largeur, donc le chien est plus petit) et descend sous le titre, qui ne couvre plus le haut du crâne ; son fond est blanc comme la feuille : la jointure ne se voit pas et se fond dans le blanc au pied, là où le nom s'écrit :
   le modèle ne laisse pas toujours libre le bas de l'image, et un nom noir sur le poitrail d'un labrador noir ne se lit pas. */
[data-style="dogue"] .aquarelle__portrait, [data-style="griffes"] .aquarelle__portrait { inset: 22cqw 8cqw 0 8cqw !important; }
[data-style="dogue"] .aquarelle__portrait img, [data-style="griffes"] .aquarelle__portrait img {
  object-position: 50% 0;
  /* Le fond d'une photo n'est jamais un blanc pur : les bords du portrait fondent dans la feuille, sans rectangle qui se voie. */
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 40%, black 76%, transparent 100%) !important; mask-image: radial-gradient(ellipse 62% 62% at 50% 40%, black 76%, transparent 100%) !important;
}
[data-style="dogue"] .animal::after, [data-style="griffes"] .animal::after {
  left: 0; right: 0; bottom: 0; height: 38cqw; background: linear-gradient(to top, var(--an-blanc) 46%, rgba(255, 255, 255, 0));
}
/* DOGUE : un chien plus grand que GRIFFES (94 % de la largeur), pour une vignette de catalogue qui a de la présence ; le titre reste dégagé du crâne. */
[data-style="dogue"] .aquarelle__portrait { inset: 22cqw 3cqw 0 3cqw !important; }
/* GRIFFES a sept lettres au lieu de cinq : le titre est plus petit pour tenir dans la largeur. */
[data-style="griffes"] .animal__haut { font-size: 17.5cqw; top: 3.4cqw; }
/* Une couverture est blanche jusqu'aux bords : le papier par défaut des animaux est un gris chaud, qui paraîtrait autour du portrait réduit. */
[data-style="dogue"], [data-style="griffes"] { --aq-papier-defaut: var(--an-blanc); background: var(--an-blanc) !important; }