/* 1. Bloc orange compact + zoom sur le logo pour compenser ses marges transparentes */
body #header .block-social li.instagram,
body #footer .block-social li.instagram,
body .block-social li.instagram {
  background-color: #F37021 !important;
  border-radius: 4px !important;
  transition: background-color 0.3s ease !important;
  width: fit-content !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 2px 5px !important; /* Marge intérieure réduite en haut et en bas */
  display: inline-grid !important;
  place-items: center !important;
  vertical-align: top !important;
  margin-bottom: -14px !important;
  background-position: center -2px !important; /* Remonte légèrement l'image pour rogner la marge transparente du haut */
  background-repeat: no-repeat !important;
  background-size: 42px 42px !important; /* <-- Agrandit le dessin réel du logo */
}

body #header .block-social li.instagram:hover,
body #footer .block-social li.instagram:hover,
body .block-social li.instagram:hover {
  background-color: #333333 !important;
}

/* 2. Lien : réduit fortement le padding-top pour coller le texte sous le logo */
body #header .block-social li.instagram a,
body #footer .block-social li.instagram a,
body .block-social li.instagram a {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  display: grid !important;
  place-items: center !important;
  gap: 0 !important;
  font-size: 0 !important;
  text-indent: 0 !important;
  background-color: transparent !important;
  padding: 18px 0 0 0 !important; /* <-- Texte remonté tout près du logo */
  margin: 0 !important;
  text-decoration: none !important;
}

/* 3. Texte blanc centré et collé sous le logo */
body #header .block-social li.instagram a::after,
body #footer .block-social li.instagram a::after,
body .block-social li.instagram a::after {
  content: "Suivez-nous" !important;
  font-size: 8.5px !important;
  letter-spacing: -0.2px !important;
  line-height: 1 !important;
  color: #000000 !important;
  white-space: nowrap !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 767px) {
  /* 1. Ne pas réafficher toute la barre desktop pour éviter de décaler le header vers le bas */
  #header .header-nav {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 2. Rendre visible uniquement le bouton Instagram sans pousser les éléments voisins */
  #header .header-nav .block-social {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 8px !important; /* <-- Ajuste la hauteur dans la barre mobile */
    right: 95px !important; /* <-- Place le bouton juste à gauche du panier/compte (ajustez selon votre barre) */
    z-index: 999 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3. Ajuster la taille du bouton Instagram pour la barre mobile */
  #header .header-nav .block-social li.instagram {
    margin: 0 !important;
    transform: scale(0.85) !important;
    transform-origin: top right !important;
  }
}