/* Recentrage du titre pour mobile */
h1 {
  text-align: center;
  font-size: 1.5rem;  /* Taille plus petite sur mobile */
  padding: 10px;
}

/* Disposition du filtre sur mobile */
#filterMenu {
  margin-bottom: 20px; /* Ajout d'espace en bas pour éviter que les filtres soient trop proches du contenu */
  box-shadow: none; /* Enlever l'ombre pour un affichage plus simple */
}

#filterForm h5 {
  font-size: 1rem;  /* Taille réduite pour mobile */
}

#filterForm .form-check-label {
  font-size: 0.9rem; /* Plus petit sur mobile */
}

/* Affichage des recettes en une seule colonne sur petit écran */
@media (max-width: 768px) {
  .col-md-3 {
    width: 100%; /* Les filtres prennent toute la largeur */
    margin-bottom: 20px; /* Marge entre le filtre et les recettes */
  }

  .col-md-9 {
    width: 100%; /* Les recettes prennent toute la largeur */
  }

  /* Gérer l'affichage des cartes de recettes */
  .col-md-4 {
    flex: 1 0 100%;  /* Une seule carte par ligne sur petit écran */
    margin-bottom: 15px;  /* Ajouter de l'espace entre les cartes */
  }

  .recipe {
    padding: 10px;
  }

  .recipe-image {
    height: 200px; /* Image moins haute sur mobile */
    object-fit: cover; /* Pour mieux remplir l'espace */
  }

  .recipe h2 {
    font-size: 1.2rem;  /* Taille plus petite sur mobile */
  }
}

/* Disposition des cartes de recettes sur écran très petit (moins de 480px) */
@media (max-width: 480px) {
  .recipe h2 {
    font-size: 1rem; /* Réduire encore plus la taille du titre */
  }

  /* Afficher les éléments sous forme de liste (plus lisible) */
  .recipe {
    padding: 15px;
    text-align: left;  /* Alignement à gauche pour une lecture plus fluide */
  }

  .recipe-image {
    height: 150px; /* Image encore plus petite */
  }

  /* Ajuster la taille des boutons */
  #filterForm button {
    width: 100%; /* Les boutons prennent toute la largeur */
    margin-top: 10px;
  }
}

/* Responsive des icônes de filtrage (si utilisé) */
#filterMenu .form-check {
  margin-bottom: 12px; /* Ajouter de l'espace entre les options */
}

@media (max-width: 768px) {
  .filter-group {
      display: block;
      margin-bottom: 10px;
  }
  .recipe:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}
@media (min-width: 769px) {
  .filter-group {
      display: inline-block;
      width: 30%;
      margin-right: 5%;
  }
}

.update-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff9800;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 9999;
}
.update-banner button {
    background: white;
    color: #ff9800;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
}
.update-banner button:hover {
    background: #ffe0b2;
}

.update-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999; /* Force au-dessus de Select2 */
}

.update-popup-content {
    position: relative;
    text-align: center;
}
.update-popup h2 {
    color: #ff9800;
}
.update-popup ul {
    list-style: none;
    padding: 0;
}
.update-popup li {
    margin: 5px 0;
    font-size: 16px;
}
.update-popup button {
    background: #ff9800;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}
.update-popup button:hover {
    background: #e68900;
}

.favorite-container {
    position: absolute;
    top: 10px;
    right: 10px;
}

.favorite-toggle {
    font-size: 32px; /* Plus grand */
    cursor: pointer;
    color: grey;
    transition: color 0.3s ease-in-out;
}

.favorite-toggle.favorite {
    color: gold;
}

/* Empêcher le clic sur l'étoile d'ouvrir la recette */
.favorite-toggle {
    pointer-events: auto; /* Permettre le clic */
    z-index: 9999;
}