Modèle:SocialButton/styles.css

/* =========================================================
   SOCIALBUTTON — STYLES COMPLETS
   ========================================================= */


/* ===============================
   BANDEAU GLOBAL
   =============================== */

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

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

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

  background:transparent;          /* pas de fond gris */
  box-shadow:none;
}


/* ===============================
   TITRES
   =============================== */

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


/* espaceur pour pousser la partie droite */
.sb-spacer{
  flex:1 1 auto;
}


/* ===============================
   GROUPES DE BOUTONS
   =============================== */

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


/* ===============================
   WRAPPER BOUTON
   =============================== */

.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:flex;
  align-items:center;
  justify-content:center;

  background:#6c757d;              /* fallback si pas de classe */
}

.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 GÉNÉRÉ PAR MEDIAWIKI
   (RESET COMPLET → évite surcouches)
   =============================== */

.sb-footer a,
.sb-footer a:link,
.sb-footer a:visited,
.sb-footer a:hover,
.sb-footer a:active,
.sb-footer a.external{

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  width:100%;
  height:100%;

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

  /* reset ultra 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;
}


/* Empêche toute peinture interne (corrige la "surcouche") */
.sb-btn *{
  background:transparent !important;
}


/* ===============================
   SUPPRESSION ICÔNE EXTERNE / COPIER
   =============================== */

.sb-footer a::after,
.sb-footer a::before,
.sb-footer a.external::after,
.sb-footer a.external::before{
  content:none !important;
  display:none !important;
}

.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 BOUTONS SOUTIEN
   =============================== */

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


/* ===============================
   RESPONSIVE
   =============================== */

@media (max-width:900px){

  .sb-footer{
    flex-wrap:wrap;
    align-items:flex-start;
  }

  .sb-spacer{
    display:none;
  }

  .sb-buttons{
    flex-wrap:wrap;
  }
}