#accordeon {
    /* pour que les éléments soient alignés horizontalement */
    display: flex;
    /* pour éviter les marges par défaut */
    margin: 0;
    /* pour éviter les "padding" par défaut */
    padding: 0;
}

#accordeon li {
    /* largeur de chaque élément replié 107px */
    width: 105px;
    /* pour cacher le contenu dépassant de l'élément */
    overflow: hidden;
    /* pour l'animation, transition sur width */
    transition: width 0.5s;
    /* couleur de fond #eee */
    background-color: #eee;
    /* pour enlever les puces */
    list-style-type: none;
    /* pour espacer les éléments, marge de 3px */
    margin: 3px;
    /* pour espacer le contenu, padding de 5px */
    padding: 5px;
    /* pour arrondir les bords de 5px */
    border-radius: 5px;
}

#accordeon li.actif {
    /* largeur de l'élément déplié 317px */
    width: 317px;
}

#accordeon li figure {
    /* pour éviter les marges par défaut */
    margin: 0;
    /* pour que les éléments soient alignés horizontalement */
    display: flex;
    /* largeur de l'élément intrérieur de 317px (= déplié) */
    width: 317px;
    /* pour que toutes les images aient la meme taille */
    height: 100%;
}

#accordeon li figure figcaption {
    /* largeur du texte de 200px */
    width: 200px;
    /* pour espacer le texte, padding de 10px */
    padding: 10px;
    /* pour que les éléments soient alignés verticalement */
    display: flex;
    flex-direction: column;
    /* espace entre les éléments */
    justify-content: space-between;
}

/* Sur tous les enfants de figcation */
#accordeon li figure figcaption > * {
    /* pour éviter les marges par défaut */
    margin: 0;
    /* pour éviter les "padding" par défaut */
    padding: 0;
}