/* ═══════════════════════════ Les « meilleures amies » ═══════════════════════════
 *
 * Servie **seulement** sur les cinq fiches « meilleures amies » (`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/amies-affiche.js`).
 *
 * ── Ce que Gemini rend, et ce que la page écrit ──
 *
 * L'image est **l'illustration seule**, bord à bord, en 4:5 : ni marge, ni mot, ni cadre. La page dessine **l'affiche encadrée** — une marge
 * de papier tout autour, l'illustration, puis le titre et le sous-titre en vrai texte —, parce qu'une marge dessinée par l'IA est rognée par
 * les formats. Les deux textes ne sont jamais peints par le modèle : une saisie qui ne s'imprime pas comme tapée est un litige.
 *
 * ── La mise en page ──
 *
 * Tout en `cqw`, la largeur de l'affiche elle-même : un A4 et un 70 × 100 sont la même composition à deux échelles. Les textes ont une
 * hauteur fixe (le titre, le sous-titre et leurs marges) ; **l'illustration prend ce qui reste** et remplit sa case (`object-fit: cover`) :
 * à l'A4 la case est un 4:5 exact, au 30 × 40 elle perd 6 % en haut et en bas, au 40 × 60 elle perd 8 % de chaque côté. C'est pour cela que
 * la consigne garde visages et scène à 12 % des bords.
 *
 * ── Les couleurs ──
 *
 * Des couleurs de **produit**, pas de charte (point 6 quater) : le papier crème d'une affiche encadrée et deux encres brunes qui passent le
 * seuil de contraste (≥ 7 pour le titre, ≥ 4,5 pour le sous-titre). Elles sont toutes ici, en tête, et nulle part ailleurs dans le fichier.
 */
.aquarelle--amies {
  --am-papier: #fdfaf4;
  --am-encre: #3a2a22;   /* le titre : brun très foncé, ≥ 7 sur le papier */
  --am-doux: #6a4b3c;    /* le sous-titre : un ton plus clair, ≥ 4,5 */
  --aq-papier-defaut: var(--am-papier);
}
.aquarelle--amies { display: block; position: relative; overflow: hidden; container-type: size; background: var(--am-papier); }

.amies { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 6cqw 6cqw 0; }
.amies__image { position: relative; flex: 1 1 0; min-height: 0; margin: 0; overflow: hidden; }
.amies__image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.aquarelle--amies[data-etat="attente"] .amies__image img { filter: blur(5px) saturate(.7); }

/* Le titre : Pinyon Script, sur une ligne, resserré (`--am-ech`, estimé par le serveur, repris au pixel par l'éditeur) plutôt que de déborder.
   Le sous-titre : capitales fines espacées, plus petit ; le bas de la feuille garde une marge égale à celle du haut. */
.aquarelle--amies .amies__titre {
  flex: none; margin: 3cqw 0 0; text-align: center; white-space: nowrap; color: var(--am-encre);
  font-family: "Pinyon Script", "Sacramento", cursive; font-weight: 400; line-height: 1.2;
  font-size: calc(10cqw * var(--am-ech, 1));
}
.aquarelle--amies .amies__sous {
  flex: none; margin: 1cqw 0 5.5cqw; text-align: center; white-space: nowrap; color: var(--am-doux);
  font-family: "Josefin Sans", "Inter", sans-serif; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; line-height: 1.2;
  font-size: calc(2.5cqw * var(--am-ech, 1));
}
/* Sans sous-titre, le titre garde sa marge du bas ; sans titre, l'illustration descend jusqu'à la marge. */
.aquarelle--amies .amies__titre:not([hidden]) + .amies__sous[hidden] { display: none; }
.aquarelle--amies .amies__image:last-child, .aquarelle--amies .amies__image:has(+ [hidden]:last-child) { margin-bottom: 6cqw; }

/* Le choix « amies / amis » du formulaire : deux boutons radio de 44 px, sans `name` (rien n'en part dans la commande). */
.am-accords { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1rem; }
.am-accords__titre { flex: 0 0 100%; font-size: 1.4rem; }
.am-accords input { position: absolute; opacity: 0; pointer-events: none; }
.am-accords label {
  display: inline-flex; align-items: center; justify-content: center; min-height: 4.4rem; padding: 0 1.6rem; cursor: pointer;
  border: 1px solid rgb(var(--encre, 28, 23, 19)); border-radius: 999px; background: #fff; font-size: 1.5rem;
}
.am-accords input:checked + label { background: rgb(var(--encre, 28, 23, 19)); color: #fff; }
.am-accords input:focus-visible + label { outline: 3px solid var(--bleu-focus); outline-offset: 2px; }