/* ==========================================================================
   🎯 ENCRALYS - PROFIL UTILISATEUR (BuddyBoss)
   Structure : sections claires + explications ligne par ligne
   ========================================================================== */


/* ==========================================================================
   🧭 ONGLET DU PROFIL / NAVIGATION
   ========================================================================== */

/* Conteneur du menu d’onglets sur le profil */
body.bp-user #item-nav {
  background: #1c1c1c; /* fond sombre */
  border-bottom: 1px solid #2a2a2a; /* séparation visuelle */
}

/* Liste horizontale des onglets */
body.bp-user #item-nav .item-list-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px; /* espacement entre les onglets */
  padding: 8px;
}

/* Style de chaque onglet */
body.bp-user #item-nav .item-list-tabs li {
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  background: #121212;
  transition: all 0.2s ease;
}

/* Lien interne à chaque onglet */
body.bp-user #item-nav .item-list-tabs li a {
  color: #eaeaea;
  padding: 8px 14px;
  display: block;
  font-size: 13px;
  font-weight: 500;
}

/* Survol d’un onglet */
body.bp-user #item-nav .item-list-tabs li:hover {
  background: #222;
  border-color: #3a3a3a;
}

/* Onglet actif (celui sélectionné) */
body.bp-user #item-nav .item-list-tabs li.current a {
  background: #2a62ff; /* bleu principal */
  color: #fff;
  border-radius: 8px;
}


/* ==========================================================================
   👥 POPUP FOLLOWERS / FOLLOWING
   ========================================================================== */

/* Overlay semi-transparent derrière la popup */
.bbpf-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none; /* caché par défaut */
  z-index: 100000;
}

/* Boîte principale du popup */
.bbpf-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* centrage */
  width: min(720px, 92vw);
  max-height: 80vh;
  background: #1e1e1e;
  color: #eaeaea;
  border: 1px solid #404040;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
  display: none; /* caché tant qu’il n’est pas ouvert */
  z-index: 100001;
  padding: 10px 0 20px;
}

/* Bandeau du haut du popup */
.bbpf-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #2a2a2a;
}

/* Titre (Followers / Following) */
.bbpf-title {
  margin: 0;
  font-weight: 700;
  font-size: 1.1rem;
}

/* Bouton "×" de fermeture */
.bbpf-close {
  background: none;
  border: none;
  color: #aaa;
  font-size: 24px; /* taille du symbole */
  cursor: pointer;
}

/* Barre de recherche */
.bbpf-search input {
  background: #252525;
  color: #fff;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 8px 10px;
  width: 100%;
}

/* Liste des utilisateurs */
.bbpf-list {
  overflow: auto;
  max-height: calc(80vh - 120px);
  padding: 10px;
  scrollbar-width: thin; /* pour Firefox */
  scrollbar-color: #555 #1e1e1e;
}

/* Scrollbar spécifique à WebKit (Chrome/Safari) */
.bbpf-list::-webkit-scrollbar { width: 8px; }
.bbpf-list::-webkit-scrollbar-thumb { background: #555; border-radius: 8px; }
.bbpf-list::-webkit-scrollbar-track { background: #1e1e1e; }

/* Une ligne utilisateur (avatar + nom + boutons) */
.bbpf-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 8px;
  border-bottom: 1px solid #2a2a2a;
}

/* Survol d’une ligne utilisateur */
.bbpf-item:hover {
  background: #2a2a2a;
}

/* Bloc avatar + pseudo */
.bbpf-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Avatar de l’utilisateur */
.bbpf-user img {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
}

/* Pseudo utilisateur */
.bbpf-user .name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Conteneur des boutons (follow / unfollow / retirer) */
.bbpf-actions {
  display: inline-flex;
  gap: 8px;
}

/* Bouton standard */
.bbpf-actions button {
  border: 1px solid #3a3a3a;
  background: #121212;
  color: #eaeaea;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

/* Survol d’un bouton */
.bbpf-actions button:hover {
  background: #1e1e1e;
}

/* Bouton rouge (retirer/unfollow) */
.bbpf-actions button.danger {
  background: #2a1515;
  border-color: #5a2a2a;
  color: #ffdede;
}

/* Survol du bouton rouge */
.bbpf-actions button.danger:hover {
  background: #3a1d1d;
}

/* Indicateur de focus (clavier) */
.bbpf-actions button:focus,
.bbpf-close:focus {
  outline: 2px solid #2a62ff;
  outline-offset: 2px;
}

/* Rendre les compteurs cliquables */
.followers-wrap,
.following-wrap {
  cursor: pointer;
}


/* ==========================================================================
   📤 BOUTON PARTAGER + POPUP DE PARTAGE
   ========================================================================== */

/* Petit bouton “Partager” à droite d’un post ou profil */
.bb-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 10px;
  border: 1px solid #2f2f2f;
  background: #1c1c1c;
  color: #cfcfcf;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}

/* Effet hover du bouton */
.bb-share-btn:hover {
  background: #262626;
  color: #fff;
  border-color: #454545;
}

/* Icône SVG à l’intérieur */
.bb-share-btn svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
  display: block;
}


/* ---------- Fenêtre modale de partage ---------- */

/* Overlay sombre derrière la popup */
.bb-share-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  z-index: 100000;
}

/* Fenêtre principale de partage */
.bb-share-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(530px, 95vw);
  background: #171717;
  color: #eee;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.55);
  display: none;
  z-index: 100001;
}

/* En-tête de la popup */
.bb-share-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #2a2a2a;
}

/* Onglets (par ex : réseaux / lien direct / contacts) */
.bb-share-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid #222;
}

/* Style d’un onglet */
.bb-share-tab {
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  border: 1px solid transparent;
}

/* Hover/focus d’un onglet */
.bb-share-tab:hover,
.bb-share-tab:focus {
  background: #1b1b1b;
  border-color: #2a2a2a;
  outline: none;
}

/* Onglet actif */
.bb-share-tab.active {
  background: #202020;
  border-color: #2f2f2f;
}

/* Contenu d’un onglet */
.bb-share-pane { display: none; }
.bb-share-pane.active { display: block; }

/* Grille des icônes de réseaux sociaux */
.bb-share-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px;
}

/* Chaque icône (Facebook, X, etc.) */
.bb-share-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  background: #131313;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

/* Hover sur un réseau */
.bb-share-item:hover,
.bb-share-item:focus {
  background: #1b1b1b;
  outline: none;
}

/* Logo du réseau social */
.bb-share-item img {
  width: 24px;
  height: 24px;
}


/* ==========================================================================
   👥 LISTE DE FOLLOWING (mode sélection multiple)
   ========================================================================== */

/* Conteneur scrollable */
.bb-following-list {
  max-height: 340px;
  overflow: auto;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Une ligne dans la liste */
.bb-following-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  background: #111;
  transition: background .15s ease;
}

.bb-following-row:hover {
  background: #181818;
}

/* Avatar des utilisateurs dans cette section */
.bb-following-row img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

/* Section d’actions en bas (valider / annuler) */
.bb-following-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid #222;
}

/* Bouton standard */
.bb-btn {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid #2a2a2a;
  background: #101010;
  color: #eee;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s ease;
}

.bb-btn:hover { background: #202020; }

/* Bouton principal (bleu) */
.bb-btn.primary {
  background: #2a62ff;
  border-color: #2a62ff;
}

.bb-btn.primary:hover { background: #1d47cc; }

/* Bouton désactivé */
.bb-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Actions du footer de la popup de partage */
.bb-share-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 10px;
  border-top: 1px solid #2a2a2a;
}

/* Petit bouton “Copier le lien”, etc. */
.bb-share-small {
  padding: .35rem .7rem;
  border-radius: 8px;
  border: 1px solid #2a2a2a;
  background: #121212;
  color: #eaeaea;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s ease;
}

.bb-share-small:hover { background: #1f1f1f; }

/* Bouton X pour fermer la popup de partage */
.bb-share-close {
  background: transparent;
  border: 0;
  color: #aaa;
  cursor: pointer;
  font-size: 18px;
}


/* ==========================================================================
   ♿ ACCESSIBILITÉ & RÉDUCTION DES MOUVEMENTS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}