body {
    user-select: none;
    background-color: #E5FFDF;
    margin:0;
    display: flex;
}

body a {
    text-decoration: none;
    color: #000000;
}

/*

Page_1

*/
/*----------------HEADER----------------*/
#header {
	position :fixed;
	width: 100vw;
	height: 22.22vh;
	background-color: #FF964F;
	
}
#logo {
	position :relative;
	height:15vh;
	width: auto;
	left : 6vw;
	top : 4vh;
}
#Titre {
	position : fixed;
	
	width : 40vw;
	height : 7.8vh;
	left : 28.8vw;
	top : 2vh;
	color: #FFF;
	font-family: Inter;
	font-size: 48px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	text-align: center;

}

/*-------------------------Dropzones------------------------------*/
.food_container {
	display : table-column;
	margin-top: 30vh;
	margin-left : 7vw;
	margin-right: 2vw;
	width: 35vw;
	height: 60vh;
	
	padding-left: 2vw;
	padding-right: 2vw;
	padding-top: 20px;
	padding-bottom: 20px;
}

#food_container_overall h2 {
	text-align : center;
	color : #8dd425;
}

#food_container_overall div {
	margin: 0px;
	cursor : pointer;
	border : solid 3px #8dd425;
	border-radius: 10px;
	margin-top: 10px;
	padding-top: 10px;
}

#food_container_overall h3 {
	text-align : center;
}
#food_container_overall img{
	margin-left: 6vw;
	width : 10vw;
	height: auto;
}

#basket_container{
	position: relative;
	margin-left : 2vw;
	margin-right: 25vw;
	margin-top: 30vh;
	width: 40vw;
	height: 60vh;
	
	padding-left: 2vw;
	padding-right: 2vw;
	padding-top: 20px;
	padding-bottom: 20px;
}

#basket_container img {
	margin :2vh 1vw;
	cursor: grab;
	height: auto;
	width:7vw;
}

#basket_container img:active{
	cursor: grabbing;
}

#poub {
	position :fixed;
	height:30vh;
	width: auto;
	left : 81vw;
	top : 35vh;
}


.food_container2 {
	display: flex;
  	flex-wrap: wrap;
	margin-top: 30vh;
	margin-left : 7vw;
	margin-right: 2vw;
	width: 35vw;
	height: 60vh;
	
	padding-left: 2vw;
	padding-right: 2vw;
	padding-top: 20px;
	padding-bottom: 20px;
}


.food_container2 div{
	max-width: 10vw;
	max-height: auto;
  	margin: 10px; /* Marge entre les éléments */
  	text-align: center; /* Centrage du contenu */
  	cursor: grab;
}
.food_container2 div:active{
	cursor: grabbing;
}
.food_container2 img{
	width: 9vw;
	height:auto;
}
.food_container2 h3 {
	}

.return-button {
  display: none;
  position: absolute;
  top: 40vh;
  left: 8vw;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #8de025;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.return-button:hover {
  background-color: #8dd425;
}


/* Barre de défilement verticale */
.all_container_class::-webkit-scrollbar {
  width: 12px; /* Largeur de la barre de défilement */
}

.all_container_class::-webkit-scrollbar-thumb {
  background-color: #8dd425; /* Couleur de la poignée */
  border-radius: 6px; /* Bord arrondi de la poignée */
}

/* Barre de défilement horizontale */
.all_container_class::-webkit-scrollbar-track {
  background-color: #BDECB6; /* Couleur de la piste */
}

.all_container_class::-webkit-scrollbar-track-piece:start {
  background-color: #BDECB6; /* Couleur de la partie de piste avant la poignée */
}

.all_container_class::-webkit-scrollbar-track-piece:end {
  background-color: #BDECB6; /* Couleur de la partie de piste après la poignée */
}


.all_container_class {
	background-color: #BDECB6;

}

#validation_button {
	position: absolute;
  	top: 75vh;
  	left: 85vw;

    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    }

#validation_button {
      background-color: #8de025;
      color: #fff;
    }

#validation_button:hover {
      background-color: #8dd425;
    }




.dragging {
	display : none;
}
#basket_under {
	position: absolute;
  	top: 0;
  	left: 0;
}

#dropzone_covering {
	position: absolute;
  	top: 20px;
  	left: 2vw;
  
  	width: 25vw;
	height: 60vh;
}



/*
Page_2
*/
#lancer_jeu {
	position: absolute;
  	top: 75vh;
  	left: 64vw;

    padding: 10px 20px;
    font-size: 1.1vw;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    background-color: #8de025;
    color: #fff;
}

#lancer_jeu:hover {
      background-color: #8dd425;
    }

#pCompteur {
	font-size: 5vw;
	min-width : 12vw;
	position: absolute;
	color:black;
	text-align: center;
  	top: 70vh;
  	left: 67vw;
}

#contenant_animation{
	position : absolute;
	
	top:30vh;
	left : 45vw;
	padding : 2vh 15vw;
	background-color: #FABF58;
}
.image_animation {
	width: 20vw;
	height: auto;
}

#container_panier {

	margin-top: 30vh;
	margin-left: 7vw;
	margin-right: 2vw;
	width: 22vw;
	height: 40vh;
	
	padding-left: 2vw;
	padding-right: 2vw;
	padding-top: 20px;
	padding-bottom: 20px;
}

#container_panier div{
	max-width: 10vw;
	max-height: auto;
  	margin: 10px; /* Marge entre les éléments */
  	text-align: center; /* Centrage du contenu */
  	cursor: grab;
}
#container_panier div:active{
	cursor: grabbing;
}
#container_panier img{
	width: 8vw;
	height:auto;
}
#container_panier h2 {
	text-align : center;
	color : #8dd425;
}


/* Conteneur du panier */
.basket-item {
	margin: 10px 0;
	display: flex;
	align-items: center;
  }
  
  /* Bouton de suppression */
  .delete-btn {
	background-color: transparent; /* Bouton sans fond initial */
	color: red; /* Couleur de l'icône */
	border: 2px solid red; /* Contour rouge pour démarcation */
	border-radius: 50%; /* Bouton circulaire */
	cursor: pointer;
	width: 30px; /* Dimensions fixes pour un cercle parfait */
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center; /* Centrer l'icône ❌ */
	font-size: 18px; /* Taille du texte (❌) */
	transition: all 0.3s ease; /* Transition fluide pour les effets */
  }
  
  /* Effet de survol */
  .delete-btn:hover {
	background-color: red; /* Fond rouge au survol */
	color: white; /* Texte blanc pour contraste */
	transform: scale(1.1); /* Légère mise en avant */
  }
  
  /* Bouton actif (clic) */
  .delete-btn:active {
	transform: scale(1); /* Réinitialiser l'échelle */
	opacity: 0.8; /* Réduire l'opacité légèrement */
  }