/* ═══════════════════════════════════════════════════════════════
   Madly — Menu overlay socials canonique (v45)
   Référence : home FR. Inclure ce fichier sur toutes les pages
   pour harmoniser les Linkedin / Instagram / Behance du fullscreen menu.
   ═══════════════════════════════════════════════════════════════ */

.menu-overlay .menu-social,
.menu-overlay .menu-socials,
.menu-social,
.menu-socials {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  opacity: 0;
  transition: opacity 0.6s ease 0.40s !important;
}
.menu-overlay.open .menu-social,
.menu-overlay.open .menu-socials { opacity: 1 !important; }

.menu-overlay .menu-social a,
.menu-overlay .menu-socials a,
.menu-social a,
.menu-socials a {
  font-family: var(--font-heading), 'Champ', 'Times New Roman', serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  background: linear-gradient(90deg, #FF7262 0%, #A259FF 50%, #1ABCFE 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(.19,1,.22,1) !important;
}
.menu-overlay .menu-social a:hover,
.menu-overlay .menu-socials a:hover,
.menu-social a:hover,
.menu-socials a:hover {
  opacity: 0.82 !important;
  transform: translateY(-2px) !important;
  color: transparent !important;
}

.menu-overlay .menu-social .sep,
.menu-overlay .menu-socials .sep,
.menu-social .sep,
.menu-socials .sep {
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: rgba(245,242,236,0.35) !important;
  display: inline-block !important;
}

/* FLÈCHES : vrai SVG (plus le caractère ↗ en Champ) — elles filent en diagonale au survol,
   une seconde flèche entre par en bas à gauche (demande alex 14/07/2026) */
.menu-overlay .menu-social a .ms-arrow,
.menu-overlay .menu-socials a .ms-arrow,
.menu-social a .ms-arrow,
.menu-socials a .ms-arrow {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 1em !important; height: 1em !important;
  margin-left: .35em;
  overflow: hidden !important;
  vertical-align: -0.08em;
}
/* le TEXTE du lien est en dégradé (color: transparent) : la flèche ne peut donc PAS hériter
   de currentColor, sinon elle est invisible. On lui redonne une couleur pleine. */
.menu-social a .ms-arrow,
.menu-socials a .ms-arrow,
.menu-overlay .menu-social a .ms-arrow,
.menu-overlay .menu-socials a .ms-arrow {
  color: #A259FF !important;
  -webkit-text-fill-color: #A259FF !important;
}
.menu-social a .ms-arrow svg,
.menu-socials a .ms-arrow svg,
.menu-overlay .menu-social a .ms-arrow svg,
.menu-overlay .menu-socials a .ms-arrow svg {
  width: 100% !important; height: 100% !important;
  stroke: #A259FF !important;
  transition: transform .55s cubic-bezier(.19,1,.22,1) !important;
  will-change: transform;
}
.menu-social a .ms-arrow::after,
.menu-socials a .ms-arrow::after { background: #A259FF !important; }
.menu-social a:hover .ms-arrow svg,
.menu-socials a:hover .ms-arrow svg {
  transform: translate(115%, -115%);          /* la flèche s'échappe en haut à droite */
}
.menu-social a .ms-arrow::after,
.menu-socials a .ms-arrow::after {
  content: '';
  position: absolute;
  width: 1em; height: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><line x1='3.5' y1='12.5' x2='12.5' y2='3.5'/><polyline points='6,3.5 12.5,3.5 12.5,10'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><line x1='3.5' y1='12.5' x2='12.5' y2='3.5'/><polyline points='6,3.5 12.5,3.5 12.5,10'/></svg>") center/contain no-repeat;
  transform: translate(-115%, 115%);          /* attend en bas à gauche… */
  transition: transform .55s cubic-bezier(.19,1,.22,1);
  pointer-events: none;
}
.menu-social a:hover .ms-arrow::after,
.menu-socials a:hover .ms-arrow::after {
  transform: translate(0, 0);                 /* …et prend sa place */
}
.menu-social a .ms-arrow,
.menu-socials a .ms-arrow { position: relative !important; }
@media (prefers-reduced-motion: reduce) {
  .menu-social a .ms-arrow svg, .menu-socials a .ms-arrow svg,
  .menu-social a .ms-arrow::after, .menu-socials a .ms-arrow::after { transition: none !important; }
}

@media (max-width: 720px) {
  .menu-overlay .menu-social a,
  .menu-overlay .menu-socials a,
  .menu-social a,
  .menu-socials a { font-size: 16px !important; }
}