/* ═══════════════════════════ Le Film ═══════════════════════════
 *
 * L'arrivée d'un bébé comme la sortie nationale d'un film. Servie **seulement** sur sa fiche
 * (`views/product-affiche.liquid`).
 *
 * ── Les styles ──
 *
 * **Ce sont des couleurs de produit, pas de charte** (point 6 quater) : en clair, toutes ici, en
 * tête, et nulle part ailleurs. Des conventions de genre — bleu nuit et or du grand spectacle,
 * noir et blanc d'une salle de quartier, jaune d'une comédie, papier crème d'un film d'auteur —,
 * jamais la mise en page, la police ou le personnage d'un film réel. `[data-style]` ne nomme pas
 * `.ci` exprès, pour que les échantillons du formulaire se colorent avec les mêmes variables.
 *
 * --c-fond : le papier ; --c-fond-image : un dégradé qui l'éclaire (le papier seul à défaut) ;
 * --c-texte : les lignes ; --c-accent : le titre et les étoiles ; --c-doux : les petites
 * capitales ; --c-filet : les traits ; --c-ombre : le décalage du titre ; --c-titre-fond : un
 * dégradé dans la lettre (aucun à défaut) ; --c-k : la largeur moyenne d'une capitale du titre,
 * en em, qui règle sa taille d'après le nombre de signes.
 */
[data-style="Blockbuster"] {
  --c-fond: #0a1330; --c-fond-image: radial-gradient(ellipse at 50% 28%, #1d3166 0%, #0a1330 62%, #050a1c 100%);
  --c-texte: #f4ecd8; --c-accent: #e8b84b; --c-doux: #b8b09a; --c-filet: rgba(232, 184, 75, .55); --c-ombre: rgba(0, 0, 0, .5);
  --c-titre-fond: linear-gradient(180deg, #fff3c4 0%, #e8b84b 52%, #a8761c 100%); --c-k: .5;
}
[data-style="Noir et blanc"] {
  --c-fond: #0d0d0d; --c-fond-image: radial-gradient(ellipse at 50% 30%, #2a2a2a 0%, #0d0d0d 70%);
  --c-texte: #f4f4f0; --c-accent: #ffffff; --c-doux: #b9b9b4; --c-filet: rgba(244, 244, 240, .7); --c-ombre: rgba(0, 0, 0, .6);
  --c-titre-fond: none; --c-k: .8;
}
[data-style="Comédie"] {
  --c-fond: #ffd43b; --c-fond-image: radial-gradient(ellipse at 50% 30%, #ffe27a 0%, #ffd43b 70%);
  --c-texte: #1b1b1b; --c-accent: #b3151a; --c-doux: #4a3d12; --c-filet: #1b1b1b; --c-ombre: #1b1b1b;
  --c-titre-fond: none; --c-k: .5;
}
[data-style="Minimal"] {
  --c-fond: #f7f4ee; --c-fond-image: none;
  --c-texte: #1c1c1c; --c-accent: #1c1c1c; --c-doux: #6b665c; --c-filet: rgba(28, 28, 28, .45); --c-ombre: transparent;
  --c-titre-fond: none; --c-k: .66;
}

@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/anton-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/anton-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── L'affiche ──
 *
 * Tout est en `cqw` : la même mise en page tient de l'A4 au 70 × 100. Le titre prend la place que
 * laissent les autres blocs. Le titre se règle d'après le nombre de signes (`--n`, posé par le
 * serveur) avant tout script ; l'éditeur resserre ensuite au pixel (`--ech-titre`). Les critiques
 * et les interlignes cèdent quand la hauteur manque (`--ci-echelle`) ; les petites capitales du
 * générique, jamais : sous 1,5 cqw, ce serait illisible sur un A4.
 */
.ci {
  --fond: var(--c-fond); --texte: var(--c-texte);
  background: var(--c-fond-image, var(--c-fond)); background-color: var(--c-fond);
  font-family: "Roboto Condensed", system-ui, sans-serif; text-align: center;
}
.ci__cadre {
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; gap: calc(2.2cqw * var(--ci-echelle, 1)); padding: 8.5cqw 8cqw 6.5cqw;
}
/* Le filet de l'affiche : double en noir et blanc, épais dans la comédie, absent ailleurs. */
.ci__cadre::before, .ci__cadre::after { content: none; position: absolute; pointer-events: none; }
.ci[data-style="Noir et blanc"] .ci__cadre::before { content: ""; inset: 3.2cqw; border: .5cqw solid var(--c-filet); }
.ci[data-style="Noir et blanc"] .ci__cadre::after { content: ""; inset: 4.6cqw; border: .15cqw solid var(--c-filet); }
.ci[data-style="Comédie"] .ci__cadre::before { content: ""; inset: 3cqw; border: 1.1cqw solid var(--c-filet); border-radius: 2.4cqw; }
.ci[data-style="Blockbuster"] .ci__cadre::before { content: ""; inset: 3.4cqw; border: .25cqw solid var(--c-filet); }

/* Une saisie sans espace (vingt-huit signes de lieu, quarante de sous-titre) ne sort pas de l'affiche : elle se coupe. */
.ci p, .ci blockquote, .ci figcaption, .ci b { overflow-wrap: anywhere; }
.ci__prod, .ci__avec {
  margin: 0; font-size: 2cqw; letter-spacing: .22em; text-transform: uppercase; color: var(--c-doux); line-height: 1.5; text-wrap: balance;
}
.ci__prod b, .ci__avec b { color: var(--c-texte); font-weight: 700; letter-spacing: .22em; }
.ci__avec { letter-spacing: .12em; font-size: 1.9cqw; }
.ci__avec b { letter-spacing: .12em; font-weight: 400; }
.ci__slogan {
  margin: 0; font-size: 3.1cqw; font-style: italic; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3;
  color: var(--c-accent); text-wrap: balance; max-width: 78cqw;
}

.ci__titre-bloc { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2.2cqw; }
.ci__titre {
  margin: 0; width: 100%; white-space: nowrap; line-height: 1.02; text-transform: uppercase; color: var(--c-accent);
  font-family: "Anton", Impact, sans-serif; font-weight: 400; letter-spacing: .015em;
  font-size: calc(clamp(10cqw, calc(86cqw / (var(--n, 5) * var(--c-k, .5))), 34cqw) * var(--ech-titre, 1));
  /* Le fond d'un texte découpé (`background-clip`) ne peint que la boîte de la ligne : sans cette marge
     intérieure, l'accent d'un « É » sortait de la boîte et était coupé, doré à moitié. */
  padding-top: .16em; margin-top: -.1em;
  text-shadow: 0 .7cqw 0 var(--c-ombre);
  background-image: var(--c-titre-fond, none); -webkit-background-clip: text; background-clip: text;
}
.ci[data-style="Blockbuster"] .ci__titre { -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 .6cqw .4cqw var(--c-ombre)); }
.ci[data-style="Noir et blanc"] .ci__titre { font-family: "Playfair Display", Georgia, serif; font-weight: 900; letter-spacing: .03em; }
.ci[data-style="Comédie"] .ci__titre { text-shadow: .9cqw .9cqw 0 var(--c-ombre); letter-spacing: .03em; }
.ci[data-style="Minimal"] .ci__titre { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; letter-spacing: .16em; padding-left: .16em; text-shadow: none; }
.ci__sous-titre {
  margin: 0; font-size: 4.3cqw; letter-spacing: .1em; text-transform: uppercase; color: var(--c-texte); line-height: 1.25; text-wrap: balance;
}
.ci[data-style="Noir et blanc"] .ci__sous-titre, .ci[data-style="Minimal"] .ci__sous-titre { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; text-transform: none; font-size: 5cqw; letter-spacing: .04em; }

/* Les critiques : trois colonnes égales, cinq étoiles chacune, une phrase, une signature. */
.ci__critiques { width: 100%; display: flex; justify-content: center; gap: 3cqw; }
.ci__critique { flex: 1 1 0; max-width: 28cqw; min-width: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: calc(1cqw * var(--ci-echelle, 1)); }
.ci__etoiles { width: 11cqw; height: auto; fill: var(--c-accent); }
.ci__critique blockquote {
  margin: 0; font-style: italic; line-height: 1.28; color: var(--c-texte); overflow-wrap: anywhere;
  font-size: calc(2.45cqw * var(--ci-echelle, 1)); quotes: "\00ab\202f" "\202f\00bb";
}
.ci__critique blockquote::before { content: open-quote; }
.ci__critique blockquote::after { content: close-quote; }
:lang(en) .ci__critique blockquote { quotes: "\201c" "\201d"; }
:lang(de) .ci__critique blockquote { quotes: "\201e" "\201c"; }
.ci__critique figcaption { font-size: calc(1.9cqw * var(--ci-echelle, 1)); letter-spacing: .14em; text-transform: uppercase; color: var(--c-doux); }

/* La ligne de sortie, entre deux filets : c'est la phrase qu'on lit sur toutes les affiches. */
.ci__sortie {
  margin: 0; width: 100%; padding: 1.5cqw 0; border-top: .25cqw solid var(--c-filet); border-bottom: .25cqw solid var(--c-filet);
  font-size: 3.5cqw; font-weight: 700; letter-spacing: .2em; padding-left: .2em; text-transform: uppercase; color: var(--c-accent); line-height: 1.25; text-wrap: balance;
}
.ci__faits { display: flex; justify-content: center; align-items: stretch; gap: 0; flex-wrap: wrap; row-gap: 1.5cqw; }
.ci__fait { margin: 0; padding: 0 3.6cqw; display: flex; flex-direction: column; align-items: center; gap: .5cqw; min-width: 0; }
.ci__fait:not([hidden]) ~ .ci__fait:not([hidden]) { border-left: .2cqw solid var(--c-filet); }
/* Le lieu a sa propre ligne : un nom de maternité long ne se glisse pas dans la rangée des chiffres. */
.ci__fait--lieu { flex-basis: 100%; border-left: 0 !important; }
.ci__fait small { font-size: 1.6cqw; letter-spacing: .22em; padding-left: .22em; text-transform: uppercase; color: var(--c-doux); }
.ci__fait b { font-size: 3.7cqw; font-weight: 700; letter-spacing: .04em; color: var(--c-texte); line-height: 1.1; }

.ci__pied { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 4cqw; }
.ci__classement {
  margin: 0; flex: none; display: flex; flex-direction: column; align-items: center; gap: .4cqw; padding: 1.2cqw 2.4cqw;
  border: .3cqw solid var(--c-filet); color: var(--c-texte); text-align: center;
}
.ci__classement b { font-size: 2.3cqw; letter-spacing: .12em; text-transform: uppercase; line-height: 1.1; }
.ci__classement small { font-size: 1.5cqw; letter-spacing: .08em; text-transform: uppercase; color: var(--c-doux); line-height: 1.2; }
.ci__mention { margin: 0; max-width: 46cqw; font-size: 1.5cqw; line-height: 1.35; font-style: italic; color: var(--c-doux); text-align: right; text-wrap: balance; }

/* ── Le formulaire ── */
.ci-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.ci-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ci-styles label {
  display: grid; gap: .3rem; padding: 1rem 1.2rem; min-height: 4.4rem; cursor: pointer;
  border: .2rem solid rgba(var(--color-foreground), .15); border-radius: .8rem; font-weight: 400;
}
.ci-styles input:checked + label { border-color: rgb(var(--color-foreground)); }
.ci-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.ci-styles__nom { font-weight: 600; }
.ci-styles small { opacity: .75; }
.ci-echantillon {
  display: block; padding: .6rem .8rem; border-radius: .6rem; background: var(--c-fond-image, var(--c-fond)); background-color: var(--c-fond);
  color: var(--c-accent); font-family: "Anton", Impact, sans-serif; font-size: 2.2rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .04em;
}
.ci-styles label[data-style="Noir et blanc"] .ci-echantillon { font-family: "Playfair Display", Georgia, serif; font-weight: 900; }
.ci-styles label[data-style="Minimal"] .ci-echantillon { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; letter-spacing: .16em; }
.ci-styles label[data-style="Comédie"] .ci-echantillon { text-shadow: .15rem .15rem 0 var(--c-ombre); }

.ci-critiques-champs { display: grid; gap: 1.2rem; }
.ci-critique-champ, .ci-generique { border: .1rem solid rgba(var(--color-foreground), .15); border-radius: .8rem; padding: 1rem 1.2rem 1.2rem; margin: 0; }
.ci-critique-champ > legend, .ci-generique > legend { font-weight: 600; padding: 0 .4rem; }
.ci-critique-texte { display: flex; gap: .8rem; align-items: stretch; margin-bottom: .8rem; }
.ci-critique-texte textarea { flex: 1; min-width: 0; font-size: 1.6rem; resize: vertical; }
.ci-de { flex: none; display: grid; place-items: center; width: 4.4rem; min-height: 4.4rem; padding: 0; cursor: pointer; border: .1rem solid rgba(var(--color-foreground), .25); border-radius: .8rem; background: transparent; color: inherit; }
.ci-de svg { width: 2.4rem; height: 2.4rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ci-de svg circle { fill: currentColor; stroke: none; }
.ci-tout { justify-self: start; min-height: 4.4rem; }
.ci-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.ci-idees button {
  min-height: 4.4rem; padding: .6rem 1.2rem; border-radius: 99rem; cursor: pointer; text-align: left;
  border: .1rem solid rgba(var(--color-foreground), .25); background: transparent; color: inherit; font: inherit; font-size: 1.4rem;
}
.ci-idees button:hover { border-color: rgb(var(--color-foreground)); }
.ci-generique .affiche__champ { margin-bottom: 1rem; }
/* Sous 16 px, Safari zoome au focus d'un champ : les nombres et l'heure comprennent. */
.ci-generique input, .ci-critique-champ input { font-size: 1.6rem; }