body#checkout section.checkout-step,
.card,
.breadcrumb{
    background-color: #d6f9ed;
}


#products .thumbnail-container, 
.featured-products .thumbnail-container, 
.product-accessories .thumbnail-container, 
.product-miniature .thumbnail-container,
#products .product-description, 
.featured-products .product-description, 
.product-accessories .product-description, 
.product-miniature .product-description,
.anblog-widget{
    background: none;
}


.breadcrumb {
    display: none !important;
}


 
#left-column #categories_blog_menu{
    background: none !important;
}
#categories_blog_menu a {
    font-weight: bold !important;
}


.anbrandslider {
    background: none !important;
}
/* Supprime flou et transparence sur les éléments spécifiques */
.anbrandslider *,
.anbrandslider img {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
}


#left-column .block.an-blog-tags {
    background: none !important;
}

#left-column .block.an-block-sidebar {
    background: none !important;
}
/* Titre du bloc Tags */
#left-column .block.an-blog-tags .title_block {
    font-weight: bold !important;
}

/* Titre du bloc Posts Récents */
#left-column .block.an-block-sidebar .title_block {
    font-weight: bold !important;
}



.contact-rich .block> a {
    margin-left: 0;
}



/* Titres */
h1, h2, h3 {
    font-weight: 800;
    letter-spacing: -0.3px;
    text-transform: uppercase !important;
  
}

/* Paragraphes */
p {
    font-size: 1rem;
    line-height: 1.3;
    text-align: justify;
    letter-spacing: -0.2px;
}


.product-features h3{
    display: none !important;
}


.blog-item .title {
    font-size: 24px;          /* Augmente la taille du titre */
    font-weight: bold;        /* Rend le texte plus gras */
    color: #000000;           /* Change la couleur du texte (choisissez une couleur de votre choix) */
    text-align: center !important;       /* Centre le texte */
    margin: 10px 0;           /* Ajoute un espace autour du titre */
    text-transform: uppercase; /* Met le texte en majuscules */
    letter-spacing: 0.5px;      /* Ajoute un espacement entre les lettres */
}

.blog-item .title:hover {
    color: #0e7c86 !important;          /* Change la couleur au survol */
    transform: scale(1.15);   /* Agrandit légèrement le titre au survol */
    transition: all 0.3s ease; /* Ajoute une transition fluide */
}


.blog-item .blog-meta {
    display: none;
}



 .header-nav, nav {
    border: none !important;
}

header, nav, .breadcrumb, section#wrapper {
    border: none !important;
}

.h1.products-section-title.anblog-widget-title {
    font-weight: bold !important;
    font-size: 36px;          /* Augmente la taille du titre */
    color: #000000;           /* Change la couleur du texte (choisissez une couleur de votre choix) */
    letter-spacing: 0.5px;      /* Ajoute un espacement entre les lettres */
}

.h1.products-section-title.anblog-widget-title:hover {
    color: #0e7c86 !important;          /* Change la couleur au survol */
    transform: scale(1.15);   /* Agrandit légèrement le titre au survol */
    transition: all 0.3s ease; /* Ajoute une transition fluide */
}


/* Rendre l'image responsive */
.an_homeproducts-banner-image img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

/* Centrer et ajuster le contenu de la bannière */
.an_homeproducts-banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
}

/* Media queries pour l'adaptation mobile */
@media screen and (max-width: 1024px) {
    .an_homeproducts-banner-content {
        width: 80%;
    }
}

@media screen and (max-width: 768px) {
    .an_homeproducts-banner-content {
        font-size: 14px; /* Réduction de la taille du texte */
    }
}

@media screen and (max-width: 480px) {
    .an_homeproducts-banner-content {
        width: 95%;
        font-size: 12px;
    }
}

.pagination .col-md-12 {
    display: none !important;
}

.product-manufacturer {
    display: none !important;
}

.product-reference {
    display: none !important;
}

span.info {
    display: none !important;
}


.btn-primary {
    background-color: #0e7c86 !important; /* Remplacez cette couleur par celle de votre choix */
    border-color: #0e7c86 !important;
}

.btn-primary:hover {
    background-color: #094950 !important; /* Couleur au survol */
    border-color: #094950 !important;
}



/* Applique une bordure noire aux boutons non sélectionnés */
.input-radio:not(:checked) + .radio-label {
    background-color: transparent; /* Enlève le fond */
}


/* Supprime le fond et ajoute une bordure personnalisée + améliore l'affichage */
.an_productattributes-qty {
    background-color: transparent !important; /* Supprime le fond */
    border: 2px solid #0e7c86 !important; /* Ajoute une bordure */
    color: black !important; /* Assure que le texte est visible */
    border-radius: 4px; /* Coins légèrement arrondis */
    padding: 5px !important; /* Réduit le padding comme demandé */
    height: 40px !important; /* Garde une hauteur fixe */
    width: 70px !important; /* Largeur fixe pour gérer les chiffres à deux digits */
    text-align: center !important; /* Centre le texte dans le champ */
}



/* Texte noir pour les onglets non actifs */
.an_homeproducts-tab {
    color: #000000 !important; /* Noir */
}

/* Texte bleu pour l'onglet actif */
.an_homeproducts-tab.active {
    color: #0e7c86 !important; /* Bleu */
}


/* Supprime le fond et ajoute une bordure avec une couleur personnalisée */
.contact-form {
    background-color: transparent !important; /* Supprime le fond */
    border: 3px solid #0e7c86 !important; /* Bordure avec la couleur HEX de ton choix */
    border-radius: 10px; /* Coins légèrement arrondis pour un meilleur rendu */
}

/* Supprime le fond et ajoute une bordure personnalisée */
.link-item {
    background-color: transparent !important; /* Supprime le fond */
    border: 3px solid #0e7c86 !important; /* Bordure avec couleur HEX de ton choix */
    border-radius: 10px; /* Coins légèrement arrondis */
    display: inline-block; /* Garde la bonne mise en forme */
}


/* Supprime le fond et ajoute une bordure personnalisée au widget de recherche */
#search_widget {
    background-color: transparent !important; /* Supprime le fond */
    border: 2px solid #0e7c86 !important; /* Bordure avec la couleur HEX de ton choix */
    border-radius: 5px; /* Coins légèrement arrondis */
}

/* Supprime le fond et assure que le texte est bien noir */
#search_widget input[type="text"] {
    background-color: transparent !important; /* Supprime le fond */
    color: #000000 !important; /* Force le texte en noir */
}

/* Ajuste aussi le placeholder en noir */
#search_widget input[type="text"]::placeholder {
    color: #000000 !important; /* Placeholder en noir */
    opacity: 1 !important; /* Assure qu'il ne soit pas trop clair */
}

/* Assure que le bouton de recherche et son icône sont noirs */
#search_widget button {
    background-color: transparent !important; /* Supprime le fond */
    color: #000000 !important; /* Force le texte noir si nécessaire */
}

/* Change la couleur de l'icône de recherche */
#search_widget button svg path {
    fill: #000000 !important; /* Assure que l'icône du bouton est bien noire */
}


/* Applique une couleur de fond personnalisée au menu panier */
.sb-menu-right {
    background-color: #bfece0 !important; /* Remplace #f5f5f5 par ta couleur HEX */
}


/* Applique une couleur de fond aux autres éléments internes */
.cart-dropdown-wrapper {
    background-color: #bfece0 !important;
}


#content.page-content.card.card-block {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}


a[data-link-action="display-register-form"] {
    font-weight: bold;
    color: black !important;
}

a[rel="nofollow"] {
    color: black !important;
}


#new-product-page,
#best-sales-page,
#prices-drop-page {
    display: none !important;
}

.blog-description a.btn {
white-space: normal;
}


/* ✅ Responsive Mobile Only */
@media (max-width: 768px) {

  /* 🔧 Images d'articles responsive */
  .blog-image-container img,
  .blog-image img {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    display: block;
    object-fit: cover;
  }

  /* 📝 Titre du blog responsive */
  .blog-image-container .title.h4,
  .blog-image-container .title.h4 a {
    font-size: 1rem;
    line-height: 1.4;
    text-align: center;
    padding: 0 10px;
    display: block;
    color: #333;
    text-decoration: none;
    word-wrap: break-word;
    max-width: 100%;
  }

  /* 🧩 Groupe d'attributs produits */
  .an_productattributes-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .an_productattributes-group .input-container {
    flex: 0 1 auto;
    margin: 0;
  }

  /* 🔍 Barre de recherche mobile */
  #_mobile_search_widget {
    padding: 0 15px;
  }

  #_mobile_search_widget .search-form {
    width: 100%;
  }

  #_mobile_search_widget input[type="text"] {
    width: 100%;
    box-sizing: border-box;
  }

  /* 🖼️ Bannière page accueil */
  .anhp-banner-global-top {
    display: none;
  }

  .an_homeproducts-banner-image img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* 🏷️ Titres d’accueil */
  .an_homeproducts-tab {
    display: flex;
    align-items: center;
    text-align: left;
    justify-content: flex-start;
  }

  .an_homeproducts-tabs-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* 📰 Articles de blog */
  .anblog-widget-item {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  /* 🚫 Masquer le carousel de marques */
  #an_brandslider-block {
    display: none;
  }  
  
}

 


/* PAGE DE BLOG : Corrige l'espacement global */
body {
  overflow-x: hidden;
}

/* Conteneur principal du blog */
.anblog-content-wrapper {
  padding-left: 15px;
  padding-right: 15px;
}

/* Force les articles de blog à ne pas dépasser */
.blog-item-list {
  margin-left: 0;
  margin-right: 0;
}

/* Image responsive */
.blog-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Rééquilibre la structure des colonnes */
.blog-item .row {
  margin-left: 0;
  margin-right: 0;
}

/* Centrage du contenu du blog à gauche */
.blog-info {
  padding: 15px;
}

/* Liens "Lire l'article" */
.blog-info .more {
  display: inline-block;
  margin-top: 10px;
  text-transform: uppercase;
  font-weight: bold;
}

/* Adaptation mobile */
@media (max-width: 767px) {
  .blog-image-container,
  .blog-info {
    width: 100% !important;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .blog-info {
    padding: 10px 0;
  }

  .blog-item .row {
    display: block;
  }
}



/* PAGE DE POST : Évite le débordement horizontal */
/* Ajoute un padding horizontal sur mobile pour aérer le texte */
@media (max-width: 767px) {
  .blog-description,
  .blog-detail .blog-image,
  .blog-detail .blog-title,
  #content-wrapper {
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* ✅ Masque le bloc blog et les tabs produits sur mobile */
@media (max-width: 767px) {
  .anblog-widget,
  .an_homeproducts-tabs-list {
    display: none !important;
  }
}








/* PAGES PRODUITS : Corrige les images des pages produits sur mobile */
/* ✅ S'applique uniquement aux pages produit */
@media (max-width: 767px) {
  body.page-product,
  body.page-product .container,
  body.page-product .page-content,
  body.page-product .productblock-image,
  body.page-product .productblock-content,
  body.page-product .product-mainblock .row,
  body.page-product .images-container,
  body.page-product #main,
  body.page-product #content,
  body.page-product .product-information,
  body.page-product .product-description {
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }

  /* ✅ Corrige les débordements horizontaux sans casser Slick */
  body.page-product {
    overflow-x: hidden !important;
  }

  /* ❗️ On supprime uniquement les largeurs fixes gênantes */
  body.page-product .slick-track,
  body.page-product .slick-slide {
    box-sizing: border-box;
  }

  /* ✅ Supprime les flèches sur mobile, sans masquer le contenu */
  body.page-product .slick-arrow {
    display: none !important;
  }
}





  /* ✅ PAGE DE CONTACT */
/* Corrige l'overflow horizontal */
body.page-contact {
  overflow-x: hidden !important;
}

/* Garantit que les conteneurs restent dans la largeur de l’écran */
body.page-contact .container,
body.page-contact .row,
body.page-contact [class^="col-"] {
  max-width: 100% !important;
  box-sizing: border-box;
  word-wrap: break-word;
}

/* Empêche les champs/formulaires/images de casser la mise en page */
body.page-contact input,
body.page-contact select,
body.page-contact textarea,
body.page-contact img {
  max-width: 100% !important;
  height: auto;
}





/* PAGE DE PANIER Évite tout débordement horizontal */
body.page-cart {
  overflow-x: hidden;
}

/* Corrige la largeur globale du conteneur pour éviter les débordements */
body.page-cart .container {
  max-width: 100vw;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}

/* Garantit que les lignes ne débordent pas */
body.page-cart .row {
  margin-left: 0;
  margin-right: 0;
}

/* Évite que certains éléments aillent au-delà de l’écran */
body.page-cart [class^="col-"] {
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
}


/* HEADER MOBILE */

@media (max-width: 991px) {
  .header-nav {
    background-color: transparent !important;
  }
}

@media (max-width: 991px) {
  .mobile-header {
    background-color: #d6f9ed !important;
  }
}




/* ✅ PAGE DE COMMANDE - Padding mobile pour recentrer */
@media (max-width: 767px) {
  body.page-order #main,
  body.page-order .checkout-content,
  body.page-order .chechout-steps,
  body.page-order .card.js-cart {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
}