body{
  margin: 0;
  padding: 0;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}


.crumbs ol {
  list-style-type: none;
  padding-left: 0;
}

.crumb {
  display: inline-block;
}

.crumb a::after {
  content: ' ';
  margin: 0 5px; /* Ajout de marges entre les éléments de navigation */
  color: #000;
  font-size: 80%;
  font-weight: bold;
}



.section1 {
  background-image: url("medias/cercle.png"), linear-gradient(to right, #657AE5, #7257B4);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center right;
  color: white;
  border: none;
}


.conteneur {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 70px;
}

.item1,
.crumbs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.item2 {
  margin-left: auto;
}

.conteneur1 {
  display: flex;
  justify-content: center; /* Aligne les éléments à l'extrémité droite du conteneur */
  align-items: center;
}

.item3 {
  text-align: center;
  margin-right: 100px;
  text-align: justify;
}

.item4 {
  margin-left: 70px;
  position: relative;
}


.item4 img {
  display: block;
  margin: 0 auto;
  width: 304px;
  height: 435px;
  
}


.container {
  position: relative;
  width: 300px; /* Ajustez la largeur selon vos besoins */
  height: 200px; /* Ajustez la hauteur selon vos besoins */
  
}


.fond-rose{
 
  position: absolute;
  top: 170px;
  right: 350px;
  width: 300px;
  height: 435px;
  background-color: #EE00A1;
/* je n'ai pas su utiliser boxshadow*/
}


.separator{
  width: 0;
  height: 0;
  border-left: 100vw solid transparent;
  border-bottom: 13.9vw solid white;
  margin-top: -13.9vw;
}

h2{
  font-size: 36px;
}

.button1{
  color: white;
  background-color: #EE00A1;
  display: inline-block;
  padding: 10px 20px;
  font-size: 12px;
  text-align: center;
  text-decoration: none;
  border-radius: 20px;
  border: 1px solid #EE00A1 ;
  margin-right: 5%;

}

.button2 {
  color: white;
  background-color: inherit;
  display: inline-block;
  padding: 10px 20px;
  font-size: 12px;
  text-align: center;
  text-decoration: none;
  border-radius: 20px;
  border: 1px solid white; /* Utilise une bordure de 1 pixel solide blanche */
}

.conteneur2{
  display: flex;
  justify-content: space-between; /* Aligne les éléments à l'extrémité droite du conteneur */
  align-items: center;
  margin-right: 10%;
  margin-left: 10%;
  margin-top: 2%;
  margin-bottom: 2%;;
  
}

.conteneur2 h3{

  text-align: center;
  font-size: 18px;
}

.conteneur2 img{
  
  display: block; /* Pour centrer horizontalement */
  margin: 0 auto;
  width: 121px;
  height: 124px;
  position: relative;
  justify-content: center;
  margin-top: 20%;
}

.conteneur2 p{
  font-size: 14px;
  text-align: center;
  padding-right: 10%;
  padding-left: 10%;
  
}

.conteneur3{
  padding-top: 2%;
  background-color: #F5FAFD;
  display: flex;
  flex-direction: column; /* Empile les éléments verticalement */
  align-items: center; /* Aligne les éléments horizontalement au centre */
  justify-content: center; 
  
}

.conteneur3 h3 {

  text-align: center;
  font-size: 18px;
  margin: 0%;
   
}

.conteneur3 h2{

  text-align: center;
  font-size: 24px;
  margin-left: 20%;
  margin-right: 20%;

}

.conteneur3 p{

  text-align: center;
  font-size: 14px;
  margin-left: 20%;
  margin-right: 20%;

}

.button3{

  color: white;
  background-color: #EE00A1;
  display: inline-block;
  padding: 15px 30px;
  font-size: 12px;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  border: 1px solid #EE00A1; /* Utilise une bordure de 1 pixel solide blanche */
}


.conteneur4 {
  background-color: #F5FAFD;
  margin-top: 2%;
}

.img1, .img3{
  height: 200px;
  width: 400px;
  margin: 0 10px; /* Ajustez la marge selon vos besoins */
  position: relative;
}

.img1 {
  left: 20%;
}

.img3 {
  right: 20%;
}

.img2 {
  height: 250px;
  width: 500px;
  margin: 0 10px; /* Ajustez la marge selon vos besoins */
  position: relative;
  z-index: 1; /* Met l'image 2 en premier plan */
}

.conteneur5 {
  display: flex;
  flex-direction: column;
  background-color: white;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.conteneur6 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
  text-align: justify;
  padding-bottom: 4%;
}

.item5,
.item6,
.item7,
.item8 {
  height: 130px;
  width: 470px;
  display: flex;
  flex-direction: row; /* Ajustez la direction en ligne pour aligner l'image et le texte côte à côte */
  align-items: center; /* Aligne les éléments sur l'axe vertical */
  padding: 20px;
  border: 1px solid #ddd;
}

.item5 img,
.item6 img,
.item7 img,
.item8 img {
  max-width: 100%;
  height: auto;
  margin-right: 20px;
}

.text {
  overflow: hidden;
}

.conteneur6 h3{

  color: #EE00A1;
}

.conteneur6 img{
  height: 100px;
  width: 100px;
}


.conteneur7{

  background-color: #F5FAFD;
}