/* ═══════════════════════════ 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%, #d9d0ea 28%, #6f5f96 49%, #efe9fb 56%, #8f80b4 82%, #cfc5e6 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; }

/* `min-height: 0` : un `aspect-ratio` n'est qu'une préférence, et la hauteur minimale automatique
   laisse le contenu agrandir la boîte. Le Cancer et la Balance, plus hauts que larges,
   étiraient le cercle en ovale et la constellation en sortait, à l'impression comme à l'écran
   (relevé le 1er oct. 2026). Un essai mesure les douze signes dans les quatre styles. */
.az__medaillon { position: relative; width: 100%; aspect-ratio: 1; min-height: 0; 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 ── */
/* Le prénom est en italique Cormorant, plus lisible : la Pinyon Script (grand L à empattement,
   accent flottant) faisait lire « L'éa » et devenait illisible dès un prénom un peu long. */
[data-palette="Cosmique"] .az__prenom { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500; font-size: calc(min(17cqw, 140cqw / var(--n, 6)) * var(--ech, 1)); color: var(--z-accent); line-height: 1.2; letter-spacing: .01em; }
[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); font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500; font-size: 4cqw; }

/* ── 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: .015em; line-height: 1.05; padding-bottom: .12em;
  background: var(--z-chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .18cqw var(--z-accent); paint-order: stroke fill; filter: drop-shadow(0 .5cqw 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); }
}