/* RESPONSIVE MAP */

	@media (max-width: 768px) 
	{
		/* Styles spécifiques pour les écrans mobiles et tablettes */
		
		.grid-container.resto-container {
			width: 200%;
			margin: 12px 0 0 0;
			margin-left: -100%;
		}
		
		#detailsMap {
			width: 100%;
		}
		
		/* Languette pour l'animation */
		#languette {
			position: fixed;
			top: 60px;
			left: 0;
			z-index: 1000;
			background-color: #282A35;
			color: white;
			padding: 10px 15px;
			cursor: pointer;
			border-radius: 0 5px 5px 0;
		}

		/* Transition pour le changement de margin-left */
		.grid-container.resto-container {
			transition: margin-left 0.3s ease;
		}

		/* Lorsque la carte est visible */
		.show-map .grid-container.resto-container {
			margin-left: 0;
		}
	}
	/* Réinitialisation pour les écrans au-dessus de 768px */
	@media (min-width: 769px) {
		.grid-container.resto-container {
			margin-left: 0 !important; /* Réinitialiser la marge */
			transition: none;
		}

		#languette {
			display: none; /* Cacher la languette en version desktop */
		}
	}
	
.item-resto_list {
	grid-area: list;
}

.item-resto_map {
	grid-area: map;
}

.grid-container.resto-container {
	display: grid;
	
	grid-template-columns: repeat(8, 1fr);
	grid-template-areas:
		'list list list list map map map map';
		
		
	gap: 15px 15px;
	/*background-color: #2196F3;*/
	
	padding: 12px 12px 0px 12px;
}



.restaurant {
    display: grid;
    grid-template-columns: 140px auto; /* Définit une largeur fixe pour l'image et auto pour les infos */
    gap: 10px; /* Conserve l'espacement entre les deux zones */
    
    margin-bottom: 10px;
}

.restaurant-image img {
    width: 100%; /* Assure que l'image prend toute la largeur de .restaurant-image */
    height: auto; /* Garde les proportions de l'image */
}

.restaurant-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.info-header h3, .info-header p {
    margin: 0; /* Supprime les marges par défaut */
    /* Ajoutez d'autres styles ici au besoin */
}

.info-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.info-footer span {
    margin-right: 5px; /* Espacement entre la note et l'étoile */
}

.fa-star {
    color: gold; /* Change la couleur de l'étoile */
}