.btn-filter {
    text-transform: uppercase;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    font-size: 1rem;
    line-height: initial;
    letter-spacing: .02rem;
    font-weight: 600;
    padding: 0.5rem;
    text-decoration: none;

}

.btn-filter.active {
    --tw-text-opacity: 1;
    color: rgb(244 153 22 / var(--tw-text-opacity));
}


.card-activite {
    --card-color: #eee;
    position: relative;

    gap: 2.5rem;
    padding: 1rem
}

@media (min-width: 768px) {
    .card-activite {

        gap: 5rem
    }
}

.card-activite {
    border-radius: 1.25rem;
    border: 2px solid var(--card-color);
    background: var(--white, #FFF);
    box-shadow: 0 4px 14px #f5f5f5;
    padding: 2.5rem 3.125rem 1.875rem;
}

.card-activite.active {

}

.card-activite picture {
    position: absolute;
    top: 0;
    left: 3.125rem;
    transform: translateY(-50%);
    background-color: #fff;
    padding: .5rem 1rem;
    display: block
}

.card-activite--atelier {
    --card-color: #54BBB1;
    --button-bg-color: #54BBB1
}

.card-activite--conference {
    --card-color: #4E55A1;
    --button-bg-color: #4E55A1
}

.card-activite--rencontre {
    --card-color: #EC671D;
    --button-bg-color: #EC671D
}

.card-activite--cine {
    --card-color: #77328A;
    --button-bg-color: #77328A
}

.card-activite__info {
    flex-grow: 1
}

@media (min-width: 768px) {
    .card-activite__info {
        grid-column: span 2 / span 2
    }
}

.card-activite__title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2em;
    margin-bottom: 1rem
}

.card-activite ul {
    text-align: left;
    line-height: 1.25rem;
    font-size: .875rem;
    line-height: 1.4;
    letter-spacing: initial;
    font-size: 14px
}

@media (min-width: 768px) {
    .card-activite ul {
        text-align: left
    }
}

.card-activite__btn-wrapper {
    text-align: center
}

@media (min-width: 768px) {
    .card-activite__btn-wrapper {
        text-align: right
    }
}

.card-activite__tag {
    margin-bottom: 1rem;
    padding: .25rem .5rem;
    font-size: .75rem;
    font-style: normal;
    font-weight: 500;
    border-radius: .25rem;
    border: 1px solid var(--lightgray, #E4E4E4);
    background: #FFF;
    color: var(--card-color);
    display: inline-block
}

.card-activite [class^=fa-] {
    color: var(--card-color)
}