/*==========================================
PANIER FLOTTANT
==========================================*/

.panier-widget{

    position:fixed;

    bottom:25px;

    top:auto;

    right:25px;

    z-index:9999;

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px 22px;

    border-radius:60px;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(18px);

    box-shadow:

    0 15px 40px rgba(0,0,0,.12);

    transition:.35s;

}

.panier-widget:hover{

    transform:translateY(-5px);

}

.panier-icon{

    position:relative;

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    linear-gradient(135deg,#23ABFF,#0F6CBD);

    color:white;

    font-size:22px;

}

.panier-icon span{

    position:absolute;

    top:-6px;

    right:-6px;

    width:26px;

    height:26px;

    border-radius:50%;

    background:#ff6b35;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:12px;

    font-weight:bold;

}

.panier-info{

    display:flex;

    flex-direction:column;

}

.panier-info strong{

    color:#1f2937;

    font-size:16px;

}

.panier-info small{

    color:#6b7280;

}


@keyframes bounceCart{

    0%{

        transform:scale(1);

    }

    30%{

        transform:scale(1.18);

    }

    60%{

        transform:scale(.95);

    }

    100%{

        transform:scale(1);

    }

}

.cart-bounce{

    animation:bounceCart .5s;

}


/*==============================
TOAST
==============================*/

/*==========================================
TOAST PREMIUM
==========================================*/

.toast{

    position:fixed;

    top:30px;

    right:30px;

    width:360px;

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 22px;

    border-radius:22px;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(20px);

    border:1px solid rgba(35,171,255,.15);

    box-shadow:

    0 25px 60px rgba(0,0,0,.15);

    opacity:0;

    visibility:hidden;

    transform:

        translateX(120px)
        scale(.92);

    transition:.45s cubic-bezier(.22,1,.36,1);

    z-index:100000;

}

.toast.show{

    opacity:1;

    visibility:visible;

    transform:

        translateX(0)
        scale(1);

}


.toast-icon{

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    linear-gradient(
        135deg,
        #27ae60,
        #2ecc71
    );

    color:white;

    font-size:26px;

    flex-shrink:0;

}

.toast-content{

    flex:1;

}

.toast-content h4{

    margin:0;

    font-size:17px;

    font-weight:700;

    color:#1f2937;

}

.toast-content p{

    margin-top:6px;

    color:#6b7280;

    font-size:14px;

}

.toast::after{

    content:"";

    position:absolute;

    bottom:0;

    left:0;

    height:4px;

    width:100%;

    border-radius:0 0 22px 22px;

    background:

    linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    animation:toastBar 2.8s linear forwards;

}

@keyframes toastBar{

    from{

        width:100%;

    }

    to{

        width:0;

    }

}

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

@media (max-width:768px){

    .toast{

        top:15px;

        right:15px;

        left:15px;

        width:auto;

        max-width:320px;

        margin-left:auto;

        transform:
            translateY(-100px)
            scale(.9);

    }

    .toast.show{

        transform:
            translateY(0)
            scale(1);

    }

    .toast-icon{

        width:48px;

        height:48px;

        font-size:20px;

    }

    .toast-content h4{

        font-size:15px;

    }

    .toast-content p{

        font-size:13px;

    }

}


/*==================================================
PANIER RESPONSIVE
À partir de 900px
==================================================*/

@media (max-width: 900px) {

    .panier-widget {

        right: 15px;
        bottom: 15px;

        gap: 10px;

        padding: 10px 14px;

        border-radius: 50px;

    }


    .panier-icon {

        width: 48px;
        height: 48px;

        font-size: 19px;

    }


    .panier-icon span {

        width: 22px;
        height: 22px;

        top: -4px;
        right: -4px;

        font-size: 10px;

    }


    .panier-info strong {

        font-size: 14px;

    }


    .panier-info small {

        font-size: 12px;

    }

}


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

@media (max-width: 600px) {

    .panier-widget {

        right: 10px;
        bottom: 10px;

        gap: 0;

        padding: 7px;

        width: auto;

        border-radius: 50%;

    }


    .panier-icon {

        width: 48px;
        height: 48px;

        font-size: 18px;

    }


    .panier-info {

        display: none;

    }


    .panier-icon span {

        width: 20px;
        height: 20px;

        top: -3px;
        right: -3px;

        font-size: 10px;

    }

}