Modèle:SocialButton/styles.css

/* =========================================================
   SOCIALBUTTON — STYLES COMPLETS (PROPORTIONS CORRIGÉES)
   ========================================================= */

/* Bandeau */
.sb-footer{
  width:100%;
  box-sizing:border-box;

  display:flex;
  align-items:center;
  gap:14px;

  padding:14px 16px;
  border-radius:12px;

  background:transparent;
  box-shadow:none;
}

/* Titres */
.sb-title{
  font-weight:700;
  font-size:1.05rem;
  white-space:nowrap;
  color:#000 !important;
}

/* espaceur entre les deux blocs */
.sb-spacer{ flex:1 1 auto; }

/* Groupes */
.sb-buttons{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}

/* Bouton wrapper */
.sb-btn{
  border-radius:12px;
  overflow:hidden;

  transition:all .3s cubic-bezier(.4,0,.2,1);
  box-shadow:0 2px 8px rgba(0,0,0,.10);

  display:inline-flex;        /* <-- clé : proportions naturelles */
  align-items:center;
  justify-content:center;

  flex:0 0 auto;              /* <-- n’absorbe pas l’espace */
  background:#6c757d;
}

.sb-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(0,0,0,.20);
}

/* Tailles */
.sb-icon{ width:58px; height:58px; }
.sb-support{
  height:58px;
  padding:0 14px;
  gap:10px;
}

/* Lien externe MW : NE DOIT PAS étirer le bouton */
.sb-footer a,
.sb-footer a:link,
.sb-footer a:visited,
.sb-footer a:hover,
.sb-footer a:active,
.sb-footer a.external{
  display:inline-flex;        /* <-- plus de flex plein écran */
  align-items:center;
  justify-content:center;
  gap:10px;

  width:auto !important;      /* <-- empêche l’étirement */
  height:auto !important;

  color:#fff !important;
  text-decoration:none !important;

  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;

  padding:0 !important;
  margin:0 !important;

  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

/* Corrige la "surcouche" */
.sb-btn *{ background:transparent !important; }

/* Supprimer icône externe/copie */
.sb-footer a::after,
.sb-footer a::before,
.sb-footer a.external::after,
.sb-footer a.external::before{
  content:none !important;
  display:none !important;
}

/* Masquage large des icônes injectées (si gadget/skin) */
.sb-footer .oo-ui-iconElement-icon,
.sb-footer .mw-ui-icon,
.sb-footer .mw-icon,
.sb-footer .vector-icon,
.sb-footer .vector-icon-link-external,
.sb-footer .external-icon,
.sb-footer .mw-indicator,
.sb-footer .mw-indicators{
  display:none !important;
}

/* Images */
.sb-icon img{
  width:28px !important;
  height:28px !important;
  object-fit:contain;
  display:block;
}

.sb-support img{
  width:22px !important;
  height:22px !important;
  object-fit:contain;
  display:block;
}

/* Texte soutien */
.sb-support strong,
.sb-support b{
  font-weight:700;
  white-space:nowrap;
}

/* Responsive (inchangé) */
@media (max-width:900px){
  .sb-footer{
    flex-wrap:wrap;
    align-items:flex-start;
  }
  .sb-spacer{ display:none; }
  .sb-buttons{ flex-wrap:wrap; }
}