/* ============================== */
/* TITRES */
.toggle-title-1,
.toggle-title-2,
.toggle-title-3,
.toggle-title-4,
.toggle-title-5 {
    display: flex;           /* Pour pouvoir centrer en flexbox */
    align-items: center;     /* Aligne l’icône et le texte sur la même ligne, centrés verticalement */
    justify-content: center; /* Centre le duo (icône + texte) horizontalement */
    cursor: pointer;
    margin: 0 auto;
    padding: 1em;            /* Un peu de padding pour la hauteur */
    line-height: normal;     /* Éviter que le line-height ne perturbe le centrage */
}

/* Icône (+) ou (-) plus grande, placée avant le texte */
.toggle-title-1::before,
.toggle-title-2::before,
.toggle-title-3::before,
.toggle-title-4::before,
.toggle-title-5::before {
    content: '+';
    display: flex;
    font-size: 3rem;
    font-weight: bold;
    color: #000;
    margin-right: 10px;
    transition: transform 0.3s ease;
    align-content: center;
    justify-content: center;
    align-items: center;
}

/* Icône (-) lorsque le toggle est actif */
.toggle-title-1.active::before,
.toggle-title-2.active::before,
.toggle-title-3.active::before,
.toggle-title-4.active::before,
.toggle-title-5.active::before {
    content: '-';
}

/* ============================== */
/* CONTENUS */
.toggle-content-1,
.toggle-content-2,
.toggle-content-3,
.toggle-content-4,
.toggle-content-5 {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.6s ease, opacity 0.6s ease;
    margin: 0;
    padding: 0;
}

/* Expansion quand le titre est actif */
.toggle-title-1.active + .toggle-content-1,
.toggle-title-2.active + .toggle-content-2,
.toggle-title-3.active + .toggle-content-3,
.toggle-title-4.active + .toggle-content-4,
.toggle-title-5.active + .toggle-content-5 {
    max-height: 1000px;
    opacity: 1;
    padding: 15px;
}

/* Forcer l'affichage block pour le contenu (les titres sont déjà en flex plus haut) */
.toggle-content-1,
.toggle-content-2,
.toggle-content-3,
.toggle-content-4,
.toggle-content-5 {
    display: block;
}
