:root {
    --site-color: #CBE48B;
    --site-color-hover: #b9d270;
    --site-color-active: #a7c055;
}

.custom-accordion {
    width: 100%;
    margin-bottom: 20px;
}

.custom-accordion-item {
    margin-bottom: 10px;
}

.custom-accordion-header {
    background-color: #f4f4f4;
    padding: 15px;
    cursor: pointer;
    font-weight: bold;
    border: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}

.custom-accordion-header:hover {
    background-color: var(--site-color-hover);
}

.custom-accordion-header.active {
    background-color: var(--site-color-active);
}

.custom-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 15px;
    border: 1px solid #ddd;
    border-top: none;
}

.custom-accordion-content.open {
    max-height: 500px; /* Valeur arbitraire suffisante pour le contenu */
    padding: 15px;
}

/* Ajout de la gestion de l'overflow uniquement pour mobile */
@media (max-width: 768px) {
    .custom-accordion-content.open {
        overflow-y: auto; /* Permet le défilement vertical si le contenu dépasse */
    }
}

.custom-accordion-icon {
    font-size: 18px;
    color: var(--site-color);
}

/* Styles pour rendre le tableau responsive */
.custom-accordion-content table {
    width: 100%;
    overflow-x: auto;
    display: block;
    white-space: nowrap;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

.protein-row {
    font-weight: bold;
}