/* ══════════════ STYLES ICÔNES RÉSEAUX SOCIAUX ══════════════ */
/* Charte Graphique Littoral Numérique - Phase 3 */

.social-links {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 12px 0;
}

.social-links.center {
  justify-content: center;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--color-primary);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow);
}

.social-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s ease;
}

/* Animations au survol / focus */
.social-icon:hover,
.social-icon:focus-visible {
  background: var(--color-primary-dark);
  color: #ffffff;
  border-color: var(--color-primary-dark);
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.social-icon:hover svg,
.social-icon:focus-visible svg {
  transform: scale(1.1);
}

/* Couleurs spécifiques optionnelles (respectant la charte LN ou les marques officielles) */
.social-icon.whatsapp:hover,
.social-icon.whatsapp:focus-visible {
  background: #25d366; /* Vert WhatsApp officiel */
  border-color: #25d366;
}

.social-icon.linkedin:hover,
.social-icon.linkedin:focus-visible {
  background: #0077b5; /* Bleu LinkedIn officiel, contraste élevé */
  border-color: #0077b5;
}

.social-icon.facebook:hover,
.social-icon.facebook:focus-visible {
  background: #1877f2; /* Bleu Facebook officiel */
  border-color: #1877f2;
}

.social-icon.instagram:hover,
.social-icon.instagram:focus-visible {
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  ); /* Dégradé Insta officiel */
  border-color: #e6683c;
}

/* Intégration Header (plus discret, sur fond bleu) */
header .social-links {
  justify-content: center;
  margin-top: 16px;
}

header .social-icon {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: none;
  width: 36px;
  height: 36px;
}

header .social-icon svg {
  width: 18px;
  height: 18px;
}

header .social-icon:hover,
header .social-icon:focus-visible {
  background: #ffffff;
  color: var(--color-primary-dark);
  border-color: #ffffff;
  transform: translateY(-2px);
}

/* Accessibilité pour la navigation au clavier */
.social-icon:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* Remplacer le texte masqué pour les lecteurs d'écran (sr-only) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.social-icon.substack svg {
  fill: currentColor;
  stroke: none;
}

.social-icon.substack:hover,
.social-icon.substack:focus-visible {
  background: #ff6719; /* Orange Substack officiel */
  border-color: #ff6719;
}