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);
}

.titre {
  font-family: 'Sentient', serif;
  font-size: 16px;
}

button {
  background-color: none;
  color: #3E04DE;
  border: #3E04DE 2px solid;
  font-family: 'Sentient', serif;
  font-size: 20px;
  border-radius: 12px;
  cursor: pointer;
  margin-bottom: 15px;
  font-size: 40px;
  transition: 0.2s ease-in-out;
}

button:hover{
  background-color: #c9c9c9;
}


/* .box1 {

}
.box2 {

} */

.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;
}

  /* #ensemble-title {

  }
  button {

  } */