/* ==========================================================================
   FOOTER PREMIUM TOUCHES - 100% ADDITIF & SÛR
   (N'affecte : header, slider, héros, produits, parallax, inertie, logos)
   ========================================================================== */

/* 1. Lien du footer avec soulignée animée dorée (subtile)
   NB : les icônes sociales (.et-social-icons a.icon) sont EXCLUES du souligné. */
footer a:not(.et-social-icons a):not(.icon),
#footer-area a:not(.et-social-icons a),
.footer-widget a:not(.et-social-icons a) {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
footer a:not(.et-social-icons a)::after,
#footer-area a:not(.et-social-icons a)::after,
.footer-widget a:not(.et-social-icons a)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tim-gold), transparent);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translateX(-50%);
}
footer a:not(.et-social-icons a):hover::after,
#footer-area a:not(.et-social-icons a):hover::after,
.footer-widget a:not(.et-social-icons a):hover::after {
  width: 60%;
}

/* 2. Icônes de réseaux sociaux dans le footer - pastille circulaire glass
   Balisage actuel : <ul.et-social-icons><li.et-social-icon><a.icon><span>… */
footer .et-social-icons li.et-social-icon,
#footer-area .et-social-icons li.et-social-icon,
.footer-widget .et-social-icons li.et-social-icon {
  margin-left: 8px;
}
#footer-bottom .et-social-icons li.et-social-icon a.icon,
footer .et-social-icons li.et-social-icon a.icon,
#footer-area .et-social-icons li.et-social-icon a.icon,
.footer-widget .et-social-icons li.et-social-icon a.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  background: color-mix(in srgb, var(--c-light) 10%, transparent);
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
#footer-bottom .et-social-icons li.et-social-icon a.icon:hover,
footer .et-social-icons li.et-social-icon a.icon:hover,
#footer-area .et-social-icons li.et-social-icon a.icon:hover,
.footer-widget .et-social-icons li.et-social-icon a.icon:hover {
  background: rgba(255,121,0,.15);
  background: color-mix(in srgb, var(--tim-gold) 15%, transparent);
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 4px 12px rgba(255,121,0,.25);
}

/* 3. Texte du footer avec légère texture (optionnel, très subtil)
   NB : on cible .footer-widget::before UNIQUEMENT.
   Ne pas utiliser footer::before ni #footer-area::before : le footer possède
   déjà #main-footer::before (dégradés radiaux) et une règle avec opacity
   annulerait/compliquerait cet effet existant. */
.footer-widget {
  position: relative;
}
.footer-widget::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0z' fill='none'/%3E%3Cpath d='M10 0v20M0 10h20' stroke='%23FF7900' stroke-width='0.5' stroke-opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}