body {
  margin: -19px;
  font-family: Arial, sans-serif;
  background: linear-gradient(to bottom, black 35%, rgb(93, 0, 164));
  background-attachment: fixed;
  background-repeat: no-repeat;
  overflow: hidden;
}

.garde {
  align-items: center;
  top: 0px;
  left: 0px;
  z-index: 5000;
  overflow: hide;
  width: 100%;
  height: 100%;
  position: absolute;
  animation-name: myAnimation;
  border: solid white 2px;
  border-radius: 5% 5% 0% 0%;
  animation-duration: 3s;
  animation-delay: 3s;
  animation-fill-mode: both;
  cursor: help;
}

@keyframes myAnimation {
  from {
    top: 0px;
    background: rgb(106, 0, 167);
  }
  to {
    top: 100%;
    background: black;
  }
}

.divicongarde {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.icongarde {
  width: 40vmin;
  animation: rotating 2s linear infinite;
  animation-delay: 2s;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*Page principal*/

.left_cont {
  margin-left: 22.447vw; /* Ajuster en fonction de la largeur de la barre latérale */
  max-width: calc(100% - 431px); /* Largeur maximale ajustée */
  padding: 0px;
  transition: width 0.5s ease-out; /* Transition pour le déplacement */
}

.left_cont.closed {
  margin-left: 0px; /* Ajuster en fonction de la largeur de la barre latérale */
  max-width: calc(100% - 431px); /* Largeur maximale ajustée */
  padding: 0px;
  transition: width 0.5s ease-out; /* Transition pour le déplacement */
}

.pagetitle {
  position: absolute;
  left: 8vi;
  bottom: -13px;
  font-size: 1.5em;
  font-family: "Times New Roman", Times, serif;
  color: white;
}

.researchzone {
  width: 100vw;
  max-width: 1980px;
  height: 50px;
  border-bottom: solid white 2px;
  border-top: solid white 1px;
  color: white;
  position: fixed;
  padding: 0px 50px;
  text-align: center;
  z-index: -1;
  overflow: hidden;
  margin: -18px;
  margin-top: 19px;
  justify-content: center;
  background-color: black;
}

.search {
  cursor: help;
  width: 30vw;
  max-width: 500px;
  height: 30px;
  border-radius: 100px;
  border: 2px solid black;
  padding: 0px 5px;
  padding-right: 30px;
}

.searchbar {
  padding-left: 19%;
  padding-right: 1090px;
  padding-top: 7px;
}

.profil {
  position: absolute;
  cursor: pointer;
  height: 45px;
  width: 45px;
}

.divprofil {
  position: absolute;
  /* left: 71vi; */
  right: 35%;
  z-index: 5;
  top: 0px;
  cursor: pointer;
}

.divprofil.closed {
  position: absolute;
  /* left: 71vi; */
  right: 15%;
  z-index: 5;
  top: 0px;
  cursor: pointer;
}

.profimg {
  height: 45px;
  width: 45px;
  padding: 2px;
  border-radius: 100%;
}

/*barre lathéral*/

.sidebar-container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  padding-top: 20px;
  align-items: flex-start;
  border: 2px solid white;
  border-radius: 25px;
  transition: width 0.5s ease-out; /* Transition pour le déplacement */
}

.sidebar::-webkit-scrollbar {
  display: none; /* Masque la scrollbar dans Chrome, Safari et les autres WebKit */
}

.sidebar {
  width: 22.447vw; /* 22.447% de la largeur de la fenêtre */
  max-width: 431px; /* Largeur maximale de 431 pixels */
  height: 100vh;
  max-height: 1080px;
  background: black;
  position: relative;
  transition: width 0.5s ease-out; /* Transition pour l'ouverture/fermeture */
  overflow: scroll;
}

.sidebar.closed {
  width: 0; /* Réduit la largeur de la barre latérale à 0 */
}

.sidebar a {
  padding: 15px 20px;
  text-decoration: none;
  font-size: 18px;
  color: white;
  display: block;
  transition: opacity 0.3s, visibility 0.3s;
}

.sidebar.closed a {
  opacity: 0; /* Rend les liens transparents */
  visibility: hidden; /* Masque les liens */
}

.sidebar div {
  text-decoration: none;
  font-size: 18px;
  color: white;
  transition: opacity 0.3s, visibility 0.3s;
  align-items: center;
}

.sidebar.closed div {
  opacity: 0; /* Rend les liens transparents */
  visibility: hidden; /* Masque les liens */
}

.toggle-btn {
  background-color: black;
  color: white;
  border: none;
  cursor: pointer;
  padding: 25px 15px;
  font-size: 18px;
  margin-left: -20px; /* pour chevaucher légèrement la barre latérale */
  border-radius: 25px;
  position: absolute;
  right: -30px; /* positionné à l'extérieur de la barre latérale */
  top: 50%;
  transform: translateY(-50%);
  border: 2px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease; /* Transition pour le changement de couleur du bouton */
  z-index: -1; /* Assure que le bouton soit au-dessus de la barre latérale */
}

.toggle-btn:hover {
  background-color: rgba(87, 87, 87, 0.5);
}

.sidebar-button {
  border: 1px solid white;
  display: flex;
  padding: 5px;
  overflow: hidden;
}

.sidebar-button:hover {
  background-color: #1d1d1d;
  color: white;
  transition: background-color 0.3s ease;
}

.sidebar-text {
  border: 1px solid white;
  display: flex;
  padding: 15px;
  overflow: hidden;
}

/* Texte à gauche de la barre latérale */
.left_text {
  position: absolute;
  left: calc(
    22.447vw + 100px
  ); /* Ajuster en fonction de la largeur de la barre latérale */
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  top: 8.5%;
  overflow-y: scroll;
  overflow-x: hidden;
  z-index: -7;
  max-width: 100%;
  max-height: 91.5%;
  scrollbar-width: thin; /* "auto" or "thin" */
  scrollbar-color: rgba(112, 112, 112, 0.5) black; /* scroll thumb and track */
  transition: width 0.5s ease-out; /* Transition pour le déplacement */
}

.left_text.closed {
  left: 10.447vw;
  width: 100vw;
  max-width: 1400px;
  transition: width 0.5s ease-out; /* Transition pour le déplacement */
}

#testtest {
  position: relative;
  top: -20px;
}

.text_closed {
  position: absolute;
  left: calc(
    22.447vw + 100px
  ); /* Ajuster en fonction de la largeur de la barre latérale */
  transition: width 0.5s ease-out; /* Transition pour le déplacement */
}

.publication {
  border-top: solid white 2px;
  width: 70vw;
}

.publpdp {
  padding-top: 5px;
}

.postpdp {
  width: 65px;
  height: 65px;
  max-width: 65px;
  border-radius: 100%;
}

.postname {
  position: relative;
  color: white;
  text-decoration: none;
  left: 75px;
  top: -65px;
}

.postname:hover {
  text-decoration: underline;
  overflow: hidden;
}

.posttag {
  position: relative;
  font-family: sans-serif;
  font-size: 10px;
  color: #626161;
  left: 75px;
  top: -70px;
}

.positiontext {
  padding-right: 300px;
}

.posttext {
  position: relative;
  left: 75px;
  top: -40px;
  word-wrap: break-word;
}

.postimage {
  position: relative;
  left: 75px;
  top: -30px;
  max-width: 600px;
}

.like_btn {
  position: relative;
  background-color: rgba(0, 0, 0, 0);
  border: 0px;
  left: 70px;
  top: -30px;
  overflow-y: hidden;
}

.like_btn:active {
  transform: translateY(2px);
  box-shadow: 0 0 #2980b9;
}

.like:hover {
  background-color: rgba(54, 54, 54, 0.473);
  border-radius: 30% 30% 100% 100%;
}

.like {
  width: 25px;
}

.liked:hover {
  background-color: rgba(54, 54, 54, 0.473);
  border-radius: 30% 30% 100% 100%;
}

.liked {
  width: 25px;
}

.likecount {
  position: relative;
  left: 65px;
  top: -35px;
}

.comment_btn:active {
  transform: translateY(2px);
  box-shadow: 0 0 #2980b9;
}

.comment_btn {
  position: relative;
  background-color: rgba(0, 0, 0, 0);
  border: 0px;
  left: 100px;
  top: -30px;
  padding-top: 20px;
  padding-bottom: 5px;
}

.comment {
  width: 25px;
}

.comment:hover {
  background-color: rgba(54, 54, 54, 0.473);
  border-radius: 100% 100% 100% 0%;
}

.commentcount {
  position: relative;
  top: -35px;
  left: 95px;
}

.timepublication {
  position: relative;
  font-family: sans-serif;
  font-size: 10px;
  color: #626161;
  left: 60vi;
}

/*partie bouttons*/

.pdp {
  width: 65px;
  height: 65px;
  border-radius: 100%;
  align-items: center;
  justify-content: center;
}

.follow:hover {
  background-color: #490091;
  color: white;
  border: 1px solid grey;
}

.follow {
  cursor: pointer;
  font-size: 18px;
  width: 73px;
  height: 46px;
  border-radius: 100px;
  border: 0px;
  background-color: #6b00c3;
  color: white;
  align-items: end;
  transition: background-color 0.3s ease; /* Transition pour le changement de couleur du bouton */
  padding: 5px 10px;
}

.followed:hover {
  background-color: #2c2c2c;
  color: rgb(255, 255, 255);
  border: 1px solid grey;
}

.followed {
  cursor: pointer;
  font-size: 18px;
  width: 73px;
  height: 46px;
  border-radius: 100px;
  border: 1px;
  background-color: #3a3a3a;
  color: white;
  align-items: end;
  transition: background-color 0.3s ease; /* Transition pour le changement de couleur du bouton */
  padding: 11px 16px;
}

.btn_text_name {
  cursor: pointer;
  padding-left: 5px;
  text-overflow: ellipsis;
  overflow: hidden;
  font-family: sans-serif;
  font-size: 20px;
}

.certified {
  width: 15px;
  height: 15px;
}

.btn_text_tag {
  cursor: pointer;
  padding-left: 5px;
  text-overflow: ellipsis;
  overflow: hidden;
  font-family: sans-serif;
  font-size: 10px;
  color: #626161;
}

.btn_text_desc {
  /*description*/
  cursor: pointer;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 70px;
  text-overflow: ellipsis;
  overflow: hidden;
  font-family: sans-serif;
  display: -webkit-box; /* Fait fonctionner le line-clamp en combinaison avec WebKit */
  -webkit-line-clamp: 2; /* Nombre maximum de lignes avant le débordement */
  -webkit-box-orient: vertical;
  font-size: 15px;
}

.btn_text_rea {
  /*reason of appear*/
  cursor: pointer;
  padding-left: 5px;
  text-overflow: ellipsis;
  overflow: hidden;
  font-family: sans-serif;
  color: #a7a7a7;
  font-size: 10px;
  display: -webkit-box; /* Fait fonctionner le line-clamp en combinaison avec WebKit */
  -webkit-line-clamp: 1; /* Nombre maximum de lignes avant le débordement */
  -webkit-box-orient: vertical;
}

.entre_btn {
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;
  font-family: sans-serif;
  font-size: 20px;
  text-align: center;
  position: absolute;
}

.btn_div {
  position: absolute;
  right: 5px; /* positionné à l'extérieur de la barre latérale */
}