/* Vrai ou faux : le tableau de l’égalité et les deux grandes réponses, sous le pouce.
   Chaque état se lit par la forme autant que par la couleur. */

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

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

.panneau.vrai-faux-panneau {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 184px;
  padding: var(--e-5) var(--e-4) var(--e-3);
  overflow: hidden; /* rien ne dépasse du tableau, même avant l’ajustement de la taille */
  transition: box-shadow var(--d-court) ease;
}

/* Bonne réponse : le tableau s’allume (un état mérité, jamais décoratif). */
.panneau.vrai-faux-panneau.vrai-faux-allume {
  box-shadow: inset 0 0 0 3px var(--fam), inset 0 14px 28px -18px rgb(0 0 0 / 0.9);
}

/* L’égalité, dans le style unique des chiffres. Le JS pose --vrai-faux-em (la largeur du calcul en em) :
   la taille suit la longueur du calcul pour qu’il tienne sur une ligne dans le tableau. */
.vrai-faux-egalite {
  display: flex;
  justify-content: center;
  width: 100%;
  color: var(--texte);
  font-family: var(--police-titre);
  font-stretch: var(--chiffres-largeur);
  font-weight: var(--chiffres-graisse);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  font-size: clamp(1.5rem, 8vw, 3.5rem);
  font-size: clamp(1.5rem, calc(100cqi / var(--vrai-faux-em, 6)), 3.5rem);
}

.vrai-faux-ligne {
  display: inline-flex;
  flex: none;
  align-items: baseline;
  white-space: nowrap;
}

.vrai-faux-arrivee {
  animation: vrai-faux-arrivee 180ms var(--ease-out);
}

@keyframes vrai-faux-arrivee {
  from {
    opacity: 0.2;
    transform: translateY(6px);
  }
}

/* Les signes dessinés ont la hauteur des chiffres et se posent sur leur ligne de base
   (mêmes mesures que LARGEUR_SIGNE et LARGEUR_NEGATIF dans le JS). */
.vrai-faux-signe {
  display: block;
  flex: none;
  width: 0.68em;
  height: 0.68em;
  margin-inline: 0.12em;
  color: var(--texte-2);
}

.vrai-faux-negatif {
  display: block;
  flex: none;
  width: 0.51em;
  height: 0.68em;
  margin-right: 0.03em;
}

.vrai-faux-parenthese {
  color: var(--texte-2);
}

.vrai-faux-resultat {
  display: inline-flex;
  align-items: baseline;
}

.vrai-faux-resultat.vrai-faux-bon {
  color: var(--fam);
}

/* L’égalité fausse démasquée : = devient ≠, et la mauvaise réponse pâlit. */
.vrai-faux-barre-egal {
  display: none;
}

.vrai-faux-signe.vrai-faux-different {
  color: var(--fam);
}

.vrai-faux-different .vrai-faux-barre-egal {
  display: inline;
}

.vrai-faux-resultat.vrai-faux-pale {
  color: var(--texte-3);
}

/* Après une erreur, une courte ligne sous la bonne égalité : « et non 54 » ou « C’était vrai. » */
.vrai-faux-verdict {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  color: var(--texte-2);
  font-weight: 700;
  visibility: hidden;
}

.vrai-faux-corrige .vrai-faux-verdict {
  visibility: visible;
}

.vrai-faux-verdict > svg {
  width: 20px;
  height: 20px;
  color: var(--fam);
}

.vrai-faux-errone {
  display: inline-flex;
  align-items: baseline;
  color: var(--texte);
}

/* Les deux grandes réponses, en bas, sous le pouce. */
.vrai-faux-reponses .reponse {
  min-height: 88px;
  gap: var(--e-3);
  font-size: 1.375rem;
}

.vrai-faux-reponses .reponse svg {
  width: 28px;
  height: 28px;
}

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

/* Lu par les lecteurs d’écran seulement : l’égalité en toutes lettres. */
.vrai-faux-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.vrai-faux-apercu {
  flex-direction: column;
  align-items: stretch;
  gap: var(--e-3);
}

.vrai-faux-apercu-image {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.vrai-faux-apercu .panneau.vrai-faux-panneau {
  min-height: 0;
  padding: var(--e-4) var(--e-3);
}

.vrai-faux-apercu .vrai-faux-egalite {
  font-size: 2.25rem;
}

.vrai-faux-apercu .reponse {
  min-height: 48px;
  font-size: var(--t-corps);
}

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

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

  .panneau.vrai-faux-panneau {
    transition: none;
  }
}