/*--------------------------------------------------------------
# Général
--------------------------------------------------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;


}

html,
body {
  font-family: "Open Sans", serif;
  position: relative;
  height: 100%;
  text-decoration: none;
  list-style: none;
  background-color: #fff;

  max-width: 100%;
}

a {
  text-decoration: none;
  list-style: none;
  color: black;
}

h1,
h2,
h3,
h4 {
  font-family: "Playfair Display", serif;
  line-height: 1.3;
  font-display: swap;
  overflow-y: hidden;
}
h1 {
  font-size: 2.5rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.75rem;
}
h4 {
  font-size: 1.5rem;
}

@media (max-width: 768px) {
  body {
    font-size: 0.9rem;
  }

  h1,
  h2,
  h3,
  h4 {
    font-size: 1.2rem;
    text-align: center;
  }
}

/* Styles mobiles */
@media (max-width: 768px) {
  body {
    font-size: 1rem;
  }
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.75rem;
  }
  h3 {
    font-size: 1.5rem;
  }

  h4 {
    font-size: 1.25rem;
  }
}

/* Styles pour les écrans moyens */
@media (max-width: 1200px) {
  body {
    font-size: 1.05rem;
  }
}

.container-fluid {
  padding: 0 15px;
  width: 100% !important;
  max-width: 100vw !important;
  overflow: hidden !important;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
}

.custom-container {
  padding-left: 35px;  /* Ajustez la marge gauche */
  padding-right: 35px; /* Ajustez la marge droite */
}

/* Forcer toutes les colonnes à avoir la même hauteur */
.row .col-lg-3 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.img-fluid-about {
  max-width: 100%;
  height: 700px;
  margin-top: 180px;
}

.img-fluid-marie {
  max-width: 100%;
  height: auto;
  margin-top: 200px;
}

/* Fixer une hauteur minimale pour les titres et paragraphes */
h2 {
  min-height: 50px; /* Ajuste selon la taille des textes */
}

p {
  flex-grow: 1; /* Permet d’équilibrer la hauteur */
}



/*--------------------------------------------------------------
#Cards
--------------------------------------------------------------*/
/* Styling des cartes */
.card {
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: none;
  display: flex;
  flex-direction: column; /* Assure que les éléments sont en colonne */
  min-height: 450px; 
  height: 100%; 
  margin-bottom: 20px; /* Ajoute un peu de marge en bas */
}

/* Styling du corps de la carte */
.card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Répartir les éléments en haut et bas de la carte */
  flex-grow: 1; /* Permet au contenu de s'ajuster à l'intérieur de la carte */
  overflow: hidden; /* Empêche tout débordement interne */
}

/* Limiter le titre */
.card-title {
  font-size: 1.25rem; /* Taille du titre plus petite */
  font-weight: bold;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Limite le titre à 2 lignes pour ne pas trop encombrer */
  line-clamp: 2; /* Limite le titre à 2 lignes */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  margin-bottom: 10px;
}

/* Styling de l'image */
.card img {
  object-fit: cover; /* L'image couvre l'espace sans déformation */
  height: 250px; /* Limite la hauteur de l'image */
  width: 100%; /* L'image prend toute la largeur */
  margin-bottom: 1rem; /* Ajoute un petit espace entre l'image et le texte */
}

/* Limiter la description à 5 lignes */
.card-text {
  display: -webkit-box;
  -webkit-line-clamp: 5; /* Limite la description à 5 lignes */
  line-clamp: 5; /* Limite la description à 5 lignes */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  margin-bottom: 20px;
  font-size: 1rem;
  height: calc(1.4em * 5); /* Limite la hauteur à 5 lignes */
}

/* Styling des boutons positionnés côte à côte */
.d-flex {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto; /* Les boutons sont poussés vers le bas */
}

.card-body .badge {
  margin-bottom: 0.5rem;
}

/* Ajuster la taille des boutons pour qu'ils occupent tout l'espace disponible */
.card-container .custom-btn-primary,
.card-container .custom-btn-success {
  margin-bottom: 0.5rem;
  width: 100%; /* Les boutons occupent toute la largeur disponible */
  font-size: 0.9rem; /* Une taille plus petite pour les boutons */
  padding: 10px 0; /* Un padding uniforme */
}

/* Responsive adjustments for mobile devices */
@media (max-width: 768px) {
  .card {
    min-height: 400px; /* Ajuste la hauteur minimale des cartes sur mobile */
  }

  .card-body {
    padding: 1rem;
  }

  .card-title {
    font-size: 1.1rem; /* Réduit la taille du titre sur mobile */
  }

  .card-text {
    font-size: 0.9rem; /* Réduit la taille de la description sur mobile */
  }
}



/* Ajout d'un espacement entre les cartes dans le conteneur */
.row-cols-1,
.row-cols-sm-2,
.row-cols-md-3,
.row-cols-lg-4 {
  display: grid; /* Utiliser grid pour la disposition des cartes */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Colonnes dynamiques */
  gap: 50px !important; /* Ajouter un écart entre les cartes */
  justify-items: center; 
}

/*--------------------------------------------------------------
#Boutons
--------------------------------------------------------------*/
/* Style du bouton principal - Plus compact */
.btn-custom {
  background: linear-gradient(135deg, #dcdcbe, #b8b894); /* Dégradé élégant */
  color: black;
  border: 2px solid rgba(0, 0, 0, 0.8);
  border-radius: 20px; /* Coins légèrement arrondis */
  padding: 8px 18px; /* Réduction du padding */
  font-size: 0.85rem; /* Réduction de la taille du texte */
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  font-weight: bold;
  position: relative;
  overflow: hidden;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

/* Effet au survol */
.btn-custom:hover {
  background: linear-gradient(135deg, #b8b894, #969676);
  color: white;
  border-color: white;
  transform: scale(1.05);
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.3);
}

/* Effet au clic */
.btn-custom:active {
  transform: scale(0.94);
  box-shadow: none;
}

/* Style du bouton témoignage - Version plus compacte */
.btn-custom-testimoniale {
  background: linear-gradient(135deg, #dcdcbe, #b8b894);
  color: black !important;
  border: 2px solid rgba(0, 0, 0, 0.8);
  border-radius: 20px;
  padding: 10px 25px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  display: inline-block;
  text-align: center;
  font-weight: bold;
  position: relative;
  overflow: hidden;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

/* Effet au survol */
.btn-custom-testimoniale:hover {
  background: linear-gradient(135deg, #b8b894, #969676);
  color: white !important;
  border-color: white;
  transform: scale(1.05);
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.3);
}

/* Effet au clic */
.btn-custom-testimoniale:active {
  transform: scale(0.94);
  box-shadow: none;
}

/* Style du bouton dans le carrousel - Réduit et plus équilibré */
.btn-carousel {
  background: linear-gradient(135deg, #dcdcbe, #b8b894);
  color: black;
  border: 2px solid rgba(0, 0, 0, 0.8);
  padding: 8px 20px; /* Moins large */
  font-size: 0.85rem;
  text-decoration: none;
  font-weight: bold;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
  display: inline-block;
  text-align: center;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

/* Effet au survol */
.btn-carousel:hover {
  background: linear-gradient(135deg, #b8b894, #969676);
  color: white;
  border-color: white;
  transform: scale(1.05);
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.3);
}

/* Effet au clic */
.btn-carousel:active {
  transform: scale(0.94);
  box-shadow: none;
}

/* Corrige l'effet de coupe */
.btn-custom,
.btn-custom-testimoniale,
.btn-carousel,
.btn-link {
    display: inline-block;
    padding: 8px 20px; /* Ajustement de la taille */
    font-size: 0.85rem;
    border-radius: 20px;
    position: relative;
    overflow: hidden; /* Empêche le bouton d'être coupé */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

/* Style du bouton lien */
.btn-link {
  background: linear-gradient(135deg, #dcdcbe, #b8b894); /* Dégradé doux */
  color: black !important; /* Supprime le bleu */
  border: 2px solid black;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  font-weight: bold;
  text-decoration: none; /* Supprime le soulignement */
  display: inline-block;
}

/* Supprime le bleu du texte */
.btn-link a {
  color: inherit !important; /* Hérite du noir */
  text-decoration: none !important; /* Supprime le soulignement */
}

/* Effet au survol */
.btn-link:hover {
  background-color: #b8b894;
  color: white !important;
  transform: scale(1.05);
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.2);
}

/* Effet au clic */
.btn-link:active {
  transform: scale(0.95);
  box-shadow: none;
}


/* Vérifier si le conteneur parent ne coupe pas */
.container, .col-lg-3, .row {
    overflow: visible !important; /* Assure que l'ombre et le bouton ne soient pas tronqués */
}



/*--------------------------------------------------------------
# Customisation des boutons (boutons des card produits)
--------------------------------------------------------------*/
.custom-btn-primary {  /* Couleur d'en savoir plus'*/
  background-color: #caaf8d !important; 
  color: black !important; 
  border-radius: 5px; 
  padding: 8px 16px; 
  font-size: 14px; 
  text-decoration: none; 
  display: inline-block; 
  transition: background-color 0.3s, border-color 0.3s; 
}

.custom-btn-primary:hover {
  background-color: #e9cba6 !important;
  border-color: rgba(201, 224, 26, 0.407);
  color: black;
}

.custom-btn-success { /* Couleur d'ajouter au panier */
  background-color: #2C6B4F !important; 
  border-color: #2C6B4F; 
  color: white !important; 
  border-radius: 5px; 
  padding: 8px 16px; 
  font-size: 14px; 
  text-decoration: none; 
  display: inline-block; 
  transition: background-color 0.3s, border-color 0.3s; 
}

.custom-btn-success:hover {
  background-color: #418f6c !important;
  border-color: rgba(201, 224, 26, 0.407);
  color: #0d161b;
}

/*--------------------------------------------------------------
# Customisation des boutons (accordeoon)
--------------------------------------------------------------*/
.accordion-button {
  background-color: #fefee2!important;
  color: black;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

/*--------------------------------------------------------------
#Liens
--------------------------------------------------------------*/
a {
  color: #28a745; 
  outline: none;  
  text-decoration: none;  
  padding: 2px 1px 0; 
  transition: color 0.3s ease, background 0.3s ease; 
}

a:link {
  color: #265301;
}

a:visited {
  color: #437a16; 
}

a:focus {
  border-bottom: 1px solid #437a16; 
  background: #bae498; 
}

a:hover {
  border-bottom: 1px solid #437a16; 
  background: #cdfeaa; 
}

a:active {
  background: #265301; 
  color: #cdfeaa; 
}

.active>.page-link, .page-link.active {
  background-color: #265301 !important; 
  color: #cdfeaa !important; 
  border-color: #265301 !important;
}

.page-link:hover {
  background-color: #265301 !important;
  color: #cdfeaa !important; 
  border-color: #265301 !important; 
}

/*--------------------------------------------------------------
# Logo
--------------------------------------------------------------*/
.logo {
  max-width: 80px;
  height: auto;
  margin-left: 0px;
}

@media (max-width: 768px) {
  .logo {
    width: 40%;
    max-width: 150px;
  }
}

@media (max-width: 1200px) {
  .logo {
    width: 60%;
    max-width: 180px;
  }
}


/*--------------------------------------------------------------
# navbar
--------------------------------------------------------------*/

.nav-item a {
  text-decoration: none;
  color: #333;
  position: relative;
  display: inline-block;
}

.fusion-secondary-header {
  color: #747474;
  font-size: 12px;
  height: 30px;
  background-color: #3e3e3e;
  display: flex;
  justify-content: center;
}

@media only screen and (max-width: 768px) {
  .fusion-secondary-header {
    display: none;
  }
}

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

.navbar-custom {
  background-color: #fefee2;
}

.navbar-custom .navbar-brand,
.navbar-custom .nav-link,
.navbar-custom .navbar-toggler-icon {
  color: #000;
}

.navbar-custom .nav-link.active {
  color: #555;
}

.navbar-custom .nav-link {
  position: relative; 
  display: inline-block; 
  text-decoration: none !important; 
  color: #000 !important; /
}

.navbar-custom .nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.navbar-custom .nav-link:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  background: rgba(0, 0, 0, 0.097);
}

.navbar-custom .nav-link:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer-custom {
  background-color: #fefee2;
}

.footer-custom .text-dark {
  color: #000 !important;
}

.footer-custom a {
  text-decoration: none !important;
  color: #000 !important;
  position: relative;
  display: inline-block;
}

.footer-custom a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.footer-custom a:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  background: rgba(0, 0, 0, 0.097);
}

.footer-custom a:hover {
  background-color: rgba(0, 0, 0, 0.1); /* Transparent noir pour le hover */
}

.footer-custom .copyright {
  background-color: rgba(0, 0, 0, 0.2);
}

/*--------------------------------------------------------------
# Login
--------------------------------------------------------------*/
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background: linear-gradient(165deg, #fefee2, #acb6e5);
}

.login-box {
  background: #fff;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  width: 100%;
  text-align: center;
  transition: all 0.3s ease;
}

.login-logo {
  width: 80px;
  margin-bottom: 1rem;
}

.login-title {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.login-subtitle {
  font-size: 1rem;
  color: #888;
  margin-bottom: 2rem;
}

.form-control {
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.form-check label {
  font-size: 0.9rem;
  color: #333;
}
.btn-login {
  background-color: #dcdcbe;
  color: black;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.btn-login:hover {
  background-color: #acb6e5;
  transform: scale(1.05);
  color: black;
}

/*--------------------------------------------------------------
# Register
--------------------------------------------------------------*/
/* Form Fields */
.form-control-login {
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 12px;
  font-size: 1rem;
  width: 100%;
  transition: border-color 0.3s ease;
}

.form-control-login:focus {
  border-color: #6c757d;  /* Change this to match Bootstrap's default focus color */
  box-shadow: 0 0 5px rgba(108, 117, 125, 0.5); /* Subtle shadow for focus */
}

/* Submit Button */
.btn-dark {
  background-color: #333;
  color: white;
  border: none;
  border-radius: 5px;
  font-weight: 600;
  padding: 12px 24px;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}

.btn-dark:hover {
  background-color: #555;
}

/* Agreement Text */
.text-muted a {
  color: #265301;
  text-decoration: none;
}

.text-muted a:hover {
  text-decoration: underline;
}

.d-inline-flex {
  display: inline-flex;
  align-items: center;
}


/* Responsive Styling */
@media (max-width: 767px) {
  .row {
      flex-direction: column;
  }

  .col-md-6 {
      width: 100%;
  }
}


/*--------------------------------------------------------------
# Filtre de recherche
--------------------------------------------------------------*/
.box {
  padding: 10px;
}

#collapseSections,
#collapseNavigation {
  height: 300px;
  margin-right: 0.3rem !important;
  overflow-y: scroll;
}

#collapseSections::-webkit-scrollbar,
#collapseNavigation::-webkit-scrollbar {
  width: 6px;
}

#collapseSections::-webkit-scrollbar-thumb,
#collapseNavigation::-webkit-scrollbar-thumb {
  background-color: #333;
  border-radius: 2px;
}

#collapseSections::-webkit-scrollbar-track,
#collapseNavigation::-webkit-scrollbar-track {
  background-color: #ddd;
  border-radius: 2px;
}

.box-label {
  color: #1d2939;
  font-size: 0.9rem;
  font-weight: 800;
}

.box-label .btn {
  background-color: #fff;
  padding: 0;
}

.box-label .btn:focus {
  box-shadow: none;
}

.box-label .btn:active,
.box-label .btn:hover {
  color: #212529;
  background-color: #fff;
  border-color: transparent;
}

.filter {
  display: block;
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
}

.js-filter-sorting {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .col-md-3 {
        margin-bottom: 15px;
    }
    .col-md-9 {
        padding-top: 30px;
    }

    .btn-filter {
        font-size: 0.9rem;
    }
}

/* Products display */
.row-cols-1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
}

.row-cols-sm-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.row-cols-md-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.row-cols-lg-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}


/*--------------------------------------------------------------
# Couleur badge catégories
--------------------------------------------------------------*/
.badge.category-huiles-essentielles {
  background-color: #459311; 
  color: #fff;
}

.badge.category-hydrolats{
  background-color: #1896b6; 
  color: #fff;
}

.badge.category-spray-hydrolats{
  background-color: #1896b6; 
  color: #fff;
}

.badge.category-recharges-hydrolats{
  background-color: #1896b6; 
  color: #fff;
}

.badge.category-produits-de-la-ruche {
  background-color: #ffc107; 
  color: #000;
}

.badge.category-coffret {
  background-color: #b81745bd;
  color: #fff;
}

/*--------------------------------------------------------------
# Page product_display
--------------------------------------------------------------*/
.text-custom {
  color: #333;
  text-align: center;
}



/* Style spécifique pour le bouton "Tout effacer" */
.btn-reset {
  background-color: transparent; 
  border: 1px solid #ffd700;
  color: #ffd700;
}

.btn-reset:hover {
  background-color: #ffd700; 
  color: #000; 
}

/* Style spécifique pour le bouton "+" */
.btn-categories {
  color: #ffd700; 
  border: 1px solid #ffd700; 
}

.btn-categories:hover {
  background-color: #ffd700; 
  color: #000; 
}


/* Style spécifique pour le bouton "Filtrer" */
.btn-filter {
  background-color: transparent;
  color: black; 
  border: 2px solid rgba(201, 224, 26, 0.8);
  border-radius: 8px !important; 
  padding: 8px 15px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  display: inline-block;
  border-color: #000;
  border: 2px solid black !important;
}

/* Effet au survol */
.btn-filter:hover {
  background-color: #b8b894;
  color: black;
  border-color: rgba(201, 224, 26, 1);
}

/* Effet au clic */
.btn-filter:active {
  transform: scale(0.95);
  box-shadow: none;
}

.form-check-input:checked {
  background-color: #b8b894 !important;
  border-color: #b8b894!important;
}

/*--------------------------------------------------------------
# Page product_show
--------------------------------------------------------------*/

.product-card-details {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.product-card-details .product-title {
  font-size: 1rem;
  font-weight: 600;
}

.product-card-details .product-price {
  color: #4caf50; 
}

.product-short-description {
  padding: 5px;
  font-size: 0.9rem;
}

/*--------------------------------------------------------------
  # Spinner
  --------------------------------------------------------------*/
  .is-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFF;
    opacity: 0.5;
    z-index: 4;
}
.is-loading .spinner-border {
    position: absolute;
    top: calc(50% - 1rem);
    left: calc(50% - 1rem);
    z-index: 5;
}

/*--------------------------------------------------------------
# order
--------------------------------------------------------------*/
.col-form-label {
  font-weight: bold;
  /* margin-bottom: 0.3em; */
}
.summary-label {
  display: block;
  padding: 7px 0;
}
#order .form-check {
  background-color: rgba(225, 232, 235, 0.295);
  padding: 1.5em 3em;
  margin-bottom: 0.5em;
  border-radius: 0.3em;
}
#order .form-check:hover {
  box-shadow: 0px 0px 10px 0.1rem rgba(0, 0, 0, 0.3);
}
.cart-summary {
  padding: 1em;
  background-color: rgba(225, 232, 235, 0.295);
  box-shadow: 0px 0px 5px 0.1rem rgba(0, 0, 0, 0.1);
}

/*--------------------------------------------------------------
  # Testimonials
  --------------------------------------------------------------*/
  .testimonial {
    width: 80%;
    margin: 0 auto;
    padding: 20px 20px 40px;
  }

  
  @media screen and (max-width: 768px) {
    .testimonial {
      width: 80%;
      margin: 20px auto 40px;
      padding: 20px 20px 40px;
    }
  }

  /*--------------------------------------------------------------
  # email
  --------------------------------------------------------------*/
table {
  width: 100%;
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid #ddd;
}

th,
td {
  padding: 8px;
  text-align: left;
}

thead {
  background-color: #f4f4f4;
}

/*--------------------------------------------------------------
  # Fade-in
  --------------------------------------------------------------*/
  [class*="reveal"] {
    opacity: 0;
    transform: translateY(-30px);
    transition: 0.5s;
  }
  .reveal-visible {
    opacity: 1;
    transform: translateY(0);
    transition: 1s cubic-bezier(0.5, 0, 0, 1);
  }
  .reveal-2 {
    transition-delay: 0.1s;
  }
  .reveal-3 {
    transition-delay: 0.2s;
  }

  /*--------------------------------------------------------------
# Product_show page (avis)
--------------------------------------------------------------*/
/* Styles des boutons prev/next */
.carousel-control-prev,
.carousel-control-next {
  width: 10%; /* Augmenter la taille des boutons */
  opacity: 1;
  z-index: 2000; /* Augmenter le z-index pour s'assurer que les boutons sont au-dessus */
  position: absolute; /* S'assurer que les boutons sont positionnés au-dessus du carousel */
  top: 50%; /* Centrer verticalement */
  transform: translateY(-50%); /* Centrer verticalement */
}

/* Icônes visibles */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.8); /* Augmenter l'opacité du fond */
  border-radius: 50%;
  width: 3.5rem; /* Augmenter la taille des icônes */
  height: 3.5rem; /* Augmenter la taille des icônes */
}

/* Survol pour améliorer la visibilité */
.carousel-control-prev:hover,
.carousel-control-next:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.104); /* Changer le fond au survol */
}

.carousel-control-prev {
  left: 0px !important; 
  top: 200px !important;
}

.carousel-control-next {
  right: 65% !important; 
  top: 200px !important;
}

/* S'assurer que l'icône est visible */
.carousel-control-next-icon,
.carousel-control-prev-icon {
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  width: 3.5rem;
  height: 3.5rem;
}

/* Conteneur des avis */
.reviews-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  overflow: hidden;
  position: relative;
  justify-content: center;
}

/* Style pour chaque carte d'avis */
.review-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  flex: 1 1 250px;
  transition: transform 0.5s ease-in-out;
  opacity: 0;
  animation: fadeIn 0.5s forwards;
  transform: rotateY(0deg);
}

/* Animation de l'apparition des cartes */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: rotateY(90deg);
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

/* Effet de survol pour une rotation supplémentaire */
.review-card:hover {
  transform: rotateY(10deg); /* Léger effet de rotation au survol */
}

/* Style des étoiles */
.star.filled {
  color: #f39c12;
}

.rating {
  font-size: 1.5rem;
  color: #f39c12;
}





/* Style des cartes produits */
.product-card-details {
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.1);
}

.product-price {
  font-size: 1.5rem;
  font-weight: bold;
}

/* Bouton d'ajout au panier */
.btn-success {
  background: linear-gradient(135deg, #b8b894, #969676);
  border: 2px solid rgba(0, 0, 0, 0.8);
  border-radius: 20px;
  padding: 10px 20px;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}

.btn-success:hover {
  background: linear-gradient(135deg, #969676, #767654);
  color: white;
  border-color: white;
  transform: scale(1.08);
}


/* Icônes étoiles */
.rating {
  color: #f39c12;
  font-size: 1.2rem;
}


.responsive-iframe {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* Ratio 16:9 */
  height: 0;
  overflow: hidden;
}

.responsive-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.carousel-inner {
  text-align: center !important; /* Centre l'image */
  width: 300px !important; /* Ajuste la largeur */
}

.carousel-item.active {
  display: inline-block; /* Garde la bonne largeur */
}

.carousel-item img {
  object-fit: contain; /* Empêche le recadrage */
  max-height: 450px; /* Ajuste la hauteur max */
  display: inline-block; /* Garde la bonne largeur */
}

/*--------------------------------------------------------------
# Contact rapide
--------------------------------------------------------------*/
/* Centrer tout le contenu */
.service-contact-section {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centre horizontalement */
  justify-content: center; /* Centre verticalement */
  text-align: center;
  padding: 50px 0; /* Ajoute un espace pour l'équilibre visuel */
}

/* Centrer le conteneur interne */
.service-contact-section .container {
  max-width: 600px; /* Évite que le texte s'étale trop */
  text-align: center; /* Centre le texte */
}

/* Ajustement du bouton */
.service-contact-section .btn-custom {
  margin-top: 15px;
  padding: 10px 30px; /* Ajustement de la taille */
  display: inline-block;
}

/*--------------------------------------------------------------
# Pagination
--------------------------------------------------------------*/
/* Style global de la pagination */
.pagination {
  display: flex;
  justify-content: center; /* Centre la pagination */
  gap: 5px; /* Espacement entre les boutons */
}

/* Style des liens de pagination */
.pagination .page-link {
  background-color: #dcdcbe; /* Couleur de fond */
  color: black; /* Couleur du texte */
  border: 2px solid black; /* Bordure */
  border-radius: 8px; /* Coins arrondis */
  padding: 8px 15px; /* Ajustement du padding */
  transition: all 0.3s ease-in-out;
}

/* Effet au survol */
.pagination .page-link:hover {
  background-color: #b8b894;
  color: white;
  border-color: white;
}

/* Style du bouton actif */
.pagination .active .page-link {
  background-color: black;
  color: white;
  border: 2px solid black;
}

/* Désactiver les liens "Previous" et "Next" */
.pagination .disabled .page-link {
  background-color: #e0e0e0;
  color: #aaa;
  border-color: #ccc;
  cursor: not-allowed;
}

/* Retirer la couleur bleue par défaut */
.pagination .page-link:focus {
  box-shadow: none;
}


/*--------------------------------------------------------------
# Couleur badge catégories
--------------------------------------------------------------*/
.badge.category-huiles-essentielles {
  background-color: #007bff; 
  color: #fff;
}
.badge.category-recharges-hydrolats{
  background-color: #28a745; 
  color: #fff;
}
.badge.category-spray-hydrolat {
  background-color: #ffc107; 
  color: #000;
}
.badge.category-coffret {
  background-color: #17a2b8;
  color: #fff;
}

/*--------------------------------------------------------------
# Stars rating
--------------------------------------------------------------*/
.star-rating i {
  cursor: pointer;
}

.star-rating > i.far.fa-star {
  font-size: 24px;
  color: #ccc;
  transition: color 0.3s ease-in-out;
}

.star-rating > i.fa-star.fas {
  font-size: 24px;
  color: #f8d32b;
}


/*--------------------------------------------------------------
# MENTIONS LÉGALES
--------------------------------------------------------------*/
/* Container général */
.legalies-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Sommaire */
.sommaire-list {
  list-style-type: none;
  padding: 15px;
  border: 2px solid #2c3e50; 
  border-radius: 8px; 
  background-color: #f4f4f4; 
}

.sommaire-list li {
  margin-bottom: 1rem;
}

.sommaire-list a {
  text-decoration: none;
  color: #032b35f4; 
  font-weight: bold;
  font-size: 1.1rem;
  display: block;
  margin-bottom: 10px;
}


.sommaire-list a:hover {
  text-decoration: underline;
  color: #085669; 
}

/* Sections de la politique */
.policy-section {
  margin-bottom: 3rem;
  padding: 2rem;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: 30px;
}

.policy-section h2 {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 1rem;
  font-weight: bold;
}

.policy-section p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 1.5rem;
}

/* Style pour les liens dans les sections */
.policy-section a {
  color: #007bff;
  text-decoration: none;
}

.policy-section a:hover {
  text-decoration: underline;
}

/* Card design pour chaque section */
.policy-section ul {
  list-style-type: none;
  padding-left: 1.5rem;
}

.policy-section ul li {
  margin-bottom: 0.8rem;
}

.policy-section .card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.policy-section .card h3 {
  font-size: 1.4rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 1rem;
}

.policy-section .card p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}

/* Pagination ou autres sections */
.pagination {
  display: flex;
  justify-content: center;
  list-style: none;
  margin-top: 3rem;
}

.pagination a {
  text-decoration: none;
  padding: 0.5rem 1rem;
  margin: 0 5px;
  border: 1px solid #007bff;
  border-radius: 5px;
  color: #007bff;
  font-weight: bold;
}

.pagination a:hover {
  background-color: #007bff;
  color: white;
}

/* Liens dans les sections */
.policy-section a {
  color: #032b35f4; 
  text-decoration: none;
}

.policy-section a:hover {
  text-decoration: underline;
  color: #085669; 
}

/* Pour les liens dans les cartes */
.policy-section .card a {
  color: #032b35f4; 
}

.policy-section .card a:hover {
  color: #085669; 
}

/*--------------------------------------------------------------
# Error 404
--------------------------------------------------------------*/
.error-404 {
  padding: 30px;
}
.error-404 h1 {
  font-size: 180px;
  font-weight: 700;
  color: #4154f1;
  margin-bottom: 0;
  line-height: 150px;
}
.error-404 h2 {
  font-size: 24px;
  font-weight: 700;
  color: #012970;
  margin-bottom: 30px;
}
.error-404 .btn {
  background: #51678f;
  color: #fff;
  padding: 8px 30px;
}
.error-404 .btn:hover {
  background: #3e4f6f;
}

@media (min-width: 992px) {
  .error-404 img {
      max-width: 50%;
  }
}

/*--------------------------------------------------------------
# Scroll to top
--------------------------------------------------------------*/
#scrollToTopBtn {
  display: block !important; /* Forcer l'affichage pour tester */
  position: fixed;
  bottom: 20px;
  right: 40px;
  z-index: 1000;
  width: 50px;
  height: 50px;
  border: none;
  background-color: #dcdcbe;
  color: #ffffff;
  font-size: 24px;
  border-radius: 50%;
  cursor: pointer;
}

#scrollToTopBtn:hover {
  background-color: #d1c58de4;
  transform: translateY(-3px);
}

#scrollToTopBtn:active {
  transform: translateY(0);
}

/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.link-article a {
  color: #adaa77da; /* Couleur du lien */
  font-weight: bold; /* Gras pour le lien */
  text-decoration: none;
}

.card-articles-popular {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  height: 5% !important;
}

/*--------------------------------------------------------------
# Stats
--------------------------------------------------------------*/
#visitsChart, #ordersChart {
  max-width: 500px;
  height: auto;
  margin: 0 auto;  /* Centre les graphiques */
}

canvas {
  background-color: #f9f9f9;  /* Ajoute un fond clair pour le graphique */
  border-radius: 10px;  /* Bords arrondis pour un aspect plus moderne */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  /* Ombre légère pour donner du relief */
}

/*--------------------------------------------------------------
#Blog
--------------------------------------------------------------*/
.social-share {
  display: flex;
  gap: 10px;
}

.social-share a {
  display: inline-block;
  width: 40px;
  height: 40px;
  transition: transform 0.2s ease-in-out;
}

.social-share a:hover {
  transform: scale(1.1);
}

.social-share img {
  width: 100%;
  height: auto;
}