.accordions {
    margin: 0;
    padding: 0;
}

.accordions-trigger {
    background: none;
    color: hsl(0deg 0% 13%);
    display: block;
    font-size: 1rem;
    font-weight: normal;
    padding: 0.5em 1em;
    position: relative;
    text-align: left;
    width: 100%;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
    margin-top: 0.3em;
}

.accordions-trigger:focus,
.accordions-trigger:hover {
    background: hsl(216deg 94% 94%);
}

.accordions-trigger:focus .accordions-title{
    outline: 2px solid hsl(216deg 94% 43%); /* Bordure bleue sur focus */
    outline-offset: 2px; /* Décalage de la bordure pour plus de clarté */
}

.accordions-title {
    display: block;
    pointer-events: none;
    padding: 0.25em;
    font-size: 1.125em;
    font-weight: bold;
    font-family: "Roboto Slab", sans-serif;
    margin-left: 1.5em;
    color: #333333; /* Couleur par défaut du titre */
}

.accordions-trigger::before {
    content: '';
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    height: 0.5rem;
    width: 0.5rem;
    position: absolute;
    left: 1em;
    top: 50%;
    transform: translateY(-60%) rotate(-45deg);
    pointer-events: none;
    color: #333333; /* Couleur par défaut de l'icône */
}

.accordions-trigger[aria-expanded="true"]::before {
    transform: translateY(-60%) rotate(45deg);
}

.accordions-panel {
    margin: 0;
    padding: 1em 1.5em;
}

/* Masquer les panneaux fermés */
.accordions-panel[hidden] {
    display: none;
}

/* -----------------------
 Personnalisation des couleurs  à modifier par charte
 ------------------------- */


.accordions .accordions-trigger {
    background-color: #dddddd; /* Couleur de fond */
}

.accordions .accordions-trigger::before{
    color: #333333; /* Couleur de l'icône */
}

.accordions-title {
    color: #333333; /* Couleur du titre */
}

.accordions .accordions-trigger.open,
.accordions-trigger:focus,
.accordions-trigger:hover {
    background-color: #DC0814; /* Couleur de fond quand l'accordéon est ouvert ou focusé */
}

.accordions .accordions-trigger.open::before,
.accordions-trigger:focus::before,
.accordions-trigger:hover::before {
    color: #FFFFFF; /* Couleur de l'icône quand l'accordéon est ouvert ou focusé */
}

.accordions .accordions-trigger.open .accordions-title,
.accordions-trigger:focus .accordions-title,
.accordions-trigger:hover .accordions-title {
    color: #FFFFFF; /* Couleur du titre quand l'accordéon est ouvert ou focusé */
}