/* ═══════════════════════════ Le Big Three ═══════════════════════════
 *
 * Servie **seulement** sur sa fiche (`views/product-affiche.liquid`).
 *
 * L'affiche qu'une femme de 18 à 30 ans offre à sa meilleure amie, et que l'amie filme en la
 * déballant. Trois colonnes — Soleil, Lune, Ascendant —, deux quand l'ascendant manque, et
 * quatre façons de les habiller. Les polices sont celles que la maison sert déjà (Cormorant,
 * Pinyon Script, Marcellus, Fredoka, Josefin Sans, Playfair) : rien à télécharger de plus.
 *
 * ── 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. `[data-palette]` porte le choix du client ; le sélecteur ne
 * nomme pas `.az`, pour que les pastilles du formulaire se colorent avec les mêmes variables.
 *
 * --z-fond : le papier (une couleur, puis un dégradé par-dessus dans --z-ciel) ; --z-encre : le
 * texte ; --z-accent : les noms des signes ; --z-doux : les petites lignes ; --z-trait : les
 * tracés des constellations ; --z-etoile : leurs étoiles ; --z-cadre : le médaillon ou la
 * lame ; --z-carte : le fond d'une lame ; --z-eclat : les éclats du décor.
 */
[data-palette="Cosmique"] {
  --z-fond: #0b1330; --z-ciel: radial-gradient(120% 80% at 50% 0%, #1c2a5c 0%, #0b1330 55%, #070b1f 100%);
  --z-encre: #f3ead7; --z-accent: #e0bf78; --z-doux: #b9b3c9; --z-trait: rgba(224, 191, 120, .55);
  --z-etoile: #fbeec6; --z-cadre: rgba(224, 191, 120, .6); --z-carte: #0f1a40; --z-eclat: #e0bf78;
  --z-prenom: "Pinyon Script"; --z-titre: "Cormorant Garamond"; --z-texte: "Cormorant Garamond";
}
[data-palette="Tarot"] {
  --z-fond: #2a1330; --z-ciel: radial-gradient(90% 70% at 50% 45%, #3b1d42 0%, #2a1330 60%, #1d0c22 100%);
  --z-encre: #f4e7cf; --z-accent: #e3b85c; --z-doux: #cdb9c7; --z-trait: rgba(58, 31, 52, .75);
  --z-etoile: #3a1f34; --z-cadre: #c99a3f; --z-carte: #f3e6cb; --z-eclat: #e3b85c; --z-lame-encre: #3a1f34;
  --z-prenom: "Marcellus"; --z-titre: "Marcellus"; --z-texte: "Cormorant Garamond";
}
[data-palette="Y2K"] {
  --z-fond: #f6d3ec; --z-ciel: linear-gradient(165deg, #ffd9ef 0%, #eddcff 45%, #d3e9ff 100%);
  --z-encre: #4a2766; --z-accent: #8a3fc4; --z-doux: #7a5a93; --z-trait: rgba(255, 255, 255, .9);
  --z-etoile: #ffffff; --z-cadre: #ffffff; --z-carte: #f3c9f0; --z-eclat: #ffffff;
  --z-chrome: linear-gradient(180deg, #ffffff 0%, #e9e4f2 30%, #9a8fb3 49%, #f7f3ff 56%, #b7acd0 80%, #ffffff 100%);
  --z-bulle: radial-gradient(circle at 32% 26%, #ffffff 0%, #ffd3f1 32%, #c9a8ff 78%, #a98bf0 100%);
  --z-ombre: #b48be0;
  --z-prenom: "Fredoka"; --z-titre: "Fredoka"; --z-texte: "Fredoka";
}
[data-palette="Minimal"] {
  --z-fond: #f2eee6; --z-ciel: none;
  --z-encre: #1b1a18; --z-accent: #1b1a18; --z-doux: #6c675e; --z-trait: rgba(27, 26, 24, .7);
  --z-etoile: #1b1a18; --z-cadre: rgba(27, 26, 24, .25); --z-carte: transparent; --z-eclat: transparent;
  --z-prenom: "Josefin Sans"; --z-titre: "Josefin Sans"; --z-texte: "Cormorant Garamond";
}

/* ── L'affiche ──
 *
 * Tout est en `cqw` : l'affiche se lit sur sa propre largeur, donc le même dessin tient de
 * l'aperçu de 360 px au 70 × 100 imprimé. Les rapports vendus vont de 1,333 (30 × 40) à 1,5
 * (40 × 60) : l'écart s'absorbe dans la répartition verticale (`space-between`), jamais dans
 * une taille de texte. */
.az {
  --fond: var(--z-fond); --texte: var(--z-encre);
  background: var(--z-ciel), var(--z-fond);
  padding: 7cqw 4.5cqw 6cqw; justify-content: space-between; gap: 2cqw; text-align: center;
  font-family: var(--z-texte), "Cormorant Garamond", Georgia, serif; line-height: 1.2;
}
.az p, .az ul { margin: 0; padding: 0; }
.az ul { list-style: none; }
.az [hidden] { display: none !important; }
.az > :not(.az__decor) { position: relative; }

.az__decor { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--z-eclat); opacity: .8; pointer-events: none; }

/* L'en-tête : « Le Big Three de », puis le prénom, qui remplit la largeur sans jamais crier
   au-delà de 17 cqw. La taille part du nombre de signes (`--n`, posé par le serveur et
   l'éditeur) pour qu'une page sans script ne déborde déjà pas ; l'éditeur resserre au pixel. */
.az__tete { display: flex; flex-direction: column; align-items: center; gap: .9cqw; }
.az__kicker { font-family: var(--z-titre), serif; font-size: 2cqw; letter-spacing: .34em; text-transform: uppercase; color: var(--z-doux); padding-left: .34em; }
.az__prenom {
  width: 100%; white-space: nowrap; overflow: hidden; line-height: 1.12; padding: 0 .1em .06em;
  font-family: var(--z-prenom), serif; color: var(--z-encre);
  font-size: calc(min(19cqw, 124cqw / var(--n, 6)) * var(--ech, 1));
}
.az__naissance { font-family: var(--z-titre), serif; font-size: 1.95cqw; letter-spacing: .22em; text-transform: uppercase; color: var(--z-doux); font-variant-numeric: lining-nums; }

/* Les astres : trois colonnes, deux quand l'ascendant n'est pas là — elles se resserrent au
   milieu plutôt que de laisser un trou à droite. */
/* Les astres : trois colonnes, deux quand l'ascendant n'est pas là — elles se resserrent au
   milieu plutôt que de laisser un trou à droite. Une pyramide (le Soleil au-dessus des deux
   autres) a été essayée : plus spectaculaire, elle déborde du 30 × 40, et une affiche ne
   change pas de composition avec son format. */
.az__astres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4cqw; align-items: start; }
.az[data-nombre="2"] .az__astres { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 68%; margin: 0 auto; gap: 7cqw; }
/* Deux filets ornés, sous l'en-tête et au-dessus du pied : ils tiennent la page quand le
   format s'allonge, et rien ne flotte dans le vide. */
.az__filet { display: block; width: 34cqw; height: 3cqw; margin: 0 auto; fill: var(--z-cadre); stroke: var(--z-cadre); stroke-width: .5; }
.az__astre { display: flex; flex-direction: column; align-items: center; gap: 1.1cqw; min-width: 0; }
.az__visuel { display: contents; }
.az__lame, .az__carte { display: none; }

.az__medaillon { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; border: .22cqw solid var(--z-cadre); display: grid; place-items: center; margin-bottom: 13%; }
.az__ciel { width: 74%; height: 74%; display: grid; place-items: center; }
.az__ciel svg, .az__glyphe svg, .az__symbole svg, .az__lunule svg { display: block; width: 100%; height: 100%; overflow: visible; }
.az-constellation .az-traits { fill: none; stroke: var(--z-trait); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
.az-constellation .az-etoiles { fill: var(--z-etoile); }
.az-glyphe, .az-symbole { fill: currentColor; }
/* Le glyphe du signe, en sceau posé sur le bas du médaillon. */
.az__glyphe {
  position: absolute; left: 50%; bottom: 0; width: 22%; aspect-ratio: 1; transform: translate(-50%, 50%);
  padding: 4.5%; border-radius: 50%; background: var(--z-carte); border: .22cqw solid var(--z-cadre); color: var(--z-accent);
}

.az__label { display: inline-flex; align-items: center; gap: .6em; font-family: var(--z-titre), serif; font-size: 1.7cqw; letter-spacing: .28em; text-transform: uppercase; color: var(--z-doux); padding-left: .28em; }
.az__symbole { width: 1.25em; height: 1.25em; flex: none; }
.az__signe { font-family: var(--z-titre), serif; white-space: nowrap; font-size: min(5.8cqw, 46cqw / var(--n, 8)); line-height: 1; color: var(--z-accent); font-weight: 600; font-style: italic; }
.az__role { font-size: 1.95cqw; font-style: italic; color: var(--z-doux); letter-spacing: .02em; }
.az__phrase { font-size: 2.5cqw; line-height: 1.25; color: var(--z-encre); margin-top: .4cqw; overflow-wrap: anywhere; text-wrap: pretty; }

/* Le pied : trois faits tirés de la date — la lune de ce jour-là, l'élément qui domine, le
   jour de la semaine —, chacun un titre et une valeur, séparés d'un filet ; puis la dédicace. */
.az__pied { display: flex; flex-direction: column; align-items: center; gap: 3cqw; }
.az__faits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.az__faits li { display: flex; flex-direction: column; align-items: center; gap: .7cqw; padding: 0 1.5cqw; min-width: 0; }
.az__faits li + li { border-left: .15cqw solid var(--z-cadre); }
.az__faits small { font-family: var(--z-titre), serif; font-size: 1.35cqw; letter-spacing: .2em; text-transform: uppercase; color: var(--z-doux); }
.az__faits b { display: inline-flex; align-items: center; gap: .5em; font-family: var(--z-texte), serif; font-weight: 500; font-style: italic; font-size: 2.4cqw; color: var(--z-encre); line-height: 1.15; }
/* « Mercredi », « Premier croissant » : une valeur seule prend sa capitale, le texte non. */
.az__faits b span[data-v] { display: inline-block; }
.az__faits b span[data-v]::first-letter { text-transform: uppercase; }
.az__lunule { width: 1em; height: 1em; flex: none; color: var(--z-accent); }
.az-lunule circle { fill: none; stroke: currentColor; stroke-width: 1.1; }
.az-lunule path { fill: currentColor; }
.az__dedicace { font-family: var(--z-prenom), serif; font-size: 4.4cqw; line-height: 1.2; color: var(--z-accent); max-width: 88%; }

/* ── Cosmique : nuit, or, et l'anglaise du prénom ── */
[data-palette="Cosmique"] .az__prenom { font-size: calc(min(15cqw, 128cqw / var(--n, 6)) * var(--ech, 1)); color: var(--z-accent); line-height: 1.3; }
[data-palette="Cosmique"] .az__kicker { font-weight: 500; }
[data-palette="Cosmique"] .az__phrase { font-style: italic; font-size: 2.2cqw; }
[data-palette="Cosmique"] .az__dedicace { color: var(--z-encre); }

/* ── Tarot : trois lames, leur numéro, leur titre ──
   La lame est un rectangle au haut cintré, bordé d'un filet double : le médaillon devient la
   vignette de la carte, le glyphe son sujet. Le signe et la phrase restent sous la carte. */
[data-palette="Tarot"] .az__visuel {
  display: flex; flex-direction: column; align-items: center; gap: 1cqw; width: 100%;
  padding: 2cqw 1.6cqw 1.8cqw; background: var(--z-carte); color: var(--z-lame-encre);
  border: .3cqw solid var(--z-cadre); outline: .18cqw solid var(--z-cadre); outline-offset: .55cqw;
  border-radius: 50% 50% .6cqw .6cqw / 16% 16% .6cqw .6cqw; margin-bottom: 1.6cqw;
}
[data-palette="Tarot"] .az__lame { display: block; font-family: "Marcellus", serif; font-size: 2cqw; letter-spacing: .12em; }
[data-palette="Tarot"] .az__carte { display: block; font-family: "Marcellus", serif; font-size: 1.55cqw; letter-spacing: .22em; text-transform: uppercase; border-top: .15cqw solid var(--z-cadre); padding-top: .9cqw; width: 100%; }
[data-palette="Tarot"] .az__medaillon { border: 0; margin: 0; width: 88%; }
[data-palette="Tarot"] .az__ciel { width: 86%; height: 86%; opacity: .55; }
[data-palette="Tarot"] .az__glyphe { left: 50%; top: 50%; bottom: auto; width: 42%; transform: translate(-50%, -50%); background: none; border: 0; padding: 0; color: var(--z-lame-encre); }
[data-palette="Tarot"] .az-constellation .az-traits { stroke-width: .7; }
[data-palette="Tarot"] .az__label { display: none; }
[data-palette="Tarot"] .az__signe { font-style: normal; font-weight: 400; font-size: min(4.4cqw, 38cqw / var(--n, 8)); letter-spacing: .06em; }
[data-palette="Tarot"] .az__prenom { text-transform: uppercase; letter-spacing: .08em; font-size: calc(min(11cqw, 96cqw / var(--n, 6)) * var(--ech, 1)); color: var(--z-accent); }
[data-palette="Tarot"] .az__phrase { font-style: italic; }
[data-palette="Tarot"] .az__dedicace { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 3.4cqw; }
[data-palette="Tarot"] .az__decor { display: none; }
[data-palette="Tarot"] .az__filet { fill: var(--z-accent); stroke: var(--z-accent); }

/* ── Y2K : chrome, rose et bulles ──
   Le chrome est un dégradé découpé dans la lettre, cerné d'une ombre franche décalée : sans
   elle, un blanc argenté sur un rose pâle ne se lit pas. */
[data-palette="Y2K"] .az__prenom {
  font-weight: 600; letter-spacing: -.01em; line-height: 1.05; padding-bottom: .12em;
  background: var(--z-chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .12cqw var(--z-accent); filter: drop-shadow(0 .45cqw 0 var(--z-ombre));
  font-size: calc(min(16cqw, 112cqw / var(--n, 6)) * var(--ech, 1));
}
[data-palette="Y2K"] .az__kicker { font-weight: 600; color: var(--z-accent); letter-spacing: .28em; }
[data-palette="Y2K"] .az__naissance { font-weight: 500; letter-spacing: .12em; }
[data-palette="Y2K"] .az__medaillon { background: var(--z-bulle); border: .45cqw solid var(--z-cadre); box-shadow: 0 .6cqw 0 var(--z-ombre); margin-bottom: 15%; }
[data-palette="Y2K"] .az__ciel { opacity: .9; }
[data-palette="Y2K"] .az__glyphe { background: var(--z-cadre); border: 0; color: var(--z-accent); width: 26%; box-shadow: 0 .35cqw 0 var(--z-ombre); }
[data-palette="Y2K"] .az__signe { font-style: normal; font-weight: 600; font-size: min(5cqw, 40cqw / var(--n, 8)); }
[data-palette="Y2K"] .az__label { font-weight: 600; color: var(--z-accent); letter-spacing: .2em; }
[data-palette="Y2K"] .az__role { font-style: normal; font-weight: 400; }
[data-palette="Y2K"] .az__phrase { font-size: 2.15cqw; font-weight: 400; line-height: 1.3; }
[data-palette="Y2K"] .az__faits b { font-style: normal; font-weight: 500; font-size: 2.1cqw; }
[data-palette="Y2K"] .az__faits small { font-weight: 500; letter-spacing: .12em; }
[data-palette="Y2K"] .az__dedicace { font-weight: 600; font-size: 3.3cqw; }
[data-palette="Y2K"] .az__decor { opacity: 1; }

/* ── Minimal : crème, noir, du trait et de l'air ── */
[data-palette="Minimal"] .az__prenom { font-weight: 300; text-transform: uppercase; letter-spacing: .2em; padding-left: .2em; font-size: calc(min(10cqw, 84cqw / var(--n, 6)) * var(--ech, 1)); }
[data-palette="Minimal"] .az__kicker { font-weight: 400; }
[data-palette="Minimal"] .az__naissance { font-weight: 300; }
[data-palette="Minimal"] .az__medaillon { border-width: .12cqw; margin-bottom: 11%; }
[data-palette="Minimal"] .az__glyphe { width: 18%; background: var(--z-fond); border-width: .12cqw; }
[data-palette="Minimal"] .az-constellation .az-traits { stroke-width: .55; }
[data-palette="Minimal"] .az__signe { font-style: normal; font-weight: 400; font-size: min(3.4cqw, 25cqw / var(--n, 8)); letter-spacing: .24em; text-transform: uppercase; padding-left: .24em; }
[data-palette="Minimal"] .az__label { font-weight: 400; }
[data-palette="Minimal"] .az__phrase { font-style: italic; }
[data-palette="Minimal"] .az__dedicace { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 3.4cqw; color: var(--z-encre); }
[data-palette="Minimal"] .az__decor { display: none; }

/* ── Le formulaire ── */
.az-aide { margin: -.4rem 0 1.6rem; font-size: 1.3rem; line-height: 1.4; color: rgba(var(--color-foreground), .75); }
.az-aide:empty { display: none; }
.az-saisie { display: flex; gap: .6rem; }
/* 1,6 rem : sous 16 px, Safari zoome la page au focus d'un champ. */
.affiche__champ .az-saisie input { font-size: 1.6rem; min-width: 0; }
.az-bouton, .az-de {
  flex: none; min-height: 4.4rem; border-radius: .6rem; cursor: pointer; font: inherit; font-size: 1.4rem; font-weight: 600;
  border: .1rem solid rgba(var(--color-foreground), .3); background: rgb(var(--color-background)); color: inherit; padding: 0 1.4rem;
}
.az-de { width: 4.6rem; padding: 0; font-size: 2rem; }
.az-bouton[hidden], .az-de[hidden], .az-idees[hidden], .az-phrase[hidden] { display: none; }

/* Les trois signes : le moment où l'on apprend sa Lune. Une ligne par astre, le symbole, le
   nom, la liste ; ce qu'il faut savoir dessous. */
.az-signes { gap: 1rem; }
.az-signe { display: grid; grid-template-columns: 11rem minmax(0, 1fr); align-items: center; gap: .4rem 1rem; }
.az-signe > label { display: inline-flex; align-items: center; gap: .6rem; margin: 0; }
.az-signe__symbole { display: inline-block; width: 1.8rem; height: 1.8rem; }
.az-signe__symbole svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.az-signe select { width: 100%; min-height: 4.4rem; padding: .6rem .8rem; border-radius: 6px; border: 1px solid rgba(var(--color-foreground), .3); background: rgb(var(--color-background)); color: inherit; font: inherit; font-size: 1.6rem; }
.az-signe .az-signe__aide { grid-column: 1 / -1; margin: 0; }

.az-choix { display: grid; gap: .8rem; }
.az-tons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.az-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* La largeur des boutons radio est posée ici : la feuille générale fait des champs pleine
   largeur (`.affiche__champ input`), et sortis du flux ils gardaient 100 % à leur abscisse. */
.az-choix input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.az-choix label {
  display: flex; flex-direction: column; justify-content: center; gap: .2rem; cursor: pointer; margin: 0;
  font-size: 1.4rem; font-weight: 600; min-height: 4.4rem; line-height: 1.2;
  border: .15rem solid rgba(var(--color-foreground), .18); border-radius: .8rem; padding: .6rem .9rem;
}
.az-tons label small { font-size: 1.2rem; font-weight: 400; color: rgba(var(--color-foreground), .72); }
.az-choix input:checked + label { border-color: rgb(var(--color-foreground)); box-shadow: inset 0 0 0 .1rem rgb(var(--color-foreground)); }
.az-choix input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.az-styles label { flex-direction: row; align-items: center; justify-content: flex-start; gap: .9rem; }
.az-pastille {
  flex: none; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; padding: .7rem;
  background: var(--z-ciel), var(--z-fond); color: var(--z-accent); border: .1rem solid rgba(var(--color-foreground), .15);
}
.az-pastille svg { display: block; width: 100%; height: 100%; fill: currentColor; }

.az-idees { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.az-idee {
  min-height: 4.4rem; padding: .5rem 1.1rem; border-radius: 1.2rem; cursor: pointer;
  font: inherit; font-size: 1.3rem; line-height: 1.25; text-align: left;
  border: .1rem solid rgba(var(--color-foreground), .3); background: rgb(var(--color-background)); color: inherit;
}
.az-idee[aria-pressed="true"] { background: rgb(var(--color-foreground)); color: rgb(var(--color-background)); border-color: transparent; }
.az-idee:focus-visible, .az-de:focus-visible, .az-bouton:focus-visible { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.az-phrase { margin-bottom: 1.2rem; }
@media screen and (max-width: 420px) {
  .az-tons { grid-template-columns: 1fr; }
  .az-signe { grid-template-columns: 9.5rem minmax(0, 1fr); }
}