@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

/* Banner Styles */
.banner-container {
  position: relative;
  text-align: center;
  margin-top: 50px;
}
.banner-image {
  width: 96%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 16px;
}
@media (max-width: 768px) {
  .banner-image {
    object-fit: fill;
  }
}
.banner-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 2.5em;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .banner-title {
    font-size: 1.5em;
  }
}


/* Description Section */
.description-section {
  padding: 15px;
  font-size: 1.2em;
  line-height: 1.6;
  color: #333;
  max-width: 81%; /* Limite la largeur à 100% de son parent */
  text-align: justify  ;
  overflow-wrap: break-word; /* Permet de couper les mots longs */
  word-wrap: break-word; /* Pour la compatibilité avec d'anciens navigateurs */
  white-space: pre-wrap; /* Préserve les sauts de ligne */
  margin: 10px auto;
}



.commentaires-section {
  margin-top: 20px;
  padding: 10px;
  border-top: 1px solid #eaeaea;
  width: 100%;
  margin: 0 auto;
  z-index: 30;
}

.ajouter-commentaire-form {
  width: 100%;
  margin-bottom: 20px;
}

.commentaires-list {
  width: 100%;
  margin: 0 auto;
}

.commentaire {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  transition: background-color 0.3s;
}



.commentaire-info {
  display: flex;
  justify-content: space-between;
}

.commentaire-date {
  color: #888;
  font-size: 0.9em;
}

.commentaire-contenu {
  margin-top: 5px;
}

.input-group .form-control {
  border-radius: 8px 0 0 8px;
  padding: 10px;
  outline: none;
}

.input-group .btn {
  border-radius: 0 8px 8px 0;
}
.commentaire-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 10px;
}


.input-group .btn-outline-secondary {
  border-radius: 0;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  box-shadow: none;
}

.input-group .btn-outline-secondary:hover {
  color: #666;
  background-color: #ddd;
}

.input-group .form-control {
  border-radius: 8px 0 0 8px;
}

.input-group .btn-primary {
  border-radius: 0 8px 8px 0;
}
/* Supprimer l'outline lors du clic */
.input-group .btn-outline-secondary:focus {
  outline: none;
  box-shadow: none;
}
input:focus { 
  outline: none !important;
  box-shadow: none !important;
}

*:focus {
  outline: none !important;
}
button:focus {
  outline: none !important;
  box-shadow: none !important;
}


.commentaire-image img {
  max-width: 100%;
  max-height: 100px;
  height: auto;
  border-radius: 8px;
  margin-top: 10px;
}






/* Container pour le slider */
.slider-container {
  position: relative;
  width: 800px; /* Largeur fixe */
  /* height: 400px; Hauteur fixe */
  aspect-ratio: 1/0.5;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Styles pour le slider */
.gallery {
  display: flex;
  transition: transform 0.6s ease-in-out;
}

/* Styles pour l'image */
.gallery .image-container {
  min-width: 100%; /* Une image à la fois */
  padding: 0; /* Suppression de l'espacement */
  height: 100%; /* Hauteur égale à celle du conteneur */
}

.gallery img {
  width: 100%;
  /* height: 60px; Hauteur de l'image égale à celle du conteneur */
  /* object-fit: cover; Ajustement des images sans déformation */
  aspect-ratio: 1/0.5;
  border-radius: 10px;
  transition: transform 0.5s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Boutons de navigation */
.slider-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  background-color: rgba(32, 32, 32);
  color: white;
  border: none;
  width: 45px;
  height: 45px;
  padding: 12px;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 100;
}

.slider-button.prev {
  left: 10px;
}

.slider-button.next {
  right: 10px;
}

.slider-button:hover {
  background-color: rgba(255, 255, 255);
  color: black;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}



/* Conteneur pour le slider et la carte de recherche */
.slider-search-container {
  display: flex; /* Utilisation de Flexbox */
  justify-content: center; /* Centrage horizontal */
  align-items: flex-start; /* Alignement en haut */
  margin: 20px; /* Espace autour du conteneur */
}
/* Media Queries pour une meilleure réactivité */
@media (max-width: 768px) {
  .slider-container {
      width: 90%; /* Adapte la largeur à 90% de l'écran */
  }
}






/* Style pour la carte */
.search-card {
  max-width: 250px; /* Largeur maximale de la carte */
  margin-left: 10px; /* Réduit l'espace entre le slider et la carte */
  margin-right: 30px;
  padding: 15px;
  border: none;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.2);
  display: flex; /* Utilisation de Flexbox pour le contenu de la carte */
  flex-direction: column; /* Aligner le contenu verticalement */
}

/* Style pour le titre de la carte */
.search-card h2 {
  font-size: 1.2rem;
  margin-bottom: -6px;
}

/* Style pour la barre de recherche */
.search-input {
  width: 100%; /* Largeur complète */
  padding: 12px;
  border: 1px solid #ccc;
  background-color: rgba(183, 181, 181, 0.237);
  border-radius: 15px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  box-sizing: border-box; /* Inclut la bordure et le padding dans la largeur */
}

/* Styles d'entrée pour l'interaction */
.search-input:focus {
  outline: none;
  border-color: #007bff; /* Couleur de bordure lors du focus */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Ombre de focus */
}









/* Style pour la carte de résultats */
.results-card {
  max-width: 250px; /* Largeur maximale de la carte */
  margin-left: 10px; /* Espace à gauche pour aligner avec la carte de recherche */
  margin-top: 20px; /* Espace au-dessus pour séparer de la carte de recherche */
  padding: 15px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.2);
  display: flex; /* Utilisation de Flexbox pour le contenu */
  flex-direction: column; /* Aligner le contenu verticalement */
}

/* Style pour les éléments individuels dans la carte de résultats */
.result-item {
  display: flex; /* Utilisation de Flexbox pour aligner l'image et le texte */
  align-items: center; /* Centrage vertical */
  margin-top: 10px; /* Espace entre les articles */
}
.result-card-title {
  font-size: 14px;
  margin-bottom: 22px;
}
.result-card-date {
  font-size: 12px;
}
.result-item img {
  margin-right: 10px; /* Espace entre l'image et le texte */
  border-radius: 4px; /* Coins arrondis pour l'image */
  width: 80px !important; /* Largeur de l'image */
  height: 80px !important; /* Hauteur de l'image */
  object-fit: cover !important; /* L'image remplit la carte sans déformation */
}


.searchAndResult {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto; /* Centre l'élément horizontalement */
  width: 100%; /* Ajuste la largeur à 100% du parent */
  max-width: 400px; /* Limite la largeur à 400px pour les écrans larges */
  padding: 20px; /* Ajoute un peu d'espace autour du contenu */
  border-radius: 8px; /* Arrondit les coins pour un style agréable */
}

@media (max-width: 1100px) {
  .slider-search-container {
    display: block;
  }
  .searchAndResult {
    margin: 21px auto;
    max-width: 350px; /* Ajuste la largeur maximale sur les petits écrans */
  }
}