body {
  font-family: 'Look Serif Wood Regular', serif;

}

h1, h2, h3, h4, h5, h6 {
  color: #00539f;
}

.navbar-brand {
  font-weight: bold;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
}

.navbar, .footer {
  background-color: #00539f;
}

.navbar .nav-link, .footer a {
  color: #D9D9D9 !important;
}

.btn-primary {
  background-color: #00539f;
  border: none;
}

.btn-primary:hover {
  background-color: #2c456a;
}

.highlight {
  font-style: italic;
  color: #355480;
}

.decorative-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5rem;
  border-radius: 100%;
}

/* Assurez-vous que les éléments de navigation restent sur une seule ligne */
.navbar-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* Ajustez les marges et les paddings pour permettre aux éléments de s'ajuster */
.nav-item {
  margin-left: 10px; /* Ajustez cette valeur selon vos besoins */
  margin-right: 10px; /* Ajustez cette valeur selon vos besoins */
}

/* Assurez-vous que le logo et le texte restent sur une seule ligne */
.navbar-brand img {
  margin-right: 10px; /* Ajustez cette valeur selon vos besoins */
}

/* Ajoutez un peu d'espace entre l'icône et le texte */
.nav-link i {
  margin-right: 5px;
}

/* Styles pour la barre de navigation secondaire */
.navbar-light {
  background-color: #ffffff;
  border-bottom: 2px solid #355480;
}

.navbar-light .nav-link {
  color: #355480 !important;
}

.navbar-light .nav-link:hover {
  color: #2c456a !important;
}

.navbar-light .dropdown-menu {
  background-color: #ffffff;
  border: 1px solid #355480;
  display: none; /* Masquer le menu déroulant par défaut */
}

.navbar-light .dropdown-item {
  color: #355480 !important;
}

.navbar-light .dropdown-item:hover {
  background-color: #f0f0f0;
  color: #2c456a !important;
}

/* Styles pour les cartes de produits */
.card {
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.card:hover {
  transform: translateY(-10px);
}

.card-img-top {
  height: 300px; /* Ajustez la hauteur des images */
  object-fit: cover;
}

.card-title {
  color: #355480;
}

.card-text {
  color: #555;
}

/* Styles pour le footer */
.footer {
  background-color: #00539f;
  color: #D9D9D9;
}

/* Media queries pour adapter le logo et le texte */
@media (max-width: 767px) {
  .navbar-brand img {
    display: block;
  }
  .navbar-brand span {
    display: none;
  }
}

@media (min-width: 768px) {
  
  .navbar-brand span {
    display: inline;
  }
}
.image-container {
  width: 100%;
  height: 300px; /* Ajuste la hauteur selon ton design */
  overflow: hidden;
  position: relative;
}

.scroll-image {
  width: 200%; /* Double la largeur pour l'effet de défilement */
  height: 100%;
  object-fit: cover;
  position: absolute;
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* Ajustement des images */
.carousel-item img {
  height: 500px; /* Ajuste la hauteur selon tes besoins */
  object-fit: cover; /* Assure que l'image remplit bien l'espace */
}

/* Style pour le texte en superposition */
.carousel-caption {
  background: rgba(0, 0, 0, 0.6); /* Ajout d'un fond semi-transparent pour améliorer le contraste */
  color: #fff; /* Texte en blanc pour un meilleur contraste */
  padding: 15px; /* Espacement autour du texte */
  border-radius: 10px; /* Coins arrondis pour un design moderne */
}

/* Style du bouton */
.carousel-caption .btn {
  background-color: #ff5722; /* Couleur personnalisée pour le bouton */
  border: none; /* Pas de bordure */
  font-weight: bold; /* Texte du bouton en gras */
}

.carousel-caption .btn:hover {
  background-color: #e64a19; /* Couleur légèrement plus foncée au survol */
}
.promotion-banner {
  position: relative;
  display: inline-block;
}

.promotion-banner img {
  width: 100%;
  height: auto;
}

.promo-label {
  position: absolute;
  top: 10px;
  left: -20px;
  background-color: rgba(255, 0, 0, 0.8); /* Couleur rouge avec transparence */
  color: white;
  font-size: 1rem;
  font-weight: bold;
  padding: 5px 10px;
  transform: rotate(-45deg); /* Rotation pour créer l'effet en diagonale */
  z-index: 10; /* Assure que le bandeau est au-dessus de l'image */
  border-radius: 5px; /* Coins arrondis */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Ajoute une ombre pour un effet 3D */
}
@media (max-width: 768px) {
  .promo-label {
    font-size: 0.8rem;
    padding: 3px 7px;
    top: 5px;
    left: -15px;
  }
}
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
  display: none; /* Masqué par défaut */
}

.card:hover .image-overlay {
  display: flex; /* Affiché au survol */
}

.image-overlay p {
  font-size: 1.5rem;
  font-weight: bold;
}