/* Style de base des onglets */
.accordion {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap; 
}

.accordion-tab {
	background-color: #f1f1f1;
	color: #000042;
	cursor: pointer;
	padding: 8px 8px;
	border: 0.5px;
	border-color: #000042;
	transition: background-color 0.3s;
	text-align: center;
	margin-right: 2px;
	margin-bottom: 10px; /* Ajoute un espace entre les onglets */
	display: flex; /* Ajout de flexbox */
	align-items: flex-start; /* Alignement du contenu en haut */
	border-style: solid;
	border-radius: 10px;
	width: 50%;
}

.toggle-icon {
    /* Vos styles pour le symbole de la flèche */
    font-size: 15px; /* Taille de police */
    color: #000042; /* Couleur */
}

/* Style des contenus des onglets */
.accordion-content {
    display: none;
    padding: 10px 20px;
    overflow: hidden;
    width: 100%; /* Prend toute la largeur disponible */
}

/* Style des onglets actifs */
.active {
    background-color: #ddd;
}

/* Style pour afficher les contenus des onglets actifs */
.active + .accordion-content {
    display: block;
}

/* Media Query pour les écrans de taille moyenne et plus petits */
@media only screen and (max-width: 768px) {
    .accordion {
        flex-direction: column; /* Change la disposition en colonne pour les écrans plus petits */
    }
	.accordion-tab {
	width: 100%;
	flex-wrap: wrap; /* Active le retour à la ligne */
}