/* ============================================================
   SocialBouton – CSS front-end
   Compatible : tous les thèmes WordPress modernes.
   Les variables CSS sont injectées via wp_add_inline_style.
   ============================================================ */

/* ── Variables (valeurs par défaut – écrasées dynamiquement) ── */
:root {
    --ss-size:         44px;
    --ss-radius:       8px;
    --ss-bg:           #ffffff;
    --ss-icon:         #444444;
    --ss-shadow:       0 2px 12px rgba(0,0,0,.12);
    --ss-shadow-hover: 0 4px 20px rgba(0,0,0,.22);
    --ss-gap:          6px;
    --ss-offset-desk:  40px;
    --ss-offset-mob:   0px;
    --ss-z:            9999;
    --ss-transition:   0.22s cubic-bezier(.4,0,.2,1);
}

/* ── Conteneur principal – Desktop (fixe à droite/gauche) ─── */
#social-bouton {
    position:    fixed;
    top:         50%;
    transform:   translateY(-50%) translateY(calc(var(--ss-offset-desk) * -1));
    z-index:     var(--ss-z);
    pointer-events: none;   /* ne bloque pas les clics hors icônes */
}

/* Position gauche ou droite */
:root { --ss-pos: right; }

#social-bouton {
    right: 0;
}

/* Variante gauche (injectée si l'admin a choisi "left") */
/* La valeur de --ss-pos est injectée par PHP.
   On utilise une astuce CSS pour commuter droite/gauche. */
@supports (right: env(safe-area-inset-right)) {
    #social-bouton {
        right: env(safe-area-inset-right, 0);
    }
}

/* ── Liste ────────────────────────────────────────────────── */
.social-bouton__list {
    list-style:     none;
    margin:         0;
    padding:        0;
    display:        flex;
    flex-direction: column;
    gap:            var(--ss-gap);
    pointer-events: auto;
}

/* ── Item ─────────────────────────────────────────────────── */
.social-bouton__item {
    position: relative;
}

/* ── Lien / bouton ────────────────────────────────────────── */
.social-bouton__link {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           var(--ss-size);
    height:          var(--ss-size);
    background:      var(--ss-bg);
    border-radius:   var(--ss-radius);
    box-shadow:      var(--ss-shadow);
    text-decoration: none;
    transition:      transform var(--ss-transition),
                     box-shadow var(--ss-transition),
                     background var(--ss-transition);
    outline-offset:  3px;
}

.social-bouton__link:hover,
.social-bouton__link:focus-visible {
    transform:  translateX(-4px) scale(1.08);
    box-shadow: var(--ss-shadow-hover);
}

/* Variante position gauche : slide depuis la gauche */
[data-ss-pos="left"] .social-bouton__link:hover,
[data-ss-pos="left"] .social-bouton__link:focus-visible {
    transform:  translateX(4px) scale(1.08);
}

/* ── Icône SVG ────────────────────────────────────────────── */
.social-bouton__icon {
    width:      calc(var(--ss-size) * .48);
    height:     calc(var(--ss-size) * .48);
    fill:       var(--ss-icon);
    flex-shrink: 0;
    transition: fill var(--ss-transition);
}

/* Couleurs de marque (activées si --brand-color est défini sur le li) */
.social-bouton__item[style*="--brand-color"] .social-bouton__icon {
    fill: var(--brand-color, var(--ss-icon));
}

.social-bouton__item[style*="--brand-color"] .social-bouton__link:hover .social-bouton__icon,
.social-bouton__item[style*="--brand-color"] .social-bouton__link:focus-visible .social-bouton__icon {
    fill: var(--brand-color, var(--ss-icon));
}

/* ── Tooltip ──────────────────────────────────────────────── */
.social-bouton__link[data-tooltip]::after {
    content:          attr(data-tooltip);
    position:         absolute;
    right:            calc(100% + 10px);
    top:              50%;
    transform:        translateY(-50%) scale(.92);
    background:       #1a1a2e;
    color:            #fff;
    font-family:      system-ui, -apple-system, sans-serif;
    font-size:        12px;
    font-weight:      500;
    line-height:      1;
    padding:          6px 10px;
    border-radius:    5px;
    white-space:      nowrap;
    pointer-events:   none;
    opacity:          0;
    transition:       opacity var(--ss-transition), transform var(--ss-transition);
    z-index:          1;
}

.social-bouton__link[data-tooltip]::before {
    content:        '';
    position:       absolute;
    right:          calc(100% + 4px);
    top:            50%;
    transform:      translateY(-50%);
    border:         5px solid transparent;
    border-left-color: #1a1a2e;
    pointer-events: none;
    opacity:        0;
    transition:     opacity var(--ss-transition);
}

.social-bouton__link[data-tooltip]:hover::after,
.social-bouton__link[data-tooltip]:focus-visible::after {
    opacity:   1;
    transform: translateY(-50%) scale(1);
}

.social-bouton__link[data-tooltip]:hover::before,
.social-bouton__link[data-tooltip]:focus-visible::before {
    opacity: 1;
}

/* Tooltip à gauche quand la barre est à gauche */
[data-ss-pos="left"] .social-bouton__link[data-tooltip]::after {
    right:  auto;
    left:   calc(100% + 10px);
}

[data-ss-pos="left"] .social-bouton__link[data-tooltip]::before {
    right:             auto;
    left:              calc(100% + 4px);
    border-left-color: transparent;
    border-right-color: #1a1a2e;
}

/* ── Mobile : barre fixe en bas ───────────────────────────── */
@media (max-width: 768px) {
    #social-bouton {
        top:        auto;
        right:      0;
        left:       0;
        transform:  none;
        width:      100%;
        background: var(--ss-bg);
        box-shadow: 0 -2px 16px rgba(0,0,0,.1);
        padding:    8px 12px;
        box-sizing: border-box;

        /*
         * ── Stratégie d'ancrage bas (Chrome Android + Chrome iOS) ──
         *
         * Problème : la barre d'adresse mobile fait varier la hauteur
         * du Layout Viewport. position:fixed + bottom:0 se positionne
         * toujours par rapport au Layout Viewport (barre absente = max),
         * ce qui laisse un espace vide sous notre barre quand la barre
         * d'adresse du navigateur est visible.
         *
         * Sur Chrome Android (Blink) : visualViewport.offsetTop donne
         * la hauteur de la barre d'adresse → le JS corrige bottom.
         *
         * Sur Chrome iOS (WebKit) : visualViewport.offsetTop vaut
         * toujours 0 (comportement WebKit figé) → le JS ne peut pas
         * calculer la correction. dvb n'est pas non plus supporté.
         *
         * Solution universelle : svh (Small Viewport Height).
         * svh = hauteur du viewport quand la barre d'adresse EST visible
         * (la plus petite hauteur stable). En ancrant bottom sur svh,
         * l'élément reste au bas du petit viewport. Quand la barre
         * d'adresse disparaît le Layout Viewport grandit, mais notre
         * bottom calculé en svh ne change pas → l'élément reste visible
         * et collé au bas de l'écran dans les deux états.
         *
         * Étape 1 – Fallback universel (pas de svh, pas de env()).
         */
        bottom: var(--ss-offset-mob);

        /*
         * Étape 2 – safe-area (encoche iOS, home indicator Android).
         *           Chrome 69+ / Safari 11.2+.
         */
        bottom: calc(var(--ss-offset-mob) + env(safe-area-inset-bottom, 0px));
    }

    /*
     * Étape 3 – ancrage svh (Chrome 108+, Safari 15.4+, Firefox 101+).
     *
     * On surcharge bottom dans un @supports pour ne cibler que les
     * navigateurs qui comprennent svh. La valeur est identique en
     * apparence mais le navigateur résout svh comme la hauteur du
     * Small Viewport → bottom est stable même quand la barre
     * d'adresse apparaît ou disparaît.
     */
    @supports (bottom: 1svh) {
        #social-bouton {
            bottom: calc(var(--ss-offset-mob) + env(safe-area-inset-bottom, 0px));
            /*
             * Le hack : on force le navigateur à recalculer bottom
             * en référence au svh en ajoutant 0svh. Le résultat
             * numérique est identique mais le contexte de résolution
             * change de lvh → svh, ce qui est exactement ce qu'on veut.
             */
            bottom: calc(var(--ss-offset-mob) + env(safe-area-inset-bottom, 0px) + 0svh);
        }
    }

    /*
     * Étape 4 – Fallback JS pour Chrome Android < 108 uniquement.
     * Le script visualViewport injecte --ss-mob-bottom sur Android
     * où offsetTop reflète correctement la hauteur de la barre.
     * Ce fallback n'est pas nécessaire sur iOS (svh suffit).
     */
    #social-bouton[style*="--ss-mob-bottom"] {
        bottom: var(--ss-mob-bottom) !important;
    }
    .social-bouton__list {
        flex-direction: row;
        justify-content:center;
        flex-wrap:      wrap;
        gap:            6px;
    }

    .social-bouton__link {
        box-shadow: none;
    }

    .social-bouton__link:hover,
    .social-bouton__link:focus-visible {
        transform: scale(1.1);
        box-shadow: none;
    }

    /* On masque le tooltip sur mobile */
    .social-bouton__link[data-tooltip]::after,
    .social-bouton__link[data-tooltip]::before {
        display: none;
    }
}

/* ── Accessibilité : réduire les animations ───────────────── */
@media (prefers-reduced-motion: reduce) {
    .social-bouton__link,
    .social-bouton__icon,
    .social-bouton__link[data-tooltip]::after,
    .social-bouton__link[data-tooltip]::before {
        transition: none;
    }
}