/* ------------------------------------------------------------------
   social-nav.css – barre sociale FIXE et opaque + anim du bouton
   ------------------------------------------------------------------ */

/* Hauteur par défaut : desktop */
:root{ --social-h: 60px; }

/* Hauteur plus basse sur mobile si besoin */
@media (max-width: 480px){
  :root{ --social-h: 56px; }
}

/* ========= Barre elle-même ========= */
.social-nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--social-h);
  background: #fff;                /* opacité totale */
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  z-index: 1300;
}

/* ========= Contenu ========= */
.social-nav ul{
  list-style: none;
  margin: 0;
  padding: 0 1rem;
  height: 100%;
  display: flex;
  align-items: center;
}

.social-nav li.icon-item{ margin-right: 1rem; }

.social-nav li.icon-item img{
  width: 34px;
  height: 34px;
  transition: transform .3s;
}

.social-nav li.icon-item a:hover img{
  animation: swing .6s ease both;
}

.social-nav .flex-grow{ flex: 1; }

/* Bouton CTA flottant (réduit de 20 %) */
.social-nav .btn-cta{
  background: var(--gold);
  color: #fff;
  font-weight: 600;
  padding: calc(.55rem * .8) calc(1.4rem * .8);
  font-size: .8rem;
  border-radius: 30px;
  text-decoration: none;
  display: inline-block;
  animation: float 2.5s ease-in-out infinite;
  transition: background .3s;
}
.social-nav .btn-cta:hover{ background: #b58e4f; }

/* ========= Animations ========= */
@keyframes swing{
  20%{ transform: translateX(-6px) rotate(-12deg); }
  40%{ transform: translateX(4px)  rotate(8deg);  }
  60%{ transform: translateX(-3px) rotate(-6deg); }
  80%{ transform: translateX(2px)  rotate(4deg);  }
}

@keyframes float{
  0%,100%{ transform: translateY(0);   }
  50%    { transform: translateY(-6px);}
}