.gelules_1 {
        top: -8%;
    }

    .gelules_4{
        top: 43%;
    }

/* ----------- TEMPLATE ------------- */

.template {
    display: none;
}
.template.visible {
    display: flex;
}

#service_card:hover > img {
    top: 65px;
}

.popup .title > img {
    height: 50px;
    width: auto;
    max-width: 200px;
}

.avantages#section {
    align-items: center;
}
.avantages > #section_title {
    align-items: center !important;
}
.avantages > #section_title h2 {
    text-align: center;
}

.popup_content p {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0px;
}


/* -----------  CAROUSEL ---------- */

.carousel {
    position: relative;
    width: 100%;
    min-height: 350px;
    max-height: 350px;
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-track {
    display: flex;
    align-items: center;
    min-height: 350px;
    max-height: 350px;
    transition: var(--transition);
}

.carousel-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.carousel-slide img {
    width: 100%;
    height: 350px;
    display: block;
    object-fit: cover;
}

.carousel-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.carousel-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--principale);
    border-radius: 50%;
        cursor: url('/icons/pointer-goupilab.svg') 10 5, auto;
    transition: var(--transition);
}

.carousel-dot.active {
    background: var(--secondaire);
}


/* --------- RESPONSIVE ---------- */

@media only screen and (max-width: 850px) {


    .carousel-slide img {
        height: 250px;
    }

    .carousel-track {
        min-height: 250px;
        max-height: 250px;
    }

    .carousel {
        min-height: 250px;
        max-height: 250px;
    }

    .gelules_1 {
        top: -6%;
    }
    .gelules_4 {
        top: 44%;
        left: -25%;
    }

}


@media only screen and (max-width: 460px) {
    .gelules_1 {
        top: -4%;
    }
    .gelules_4 {
        top: 43.5%;
    }
}