/* =========================================
   SHARE CIRCULAR MENU
========================================= */

.share-menu {
    position: relative;

    width: 55px;
    height: 55px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    z-index: 100;
}


/* =========================================
   MAIN SHARE BUTTON
========================================= */

.share-link {
    position: relative;
    z-index: 20;

    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #fff;
    color: #222;

    cursor: pointer;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .12);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


/* Hide "Share" text */

.share-link span {
    display: none;
}


/* Share icon */

.share-link i {
    font-size: 18px;

    transition:
        transform .45s cubic-bezier(.68, -0.55, .265, 1.55);
}


/* Hover main button */

.share-link:hover {
    transform: scale(1.08);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .18);
}


/* Rotate icon when opened */

.share-menu.active .share-link i {
    transform: rotate(45deg);
}


/* =========================================
   SOCIAL CONTAINER
========================================= */

.share-socials {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 0;
    height: 0;

    pointer-events: none;
}


/* =========================================
   SOCIAL BUTTON
========================================= */

.share-socials .social {

    /*
     * Position personnalisée de chaque bouton
     */
    --x: 0px;
    --y: 0px;

    position: absolute;

    top: -21px;
    left: -21px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #fff;
    text-decoration: none;

    /*
     * État fermé
     */
    opacity: 0;

    transform:
        translate(0, 0)
        scale(.2);

    pointer-events: none;

    /*
     * Même dégradé pour tous
     */
    background:
        linear-gradient(
            135deg,
            #4AB68F 0%,
            #3A9D82 50%,
            #26796F 100%
        );

    /*
     * Bordure
     */
    border: 1px solid rgba(255, 255, 255, .4);

    /*
     * Ombre
     */
    box-shadow:
        0 8px 22px rgba(38, 121, 111, .25);

    /*
     * Animation d'ouverture
     */
    transition:
        transform .55s cubic-bezier(.34, 1.56, .64, 1),
        opacity .3s ease,
        box-shadow .3s ease;
}


/* =========================================
   SOCIAL ICON
========================================= */

.share-socials .social i {
    position: relative;

    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    font-size: 16px;

    color: #fff;

    /*
     * Animation permanente
     */
    animation:
        shareIconFloat 3s ease-in-out infinite;
}


/* =========================================
   INFINITE ICON ANIMATION
========================================= */

@keyframes shareIconFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    25% {
        transform:
            translateY(-2px)
            rotate(-4deg);
    }

    50% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    75% {
        transform:
            translateY(2px)
            rotate(4deg);
    }
}


/* =========================================
   DIFFERENT ANIMATION DELAYS
========================================= */

.share-socials .facebook i {
    animation-delay: 0s;
}

.share-socials .x i {
    animation-delay: .25s;
}

.share-socials .linkedin i {
    animation-delay: .5s;
}

.share-socials .email i {
    animation-delay: .75s;
}

.share-socials .telegram i {
    animation-delay: 1s;
}

.share-socials .whatsapp i {
    animation-delay: 1.25s;
}


.share-socials .facebook {
    --x: 0px;
    --y: -110px;
}


/*
 * X
 * Haut-droite
 */

.share-socials .x {
    --x: 65px;
    --y: -88px;
}


/*
 * LinkedIn
 * Droite-haut
 */

.share-socials .linkedin {
    --x: 105px;
    --y: -35px;
}


/*
 * Email
 * Droite-bas
 */

.share-socials .email {
    --x: 105px;
    --y: 35px;
}


/*
 * Telegram
 * Bas-droite
 */

.share-socials .telegram {
    --x: 65px;
    --y: 88px;
}


/*
 * WhatsApp
 * Bas
 */

.share-socials .whatsapp {
    --x: 0px;
    --y: 110px;
}


/* =========================================
   OPEN STATE
========================================= */

.share-menu.active .share-socials {
    pointer-events: auto;
}


.share-menu.active .share-socials .social {

    opacity: 1;

    transform:
        translate(var(--x), var(--y))
        scale(1);

    pointer-events: auto;
}


/* =========================================
   STAGGERED OPEN ANIMATION
========================================= */

.share-menu.active .facebook {
    transition-delay: .02s;
}

.share-menu.active .x {
    transition-delay: .07s;
}

.share-menu.active .linkedin {
    transition-delay: .12s;
}

.share-menu.active .email {
    transition-delay: .17s;
}

.share-menu.active .telegram {
    transition-delay: .22s;
}

.share-menu.active .whatsapp {
    transition-delay: .27s;
}


/* =========================================
   HOVER SOCIAL BUTTON
========================================= */

.share-socials .social:hover {

    transform:
        translate(var(--x), var(--y))
        scale(1.18);

    box-shadow:
        0 12px 32px rgba(38, 121, 111, .45);
}


/* =========================================
   ANIMATED GLOW
========================================= */

.share-socials .social::after {

    content: "";

    position: absolute;

    inset: -4px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #4AB68F,
            #26796F
        );

    opacity: .2;

    z-index: -1;

    filter: blur(7px);

    animation:
        shareGlow 3s ease-in-out infinite;
}


/* =========================================
   GLOW ANIMATION
========================================= */

@keyframes shareGlow {

    0%,
    100% {
        opacity: .15;
        transform: scale(.95);
    }

    50% {
        opacity: .6;
        transform: scale(1.18);
    }
}


/* =========================================
   DIFFERENT GLOW DELAYS
========================================= */

.share-socials .facebook::after {
    animation-delay: 0s;
}

.share-socials .x::after {
    animation-delay: .3s;
}

.share-socials .linkedin::after {
    animation-delay: .6s;
}

.share-socials .email::after {
    animation-delay: .9s;
}

.share-socials .telegram::after {
    animation-delay: 1.2s;
}

.share-socials .whatsapp::after {
    animation-delay: 1.5s;
}


/* =========================================
   TOOLTIP
========================================= */

.share-socials .social[data-tooltip]::before {

    content: attr(data-tooltip);

    position: absolute;

    left: 50%;
    bottom: calc(100% + 10px);

    transform:
        translateX(-50%)
        translateY(6px);

    padding: 6px 10px;

    border-radius: 6px;

    background: #222;
    color: #fff;

    font-size: 11px;
    font-weight: 500;

    line-height: 1;

    white-space: nowrap;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, .15);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;
}


/* Tooltip */

.share-socials .social:hover::before {

    opacity: 1;
    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);
}


/* =========================================
   TOOLTIP ARROW
========================================= */

.share-socials .social[data-tooltip]::before {

    /* Tooltip principal */
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 575px) {

    .share-socials .social {

        width: 40px;
        height: 40px;

        top: -20px;
        left: -20px;
    }


    /*
     * Arc plus compact sur mobile
     */

    .share-socials .facebook {
        --x: 0px;
        --y: -88px;
    }

    .share-socials .x {
        --x: 52px;
        --y: -70px;
    }

    .share-socials .linkedin {
        --x: 82px;
        --y: -28px;
    }

    .share-socials .email {
        --x: 82px;
        --y: 28px;
    }

    .share-socials .telegram {
        --x: 52px;
        --y: 70px;
    }

    .share-socials .whatsapp {
        --x: 0px;
        --y: 88px;
    }


    /*
     * Icônes légèrement plus petites
     */

    .share-socials .social i {
        font-size: 15px;
    }


    /*
     * Pas de tooltip sur écran tactile
     */

    .share-socials .social[data-tooltip]::before {
        display: none;
    }
}


/* =========================================
   ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

    .share-socials .social i,
    .share-socials .social::after {
        animation: none;
    }

    .share-socials .social,
    .share-link,
    .share-link i {
        transition: none;
    }
}