/* Conteneur principal */
    .psychologie-container {
        max-width: 1000px;
        margin: 20px auto;
        font-family: Arial, sans-serif;
    }

    /* Le titre du thème (Dropdown principal) */
    .theme-dropdown {
        background-color: #00000030;
        border-radius: 10px;
        margin-bottom: 20px;
        padding: 10px;
        border: 1px solid #ddd;
    }

    .theme-title {
        font-size: 1.5em;
        font-weight: bold;
        cursor: pointer;
        padding: 10px;
        outline: none;
    }

    /* Style des questions */
    .faq-item {
        list-style: none;
        margin-bottom: 20px;
    }

    .faq-item summary {
        margin-left: 20%; /* Adapté pour être plus flexible que 300px */
        text-align: left;
        color: aliceblue;
        background-color: #00346f;
        border: 1px solid #ddd;
        padding: 15px;
        border-radius: 15px;
        cursor: pointer;
        list-style: none; /* Cache la flèche par défaut sur certains navigateurs */
        outline: none;
        display: block; /* Nécessaire pour l'alignement */
    }

    /* Style des réponses */
    .faq-item .answer-content {
        margin-right: 20%;
        margin-top: 10px;
        text-align: left;
        color: aliceblue;
        background-color: #615f5f;
        border: 1px solid #ddd;
        padding: 15px;
        border-radius: 15px;
    }

    /* Suppression de la petite flèche par défaut de HTML5 pour un look plus propre */
    .faq-item summary::-webkit-details-marker {
        display: none;
    }

/* Style le thème quand il est ouvert */
.theme-dropdown[open] {
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Style les questions à l'intérieur pour qu'elles n'aient pas l'air de boutons */
.theme-dropdown[open] .faq-item {
    margin-left: 20px;
    border-left: 2px solid #eee;
    padding-left: 10px;
}

/* Animation de l'apparition du contenu */
.theme-dropdown[open] .chapter {
    animation: slideDown 0.4s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* On peut aussi animer les questions FAQ à l'intérieur */
.faq-item[open] .answer-content, .faq-item[open] .question {
    animation: fadeIn 1.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}