body {
  margin-left: clamp(1.25rem, -1.8182rem + 16.3636vw, 12.5rem);
  margin-right: clamp(1.25rem, -1.8182rem + 16.3636vw, 12.5rem);
  margin-top: clamp(2.5rem, 1.4773rem + 5.4545vw, 6.25rem);
  font-family: Arial, Helvetica, sans-serif;
}

.box1 {
  color: rgb(35, 112, 40);
  text-align: center;
  font-size: clamp(1rem, -0.0909rem + 5.8182vw, 5rem);
  margin-top: -40px;
}
.box2 {
  color: rgb(35, 112, 40);
  text-align: center;
  font-size: clamp(1rem, 0.6932rem + 5.6364vw, 5.625rem);
  line-height: 100%;
  margin-top: clamp(0rem, 1.3636rem + -7.2727vw, -5rem);;
  
}
  .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 */
  }

  .numero {
    background-color: rgb(35, 112, 40);;
    padding: 10px;
    border-radius: 20px;
    color: white;
  }

  .phrase {
    margin-top: 20px;
    padding-bottom: 10px;
    margin-bottom: clamp(5rem, 4.6591rem + 1.8182vw, 6.25rem);
    font-size: clamp(1rem, 0.5909rem + 2.1818vw, 2.5rem);
    font-weight: 100;
  }

  .button {
    background-color: rgb(35, 112, 40);
    padding: 10px;
    border-radius: 20px;
    color: white;
    border : none;
    transition-duration: 0.3s;
    cursor: pointer;
    width: 200px;
    height: 50px;
    margin-top: clamp(0rem, 1.0227rem + -5.4545vw, -3.75rem);;
    margin-bottom: 100px;
    font-size: 22px;
  }

  .button:hover{
    background-color: white;
    padding: 10px;
    border-radius: 20px;
    color:  rgb(35, 112, 40);
    border-color:  rgb(35, 112, 40);
    transition-duration: 0.3s;
    cursor: pointer;
    
  }

  .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
  }