/* === Menu accordéon (version corrigée) === */
#menu-accordeon {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 220px;
  font-family: verdana;
  background-color: #EDE6C8; /* couleur de fond du menu */
}

/* Cache les cases à cocher */
#menu-accordeon input {
  display: none;
}

/* Styles des labels (menus principaux) */
#menu-accordeon label {
  display: block;
  background-color: #B4AD81;
  color: #8B7C3F;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 1.em;
  border-radius: 0px;
  margin-bottom: 2px;
}

/* Flèche par défaut (menu fermé) */
#menu-accordeon label::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  vertical-align: middle;
  /*
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><polygon points="8,5 16,12 8,19" fill="white"/></svg>');
  */
  background-size: contain;
  background-repeat: no-repeat;
}

/* Flèche vers le bas (menu ouvert) */
#menu-accordeon input:checked + label::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><polygon points="5,8 12,16 19,8" fill="white"/></svg>');
  background-color: #B4AD81;
}

/* Sous-menu - état fermé (conserve la transition) */
#menu-accordeon ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease;
  padding-left: 15px; /* décalage */
  list-style: none;
  margin: 0;
  /* ajout d'un padding-bottom de sécurité pour éviter que
     la marge du dernier li "pousse" hors du conteneur fermé */
  padding-bottom: 0.25rem;
}

/* Affiche le sous-menu si case cochée */
/* - max-height augmenté suffisamment pour contenir beaucoup d'items */
/* - overflow basculé en visible pour éviter le rognage des marges */
/* - on conserve la transition via max-height pour l'animation */
#menu-accordeon input:checked + label + ul {
  max-height: 1000px;      /* valeur large pour ne pas rogner */
  overflow: visible;
  padding-bottom: 0.5rem;  /* filet de sécurité en bas */
}

/* Styles des liens de sous-menu */
#menu-accordeon ul li a {
  display: block;
  background-color: #FFFFFF ;/*#A79B6B;*/
  background-image: url("site-bg.jpg");
  color: #b38420;
  font-size: 0.9em;
  padding: 6px;
  text-decoration: none;
}

/* Supprime la marge basse éventuelle du dernier li pour éviter le débordement */
#menu-accordeon > li > ul > li:last-child {
  margin-bottom: 0;
}

/* Chevron pour les sous-menus */
#menu-accordeon ul li a::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  vertical-align: middle;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24"><polygon points="8,5 16,12 8,19" fill="white"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

/* Option (facultative) : si vous préférez une méthode sans animation (jamais rognée) */
/* Décommentez ces règles et commentez celles utilisant max-height/transition ci-dessus. */
/*
#menu-accordeon ul { display: none; }
#menu-accordeon input:checked + label + ul { display: block; }
*/