body { background-color:  beige;}

h1 {color: black;}



/* Container principal en flex pour aligner les listes et l'image */
.image-container {
  display: flex;
  align-items: flex-start; /* <--- aligne tout en haut */
  justify-content: center; 
  gap: 40px;               /* espace entre listes et image */
}

/* Styles communs pour toutes les listes */
.side-list {
  list-style: none;       /* supprime les puces */
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column; /* vertical */
  gap: 10px;              /* espace entre <li> */
}

/* Liste gauche : alignement du texte vers la droite */
.left-list {
  text-align: right;
}

/* Liste droite : alignement du texte vers la gauche */
.right-list {
  text-align: left;
  align-self: flex-start; /* <--- force la liste en haut de son conteneur */
}

/* Styles des <li> */
.side-list li {
  background-color: ;
  padding: 5px 10px;
  border-radius: 5px;
  font-weight: bold;
  transition: transform 0.2s, background-color 0.2s;
  cursor: pointer;
}

/* Effet au survol */
.side-list li:hover {
  background-color: #ffd700;
  transform: scale(1.05);
}


img {
  pointer-events: none;
}