/* ═══════════════════════════ Nos deux lunes ═══════════════════════════
 *
 * La lune du jour de naissance de chacun, côte à côte, et une troisième pour la date qui les
 * relie. Servie **seulement** sur sa fiche (`views/product-affiche.liquid`).
 *
 * ── Les palettes ──
 *
 * **Ce sont des couleurs de produit, pas de charte** (point 6 quater) : en clair, toutes ici, en
 * tête, et nulle part ailleurs. Celles de l'affiche phase de lune (`affiche-lune.js`), pour que
 * la gamme se ressemble, et « Blanc » en deuxième comme sur toutes les affiches du ciel.
 * `[data-style]` ne nomme pas `.ln` exprès, pour que les pastilles du formulaire se colorent
 * avec les mêmes variables.
 *
 * --l-fond : le papier ; --l-texte : les lignes ; --l-clair : la teinte de la Lune (multipliée
 * sur la photo : le blanc la laisse telle quelle, l'or la dore) ; --l-ombre : la face nocturne ;
 * --l-trait : le liseré qui fait lire le disque entier.
 */
[data-style="Nuit"] { --l-fond: #0f1115; --l-texte: #f4f1ea; --l-clair: #f4f1ea; --l-ombre: #0f1115; --l-trait: rgba(244, 241, 234, .38); }
[data-style="Blanc"] { --l-fond: #ffffff; --l-texte: #111111; --l-clair: #ffffff; --l-ombre: #2b2b2b; --l-trait: rgba(17, 17, 17, .4); }
[data-style="Encre"] { --l-fond: #101d37; --l-texte: #ead9a8; --l-clair: #ead9a8; --l-ombre: #0b1426; --l-trait: rgba(234, 217, 168, .4); }
[data-style="Bordeaux"] { --l-fond: #3a0d19; --l-texte: #f5e9d4; --l-clair: #f5e9d4; --l-ombre: #240810; --l-trait: rgba(245, 233, 212, .4); }
[data-style="Forêt"] { --l-fond: #0f2b25; --l-texte: #e9f1eb; --l-clair: #e9f1eb; --l-ombre: #081b17; --l-trait: rgba(233, 241, 235, .4); }
[data-style="Papier"] { --l-fond: #f5f1e8; --l-texte: #1a1a1a; --l-clair: #ffffff; --l-ombre: #2b2b2b; --l-trait: rgba(26, 26, 26, .4); }

/* ── L'affiche ──
 *
 * Tout est en `cqw` : la même mise en page tient de l'A4 au 70 × 100. Le corps (les deux lunes,
 * et la troisième) se centre dans la hauteur ; la phrase tient le bas. Un prénom long se
 * resserre sans script : sa taille suit son nombre de signes (`--n`, posé par le serveur),
 * bornée des deux côtés — des capitales espacées de Cormorant font environ 0,8 em par signe, et
 * la colonne fait 40 cqw.
 */
.ln {
  --fond: var(--l-fond); --texte: var(--l-texte);
  font-family: "Cormorant Garamond", Georgia, serif; text-align: center;
  align-items: center; padding: 11cqw 7cqw 9cqw;
}
.ln__corps { margin: auto 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 5cqw; }
.ln__duo { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6cqw; }
.ln__personne { display: flex; flex-direction: column; align-items: center; min-width: 0; }
/* Les lunes cèdent quand la place manque (`--ln-echelle`, posée par l'éditeur) : le 30 × 40 a
   sept pour cent de hauteur de moins que l'A4, et une légende longue prend deux lignes. Le texte,
   lui, garde sa taille. */
.ln__lune { width: calc(38cqw * var(--ln-echelle, 1)); aspect-ratio: 1; }
.ln__lune--nous { width: calc(19cqw * var(--ln-echelle, 1)); }
.ln__lune:empty { border-radius: 50%; border: 1px dashed var(--l-trait); }
.ln__disque { display: block; width: 100%; height: 100%; }
.ln__teinte { fill: var(--l-clair); mix-blend-mode: multiply; }
.ln__ombre { fill: var(--l-ombre); opacity: .9; }
.ln__limbe { fill: none; stroke: var(--l-trait); stroke-width: .6; }
.ln__prenom {
  margin: 4.5cqw 0 0; width: 100%; font-weight: 500; line-height: 1.05;
  font-size: clamp(2.8cqw, calc(46cqw / var(--n, 6)), 7.5cqw);
  letter-spacing: .14em; text-transform: uppercase; padding-left: .14em; overflow-wrap: break-word;
}
.ln__date, .ln__phase, .ln__titre { margin: 0; }
/* Les dates tiennent sur une ligne : leur taille suit la plus longue des deux (`--nd`, posé par
   le calcul), comme les prénoms — « 23 de septiembre de 1991 » passait sinon l'année à la ligne. */
.ln__date {
  margin-top: 1.4cqw; font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 300;
  font-size: clamp(2.2cqw, calc(54cqw / var(--nd, 12)), 3.2cqw); letter-spacing: .12em; white-space: nowrap;
}
.ln__nous .ln__date { font-size: 3.2cqw; }
.ln__phase {
  margin-top: .8cqw; font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 300;
  font-size: 2.5cqw; letter-spacing: .12em; opacity: .7;
}
.ln__nous { display: flex; flex-direction: column; align-items: center; }
.ln__nous[hidden] { display: none; }
/* La légende et la phrase sont libres : un mot sans espace plus long que la ligne se coupe
   plutôt que de sortir de l'affiche. */
.ln__titre { margin-top: 2.6cqw; font-style: italic; font-size: 4.8cqw; line-height: 1.15; max-width: 100%; overflow-wrap: anywhere; }
.ln__phrase { margin: 3cqw 0 0; max-width: 100%; font-style: italic; font-size: 5.2cqw; line-height: 1.2; opacity: .92; overflow-wrap: anywhere; }
.ln__phrase:empty, .ln__phase:empty, .ln__date:empty, .ln__titre:empty { display: none; }

/* ── Le formulaire ── */
.ln-personne { display: grid; gap: .6rem; }
.ln-personne label { margin-top: .4rem; }
.ln-titres { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1rem; }
.ln-titres[hidden] { display: none; }
.ln-titres__choix {
  font: inherit; font-size: 1.4rem; min-height: 4.4rem; padding: .6rem 1.4rem; cursor: pointer;
  border: .1rem solid rgba(var(--color-foreground), .25); border-radius: 2.2rem; background: none; color: inherit;
}
.ln-styles { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.ln-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ln-styles label {
  display: flex; flex-direction: column; align-items: center; gap: .5rem; cursor: pointer; min-width: 6.4rem;
  font-size: 1.2rem; font-weight: 400; color: rgba(var(--color-foreground), .7);
  border: .15rem solid transparent; border-radius: .8rem; padding: .6rem;
}
.ln-styles input:checked + label { border-color: rgb(var(--color-accent)); color: rgb(var(--color-foreground)); }
.ln-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
/* La pastille montre ce que vend la palette : le papier, et la Lune dessus. */
.ln-pastille {
  width: 3.8rem; height: 3.8rem; border-radius: 50%; position: relative; overflow: hidden;
  background: var(--l-fond); border: .1rem solid rgba(var(--color-foreground), .2);
}
.ln-pastille::after {
  content: ""; position: absolute; inset: 22%; border-radius: 50%;
  background: var(--l-clair); box-shadow: inset -.5rem 0 0 var(--l-ombre);
}