/* Styles spécifiques pour la page des Commissions */

.commission-card {
    background-color: #ffffff;
    transition: none;
}

.commission-card:hover {
    transform: none;
}

/* Style pour les icônes des commissions - fond gris clair, icône noire */
.commission-card .bg-primary\/10 {
    background-color: #f3f4f6;
    transition: none;
}

.commission-card:hover .bg-primary\/10 {
    background-color: #f3f4f6;
}

/* Style pour les titres des commissions - texte noir */
.commission-card h3 {
    color: #000000;
    transition: none;
}

.commission-card:hover h3 {
    color: #000000;
}

/* Style pour les listes de membres */
.commission-card ul {
    columns: 1;
}

@media (min-width: 640px) {
    .commission-card ul {
        columns: 2;
    }
}

/* Style pour les étapes de fonctionnement */
.flex-shrink-0.h-8.w-8 {
    transition: none;
}

.flex:hover .flex-shrink-0.h-8.w-8 {
    transform: none;
    box-shadow: none;
}

/* Styles pour l'accordéon accessible - fond blanc, texte noir */
.commission-card .accordion-trigger {
    cursor: pointer;
    width: 100%;
    background-color: #ffffff;
    color: #000000;
}

.commission-card .accordion-trigger:hover {
    background-color: #ffffff;
    color: #000000;
}

/* Force la couleur noire sur tous les éléments du bouton accordéon */
.commission-card .accordion-trigger,
.commission-card .accordion-trigger span,
.commission-card .accordion-trigger svg,
.commission-card .accordion-trigger .text-gray-800,
.commission-card .accordion-trigger .text-gray-500,
.commission-card .accordion-trigger .text-primary,
.commission-card .accordion-trigger .dark\:text-gray-200,
.commission-card .accordion-trigger .dark\:text-gray-400,
.commission-card .accordion-trigger .dark\:text-blue-400 {
    color: #000000;
}

/* Au hover, tout reste noir */
.commission-card:hover .accordion-trigger,
.commission-card:hover .accordion-trigger span,
.commission-card:hover .accordion-trigger svg,
.commission-card:hover .accordion-trigger .text-gray-800,
.commission-card:hover .accordion-trigger .text-gray-500,
.commission-card:hover .accordion-trigger .text-primary,
.commission-card:hover .accordion-trigger .dark\:text-gray-200,
.commission-card:hover .accordion-trigger .dark\:text-gray-400,
.commission-card:hover .accordion-trigger .dark\:text-blue-400 {
    color: #000000;
}

/* Force la couleur noire sur tous les éléments enfants du bouton */
.commission-card .accordion-trigger * {
    color: #000000;
    fill: #000000;
    stroke: #000000;
}

/* Au hover, tout reste noir */
.commission-card:hover .accordion-trigger * {
    color: #000000;
    fill: #000000;
    stroke: #000000;
}

/* Container de l'icône - reste gris clair */
.commission-card .accordion-trigger .bg-primary\/10,
.commission-card .accordion-trigger .dark\:bg-primary\/20 {
    background-color: #f3f4f6;
}

.commission-card:hover .accordion-trigger .bg-primary\/10,
.commission-card:hover .accordion-trigger .dark\:bg-primary\/20 {
    background-color: #f3f4f6;
}

/* Focus visible pour l'accordéon */
.commission-card .accordion-trigger:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--shadow, 0 0 #0000);
}

/* Panneau de l'accordéon */
.commission-card .accordion-panel {
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

.commission-card .accordion-panel:not(.hidden) {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 1000px;
    }
}

.commission-card .accordion-icon {
    transition: transform 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .commission-card .ml-14 {
        margin-left: 0;
        margin-top: 1rem;
    }
}