/* ==========================================================================
   PAGE LISTE RECETTES (CATALOGUE)
   ========================================================================== */

/* --- 1. Utilitaires --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Spinner de chargement AJAX */
.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.spinner {
  border: 4px solid rgba(247, 197, 72, 0.2);
  border-top: 4px solid var(--clr-accent-gold);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --- 2. En-tête Catalogue --- */
.catalog-header {
  margin-bottom: var(--space-l);
}

.catalog-header h1 {
  margin-bottom: var(--space-s);
  font-size: 3rem;
  color: var(--clr-text-main);
}

.catalog-header p {
  max-width: 100%;
  font-size: 1.125rem;
  color: var(--clr-text-main);
}

/* --- 3. Barre d'outils (Toolbar) --- */
.toolbar-section {
  margin-bottom: var(--space-xl);
}

.filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
  padding: 24px;

  background-color: var(--clr-bg-white);
  border-radius: var(--radius-l);
  box-shadow: 0 4px 24px
    color-mix(in srgb, var(--clr-text-soft), transparent 94%);
}

/* --- A. Bloc Recherche --- */
.search-container-block {
  flex: 1 1 400px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.search-group {
  position: relative;
  width: 100%;
}

.search-group input {
  width: 100%;
  height: 48px;
  padding-left: 48px;
  padding-right: 40px;

  font-family: var(--font-sans);
  font-size: 1rem;

  background-color: var(--clr-bg-body);
  border: 1px solid color-mix(in srgb, var(--clr-text-main), transparent 85%);
  border-radius: var(--radius-m);

  transition: all 0.2s ease;

  /* Reset Apparence */
  -webkit-appearance: none;
  appearance: none;
}

/* Reset des décorations de recherche Webkit */
.search-group input::-webkit-search-decoration,
.search-group input::-webkit-search-cancel-button,
.search-group input::-webkit-search-results-button,
.search-group input::-webkit-search-results-decoration {
  display: none;
  -webkit-appearance: none;
  appearance: none;
}

.search-group input:hover {
  border-color: color-mix(in srgb, var(--clr-text-main), transparent 60%);
}

.search-group input:focus {
  background-color: #fff;
  border-color: var(--clr-text-main);
  outline: none;
}

.field-icon {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 20px;
  height: 20px;
  color: color-mix(in srgb, var(--clr-text-main), transparent 50%);
  pointer-events: none;
  transform: translateY(-50%);
}

.clear-btn {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);

  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: color-mix(in srgb, var(--clr-text-main), transparent 60%);

  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
}

.clear-btn.visible {
  opacity: 1;
  visibility: visible;
}

.clear-btn:hover {
  color: var(--clr-text-main);
}

.clear-btn .lucide {
  width: 18px;
  height: 18px;
}

/* Tags Suggestions */
.tags-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
}

.suggestion-label {
  margin-right: 4px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--clr-text-main), transparent 50%);
}

.filter-tag-btn {
  height: 28px;
  padding: 0 12px;

  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--clr-text-main);

  background-color: transparent;
  border: 1px solid color-mix(in srgb, var(--clr-text-main), transparent 80%);
  border-radius: var(--radius-full);

  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-tag-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-color: var(--clr-text-main);
}

.filter-tag-btn.active {
  color: var(--clr-bg-white);
  background-color: var(--clr-text-soft);
  border-color: var(--clr-text-soft);
}

/* --- B. Bloc Filtres (Droite) --- */
.filters-group {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  gap: 16px;
}

.custom-select-container {
  position: relative;
  min-width: 180px;
  font-family: var(--font-sans);
}

.custom-select-container select {
  display: none;
}

/* Select Custom */
.select-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 12px 16px;

  font-size: 0.95rem;
  font-weight: 600;
  color: var(--clr-text-main);

  background-color: var(--clr-bg-body);
  border: 1px solid color-mix(in srgb, var(--clr-text-main), transparent 85%);
  border-radius: var(--radius-m);

  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.select-selected:after {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border: solid var(--clr-text-main);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform 0.2s;
}

.select-selected.select-arrow-active:after {
  margin-top: 4px;
  transform: rotate(-135deg);
}

.select-selected:hover {
  background-color: #f9f9f9;
  border-color: color-mix(in srgb, var(--clr-text-main), transparent 50%);
}

/* Select Items (Dropdown) */
.select-items {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;

  margin-top: 4px;
  overflow: hidden;

  background-color: #fff;
  border: 1px solid color-mix(in srgb, var(--clr-text-main), transparent 90%);
  border-radius: var(--radius-m);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.select-hide {
  display: none;
}

.select-items div {
  padding: 10px 16px;
  font-size: 0.95rem;
  color: var(--clr-text-main);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.1s;
}

.select-items div:hover,
.same-as-selected {
  color: var(--clr-text-main);
  background-color: #f0f0f0;
}

/* Reset Link */
.reset-link {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 8px;

  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clr-text-main);
  text-decoration: none;
  white-space: nowrap;

  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.reset-link:hover {
  opacity: 1;
  text-decoration: underline;
}

.reset-link.disabled {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
  text-decoration: none;
  visibility: visible;
}

.results-count {
  margin-top: 16px;
  padding-left: 8px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--clr-text-main), transparent 40%);
}

/* --- 4. Grille de Résultats --- */
.recipes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-l);
  margin-bottom: 80px;
  align-items: stretch; /* Force toutes les cartes à la même hauteur */
  backface-visibility: hidden; /* Force reflow */
  -webkit-backface-visibility: hidden;
}

/* --- 5. Bouton "Load More" --- */
.hidden-recipe {
  display: none;
}

.load-more-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 48px;
}

#btn-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  padding: 12px 32px;

  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-text-inverse);

  background-color: var(--clr-accent-green);
  border: none;
  border-radius: var(--radius-m);

  /* CORRECTIF : Ombre noire douce (au lieu de verte) */
  box-shadow: 0 4px 8px
    color-mix(in srgb, var(--clr-text-soft), transparent 76%);

  cursor: pointer;
  transition: all 0.2s ease;
}

#btn-load-more:hover {
  background-color: color-mix(in srgb, var(--clr-accent-green), black 10%);
  /* Ombre plus diffuse au hover */
  box-shadow: 0 8px 16px
    color-mix(in srgb, var(--clr-text-soft), transparent 76%);
  transform: scale(1.02);
}

#btn-load-more:active {
  transform: scale(0.98);
}

#btn-load-more .lucide {
  width: 20px;
  height: 20px;
  margin-left: 8px;
  transition: transform 0.2s ease;
}

#btn-load-more:hover .lucide {
  transform: translateY(2px);
}

/* ==========================================================================
   RESPONSIVE MOBILE (CATALOGUE / LISTE)
   ========================================================================== */

@media (max-width: 1024px) {
  .recipes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  
  /* 1. En-tête plus compact */
  .catalog-header h1 {
    font-size: 2.25rem;
    margin-bottom: 16px;
  }
  
  /* 2. Barre d'outils (Toolbar) : Empilement Vertical */
  .filter-toolbar {
    flex-direction: column; /* On empile tout */
    align-items: stretch; /* Tout prend toute la largeur */
    gap: 24px;
    padding: 24px 16px; /* Moins de padding latéral */
  }

  /* Bloc Recherche */
  .search-container-block {
    flex: auto;
    width: 100%;
  }

  /* CORRECTION TAGS : Scroll Horizontal Fluide */
  .tags-suggestions {
    display: flex;
    flex-wrap: nowrap; /* Force une seule ligne */
    overflow-x: auto; /* Active le scroll */
    gap: 8px;
    padding-bottom: 4px;
    
    /* Cache la barre de défilement moche */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; 
  }
  .tags-suggestions::-webkit-scrollbar { display: none; }

  /* CACHER LE LABEL "Suggestions :" sur mobile */
  .suggestion-label {
    display: none; 
  }
  
  /* Empêche les boutons d'être écrasés */
  .filter-tag-btn {
    flex: 0 0 auto; 
  }

  /* Bloc Filtres (Selecteurs) */
  .filters-group {
    flex-direction: column; /* Empile les Selects */
    width: 100%;
    align-items: stretch;
  }

  .custom-select-container {
    width: 100%;
    min-width: 0;
  }
  
  /* Le lien "Réinitialiser" centré en bas */
  .reset-link {
    justify-content: center;
    padding: 12px;
    width: 100%;
    border: 1px dashed color-mix(in srgb, var(--clr-text-main), transparent 80%);
    border-radius: var(--radius-m);
  }

  /* 3. Résultats et Grille */
  .results-count {
    text-align: center;
    margin-top: 0;
    margin-bottom: 16px;
  }

  .recipes-grid {
    grid-template-columns: 1fr; /* 1 seule colonne */
    gap: 32px;
  }

  /* Ajustement visuel des cartes dans la liste */
  .smart-card {
    height: auto !important; /* Laisse la carte grandir selon le contenu */
    min-height: 0 !important;
  }
  
  .smart-card-image {
    height: 200px !important; /* Image de taille raisonnable */
  }
}