.share-buttons-toggler + .social-share {
  display: none;
}

.share-buttons-toggler > .button-native {
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
  column-gap: .5em;
}

.social-share {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  align-items: center;
  text-align: center;
  contain: content;
}

.overlay .social-share {
  grid-template-columns: 1fr;
  width: 90vw;
  max-width: 320px;
}

.sidebar .social-share {
  grid-template-columns: repeat(1, 100%);
}

@media (max-width: 568px) {
  .social-share>.button>svg {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

.social-share>.button {
  color: var(--dark);
  flex: 33%;
  flex-grow: 1;
  flex-basis: 0;
  font-size: .9em;
  padding: .75em !important;
  border-radius: var(--border-radius);
  border-style: solid;
  border-width: 1px;
  border-color: var(--light);
}

.overlay .social-share>.button {
  background-color: var(--lightest);
}

.button-twitter .icon {
  fill: #1da1f2 !important;
}

.button-twitter:hover {
  border-color: #1da1f2 !important;
  color: #1da1f2 !important;
}

.button-x .icon {
  fill: var(--darkest, #000) !important;
}

.button-x:hover {
  border-color: var(--darkest, #000) !important;
  color: var(--darkest, #000) !important;
}

.button-facebook .icon {
  fill: #1777f2 !important;
}

.button-facebook:hover {
  border-color: #1777f2 !important;
  color: #1777f2 !important;
}

.button-flipboard .icon {
  fill: #f52828 !important;
}

.button-flipboard:hover {
  border-color: #f52828 !important;
  color: #f52828 !important;
}

.button-pinterest .icon {
  fill: #e60023 !important;
}

.button-pinterest:hover {
  border-color: #e60023 !important;
  color: #e60023 !important;
}

.button-whatsapp .icon {
  fill: #05cd51 !important;
}

.button-whatsapp:hover {
  border-color: #05cd51 !important;
  color: #05cd51 !important;
}

.button-reddit .icon {
  fill: #ff4500 !important;
}

.button-reddit:hover {
  border-color: #ff4500 !important;
  color: #ff4500 !important;
}

.button-linkedin .icon {
  fill: #0a66c2 !important;
}

.button-linkedin:hover {
  border-color: #0a66c2 !important;
  color: #0a66c2 !important;
}

.button-telegram .icon {
  fill: #24a1de !important;
}

.button-telegram:hover {
  border-color: #24a1de !important;
  color: #24a1de !important;
}

.button-threads .icon {
  fill: var(--darkest, #000) !important;
}

.button-threads:hover {
  border-color: var(--darkest, #000) !important;
  color: var(--darkest, #000) !important;
}

.button-ninegag .icon {
  fill: var(--darkest, #000) !important;
}

.button-ninegag:hover {
  border-color: var(--darkest, #000) !important;
  color: var(--darkest, #000) !important;
}

.button-snapchat .icon {
  fill: var(--darkest, #000) !important;
}

.button-snapchat:hover {
  border-color: #fffc00 !important;
  color: var(--darkest, #000) !important;
}

.button-copy-link .icon {
  fill: var(--darkest, #000) !important;
}

.button-copy-link:hover {
  border-color: var(--darkest, #000) !important;
  color: var(--darkest, #000) !important;
}
/* ==================================================================
   Personnalisation VideoDL — partage
   ================================================================== */
.share-buttons-toggler > .button-native,
.social-share > .button {
	border-radius: 0;
	font-family: 'Roboto Condensed', 'Roboto Condensed-fallback', sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.05em;
	transition: transform 0.18s ease, filter 0.18s ease, background-color 0.18s ease;
}

.share-buttons-toggler > .button-native {
	/* Angle coupé en dégradé : clip-path rognerait l'ombre verte. Le dégradé part du
	   bord (border-box) : GeneratePress pose une bordure transparente de 1 px, sous
	   laquelle un dégradé calé sur le padding se répéterait en filets encre. */
	background: linear-gradient(135deg, transparent 7px, var(--contrast) 7px) border-box;
	color: var(--base-3);
	filter: drop-shadow(var(--lift, 4px) var(--lift, 4px) 0 var(--vert));
}

.share-buttons-toggler > .button-native:is(:hover, :focus) {
	transform: translate(var(--lift, 4px), var(--lift, 4px));
	filter: drop-shadow(0 0 0 var(--vert));
}

.social-share > .button {
	clip-path: polygon(var(--cut, 10px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut, 10px));
	background-color: var(--base);
	color: var(--contrast);
	border: 2px solid var(--contrast);
}

.social-share > .button:is(:hover, :focus) {
	background-color: var(--vert);
	color: var(--contrast);
	transform: translateY(-2px) rotate(-2deg);
}