Bonjour, 

Je travaille sur le projet numéro 2 d'OpenClassRooms intitulé "Booki" et j'ai un soucis sur le responsive de ma partie "filtres". 

En effet quand la page est en mode desktop ma partie "filtres" doit être alignée verticalement comme cet exemple : 



Quand je passe en responsive sous les 768 px la partie "filtres" doit prendre une forme bien particulière comme cet exemple :

 


Voila pour ma partie en responsive ce que ça donne : 

Pour rajouter des difficultés il m'est demandé : 

"● Il est important d’utiliser les pixels et les pourcentages plutôt que les REM et les EM. Le client préfère cette solution pour des contraintes techniques.
 ● Il est important d’utiliser Flexbox plutôt que Grid. Notre client est plus à l’aise avec cette solution.
 ● Aucun framework CSS (type BootStrap ou Tailwind CSS) ou préprocesseur CSS (type Sass ou Less) ne doit être utilisé."


Mon code HTML :

      <!-- SECTION 3 FILTERS -->

      <form class="filters-list" action="#">
        <h2>Filtres</h2>
        <div class="list-filters-buttons">
          <button class="filters-buttons">
            <i class="fas fa-money-bill-wave"></i>
            <span class="text-buttons">Économique</span>
          </button>
          <button class="filters-buttons">
            <i class="fas fa-child"></i>
            <span class="text-buttons">Familial</span>
          </button>
          <div class="button-3">
            <button class="filters-buttons">
              <i class="fas fa-heart"></i>
              <span class="text-buttons">Romantique</span>
            </button>
          </div>
          <div class="button-4">
            <button class="filters-buttons">
              <i class="fas fa-dog"></i>
              <span class="text-buttons">Animaux autorisés</span>
            </button>
          </div>
        </div>
      </form>

Mon code CSS en desktop : 

/* SECTION 3 FILTERS */

.filters-list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  padding-top: 40px;
}
.filters-list h2 {
  padding: 0 15px 0 15px;
  font-size: 23px;
  font-weight: 800;
  color: black;
}
.list-filters-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 33px;
}
.filters-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  border: 3px solid #dadada;
  border-radius: 40px;
  transition: all 200ms;
  background: white;
}
.filters-buttons i {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin:  -4px 0 -4px -9px;
  height: 63px;
  width: 63px;
  color: #0065fc;
  background-color: var(--lightblue);
  border-radius: 50%;
  margin-left: -px;
  font-size: x-large;
}
.filters-buttons .text-buttons {
  font-size: x-large;
  font-weight: 700;
  padding: 0 15px;
  color: black;
}
.filters-buttons:hover {
  background-color: var(--lightblue);
  transform: scale(1.02);
  transition-duration: 0.25s;
}
.filters-list .filters-buttons:hover .fas {
  background: white;
  transition-duration: 0.25s;
}
.button-3, .button-4 {
  background-color: red;
}

Mon code CSS en responsive (768 px) : 

  /* SECTION 3 FILTERS */

  .filters-list {
    padding-top: 32px;
    flex-direction: column;
    align-items: flex-start;
  }
  .filters-list h2 {
    padding: 0;
    font-size: 28px;
    font-weight: 700;
  }
  .filters-buttons {
    border-radius: 40px;
    background: white;
  }
  .filters-buttons i {
    height: 65px;
    width: 65px;
    border-radius: 50%;
    margin:  -3px 0 -3px -10px;
    font-size: x-large;
  }
  .filters-buttons .text-buttons {
    font-size: x-large;
    font-weight: 700;
    padding: 0 15px;
    color: black;
  }
  .button-3, .button-4 {
    background-color: red;
  }

J'ai pensé à la solution de mettre les deux derniers "button" dans une "div" et mettre un "display:flex" -> "flex-direction:row" en destktop et "display:flex" -> "flex-direction:column"  pour le responsive mais le soucis c'est que quand je diminue la page avant d'atteindre les "768px" pour le responsive demandé ça fait casser la page et met les deux dernier "button" (romantique et animaux autorisés) à la ligne.

Exemple : 





J'ai pensé aussi à mettre du "margin-right: 100px" sur le "button" Romantique pour faire passer animaux autorisés à la ligne mais quand je rétréci la page avec cette technique ça déforme le "button" car je suppose que le "margin-right" l'écrase.


J'espère avoir été clair, merci d'avance pour vos réponses. 
Respectueusement, Morgan.