/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 12-10-2026-underline-width */
/* SOCIAL-MEDIAS */

.social-medias {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
}

/* Espacement par gap (comme #footer-social) : des marges sur les li décalaient
   le bord aligné (ex. 10px à droite du dernier bouton en alignement droite). */
.social-medias li {
  margin: 0;
}

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

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

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

/* À 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-center .social-medias {
  justify-content: center;
  text-align: center;
}

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

/* Réseaux du pied de page : alignement, écart et marges dans themes/basic/footer.css (zone). */

.social-medias a,
.social-medias button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    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);
    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%);
    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;
  align-items: center;
  justify-content: center;
  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);
}

/* Nom masqué par le thème (social_show_label = off) : rendu dans le HTML sans la classe
   social-medias--labeled, pour que l'éditeur puisse le rebasculer en direct. */
.social-medias:not(.social-medias--labeled) .social-medias__label {
  display: none;
}

/* Icône générique d'une plateforme sans logo : visible seulement quand le nom est masqué. */
.social-medias__fallback-icon {
  display: contents;
}

.social-medias--labeled .social-medias__fallback-icon {
  display: none;
}

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

/* Encre des liens hors #portfolio_page (fenêtre de profil rattachée à body) ; dans la page, l'encre du texte. */
#profil-modal-root .social-medias :is(a, button) {
    color: var(--portfolios-social-icon-color, var(--portfolios-theme-fill, #0f0f0f));
}

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

#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);
    filter: var(--portfolios-social-hover-filter, brightness(100%));
}

#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,
#portfolio_page section.home-feature-vedette #feature-about .social-medias {
    align-self: stretch;
}

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

#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 {
    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%));
}

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

#portfolio_page #hero .social-medias a:hover svg,
#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] {
    fill: none;
    stroke: var(--portfolios-social-icon-color, #0f0f0f);
}

/* 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%));
}

#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);
    filter: var(--portfolios-social-hover-filter, brightness(100%));
}

#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);
}
/* Thème des réseaux sociaux (social_theme, mêmes thèmes que les boutons et les liens du header).
   Les --portfolios-social-th-* (render_css_vars.php) partent des réglages précis ; on les
   redistribue sur les variables lues ci-dessus, au repos puis au survol / clic. */
.social-medias a,
.social-medias button {
    --portfolios-social-background-color: var(--portfolios-social-th-bg, var(--portfolios-theme-bg-main, #272727));
    --portfolios-social-background-gradient: var(--portfolios-social-th-image, none);
    --portfolios-social-icon-color: var(--portfolios-social-th-color, var(--portfolios-theme-fill, #0f0f0f));
    --portfolios-social-border-width: var(--portfolios-social-th-border-width, 0px);
    --portfolios-social-border-style: var(--portfolios-social-th-border-style, solid);
    text-decoration-line: var(--portfolios-social-th-deco, none);
    text-decoration-thickness: var(--portfolios-social-th-underline-width, 2px);
    text-underline-offset: 0.3em;
}

/* Souligné / Texte seul : pas de marge latérale (le nom affiché garde la sienne). */
.social-medias:not(.social-medias--labeled) a,
.social-medias:not(.social-medias--labeled) button {
    padding-inline: var(--portfolios-social-th-padding-x, var(--portfolios-social-padding, 8px));
}

.social-medias a:hover,
.social-medias button:hover,
.social-medias a:focus-visible,
.social-medias button:focus-visible {
    --portfolios-social-background-color: var(--portfolios-social-th-hover-bg, var(--portfolios-theme-bg-main, #272727));
    --portfolios-social-background-gradient: none;
    --portfolios-social-icon-color: var(--portfolios-social-th-hover-color, var(--portfolios-theme-fill, #0f0f0f));
}

.social-medias a:active,
.social-medias button:active {
    --portfolios-social-background-color: var(--portfolios-social-th-click-bg, var(--portfolios-theme-bg-main, #272727));
    --portfolios-social-icon-color: var(--portfolios-social-th-click-color, var(--portfolios-theme-fill, #0f0f0f));
}
}