/* Version: 27-09-2026-17-00 */
/* 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;
}

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

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

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

#portfolio_page footer #footer-social .social-medias,
#theme-visualiser #portfolio_page footer #footer-social .social-medias {
    gap: 10px;
}

#portfolio_page footer #footer-social .social-medias li,
#theme-visualiser #portfolio_page footer #footer-social .social-medias li {
    margin: 0;
}

.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: var(--portfolios-social-padding, 8px);
    background-color: var(--portfolios-social-background-color, var(--portfolios-theme-bg-main, #272727));
    background-image: var(--portfolios-social-background-gradient, none);
    border: var(--portfolios-social-border-width, 0px) var(--portfolios-social-border-style, solid) var(--portfolios-social-border-color, var(--portfolios-theme-bg-alt, #222));
    border-radius: var(--portfolios-social-border-radius, 0px);
    color: var(--portfolios-social-icon-color, var(--portfolios-theme-fill, #0f0f0f));
    box-shadow: var(--portfolios-social-box-shadow, none);
    transition: box-shadow 0.2s, border 0.2s, filter 0.18s, transform 0.18s;
    filter: brightness(100%);
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
}

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

.social-medias svg {
  width: var(--portfolios-social-icon-size, 25px);
  height: var(--portfolios-social-icon-size, 25px);
}

.social-medias p {
  display: none;
}

/* Nom de la plateforme à gauche de l'icône (arktefakt_render_socials, option show_label) :
   nom et logo centrés verticalement sur la même ligne. */
.social-medias--labeled a,
.social-medias--labeled button {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5em;
  padding-inline: var(--portfolios-social-label-padding-x, 12px);
}

.social-medias--labeled svg {
  display: block;
  flex-shrink: 0;
  margin: 0;
}

.social-medias__label {
  display: block;
  margin: 0;
  font-size: var(--portfolios-social-label-size, 0.9em);
  line-height: 1;
  white-space: nowrap;
  color: inherit;
}

/* Même couleur que le logo (fill ci-dessous) : les couleurs de texte/lien du thème
   (footer, nav…) ne doivent pas s'appliquer au nom de la plateforme. */
#portfolio_page .social-medias__label,
#portfolio_page .social-medias a:hover .social-medias__label,
#portfolio_page .social-medias button:hover .social-medias__label {
  color: var(--portfolios-social-icon-color, #0f0f0f) !important;
}

/* Plateforme sans logo (nom seul) : même hauteur que les boutons avec icône. */
.social-medias__label:only-child {
  line-height: var(--portfolios-social-icon-size, 25px);
}

#portfolio_page .social-medias svg,
#profil-modal-root .social-medias svg {
    fill: var(--portfolios-social-icon-color, #0f0f0f);
}

#portfolio_page .social-medias svg path[stroke-width],
#profil-modal-root .social-medias svg path[stroke-width] {
    fill: none;
    stroke: var(--portfolios-social-icon-color, #0f0f0f);
}

#portfolio_page .social-medias a:hover,
#portfolio_page .social-medias button:hover,
#profil-modal-root .social-medias a:hover,
#profil-modal-root .social-medias button:hover {
    border-color: var(--portfolios-social-border-color, var(--portfolios-theme-bg-alt, #222));
    color: var(--portfolios-social-icon-color, var(--portfolios-theme-fill, #0f0f0f));
    box-shadow: var(--portfolios-social-box-shadow, none);
    transform: var(--portfolios-social-hover-transform, none);
    filter: var(--portfolios-social-hover-filter, brightness(100%)) !important;
}

#portfolio_page .social-medias a:hover svg,
#portfolio_page .social-medias button:hover svg,
#profil-modal-root .social-medias a:hover svg,
#profil-modal-root .social-medias button:hover svg {
    fill: var(--portfolios-social-icon-color, #0f0f0f);
}

#portfolio_page .social-medias a:hover svg path[stroke-width],
#portfolio_page .social-medias button:hover svg path[stroke-width],
#profil-modal-root .social-medias a:hover svg path[stroke-width],
#profil-modal-root .social-medias button:hover svg path[stroke-width] {
    fill: none;
    stroke: var(--portfolios-social-icon-color, #0f0f0f);
}

#portfolio_page .social-medias a.gradient,
#portfolio_page .social-medias button.gradient,
#profil-modal-root .social-medias a.gradient,
#profil-modal-root .social-medias button.gradient {
    background-color: var(--portfolios-social-background-color, var(--portfolios-theme-bg-main, #272727));
    background-image: var(--portfolios-social-background-gradient, none);
}

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

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

#portfolio_page .social-medias a:active,
#portfolio_page .social-medias button:active,
#profil-modal-root .social-medias a:active,
#profil-modal-root .social-medias button:active {
    transform: var(--portfolios-social-click-transform, none) !important;
    filter: var(--portfolios-social-hover-filter, brightness(100%)) !important;
}

#portfolio_page .social-medias a:disabled,
#portfolio_page .social-medias button:disabled,
#profil-modal-root .social-medias a:disabled,
#profil-modal-root .social-medias 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;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#portfolio_page #hero #home-about .social-medias,
#theme-visualiser #portfolio_page #hero #home-about .social-medias,
#portfolio_page section.home-feature-vedette #feature-about .social-medias {
    align-self: stretch;
}

#portfolio_page #hero .social-medias svg,
#theme-visualiser #portfolio_page #hero .social-medias svg {
    fill: var(--portfolios-social-icon-color, #0f0f0f);
}

#portfolio_page #hero .social-medias svg path[stroke-width],
#theme-visualiser #portfolio_page #hero .social-medias svg path[stroke-width] {
    fill: none;
    stroke: var(--portfolios-social-icon-color, #0f0f0f);
}

#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-social-border-color, var(--portfolios-theme-bg-alt, #222));
    color: var(--portfolios-social-icon-color, var(--portfolios-theme-fill, #0f0f0f));
    box-shadow: var(--portfolios-social-box-shadow, none);
    transform: var(--portfolios-social-hover-transform, none);
    filter: var(--portfolios-social-hover-filter, brightness(100%)) !important;
}

#portfolio_page #hero .social-medias a:active,
#portfolio_page #hero .social-medias button:active,
#theme-visualiser #portfolio_page #hero .social-medias a:active,
#theme-visualiser #portfolio_page #hero .social-medias button:active {
    transform: var(--portfolios-social-click-transform, none) !important;
    filter: var(--portfolios-social-hover-filter, brightness(100%)) !important;
}

#portfolio_page #hero .social-medias a:hover svg,
#portfolio_page #hero .social-medias button:hover svg,
#theme-visualiser #portfolio_page #hero .social-medias a:hover svg,
#theme-visualiser #portfolio_page #hero .social-medias button:hover svg {
    fill: var(--portfolios-social-icon-color, #0f0f0f);
}

#portfolio_page #hero .social-medias a:hover svg path[stroke-width],
#portfolio_page #hero .social-medias button:hover svg path[stroke-width],
#theme-visualiser #portfolio_page #hero .social-medias a:hover svg path[stroke-width],
#theme-visualiser #portfolio_page #hero .social-medias button:hover svg path[stroke-width] {
    fill: none;
    stroke: var(--portfolios-social-icon-color, #0f0f0f);
}

#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;
}

/* Team modal (.profil-infos) : même rendu que footer / vedettes */
#profil-modal-root .profil-infos .social-medias,
.profil-window .profil-infos .social-medias {
    margin-top: 1.25rem;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    justify-content: center;
    gap: 10px;
}

#profil-modal-root .profil-infos .social-medias li,
.profil-window .profil-infos .social-medias li {
    margin: 0;
}

#profil-modal-root .profil-infos .social-medias svg,
.profil-window .profil-infos .social-medias svg {
    fill: var(--portfolios-social-icon-color, #0f0f0f);
}

#profil-modal-root .profil-infos .social-medias svg path[stroke-width],
.profil-window .profil-infos .social-medias svg path[stroke-width] {
    fill: none;
    stroke: var(--portfolios-social-icon-color, #0f0f0f);
}

#profil-modal-root .profil-infos .social-medias a:hover,
#profil-modal-root .profil-infos .social-medias button:hover,
.profil-window .profil-infos .social-medias a:hover,
.profil-window .profil-infos .social-medias button:hover {
    border-color: var(--portfolios-social-border-color, var(--portfolios-theme-bg-alt, #222));
    color: var(--portfolios-social-icon-color, var(--portfolios-theme-fill, #0f0f0f));
    box-shadow: var(--portfolios-social-box-shadow, none);
    transform: var(--portfolios-social-hover-transform, none);
    filter: var(--portfolios-social-hover-filter, brightness(100%)) !important;
}

#profil-modal-root .profil-infos .social-medias a:active,
#profil-modal-root .profil-infos .social-medias button:active,
.profil-window .profil-infos .social-medias a:active,
.profil-window .profil-infos .social-medias button:active {
    transform: var(--portfolios-social-click-transform, none) !important;
    filter: var(--portfolios-social-hover-filter, brightness(100%)) !important;
}

#profil-modal-root .profil-infos .social-medias a:hover svg,
#profil-modal-root .profil-infos .social-medias button:hover svg,
.profil-window .profil-infos .social-medias a:hover svg,
.profil-window .profil-infos .social-medias button:hover svg {
    fill: var(--portfolios-social-icon-color, #0f0f0f);
}

#profil-modal-root .profil-infos .social-medias a:hover svg path[stroke-width],
#profil-modal-root .profil-infos .social-medias button:hover svg path[stroke-width],
.profil-window .profil-infos .social-medias a:hover svg path[stroke-width],
.profil-window .profil-infos .social-medias button:hover svg path[stroke-width] {
    fill: none;
    stroke: var(--portfolios-social-icon-color, #0f0f0f);
}