@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

/* Titre de la page */
.Titre{
  display : flex;
  justify-content: center;
  margin: 2%;
  font-size: 25px;
  text-decoration: underline;
  color: #212121;
}

/* bloc qui contient tout */
.section_MB{
  position: relative;
  height: 500px;
  max-width: 800px; /* Définissez la largeur maximale de la section */
  display: flex;
  justify-content:center;
  align-items: center;
  display: grid;
  margin: 0 auto; /* Pour centrer horizontalement la section */
  padding: 20px; /* Ajoutez un peu d'espace intérieur pour aérer le contenu */
  grid: repeat(2, 350px) / auto-flow 250px;
  gap: 10px 10px;
}

/* Pour la grille */
.section_MB > div_MB{
  width: 50px;
  height: 50px;
}

/* Réglage image de la carte */
.card .image {
  width: 140px;
  height: 140px;
  border-radius: 50%;
}

.card .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid wheat;
}

/* Régalage carte */
.card {
  position: relative;
  background: white;
  border: 3px solid wheat;
  border-radius: 20px;
  
}

.card::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: wheat;
  clip-path: circle(55% at 0 0);
  border-top-left-radius: 10px;

}

/* Ce que contient la carte */
.card .card-content {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 30px;

}

/* Bouton pour réseaux */
.card .social-media {
  position: absolute;
  top: 10px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card .social-media i {
  color: black;
  margin-top: 10px;
  cursor: pointer;
  transition: .3s;
}

.card .social-media i:hover {
  color: wheat;
}

/* Réglage pour la profession */
.card .name-profession {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 10px;
  color: black;
}

/* Réglage du nom en dessous */
.name-profession .name {
  font-size: 20px;
  font-weight: 600;
}

.name-profession .profession {
  font-size: 15px;
  font-weight: 500;
}

/* Bouton en dessous */
.card .button {
  display: flex;
  justify-content: space-around;
  width: 110%;
  margin-top: 20px;
}

.card .button button {
  background: wheat;
  border: none;
  outline: none;
  color: #212121;
  font-weight: 600;
  padding: 8px 22px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: .3s;
}

.card .button button:hover {
  background: wheat;
}

/* BOUTON NAWEL */

/* Bouton en dessous */
.card .button {
  display: flex;
  justify-content: space-around;
  width: 110%;
  margin-top: 20px;
}

.card .button a {
  background: wheat;
  border: none;
  outline: none;
  color: #212121;
  font-weight: 600;
  padding: 8px 22px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: .3s;
  text-decoration: none;
}

.card .button a:hover {
  background: wheat;
}

  
  /* MISE EN PLACE DU RESPONSIVE */

  @media screen and (max-width : 1450px) {
    .section_MB{
      grid: repeat(3, 400px) / auto-flow 250px;
      gap: 12px 12px;
    }

    .Titre{
      margin-bottom: 2%;
      margin-left: 2%;
      margin-right: 2%;
      margin-top: 15%;
      font-size: 35px;
    }

    .name-profession .name {
      display: flex;
      justify-content: center;
    }

    .name-profession .profession {
      display: flex;
      justify-content: center;
      font-size: 18px;
    }

    .card .card-content {
      padding: 40px;
      display: flex;
      justify-content: center;
    }

    .card .image {
      width: 150px;
      height: 150px;
      border-radius: 50%;
    }
  
    .card .image img {
      width: 110%;
      height: 110%;
    }

    .card .button button {
      padding: 8px 22px;
      font-size: 18px;
      display: flex;
      justify-content: center;
    }
  }



  @media screen and (max-width : 630px) {
    .section_MB{
      grid: repeat(7, 400px) / auto-flow 250px;
    }

    .Titre{
      margin-bottom: 2%;
      margin-left: 2%;
      margin-right: 2%;
      margin-top: 15%;
      font-size: 30px;
    }
  }