/* ═══════════════════════════ Le portrait à l'aquarelle ═══════════════════════════
 *
 * Servie **seulement** sur les fiches « portrait à l'aquarelle » (`views/product-affiche.liquid`) :
 * une mise en page d'affiche de plus n'a rien à faire dans le chemin critique du reste du site.
 * La police du nom, Pinyon Script, est déjà déclarée par `theme.css`.
 *
 * ── Les couleurs ──
 *
 * Ce sont des couleurs de **produit**, pas de charte (point 6 quater) : l'encre du nom pour
 * chacune des quatre palettes, et le papier de repli. Elles sont toutes ici, en tête, et nulle
 * part ailleurs dans le fichier. L'encre est une teinte de la palette **assombrie** : le nom se
 * lit sur le papier (≥ 4,5), il ne rivalise pas avec la tache.
 *
 * Le papier, lui, n'est pas une couleur d'ici : il est **mesuré sur l'image** à sa génération
 * (`--aq-papier`, posé en ligne par le gabarit) — la feuille a la couleur du portrait, et le
 * portrait s'y fond par son bord bas. `--aq-papier-defaut` ne sert qu'avant tout portrait.
 *
 * ── La mise en page ──
 *
 * Tout en `cqw`, la largeur de l'affiche : un A4 et un 70 × 100 sont la même composition à deux
 * échelles. Les rapports vendus vont de 1,333 (30 × 40) à 1,5 (40 × 60) ; le portrait (4:5)
 * **remplit** la zone qu'on lui laisse (`object-fit: cover`) et c'est le haut et les côtés, jamais
 * le chien, qui absorbent l'écart — le sujet est au centre, une éclaboussure coupée au bord
 * est du papier.
 */
.aquarelle {
  --aq-papier-defaut: #fbfaf6;
  --aq-encre-sauge: #4c5a47; --aq-encre-rose: #86505d; --aq-encre-bleu: #365d6e; --aq-encre-terracotta: #86492e;
  --aq-attente-fond: rgba(255, 255, 255, .55); --aq-attente-trait: rgba(60, 52, 45, .35);
}
.aquarelle[data-palette="Sauge et ocre"] { --aq-encre: var(--aq-encre-sauge); }
.aquarelle[data-palette="Rose poudré"] { --aq-encre: var(--aq-encre-rose); }
.aquarelle[data-palette="Bleu océan"] { --aq-encre: var(--aq-encre-bleu); }
.aquarelle[data-palette="Terracotta"] { --aq-encre: var(--aq-encre-terracotta); }

.aquarelle {
  --fond: var(--aq-papier, var(--aq-papier-defaut)); --texte: var(--aq-encre, var(--aq-encre-sauge));
  display: block; position: relative; overflow: hidden;
}
.aquarelle p { margin: 0; }
.aquarelle [hidden] { display: none !important; }

/* Le portrait : toute la hauteur moins la place du nom, fondu dans la feuille par le bas. Sans nom,
   il prend toute la feuille. */
.aquarelle__portrait { position: absolute; inset: 0 0 11% 0; margin: 0; }
.aquarelle__portrait img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
}
.aquarelle:not(:has(.aquarelle__nom:not([hidden]))) .aquarelle__portrait { inset: 0; }
.aquarelle:not(:has(.aquarelle__nom:not([hidden]))) .aquarelle__portrait img { -webkit-mask-image: none; mask-image: none; }

/* Le nom, en vrai texte : Pinyon Script, à l'encre de la palette. Il se resserre plutôt que de
   déborder (`--aq-ech`, posé par l'éditeur, par paliers). */
.aquarelle__nom {
  position: absolute; left: 6cqw; right: 6cqw; bottom: 2.2cqw; text-align: center; white-space: nowrap;
  font-family: "Pinyon Script", "Sacramento", cursive; font-weight: 400; line-height: 1.15;
  font-size: calc(10.5cqw * var(--aq-ech, 1)); color: var(--aq-encre);
}

/* L'attente : le portrait vient, la feuille respire. Un voile qui pulse doucement — sous
   `prefers-reduced-motion`, il reste fixe. */
.aquarelle__attente {
  position: absolute; inset: 0; background: var(--aq-attente-fond);
  animation: aq-pulse 1.6s ease-in-out infinite;
}
.aquarelle[data-etat="attente"] .aquarelle__portrait img { filter: blur(6px) saturate(.7); }
@keyframes aq-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .aquarelle__attente { animation: none; opacity: .6; } }

/* ── Le formulaire ── */
.aquarelle-source { margin: .8rem 0 0; display: flex; align-items: center; gap: 1.2rem; }
.aquarelle-source img { width: 7.2rem; height: 7.2rem; object-fit: cover; border-radius: .6rem; }
.aquarelle-source figcaption { font-size: 1.2rem; }

.aquarelle-palettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.aquarelle-palettes input { position: absolute; opacity: 0; pointer-events: none; }
.aquarelle-palettes label {
  display: flex; flex-direction: column; gap: .4rem; align-items: center; margin: 0; padding: .6rem;
  border: .2rem solid rgba(var(--color-foreground), .15); border-radius: .8rem; cursor: pointer;
  min-height: 4.4rem; text-align: center; font-size: 1.3rem; font-weight: 600;
}
.aquarelle-palettes img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 45%; border-radius: .4rem; }
.aquarelle-palettes input:checked + label { border-color: rgb(var(--navy)); box-shadow: 0 0 0 .1rem rgb(var(--navy)); }
.aquarelle-palettes input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .3rem; }

.aquarelle-generer { width: 100%; min-height: 5.6rem; }
.aquarelle-generer[disabled] { opacity: .55; cursor: not-allowed; }
@media (min-width: 750px) { .aquarelle-palettes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* L'exemple se montre en pleine couleur : à 40 % d'opacité (la règle commune des exemples), le
   portrait paraîtrait délavé avant même qu'on ait rien fait. La fabrication le masque de toute
   façon (`.affiche-exemple`, `lib/fabrique-affiche.js`) et refuse une page qui n'a que lui. */
.aquarelle .affiche-exemple { opacity: 1; }