/* Format mobile */
.filterAndActualities {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 2rem;

    .filter h3 {
        margin-top: 0;
    }
}


.filterAndActualities .filter {
    flex-direction: column;
    color: white;
    background-color: var(--button-active-color);
    border-radius: 12px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    width: 80%;
    padding: 1rem;
    box-sizing: border-box;
    
    .filter-list {
        list-style: none;
        padding: 0;
        margin: 0;

        /*faire le menu déroulant (voir navbar + roue phama)*/
    }


    .filter-list li {
        margin-bottom: 0.5rem;
    }

    .filter-list label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .filter-list input[type="checkbox"] {
        appearance: none;
        width: 1rem;
        height: 1rem;
        border: 2px solid var(--title-color);
        border-radius: 3px;
        background-color: var(--title-color);
        position: relative;
        cursor: pointer;
    }

    .filter-list input[type="checkbox"]::after {
        content: "✔";
        font-size: 0.7rem;
        color: white;
        position: absolute;
        top: -1px;
        left: 2px;
        display: block;
    }

    .filter-list input[type="checkbox"]:not(:checked) {
        background-color: white;
    }

    .filter-list input[type="checkbox"]:not(:checked)::after {
        content: "";
    }
}

.filterAndActualities .actualities {
    width: 70%;
    padding: 1rem;
    box-sizing: border-box;
}

/*Format desktop*/
@media(min-width : 1024px) {
    .filterAndActualities .filter {
        width: 30%;
    }

    .filterAndActualities {
        margin-top: 1rem;
    }
}