Favor/Site Web/client/src/styles/pages/_profil.scss

// #PhotoProfile{
// 	display: block;
//     	margin-left: auto;
//         margin-right: auto;
// 	width: 150px;
// 	height:150px;
// 	border-radius: 80px;
// 	border: 2px solid #555;
// }

// #blocAbonnement{
// 	display: flex;
// 	justify-content: center;
	
	
// }
// #blocAbonnement .bloc-aboonnements-abonner{
// 	margin-left: 80px;
// 	margin-right: 80px;
// }

// #blocName{
// 	text-align: center;
// }

// .affichage-date{
//   font-size: 15px;
// }

// .nombre{
// 	color:black;
// }

// .texteNombre{
// 	color:white;
// }

// #bandeauProfil{
//     background-color: #D9D9D9;
//     margin-top: 50px;
// }

.popup-profil-container {
    z-index: 100;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    position: fixed;
    animation: popup 1s forwards;

    @keyframes popup {
      to {
        backdrop-filter: blur(2px);
      }
    }

    .modal {
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translate(-100%);
      background: $color-2;
      padding: 25px;
      border-radius: 20px;
      box-shadow: 0 0 2px rgba(131, 130, 130, 0.356);
      overflow: auto;
      transform: scaleY(0);
      transform-origin: center;
      animation: modal .5s forwards;

      h3 {
        min-width: 200px;
      }

      @keyframes modal {
        to {
          transform: scale(1) translate(-50%);
        }
      }

      .cross {
        position: absolute;
        top: 25px;
        right: 25px;
        transition: 0.1s;
        cursor: pointer;

        &:hover {
          transform: scale(1.07);
        }
      }

      ul {
        margin: 20px 0 0;
        max-height: 500px;
        overflow-y: scroll;
        overflow-x: hidden;

        &::-webkit-scrollbar {
          width: 2px;
        }
        &::-webkit-scrollbar-track {
          background: $color-4;
        }
        &::-webkit-scrollbar-thumb {
          background: $color-1;
        }
        &::-webkit-scrollbar-thumb:hover {
          background: #555;
        }

        li {
          display: grid;
          grid-template-columns: 64px 1fr 114px;
          align-items: center;
          margin: 10px 0;

          img {
            height: 50px;
            width: 50px;
            border-radius: 20px;
            object-fit: cover;
            box-shadow: 0 0 2px rgba(51, 51, 51, 0.376);
          }
          h4 {
            text-align: left;
            min-width: 210px;
          }
          .follow-handler {
            text-align: left;

            button {
              background: $color-4;
              border-radius: 20px;
              margin-right: 6px;

              &:hover {
                color: $color-3;
                transform: translateX(2px);
              }
            }
          }
        }
      }
    }
}

.navProfil {
  margin: 0% 0 0% 4%;
  padding-top: 0.5%;
}

/* Navigation */

.navProfil {
  font-family: Georgia, Arial, sans-serif;
  font-size: 14px;
}

.navItemsProfil {
  padding-top: 2%;
  padding-bottom: 2%;
  list-style: none;
  
}

.navItemProfil {
  display: inline-block;
  margin-right: 25px; 
}




.navLinkProfil,
.navLinkProfil:link, 
.navLinkProfil:visited, 
.navLinkProfil:active {
  display: block;
  position: relative;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  text-decoration: none;
  outline: none;
}

.navLinkProfil,
.navLinkProfil:link, 
.navLinkProfil:visited, 
.navLinkProfil:active {
  color: black;
  font-weight: bold;
}

.navLinkProfil::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(0,0,0,0.2);
  opacity: 0;
  -webkit-transform: translate(0, 10px);
  transform: translate(0, 10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.navLinkProfil:hover::before,
.navLinkProfil:hover::before {
  opacity: 1;
  -webkit-transform: translate(0, 5px);
  transform: translate(0, 5px);
}

.image {
  margin-top: 1%;
border-radius: 100%;
width: 10%;
}

.imageProfil{
  display: flex;
justify-content: center;
}

.flex-menu {
    display:flex;
          justify-content: center;
  }

.flex-menu li:not(:last-child) {
    margin-right:40px;
}

.divSuivreFollowing {
  display: flex;
  justify-content: center;
  padding-bottom: 1%;
}

.nbFollow {
  margin: 0% 8% 0% 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 3%;
}

.nbFollow h4 {
  margin: 5% 0% 0% 0%;
display: flex;
justify-content: center;
font-weight: bold;
}

// h3 {
//   margin: 0%;
// }

// h4 {
// margin: 40% 0% 0% 0%;
// display: flex;
// justify-content: center;
// font-weight: bold;
// }

.pseudo {
  margin:1% 0% 0% 0%;
}

.divPseudo {
  display: grid;
  justify-items: center;
}

/* * {
padding:0;
margin:0;
} */

// .txtFollower {
// display: flex;
// justify-content: center;
// margin: 0%;
// padding: 0% 0% 20% 0%;
// }

.button {
padding: 0.5% 0.5%;
border-radius: 10%;
background: #19104f;
text-decoration: none;
color: white;
font-size: 16px;
letter-spacing: .08em;
margin-top: 1%;
}

.buttonReco {
padding-top: 1.5%;
border-radius: 10%;
background: #19104f;
text-decoration: none;
color: white;
font-size: 13px;
letter-spacing: .08em;
margin-top: 1%;
}

.divMenu {
  margin: 0%;
  background-color: #cccaca;
  width: 75%;
  height: 500px;
  border-radius: 25px;
}

.menuContent{
border: 0.3px solid $color-5;
background-color: $color-9;
border-radius: 10px;
margin: 0% 0% 0% 2.5%;
width: 95%;
height: 85%;
}

.reco{
background-color: #a8a8a8;
margin: 0% 0% 0% 2.5%;
border-radius: 25px;
width: 100%;
height: 300px;
}

.reco span{
display: flex;
justify-content: center;
padding-top: 3%;
}

.listContent {
padding-left: 1%;
padding-top: 1%;
overflow-y: scroll;
scrollbar-width: thin;
scrollbar-gutter: stable both-edges;

}

.basDePage {
display: flex;
  flex-direction: row ;
  justify-content: space-around;

}

.recoDiv {
width: 20%;
}

.UtiReco {
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding: 5% 0% 0% 0%;
}

.ListReco {
display: flex;
flex-direction: column;
align-content: space-around;
}

// div {
//   border: 5px ridge;
// }