/* assets/css/style.css */

/* ==========================================================================
   1. Variables CSS Globales
   ========================================================================== */
:root {
  --couleur-bois-fonce: #624521;
  --couleur-bois-fonce-hover: #50381a;
  --couleur-bois-moyen: #8D6E63;
  --couleur-bois-clair-accent: #A1887F;
  --couleur-texte-sur-fonce: #fff;
  --couleur-texte-sur-clair: #333;
  --couleur-fond-page: #fdfbf7;
  --couleur-bordure-discrete: #d1c7be; /* Corrigé le _e_ en e */
  --couleur-primaire-site: var(--couleur-bois-fonce);
  --couleur-danger: #c0392b;
  --couleur-succes: #27ae60;
}

/* ==========================================================================
   2. Styles de Base et Typographie
   ========================================================================== */
body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--couleur-fond-page);
  color: var(--couleur-texte-sur-clair);
  /* padding-top pour navbar fixed-top est géré par .moretop ou JS */
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif; /* Cohérence, ou 'Lora' si tu l'as pour les titres */
  color: var(--couleur-bois-fonce);
}

a {
  color: var(--couleur-bois-moyen);
  text-decoration: none;
}
a:hover {
  color: var(--couleur-bois-fonce);
  text-decoration: underline;
}

.signature {
  font-family: 'Dancing Script', cursive;
  font-size: 1.8rem;
  color: #555;
  text-align: right;
  margin-top: 1.5rem;
  margin-right: 1rem; /* Uniquement si alignée à droite et besoin d'espace */
  font-weight: normal;
}

/* Classe utilitaire pour espacement sous la navbar fixe */
.moretop {
  padding-top: 85px!important; /* Ajustez cette valeur à la hauteur de votre navbar. 8% et 17% en media query est moins prévisible. */
                      /* Il est préférable d'utiliser une valeur fixe en px ou rem, ou de la calculer en JS. */
}

/* ==========================================================================
   3. Loader de Page
   ========================================================================== */
#page-loader { /* Renommé de .page-loader-overlay pour cibler l'ID directement */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000; /* Doit être très élevé, au-dessus de la navbar fixed-top (qui est ~1030) */
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease-out, visibility 0s linear 0.5s;
}

#page-loader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* Empêche les interactions une fois caché */
}

#page-loader .spinner-border {
  width: 3rem;
  height: 3rem;
  /* color: var(--couleur-primaire-site); /* Optionnel: pour forcer la couleur */
}

/* ==========================================================================
   4. Composants Bootstrap Surchargés / Stylisés
   ========================================================================== */

/* --- Boutons --- */
.buttonClass,
.btn-primary { /* Surcharge .btn-primary de Bootstrap pour la cohérence */
  background-color: var(--couleur-primaire-site) !important; /* !important peut être nécessaire pour surcharger Bootstrap */
  border-color: var(--couleur-bois-fonce-hover) !important;
  color: var(--couleur-texte-sur-fonce) !important;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.1s ease, box-shadow 0.2s ease-in-out;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.buttonClass:hover, .buttonClass:focus,
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--couleur-bois-fonce-hover) !important;
  border-color: #402d15 !important; /* Encore plus foncé */
  color: var(--couleur-texte-sur-fonce) !important;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}

/* S'assurer que le style focus est cohérent */
.btn-primary:focus, .buttonClass:focus {
  box-shadow: 0 0 0 0.25rem rgba(98, 69, 33, 0.5) !important; /* Surcharge le focus Bootstrap */
}

.btn-outline-secondary {
  color: var(--couleur-bois-moyen);
  border-color: var(--couleur-bois-moyen);
  font-weight: 500;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background-color: var(--couleur-bois-moyen);
  color: var(--couleur-texte-sur-fonce);
  border-color: var(--couleur-bois-moyen);
}
.btn-outline-secondary:focus { /* Ajout explicite pour le focus */
  box-shadow: 0 0 0 0.25rem rgba(141, 110, 99, 0.4);
}


.btn-danger {
  background-color: var(--couleur-danger) !important; /* Surcharger Bootstrap */
  border-color: #a52f23 !important;
  font-weight: 500;
}
.btn-danger:hover, .btn-danger:focus {
  background-color: #a52f23 !important;
  border-color: #8a281c !important;
}
.btn-danger:focus {
  box-shadow: 0 0 0 0.25rem rgba(192, 57, 43, 0.5) !important;
}

.btn-outline-danger {
  color: var(--couleur-danger);
  border-color: var(--couleur-danger);
  font-weight: 500;
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
  background-color: var(--couleur-danger);
  color: var(--couleur-texte-sur-fonce);
  border-color: var(--couleur-danger); /* Assurer que la bordure reste ou disparaît proprement */
}
.btn-outline-danger:focus {
  box-shadow: 0 0 0 0.25rem rgba(192, 57, 43, 0.5);
}


/* --- Champs de Formulaire --- */
.form-control:focus,
.form-select:focus {
  border-color: var(--couleur-primaire-site);
  box-shadow: 0 0 0 0.25rem rgba(98, 69, 33, 0.35);
}
.form-check-input:checked {
  background-color: var(--couleur-primaire-site);
  border-color: var(--couleur-primaire-site);
}
.form-check-input:focus {
 box-shadow: 0 0 0 0.25rem rgba(98, 69, 33, 0.35);
}

/* --- Badges --- */
.badge {
  font-weight: 500; /* Un peu plus lisible que le défaut Bootstrap souvent */
}
.badge.bg-danger { /* Pour "Promo !" */
  background-color: var(--couleur-danger) !important;
}
/* Note: Bootstrap 5 utilise des variables CSS pour les couleurs bg-*, 
   donc surcharger avec !important est souvent la voie la plus directe. */

/* --- Cartes Produits --- */
.card {
    border: 1px solid var(--couleur-bordure-discrete);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out; /* Ajout transform pour effet subtil */
}
.card:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1);
    /* transform: translateY(-3px); /* Léger soulèvement au survol */
}
.card-header { /* Si utilisé */
    background-color: #f8f6f2;
    border-bottom: 1px solid var(--couleur-bordure-discrete);
}
.card-title {
    /* La couleur est déjà définie par h5, mais on peut spécifier ici si besoin */
}

/* --- Navbar --- */
/* Ta navbar utilise déjà des classes Bootstrap et un style inline pour la bordure.
   Si tu as besoin de surcharges plus spécifiques, ajoute-les ici.
   .navbar.fixed-top {}
*/

/* --- Footer --- */
footer.bg-dark { /* Si tu utilises cette classe pour ton footer */
    background-color: #3a2e24 !important; /* Un marron très foncé, surcharger bg-dark */
}

/* ==========================================================================
   5. Styles Spécifiques aux Pages / Sections
   ========================================================================== */

/* --- Section Story (Page d'accueil) --- */
#story {
	padding-top: 6rem !important; /* Assure l'espacement si .moretop n'est pas sur le main de cette page */
}

/* --- Styles pour les pages produits dédiées (hors modale) --- */
.product-page-section {
  padding-top: 3rem; /* Conserver .moretop pour la page entière est peut-être mieux */
  padding-bottom: 3rem;
}

.product-details h1 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.product-price {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--couleur-primaire-site);
  margin-bottom: 1.5rem;
}

.product-features li {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: flex-start;
}
.product-features li i {
  margin-top: 0.15em; /* Ajustement vertical fin de l'icône */
}

/* Fil d'Ariane */
.breadcrumb-item a {
    color: var(--couleur-bois-moyen);
}
.breadcrumb-item a:hover {
    color: var(--couleur-primaire-site);
    text-decoration: underline;
}
.breadcrumb-item.active {
    color: #6c757d; /* Gris Bootstrap standard */
}

/* Onglets de description produit (page produit) */
.product-description-tabs .nav-tabs .nav-link.active {
  color: var(--couleur-primaire-site);
  /* border-color: #dee2e6 #dee2e6 #fff; */ /* Bootstrap gère ça, à surcharger si besoin */
}
.product-description-tabs .nav-tabs .nav-link:hover {
  /* border-color: #e9ecef #e9ecef #dee2e6; */ /* Surcharge si besoin */
  color: var(--couleur-primaire-site);
}


/* ==========================================================================
   6. Carrousels
   ========================================================================== */

/* Styles pour les carrousels sur les PAGES PRODUITS DÉDIÉES (utilisant SwiperJS avec .product-swiper-container) */
/* NOTE: Le CSS original ciblait .product-page-carousel. 
   Si tu utilises SwiperJS avec l'ID #productSwiper ou la classe .product-swiper-container, 
   ces styles doivent être adaptés ou tes styles Swiper existants sont déjà là.
   Je vais supposer que tu as déjà des styles pour Swiper, ou que ceux pour .product-page-carousel
   doivent être renommés/adaptés pour .product-swiper-container ou un ID spécifique.
   Pour l'instant, je garde les styles de .product-page-carousel pour montrer la structure.
*/
.product-page-carousel { /* Adapte ce sélecteur si tu utilises SwiperJS */
  position: relative;
  width: 100%;
  border-radius: 8px; /* Un peu plus arrondi */
  overflow: hidden;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.product-page-carousel .swiper-slide, /* Si c'est Swiper */
.product-page-carousel .carousel-item { /* Si c'est Bootstrap Carousel */
    min-height: 350px; /* Hauteur min un peu augmentée */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
}

.product-page-carousel img {
  max-height: 550px;
  object-fit: contain;
  margin: auto;
  cursor: zoom-in; /* Pour lightGallery */
  display: block;
  width: auto;
  max-width: 100%;
}

.product-page-carousel .video-container video { /* Si tu as des vidéos */
  max-height: 550px;
  object-fit: contain;
  display: block;
  width: 100%;
  background-color: #000;
}

/* Indicateurs (pour Bootstrap Carousel) */
.product-page-carousel .carousel-indicators button { /* Pour Bootstrap 5 */
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 10px; /* Ajusté pour être cohérent avec les styles Swiper que tu avais */
  height: 10px;
  padding: 0;
  margin-right: 5px; /* Ajusté */
  margin-left: 5px; /* Ajusté */
  text-indent: -999px;
  cursor: pointer;
  background-color: #adb5bd; /* Gris Bootstrap */
  background-clip: padding-box;
  border: 0;
  border-radius: 50%;
  opacity: 0.7;
  transition: opacity 0.3s, background-color 0.3s; /* Transition Swiper-like */
}

.product-page-carousel .carousel-indicators button.active {
  opacity: 1;
  background-color: var(--couleur-primaire-site); /* Couleur primaire */
}

/* Contrôles Précédent/Suivant (pour Bootstrap Carousel) */
.product-page-carousel .carousel-control-prev,
.product-page-carousel .carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; /* Taille Swiper-like */
  height: 40px;
  color: var(--couleur-primaire-site); /* Couleur Swiper-like */
  background-color: rgba(255, 255, 255, 0.7); /* Fond Swiper-like */
  border-radius: 50%;
  opacity: 1; /* Toujours visible, ou 0.8 si tu préfères */
  transition: background-color 0.2s;
  text-decoration: none;
  border: none;
}
.product-page-carousel .carousel-control-prev:hover,
.product-page-carousel .carousel-control-next:hover {
  background-color: rgba(255, 255, 255, 0.9); /* Fond Swiper-like au survol */
}
.product-page-carousel .carousel-control-prev { left: 15px; } /* Espacement Swiper-like */
.product-page-carousel .carousel-control-next { right: 15px; }

.product-page-carousel .carousel-control-prev-icon::after, /* Utilisation des ::after pour les icônes Swiper-like si besoin */
.product-page-carousel .carousel-control-next-icon::after {
  font-size: 1.2rem; /* Taille d'icône Swiper-like */
}
/* SVG pour les flèches (gardés de ta version, ils sont bien) */
.product-page-carousel .carousel-control-prev-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var(--couleur-primaire-site)'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
.product-page-carousel .carousel-control-next-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var(--couleur-primaire-site)'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/*
   NOTE IMPORTANTE SUR LES CARROUSELS:
   Les styles pour `#productCarousel` sont commentés ci-dessous.
   Si tu n'utilises plus un carrousel Bootstrap avec cet ID spécifique (par exemple, si tu es passé à SwiperJS
   pour toutes les galeries produits), tu peux supprimer toute la section commentée `#productCarousel`.
   Les styles ci-dessus pour `.product-page-carousel` sont une tentative de généralisation
   ou d'adaptation pour un carrousel Bootstrap sur une page produit.
   Si tu utilises SwiperJS, tes styles pour Swiper (que tu avais dans ton HTML de page produit)
   sont ceux qui s'appliqueront pour les classes `.swiper`, `.swiper-slide`, etc.
*/

/*
STYLES POUR LE CARROUSEL OBSOLETE #productCarousel (si plus utilisé, supprimer)
#productCarousel { ... }
#productCarousel .carousel-inner { ... }
... toutes les règles pour #productCarousel ...
*/


/* ==========================================================================
   7. Modale Personnalisée (si utilisée à la place ou en plus des modales Bootstrap)
   ========================================================================== */
.modal-overlayc {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;   /* Initialement caché */
  align-items: center;
  justify-content: center;
  z-index: 1055; /* Juste au-dessus des modales Bootstrap par défaut (1050) si besoin */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s 0.3s ease;
}

.modal-overlayc.active {
  display: flex; /* Doit être flex pour centrer */
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease, visibility 0s 0s ease; /* Ajustement pour la visibilité */
}

.modal-contentc {
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Ombre un peu plus douce */
  position: relative;
  width: 90%;
  max-width: 600px; /* Taille par défaut pour une modale de contenu standard */
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95); /* Effet subtil d'apparition */
  transition: transform 0.3s ease;
}
.modal-overlayc.active .modal-contentc {
    transform: scale(1);
}


/* Si cette modale est utilisée pour afficher un produit (alternative à une page dédiée) */
.modal-contentc.product-modal-lg {
    max-width: 1000px; /* Permet une modale plus large pour les détails produit */
}

.modal-closec {
  position: absolute;
  top: 15px; /* Ajustement pour être cohérent avec padding */
  right: 15px;
  font-size: 1.5rem; /* Utiliser rem pour la taille de police */
  line-height: 1; /* Pour un meilleur contrôle vertical */
  font-weight: bold;
  color: #888; /* Un gris plus doux */
  background: none; /* Pas de fond pour le bouton */
  border: none; /* Pas de bordure */
  padding: 0.5rem; /* Zone de clic un peu plus grande */
  cursor: pointer;
  z-index: 10; /* Au-dessus du contenu de la modale */
  transition: color 0.2s ease;
}
.modal-closec:hover {
  color: #000;
}

/* Styles pour le layout produit DANS la modale .modal-contentc (si applicable) */
/* Ces styles .product, .product-visuals, .details étaient dans ton code.
   Ils sont utiles si tu affiches un produit dans cette modale personnalisée.
   Sinon, si ce n'est que pour des messages ou formulaires simples, ils peuvent être enlevés. */
.modal-contentc .product { /* Cible .product à l'intérieur de .modal-contentc */
  display: flex;
  flex-wrap: wrap; /* Permet de passer en colonne sur mobile */
  gap: 20px; /* Espace entre visuals et details */
}

.modal-contentc .product-visuals {
  flex: 1 1 300px; /* Base de 300px, peut grandir */
  /* padding-right: 0; /* Retiré, gap s'en charge */
}

.modal-contentc .details {
  flex: 1 1 300px; /* Base de 300px, peut grandir */
}


/* ==========================================================================
   8. LightGallery (Plugin de Zoom)
   ========================================================================== */
.lg-backdrop {
  z-index: 1090 !important; /* Très élevé, au-dessus de tout, y compris modales */
}
.lg-outer {
  z-index: 1100 !important; /* Au-dessus du backdrop de lightGallery */
}

/* ==========================================================================
   9. Animations Personnalisées (Ajout au panier)
   ========================================================================== */
.btn-add-to-cart-animating {
  animation: pulse-ትንሽ 0.5s ease-out;
}
@keyframes pulse-ትንሽ {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.4); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(var(--bs-primary-rgb), 0); } /* Ombre un peu plus petite */
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0); }
}

.panier-icon-animating {
  animation: bounce-short 0.6s ease-out;
}
@keyframes bounce-short {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); } /* Rebond un peu plus petit */
  60% { transform: translateY(-3px); }
}

/* Feedback visuel sur l'icône du bouton lors de l'ajout */
.btn.adding-to-cart .bi-cart-plus {
  display: none;
}
.btn.adding-to-cart .bi-check-circle-fill {
  display: inline-block !important; /* Doit être visible */
  color: var(--couleur-succes); /* Vert succès */
}
.btn .bi-check-circle-fill { /* Initialement caché */
  display: none;
}

/* ==========================================================================
   10. Media Queries (Responsivité)
   ========================================================================== */
@media (max-width: 768px) {
  .moretop {
    padding-top: 75px; /* Ajuste cette valeur à la hauteur de ta navbar sur mobile si elle change */
                        /* Utiliser des % pour margin-top est moins fiable que des px/rem pour l'espacement fixe */
  }

  /* Layout produit dans la modale .modal-contentc (si utilisé) */
  .modal-contentc .product-visuals,
  .modal-contentc .details {
    flex-basis: 100%; /* Passe en pleine largeur sur mobile */
    padding-right: 0; /* Plus besoin de padding si pleine largeur */
  }
  .modal-contentc .product-visuals {
      margin-bottom: 20px; /* Espace si visuels avant détails */
  }

  .modal-contentc { /* Modale personnalisée sur mobile */
    width: 95%;
    padding: 20px; /* Un peu plus de padding que 15px */
  }

  .signature { /* Signature sur mobile */
      font-size: 1.6rem;
      text-align: center; /* Peut-être mieux centré sur mobile */
      margin-right: 0;
  }

  .product-details h1 { /* Titre produit sur page dédiée */
      font-size: 1.8rem;
  }
  .product-price { /* Prix produit sur page dédiée */
      font-size: 1.6rem;
  }
}

@media (max-width: 576px) {
    /* Ajustements pour écrans très petits si nécessaire */
    .moretop {
        padding-top: 70px; /* Exemple */
    }
    .card-title {
        font-size: 1.1rem; /* Titres de carte plus petits */
    }
    .btn {
        font-size: 0.875rem; /* Boutons un peu plus petits */
    }
}

 /* Styles existants pour la page produit et Swiper (gardez-les) */
    .product-page-section { padding-top: 5rem; padding-bottom: 3rem; }
    .product-details h1 { font-size: 2.2rem; margin-bottom: 1rem; }
    .product-price { font-size: 1.8rem; font-weight: bold; color: var(--bs-primary); margin-bottom: 1.5rem; }
    .product-features li { margin-bottom: 0.5rem; }
    .breadcrumb-item a { text-decoration: none; }
    .product-swiper-container { width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); }
    .swiper-slide { display: flex; justify-content: center; align-items: center; background-color: #f8f9fa; min-height: 300px; }
    .swiper-slide img { display: block; width: auto; max-width: 100%; max-height: 550px; object-fit: contain; cursor: zoom-in; }
    .swiper-slide .video-container { width: 100%; max-height: 550px; display: flex; justify-content: center; align-items: center; background-color: #000; }
    .swiper-slide .video-container video { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
    .swiper-pagination-bullet { width: 10px; height: 10px; background-color: #adb5bd; opacity: 0.7; transition: opacity 0.3s, background-color 0.3s; }
    .swiper-pagination-bullet-active { opacity: 1; background-color: var(--bs-primary, #007bff); }
    .swiper-button-prev, .swiper-button-next { color: var(--bs-primary, #007bff); background-color: rgba(255, 255, 255, 0.7); border-radius: 50%; width: 40px; height: 40px; transition: background-color 0.2s; }
    .swiper-button-prev:hover, .swiper-button-next:hover { background-color: rgba(255, 255, 255, 0.9); }
    .swiper-button-prev::after, .swiper-button-next::after { font-size: 1.2rem; }

    /* Styles pour les onglets de description produit (gardez-les) */
    .product-description-tabs { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #dee2e6; }
    .product-description-tabs .nav-tabs { border-bottom: 1px solid #dee2e6; margin-bottom: 0; }
    .product-description-tabs .nav-tabs .nav-link { font-weight: 500; color: #495057; background-color: #f8f9fa; border: 1px solid #dee2e6; border-bottom-color: transparent; border-radius: 0.35rem 0.35rem 0 0; margin-right: 2px; }
    .product-description-tabs .nav-tabs .nav-link.active { color: var(--bs-primary, #0d6efd); background-color: #fff; border-color: #dee2e6 #dee2e6 #fff; }
    .product-description-tabs .tab-content { padding: 1.5rem; border: 1px solid #dee2e6; border-top: none; border-radius: 0 0 0.35rem 0.35rem; background-color: #fff; min-height: 200px; }
    .product-description-tabs .tab-pane h4 { margin-top: 0; margin-bottom: 1rem; font-size: 1.4rem; color: #333; }
    .product-description-tabs .tab-pane ul { padding-left: 1.2rem; }
    .product-description-tabs .tab-pane li { margin-bottom: 0.5rem; }
	
	
	
	/* Pour l'animation de l'icône du panier dans la navbar */
.panier-icon-navbar.panier-icon-animating-strong {
  animation: bounceStrong 0.8s ease-in-out; /* Animation plus prononcée */
}

@keyframes bounceStrong {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0) scale(1);
  }
  40% {
    transform: translateY(-10px) scale(1.2); /* Monte plus haut et grossit plus */
  }
  60% {
    transform: translateY(-5px) scale(1.1);
  }
}

/* CSS pour le bouton "Ajouter au panier" avec icônes interchangeables */
.btn-add-to-cart .btn-cart-icon-wrapper {
  position: relative;
  display: inline-block;
  width: 1.2em; /* Ajustez selon la taille de vos icônes */
  height: 1.2em;
  vertical-align: text-bottom;
  margin-right: 0.3em;
}

.btn-add-to-cart .btn-cart-icon-wrapper .icon-plus,
.btn-add-to-cart .btn-cart-icon-wrapper .icon-added {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  opacity: 1;
  transform: scale(1);
}

.btn-add-to-cart .btn-cart-icon-wrapper .icon-added {
  opacity: 0;
  transform: scale(0.5);
  color: #ffc107; /* Couleur jaune pour le pouce */
}

.btn-add-to-cart.adding-to-cart .btn-cart-icon-wrapper .icon-plus {
  opacity: 0;
  transform: scale(0.5);
}

.btn-add-to-cart.adding-to-cart .btn-cart-icon-wrapper .icon-added {
  opacity: 1;
  transform: scale(1);
}

/* Pour l'animation du bouton lui-même (subtile) */
.btn-add-to-cart.btn-add-to-cart-animating {
  animation: pulseButton 0.5s ease-in-out;
}

@keyframes pulseButton {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.text-primary {
	--bs-text-opacity: 1;
	color: rgb(62, 64, 66) !important;
}

/* Dans votre fichier CSS principal */
#contenuPanier .list-group-item img {
  /* object-fit: cover; /* Assure que l'image couvre bien l'espace sans se déformer */
  /* border-radius: 0.25rem; /* Bords arrondis comme les cartes Bootstrap */
  /* max-width: 60px; /* Limite la largeur */
  /* height: auto;  /* Maintient le ratio */
}

#contenuPanier .list-group-item .product-placeholder-icon { /* Si vous voulez styler le placeholder */
  width: 60px;
  height: 60px;
  background-color: #e9ecef; /* Couleur de fond Bootstrap pour les placeholders */
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#contenuPanier .list-group-item .product-placeholder-icon .bi-image {
  font-size: 1.75rem; /* Taille de l'icône placeholder */
  color: #6c757d; /* Couleur de texte Bootstrap muted */
}

/* Pour s'assurer que le lien ne change pas la couleur du texte par défaut si vous ne voulez pas de soulignement bleu */
#contenuPanier .list-group-item a.text-dark:hover {
  /* text-decoration: underline; */ /* Optionnel, pour souligner au survol */
}

	
	.product-features .feature-title {
  white-space: nowrap; /* Empêche le retour à la ligne à l'intérieur de ce span */
  margin-right: 0.3em; /* Ajoute un petit espace après les deux-points, avant la description */
}
/* Assurez-vous que les styles pour .product-features li sont toujours là pour l'alignement avec l'icône */
.product-features li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}
.product-features li i {
  margin-top: 0.15em; 
  /* me-2 de Bootstrap gère déjà la marge à droite de l'icône */
}