/* La balance : le fléau, les plateaux et les trois réponses, sous le pouce.
   Chaque état se lit par la forme autant que par la couleur. */

.balance {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  width: 100%;
}

/* La balance se tient au milieu de l’espace libre, au-dessus des réponses. */
.balance-scene {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.panneau.balance-panneau {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--e-1);
  padding: var(--e-4) var(--e-2) var(--e-3);
}

.balance-dessin {
  /* Couleurs du contenu (les articles du marché), pas de l’interface : le bois d’une caisse, une citrouille,
     la toile de jute d’un sac et la tige brune de la citrouille. */
  --balance-bois: #c98b52;
  --balance-citrouille: #ef8d3c;
  --balance-jute: #dcc08f;
  --balance-tige: #6b4e2c;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 340 / 214;
  overflow: hidden;
}

/* Le dessin : un seul trait sombre aux jonctions arrondies, comme les objets de l’appli. */
.balance-pied,
.balance-colonne,
.balance-metal,
.balance-coupe,
.balance-crochet,
.balance-axe,
.balance-bois,
.balance-citrouille,
.balance-jute,
.balance-etiquette,
.balance-cadenas-corps {
  stroke: var(--fond-2);
  stroke-width: 2;
  stroke-linejoin: round;
}

.balance-pied,
.balance-colonne,
.balance-crochet,
.balance-axe {
  fill: var(--studio-500);
}

.balance-metal,
.balance-coupe,
.balance-cadenas-corps {
  fill: var(--studio-300);
}

.balance-goupille {
  fill: var(--fond-2);
}

.balance-fil {
  fill: none;
  stroke: var(--studio-500);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.balance-bois {
  fill: var(--balance-bois);
}

.balance-citrouille {
  fill: var(--balance-citrouille);
}

.balance-jute {
  fill: var(--balance-jute);
}

.balance-tige {
  fill: none;
  stroke: var(--balance-tige);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.balance-detail {
  fill: none;
  stroke: color-mix(in oklab, var(--fond-2) 45%, transparent);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* L’étiquette de papier : le poids à l’encre, dans le style unique des chiffres. */
.balance-etiquette {
  fill: var(--fiche);
  stroke-width: 1.5;
}

.balance-poids {
  fill: var(--encre);
}

.balance-fois {
  fill: none;
  stroke: var(--encre);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.balance-unite {
  fill: var(--encre-2);
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 10px;
}

/* Le cadenas bloque le fléau pendant qu’on réfléchit ; il s’ouvre après la réponse. */
.balance-cadenas {
  transition: opacity 160ms ease;
}

.balance-cadenas-anse {
  fill: none;
  stroke: var(--studio-300);
  stroke-width: 3;
  stroke-linecap: round;
  transition: transform 160ms var(--ease-out);
}

.balance-cadenas-trou {
  fill: none;
  stroke: var(--fond-2);
  stroke-width: 2;
  stroke-linecap: round;
}

.balance-ouvert .balance-cadenas {
  opacity: 0;
}

.balance-ouvert .balance-cadenas-anse {
  transform: translateY(-4px);
}

/* Les articles se posent sur les plateaux à chaque nouvelle pesée. */
.balance-arrivee {
  animation: balance-arrivee 200ms var(--ease-out);
}

@keyframes balance-arrivee {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* Les totaux, sous chaque plateau, après la réponse : le signe < > ou = dit qui l’emporte. */
.balance-totaux {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
  align-items: center;
  min-height: 32px;
  visibility: hidden;
}

.balance-revele .balance-totaux {
  visibility: visible;
}

.balance-total {
  color: var(--texte-2);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.balance-total .chiffre {
  color: var(--texte);
  font-size: 1.25rem;
}

.balance-total.balance-lourd .chiffre {
  color: var(--fam);
}

.balance-signe {
  display: grid;
  place-items: center;
  color: var(--texte);
}

.balance-signe svg {
  width: 24px;
  height: 24px;
}

/* Les trois réponses, en bas, sous le pouce : l’icône au-dessus du mot. */
.balance-reponses .reponse {
  flex-direction: column;
  gap: var(--e-1);
  min-height: 84px;
  padding: var(--e-2) var(--e-1);
  font-size: 1.0625rem;
}

.balance-reponses .reponse svg {
  width: 26px;
  height: 26px;
}

/* La réponse choisie à tort est barrée : l’erreur se lit aussi par la forme. */
.balance-barre .balance-libelle {
  text-decoration: line-through;
  text-decoration-thickness: 2.5px;
}

/* Lu par les lecteurs d’écran seulement : la pesée en toutes lettres. */
.balance-lecture {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* L’aperçu sur la fiche */
.apercu.balance-apercu {
  flex-direction: column;
  align-items: stretch;
  gap: var(--e-3);
}

.balance-apercu .balance-dessin {
  max-width: 320px;
  margin-inline: auto;
}

.balance-apercu .reponse {
  min-height: 56px;
  padding: var(--e-1);
  font-size: var(--t-petit);
}

.balance-apercu .reponse svg {
  width: 20px;
  height: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .balance-arrivee {
    animation: none;
  }

  .balance-cadenas,
  .balance-cadenas-anse {
    transition: none;
  }
}