/* Wrapper du bouton avec structure liquid glass */

    :root {
    --global--size: clamp(2rem, 4vw, 5rem);
    --anim--hover-time: 400ms;
    --anim--hover-ease: cubic-bezier(0.25, 1, 0.5, 1);
    }

    @property --angle-1 {
    syntax: "<angle>";
    inherits: false;
    initial-value: -75deg;
    }

    @property --angle-2 {
    syntax: "<angle>";
    inherits: false;
    initial-value: -45deg;
    }
    


    .glass-portfolio {
        backdrop-filter: url(#glassFresnel);
        -webkit-backdrop-filter: blur(8px) url(#glassFresnel);
        -moz-backdrop-filter: blur(8px) url(#glassFresnel);
        -ms-backdrop-filter: blur(8px) url(#glassFresnel);
        aspect-ratio: 244 / 70;   /* garde toujours le même ratio */

    }


    .glass-portfolio:hover {
        transform: scale(0.975);
        backdrop-filter: blur(0.01em) url(#glassFresnel);
        -webkit-backdrop-filter: blur(0.01em) url(#glassFresnel);
        -moz-backdrop-filter: blur(0.01em) url(#glassFresnel);
        -ms-backdrop-filter: blur(0.01em) url(#glassFresnel);
    }

    .glass-social {
        backdrop-filter: url(#socialglass);
        -webkit-backdrop-filter: blur(8px) url(#socialglass);
        -moz-backdrop-filter: blur(8px) url(#socialglass);
        -ms-backdrop-filter: blur(8px) url(#socialglass);
        aspect-ratio: 1 / 1;   /* garde toujours le même ratio */

    }


    .glass-social:hover {
        transform: scale(0.975);
        backdrop-filter: blur(0.01em) url(#socialglass);
        -webkit-backdrop-filter: blur(0.01em) url(#socialglass);
        -moz-backdrop-filter: blur(0.01em) url(#socialglass);
        -ms-backdrop-filter: blur(0.01em) url(#socialglass);
    }




    
    .glass-btn {
        

        background-color: rgba(255,255,255,0.1);
        border-radius: 999px;
        
        display: inline-block;
        border: 1px solid rgba(255,255,255,0.2);
        align-items: center;
        width: auto;              /* ou une autre valeur responsive */
        height: auto;
        /* IMPORTANT : pas de `filter:` ici */


        /* Basic Styling */
        --border-width: clamp(1px, 0.0625em, 4px);
        
        cursor: pointer;
        position: relative;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        pointer-events: auto;
        
        background: linear-gradient(
            -75deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.05)
        );
        border-radius: 999vw;
        box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
            inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
            0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2),
            0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
            0 0 0 0 rgba(255, 255, 255, 1);
        
        
        transition: all var(--anim--hover-time) var(--anim--hover-ease) !important;
    }

    .glass-btn:hover {
        


        
        box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
            inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
            0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25),
            0 0 0.05em 0.1em inset rgba(255, 255, 255, 0.5),
            0 0 0 0 rgba(255, 255, 255, 1);
    }

    .glass-btn::after {
        content: "";
        position: absolute;
        z-index: 1;
        inset: 0;
        border-radius: 999vw;
        width: calc(100% + var(--border-width));
        height: calc(100% + var(--border-width));
        top: calc(0% - var(--border-width) / 2);
        left: calc(0% - var(--border-width) / 2);
        padding: var(--border-width);
        box-sizing: border-box;
        background: conic-gradient(
        from var(--angle-1) at 50% 50%,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0) 5% 40%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0) 60% 95%,
        rgba(0, 0, 0, 0.5)
        ),
        linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        transition: all var(--anim--hover-time) var(--anim--hover-ease),
            --angle-1 500ms ease;
        box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255, 255, 255, 0.5);
        
    }

    .glass-btn:hover::after {
    --angle-1: -125deg;
    }

    .glass-btn:active::after {
    --angle-1: -75deg;
    }