/*
 * Thalaxo — Boutons de partage social (B2B cloud / FinOps)
 * Compagnon de thalaxo-share-buttons.php
 * Réutilise les tokens --thalaxo-* du design system Customizer.
 *
 * Anti-conflit : le CSS additionnel Thalaxo force tous les `button` en orange
 * (padding large, box-shadow, width 100% mobile). On réinitialise ici.
 */

.entry-content .thalaxo-share-block button.thalaxo-share-btn,
.inside-article .thalaxo-share-block button.thalaxo-share-btn,
html body .thalaxo-share-block .thalaxo-share-btn {
    background-color: #1E1E1E !important;
    background: #1E1E1E !important;
    color: var(--thalaxo-text-primary, #FFFFFF) !important;
    border: 1px solid var(--thalaxo-border, #333333) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    padding: 0 !important;
    font-weight: 400 !important;
    font-size: inherit !important;
    line-height: 1 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

.entry-content .thalaxo-share-block a.thalaxo-share-btn,
.inside-article .thalaxo-share-block a.thalaxo-share-btn,
html body .thalaxo-share-block a.thalaxo-share-btn {
    background-color: #1E1E1E !important;
    background: #1E1E1E !important;
    color: var(--thalaxo-text-primary, #FFFFFF) !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.thalaxo-share-block {
    margin: 1.5rem 0;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: #202020;
    border: 1px solid var(--thalaxo-border, #333333);
}

.thalaxo-share-top {
    margin-top: 0;
    margin-bottom: 1.75rem;
}

.thalaxo-share-bottom {
    margin-top: 2.5rem;
    margin-bottom: 0;
}

.thalaxo-share-intro {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--thalaxo-text-primary, #ffffff);
}

.thalaxo-share-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.6rem;
}

.thalaxo-share-buttons,
.thalaxo-share-more {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.thalaxo-share-more-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
}

.thalaxo-share-more {
    display: none;
    padding: 0.45rem;
    border-radius: 10px;
    background: #1a1a1a;
    border: 1px solid var(--thalaxo-border, #333333);
}

.thalaxo-share-more.is-open {
    display: flex;
}

.thalaxo-share-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: #1E1E1E;
    color: var(--thalaxo-text-primary, #FFFFFF);
    border: 1px solid var(--thalaxo-border, #333333);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.thalaxo-share-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--thalaxo-orange, #FFA500);
    color: #1a1a1a;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.thalaxo-share-btn svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.thalaxo-share-native-hidden {
    display: none !important;
}

.thalaxo-share-native-visible {
    display: inline-flex !important;
}

.thalaxo-share-btn:hover,
.thalaxo-share-btn:focus-visible {
    transform: translateY(-1px);
    border-color: transparent;
}

.thalaxo-share-btn--linkedin:hover,
.thalaxo-share-btn--linkedin:focus-visible {
    background: #0a66c2 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.thalaxo-share-btn--email:hover,
.thalaxo-share-btn--email:focus-visible {
    background: var(--thalaxo-orange, #FFA500) !important;
    color: #1a1a1a !important;
    box-shadow: none !important;
}

.thalaxo-share-btn--copy_link:hover,
.thalaxo-share-btn--copy_link:focus-visible,
.thalaxo-share-btn--copy_link.is-copied {
    background: var(--thalaxo-orange, #FFA500) !important;
    color: #1a1a1a !important;
    box-shadow: none !important;
}

.thalaxo-share-btn--native:hover,
.thalaxo-share-btn--native:focus-visible {
    background: var(--thalaxo-orange, #FFA500) !important;
    color: #1a1a1a !important;
    box-shadow: none !important;
}

.thalaxo-share-btn--more:hover,
.thalaxo-share-btn--more:focus-visible,
.thalaxo-share-btn--more.is-open {
    background: #333333 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.thalaxo-share-btn--x:hover,
.thalaxo-share-btn--x:focus-visible {
    background: #000000 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.thalaxo-share-btn--reddit:hover,
.thalaxo-share-btn--reddit:focus-visible {
    background: #ff4500 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.thalaxo-share-btn--whatsapp:hover,
.thalaxo-share-btn--whatsapp:focus-visible {
    background: #25d366 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.thalaxo-share-toast {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--thalaxo-orange, #FFA500);
}

.thalaxo-share-toast:not([hidden]) {
    animation: thalaxo-share-fade 2s ease forwards;
}

@keyframes thalaxo-share-fade {
    0% { opacity: 0; }
    10% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

@media (max-width: 480px) {
    .thalaxo-share-block {
        padding: 0.6rem 0.75rem;
    }

    .thalaxo-share-buttons,
    .thalaxo-share-more {
        gap: 0.5rem;
    }

    .entry-content .thalaxo-share-block button.thalaxo-share-btn,
    .inside-article .thalaxo-share-block button.thalaxo-share-btn,
    html body .thalaxo-share-block .thalaxo-share-btn,
    .thalaxo-share-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
    }

    .thalaxo-share-btn svg {
        width: 15px;
        height: 15px;
    }
}