/* DYW Réseaux sociaux — affichage du titre, centrage et marque Steam. */
.dyw-social-links-with-title {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    text-align: center;
}
.dyw-social-links-with-title > .dyw-social-links-title {
    display: block;
    margin: 0 0 20px;
    padding: 0;
    font-size: clamp(18px, 1.55vw, 22px);
    font-weight: 600;
    line-height: 1.4;
    color: inherit;
    text-align: center;
    overflow-wrap: anywhere;
}
.dyw-social-links-with-title > ul.wp-block-social-links,
.dyw-social-links-with-title > .wp-block-social-links {
    display: flex;
    align-items: center;
    justify-content: center !important;
    flex-wrap: wrap;
    margin: 0 auto;
    padding-left: 0;
    width: 100%;
}
/* Marque Steam : fond noir, pictogramme blanc, comme X.
   Ne pas imposer la taille des <li> : WordPress gère cela pour toutes les marques. */
.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-steam {
    background-color: #000000 !important;
    color: #ffffff !important;
}
.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-steam .wp-block-social-link-anchor,
.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-steam .wp-block-social-link-anchor:visited {
    color: #ffffff !important;
}
.wp-block-social-links .wp-social-link-steam svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}
/* Amani colore tous les liens des articles en bleu/lavande en mode sombre.
   Les pictogrammes du bloc Social Icons héritent de cette couleur et perdent leur blanc.
   Restaurer le blanc des logos sur fond de marque (X, Steam, Twitch, Bluesky, Kick, etc.)
   en ciblant exclusivement le bloc Social Icons, y compris lors du survol.
   Laisser intacts les fonds des boutons et les styles « Logos seulement ». */
html.amani-dark .theme-body .wp-block-social-links:not(.is-style-logos-only) .wp-social-link .wp-block-social-link-anchor,
html.amani-dark .theme-body .content .wp-block-social-links:not(.is-style-logos-only) .wp-social-link .wp-block-social-link-anchor,
html.amani-dark .theme-body .wp-block-social-links:not(.is-style-logos-only) .wp-social-link .wp-block-social-link-anchor:hover,
html.amani-dark .theme-body .content .wp-block-social-links:not(.is-style-logos-only) .wp-social-link .wp-block-social-link-anchor:hover,
html.amani-dark .theme-body .wp-block-social-links:not(.is-style-logos-only) .wp-social-link .wp-block-social-link-anchor:focus-visible,
html.amani-dark .theme-body .content .wp-block-social-links:not(.is-style-logos-only) .wp-social-link .wp-block-social-link-anchor:focus-visible {
    color: #ffffff !important;
}
/* WordPress dessine ses logos SVG à l'aide de currentColor : forcer leur
   héritage, même si le thème affecte directement svg ou les liens. */
html.amani-dark .theme-body .wp-block-social-links:not(.is-style-logos-only) .wp-social-link .wp-block-social-link-anchor svg,
html.amani-dark .theme-body .content .wp-block-social-links:not(.is-style-logos-only) .wp-social-link .wp-block-social-link-anchor svg {
    color: #ffffff !important;
    fill: currentColor !important;
}
/* En style 'Logos seulement', pas de cercle imposé. */
.wp-block-social-links.is-style-logos-only .wp-social-link-steam { color: #000000; }
/* Edition Gutenberg et Personnaliser > Widgets : titre toujours accessible. */
.dyw-social-links-editor-title-field {
    padding: 6px 2px 10px;
    width: 100%;
    box-sizing: border-box;
}
.dyw-social-links-editor-title-field .components-base-control { margin-bottom: 0; }
.dyw-social-links-editor-title-field .components-base-control__label { font-weight: 600; }
/* Dans la zone d'édition, aligner également les icônes centrées par défaut. */
.editor-styles-wrapper .wp-block-social-links:not(.is-content-justification-left):not(.is-content-justification-right) {
    justify-content: center;
}


/* V3.2 : infobulle sur chaque icône au survol et au focus clavier.
   La teinte suit les accents de la palette Amani, sans modifier les logos.
   Le mélange avec une teinte foncée garantit la lisibilité du texte blanc. */
.dyw-social-links-with-title {
    --dyw-social-tooltip-bg: #594957;
    --dyw-social-tooltip-bg: color-mix(in srgb, var(--amani-light-accent-1, #dc8799) 50%, #26324a);
}
html.amani-dark .dyw-social-links-with-title {
    --dyw-social-tooltip-bg: #4a397d;
    --dyw-social-tooltip-bg: color-mix(in srgb, var(--amani-dark-accent-1, #9678de) 55%, #17142d);
}
/* Espace réservé à la bulle pour qu'elle n'empiète pas sur le titre. */
.dyw-social-links-with-title > ul.wp-block-social-links,
.dyw-social-links-with-title > .wp-block-social-links {
    padding-top: 28px !important;
    overflow: visible !important;
}
.dyw-social-links-with-title .wp-block-social-links .wp-social-link {
    position: relative;
    overflow: visible !important;
}
.dyw-social-links-with-title .wp-block-social-links .wp-social-link:is(:hover, :focus-within) {
    z-index: 10;
}
.dyw-social-links-with-title .wp-block-social-links .wp-block-social-link-anchor[data-dyw-social-name] {
    position: relative;
    overflow: visible !important;
    /* Don't let Amani's link underline create a line under icons. */
    text-decoration: none !important;
    border-bottom: 0 !important;
}
.dyw-social-links-with-title .wp-block-social-links .wp-block-social-link-anchor[data-dyw-social-name]::after,
.dyw-social-links-with-title .wp-block-social-links .wp-block-social-link-anchor[data-dyw-social-name]::before {
    position: absolute;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
    z-index: 25;
}
.dyw-social-links-with-title .wp-block-social-links .wp-block-social-link-anchor[data-dyw-social-name]::after {
    content: attr(data-dyw-social-name);
    bottom: calc(100% + 10px);
    transform: translate(-50%, 4px);
    background: var(--dyw-social-tooltip-bg) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
    white-space: nowrap;
    padding: 6px 10px;
    border: 0 !important;
    border-radius: 7px;
    box-shadow: 0 3px 11px rgb(0 0 0 / 18%);
    max-width: min(180px, calc(100vw - 24px));
}
.dyw-social-links-with-title .wp-block-social-links .wp-block-social-link-anchor[data-dyw-social-name]::before {
    content: '';
    bottom: calc(100% + 4px);
    transform: translate(-50%, 4px);
    border: 6px solid transparent;
    border-top-color: var(--dyw-social-tooltip-bg);
    border-bottom: 0;
}
.dyw-social-links-with-title .wp-block-social-links .wp-block-social-link-anchor[data-dyw-social-name]:is(:hover, :focus-visible)::after,
.dyw-social-links-with-title .wp-block-social-links .wp-block-social-link-anchor[data-dyw-social-name]:is(:hover, :focus-visible)::before {
    opacity: 1;
    transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
    .dyw-social-links-with-title .wp-block-social-links .wp-block-social-link-anchor[data-dyw-social-name]::after,
    .dyw-social-links-with-title .wp-block-social-links .wp-block-social-link-anchor[data-dyw-social-name]::before {
        transition: none;
    }
}