@media (max-width: 768px) {
  /* 1) Supprime la largeur fixe / max-width */
  .calendar {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    /* 2 colonnes et espacement réduit */
    grid-template-columns: repeat(2, 1fr) !important;
    grid-gap: 8px !important;
    /* on n’a plus besoin de grid-template-areas pour mobile */
  }

  /* Si tu veux un peu plus de place pour le texte */
  .calendar .day .front,
  .calendar .day .back {
    font-size: 0.9em !important;
  }

  /* Ajuste la hauteur des cases si besoin */
  @media (max-width: 499px) {
    .calendar label {
      height: 60px !important;
    }
  }
}