/* On cache les radios natifs */
input[type="radio"] {
    display: none;
}

legend {
    font-weight: bold;
}

fieldset>.options {
    display: flex;
    flex-direction: row;
    gap: 2em;
}

/* On prépare le label */
label {
    cursor: pointer;





}

/* La pastille grise */
label.filters::before {
    content: "";
    display: inline-block;
    width: calc(1.5em / 2);
    height: calc(1.5em / 2);
    margin-right: .1em;
    border-radius: 50%;
    background-color: #ccc;
    /* gris par défaut */
    transform: scale(.5);
    transition: transform 0.2s ease;

}

/* Quand le radio est coché → pastille verte */
label.filters:has(input[type="radio"]:checked)::before {
    background-color: #4caf50;
    transform: scale(1);
    /* vert */
}

#projects_list {
    transition: all 0.2s ease;
}

#projects_list.htmx-swapping {
    opacity: 0;
    pointer-events: none;
}

#projects_list {
    list-style: none;
    padding: 0;
}

#projects_list li {
    transition: filter 0.3s ease, opacity 0.3s ease;
}


ul {
    margin-top: 2em;
    /* outline: 1px solid var(--border-color); */
}


li:has(+li:hover) hr.bottom {
    opacity: 0;
}

li:hover>hr.top {
    opacity: 1 !important;
}

li:first-of-type:hover>hr.top {
    opacity: 0 !important;
}

hr.top {
    transition: all 0.2s ease;
    margin: 0 0 1em 0;
    opacity: 0;
    border: none;
    border-bottom: 1px solid var(--border-color);


}

hr.bottom {
    transition: all 0.2s ease;
    margin: 1em 0 0 0;
    border: none;
    border-bottom: 1px solid var(--border-color);
}