/* ═══════════════════════════ 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-disque: #fff; --aq-attente-trait: rgba(60, 52, 45, .35);
  /* Le trait continu : l'encre est celle du dessin (`lib/trait-affiche.js`, `COULEURS`, qu'un essai compare à ces valeurs). */
  --aq-trait-noir: #1c1a18; --aq-trait-bleu-nuit: #22344f; --aq-trait-terracotta: #a2492a; --aq-trait-vert-sauge: #4c6b4a;
}
.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); }
/* Le papier d'un trait continu est blanc (le dessin est du noir sur du blanc pur, `teinter`) : sans cela, le fondu du bas passait par le crème de repli. */
.aquarelle[data-sujet="trait"] { --aq-papier-defaut: #ffffff; }
.aquarelle[data-sujet="trait"][data-palette="Noir"] { --aq-encre: var(--aq-trait-noir); }
.aquarelle[data-sujet="trait"][data-palette="Bleu nuit"] { --aq-encre: var(--aq-trait-bleu-nuit); }
.aquarelle[data-sujet="trait"][data-palette="Terracotta"] { --aq-encre: var(--aq-trait-terracotta); }
.aquarelle[data-sujet="trait"][data-palette="Vert sauge"] { --aq-encre: var(--aq-trait-vert-sauge); }

.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:has(.aquarelle__texte:not([hidden])) .aquarelle__portrait { inset: 0 0 15.5% 0; }
.aquarelle:has(.aquarelle__texte:not([hidden])):not(:has(.aquarelle__nom:not([hidden]))) .aquarelle__portrait { inset: 0 0 7% 0; }
.aquarelle:not(:has(.aquarelle__nom:not([hidden]))):not(:has(.aquarelle__texte:not([hidden]))) .aquarelle__portrait { inset: 0; }
.aquarelle:not(:has(.aquarelle__nom:not([hidden]))):not(:has(.aquarelle__texte: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);
}
/* La ligne de texte sous le nom, facultative (ses années, un mot) : la même écriture, plus petite, au
   pied de la feuille ; le nom monte d'autant quand elle est là. Elle se resserre comme le nom. */
.aquarelle__texte {
  position: absolute; left: 6cqw; right: 6cqw; bottom: 2.4cqw; text-align: center; white-space: nowrap;
  font-family: "Pinyon Script", "Sacramento", cursive; font-weight: 400; line-height: 1.2;
  font-size: calc(5cqw * var(--aq-ech, 1)); color: var(--aq-encre);
}
.aquarelle:has(.aquarelle__texte:not([hidden])) .aquarelle__nom { bottom: 8cqw; }

/* L'attente : le portrait vient, la feuille respire. Un voile fixe, et un cercle qui tourne (ci-dessous) ; sous
   `prefers-reduced-motion` le cercle ralentit. */
.aquarelle__attente {
  position: absolute; inset: 0; background: var(--aq-attente-fond); opacity: .75;
}
.aquarelle[data-etat="attente"] .aquarelle__portrait img { filter: blur(6px) saturate(.7); }
/* Un cercle qui tourne au milieu de l'affiche : le voile qui pulsait seul ne suffisait pas, trente secondes
   d'attente se lisaient comme une page plantée. Le voile est désormais fixe, c'est le cercle qui bouge. */
.aquarelle__attente::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14cqw; height: 14cqw; margin: -7cqw 0 0 -7cqw;
  box-sizing: border-box; border-radius: 50%; border: 1.6cqw solid rgb(var(--navy)); border-top-color: transparent;
  background: var(--aq-attente-disque); animation: tourne .9s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .aquarelle__attente::after { animation-duration: 2.4s; } }

/* ── 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; }