/* catalogue.css */

/* Appliquez les styles uniquement aux éléments à l'intérieur de cat-container pour éviter toute interférence avec la navbar */
.cat-container {
  width: 90%; /* Largeur par défaut pour les écrans plus petits */
  max-width: 1100px; /* Limite maximale de largeur en mode bureau */
  margin: 20px auto; /* Centrage du conteneur avec espace vertical */
  margin-top: 20px; /* Espace sous la navbar pour rendre le haut visible */
  background-color: #fff; /* Fond blanc */
  padding: 20px; /* Padding pour un contenu clairement délimité */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère pour un effet de profondeur */
  border-radius: 15px; /* Coins arrondis pour un style doux */
  border: 1px solid #ddd; /* Bordure subtile pour délimiter le conteneur */
}

/* Boutons de navigation du catalogue */
.cat-controls .cat-btn {
  background-color: #ffde59; /* Bouton jaune */
  color: #000; /* Texte noir */
  border: 1px solid #000; /* Bordure noire */
  padding: 10px 20px; /* Padding pour des boutons faciles à cliquer */
  margin-right: 10px; /* Espacement entre les boutons */
  cursor: pointer; /* Indique que le bouton est cliquable */
  border-radius: 5px; /* Coins arrondis pour les boutons */
  font-family: Arial, sans-serif; /* Police cohérente avec le reste du site */
  transition: background-color 0.2s, border-color 0.2s; /* Transition douce pour le survol */
}

.cat-controls .cat-btn:hover, 
.cat-controls .cat-btn.active {
  background-color: #000; /* Fond noir au survol et pour le bouton actif */
  color: #ffde59; /* Texte jaune */
}

/* Sections de contenu Catalogue et Offres, initialement masquées */
.cat-section {
  display: none; /* Masque les sections par défaut */
  padding: 20px; /* Padding pour le contenu interne */
  border-radius: 5px; /* Coins légèrement arrondis pour les sections */
  background-color: #f8f9fa; /* Fond gris très clair */
  margin-top: 20px; /* Espace après les boutons */
}

/* Affiche la section active */
.cat-section.active {
  display: block;
}

/* Style pour les images de catalogue */
.catalogue-image {
  width: 100%; /* Largeur de l'image */
  height: auto; /* Hauteur automatique pour conserver le ratio */
  margin-bottom: 10px; /* Marge en bas pour espacer l'image du lien */
}

/* Conteneur pour les entrées du catalogue */
.catalogue-list {
  display: grid;
  grid-template-columns: 1fr; /* Par défaut, une colonne */
  gap: 20px; /* Espace entre les éléments */
  justify-content: center; /* Centre les éléments dans chaque colonne */
}

/* Style pour chaque entrée du catalogue */
.catalogue-entry {
  border: 1px solid #ddd; /* Bordure autour de chaque entrée */
  padding: 10px; /* Padding à l'intérieur de chaque entrée */
  background-color: #fff; /* Fond blanc pour chaque entrée */
  border-radius: 5px; /* Coins arrondis */
  text-align: center; /* Centrer le contenu à l'intérieur */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère pour un effet de profondeur */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 500px; /* Largeur maximale pour éviter les débordements */
  width: 100%; /* Largeur par défaut */
}

/* Style pour les liens à l'intérieur de catalogue-entry */
.catalogue-entry a {
  display: block; /* Pour assurer un comportement de bloc */
  width: 90%; /* Limite la largeur du texte à l'intérieur */
  white-space: nowrap; /* Empêche le texte de passer à la ligne */
  overflow: hidden; /* Masque le texte qui dépasse */
  text-overflow: ellipsis; /* Ajoute des points de suspension pour les débordements */
  color: #007bff; /* Couleur du lien */
  margin-top: 5px; /* Espace au-dessus du lien */
  text-decoration: none; /* Retire le soulignement */
}

/* Réinitialiser les styles spécifiques de Bootstrap */
button.cat-btn {
  background-color: #ffde59; /* Bouton jaune */
  color: #000; /* Texte noir */
  border: 1px solid #000; /* Bordure noire */
  border-radius: 5px; /* Coins arrondis pour les boutons */
  padding: 10px 20px; /* Padding pour des boutons faciles à cliquer */
  margin-right: 10px; /* Espacement entre les boutons */
  cursor: pointer; /* Indique que le bouton est cliquable */
  font-family: Arial, sans-serif; /* Police cohérente avec le reste du site */
  transition: background-color 0.2s, border-color 0.2s; /* Transition douce pour le survol */
}

button.cat-btn:hover, 
button.cat-btn.active {
  background-color: #000; /* Fond noir au survol et pour le bouton actif */
  color: #ffde59; /* Texte jaune */
}

#cata-info-title-text{
  margin-left: 0%;
  font-weight: bold;
  font-size: 22px;
  position: absolute;
  z-index: 1;
}

#cata-info-title-background-image{
  margin-top: 0px;
  margin-left: 1%;
  z-index: 2;
}

/* Adaptation pour les écrans larges (mode bureau) */
@media (min-width: 769px) {
  .cat-container {
    width: 70%; /* Ajustement pour atteindre environ 70% de l'écran */
    max-width: 1100px; /* Limite maximale de largeur */
    margin-top: 20px; /* S'assure que le haut est bien visible sous la navbar */
  }

  .catalogue-list {
    grid-template-columns: repeat(2, 1fr); /* Deux colonnes en mode bureau */
    gap: 30px; /* Espace augmenté pour un meilleur espacement sur grand écran */
    justify-items: center; /* Centre les éléments dans chaque colonne */
  }
}

/* Adaptation de catalogue-entry pour les petits écrans (mode mobile) */
@media (max-width: 768px) {
  .cat-container {
    width: 95%; /* Largeur plus importante pour mobile */
    padding: 15px; /* Réduction du padding */
    margin-top: 20px; /* S'assure que le haut est visible sous la navbar */
  }

  .catalogue-list {
    grid-template-columns: 1fr; /* Une seule colonne en mode mobile */
    gap: 15px; /* Espacement réduit pour mobile */
    justify-items: center; /* Centre chaque entrée sur mobile */
  }

  .catalogue-entry {
    max-width: 280px; /* Réduction de la largeur maximale pour mieux s'adapter à l'écran mobile */
    padding: 8px; /* Padding réduit pour un affichage plus compact */
    margin: 0 auto; /* Centre chaque entrée sans espace supplémentaire */
    box-sizing: border-box; /* Assure que padding n'ajoute pas à la largeur totale */
  }
}