#accordeon {
  /* pour que les éléments soient alignés horizontalement */
  /* pour éviter les marges par défaut */
  /* pour éviter les "padding" par défaut */
  display: flex;
  border: 1px solid #ddd;
  border-radius: 0;
  display: flex;
  padding: 1px;
}

#accordeon li {
  /* largeur de chaque élément replié 107px */
  /* pour cacher le contenu dépassant de l'élément */
  /* pour l'animation, transition sur width */
  /* couleur de fond #eee */
  /* pour enlever les puces */
  /* pour espacer les éléments, marge de 3px */
  /* pour espacer le contenu, padding de 5px */
  /* pour arrondir les bords de 5px */
  width: 107px;
  overflow: hidden;
  transition: width 0.3s;
  background-color: #eee;
  list-style-type: none;
  margin: 3px;
  padding: 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 */
  /* pour que les éléments soient alignés horizontalement */
  /* largeur de l'élément intrérieur de 317px (= déplié) */
  margin: 0;
  display: flex;
  width: 317px;
}

#accordeon li figure figcaption {
  /* largeur du texte de 200px */
  /* pour espacer le texte, padding de 10px */
  /* pour que les éléments soient alignés verticalement */

  /* espace entre les éléments */
  width: 200px; /* largeur du texte */
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

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