@charset "UTF-8";
/* === Téléphone : chargé sous 768 px de large (voir index.html) === */

/* Accueil : les trois portraits en colonne, le nom sous chaque portrait */
.trio {
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;
  margin-top: 2.2rem;
}
.choix { flex: none; flex-direction: column-reverse; width: 100%; }
.choix .identite { font-size: 1.8rem; margin: .8rem 0 0; }
.choix .identite .prenom { display: none; }
.portrait-accueil { max-width: 10rem; }

/* Page d'un philosophe : toute la largeur */
#vue-philosophe { width: 92vw; }
.qa-history { max-height: 18rem; }

/* Fenêtre de résultat : le bouton « Rejouer » prend la largeur */
@media (max-width: 768px) {
  #maieuthon-result-modal { padding: 10px; }
  #maieuthon-replay-btn { width: 100%; }
}