body {
  text-align: left;
  padding: 2%;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  background-color: #F3F3F3
}

h1{
  color: #3E04DE;
  font-family: 'Comico', cursive;
  font-size: clamp(3.56rem, calc(3.027rem + 2.679vw), 5.44rem);
}

.grid-container {
    display: grid;
    grid-template-columns: auto 1fr; /* Colonne gauche fixe à 100px, droite flexible */
    gap: 1em; /* Espacement entre les colonnes */
    /* align-items: baseline; Alignement vertical des items */
    margin-bottom: 1em; /* Espacement entre les phrases */

    border: #3E04DE 2px dotted;
    border-radius: 12px;
    padding: 6px;
  }

  .numero {
    justify-self: center;
    align-self: center;

    font-size: 16px;
    font-family: 'Comico', cursive;
    background-color: #3E04DE;
    border-radius: 12px;
    color: #F3F3F3;
    padding: 0 6px;
  }

  .phrase {
    font-size: clamp(1.50rem, calc(1.107rem + 1.964vw), 2.88rem);
    font-family: 'Sentient', serif;
  }