/* ═══════════════════════════ Les portraits « film d'animation 3D » ═══════════════════════════
 *
 * Servie **seulement** sur les six fiches « portrait film d'animation 3D » (`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/film3d-affiche.js`).
 *
 * ── Ce que Gemini rend, et ce que la page écrit ──
 *
 * L'image 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 cinquième du haut libre. **La page y pose le titre et le sous-titre, en vrai texte** : jamais peints par le modèle, qui se trompe
 * d'une lettre sur un prénom. Tout est ancré au haut de la **feuille**, en `cqw` : le titre suit le format et n'est jamais coupé par le recadrage.
 *
 * ── Lisibilité : un voile, pas un cartouche ──
 *
 * Le haut de l'image est un ciel clair, un feuillage, un mur : du blanc posé dessus ne se lit pas toujours. Un voile sombre en dégradé, très doux, y
 * descend du bord de la feuille (il s'efface avant les visages), et le titre porte une ombre. Le contraste se mesure sur le voile, pas sur la photo.
 *
 * Des couleurs de **produit**, pas de charte (point 6 quater) : toutes ici, en tête, et nulle part ailleurs dans le fichier.
 */
.aquarelle--film3d, .aquarelle-section--film3d {
  --f3-blanc: #ffffff;
  --f3-voile: 14, 18, 34;        /* le voile du haut : un bleu nuit presque noir, en dégradé */
  --f3-ombre: 6, 8, 20;
  --aq-papier-defaut: #cfd8e3;
}

/* L'image remplit toute la feuille ; les visages sont au centre, c'est le haut et le bas qui se recadrent. */
.aquarelle--film3d .aquarelle__portrait { inset: 0; }
.aquarelle--film3d .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). */
.film3d { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.film3d::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 34%;
  background: linear-gradient(to bottom, rgba(var(--f3-voile), .6) 0%, rgba(var(--f3-voile), .5) 45%, rgba(var(--f3-voile), .2) 78%, rgba(var(--f3-voile), 0) 100%);
}
.film3d p { position: absolute; z-index: 1; left: 6cqw; right: 6cqw; margin: 0; text-align: center; white-space: nowrap; color: var(--f3-blanc); }
.film3d [hidden] { display: none !important; }
.aquarelle--film3d[data-etat="attente"] .film3d { opacity: .5; }

/* Le titre : Playfair Display en demi-gras, sur une ligne, resserré (`--f3-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, juste dessous. */
.film3d__titre {
  top: 5.6cqw; font-family: "Playfair Display", Georgia, serif; font-weight: 600; line-height: 1.12; letter-spacing: .005em;
  font-size: calc(8.6cqw * var(--f3-ech, 1));
  text-shadow: 0 .25cqw .9cqw rgba(var(--f3-ombre), .55), 0 0 .3cqw rgba(var(--f3-ombre), .4);
}
.film3d__sous {
  top: 15.6cqw; font-family: "Josefin Sans", "Inter", sans-serif; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2;
  font-size: calc(3.3cqw * var(--f3-ech, 1));
  text-shadow: 0 .2cqw .8cqw rgba(var(--f3-ombre), .75), 0 0 .3cqw rgba(var(--f3-ombre), .5);
}
/* Sans titre, le sous-titre monte à sa place. */
.film3d__titre[hidden] + .film3d__sous { top: 6.4cqw; }
/* Ni titre ni sous-titre : le voile du haut n'éclaircit plus rien, on le retire. */
.film3d:has(.film3d__titre[hidden]):has(.film3d__sous[hidden])::before { display: none; }

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