/* Affichage bilingue (src/ui/bilingue.js) : le français d'abord, en grand ; la traduction dessous, plus petite.
   Uniquement les variables de site/src/styles/tokens.css. Fichier séparé de quiz.css (refait par un autre chantier). */

.bilingue__fr, .bilingue__trad { display: block; }
.bilingue__fr { text-align: start; }
.bilingue__trad {
  margin-block-start: var(--e-1);
  font-size: var(--t-petit);
  font-weight: 400;
  color: var(--c-texte-doux);
  text-align: start;
}
.bilingue__trad[lang="ar"] { font-family: var(--f-arabe); }
.choix .bilingue { flex: 1; }

/* Dans la correction (texte petit), le français cité reprend la taille du corps : la traduction reste plus petite. */
.correction .bilingue__fr { font-size: var(--t-corps); }

/* En page arabe, tokens.css bascule --f-texte sur la police arabe : le français garde sa police latine. */
:root[dir="rtl"] .bilingue__fr { font-family: var(--f-latin); }

.case-traduction {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: var(--cible-min); font-size: var(--t-petit); color: var(--c-texte); cursor: pointer;
}
.case-traduction input { width: var(--e-5); height: var(--e-5); margin: 0; accent-color: var(--c-action); }