.ouvert {
    color: #E9A7AF;
    border: 10px solid #282627;
}
.btnacc {
    color: #FFF;
}
#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: 107px;

    /* pour cacher le contenu dépassant de l'élément */
    overflow: hidden;

    /* pour l'animation, transition sur width */
    transition: width 1s;

    /* 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;
   color: #282627; 
}

#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;
}

#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 */
    align-items: center;

    /* espace entre les éléments */
    gap: 10px;
}

/* 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;
}

#onglets ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

#onglets ul li {
    padding: 10px 15px;
    cursor: pointer;
    color: #282627;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#onglets ul li {
    padding: 10px 15px;
    cursor: pointer;
    background-color: #E9A7AF; 
    
    border-top-left-radius: 5px; /* arrondit le coin supérieur gauche */
    border-top-right-radius: 5px; /* arrondit le coin supérieur droit */
}

#onglets ul li.actif {
    padding: 10px 15px;
    cursor: pointer;
    border-top-left-radius: 10px; /* arrondit le coin supérieur gauche */
    border-top-right-radius: 10px; /* arrondit le coin supérieur droit */
    background-color: #FFF; /* couleur de fond pour l'onglet actif */
    color: #282627;
}

#onglets div {
    position: relative;
    height: 200px;
    width: 100%;

}


#onglets div>div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #282627;
    background-color: white;
    border-radius: 3px; /* bordures arrondies */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
    padding: 20px; /* espace intérieur */
}

#onglets div>div.active {
    opacity: 1;
}


body {
    font-size: 14px;
    color: #FFF;
    background-color: #282627;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.header__menu-Btn {
    position: relative;
    z-index: 10;
    border-radius: 5px;
    padding: 15px;
  }

  button {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  }

  .menu-btn__bar,
.menu-btn__bar::before,
.menu-btn__bar::after {
    content: "";
    display: block;
    height: 2px;
    width: 100%;
    background-color: white;
    position: absolute;
    left: 0;
    z-index: 10;
    border-radius: 5px;
}

.menu-btn__bar::before {
    top: -10px;
}

.menu-btn__bar::after {
    top: 10px;
}

.menu {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: #E9A7AF;
    z-index: 5;
    display: flex; 
    justify-content: center; 
    align-items: center; 
}
.menu ul {
    list-style-type: none; /* enlève les puces */
    color: #282627;
}
.menu ul li a {
    text-decoration: none; /* enlève le soulignement */
    color: inherit; /* hérite la couleur du texte du parent */
}
.menu ul li {
    margin: 30px 0; /* ajoute une marge en haut et en bas */
    font-size: 1.2rem; /* taille du texte */
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}