/* ═══════════════════════════ 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; }
/* Juste sous les trois signes, avant le partage : c'est la suite que la page vend, et posée
   en bas du résultat elle tombait deux écrans plus loin sur un téléphone (1er oct. 2026). */
.outil__affiche { margin: .8rem auto 2.4rem; max-width: 52rem; padding-bottom: 2.4rem; border-bottom: .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; }

/* ── Sur un téléphone (1er oct. 2026) ── Le formulaire doit être au premier écran : on vient
   calculer, et un titre de cinq lignes le repoussait sous le pli. Les trois signes passent en
   rangées, le dessin à gauche — empilés en cartes de 280 px, ils mettaient le bouton de
   l'affiche à près d'un écran et demi sous le début du résultat. */
@media screen and (max-width: 749px) {
  .outil .article__titre { font-size: 2.4rem; line-height: 1.25; }
  .outil__astre {
    display: grid; grid-template-columns: 7.2rem 1fr; column-gap: 1.2rem; row-gap: .2rem;
    align-items: center; text-align: left; padding: 1.2rem;
  }
  .outil__astre > :not(.outil__dessin) { grid-column: 2; }
  .outil__dessin { grid-column: 1; grid-row: 1 / span 6; width: 7.2rem; height: 6rem; }
  .outil__astre--vide { grid-template-columns: 1fr; text-align: center; }
  .outil__astre--vide > :not(.outil__dessin) { grid-column: 1; }
  .outil__signe { font-size: 2.6rem; }
  .outil__phrase { margin-top: .2rem; font-size: 1.5rem; }
}

/* ── 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; }