/* Styles des réseaux sociaux JKM Services */
.social-links {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

/* Section pour les réseaux sociaux dans le footer */
.footer-social {
  margin-top: 1.5rem;
}

.footer-social h6 {
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 1rem;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 1.2rem;
  position: relative;
  overflow: hidden;
}

.social-link::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: white;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.social-link:hover::before {
  opacity: 0.1;
}

.social-link:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Couleurs spécifiques pour chaque réseau social */
.social-facebook {
  background: #1877f2;
  color: white;
}

.social-instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: white;
}

.social-youtube {
  background: #ff0000;
  color: white;
}

.social-tiktok {
  background: #000000;
  color: white;
}

.social-whatsapp {
  background: #25d366;
  color: white;
}

.social-twitter {
  background: #1da1f2;
  color: white;
}

.social-linkedin {
  background: #0077b5;
  color: white;
}

/* Tooltip pour les réseaux sociaux */
.social-link[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  z-index: 10;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Version responsive */
@media (max-width: 768px) {
  .social-links {
    gap: 0.5rem;
  }
  
  .social-link {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
}