/* Styles généraux pour chaque élément accordéon */
.mainPageAccordeon-item {
    margin-bottom: 1em; /* Espace entre les accordéons */
    border: none;
    border-radius: 0;
    position: relative;
}

/* Styles pour l'en-tête de l'accordéon (zone cliquable) */
.mainPageAccordeon-header {
    background-color: transparent;
    padding: 0;
    /*cursor: pointer;*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.1em;
    border-bottom: none;
    margin-bottom: 10px; /* Espace sous l'en-tête */
}

.mainPageAccordeon-header.is-clickable {
    cursor: pointer;
}

/* Styles pour le titre de la section principale de l'accordéon (si utilisé) */
.mainPageAccordeon-section h3 {
    text-align: left;
    font-size: 45px;
}

@media (max-width: 1200px) {
    .mainPageAccordeon-section h3 {
        font-size: 30px;
    }
}
@media (max-width: 500px) {
    .mainPageAccordeon-section h3 {
        font-size: 25px;
    }
}

/* Styles pour le titre H4 de chaque élément accordéon */
.mainPageAccordeon-section h4 {
    text-align: left;
    font-size: 30px;
    margin: 0;
    color: rgb(0,74,173);
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1; /* Permet au titre de prendre l'espace disponible */
    padding-right: 10px;
}

@media (max-width: 1200px) {
    .mainPageAccordeon-section h4 {
        font-size: 22px
    }
}
@media (max-width: 500px) {
    .mainPageAccordeon-section h4 {
        font-size: 20px
    }
}

/* Styles de base pour l'icône de flèche (cachée par défaut via JS) */
.mainPageAccordeon-icon {
    display: inline-block;
    width: 1em; /* Largeur visible initiale */
    height: 1em;
    opacity: 0; /* Commence masqué par default */
    visibility: hidden;
    width: 0; /* Commence caché */
    padding-left: 0; /* Pas de padding quand caché */
    fill: rgb(0,74,173);
    /* Transitions pour une animation fluide */
    -webkit-transition: opacity 0.3s ease, width 0.3s ease, padding-left 0.3s ease, visibility 0s 0.3s, -webkit-transform 0.3s ease;
    transition: opacity 0.3s ease, width 0.3s ease, padding-left 0.3s ease, visibility 0s 0.3s, -webkit-transform 0.3s ease;
    -o-transition: opacity 0.3s ease, transform 0.3s ease, width 0.3s ease, padding-left 0.3s ease, visibility 0s 0.3s;
    transition: opacity 0.3s ease, transform 0.3s ease, width 0.3s ease, padding-left 0.3s ease, visibility 0s 0.3s;
    transition: opacity 0.3s ease, transform 0.3s ease, width 0.3s ease, padding-left 0.3s ease, visibility 0s 0.3s, -webkit-transform 0.3s ease;
}

/* L'icône est visible si le JS lui ajoute la classe 'is-visible' */
.mainPageAccordeon-icon.is-visible {
    opacity: 1;
    visibility: visible;
    width: 1em; /* Redevient visible avec sa largeur naturelle */
    padding-left: 5px; /* Applique le padding */
    -webkit-transition: opacity 0.3s ease, width 0.3s ease 0.3s, padding-left 0.3s ease 0.3s, visibility 0s 0s, -webkit-transform 0.3s ease;
    transition: opacity 0.3s ease, width 0.3s ease 0.3s, padding-left 0.3s ease 0.3s, visibility 0s 0s, -webkit-transform 0.3s ease;
    -o-transition: opacity 0.3s ease, transform 0.3s ease, width 0.3s ease 0.3s, padding-left 0.3s ease 0.3s, visibility 0s 0s;
    transition: opacity 0.3s ease, transform 0.3s ease, width 0.3s ease 0.3s, padding-left 0.3s ease 0.3s, visibility 0s 0s;
    transition: opacity 0.3s ease, transform 0.3s ease, width 0.3s ease 0.3s, padding-left 0.3s ease 0.3s, visibility 0s 0s, -webkit-transform 0.3s ease;
}

/* Rotation de la flèche quand l'accordéon est ouvert */
.mainPageAccordeon-item:not(.is-collapsed) .mainPageAccordeon-icon {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg); /* La flèche tourne à l'ouverture */
}

/* Style général pour le contenu de l'accordéon */
.mainPageAccordeon-content {
    background-color: #fff;
    padding: 0;
    position: relative;
}

/* Styles pour les paragraphes et les boîtes importantes (enfants directs) */
.mainPageAccordeon-content > p,
.mainPageAccordeon-content > .important-box {
    max-height: 1000px; /* Grande valeur pour le contenu visible */
    overflow: hidden;
    opacity: 1;
    /* Transitions: ne transitionnez que ce qui est vraiment animé (max-height, opacity, margins) */
    -webkit-transition: max-height 0.5s ease, opacity 0.5s ease, margin-top 0.5s ease, margin-bottom 0.5s ease;
    -o-transition: max-height 0.5s ease, opacity 0.5s ease, margin-top 0.5s ease, margin-bottom 0.5s ease;
    transition: max-height 0.5s ease, opacity 0.5s ease, margin-top 0.5s ease, margin-bottom 0.5s ease;
    /* Ajout de marges par défaut pour les éléments de contenu visibles */
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 0; /* Assurez-vous que les paragraphes n'ont pas de padding indésirable */
}

/* Classe pour masquer les éléments individuels via JS avec transition */
.mainPageAccordeon-content .hidden-content-element {
    max-height: 0;
    margin-top: 0 !important;    /* FORCE la marge supérieure à 0 */
    margin-bottom: 0 !important; /* FORCE la marge inférieure à 0 */

    padding-top: 0;
    padding-bottom: 0;

    opacity: 0;
    overflow: hidden; /* C'est cette propriété combinée avec max-height:0 qui devrait cacher le padding */
    visibility: hidden;
    /* Transitions pour la disparition: assurez-vous que tout s'anime ensemble */
    -webkit-transition: max-height 0.5s ease, opacity 0.5s ease, margin-top 0.5s ease, margin-bottom 0.5s ease, visibility 0s 0.5s;
    -o-transition: max-height 0.5s ease, opacity 0.5s ease, margin-top 0.5s ease, margin-bottom 0.5s ease, visibility 0s 0.5s;
    transition: max-height 0.5s ease, opacity 0.5s ease, margin-top 0.5s ease, margin-bottom 0.5s ease, visibility 0s 0.5s;
}

/* Effet de fondu quand le contenu est replié */
.mainPageAccordeon-item.is-collapsed .mainPageAccordeon-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    pointer-events: none;
    opacity: 1;
    -webkit-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

/* Quand l'accordéon n'est PAS collapsé, l'effet de fondu disparaît */
.mainPageAccordeon-item:not(.is-collapsed) .mainPageAccordeon-content::after {
    opacity: 0;
    visibility: hidden;
}

/* Styles par défaut pour le bouton "Lire la suite..." (commence masqué) */
.read-more-btn {
    display: inline-block;
    color: rgb(0,74,173);
    font-weight: bold;
    cursor: pointer;
    text-decoration: underline;
    padding-left: 20px;
    white-space: nowrap;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    visibility: hidden;
    height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    /* Transitions pour une animation fluide du bouton */
    -webkit-transition: opacity 0.3s ease,
        max-width 0.3s ease,
        height 0.3s ease,
        margin-top 0.3s ease,
        margin-bottom 0.3s ease,
        padding-bottom 0.3s ease,
        visibility 0s 0.3s;
    -o-transition: opacity 0.3s ease,
        max-width 0.3s ease,
        height 0.3s ease,
        margin-top 0.3s ease,
        margin-bottom 0.3s ease,
        padding-bottom 0.3s ease,
        visibility 0s 0.3s;
    transition: opacity 0.3s ease,
        max-width 0.3s ease,
        height 0.3s ease,
        margin-top 0.3s ease,
        margin-bottom 0.3s ease,
        padding-bottom 0.3s ease,
        visibility 0s 0.3s; /* La visibilité change après l'opacité */
}

/* Le bouton "Lire la suite..." est visible si le JS lui ajoute la classe 'is-visible' */
.read-more-btn.is-visible {
    opacity: 1;
    visibility: visible;
    max-width: 200px; /* Redevient visible avec sa largeur naturelle */
    height: auto; /* Permet au bouton de prendre sa hauteur naturelle */

    /* Marge supérieure ajustée pour réduire l'espace avec le texte */
    margin-top: 5px;

    margin-bottom: 1em; /* Garder 1em ou ajuster si nécessaire pour l'espace sous le bouton */
    padding-bottom: 1em; /* Garder 1em ou ajuster si nécessaire pour le padding interne du bouton */

    /* Transitions pour une apparition douce */
    -webkit-transition: opacity 0.3s ease,
        max-width 0.3s ease,
        height 0.3s ease 0.1s, /* Delay pour la hauteur pour un effet plus doux */
        margin-top 0.3s ease 0.1s,
        margin-bottom 0.3s ease 0.1s,
        padding-bottom 0.3s ease 0.1s,
        visibility 0s 0s;
    -o-transition: opacity 0.3s ease,
        max-width 0.3s ease,
        height 0.3s ease 0.1s, /* Delay pour la hauteur pour un effet plus doux */
        margin-top 0.3s ease 0.1s,
        margin-bottom 0.3s ease 0.1s,
        padding-bottom 0.3s ease 0.1s,
        visibility 0s 0s;
    transition: opacity 0.3s ease,
        max-width 0.3s ease,
        height 0.3s ease 0.1s, /* Delay pour la hauteur pour un effet plus doux */
        margin-top 0.3s ease 0.1s,
        margin-bottom 0.3s ease 0.1s,
        padding-bottom 0.3s ease 0.1s,
        visibility 0s 0s; /* La visibilité change immédiatement */
}

/* Le bouton "Lire la suite..." disparaît quand l'accordéon est déplié */
.mainPageAccordeon-item:not(.is-collapsed) .read-more-btn {
    opacity: 0;
    visibility: hidden;
    max-width: 0;
    height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    /* Transitions pour la disparition du bouton */
    -webkit-transition: opacity 0.3s ease,
        max-width 0.3s ease 0.3s, /* Délai pour max-width après opacité */
        height 0.3s ease 0.3s,    /* Délai pour height après opacité */
        margin-top 0.3s ease 0.3s,
        margin-bottom 0.3s ease 0.3s,
        padding-bottom 0.3s ease 0.3s,
        visibility 0s 0.3s;
    -o-transition: opacity 0.3s ease,
        max-width 0.3s ease 0.3s, /* Délai pour max-width après opacité */
        height 0.3s ease 0.3s,    /* Délai pour height après opacité */
        margin-top 0.3s ease 0.3s,
        margin-bottom 0.3s ease 0.3s,
        padding-bottom 0.3s ease 0.3s,
        visibility 0s 0.3s;
    transition: opacity 0.3s ease,
        max-width 0.3s ease 0.3s, /* Délai pour max-width après opacité */
        height 0.3s ease 0.3s,    /* Délai pour height après opacité */
        margin-top 0.3s ease 0.3s,
        margin-bottom 0.3s ease 0.3s,
        padding-bottom 0.3s ease 0.3s,
        visibility 0s 0.3s; /* La visibilité change après l'opacité */
}

.read-more-btn:hover {
    color: #004085;
}

/* Classe pour masquer complètement un accordéon "vraiment vide" (titre, flèche, contenu, bouton) */
.mainPageAccordeon-item.is-truly-empty {
    margin-bottom: 0; /* Supprime la marge basse */
    height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; /* Transition pour une disparition douce */
}

/* Masque le header, le contenu et le bouton "Lire la suite" dans un accordéon vraiment vide */
.mainPageAccordeon-item.is-truly-empty .mainPageAccordeon-header,
.mainPageAccordeon-item.is-truly-empty .mainPageAccordeon-content,
.mainPageAccordeon-item.is-truly-empty .read-more-btn {
    display: none !important; /* Force la disparition */
}

/* Masque l'icône quand l'accordéon est vraiment vide */
.mainPageAccordeon-item.is-truly-empty .mainPageAccordeon-icon {
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    padding-left: 0 !important;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Styles pour la boîte importante */
.important-box {
    background-color: rgb(52,90,150);
    color: #ffffff;
    padding: 15px 20px; /* Ce padding est essentiel et doit rester ici */
    margin: 1em 0px;
    border-radius: 5px;
    font-style: normal;
    text-align: justify;
}

/* AJOUT SPÉCIFIQUE POUR IMPORTANT-BOX QUAND IL EST CACHÉ PAR hidden-content-element */
/* Nous allons nous assurer que le padding est bien 'collapsé' mais SANS transitionner lui-même */
.important-box.hidden-content-element {
    /* Désactive toutes les transitions sur important-box lui-même lorsqu'il est masqué */
    -webkit-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}
/* ET POUR S'ASSURER QUE LE PADDING N'EST PAS ÉCRASÉ QUAND IL EST VISIBLE */
.mainPageAccordeon-content > .important-box:not(.hidden-content-element) {
    /* Force l'application du padding au moment de l'affichage, sans dépendre d'une transition */
    padding: 15px 20px !important;
}

.important-box p {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0.5em;
}
.important-box p:last-child {
    margin-bottom: 0;
}


/* --- NOUVELLES RÈGLES CSS pour les accordéons H3 --- */

/* Conteneur H3 - Reprend les styles de base du H4 pour la structure */
.mainPageAccordeon-item-h3 {
    margin-bottom: 25px; /* Espace entre les accordéons H3, comme H4 */
    border: none; /* Pas de bordure, comme H4 */
    border-radius: 0; /* Pas de bordure radius, comme H4 */
    position: relative;
    overflow: hidden; /* **CRUCIAL** pour les transitions de hauteur du contenu */
}

/* En-tête H3 - Pour le nouveau h3 cliquable */
.mainPageAccordeon-header-h3 {
    background-color: transparent; /* Transparent comme H4 */
    padding: 0; /* Pas de padding comme H4 */
    /*        cursor: pointer;  Curseur pointer pour indiquer qu'il est cliquable */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: bold;
    border-bottom: none; /* Pas de bordure comme H4 */
    margin-bottom: 1em; /* Espace sous l'en-tête, comme H4 */
    color: rgb(0,74,173); /* Couleur bleue comme les titres H4 */
}

.mainPageAccordeon-header-h3.is-clickable {
    cursor: pointer;
}

/*Styles pour le titre H3 dans l'en-tête (pour l'alignement et la taille si nécessaire)*/
.mainPageAccordeon-header-h3 h3 {
    text-align: left;
    margin: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding-right: 10px;
}

/* Icône de flèche H3 - Copie les styles du .mainPageAccordeon-icon et les adapte */
.mainPageAccordeon-icon-h3 {
    display: inline-block;
    width: 1.3em; /************************************************************************************************************************/
    height: 1.3em; /************************************************************************************************************************/
    opacity: 0; /* Commence masqué par default */
    visibility: hidden;
    padding-left: 0;
    -webkit-transition: opacity 0.3s ease, width 0.3s ease, padding-left 0.3s ease, visibility 0s 0.3s, -webkit-transform 0.3s ease;
    transition: opacity 0.3s ease, width 0.3s ease, padding-left 0.3s ease, visibility 0s 0.3s, -webkit-transform 0.3s ease;
    -o-transition: opacity 0.3s ease, transform 0.3s ease, width 0.3s ease, padding-left 0.3s ease, visibility 0s 0.3s;
    transition: opacity 0.3s ease, transform 0.3s ease, width 0.3s ease, padding-left 0.3s ease, visibility 0s 0.3s;
    transition: opacity 0.3s ease, transform 0.3s ease, width 0.3s ease, padding-left 0.3s ease, visibility 0s 0.3s, -webkit-transform 0.3s ease;
}

/* L'icône H3 est visible si le JS lui ajoute la classe 'is-visible-h3' */
.mainPageAccordeon-icon-h3.is-visible-h3 {
    opacity: 1;
    visibility: visible;
    width: 1em;
    padding-left: 5px;
    -webkit-transition: opacity 0.3s ease, width 0.3s ease 0.3s, padding-left 0.3s ease 0.3s, visibility 0s 0s, -webkit-transform 0.3s ease;
    transition: opacity 0.3s ease, width 0.3s ease 0.3s, padding-left 0.3s ease 0.3s, visibility 0s 0s, -webkit-transform 0.3s ease;
    -o-transition: opacity 0.3s ease, transform 0.3s ease, width 0.3s ease 0.3s, padding-left 0.3s ease 0.3s, visibility 0s 0s;
    transition: opacity 0.3s ease, transform 0.3s ease, width 0.3s ease 0.3s, padding-left 0.3s ease 0.3s, visibility 0s 0s;
    transition: opacity 0.3s ease, transform 0.3s ease, width 0.3s ease 0.3s, padding-left 0.3s ease 0.3s, visibility 0s 0s, -webkit-transform 0.3s ease;
}

/* Rotation de la flèche H3 quand l'accordéon est ouvert */
.mainPageAccordeon-item-h3:not(.is-collapsed-h3) .mainPageAccordeon-icon-h3 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

/* Contenu H3 - Copie les styles du .mainPageAccordeon-content et les adapte */
.mainPageAccordeon-content-h3 {
    background-color: #fff; /* Blanc comme H4 */
    padding: 0; /* Pas de padding initial comme H4 */
    position: relative;
    overflow: hidden;
    /* Les états d'affichage initial et de transition seront gérés par JS et des classes spécifiques */
    -webkit-transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0s 0.5s;
    -o-transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0s 0.5s;
    transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0s 0.5s;
}

/* État initial pour le contenu H3 quand il doit être caché par défaut (data-visible-paragraphs="0") */
.mainPageAccordeon-item-h3.start-collapsed .mainPageAccordeon-content-h3 {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
}

/* État ouvert pour le contenu H3 (quand on clique ou quand il n'est pas "start-collapsed") */
.mainPageAccordeon-item-h3:not(.is-collapsed-h3) .mainPageAccordeon-content-h3 {
    max-height: 1000px; /* Grande valeur pour déplier */
    opacity: 1;
    visibility: visible;
    -webkit-transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0s 0s;
    -o-transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0s 0s;
    transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0s 0s; /* Visibilité immédiate à l'ouverture */
}

/* Styles pour les paragraphes et les boîtes importantes dans le contenu H3 */
.mainPageAccordeon-content-h3 > p,
.mainPageAccordeon-content-h3 > .important-box {
    max-height: 1000px; /* Par défaut visible */
    overflow: hidden;
    opacity: 1;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 0;
    /* Désactive les transitions ici car la transition du parent gère l'affichage/masquage */
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}

/* Le premier élément de contenu du H3 ne devrait pas avoir de margin-top */
.mainPageAccordeon-content-h3 > *:first-child {
    margin-top: 0 !important;
}
/* Le dernier élément de contenu du H3 ne devrait pas avoir de margin-bottom */
.mainPageAccordeon-content-h3 > *:last-child {
    margin-bottom: 0 !important;
}

/* Applique le padding du contenu H3 lorsque déplié, si nécessaire */
.mainPageAccordeon-item-h3:not(.is-collapsed-h3) .mainPageAccordeon-content-h3 {
    padding: 10px 0; /* Exemple de padding interne pour le contenu H3, ajustez au besoin */
}

/* --- AJUSTEMENTS AUX CLASSES GLOBALEMENT UTILISÉES --- */

/* La classe is-truly-empty DOIT s'appliquer aux deux types d'accordéons */
.mainPageAccordeon-item-h3.is-truly-empty {
    margin-bottom: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.mainPageAccordeon-item-h3.is-truly-empty .mainPageAccordeon-header-h3,
.mainPageAccordeon-item-h3.is-truly-empty .mainPageAccordeon-content-h3,
.mainPageAccordeon-item-h3.is-truly-empty .mainPageAccordeon-icon-h3 {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}