/* ================================================
   AMS – Liens sociaux intégrés dans le header
   À placer dans docs/stylesheets/extra.css
   ================================================ */

/* Conteneur des liens sociaux dans le header */
.ams-header-social {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;   /* pousse les icônes vers la droite */
  margin-right: 0.5rem;
}

/* Chaque lien social */
.ams-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.ams-social-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

/* Couleur d'accentuation au survol */
.ams-whatsapp:hover  { background: rgba(37, 211, 102, 0.2);  color: #25D366; }
.ams-facebook:hover  { background: rgba(24, 119, 242, 0.2);  color: #74aaff; }
.ams-instagram:hover { background: rgba(225, 48, 108, 0.2);  color: #f77fbe; }

/* SVG : hérite de la couleur du lien */
.ams-social-link svg {
  flex-shrink: 0;
  fill: currentColor;
}

/* Sur tablette : masquer les labels, garder les icônes */
@media screen and (max-width: 76.1875em) {
  .ams-social-label { display: none; }
  .ams-header-social { gap: 0.1rem; }
}

/* Sur mobile : réduire encore la taille des icônes */
@media screen and (max-width: 600px) {
  .ams-social-link { padding: 0.3rem 0.4rem; }
  .ams-social-link svg { width: 16px; height: 16px; }
}