/* Styles spécifiques pour les boutons de partage */
.share-icon {
  width: 25px;
  height: 25px;
}

.share-text {
  background-color: black;
  color: white;
  display: none;
  padding: 5px 10px;
  margin-top: 5px;
  border-radius: 5px;
  font-size: 14px;
  position: absolute;
  top: 30px; /* Ajuster cette valeur si nécessaire */
}

.share-button:hover .share-text {
  display: block;
}

.share-menu-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  padding-bottom: 10px;
}

.share-menu {
  display: none;
  background-color: white;
  padding: 10px 10px 3px 10px;
  z-index: 1;
  white-space: nowrap;
  display: flex;
  align-items: center; /* Centrer les boutons verticalement */
  justify-content: center; /* Centrer les boutons horizontalement */
}

.share-menu .share-icon-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin-right: 5px;
}

.share-menu .facebook {
  background-image: url("images/share/facebook.png");
}

.share-menu .facebook:hover {
  background-image: url("images/share/facebook-hover.png");
}

.share-menu .x {
  background-image: url("images/share/x.png");
}

.share-menu .x:hover {
  background-image: url("images/share/x-hover.png");
}

.share-menu .whatsapp {
  background-image: url("images/share/whatsapp.png");
}

.share-menu .whatsapp:hover {
  background-image: url("images/share/whatsapp-hover.png");
}

.share-menu .threads {
  background-image: url("images/share/threads.png");
}

.share-menu .threads:hover {
  background-image: url("images/share/threads-hover.png");
}

.share-menu .messenger {
  background-image: url("images/share/messenger.png");
}

.share-menu .messenger:hover {
  background-image: url("images/share/messenger-hover.png");
}

.share-menu .telegram {
  background-image: url("images/share/telegram.png");
}

.share-menu .telegram:hover {
  background-image: url("images/share/telegram-hover.png");
}

.share-menu .mail {
  background-image: url("images/share/mail.png");
}

.share-menu .mail:hover {
  background-image: url("images/share/mail-hover.png");
}

.share-menu .lien {
  background-image: url("images/share/lien.png");
}

.share-menu .lien:hover {
  background-image: url("images/share/lien-hover.png");
}

.copy-link-message {
  display: none;
  color: green;
  margin-top: 10px;
  text-align: center;
  width: 100%;
}

/* Mode sombre automatique */
@media (prefers-color-scheme: dark) {
  .share-text {
    background-color: #333;
    color: #fff;
  }

  .share-menu {
    background-color: #222;
    border-color: #444;
  }

  .share-menu .share-icon-button {
    filter: brightness(0.8);
  }

  .share-menu .share-icon-button:hover {
    filter: brightness(1);
  }

  .copy-link-message {
    color: lightgreen;
  }
}