#archive-custom #category-dropdown,
#archive-custom #order-dropdown,
#archive-custom #tag-dropdown{
    border-radius: 8px;
    border: 1px solid #000;
    background: #FFF;
    padding: 15px 20px;
    margin-right: 1rem;
    margin-top: 1rem;

    -webkit-appearance: none;  /* Retire l'apparence par défaut pour les navigateurs WebKit */
    -moz-appearance: none;     /* Retire l'apparence par défaut pour les navigateurs Mozilla */
    appearance: none;          /* Retire l'apparence par défaut pour tous les navigateurs */
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 1L7 6.99982L1 1' stroke='black' stroke-width='1.99997' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center; /* Décale le chevron personnalisé */
    padding-right: 30px;
}

#archive-custom .filter-button {
    text-decoration: underline;
    font-size: 24px;
    position: relative;
    width: max-content;
    margin-top: 50px;
    margin-bottom: 30px;

    &:hover {
        cursor: pointer;
    }

    &::after {
        content: '';
        position: absolute;
        top: 50%;
        right: -45px;
        transform: translateY(-50%);
        width: 35px;
        height: 35px;
        background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.4375 8.5H29.75M4.25 8.5H20.1875M24.4375 25.5H29.75M4.25 25.5H20.1875M13.8125 17H29.75M4.25 17H9.5625' stroke='black' stroke-width='2.125' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22.3125 10.625C23.4861 10.625 24.4375 9.67361 24.4375 8.5C24.4375 7.32639 23.4861 6.375 22.3125 6.375C21.1389 6.375 20.1875 7.32639 20.1875 8.5C20.1875 9.67361 21.1389 10.625 22.3125 10.625Z' stroke='black' stroke-width='2.125' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.6875 19.125C12.8611 19.125 13.8125 18.1736 13.8125 17C13.8125 15.8264 12.8611 14.875 11.6875 14.875C10.5139 14.875 9.5625 15.8264 9.5625 17C9.5625 18.1736 10.5139 19.125 11.6875 19.125Z' stroke='black' stroke-width='2.125' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22.3125 27.625C23.4861 27.625 24.4375 26.6736 24.4375 25.5C24.4375 24.3264 23.4861 23.375 22.3125 23.375C21.1389 23.375 20.1875 24.3264 20.1875 25.5C20.1875 26.6736 21.1389 27.625 22.3125 27.625Z' stroke='black' stroke-width='2.125' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
}

#archive-custom .filter-container {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, height 0.5s ease-in-out;
    height: 0;

    &.show {
        opacity: 1;
        transform: unset;
        height: 60px;
    }
}

#post-list-filterable,
#archive-custom {
    @media (max-width: 1023px){
        padding: 0 20px;
    }
}

#post-list-filterable #posts-container,
#archive-custom #posts-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2rem;
    margin-bottom: 1rem;
    list-style-type: none;
    padding-left: 0;
    margin-top: 90px;

    @media (max-width: 1023px){
        grid-template-columns: repeat(2, 1fr);
    }

    @media (max-width: 767px) {
        grid-template-columns: 1fr;
    }
}

#post-list-filterable #posts-container li,
#archive-custom #posts-container li {
    position: relative;
 }

#post-list-filterable #posts-container li a.post-link,
#archive-custom #posts-container li a.post-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#archive-custom .post-thumbnail {
    border-radius: 8px;
    box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.10);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 250px;
}

#archive-custom .post-content {
    margin-top: 20px;
}

@media (max-width: 767px) {
    .who-widget-programs-list {
        grid-template-columns: 1fr;
    }
}

#archive-custom + .pagination {
    margin: 50px auto;
    text-align: center;

    .nav-links {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }

    .page-numbers {
        color: #2A2A2A;
        text-decoration: none;
        width: 20px;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;

        &.current {
            color: #FFF;
            background-color: #2A2A2A;
            border-radius: 50%;
        }

        &.next,
        &.prev {
            width: 25px;
            height: 25px;
            font-size: 0;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }

        &.next {
            background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2300CEC1'/%3E%3Cpath d='M12.2773 8.69922L15.6004 12.0223L12.2773 15.3454M15.1389 12.0223H8.40039' stroke='%2322272F' stroke-width='1.47692' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
        }

        &.prev {
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='29.9961' r='30' fill='%2300CEC1'/%3E%3Cpath d='M29.3077 38.3613L21 30.0536L29.3077 21.7459M22.1538 30.0536H39' stroke='%2322272F' stroke-width='3.69231' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
        }
    }
}