/* Accordion Styles - SCOPED to .cours-reminders.accordion */
.cours-reminders.accordion .accordion-item {
    margin-bottom: 10px;
    border: 1.5px solid #a4c7ff;
    border-radius: 5px;
    overflow: hidden;
}

.cours-reminders.accordion .accordion-header {
    background-color: #ebf1ff;
    padding: 10px 15px;
    cursor: pointer;
    margin: 0;
    position: relative;
    user-select: none;
}

.cours-reminders.accordion .accordion-header:hover {
    background-color: #b5daff;
}

.cours-reminders.accordion .accordion-content {
    padding: 15px;
    background-color: white;
    display: none;
}



.cours-reminders.accordion .accordion-header::after {
    content: '\002B'; /* Plus sign Unicode */
    font-size: 2em; /* Ajustez si nécessaire pour la taille de la croix */
    color: #555;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%); /* Centrage vertical ajusté */
    transition: transform 0.2s ease-in-out;
}

.cours-reminders.accordion .accordion-header.active::after {
    content: '\2212'; /* Minus sign Unicode */
    transform: translateY(-50%); /* Centrage vertical ajusté */
}

.cours-reminders.accordion .accordion-content.show {
    display: block;
}

/* Style for highlighted result formulas */
.result-formula {
    display: inline-block; /* Keep inline but allow padding/margin */
    padding: 0.1em 0.4em;
    background-color: #ffffff; /* Light cyan background for highlight */
    border-radius: 3px;
    border: 1px solid #ffffff; /* Light cyan border */
    margin: 0 0.2em; /* Add a little horizontal spacing */
    vertical-align: middle; /* Align vertically with text */
}

.result-formula > .formula {
    margin: 0; /* Remove margins from formula inside result-formula */
    background-color: transparent; /* Make formula background transparent */
    border: none; /* Remove formula border */
    padding: 0; /* Remove formula padding */
    text-align: left; /* Align text to left within result-formula */
    display: inline; /* Formula is now inline within result-formula */
    font-size: 2em; /* Reset font size if needed */
}

/* Style for inline formulas (Formes Indéterminées) */
.cours-reminders.accordion .accordion-content p > .formula {
    display: inline-block; /* Display formulas inline */
    margin: 0 0.3em; /* Horizontal spacing between inline formulas */
    margin-bottom: 0.2em; /* Little vertical spacing if they wrap */
    background-color: #ffffff; /* Keep formula background */
    border: 1px solid #000000; /* Keep formula border */
    padding: 0.2em 0.5em; /* Keep formula padding */
    border-radius: 5px; /* Keep formula border-radius */
    text-align: center; /* Keep formula text alignment */
    font-size: 2em; /* Reset font size if needed */
}

/* Remove side-by-side formula styles as they are no longer used for FI */
.side-by-side-formulas, .formula-list, .inline-formula-list {
    /* You can remove or comment out these styles as they are not used for FI anymore */
    /* display: flex; ... etc. */
}

/* Styles for accordion content (when hidden) */
.accordion-content {
    display: none; /* Hide the content by default */
    padding: 10px;
    border-left: 1px solid #5c5c5c; /* Optional: Add a left border to visually connect to the header */
    border-right: 1px solid #5c5c5c; /* Optional: Add a right border to visually connect to the header */
    margin-left: 15px; /* Optional: Indent the content a bit */
    margin-right: 15px; /* Optional: Indent the content a bit */
}

/* Styles for accordion content (when shown - when 'show' class is added) */
.accordion-content.show {
    display: block; /* Or you can use 'block', 'flex', 'grid' depending on your layout needs */
    /* You can add more styles here for when the content is visible, e.g., background color, etc. */
}

/* Optional: Basic styling for the accordion header to make it look clickable */
.accordion-header {
    padding: 10px;
    background-color: #eee;
    border: 1px solid #ddd;
    cursor: pointer; /* Change cursor to pointer to indicate it's clickable */
    margin-bottom: 2px; /* Add a small margin between headers */
    margin-left: 15px; /* Keep consistent with content indentation */
    margin-right: 15px; /* Keep consistent with content indentation */
}

/* Optional: Style for the header when it's 'active' (you can change the appearance when opened) */
.accordion-header.active {
    background-color: #ddd; /* Slightly darker background when active */
    /* You can add more styles here for the active header */
}


/* ------------------------------------------------------------------ */
/* Améliorations de présentation pour l'accordéon - AJOUTS */
/* Ajoutez ce bloc CI-DESSOUS à votre feuille de style CSS */
/* ------------------------------------------------------------------ */

/* Rendre le texte de l'en-tête plus visible */
.cours-reminders.accordion .accordion-header {
    font-weight: bold; /* Texte en gras pour l'en-tête */
    border-bottom: 1px solid #dbd8d8; /* Ajouter une ligne de séparation en bas de l'en-tête */
}

/* Améliorer l'aspect visuel au survol de l'en-tête */
.cours-reminders.accordion .accordion-header:hover {
    background-color: #a0cfff; /* Un bleu encore plus foncé au survol */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Ajouter une légère ombre au survol pour un effet de relief */
}

/* Style pour l'en-tête actif (ouvert) */
.cours-reminders.accordion .accordion-header.active {
    background-color: #cce6ff; /* Couleur légèrement différente pour l'en-tête actif */
    border-bottom: none; /* Supprimer la bordure inférieure de l'en-tête actif pour un aspect plus propre */
}

/* Ajuster l'apparence du contenu de l'accordéon */
.cours-reminders.accordion .accordion-content {
    background-color: #f9f9f9; /* Un fond légèrement grisé pour le contenu */
    border-top: 1px solid #7e7c7c; /* Ajouter une bordure supérieure au contenu pour le séparer visuellement de l'en-tête */
    margin-top: -1px; /* Compenser la bordure inférieure de l'en-tête pour un aspect continu */
    border-radius: 0 0 5px 5px; /* Ajouter des coins arrondis en bas pour correspondre à l'item */
}

/* Améliorer l'apparence des icônes + et - */
.cours-reminders.accordion .accordion-header::after {
    font-size: 1.8em; /* Rendre les icônes légèrement plus grandes */
    color: rgb(0, 0, 0)868; /* Couleur plus foncée pour les icônes */
    font-weight: bold; /* Icônes en gras pour plus de visibilité */
    /* Optionnellement, pour des icônes plus "design" (peut nécessiter des ajustements de positionnement) */
    /* border: 1px solid #555;  Ajouter une bordure autour des icônes */
    /* border-radius: 50%;     Les rendre circulaires */
    /* padding: 0.1em;         Ajouter un peu de padding interne */
}

.cours-reminders.accordion .accordion-header.active::after {
    /* Garde les mêmes styles de base pour l'icône moins, ou ajoute des styles spécifiques si désiré */
}

/* Optionnel : Ajouter une légère ombre à l'ensemble de l'item accordéon */
.cours-reminders.accordion .accordion-item {
    box-shadow: 2px 2px 5px rgba(0,0,0,0.05); /* Ombre très légère pour donner un peu de profondeur */
}

.cours-reminders.accordion .accordion-header.active {
    background-color: #cce6ff;
    border-bottom: none; /* Supprime la bordure inférieure par défaut */
    /* Ajouter ou modifier la bordure pour l'état actif ici */
    border-top: 2px solid #010507; /* Exemple: Bordure supérieure bleue plus épaisse quand actif */
    border-left: 2px solid #000000;  /* Optionnel : Bordure gauche */
    border-right: 2px solid #000000; /* Optionnel : Bordure droite */
    border-bottom: 2px solid #000000; /* Optionnel : Bordure droite */
}