/*****************cette classe permet d'aligner tout les élément de facon horizontale et de les placer au centre****************/
.background_header{
    display: flex;
    background-color: black;
    justify-content: center;
}
/***************barre de recherche******************/
.barre_de_recherche {
  width: 500px;
  display: flex;
  align-items: center;
  padding:5px 5px;
  border: solid 1px black;
  background-color: white;
  border-radius: 30px;
}
/**************input dans la barre de recherche*******************/

.barre_de_recherche input {
  background: transparent;
  border: 0px;
  padding: 15px 20px;
  font-size: 20px;
  width: 100%;
}
/*********************************/
main{
  background-color: whitesmoke;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.barre_de_recherche button{
    border-radius: 30px;
    padding: 15px 30px;
    margin: 0px;
}
.petite_image{
width: 10%;
height: 100px;
}
.grande_image{
  width: 15%;
  height: 100px;
}
#ligne{
  display: flex;
  gap:5px
}
#liste_image{
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.content{
display: flex;
border-radius: 25px;
margin-left: 65px;
margin-right: 65px;
background-color: white;
color: black;
}
#texte{
  display: flex;
  flex-direction: column;
  gap:15px
}
.content img{
  width: 50%;
}