
/* === CARDS DE CATÉGORIES === */
.faq-category-card {
    height: 70px;
    border: 1px solid transparent;
    transition: all .25s ease;
    font-weight: 500;
}

/* Icône par défaut = noire */
.faq-category-icon img {
    width: 28px;
    height: 28px;
    filter: brightness(0) saturate(100%); /* noir propre */
    transition: filter .25s ease;
}

/* === HOVER === */
.faq-category-card:hover {
    background: #d6d6d63d;
    border-color: #d6d6d6;
}

/* Icône hover (marron MNS) */
.faq-category-card:hover .faq-category-icon img {
filter: sepia(50%) saturate(400%) brightness(100%) contrast(100%); 
}

/* === ACTIVE === */
.faq-category-card.active {
    background: rgba(108, 46, 27, 0.12); /* léger voile couleur brand */
    border-color: #6c2e1b;
    color: #6c2e1b;
    font-weight: 600;
}

/* Icône active (marron MNS) */
.faq-category-card.active .faq-category-icon img {
filter: sepia(50%) saturate(400%) brightness(100%) contrast(100%); 
}

/* Désactivation des blocs non actifs */
.category_block {
    display: none;
}

.category_block.active {
    display: block;
}


.faq-reas {
    min-width: 250px;
}

.questions.active .faq-arrow  {
    transform: rotate(180deg) !important;
    transition: transform .25s ease !important;
}


/* Icône : resize progressif entre 1230px → 768px */
@media (max-width: 1230px) and (min-width: 768px) {
    .faq-category-icon img {
        width: clamp(0px, 5vw, 28px);
        height: clamp(0px, 5vw, 28px);
    }

    /* Quand la taille devient très petite, on masque proprement */
    .faq-category-icon img[style*="width: 0"] {
        display: none !important;
    }
}

/* Badge nombre de questions : disparu entre 1230px → 768px */
@media (max-width: 1230px) and (min-width: 768px) {
    .questions-count {
        display: none !important;
    }
}

/* Titre : léger shrink mais redevient normal en-dessous de 768px */
@media (max-width: 1230px) and (min-width: 768px) {
    .category-title {
        font-size: clamp(12px, 1.5vw, 15px);
    }
}
