body {
      background-color: #f8f9fa;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: center;
      padding: 20px;
    }
    .welcome-text {
      font-size: 1.8rem;
      margin-top: 50px;
    }
    .footer {
      margin-bottom: 30px;
    }
    .option-btn {
	  min-width: 100px;
	  min-height: 100px;
	  margin: 10px;
	  font-size: 1.1rem;
	  border: none;
	  border-radius: 1rem;
	  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	  transition: all 0.3s ease-in-out;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	}

	.option-btn i {
	  font-size: 1.8rem;
	  margin-bottom: 5px;
	}

	/* Hover/Touch Effects */
	.option-btn:hover, .option-btn:focus {
	  transform: scale(1.05);
	  box-shadow: 0 0 15px rgba(0,0,0,0.4);
	}

	/* Active (click/tap) */
	.option-btn:active {
	  transform: scale(0.96);
	  box-shadow: 0 0 5px rgba(0,0,0,0.2);
	}

	/* Specific glow for each button */
	.btn-primary {
	  background: linear-gradient(135deg, #007bff, #3399ff);
	  color: white;
	}
	.btn-primary:hover {
	  box-shadow: 0 0 15px #3399ffaa;
	}

	.btn-success {
	  background: linear-gradient(135deg, #28a745, #5cd65c);
	  color: white;
	}
	.btn-success:hover {
	  box-shadow: 0 0 15px #5cd65caa;
	}

	.btn-warning {
	  background: linear-gradient(135deg, #ffc107, #ffda66);
	  color: #333;
	}
	.btn-warning:hover {
	  box-shadow: 0 0 15px #ffda66aa;
	}
	
	@keyframes pulse {
	  0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.4);
	  }
	  70% {
		transform: scale(1.05);
		box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
	  }
	  100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
	  }
	}

	.option-btn {
	  animation: pulse 2.5s infinite;
	}
	
	@keyframes shrinkImage {
	  from {
		width: 300px;
	  }
	  to {
		width: 50px;
	  }
	}

	.animate-shrink {
	  animation: shrinkImage 1.0s ease forwards;
	}
	
	.option-group .btn:not(.active) {
	  background-color: transparent !important;
	  /*color: inherit !important;*/
	  /*border-color: #0d6efd; /* ou la couleur Bootstrap */
	}
	
	.option-group .btn:not(.active):hover {
	  background-color: rgba(13,110,253,0.1) !important; /* léger hover custom */
	  color: inherit !important;
	}
	
	.input-group-sm > .form-control {
	  padding: 0.25rem 0.5rem;
	  font-size: 0.875rem;
	}
	.btn-moins, .btn-plus {
	  width: 36px;
	}
	
	/*.option-item.active {
	  background-color: #e7f1ff;
	  border-color: #0d6efd;
	}*/
	
	@keyframes bounce-alert {
	  0%   { transform: translateX(-50%) scale(1); }
	  25%  { transform: translateX(-50%) scale(1.1); }
	  50%  { transform: translateX(-50%) scale(0.95); }
	  75%  { transform: translateX(-50%) scale(1.05); }
	  100% { transform: translateX(-50%) scale(1); }
	}

	#option-alert.bounce {
	  animation: bounce-alert 0.5s ease;
	}
	
	.card.categorie, .card.produit
	{
		cursor:pointer;
	}
	
	#quantite-zone {
	  text-align: center;
	}
	
	@keyframes bounce-scale {
	  0%   { transform: scale(1); }
	  25%  { transform: scale(1.2); }
	  50%  { transform: scale(0.9); }
	  75%  { transform: scale(1.05); }
	  100% { transform: scale(1); }
	}

	.bounce {
	  animation: bounce-scale 0.3s ease;
	}
	
	.navbar.fixed-bottom {
	  z-index: 1055; /* au-dessus des modals */
	}

	.navbar a {
	  width: 80px;
	  font-size: 0.85rem;
	}

	.navbar i {
	  transition: transform 0.2s ease;
	}

	.navbar a:active i {
	  transform: scale(0.9);
	}

	#badge-bottom-panier {
	  font-size: 0.7rem;
	}
	
	.restaurant-card {
      cursor: pointer;
      transition: transform 0.2s ease;
    }
    .restaurant-card:hover {
      transform: scale(1.02);
    }
    .navbar-brand {
      font-weight: bold;
    }
	
	#typewriter-text::after {
	  content: '|';
	  animation: blink 0.8s infinite;
	  color: #666;
	  font-weight: normal;
	}

	@keyframes blink {
	  0% { opacity: 1; }
	  49% { opacity: 1; }
	  50% { opacity: 0; }
	  100% { opacity: 0; }
	}
	
	.btn-outline-pill {
	  border: 1px solid #ccc;
	  border-radius: 999px;
	  padding: 0.4rem 1rem;
	  background-color: #f8f9fa;
	  font-weight: 500;
	  transition: all 0.2s ease-in-out;
	  cursor: pointer;
	  color: #333;
	}

	.btn-check:checked + .btn-outline-pill {
	  background-color: #0d6efd;
	  color: #fff;
	  border-color: #0d6efd;
	  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
	}

	.fade-in {
	  animation: fadeIn 0.3s ease-in forwards;
	}
	@keyframes fadeIn {
	  from { opacity: 0; transform: translateY(-5px); }
	  to { opacity: 1; transform: translateY(0); }
	}
	
	.categorie-lien {
	  color: #0d6efd;
	  opacity: 0.6;
	  transition: opacity 0.2s;
	}

	.categorie-lien:hover {
	  opacity: 1;
	  text-decoration: underline;
	}

	.categorie-lien.active {
	  opacity: 1;
	  font-weight: bold;
	  text-decoration: underline;
	}
	
	@keyframes shrinkLogo {
	  from {
		width: 100%;
	  }
	  to {
		width: 40%;
	  }
	}

	.animate-shrink-logo {
	  animation: shrinkLogo 0.6s ease forwards;
	  margin: auto;
	  display: block;
	  margin-bottom: 2rem;
	}

	.bouton-degrade {
		background: linear-gradient(to bottom, #f7f7f7 0%, #fff 50%, #f5f5f5 100%);
		border: 1px solid #ddd9d9;
		padding: 10px 20px;
		color: #333;
		/* font-weight: bold; */
		font-size: small;
		border-radius: 20px;
		cursor: pointer;
	}
	
	/* Optionnel : popover un peu plus large et texte non tronqué */
	.help-popover { 
	  max-width: 260px !important; 
	  white-space: normal !important; 
	}