/* ═══════════════════════ Ton âge dans le système solaire ═══════════════════════
 *
 * L'âge de quelqu'un en années de chacune des huit planètes. Servie **seulement** sur sa fiche
 * (`views/product-affiche.liquid`), **après** `planetes.css` : celle-ci porte les couleurs des
 * planètes (les mêmes dans les quatre styles — ce sont les planètes) et la palette des quatre
 * styles (`[data-style]`, `--s-fond`, `--s-texte`, `--s-or`…), que cette feuille lit sans les
 * redéclarer. Les deux affiches du système solaire ne peuvent donc pas diverger sur une couleur.
 *
 * ── Les couleurs ──
 *
 * **Ce sont des couleurs de produit, pas de charte** (point 6 quater) : ici, en tête, et nulle
 * part ailleurs dans cette feuille. Une seule est propre à cette affiche : l'encre de l'âge écrit
 * dans la Terre, blanche sur le bleu de la planète, avec un liseré sombre qui la détache de sa
 * face éclairée.
 */
.ap {
  --ap-encre-terre: #ffffff; --ap-liseret-terre: rgba(6, 22, 48, .55);
  --ap-confetti-1: #ff7ab0; --ap-confetti-2: #5fe0d0; /* le décor d'étoiles du style Anniversaire */
}

/* ── L'affiche ──
 *
 * Tout est en `cqw` : la même mise en page tient de l'A4 au 70 × 100. De haut en bas : l'en-tête
 * (le titre et le prénom), la Terre — qui prend la hauteur que le reste lui laisse, bornée —,
 * les sept autres planètes en deux rangées, les deux faits calculés, la phrase, le pied. Rien ne
 * flotte : les espaces qui restent sur un format haut se répartissent entre les blocs
 * (`space-between`), la Terre grossissant d'abord.
 */
.ap {
  --fond: var(--s-fond); --texte: var(--s-texte);
  font-family: "Josefin Sans", system-ui, sans-serif; text-align: center;
  align-items: center; justify-content: space-between; padding: 6cqw 6cqw 5.5cqw;
}
.ap > * { flex: none; max-width: 100%; }
.ap p, .ap ul { margin: 0; }

.ap__tete { width: 100%; display: flex; flex-direction: column; align-items: center; }
.ap__kicker {
  color: var(--s-or); font-weight: 400; text-transform: uppercase; font-size: 2.3cqw;
  letter-spacing: .34em; padding-left: .34em; white-space: nowrap;
}
/* Les prénoms : capitales fines. La taille suit le nombre de signes (`--n`, posé par le calcul),
   bornée des deux côtés : une page sans script ne déborde déjà pas, et l'éditeur resserre au
   pixel. Ils ne passent pas à la ligne. */
.ap__prenoms {
  margin-top: 1.8cqw; font-weight: 300; text-transform: uppercase; letter-spacing: .2em; padding-left: .2em;
  font-size: clamp(2.4cqw, calc(100cqw / var(--n, 12)), 6.4cqw); line-height: 1.15; white-space: nowrap;
  /* Pleine largeur : un enfant d'une colonne centrée est large comme son texte, donc `clientWidth`
     vaudrait `scrollWidth` et la mesure ne verrait jamais de débordement. */
  width: 100%;
}

/* La Terre : elle prend la hauteur qui reste, et son dessin s'y inscrit en entier. */
.ap__terre { flex: 1 1 0; min-height: 24cqw; max-height: 64cqw; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ap__terre-svg { flex: 1 1 0; min-height: 0; width: 100%; display: block; overflow: visible; }
.ap__terre-age {
  fill: var(--ap-encre-terre); font-weight: 600; font-variant-numeric: lining-nums;
  stroke: var(--ap-liseret-terre); stroke-width: .7px; paint-order: stroke;
}
.ap__terre-unite { fill: var(--ap-encre-terre); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; }

/* Anniversaire : le décor d'étoiles devient des confettis (trois couleurs, pas une). */
.ap[data-style="Anniversaire"] .ss__etoile:nth-child(3n+2) { fill: var(--ap-confetti-1); }
.ap[data-style="Anniversaire"] .ss__etoile:nth-child(3n) { fill: var(--ap-confetti-2); }

/* Les sept autres planètes, puis le compte des jours : deux colonnes, un dessin et son âge. Chaque
   dessin a sa boîte (`--lw`, `--lh`, en cqw, posées par le calcul) ; la colonne des dessins a la
   largeur de l'anneau de Saturne, le plus large. */
.ap__liste { list-style: none; padding: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .9cqw 3cqw; }
.ap__p { display: grid; grid-template-columns: 17cqw 22cqw; justify-content: center; align-items: center; column-gap: 1.8cqw; min-width: 0; text-align: left; }
.ap__p-disque { display: flex; align-items: center; justify-content: center; min-height: 10.8cqw; }
.ap__svg { flex: none; display: block; overflow: visible; width: calc(var(--lw) * 1cqw); height: calc(var(--lh) * 1cqw); }
.ap__p-texte { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ap__p-nom { color: var(--s-or); font-weight: 400; text-transform: uppercase; font-size: 1.9cqw; letter-spacing: .28em; line-height: 1.25; }
.ap__p-age { font-weight: 500; font-size: 6.5cqw; line-height: 1; font-variant-numeric: lining-nums; white-space: nowrap; }
.ap__p-unite { color: var(--s-doux); font-weight: 400; font-size: 1.9cqw; letter-spacing: .05em; line-height: 1.25; }

/* Les deux faits calculés, côte à côte, séparés par un filet. */
.ap__faits { width: 100%; display: grid; grid-template-columns: 1fr 1fr; border-top: max(1px, .2cqw) solid var(--s-orbite); border-bottom: max(1px, .2cqw) solid var(--s-orbite); }
.ap__fait { padding: 1.9cqw 2.4cqw; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.ap__fait + .ap__fait { border-left: max(1px, .2cqw) solid var(--s-orbite); }
.ap__fait-titre { color: var(--s-or); font-weight: 400; text-transform: uppercase; font-size: 1.85cqw; letter-spacing: .16em; padding-left: .16em; text-wrap: balance; }
.ap__fait-valeur { margin-top: 1cqw; font-weight: 500; font-size: 4.4cqw; line-height: 1.15; font-variant-numeric: lining-nums; text-wrap: balance; overflow-wrap: anywhere; }
.ap__fait-detail { margin-top: .9cqw; color: var(--s-doux); font-weight: 400; font-size: 2cqw; line-height: 1.3; text-wrap: balance; overflow-wrap: anywhere; }

.ap__phrase { color: var(--s-or); font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: calc(4.2cqw * var(--ap-ph, 1)); line-height: 1.2; overflow-wrap: anywhere; text-wrap: balance; }
.ap__phrase:empty { display: none; }
.ap__pied { width: 100%; display: flex; flex-direction: column; align-items: center; }
.ap__naissance { font-weight: 300; font-size: 2.4cqw; letter-spacing: .2em; padding-left: .2em; text-transform: uppercase; font-variant-numeric: lining-nums; }
.ap__methode { margin-top: 1.1cqw; color: var(--s-doux); font-weight: 400; font-size: 1.75cqw; letter-spacing: .04em; text-wrap: balance; }

/* Quand la place manque malgré tout (prénoms et phrase au plus long, allemand, 30 × 40) : le
   script resserre d'abord la phrase (`--ap-ph`), puis pose `data-serre`, qui laisse à la Terre
   moins de hauteur et rapproche les lignes. Jamais le texte des âges. */
.ap[data-serre] .ap__terre { min-height: 16cqw; }
.ap[data-serre] .ap__liste { row-gap: .3cqw; }
.ap[data-serre] .ap__faits .ap__fait { padding-block: 1.2cqw; }

/* ── Le formulaire ──
   Les pastilles de style sont celles de « Notre système solaire » (`.ss-styles`, planetes.css). */
.ap-quand { align-items: start; }