.carousel {
	scroll-snap-type: x mandatory;
	display: flex;
	-webkit-overflow-scrolling: touch;
	overflow-x: auto;
	background-color: #f1efe6;
	position : relative;
	scroll-behavior: smooth;
}

.rule-1 {
	background-color: #aecae2;
}

.rule-2 {
	background-color: #fbfe67;
	align-items: center;
}

.rule-3 {
	background-color: #c9b6d4;
}

.rule-4 {
	background-color: #aecae2;
}

.rule {
	min-width: 80vw;
	text-align: center;
	padding: 1rem;
	border: 1px solid #f1efe6;
	scroll-snap-align: center;
}

.rule-die {
	max-width: 60px;
}

/* TRIANGLE */

#next-button {
  width: 0;
  height: 0;
  
  /* construction */
  border-left: 25px solid #aecae2;
  border-bottom: 12px solid transparent;
  border-top: 12px solid transparent; 
  cursor: pointer;
  
  position: absolute;  /* Positionne le triangle par rapport au carousel */
  top: 50%;            /* Centrer verticalement */
  left: 94%;           /* Centrer horizontalement */
  transform: translate(-50%, -50%); /* Permet de centrer parfaitement */  
  
  z-index: 2;
}

.next-button::after {
	content: '';
	position: absolute;
	top: -10px; /* Ajuste selon la zone que tu veux ajouter */
	left: -10px; /* Ajuste la zone autour du bouton */
	right: -10px;
	bottom: -10px;
	z-index: 4; /* Assure que l'extension de la hit box soit en dessous du bouton */
	pointer-events: auto; /* Permet à la zone invisible d'être cliquée */
  }