/* ═══════════════════════════ Notre système solaire ═══════════════════════════
 *
 * Les huit planètes autour du Soleil, vues du dessus, chacune à sa vraie place le jour donné.
 * Servie **seulement** sur sa fiche (`views/product-affiche.liquid`).
 *
 * ── Les couleurs ──
 *
 * **Ce sont des couleurs de produit, pas de charte** (point 6 quater) : en clair, toutes ici, en
 * tête, et nulle part ailleurs. Les planètes ont la même couleur dans les quatre styles — ce sont
 * les planètes — ; le style change le papier, l'or des orbites et l'encre des lignes.
 * `[data-style]` ne nomme pas `.ss` exprès, pour que les pastilles du formulaire se colorent avec
 * les mêmes variables.
 */
.ss, .ss-styles {
  --pl-mercure: #a9a6a1; --pl-venus: #ebdcb6; --pl-terre: #4f87c8; --pl-mars: #b65630;
  --pl-jupiter: #d9c19b; --pl-bande: #a9845a; --pl-saturne: #dab45e; --pl-anneau: #e6cc8e;
  --pl-uranus: #a9d9d3; --pl-neptune: #4668c4;
  --soleil-coeur: #fff4c8; --soleil: #e4a93a; --soleil-halo: #f2c562;
}
/*
 * --s-fond : le papier ; --s-texte : les prénoms et la date ; --s-or : la phrase et le filet ;
 * --s-doux : le lieu ; --s-orbite : les orbites ; --s-etoile : les étoiles des coins ;
 * --s-halo : le fin cercle autour de la Terre (blanc sur la nuit, encre sur le papier clair) ;
 * --s-liseret : le contour des planètes, qui fait lire Vénus, crème, sur un papier crème ;
 * --s-nuit : la face nocturne des planètes.
 */
[data-style="Nuit"] { --s-fond: #0b1b36; --s-texte: #f3ead7; --s-or: #d4b26a; --s-doux: #c9bfaa; --s-orbite: rgba(212, 178, 106, .55); --s-etoile: #f3ead7; --s-halo: #ffffff; --s-liseret: transparent; --s-nuit: #040a16; }
[data-style="Blanc"] { --s-fond: #ffffff; --s-texte: #161616; --s-or: #8a6a2c; --s-doux: #555049; --s-orbite: rgba(138, 106, 44, .75); --s-etoile: #9c824a; --s-halo: #161616; --s-liseret: rgba(22, 22, 22, .35); --s-nuit: #1a1a1a; }
[data-style="Sable"] { --s-fond: #f3ece0; --s-texte: #2b2218; --s-or: #7a5b23; --s-doux: #5e5040; --s-orbite: rgba(122, 91, 35, .7); --s-etoile: #94783f; --s-halo: #2b2218; --s-liseret: rgba(43, 34, 24, .35); --s-nuit: #1a140d; }
[data-style="Noir"] { --s-fond: #0d0d0d; --s-texte: #f1ebe0; --s-or: #c9a55a; --s-doux: #bdb5a8; --s-orbite: rgba(201, 165, 90, .5); --s-etoile: #f1ebe0; --s-halo: #ffffff; --s-liseret: transparent; --s-nuit: #000000; }

/* ── L'affiche ──
 *
 * Tout est en `cqw` : la même mise en page tient de l'A4 au 70 × 100. Le schéma occupe le haut,
 * carré ; le texte le tiers du bas, comme dans la demande. Le schéma cède quand la place manque
 * (`--ss-echelle`, posée par l'éditeur) — le 30 × 40 a sept pour cent de hauteur de moins que
 * l'A4 —, jamais le texte.
 */
.ss {
  --fond: var(--s-fond); --texte: var(--s-texte);
  font-family: "Josefin Sans", system-ui, sans-serif; text-align: center;
  align-items: center; padding: 7cqw 7cqw 8cqw;
}
.ss__systeme { flex: none; width: calc(86cqw * var(--ss-echelle, 1)); aspect-ratio: 1; margin: auto 0 0; }
.ss__systeme:empty { border-radius: 50%; border: 1px dashed var(--s-orbite); width: calc(60cqw * var(--ss-echelle, 1)); }
.ss__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ss__orbite { fill: none; stroke: var(--s-orbite); stroke-width: .32; }
.ss__etoile { fill: var(--s-etoile); opacity: .8; }
.ss__p { stroke: var(--s-liseret); stroke-width: .25; }
.ss__p--mercure { fill: var(--pl-mercure); }
.ss__p--venus { fill: var(--pl-venus); }
.ss__p--terre { fill: var(--pl-terre); }
.ss__p--mars { fill: var(--pl-mars); }
.ss__p--jupiter { fill: var(--pl-jupiter); }
.ss__p--saturne { fill: var(--pl-saturne); }
.ss__p--uranus { fill: var(--pl-uranus); }
.ss__p--neptune { fill: var(--pl-neptune); }
.ss__bande { fill: var(--pl-bande); opacity: .45; }
.ss__anneau { fill: none; stroke: var(--pl-anneau); stroke-width: 1.1; opacity: .9; }
.ss__halo { fill: none; stroke: var(--s-halo); stroke-width: .3; }
/* L'ombre : un dégradé du côté du Soleil (un reflet à peine) vers la face nocturne. */
.ss__lum { stop-color: var(--soleil-coeur); stop-opacity: .3; }
.ss__mi { stop-color: var(--s-nuit); stop-opacity: 0; }
.ss__nuit { stop-color: var(--s-nuit); stop-opacity: .62; }
.ss__soleil-1 { stop-color: var(--soleil-coeur); }
.ss__soleil-2 { stop-color: var(--soleil); }
.ss__halo-1 { stop-color: var(--soleil-halo); stop-opacity: .5; }
.ss__halo-2 { stop-color: var(--soleil-halo); stop-opacity: 0; }

.ss__texte { width: 100%; margin: 6cqw 0 auto; display: flex; flex-direction: column; align-items: center; }
.ss__texte p { max-width: 100%; }
/* Les prénoms : capitales fines très espacées. 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 : « Léa & » seul en haut se lirait mal. */
.ss__prenoms {
  font-weight: 300; text-transform: uppercase; letter-spacing: .32em; padding-left: .32em;
  margin: 0; font-size: clamp(3cqw, calc(64cqw / var(--n, 12)), 6.2cqw); line-height: 1.2; white-space: nowrap;
}
.ss__lieu {
  margin: 2.2cqw 0 0; color: var(--s-doux); font-weight: 400; text-transform: uppercase;
  font-size: 2.3cqw; letter-spacing: .24em; padding-left: .24em; overflow-wrap: anywhere;
}
.ss__phrase {
  margin: 3.6cqw 0 0; color: var(--s-or); font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic; font-size: 4.6cqw; line-height: 1.2; overflow-wrap: anywhere; text-wrap: balance;
}
.ss__date {
  margin: 3cqw 0 0; font-weight: 300; font-size: 2.6cqw; letter-spacing: .18em; padding-left: .18em;
  font-variant-numeric: lining-nums; white-space: nowrap;
}
.ss__filet { display: block; width: 9cqw; height: 0; margin-top: 3.4cqw; border-top: max(1px, .22cqw) solid var(--s-or); }
.ss__lieu:empty, .ss__phrase:empty { display: none; }
.ss__lieu[hidden], .ss__heure[hidden], .ss__sep[hidden] { display: none; }

/* ── Le formulaire ── */
.ss-styles { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.ss-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ss-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;
}
.ss-styles input:checked + label { border-color: rgb(var(--color-accent)); color: rgb(var(--color-foreground)); }
.ss-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
/* La pastille montre ce que vend le style : le papier, une orbite d'or et un Soleil. */
.ss-pastille {
  width: 3.8rem; height: 3.8rem; border-radius: 50%; position: relative; overflow: hidden;
  background: var(--s-fond); border: .1rem solid rgba(var(--color-foreground), .2);
}
.ss-pastille::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; border: .1rem solid var(--s-or); }
.ss-pastille::after { content: ""; position: absolute; inset: 42%; border-radius: 50%; background: var(--soleil); }