/* ═══════════════════════════ Étoile de naissance ═══════════════════════════
 *
 * Le ciel centré sur l'étoile dont la lumière a l'âge qu'on fête, la constellation du client,
 * et ce que l'affiche en dit. 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. `[data-style]` ne nomme pas `.et` exprès : les pastilles du
 * formulaire et le ciel où l'on trace se colorent avec les mêmes variables.
 *
 * --e-fond : le papier ; --e-ciel : le disque ; --e-etoile : les étoiles ; --e-trait : la
 * constellation du client ; --e-texte : le nom, la phrase, la dédicace ; --e-doux : l'anneau,
 * les points cardinaux, les étiquettes et les données ; --e-t0 à --e-t5 : la vraie couleur de
 * l'étoile du centre, du bleu au rouge orangé (indice B–V), éclaircie sur la nuit, assombrie
 * sur le papier pour rester lisible.
 */
[data-style="Nuit"] {
  --e-fond: #0a0f24; --e-ciel: #0a0f24; --e-etoile: #f5f1e4; --e-trait: #e9c46a; --e-texte: #eef0f6; --e-doux: #9aa2c0;
  --e-t0: #a9c0ff; --e-t1: #d5e0ff; --e-t2: #fbf6ea; --e-t3: #ffe7a8; --e-t4: #ffc978; --e-t5: #ff9d6c;
}
[data-style="Blanc"] {
  --e-fond: #ffffff; --e-ciel: #ffffff; --e-etoile: #161a26; --e-trait: #a8781c; --e-texte: #161a26; --e-doux: #5b6170;
  --e-t0: #2f5fd0; --e-t1: #4a6fc0; --e-t2: #5b6170; --e-t3: #a8781c; --e-t4: #c5631a; --e-t5: #b8401f;
}
[data-style="Cyanotype"] {
  --e-fond: #17406f; --e-ciel: #17406f; --e-etoile: #ffffff; --e-trait: #ffffff; --e-texte: #f1f6fc; --e-doux: #b4cae6;
  --e-t0: #d2e0ff; --e-t1: #e6eeff; --e-t2: #ffffff; --e-t3: #fff1c7; --e-t4: #ffd9a3; --e-t5: #ffbf9c;
}
[data-style="Papier"] {
  --e-fond: #f3efe4; --e-ciel: #f3efe4; --e-etoile: #1b2440; --e-trait: #b3402a; --e-texte: #1b2440; --e-doux: #5f5d55;
  --e-t0: #2f5fd0; --e-t1: #4a6fc0; --e-t2: #5f5d55; --e-t3: #9a6d12; --e-t4: #c0621a; --e-t5: #b3402a;
}

/* ── L'affiche ──
 *
 * Tout est en `cqw` : la même mise en page tient de l'A4 au 70 × 100. Le ciel occupe le haut,
 * carré ; le texte le bas. Le ciel cède quand la place manque (`--et-echelle`, posée par
 * l'éditeur) — le 30 × 40 a sept pour cent de hauteur de moins que l'A4 —, jamais le texte.
 */
.et {
  --fond: var(--e-fond); --texte: var(--e-texte);
  font-family: "Inter", system-ui, sans-serif; text-align: center;
  align-items: center; justify-content: space-between; padding: 6.5cqw 8cqw 7cqw;
}
.et p { margin: 0; max-width: 100%; }
.et__kicker {
  font-family: "Roboto Condensed", "Inter", sans-serif; font-weight: 400; text-transform: uppercase;
  letter-spacing: .32em; padding-left: .32em; font-size: 2.3cqw; color: var(--e-doux);
}
.et__ciel { flex: none; width: calc(86cqw * var(--et-echelle, 1)); aspect-ratio: 1; margin: 1.5cqw 0; }
.et__svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Le nom de la constellation tient sur une ligne, ou deux équilibrées si elle est longue ; il se
   resserre ensuite (l'éditeur), et ne coupe un mot qu'au plancher. */
.et__nom {
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600;
  font-size: 7.6cqw; line-height: 1.05; width: 100%; text-wrap: balance; overflow-wrap: anywhere;
}
.et .et__phrase { margin-top: 1.4cqw; font-size: 2.35cqw; line-height: 1.5; max-width: 74cqw; text-wrap: balance; opacity: .92; }
.et__filet { display: block; margin: 1.6cqw 0 1.2cqw; width: 10cqw; height: 0; border-top: max(1px, .18cqw) solid var(--e-trait); }
.et__donnees {
  font-family: "Roboto Condensed", "Inter", sans-serif; font-size: 1.85cqw; letter-spacing: .08em;
  color: var(--e-doux); font-variant-numeric: tabular-nums; line-height: 1.5;
}
.et__dedicace {
  font-family: "Roboto Condensed", "Inter", sans-serif; text-transform: uppercase; font-size: 2.1cqw;
  letter-spacing: .28em; padding-left: .28em; line-height: 1.5; text-wrap: balance; overflow-wrap: anywhere;
}
.et__sep[hidden], #e-desig[hidden] { display: none; }

/* Le ciel. Les épaisseurs sont dans la boîte du dessin (le disque fait 100 de rayon), donc
   proportionnelles au format : le même trait au 30 × 40 et au 70 × 100. */
.et__fond { fill: var(--e-ciel); }
.et__anneau { fill: none; stroke: var(--e-doux); stroke-width: .4; }
.et__graduation { stroke: var(--e-doux); stroke-width: .35; }
.et__cardinal { fill: var(--e-doux); font-family: "Roboto Condensed", sans-serif; font-size: 5.6px; letter-spacing: .04em; }
.et__etoile { fill: var(--e-etoile); }
.et__trait { stroke: var(--e-trait); stroke-width: .75; stroke-linecap: round; fill: none; }
.et__noeud { fill: none; stroke: var(--e-trait); stroke-width: .45; }
.et__etiquette { fill: var(--e-doux); font-family: "Roboto Condensed", sans-serif; font-size: 4.4px; letter-spacing: .06em; }
.et__curseur { fill: none; stroke: var(--e-texte); stroke-width: .6; }
.et__crayon { fill: none; stroke: var(--e-trait); stroke-width: .7; stroke-dasharray: 1.4 1.4; }
.et__astre--0 { --e-astre: var(--e-t0); } .et__astre--1 { --e-astre: var(--e-t1); } .et__astre--2 { --e-astre: var(--e-t2); }
.et__astre--3 { --e-astre: var(--e-t3); } .et__astre--4 { --e-astre: var(--e-t4); } .et__astre--5 { --e-astre: var(--e-t5); }
.et__coeur { fill: var(--e-astre); }
.et__halo { fill: none; stroke: var(--e-astre); stroke-width: .5; }
.et__halo--loin { opacity: .45; }
.et__visee { stroke: var(--e-astre); stroke-width: .5; }

/* ── Le formulaire ── */
.et-occasions, .et-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.et-occasions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.et-occasions input, .et-styles input { position: absolute; opacity: 0; pointer-events: none; }
.et-occasions label, .et-styles label {
  display: flex; align-items: center; justify-content: center; gap: .8rem; min-height: 4.4rem; padding: .6rem .8rem;
  border: .1rem solid rgba(var(--encre), .18); border-radius: .8rem; cursor: pointer; text-align: center; line-height: 1.2;
}
.et-styles label { justify-content: flex-start; }
.et-occasions input:checked + label, .et-styles input:checked + label { border-color: rgb(var(--encre)); box-shadow: inset 0 0 0 .1rem rgb(var(--encre)); }
.et-occasions input:focus-visible + label, .et-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.et-pastille { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--e-fond); box-shadow: inset 0 0 0 .1rem rgba(var(--encre), .25); }
.et-pastille i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--e-trait); }

.et-trace__outil[hidden], .et-idees[hidden] { display: none; }
.et-trace__ciel {
  width: 100%; max-width: 46rem; aspect-ratio: 1; margin: .4rem auto .8rem; border-radius: 50%;
  background: var(--e-fond); cursor: crosshair; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.et-trace__ciel .et__svg { width: 100%; height: 100%; }
.et-trace__ciel:focus-visible { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .3rem; }
.et-trace__boutons { display: flex; flex-wrap: wrap; gap: .6rem; }
.et-bouton, .et-idees button {
  font: inherit; font-size: 1.4rem; padding: .6rem 1.2rem; min-height: 4.4rem; border-radius: 99rem;
  border: .1rem solid rgba(var(--encre), .25); background: rgb(var(--color-background)); color: rgb(var(--encre)); cursor: pointer;
}
.et-bouton:disabled { opacity: .45; cursor: default; }
.et-bouton:focus-visible, .et-idees button:focus-visible { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.et-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }