/* Petits téléphones */
@media (max-width: 360px) {
  #app-header h1 {
    font-size: 0.95rem;
  }
  .flashcard {
    font-size: 1rem;
    min-height: 140px;
  }
}

/* Tablettes et plus large : on limite la largeur du contenu */
@media (min-width: 700px) {
  #main-content {
    max-width: 640px;
    margin: 0 auto;
  }
}

/* Mode paysage : réduire la hauteur des flashcards */
@media (orientation: landscape) and (max-height: 420px) {
  .flashcard {
    min-height: 100px;
    padding: 16px;
  }
}