/* SOCIAL-MEDIAS */

.social-medias {
  display: flex;
  flex-wrap: wrap;
}

.align-left .social-medias {
  justify-content: flex-start;
}

.align-left .social-medias li, .text-align-left .social-medias li, .about-align-left .social-medias li, #blog-article .social-medias li {
  margin: 0px 10px 10px 0px;
}

.align-center .social-medias {
  justify-content: center;
}

.align-center .social-medias li, .text-align-center .social-medias li, .about-align-center .social-medias li {
  margin: 5px;
}

.align-right .social-medias {
  justify-content: flex-end;
}

.align-right .social-medias li, .text-align-right .social-medias li, .about-align-right .social-medias li {
  margin: 10px 10px 0px 0px;
}

/* À propos : même logique flex que le footer (footer/main.css + nav-left/center/right) */
.about-align-left .social-medias {
  justify-content: flex-start;
  text-align: left;
}

.about-align-center .social-medias {
  justify-content: center;
  text-align: center;
}

.about-align-right .social-medias {
  justify-content: flex-end;
  text-align: right;
}

/* Accueil (#title-home, #home-about) : classes title-align-* au lieu de align-* */
.title-align-left .social-medias {
  justify-content: flex-start;
  text-align: left;
}

.title-align-left .social-medias li {
  margin: 0px 10px 10px 0px;
}

.title-align-center .social-medias {
  justify-content: center;
  text-align: center;
}

.title-align-center .social-medias li {
  margin: 5px;
}

.title-align-right .social-medias {
  justify-content: flex-end;
  text-align: right;
}

.title-align-right .social-medias li {
  margin: 10px 10px 0px 0px;
}

.social-medias a,
.social-medias button {
    display: flex!important;
    flex-direction: column!important;
    justify-content: center!important;
    align-items: center!important;
    transition: 0.2s linear;
    padding: 8px;
    background: var(--portfolios-theme-bg-main, #272727) !important;
    border: var(--portfolios-button-border-width, 0px) var(--portfolios-button-border-type, solid) var(--portfolios-theme-bg-alt, #222);
    border-radius: var(--portfolios-button-radius, 0px);
    box-shadow: var(--portfolios-button-box-shadow, none);
    transition: box-shadow 0.2s, border 0.2s, filter 0.18s, transform 0.18s;
    outline: var(--portfolios-button-outline-width, 0px) var(--portfolios-button-outline-style, solid) var(--portfolios-button-outline-color, transparent);
    filter: brightness(100%);
    display: inline-flex;
    align-items: center;
    gap: var(--portfolios-button-gap, 0.5em);
    cursor: pointer;
}

.social-medias button {
    margin: 0;
    font: inherit;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.social-medias svg {
  width: 25px;
  height: 25px;
}

.social-medias p {
  display: none;
}

#portfolio_page .social-medias svg {
    fill: var(--portfolios-theme-fill-light, #e4e4e4);
}

#portfolio_page .social-medias a:hover,
#portfolio_page .social-medias button:hover {
    border-color: var(--portfolios-theme-fill-light, #e4e4e4);
}

#portfolio_page .social-medias a.gradient,
#portfolio_page .social-medias button.gradient {
    background: var(--portfolios-button-gradient);
}

#portfolio_page .social-medias a.shadow,
#portfolio_page .social-medias button.shadow {
    box-shadow: 0px 2px 10px 0px var(--portfolios-button-border-color, #222);
}

#portfolio_page .social-medias a.glow,
#portfolio_page .social-medias button.glow {
    box-shadow: var(--portfolios-button-glow, 0 0 8px 2px var(--portfolios-button-border-color, #ff0));
}

#portfolio_page .social-medias a:hover,
#portfolio_page .social-medias button:hover {
    box-shadow: var(--portfolios-button-hover-box-shadow, var(--portfolios-button-box-shadow));
    transform: var(--portfolios-button-hover-transform, none);
    filter: var(--portfolios-button-hover-filter, brightness(100%)) !important;
}

#portfolio_page .social-medias a:active,
#portfolio_page .social-medias button:active {
    box-shadow: var(--portfolios-button-click-effect, none);
    transform: var(--portfolios-button-click-transform, scale(0.95));
    filter: var(--portfolios-button-hover-filter, brightness(100%)) !important;
}

#portfolio_page .social-medias a:disabled,
#portfolio_page .social-medias button:disabled {
    opacity: var(--portfolios-button-disabled-opacity, 0.5);
    cursor: not-allowed;
}

/* #hero (accueil, à propos, fiches…) : aligner sur le même rendu que #footer-social */
#portfolio_page #hero .social-medias {
    margin-top: 1.25rem;
}

#portfolio_page #hero .social-medias svg,
#theme-visualiser #portfolio_page #hero .social-medias svg {
    fill: var(--portfolios-theme-fill-light, #e4e4e4);
}

#portfolio_page #hero .social-medias a:hover,
#portfolio_page #hero .social-medias button:hover,
#theme-visualiser #portfolio_page #hero .social-medias a:hover,
#theme-visualiser #portfolio_page #hero .social-medias button:hover {
    border-color: var(--portfolios-theme-fill-light, #e4e4e4);
    box-shadow: var(--portfolios-button-hover-box-shadow, var(--portfolios-button-box-shadow));
    transform: var(--portfolios-button-hover-transform, none);
    filter: var(--portfolios-button-hover-filter, brightness(100%)) !important;
}

#theme-visualiser #portfolio_page .title-align-left .social-medias,
#theme-visualiser #portfolio_page .about-align-left .social-medias {
    justify-content: flex-start;
    text-align: left;
}

#theme-visualiser #portfolio_page .title-align-center .social-medias,
#theme-visualiser #portfolio_page .about-align-center .social-medias {
    justify-content: center;
    text-align: center;
}

#theme-visualiser #portfolio_page .title-align-right .social-medias,
#theme-visualiser #portfolio_page .about-align-right .social-medias {
    justify-content: flex-end;
    text-align: right;
}