/* =====================================================
CATÉGORIES DE LA PAGE SUJETS
===================================================== */

.subjects-categories-section {
margin-bottom: 38px;
}

.subjects-category-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.subjects-category-chip {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
max-width: 100%;
padding: 11px 14px;
color: #536078;
background: #ffffff;
border: 1px solid #e6eaf3;
border-radius: 11px;
font-size: 11px;
font-weight: 700;
text-decoration: none;
overflow-wrap: anywhere;
transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.subjects-category-chip > i {
color: #6576d2;
font-size: 13px;
}

.subjects-category-chip > span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 5px;
color: #77839d;
background: #f1f3f9;
border-radius: 7px;
font-size: 10px;
}

.subjects-category-chip:hover {
color: #435bc3;
background: #f5f6ff;
border-color: #ccd4ff;
}

.subjects-category-chip.active {
color: #ffffff;
background: #435bc3;
border-color: #435bc3;
}

.subjects-category-chip.active > i {
color: #ffffff;
}

.subjects-category-chip.active > span {
color: #435bc3;
background: #ffffff;
}

/* PETITS ÉCRANS */

@media (max-width: 760px) {
.subjects-category-list {
gap: 8px;
}

.subjects-category-chip {
    padding: 10px 12px;
    font-size: 10px;
}

}

@media (max-width: 420px) {
.subjects-category-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.subjects-category-chip {
    justify-content: flex-start;
    min-width: 0;
    padding: 10px;
    font-size: 10px;
}

.subjects-category-chip > span {
    margin-left: auto;
}

}