/* Pictolang — page d'accueil : liste des langues et démonstration (static/js/home_demo.js). Les couleurs viennent des variables de main.css. */

.lang-chips { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }
.lang-chips li { padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-weight: 600; font-size: 1.05rem; }
.section-lead { text-align: center; color: var(--muted); max-width: 640px; margin: 0 auto; }

/* La démonstration dans le héros : elle réutilise les classes du quiz (quiz.css). */
.demo-quiz { min-height: 360px; min-width: 0; }
.demo-quiz .quiz-card { width: 100%; }
.demo-quiz .answer-line { grid-template-columns: 96px 1fr auto; }
.demo-quiz .answer-line .quiz-line-label { width: auto; }
.demo-quiz .typed { font-size: 1.15rem; }
.demo-quiz .quiz-line { flex-direction: column; align-items: flex-start; gap: 2px; }          /* le nom de la langue au-dessus : toute la largeur aux cases */
.demo-quiz .quiz-groups { flex-wrap: nowrap; gap: 4px 12px; }
.demo-quiz .quiz-group { gap: 3px; }
.demo-end { margin: var(--s4) 0 0; color: var(--muted); }
.demo-note { margin: var(--s3) 0 0; }

@media (max-width: 640px) {
  .demo-quiz .answer-line { grid-template-columns: 1fr; }
}