/* ═══════════════ La une du trône et la famille devant les WC : deux affiches d'après photo ═══════════════
 *
 * Servie **seulement** sur ces deux fiches (`views/product-affiche.liquid`), après `aquarelle.css` dont elle reprend l'attente et les sections du formulaire :
 * ce sont des portraits IA comme les autres, avec d'autres consignes (`lib/wcphoto-affiche.js`).
 *
 * ── Ce que Gemini rend, et ce que la page écrit ──
 *
 * L'image est la scène ; **tout le texte est écrit par la page**, en vrai texte : le nom du magazine, le gros titre et l'accroche (la une), le nom de la famille,
 * le sous-titre et la légende (le tableau). Jamais peints par le modèle, qui se trompe d'une lettre sur un prénom (la règle du tag et des affiches de moto).
 *
 * - **La une** : l'image remplit toute la feuille (`object-fit: cover`, rendue en 2:3). Le haut est un carrelage vide, sous le bandeau rouge du magazine ; le côté
 *   droit porte le dérouleur et le mur, où se pose le gros titre ; l'accroche est un bandeau rouge en bas à gauche. Tout est ancré à la **feuille** en `cqw`.
 * - **La famille** : un **tableau** que la page dessine — cadre doré, rapport fixe 4:5 pour l’image — **posé sur un mur sombre**. Le rapport de l'image ne change
 *   pas d'un format à l'autre : sur un 40 × 60, c'est le mur qui s'agrandit au-dessus et au-dessous, jamais l'image qui se recadre (un visage de bord de banc
 *   aurait été coupé). Le cadre est dessiné ici : la marge d'un cadre peint par l'IA est rognée par les formats.
 *
 * Des couleurs de **produit**, pas de charte (point 6 quater) : toutes ici, en tête, et nulle part ailleurs dans le fichier.
 */
.aquarelle--wcune, .aquarelle-section--wcune {
  --wu-rouge: #c4161c;           /* le bandeau du nom du magazine et l'accroche */
  --wu-rouge-bas: #8e0e13;       /* le filet sombre sous le bandeau */
  --wu-jaune: #ffd21f;           /* le « EXCLUSIF » */
  --wu-creme: #fbf6ea;           /* le panneau du gros titre */
  --wu-creme-rgb: 251, 246, 234; /* le même, pour la transparence */
  --wu-encre: #17110d;
  --wu-blanc: #ffffff;
  --aq-papier-defaut: #f0eee8;
}
.aquarelle--wcfamille, .aquarelle-section--wcfamille {
  --wf-mur-1: #3b2c22;           /* le mur sombre, éclairé par le haut */
  --wf-mur-2: #130d09;
  --wf-or-clair: #f7e49a;
  --wf-or: #d3a83a;
  --wf-or-fonce: #8a6112;
  --wf-or-brun: #4c3207;
  --wf-encre: #3a2506;           /* le texte de la légende, sur la plaque d'or */
  --wf-voile: 12, 8, 5;
  --aq-papier-defaut: #2a1f18;
}

/* ═══════════════ La une du trône ═══════════════ */
/* L'image commence 9 cqw sous le haut de la feuille, derrière le bandeau opaque, et se cale en haut : la tête (à 18 % de la hauteur de l'image) tombe sous le bandeau, quel que soit le format. */
.aquarelle--wcune .aquarelle__portrait { inset: 9cqw 0 0 0; }
.aquarelle--wcune .aquarelle__portrait img { object-position: 50% 0; -webkit-mask-image: none; mask-image: none; }
.wcune { position: absolute; inset: 0; z-index: 2; pointer-events: none; color: var(--wu-encre); }
.wcune [hidden] { display: none !important; }
.aquarelle--wcune[data-etat="attente"] .wcune { opacity: .6; }
.wcune p { margin: 0; }

/* Le bandeau du magazine : toute la largeur, comme au kiosque. Le nom en grand (Playfair Display, noir de graisse), « le magazine du petit coin » dessous. */
.wcune__tete {
  position: absolute; top: 0; left: 0; right: 0; padding: 1.2cqw 5cqw 2.2cqw;
  background: var(--wu-rouge); color: var(--wu-blanc); border-bottom: .9cqw solid var(--wu-rouge-bas);
  box-shadow: 0 .8cqw 2cqw rgba(0, 0, 0, .35);
}
.wcune__magazine {
  font-family: "Playfair Display", Georgia, serif; font-weight: 900; line-height: 1; letter-spacing: -.01em; white-space: nowrap; overflow: hidden;
  font-size: calc(14.5cqw * var(--wu-ech, 1)); padding: 1.6cqw 0 .4cqw; /* de l'air au-dessus : l'accent d'un « É » en Playfair noir de graisse dépasse de la hauteur de ligne, `overflow: hidden` le rognait (4 mm sur un 70 × 100) */
}
.wcune__haut { font-family: "Roboto Condensed", "Inter", sans-serif; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: 2.9cqw; margin-top: .4cqw; opacity: .96; }

/* Le « exclusif » : un ruban jaune un peu penché, sous le bandeau, à droite. */
.wcune__exclusif {
  position: absolute; top: 32cqw; right: 4.5cqw; padding: 1.1cqw 3.6cqw 1.3cqw; transform: rotate(-3.5deg);
  background: var(--wu-jaune); color: var(--wu-encre); font-family: "Anton", "Roboto Condensed", sans-serif; text-transform: uppercase; letter-spacing: .06em;
  font-size: 5.2cqw; line-height: 1.1; box-shadow: 0 .5cqw 1.2cqw rgba(0, 0, 0, .3);
}

/* Le gros titre : un panneau crème à droite, en Playfair noir de graisse, qui passe à la ligne dans sa boîte et se resserre plutôt que de déborder. */
.wcune__titre {
  position: absolute; top: 42cqw; right: 3cqw; width: 41cqw; max-height: 34cqw; overflow: hidden; padding: 2.8cqw 3.4cqw 3cqw;
  background: rgba(var(--wu-creme-rgb), .95); font-family: "Playfair Display", Georgia, serif; font-weight: 900; line-height: 1.12; letter-spacing: -.005em;
  font-size: calc(5.9cqw * var(--wu-ech, 1)); text-align: left; overflow-wrap: anywhere; box-shadow: 0 .6cqw 1.6cqw rgba(0, 0, 0, .3);
}

/* L'accroche : le bandeau rouge du bas, à gauche, en condensée blanche. */
.wcune__accroche {
  position: absolute; left: 0; bottom: 5cqw; width: 68cqw; max-height: 22cqw; overflow: hidden; padding: 2.6cqw 4cqw 2.9cqw 5cqw;
  background: var(--wu-rouge); color: var(--wu-blanc); font-family: "Roboto Condensed", "Inter", sans-serif; font-weight: 700; line-height: 1.18;
  font-size: calc(4.5cqw * var(--wu-ech, 1)); overflow-wrap: anywhere; box-shadow: 0 .6cqw 1.6cqw rgba(0, 0, 0, .35);
}

/* ═══════════════ La famille devant les WC ═══════════════ */
.aquarelle--wcfamille {
  background: radial-gradient(ellipse 90% 70% at 50% 28%, var(--wf-mur-1) 0%, var(--wf-mur-2) 100%);
}
.wcfamille { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.wcfamille [hidden] { display: none !important; }
.wcfamille p { margin: 0; }
.aquarelle--wcfamille[data-etat="attente"] .wcfamille p { opacity: .6; }

/* Le tableau : 90 % de la largeur de la feuille, l’image en 4:5 dedans, le cadre autour (`.wcfamille__cadre`, dessiné par-dessus). */
.wcfamille__tableau { position: relative; width: 90cqw; padding: 5.8cqw; box-shadow: 0 1.4cqw 4cqw rgba(0, 0, 0, .65), 0 .3cqw 1cqw rgba(0, 0, 0, .5); background: var(--wf-or-brun); }
.aquarelle--wcfamille .aquarelle__portrait { position: relative; inset: auto; aspect-ratio: 4 / 5; width: 100%; }
.aquarelle--wcfamille .aquarelle__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; -webkit-mask-image: none; mask-image: none; }
/* Un voile sombre en haut de l'image : le titre doré s'y lit même sur un mur clair. Il s'efface avant les têtes (la consigne garde le quart du haut libre). */
.aquarelle--wcfamille .aquarelle__portrait::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 38%; pointer-events: none;
  background: linear-gradient(to bottom, rgba(var(--wf-voile), .72) 0%, rgba(var(--wf-voile), .5) 50%, rgba(var(--wf-voile), 0) 100%);
}

/* Le cadre : un anneau d'or (dégradé en diagonale), un filet sombre à l'extérieur et à l'intérieur, une rosace à chaque angle. Il ne capte rien. */
.wcfamille__cadre {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  border: 5.8cqw solid transparent;
  border-image: linear-gradient(135deg, var(--wf-or-clair) 0%, var(--wf-or) 18%, var(--wf-or-fonce) 34%, var(--wf-or-clair) 50%, var(--wf-or) 66%, var(--wf-or-fonce) 82%, var(--wf-or-clair) 100%) 1;
  box-shadow: inset 0 0 0 .5cqw var(--wf-or-brun), inset 0 0 3.2cqw rgba(0, 0, 0, .55);
}
.wcfamille__cadre::before {
  content: ""; position: absolute; inset: -5.8cqw; border: .5cqw solid var(--wf-or-brun); box-sizing: border-box;
}
.wcfamille__cadre::after {
  content: ""; position: absolute; inset: -5.8cqw;
  background:
    radial-gradient(circle at 2.9cqw 2.9cqw, var(--wf-or-clair) 0 .8cqw, var(--wf-or) .9cqw 1.7cqw, var(--wf-or-brun) 1.8cqw 2.1cqw, transparent 2.2cqw) 0 0 / 5.8cqw 5.8cqw no-repeat,
    radial-gradient(circle at 2.9cqw 2.9cqw, var(--wf-or-clair) 0 .8cqw, var(--wf-or) .9cqw 1.7cqw, var(--wf-or-brun) 1.8cqw 2.1cqw, transparent 2.2cqw) 100% 0 / 5.8cqw 5.8cqw no-repeat,
    radial-gradient(circle at 2.9cqw 2.9cqw, var(--wf-or-clair) 0 .8cqw, var(--wf-or) .9cqw 1.7cqw, var(--wf-or-brun) 1.8cqw 2.1cqw, transparent 2.2cqw) 0 100% / 5.8cqw 5.8cqw no-repeat,
    radial-gradient(circle at 2.9cqw 2.9cqw, var(--wf-or-clair) 0 .8cqw, var(--wf-or) .9cqw 1.7cqw, var(--wf-or-brun) 1.8cqw 2.1cqw, transparent 2.2cqw) 100% 100% / 5.8cqw 5.8cqw no-repeat;
}

/* Le titre : « La Famille Martin », en or, Pinyon Script (une écriture de tableau de famille) ; le sous-titre en Cormorant italique, juste dessous. */
.wcfamille__titre, .wcfamille__sous { position: absolute; z-index: 4; left: 9cqw; right: 9cqw; text-align: center; white-space: nowrap; overflow: hidden; pointer-events: none; }
.wcfamille__titre {
  top: 11.6cqw; font-family: "Pinyon Script", "Cormorant Garamond", serif; line-height: 1.25; padding: .8cqw 0;
  font-size: calc(10.4cqw * var(--wf-ech, 1)); color: var(--wf-or-clair);
  background: linear-gradient(180deg, var(--wf-or-clair) 0%, var(--wf-or) 55%, var(--wf-or-fonce) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 .25cqw .5cqw rgba(0, 0, 0, .8));
}
.wcfamille__sous {
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; line-height: 1.2; letter-spacing: .02em;
  top: 25.5cqw; font-size: calc(5cqw * var(--wf-ech, 1)); color: var(--wf-or-clair); text-shadow: 0 .25cqw .8cqw rgba(0, 0, 0, .85);
}
/* La légende : une plaque d'or aux bouts en queue d'aronde, posée sur le bas du cadre. */
.wcfamille__legende {
  position: absolute; z-index: 4; left: 50%; bottom: 3.4cqw; transform: translateX(-50%); width: 80cqw; padding: 2cqw 7cqw 2.2cqw; box-sizing: border-box;
  text-align: center; white-space: nowrap; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, var(--wf-or-clair) 0%, var(--wf-or) 45%, var(--wf-or-fonce) 100%);
  clip-path: polygon(0 0, 100% 0, 97.5% 50%, 100% 100%, 0 100%, 2.5% 50%);
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 700; line-height: 1.2; color: var(--wf-encre);
  font-size: calc(4.7cqw * var(--wf-ech, 1));
}

/* ═══════════════ Le formulaire : les idées en pastilles (mêmes règles que les autres affiches, recopiées : leur feuille ne charge pas ici) ═══════════════ */
.aquarelle-section--wcphoto .mo-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.aquarelle-section--wcphoto .mo-idees[hidden] { display: none; }
.aquarelle-section--wcphoto .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;
}
.aquarelle-section--wcphoto .mo-idee:hover { border-color: rgb(var(--navy)); }
.aquarelle-section--wcphoto .mo-idee:focus-visible { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.aquarelle-section--wcphoto .mo-idee[aria-pressed="true"] { border-color: rgb(var(--navy)); box-shadow: 0 0 0 .1rem rgb(var(--navy)); }