/* ═══════════════════════════ Le calcul du Big Three ═══════════════════════════
 *
 * Servie **seulement** sur la page de l'outil (`views/outil-astro.liquid`). Le texte de la
 * page porte les classes du blog ; ici, le formulaire et le résultat.
 *
 * **Aucune couleur n'est écrite ici** : le formulaire prend celles de la charte, le résultat
 * celles de l'affiche en style Cosmique (`astro.css`, `[data-palette="Cosmique"]`) — c'est le
 * Big Three tel qu'il sera imprimé, et la seule raison de charger cette feuille-là.
 *
 * Les champs sont à 1,6 rem : sous 16 px, Safari zoome au focus (point 11 quaterdecies).
 */

.outil__form {
  display: grid; gap: 1.6rem; margin: 0 0 3.2rem; padding: 2rem;
  background: rgb(var(--creme)); border-radius: var(--card-radius);
}
.outil__champ { display: grid; gap: .6rem; }
.outil__champ label { font-weight: 600; }
.outil__champ small { font-weight: 400; color: rgb(var(--encre-douce)); }
.outil__champ input { width: 100%; min-height: 4.4rem; font-size: 1.6rem; }
.outil__deux { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.outil__saisie { display: flex; gap: .8rem; }
.outil__saisie input { flex: 1; min-width: 0; }
.outil__saisie .button { flex: none; min-height: 4.4rem; }
.outil__aide { margin: -.6rem 0 0; font-size: 1.4rem; line-height: 1.5; color: rgb(var(--encre-douce)); }
.outil__erreur { margin: 0; color: rgb(var(--rouge)); font-weight: 600; }
.outil__calculer { justify-self: start; min-height: 5.2rem; }

/* ── Le résultat ── */
.outil__resultat {
  margin: 0 0 4rem; padding: 2.8rem 2rem; border-radius: var(--card-radius); text-align: center;
  background: var(--z-ciel), var(--z-fond); color: var(--z-encre);
  font-family: var(--z-texte), "Cormorant Garamond", Georgia, serif;
  scroll-margin-top: 2rem;
}
.outil__resultat:focus { outline: none; }
.outil__resultat:focus-visible { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .3rem; }
.outil__recu { margin: 0 0 .8rem; font-size: 1.6rem; color: var(--z-doux); }
.outil__resultat-titre { margin: 0 0 2.4rem; font-family: var(--z-titre), serif; font-size: 2.6rem; font-weight: 500; color: var(--z-accent); }
.outil__astres { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin: 0 0 1.6rem; padding: 0; list-style: none; }
.outil__astre {
  display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1.6rem 1.2rem;
  border: .1rem solid var(--z-cadre); border-radius: var(--card-radius);
}
.outil__dessin { position: relative; display: block; width: 9rem; height: 7rem; color: var(--z-accent); }
.outil__dessin .az-constellation { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; }
.outil__dessin .az-glyphe { position: absolute; left: 50%; top: 50%; width: 3.2rem; height: 3.2rem; transform: translate(-50%, -50%); }
.outil__astre--vide .outil__dessin { display: none; }
.outil__astre-nom { font-size: 1.4rem; letter-spacing: .12em; text-transform: uppercase; color: var(--z-doux); }
.outil__signe { font-family: var(--z-titre), serif; font-size: 3rem; font-weight: 500; line-height: 1.1; color: var(--z-accent); }
.outil__role { font-style: italic; font-size: 1.6rem; }
.outil__descendant { font-size: 1.5rem; color: var(--z-doux); }
.outil__descendant:empty, .outil__phrase:empty { display: none; }
.outil__phrase { margin-top: .4rem; font-size: 1.6rem; line-height: 1.4; }
.outil__statut { font-size: 1.4rem; line-height: 1.45; color: var(--z-doux); }
.outil__statut:empty { display: none; }
.outil__fuseau { margin: 0 0 1.6rem; font-size: 1.4rem; color: var(--z-doux); }
.outil__fuseau:empty { display: none; }
.outil__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.outil__resultat .button--secondaire { color: var(--z-encre); box-shadow: inset 0 0 0 .1rem var(--z-cadre); min-height: 4.4rem; }
.outil__resultat .outil__aide { margin: 1rem 0 0; color: var(--z-doux); }
.outil__resultat .outil__aide:empty { display: none; }
.outil__affiche { margin: 2.4rem auto 0; max-width: 52rem; padding-top: 2.4rem; border-top: .1rem solid var(--z-cadre); font-size: 1.7rem; line-height: 1.5; }
.outil__affiche p { margin: 0 0 1.6rem; }
.outil__affiche strong { color: var(--z-accent); }
/* Le bouton de l'affiche garde son rang de bouton principal, aux couleurs du style : le navy
   de la charte se perdrait sur le bleu nuit du fond. */
.outil__affiche .button { background: var(--z-accent); color: var(--z-fond); min-height: 5.2rem; }

/* ── Le tableau des ascendants ── Treize colonnes : il défile dans son cadre (`article__tableau-cadre`,
   la règle du blog) plutôt que d'élargir la page, et les noms ne se coupent pas. */
.outil__tableau td, .outil__tableau th { white-space: nowrap; }