#header .amenu-item:not(:first-child) .amenu-link::before {
  content: "";
  position: absolute;
  left: 0;                    /* le trait se place au bord gauche du lien */
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background-color: #000;
}


/* ============================================================
   HOME "an_homeproducts" — Restyle cartes façon lvpt
   Cible : thème Anvanto (Eco Bella), classes an_*
   ============================================================ */

/* --- La grille : cartes de hauteur égale par ligne --- */
.an_homeproducts .products.row {
  display: flex;
  flex-wrap: wrap;
}
/* Chaque carte occupe sa colonne et s'étire à la hauteur de la ligne */
.an_homeproducts .product-miniature {
  display: flex;
  margin-bottom: 25px;
}

/* --- La carte : fond blanc, ombre douce, coins arrondis --- */
.an_homeproducts .product-miniature .thumbnail-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;                       /* fond blanc de la carte */
  border-radius: 5px;                    /* coins arrondis */
  border: 1px solid #e5e5e5;              /* contour clair */
  padding: 15px;
  transition: box-shadow .2s ease, transform .2s ease;
}
/* Léger relief au survol */
.an_homeproducts .product-miniature .thumbnail-container:hover {
  border-color: #e5e5e5;   /* contour bleu charte au survol */
  transform: translateY(-2px);
}

/* --- La zone texte s'étire pour pousser le bloc panier en bas --- */
.an_homeproducts .product-miniature .product-description {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* --- Titre : centré, séparateur fin en dessous --- */
.an_homeproducts .product-miniature .product-title {
  text-align: center;
  font-size: 15px;
  margin-top: 10px;
}
.an_homeproducts .product-miniature .product-title a {
  color: #333;
}
/* Trait fin sous le titre (comme sur lvpt) */
.an_homeproducts .product-miniature .product-price-and-shipping {
  text-align: center;
  border-top: 1px solid #eee;   /* séparateur */
  padding-top: 12px;
  margin-top: 6px;
}

/* --- Prix en bleu charte --- */
.an_homeproducts .product-miniature .product-miniature-prices .price,
.an_homeproducts .product-miniature .product-miniature-prices .money {
  color: #000000;               /* bleu charte */
  font-size: 22px;
  font-weight: 700;
}

/* --- Sélecteur de déclinaison : pleine largeur, propre --- */
.an_homeproducts .product-miniature .an_pa_product-variants .form-control-select {
  width: 100%;
  margin: 10px 0;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

/* --- Le bloc panier collé en bas de la carte --- */
.an_homeproducts .product-miniature .an_productattributes {
  margin-top: auto;
}

/* Ligne quantité + bouton alignés horizontalement */
.an_homeproducts .product-miniature .an_productattributes-qty-add {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

/* Champ quantité : compact à gauche */
.an_homeproducts .product-miniature .an_productattributes-qty-container {
  flex: 0 0 auto;
  width: 64px;
}
.an_homeproducts .product-miniature .an_productattributes-qty {
  width: 100% !important;
  height: 100%;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 6px;
}

/* Bouton : bleu charte, prend la place restante */
.an_homeproducts .product-miniature .an_productattributes-add {
  flex: 1 1 auto;
  display: flex;
}
.an_homeproducts .product-miniature .js-an_productattributes-add-to-cart {
  flex: 1 1 auto;
  background: #009d96 !important;   /* bleu charte */
  border-color: #009d96 !important;
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap;
}
.an_homeproducts .product-miniature .js-an_productattributes-add-to-cart:hover {
  background: #009d96 !important;   /* bleu plus foncé au survol */
  border-color: #009d96 !important;
}


/* --- Masquer les étoiles d'avis sur les cartes home --- */
.an_homeproducts .product-miniature .product-list-reviews {
  display: none;
}


/* --- Titre produit plus gras sur les cartes home --- */
.an_homeproducts .product-miniature .product-title a {
  font-weight: 700;
}


/* --- 4 cartes par ligne + espace entre les cartes --- */
@media (min-width: 992px) {
  /* La grille : marge négative pour compenser le padding des cartes */
  .an_homeproducts .products.row {
    margin-left: -12px;
    margin-right: -12px;
  }
  /* Chaque carte : 25% de large, avec un padding latéral qui crée l'écart */
  .an_homeproducts .products.row .product-miniature {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
    margin-right: 0 !important;   /* annule le margin-right: 30px du thème */
    padding-left: 12px;
    padding-right: 12px;
  }
}


/* --- Arrière-plan de page gris très clair sur tout le site --- */
body {
  background: #f7f7f7;
}


/* --- Fiche produit : encadré quantité propre (touchspin) --- */
/* Le conteneur touchspin porte le seul contour, ajusté au contenu */
.product-quantity .qty .input-group.bootstrap-touchspin {
  display: inline-flex;
  align-items: stretch;
  width: auto;
  height: 44px;                        /* hauteur fixe de l'encadré */
  background: #fff;
  border: 1px solid #ccc !important;   /* contour sur les 4 côtés */
  border-radius: 6px;
  overflow: hidden;
  vertical-align: top;
}
.product-quantity .qty .input-group.bootstrap-touchspin::after {
  content: none !important;            /* neutralise le clearfix */
}

/* Le champ : sans bordure, occupe toute la hauteur du conteneur */
.product-quantity .qty .input-group.bootstrap-touchspin #quantity_wanted {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  height: 100% !important;             /* épouse la hauteur du conteneur */
  width: 55px;
  text-align: center;
  margin: 0 !important;
}

/* Les flèches verticales : trait de séparation à gauche, pleine hauteur */
.product-quantity .qty .input-group-btn-vertical {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-left: 1px solid #eee;
}
.product-quantity .qty .input-group-btn-vertical button {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  flex: 1;                             /* les 2 flèches se partagent la hauteur */
  padding: 0 8px;
}

/* ============================================================
   HEADER — Nouveau layout (logo | recherche | icônes + bande menu)
   ============================================================ */

/* --- LIGNE 1 : logo à gauche, recherche au centre, icônes à droite --- */
.header-top .header-top-wrapper {
  display: flex;
  align-items: center;      /* tout centré verticalement : logo, recherche, icônes */
  justify-content: space-between;
  padding: 15px 0;
}
/* La zone recherche : centrée verticalement avec le logo */
.header-top .header-search-center {
  display: flex;
  align-items: center;
  align-self: center;
  position: relative;
  top: 10px;              /* descend la recherche — ajuste la valeur */
}

/* Le logo garde sa taille */
.header-top #_desktop_logo {
  flex: 0 0 auto;
}

/* La zone recherche : au centre, large */
.header-top .header-search-center {
  flex: 1 1 auto;
  max-width: 550px;      /* largeur du champ de recherche */
  margin: 0 40px;
}

/* Les icônes : à droite */
.header-top .header-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* --- LIGNE 2 : bande de menu turquoise pleine largeur --- */
.ml-menu-band {
  background: #009d96;                /* turquoise */
  width: 100vw;                       /* pleine largeur écran */
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

/* Le menu : texte blanc, aligné à gauche */
.ml-menu-band #amegamenu .anav-top > .amenu-item > .amenu-link {
  color: #fff !important;
  padding-top: 18px !important;      /* baisse = bande plus fine */
  padding-bottom: 18px !important;
  padding-left: 20px !important;     /* espacement horizontal entre les entrées */
  padding-right: 20px !important;
  font-size: 19px !important;        /* police plus grande */
}
/* --- Forcer la hauteur de la bande turquoise --- */
.ml-menu-band .header-center,
.ml-menu-band .header-top-nav,
.ml-menu-band .amega-menu,
.ml-menu-band #amegamenu,
.ml-menu-band .fixed-menu-container,
.ml-menu-band .anav-top {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* --- Aligner la 1re entrée du menu sur le bord gauche du logo --- */
.ml-menu-band #amegamenu .anav-top > .amenu-item:first-child > .amenu-link {
  padding-left: 5 !important;
}






/* --- Aligner le menu sur le bord gauche du logo --- */
.ml-menu-band .anav-top {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Séparateurs "|" en blanc */
.ml-menu-band .amenu-item:not(:first-child) .amenu-link::before {
  background-color: #fff !important;
}


/* --- Recherche au centre : champ visible en permanence --- */
/* On masque le bouton loupe du centre */
.header-search-center .search-button {
  display: none !important;
}
/* Le dropdown devient un champ toujours visible */
.header-search-center .search-wrapper {
  width: 100%;
}
.header-search-center #search_widget.dropdown-menu {
  display: block !important;
  position: static !important;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  transform: none !important;
}
/* Le formulaire : champ arrondi */
.header-search-center #search_widget form {
  display: flex !important;
  align-items: center;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 25px;
  background: #fff;
  padding: 4px 15px;
}
.header-search-center #search_widget input[type="text"] {
  flex: 1 1 auto;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 8px !important;
  box-shadow: none !important;
}




/* ============================================================
   HEADER FIXE — reste en haut au scroll
   ============================================================ */
#header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #fff;      /* fond opaque pour que le contenu ne transparaisse pas */
}


/* ============================================================
   MÉGA-MENU DÉROULANT — aligné sous le mot survolé
   ============================================================ */

/* ============================================================
   MÉGA-MENU — on laisse le thème gérer largeur + colonnes.
   On ajoute seulement : traits cosmétiques + recentrage du panneau.
   ============================================================ */

/* Traits fins sous chaque lien (cosmétique, sans impact sur la mise en page) */
.ml-menu-band #amegamenu .category-item.level-2 {
  border-bottom: 1px solid #e5e5e5;
}
.ml-menu-band #amegamenu .category-item.level-2:last-child {
  border-bottom: none;
}
/* Fond gris clair au survol des liens de catégorie dans le méga-menu */
.ml-menu-band #amegamenu .category-item.level-2 .amenu-link {
  display: block;   /* le lien occupe toute la largeur de la cellule */
}
/* Fond gris clair au survol des entrées principales du menu (barre turquoise) */
.ml-menu-band #amegamenu .anav-top > .amenu-item > .amenu-link:hover {
  background: #53bbb5 !important;   /* gris clair au survol */
  color: #ffffff !important;           /* texte foncé pour rester lisible sur gris */
}
/* Masque le séparateur du lien survolé... */
.ml-menu-band #amegamenu .anav-top > .amenu-item > .amenu-link:hover::before {
  opacity: 0 !important;
}
/* ...et celui du lien juste à droite (voisin suivant) */
.ml-menu-band #amegamenu .anav-top > .amenu-item:hover + .amenu-item > .amenu-link::before {
  opacity: 0 !important;
}
/* Légère ombre sur le haut du panneau, pour le détacher de la barre du menu */
.ml-menu-band #amegamenu .adropdown {
 box-shadow: inset 0 8px 8px -6px rgba(0,0,0,.45) !important;   /* ombre plus marquée en haut, à l'intérieur */
}
/* On cible le bloc entier au survol (pas seulement le lien) */
.ml-menu-band #amegamenu .category-item.level-2:hover {
  background: #f0f0f0 !important;   /* gris clair au survol */
}
.ml-menu-band #amegamenu .category-item.level-2:hover .amenu-link {
  background: #f0f0f0 !important;   /* le lien aussi, pour couvrir toute la cellule */
}
/* Empêche le panneau de déborder hors de l'écran à gauche.
   On force son bord gauche à s'aligner sous le menu, sans le recentrer. */
.ml-menu-band #amegamenu .amenu-item {
  position: relative;   /* le panneau se positionne par rapport à son entrée de menu */
}
.ml-menu-band #amegamenu .adropdown {
  left: 0 !important;              /* démarre sous l'entrée survolée */
  right: auto !important;
  transform: none !important;      /* annule le recentrage du thème qui le fait déborder */
}


/* --- Recherche centrale visible sur mobile (compacte) --- */
@media (max-width: 991px) {
  .header-top .header-search-center,
  .header-search-center {
    display: flex !important;
  }
}


/* ============================================================
   MODULE VÉRIFICATION D'ÂGE (ETS Age Verification)
   ============================================================ */

/* L'overlay : au-dessus de tout (menu compris) */
.ets_av_overload {
  z-index: 999999 !important;
}

/* La boîte : taille limitée, centrée */
.ets_av_content_popup .ets_av_ageverification,
.ets_av_content_popup .panel {
  max-width: 480px !important;      /* largeur max desktop */
  width: 90% !important;            /* s'adapte sur mobile */
  margin: 0 auto !important;
  max-height: 85vh !important;      /* ne dépasse pas la hauteur d'écran */
  overflow-y: auto !important;      /* scroll interne si trop de contenu */
  box-sizing: border-box !important;
}

/* Mobile : popup compacte, tout réduit pour tenir sans scroll */
@media (max-width: 767px) {
  /* La boîte : compacte, hauteur auto, pas de scroll */
  .ets_av_content_popup .ets_av_ageverification,
  .ets_av_content_popup .panel {
    transform: none !important;
    width: 88% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    padding: 15px !important;
    max-height: none !important;        /* plus de limite de hauteur */
    overflow: visible !important;       /* plus de scroll interne */
    box-sizing: border-box !important;
  }
  .ets_av_table_cell {
    vertical-align: middle !important;
  }
  /* Réduire l'image/picto 18+ */
  .ets_av_content_popup img {
    max-height: 70px !important;
    width: auto !important;
  }
  /* Réduire les textes */
  .ets_av_content_popup .ets_av_ageverification p,
  .ets_av_content_popup .panel p {
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin: 6px 0 !important;
  }
  .ets_av_content_popup h1,
  .ets_av_content_popup h2,
  .ets_av_content_popup h3,
  .ets_av_content_popup .panel-title {
    font-size: 16px !important;
    margin: 6px 0 !important;
  }
  /* Boutons compacts, empilés */
  .ets_av_content_popup .ets_av_ageverification .btn,
  .ets_av_content_popup .panel .btn,
  .ets_av_cancel,
  .ets_av_primary {
    display: block !important;
    width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 10px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    float: none !important;
    position: static !important;
  }
}
/* ============================================================
   APERÇU RAPIDE (quickview) — passer au-dessus du header sticky
   ============================================================ */

/* La popup elle-même : au-dessus du header (z-index 9999) */
.modal.quickview {
  z-index: 10050 !important;
}

/* L'arrière-plan sombre de la popup : juste en dessous d'elle, mais au-dessus du header */
.modal-backdrop {
  z-index: 10040 !important;
}

/* Recadrer l'image produit pour qu'elle ne soit plus coupée en haut */
.modal.quickview .modal-body {
  padding-top: 20px !important;           /* espace en haut dans la popup */
}
/* ---- Agrandir l'image dans l'aperçu rapide (slider Slick) ---- */

/* L'image : occupe toute la largeur de sa colonne, hauteur automatique */
.modal.quickview .productslider-main-image {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* Libérer les conteneurs Slick qui bloquent la taille et coupent l'image */
.modal.quickview .an_productpage-slider,
.modal.quickview .an_productpage-slider-main,
.modal.quickview .slick-list,
.modal.quickview .slick-track,
.modal.quickview .slick-slide,
.modal.quickview .an_productpage-slider-item,
.modal.quickview .an_productpage-slider-image {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;          /* débloque la hauteur figée par Slick */
  overflow: visible !important;      /* l'image n'est plus coupée */
}



//* ============================================================
   RECHERCHE (jolisearch) — cartes façon lvpt : image grande + contour
   ============================================================ */

v

/* Supprime le fond ajouté au survol (garde juste le contour qui se teinte) */
.jolisearch-content li.product:hover,
.jolisearch-content li.product > a:hover,
.jolisearch-content li.product.ui-state-active,
.jolisearch-content li.product .ui-state-active {
  background: #fff !important;             /* pas de fond gris/coloré au survol */
  border-color: #ccc !important;           /* le contour devient juste un peu plus visible */
}

/* Le lien occupe toute la carte, contenu centré en colonne */
.jolisearch-content li.product > a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-decoration: none !important;
}

/* Image produit : s'adapte à la colonne (ne force plus une largeur fixe) */
.ui-menu.ui-jolisearch .jolisearch-content li.product .product-image {
  object-fit: contain !important;
  width: auto !important;
  height: 120px !important;        /* hauteur fixe, largeur proportionnelle */
  max-width: 100% !important;
  margin: 0 auto 8px !important;
  display: block !important;
}


/* Supprime le fond gris au survol/actif dans la liste de recherche (jQuery UI) */
.ui-menu.ui-jolisearch .ui-state-active,
.ui-menu.ui-jolisearch .ui-state-focus,
.ui-menu.ui-jolisearch .ui-menu-item-wrapper.ui-state-active,
.ui-menu.ui-jolisearch li.product:hover,
.ui-menu.ui-jolisearch li.product .ui-state-active,
.ui-menu.ui-jolisearch li.product > a:hover {
  background: transparent !important;
  border-color: transparent !important;
}


/* ============================================================
   RECHERCHE — équilibrage des espaces + texte limité à 3 lignes
   ============================================================ */

/* Seul le NOM est limité à 2 lignes (le prix reste toujours visible en dessous) */
.ui-menu.ui-jolisearch .jolisearch-product .product-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;      /* nom : 2 lignes maximum */
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
/* Le prix : bien en dessous du nom, toujours affiché */
.ui-menu.ui-jolisearch .jolisearch-product .product-price {
  display: block !important;
  margin-top: 6px !important;
}

/* Élargir la zone du panneau de résultats de recherche */
.ui-menu.ui-jolisearch {
  width: 900px !important;         /* largeur du panneau — ajuste (850, 900, 1000…) */
  max-width: 95vw !important;      /* ne dépasse jamais l'écran */
  box-sizing: border-box !important;
}

/* Élargir le panneau de résultats pour afficher 4 colonnes entières */
.ui-menu.ui-jolisearch {
  width: 1100px !important;        /* largeur du panneau — ajuste si besoin */
  max-width: 96vw !important;      /* ne dépasse jamais l'écran */
  box-sizing: border-box !important;
}


/* Réduire l'espace horizontal entre les colonnes de la recherche */
.ui-menu.ui-jolisearch .jolisearch-content li.product {
  padding-left: 0px !important;
  padding-right: àpx !important;
  box-sizing: border-box !important;
}


/* Réduire l'espace horizontal : le padding du lien (était 15px 30px) */
.ui-menu.ui-jolisearch .jolisearch-content li.product > a {
  padding-left: 8px !important;
  padding-right: 8px !important;
}


/* Masquer la ligne de catégorie grise (garder : image → nom 2 lignes → prix) */
.ui-menu.ui-jolisearch .jolisearch-product .product-category,
.ui-menu.ui-jolisearch .jolisearch-product .product-manufacturer {
  display: none !important;
}


/* ============================================================
   PAGE RÉSULTATS DE RECHERCHE — cartes 4 par ligne (comme la home)
   ============================================================ */
@media (min-width: 992px) {
  /* La grille : marge négative pour compenser le padding des cartes */
  #module-ambjolisearch-jolisearch .products.row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
  }
  /* Chaque carte : 25% de large (4 par ligne) */
  #module-ambjolisearch-jolisearch .products.row .product-miniature {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}


/* Couleur du bouton "Oui j'ai plus de 18 ans" (popup vérification d'âge) */
.ets_av_primary,
.ets_av_content_popup .ets_av_primary,
.ets_av_content_popup .btn-primary.ets_av_primary {
  background-color: #009d96 !important;   /* bleu charte — change la couleur ici */
  border-color: #009d96 !important;
  color: #ffffff !important;              /* texte blanc */
}
/* Survol */
.ets_av_primary:hover,
.ets_av_content_popup .ets_av_primary:hover {
  background-color: #009d96 !important;   /* bleu plus foncé au survol */
  border-color: #009d96 !important;
}



/* Mobile : réduire les espaces autour du champ de recherche */
@media (max-width: 991px) {
  /* Le wrapper du header : padding vertical réduit + fond blanc */
  .header-top-wrapper {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    background: #ffffff !important;
  }
  /* La zone du champ : supprime la grosse marge de 25px au-dessus */
  .header-right {
    margin-top: 0 !important;
  }
  /* Petit conteneur du champ : padding réduit */
  .search-widget.dropdown-menu {
    padding: 0 !important;
    margin-top: 0 !important;
  }
  /* Étendre le fond blanc sur toute la largeur (supprime le gris latéral) */
  .header-top,
  #header .header-top {
    background: #ffffff !important;
  }
}



/* Masquer la loupe en double à droite (près du panier), garder la recherche centrale */
.header-right > .search-wrapper,
.header-right > .search-widget,
.header-right > div > .search-button.dropdown-toggle {
  display: none !important;
}


/* Réduire la barre du haut à zéro visuellement, MAIS garder ses éléments
   dans le DOM (le JS de la modale service client en a besoin) */
@media (min-width: 992px) {
  /* La barre : hauteur zéro, contenu qui déborde masqué */
  .header-nav.tablet-h {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
  }
  /* Le bouton service client reste présent mais invisible et sans taille
     (le JS le trouve toujours, il ne s'affiche juste plus) */
  .header-nav.tablet-h .clientservice_open-modal-btn {
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

/* Mobile : la recherche ne déborde plus sur le slider */
@media (max-width: 991px) {
  .header-top .header-search-center,
  .header-search-center {
    position: static !important;   /* annule le position:relative + top:10px du desktop */
    top: auto !important;
    margin: 8px 0 0 !important;     /* espace normal, dans le flux */
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   BLOG MOBILE — 2 articles par ligne, image + titre seulement
   ============================================================ */
@media (max-width: 767px) {
  /* Désactive le mode slider : les articles en grille qui s'enroule */
  .ybc_blog_content_block.blog_type_slider,
  .ybc_blog_content_block {
    display: flex !important;
    flex-wrap: wrap !important;
  }
	/* Ne garder que la 1re grille blog : masquer la 2e et les articles populaires */
  .ybc_blog_content_block.blog_type_slider:nth-of-type(n+2) {
    display: none !important;
  }
  .ybc-blog-popular-content,
  .ybc-blog-popular,
  [class*="ybc-blog-popular"] {
    display: none !important;
  }
  /* Chaque article : 2 par ligne */
  .ybc_blog_content_block_item {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    box-sizing: border-box !important;
    padding: 6px !important;
    margin: 0 !important;
  }
 /* N'afficher que les 4 premiers articles (2 lignes) */
  .ybc_blog_content_block.blog_type_slider > .ybc_blog_content_block_item:nth-child(n+5),
  .ybc_blog_content_block > .ybc_blog_content_block_item:nth-child(n+5) {
    display: none !important;
  }
  /* Masquer tout sauf l'image et le titre */
  .ybc_blog_content_block_item .be-label,
  .ybc_blog_content_block_item .post-date,
  .ybc_blog_content_block_item .ybc-blog-categories,
  .ybc_blog_content_block_item .ybc-blog-sidear-post-meta,
  .ybc_blog_content_block_item p,
  .ybc_blog_content_block_item .ybc-blog-latest-toolbar {
    display: none !important;
  }
 /* Le titre : 1 seule ligne, tronqué (sélecteur renforcé) */
  .ybc_blog_content_block .ybc_blog_content_block_item a.ybc_title_block,
  .ybc_blog_content_block_item a.ybc_title_block {
    font-size: 13px !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-top: 6px !important;
    max-height: 1.4em !important;
    white-space: normal !important;
  }
  /* L'image : pleine largeur de sa colonne */
  .ybc_blog_content_block_item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}


/* Icône enveloppe (contact) dans le header */
.header-right .ml-contact-icon {
  display: flex;
  align-items: center;
  margin-right: 18px;      /* espace avec l'icône suivante — ajuste si besoin */
}
.header-right .ml-contact-icon a {
  color: #000;             /* couleur du trait de l'enveloppe */
  display: flex;
  align-items: center;
  text-decoration: none;
}
.header-right .ml-contact-icon a:hover {
  color: #24417b;          /* bleu charte au survol */
}

/* Icône enveloppe mobile (contact) — alignement avec les autres icônes */
@media (max-width: 991px) {
  /* Le conteneur : même hauteur que les autres icônes du header mobile,
     contenu centré verticalement */
 .mobile-header .ml-mobile-contact {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 40px;            /* hauteur de référence des icônes */
    padding: 0 8px;
    margin: 0 !important;
    position: relative;      /* permet le décalage fin ci-dessous */
    top: 14px;               /* ← DESCEND l'enveloppe : augmente pour descendre plus */
  }
  /* Le lien : occupe toute la zone, sans décalage de ligne de base */
  .mobile-header .ml-mobile-contact a {
    color: #000;
    display: flex;
    align-items: center;
    line-height: 0;          /* supprime l'espace fantôme sous le SVG */
    text-decoration: none;
  }
  /* Le SVG : taille alignée sur les icônes voisines (compte/panier) */
  .mobile-header .ml-mobile-contact svg {
    width: 28px;             /* largeur de l'enveloppe — ajuste ici */
    height: 28px;            /* hauteur de l'enveloppe — même valeur */
    display: block;
  }
}


/* ============================================================
   HEADER MOBILE — alignement de toutes les icônes sur une ligne
   ============================================================ */
@media (max-width: 991px) {
  /* La ligne d'icônes : flex, tout centré verticalement */
  .mobile-header {
    display: flex !important;
    align-items: center !important;   /* aligne toutes les icônes sur le même axe */
    justify-content: flex-end;        /* icônes groupées à droite */
    flex-wrap: nowrap;
  }
  /* On annule les flottements du thème (float-xs-right) qui cassent l'alignement */
  .mobile-header > div {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
  }
  /* Le logo : reste à gauche et pousse les icônes vers la droite */
  .mobile-header .top-logo {
    order: -1;                        /* le logo passe en premier */
    margin-right: auto !important;    /* pousse le reste à droite */
  }
  /* Ordre des icônes de gauche à droite : compte, enveloppe, panier, burger */
  .mobile-header #_mobile_user_info { order: 1; }
  .mobile-header .ml-mobile-contact  { order: 2; }
  .mobile-header #_mobile_cart       { order: 3; }
  .mobile-header #menu-icon          { order: 4; }

  /* Espacement régulier entre chaque icône */
 .mobile-header #_mobile_user_info,
  .mobile-header .ml-mobile-contact,
  .mobile-header #_mobile_cart,
  .mobile-header #menu-icon {
    padding: 0 8px !important;        /* écart standard entre les icônes */
  }
  /* Espace supplémentaire entre l'icône connexion et l'enveloppe */
  .mobile-header .ml-mobile-contact {
    margin-left: 10px !important;     /* augmente pour écarter davantage */
  }

  /* L'enveloppe n'a plus besoin du décalage manuel : le flex l'aligne seul */
  .mobile-header .ml-mobile-contact {
    position: static !important;
    top: auto !important;
    height: auto !important;
  }
}
/* Neutralise la largeur imposée par le thème à l'intérieur du cadre */
.cadre-etiquette .titre-etiquette,
.cadre-etiquette .texte-etiquette {
    width: auto;
    display: block;
}
/* Cadre réglementaire e-liquide : largeur ajustée au contenu */
.cadre-etiquette {
    display: table;
    border: 1px solid #d2d2d2;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
}

/* Taille du bouton */
.product-add-to-cart .add-to-cart,
.product-actions .add-to-cart,
button.add-to-cart {
    width: 280px !important;
    max-width: 100%;
    flex: 0 0 auto !important;
    height: 50px !important;
    padding: 0 20px !important;
    line-height: 50px !important;
}

/* Taille du texte */
button.add-to-cart,
.product-add-to-cart .add-to-cart {
    font-size: 18px !important;
}


#product .featured-products h2, .product-accessories-title .h2 {
    position: relative;
    display: inline-block;
    padding: 0 60px;
    margin-bottom: 35px;
    background-color: #f5f5f5; /* couleur de fond du site */
    text-transform: uppercase;
}

/* ============================================================
   FICHE PRODUIT — image affichée à sa taille native (netteté)
   Les visuels sources font 800 px. Le thème les étirait au-delà,
   ce qui les rendait flous. On plafonne donc l'affichage à 800 px.
   ============================================================ */
@media (min-width: 992px) {
  /* Le conteneur de l'image : ne dépasse pas la taille du fichier source */
  #product .productblock-image .an_productpage-slider-image,
  #product .productblock-image .productslider-main-image,
  #product .productblock-image img {
    max-width: 800px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
      border: 1px solid #e6e6e6;
  }

  /* La colonne image : centre le visuel sans l'étirer */
  #product .productblock-image .page-content {
    max-width: 800px;
    margin: 0 auto;
  }
}

/* ===== Menu catégories colonne de gauche (preprod) ===== */
/* Réduit la hauteur des lignes du bloc arborescence catégories */
#category-tree-links .category-top-menu li,
.block-categories .category-top-menu li {
    line-height: 1.2;               /* interligne compact */
}

/* Réduit le padding vertical de chaque lien */
#category-tree-links .category-top-menu li a,
.block-categories .category-top-menu li a {
    padding-top: 2px;               /* espacement minimal */
    padding-bottom: 2px;
    display: block;
    line-height: 1.1;               /* interligne resserré */
}

/* ===== Compactage supplémentaire menu catégories ===== */
/* Supprime toute marge résiduelle sur les li */
#category-tree-links li,
.block-categories li {
    margin: 0;
    padding: 0;
}

/* Espace minimal autour des catégories principales */
#category-tree-links .category-top-menu > li,
.block-categories .category-top-menu > li {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Compacte les sous-catégories dépliées */
#category-tree-links .category-sub-menu li a,
.block-categories .category-sub-menu li a {
    padding-top: 1px;
    padding-bottom: 1px;
}

/* Supprime les marges superflues sur les éléments de liste */
#category-tree-links .category-top-menu li,
.block-categories .category-top-menu li {
    margin-bottom: 0;
}

/* Réduit l'espace global du bloc */
#category-tree-links,
.block-categories {
    margin-bottom: 15px;
}

/* ===== Masquer tout le haut de la colonne gauche sauf les filtres ===== */
#left-column .block-categories,
#left-column #categories_block_left {
    display: none !important;
}


/* ===== Version large : tous les libellés de filtres ===== */
#search_filters label,
#search_filters li a,
#left-column #search_filters * {
    text-transform: uppercase !important;
    font-size: 15px !important;
}

/* ============================================================
   BLOG HOME — Design type lvpt.fr
   3 colonnes / image arrondie / titre majuscules / date / extrait / lien
   S'applique uniquement à la page d'accueil (.page-home)
   Structure YBC : .ybc_blog_content_block_item = carte
   ============================================================ */

/* Grille : 3 colonnes, espacement généreux */
.page-home .block_content .ybc_blog_content_block {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;            /* compense le padding des cartes */
}

/* Chaque carte : 1/3 de la largeur */
.page-home .block_content .ybc_blog_content_block_item {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    box-sizing: border-box;
    padding: 0 15px;
    margin-bottom: 55px;       /* espace vertical entre les lignes */
}

/* Image : grande, ratio paysage, coins arrondis, jamais déformée */
.page-home .block_content .ybc_item_img {
    display: block;
    margin-bottom: 18px;
}
.page-home .block_content .ybc_item_img img {
    width: 100%;
    height: 200px;             /* hauteur réduite des vignettes */
    object-fit: cover;         /* recadre sans déformer l'image */
    border-radius: 10px;       /* coins arrondis comme lvpt */
    display: block;
}

/* Titre : majuscules, gras, foncé, 2 lignes max */
.page-home .block_content .ybc_title_block {
    display: block;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: #2b2b2b;
    line-height: 1.3;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
    text-decoration: none;
}
.page-home .block_content .ybc_title_block:hover {
    color: #000;
}

/* Masque les catégories "Publié dans" (comme lvpt) */
.page-home .block_content .ybc-blog-categories {
    display: none;
}

/* Date : grise, discrète, sous le titre */
.page-home .block_content .post-date {
    display: block;
    font-size: 15px;
    color: #9a9a9a;
    margin-bottom: 16px;
}

/* Masque la barre d'outils (vues / commentaires / like) pour coller à lvpt */
.page-home .block_content .ybc-blog-latest-toolbar {
    display: none;
}

/* Extrait : gris moyen, lisible, 3 lignes max */
.page-home .block_content .blog_description {
    display: block;
    margin-bottom: 16px;
}
.page-home .block_content .blog_description p,
.page-home .block_content .blog_description {
    font-size: 16px;
    line-height: 1.55;
    color: #6b6b6b;
}

/* Lien "En savoir plus" : gris, souligné, en bas */
.page-home .block_content .read_more {
    display: inline-block;
    font-size: 16px;
    color: #6b6b6b;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.page-home .block_content .read_more:hover {
    color: #2b2b2b;
}

/* ---- Responsive ---- */
/* Tablette : 2 colonnes */
@media (max-width: 991px) {
    .page-home .block_content .ybc_blog_content_block_item {
        flex: 0 0 50%;
        max-width: 50%;
    }
}
/* Mobile : 1 colonne + image plus basse + suppression du débordement */
@media (max-width: 575px) {
    /* Annule la marge négative de la grille qui fait déborder à gauche/droite */
    .page-home .block_content .ybc_blog_content_block {
        margin: 0;
    }
    .page-home .block_content .ybc_blog_content_block_item {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;              /* supprime le padding latéral qui décale l'image */
        box-sizing: border-box;
    }
    /* Réduit la hauteur des vignettes sur mobile (sinon trop hautes en pleine largeur) */
    .page-home .block_content .ybc_item_img img {
        height: 180px;
    }

    /* Articles populaires : n'afficher que 2 sur mobile (masque le 3e et au-delà) */
    /* .ybc_block_popular = bloc "Articles populaires" (distinct de .ybc_block_latest) */
    .page-home .ybc_block_popular .ybc_blog_content_block_item:nth-child(n+3) {
        display: none;
    }
}


/* Bouton "Voir tous les articles" sous les derniers articles (home) */
.ml-blog-view-all {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 40px;
}
.ml-blog-view-all a {
    display: inline-block;
    padding: 12px 30px;
    border: 2px solid #2b2b2b;
    border-radius: 6px;
    color: #2b2b2b;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: all 0.2s ease;
}
.ml-blog-view-all a:hover {
    background: #2b2b2b;
    color: #fff;
}


/* ============================================================
   PAGE LISTING /blog — Design type lvpt.fr (grille 3 colonnes)
   Structure YBC : ul.ybc-blog-list > li > .post-wrapper
   ============================================================ */

/* La grille : flex 3 colonnes, on enlève les puces de liste */
#ybc_blog_page .ybc-blog-list.blog-main-page {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
    padding: 0;
    list-style: none;               /* supprime les puces • */
}

/* Chaque article = 1/3 de large */
#ybc_blog_page .ybc-blog-list.blog-main-page > li {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    box-sizing: border-box;
    padding: 0 15px;
    margin-bottom: 55px;
    list-style: none;
}
/* Sécurité : masque le marqueur de puce s'il persiste */
#ybc_blog_page .ybc-blog-list.blog-main-page > li::marker {
    content: "";
}

/* Image : grande, ratio paysage, coins arrondis */
#ybc_blog_page .post-wrapper .ybc_item_img {
    display: block;
    margin-bottom: 18px;
}
#ybc_blog_page .post-wrapper .ybc_item_img img {
    width: 100%;
    height: 200px;
    object-fit: cover;              /* recadre sans déformer */
    border-radius: 10px;
    display: block;
}

/* Titre : majuscules, gras, foncé */
#ybc_blog_page .ybc-blog-wrapper-content .ybc_title_block,
#ybc_blog_page .ybc-blog-wrapper-content a[class*="title"] {
    display: block;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: #2b2b2b;
    line-height: 1.3;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
    text-decoration: none;
}

/* Masque les catégories "Publié dans" (comme lvpt) */
#ybc_blog_page .ybc-blog-categories {
    display: none;
}

/* Date : grise, discrète */
#ybc_blog_page .post-date {
    display: block;
    font-size: 15px;
    color: #9a9a9a;
    margin-bottom: 16px;
}

/* Masque la barre vues/commentaires/like pour coller à lvpt */
#ybc_blog_page .ybc-blog-latest-toolbar {
    display: none;
}

/* Extrait : gris moyen, limité à 5 lignes max */
#ybc_blog_page .blog_description,
#ybc_blog_page .blog_description p {
    font-size: 16px;
    line-height: 1.55;
    color: #6b6b6b;
    margin-bottom: 16px;
}
#ybc_blog_page .blog_description {
    display: -webkit-box;           /* active le troncage multi-lignes */
    -webkit-line-clamp: 5;          /* coupe à 5 lignes */
    -webkit-box-orient: vertical;
    overflow: hidden;               /* masque le texte au-delà */
}

/* Lien "En savoir plus" / "Lire la suite" : gris souligné */
#ybc_blog_page .read_more {
    display: inline-block;
    font-size: 16px;
    color: #6b6b6b;
    text-decoration: underline;
    text-underline-offset: 3px;
}
#ybc_blog_page .read_more:hover {
    color: #2b2b2b;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    #ybc_blog_page .ybc-blog-list.blog-main-page > li {
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media (max-width: 575px) {
    /* Empêche tout débordement horizontal sur la page blog mobile */
    #ybc_blog_page #wrapper,
    #ybc_blog_page .container,
    #ybc_blog_page #content-wrapper {
        overflow-x: hidden;
        max-width: 100%;
    }
    /* La barre "Trier par" (.post-selection) déborde : on la contient */
    #ybc_blog_page .row.post-selection,
    #ybc_blog_page .post-selection .col-md-8,
    #ybc_blog_page .post-selection [class*="col-"],
    #ybc_blog_page .products-sort-order {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        box-sizing: border-box !important;
        float: none !important;
    }
    #ybc_blog_page .row.post-selection {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Annule la marge négative de la grille (sinon débordement gauche/droite) */
    #ybc_blog_page .ybc-blog-list.blog-main-page {
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }
    /* Les <li> : padding interne au lieu de padding externe négatif */
    #ybc_blog_page .ybc-blog-list.blog-main-page > li {
        margin: 0 0 40px 0 !important;
        padding: 0 15px !important;   /* marge intérieure = respire sans déborder */
    }
    /* 1 article par ligne, sans padding latéral */
    #ybc_blog_page .ybc-blog-list.blog-main-page > li {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
        box-sizing: border-box;
    }
   /* Image entière sur mobile (pas de rognage) : on laisse la hauteur s'adapter */
    #ybc_blog_page .post-wrapper .ybc_item_img img {
        height: auto !important;       /* annule la hauteur fixe qui rognait */
        object-fit: contain !important;/* montre toute l'image, sans couper */
        width: 100%;
    }
    /* Empêche tout enfant de dépasser la largeur de l'écran */
    #ybc_blog_page .post-wrapper,
    #ybc_blog_page .ybc-blog-wrapper-content,
    #ybc_blog_page .ybc-blog-wrapper-content * {
        max-width: 100%;
        box-sizing: border-box;
        word-wrap: break-word;      /* coupe les mots trop longs */
    }
    /* Réduit un peu les tailles de texte sur mobile */
    #ybc_blog_page .ybc-blog-wrapper-content .ybc_title_block {
        font-size: 16px;
    }
    #ybc_blog_page .blog_description,
    #ybc_blog_page .blog_description p {
        font-size: 15px;
    }
}
/* ============================================================
   PAGE /blog — Pagination style lvpt (centrée, boutons carrés)
   Structure : .blog-paggination > .links > a / b(actif) + .results
   ============================================================ */

/* Conteneur général : tout centré, en colonne (boutons puis texte) */
#ybc_blog_page .blog-paggination {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0 50px;
    padding: 0;
}

/* La rangée de boutons */
#ybc_blog_page .blog-paggination .links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;                        /* espace entre chaque bouton */
}

/* Chaque bouton : les <a> ET le <b> actif ont le même format */
#ybc_blog_page .blog-paggination .links > a,
#ybc_blog_page .blog-paggination .links > b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #2b2b2b;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-sizing: border-box;
}

/* Les <span> à l'intérieur des flèches : pas de cadre propre */
#ybc_blog_page .blog-paggination .links > a span {
    border: none;
    padding: 0;
    background: none;
    display: inline;
}

/* Survol des liens cliquables */
#ybc_blog_page .blog-paggination .links > a:hover {
    background: #2b2b2b;
    color: #fff;
    border-color: #2b2b2b;
}

/* Page active (le <b>) : fond foncé */
#ybc_blog_page .blog-paggination .links > b {
    background: #2b2b2b;
    color: #fff;
    border-color: #2b2b2b;
    font-weight: 700;
}

/* Texte "Showing 13 to 24..." : discret, sous les boutons */
#ybc_blog_page .blog-paggination .results {
    margin-top: 14px;
    color: #9a9a9a;
    font-size: 14px;
    text-align: center;
}

/* Masque le bloc "Appelez-nous" (2e bloc) + son séparateur dans le panneau contact */
/* Structure ps_contactinfo : .contact-rich > .block (adresse) > hr > .block (tél) > hr > .block (email) */
#left-column .contact-rich .block:nth-of-type(2) {
    display: none;
}
/* Masque aussi le 1er <hr> (celui juste avant le bloc téléphone) pour ne pas laisser 2 traits collés */
#left-column .contact-rich hr:nth-of-type(1) {
    display: none;
}

/* Masque le bloc e-mail dans le panneau contact */
#left-column .contact-rich .block:nth-of-type(3) {
    display: none;
}
/* Masque le séparateur juste avant le bloc e-mail */
#left-column .contact-rich hr:nth-of-type(2) {
    display: none;
}

/* Masque le téléphone dans le footer "NOTRE BOUTIQUE" (5e li = numéro) */
/* Le bloc existe en 2 versions (mobile .hidden-md-up + desktop .hidden-sm-down) */
/* On cible les deux listes #footer_contact_info */
.block-contact #footer_contact_info li:nth-child(5) {
    display: none;
}


/* Souligne le lien "Envoyez-nous un e-mail" dans le footer */
.block-contact #footer_contact_info a.dropdown .contacts-email-text {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Masque les liens "Avoirs" et "Bons de réduction" dans le bloc "VOTRE COMPTE" du footer */
#footer_account_list li a[href*="/avoirs"],
#footer_account_list li a[href*="/reduction"] {
    display: none;
}

/* Force le bloc partenaires à s'afficher en pleine largeur sous les colonnes du footer */
.ml-partners-wrapper {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    order: 999;                 /* le pousse en dernier (tout en bas) */
    clear: both;
    border-top: 2px solid #ddd;    /* trait au-dessus */
    border-bottom: 2px solid #ddd; /* trait en dessous */
    padding-top: 25px;
    padding-bottom: 25px;
    margin-top: 20px;
}
/* Réduit la taille des logos partenaires du footer */
.ml-partner-item img {
    height: 38px !important;      /* hauteur identique pour tous */
    width: auto !important;        /* largeur proportionnelle */
    max-width: none !important;
    object-fit: contain;
    display: block;
}

/* Aligne le fond du titre "QUI SOMMES NOUS ?" sur celui de la page */
.an_abous_us .an_abous_us-title {
    background-color: #f7f7f7 !important;
}

/* ============================================================
   PAGE CONNEXION — Mise en page type lvpt, couleurs marketliquide
   ============================================================ */

/* Affiche les labels à gauche des champs (au cas où le thème les masque) */
.login-form .form-control-label {
    display: block !important;
    visibility: visible !important;
    text-align: right;
    font-weight: 700;
    color: #2b2b2b;
    padding-right: 15px;
    padding-top: 10px;
}

/* Retire les placeholders redondants puisque les labels sont visibles */
.login-form input[name="email"]::placeholder,
.login-form input[name="password"]::placeholder {
    color: transparent;
}

/* Bouton "AFFICHER" gris à la place de l'icône œil */
.login-form .input-group-btn {
    display: flex;
}
/* Masque l'icône œil SVG */
.login-form .input-group-btn svg {
    display: none;
}
/* Transforme le bouton vide en bouton texte "AFFICHER" */
.login-form .input-group-btn .btn[data-action="show-password"] {
    background: #7d7d7d;
    color: #fff;
    border: none;
    border-radius: 0;
    padding: 0 20px;
    height: 100%;
    min-height: 48px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
}
.login-form .input-group-btn .btn[data-action="show-password"]::after {
    content: "AFFICHER";
}
.login-form .input-group-btn .btn[data-action="show-password"]:hover {
    background: #5f5f5f;
}

/* Lien "Mot de passe oublié ?" centré, en vert marketliquide */
.login-form .login-form-forgot {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    text-align: center;
}
.login-form .forgot-password a {
    color: #3ba99c;               /* vert marketliquide */
    font-size: 17px;
    text-decoration: none;
}
.login-form .forgot-password a:hover {
    text-decoration: underline;
}

/* Bouton CONNEXION centré (déjà en vert via le thème) */
.login-form .form-footer {
    text-align: center;
}
.login-form #submit-login {
    padding: 14px 40px;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Encadré "Créez votre compte / si c'est la première fois" ── */
/* On sort le lien "Pas de compte ?" de sa position et on l'encadre */
.login-form .no-account {
    margin-top: 35px;
    padding-top: 30px;
    border-top: 1px solid #ddd;    /* trait de séparation */
    text-align: center;
}
.login-form .no-account a {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 22px 45px;
    text-decoration: none;
    color: #2b2b2b;
    line-height: 1.3;
    /* On masque le texte d'origine pour le remplacer par les 2 lignes */
    font-size: 0;
}
/* Ligne 1 : "Créez votre compte" en grand */
.login-form .no-account a::before {
    content: "Créez votre compte";
    display: block;
    font-size: 30px;
    color: #2b2b2b;
    margin-bottom: 4px;
}
/* Ligne 2 : "si c'est la première fois" en vert plus petit */
.login-form .no-account a::after {
    content: "si c'est la première fois";
    display: block;
    font-size: 17px;
    color: #3ba99c;               /* vert marketliquide */
}
.login-form .no-account a:hover {
    border-color: #3ba99c;
}

/* ── Centrage global du formulaire de connexion ── */
.login-form #login-form {
    max-width: 620px;
    margin: 0 auto;
}
/* Chaque ligne de champ centrée */
.login-form .form-group.row {
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-form .form-group.row .form-control-label {
    flex: 0 0 auto;
    width: 140px;
    max-width: 140px;
}
.login-form .form-group.row > div[class*="col-"] {
    flex: 0 0 auto;
    width: 340px;
    max-width: 340px;
}

/* Bloc "Mot de passe oublié ?" + encadré : pleine largeur centrée */
.login-form .login-form-forgot {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center;
}

/* Encadré "Créez votre compte" : plus petit et centré */
.login-form .no-account a {
    padding: 16px 30px;           /* réduit (était 22px 45px) */
}
.login-form .no-account a::before {
    font-size: 22px;              /* titre réduit (était 30px) */
}
.login-form .no-account a::after {
    font-size: 14px;              /* sous-titre réduit (était 17px) */
}

/* ── Correction du centrage : empile "Mot de passe oublié" puis l'encadré ── */
.login-form .login-form-forgot {
    display: block !important;         /* annule le flex space-between */
    justify-content: normal !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}
.login-form .forgot-password {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 0;
}
.login-form .no-account {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;     /* annule le text-align: right */
    float: none !important;
}

/* ── Ajustement fin du centrage ── */
/* Décale légèrement le lien, l'encadré et le bouton pour s'aligner
   sur le centre visuel du bloc label+champ */
.login-form .forgot-password,
.login-form .no-account,
.login-form .form-footer {
    padding-left: 140px;    /* compense la largeur des labels */
    box-sizing: border-box;
}

/* Centre le titre "Connectez-vous à votre compte" */
header.page-header,
header.page-header h1 {
    text-align: center !important;
    width: 100%;
}

/* Centre le lien "Mot de passe oublié ?" (annule le décalage des labels) */
.login-form .forgot-password {
    padding-left: 0 !important;
    text-align: center !important;
}


/* ── Panier : affiche directement le champ code promo ── */
/* Masque le lien "Vous avez un code promo ?" */
.block-promo .promo-code-button {
    display: none;
}
/* Force l'affichage du bloc de saisie (normalement replié) */
.block-promo .promo-code {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
}
/* Bouton intégré DANS le champ, à droite */
.block-promo .promo-code form {
    position: relative;           /* repère pour positionner le bouton */
    padding: 0 15px;              /* plus de padding-bas : le bouton se centre bien */
    margin-bottom: 10px;          /* l'espace est reporté en marge extérieure */
}
.block-promo .promo-code .promo-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 90px 12px 14px; /* espace à droite réservé au bouton */
    border: 1px solid #ddd;
    background: #fff;
    font-size: 15px;
}
/* Le bouton se superpose dans le champ, à droite */
/* Style : fond blanc, contour et texte gris foncé */
.block-promo .promo-code form .btn {
    position: absolute;
    top: 39%;
    right: 22px;                  /* aligné au bord intérieur du champ */
    transform: translateY(-50%);
    margin: 0;
    padding: 7px 16px;
    min-width: 0;
    width: auto;
    height: auto;
    font-size: 13px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-radius: 4px;
    background: #fff !important;          /* fond blanc */
    border: 1px solid #555 !important;    /* contour gris foncé */
    color: #555 !important;               /* texte gris foncé */
    box-shadow: none !important;
}
/* Le texte du bouton est dans un <span> : on force sa couleur aussi */
.block-promo .promo-code form .btn span {
    color: #555 !important;
}
/* Survol : inversion des couleurs */
.block-promo .promo-code form .btn:hover {
    background: #555 !important;
    color: #fff !important;
}
.block-promo .promo-code form .btn:hover span {
    color: #fff !important;
}
/* Masque le bloc d'erreur tant qu'il est vide */
.block-promo .promo-code .js-error:empty,
.block-promo .promo-code .js-error:not(.show) {
    display: none;
}


/* ── PAGE CONNEXION : adaptation mobile ── */
@media (max-width: 767px) {
    /* Labels au-dessus des champs : on annule le flex du desktop */
    .login-form .form-group.row {
        display: block !important;
        justify-content: normal !important;
    }
   /* Labels visibles au-dessus des champs — sélecteur renforcé avec l'ID
       pour battre la règle du thème .customerform-wrapper #login-form ... {display:none} */
    .login-form #login-form .form-group.row .form-control-label,
    .customerform-wrapper #login-form .form-group.row .form-control-label,
    .login-form .form-group.row .form-control-label {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        float: none !important;
        text-align: left !important;
        padding: 0 0 6px 0 !important;
        margin: 0 !important;
        font-weight: 700;
    }
    /* Colonnes des champs : sélecteur renforcé */
    .login-form #login-form .form-group.row > div[class*="col-"],
    .login-form .form-group.row > div[class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    
    
    
    /* Colonnes des champs : pleine largeur, sans débordement */
    .login-form .form-group.row > div[class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    /* Les champs eux-mêmes ne débordent pas */
    .login-form .form-control,
    .login-form .input-group {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Annule la marge négative Bootstrap qui décale la ligne */
    .login-form .form-group.row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Le formulaire prend toute la largeur */
    .login-form #login-form {
        max-width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }
    /* Annule le décalage de 140px prévu pour le desktop */
    .login-form .forgot-password,
    .login-form .no-account,
    .login-form .form-footer {
        padding-left: 0 !important;
    }
    /* Encadré "Créez votre compte" adapté à l'écran */
    .login-form .no-account a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 16px 15px;
    }
    .login-form .no-account a::before {
        font-size: 20px;
    }
    /* Bouton CONNEXION pleine largeur */
    .login-form #submit-login {
        width: 100%;
    }
}

/* Logos partenaires : réduits de 30% sur mobile */
@media (max-width: 767px) {
    .ml-partner-item img {
        height: 27px !important;   /* 38px - 30% */
    }
    /* Espacement resserré entre les logos */
    .ml-partners-inner {
        gap: 18px;
    }
}

/* ── Fiche produit : "Guide des tailles" en bouton blanc contour gris ── */
/* Masque l'icône SVG (la règle) devant le texte */
.open-modal-btn > svg {
    display: none !important;
}
/* Le conteneur devient le bouton */
.open-modal-btn {
    display: inline-block !important;
    padding: 10px 22px !important;
    background: #fff !important;
    border: 1px solid #cccccc !important;   /* contour gris foncé */
    border-radius: 4px !important;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 10px 0 !important;
    line-height: 1.2 !important;
}
/* Le texte à l'intérieur */
.open-modal-btn .js-ansizeguide {
    display: inline !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    color: #555 !important;              /* texte gris foncé */
    font-size: 14px !important;
    text-decoration: none !important;
    margin: 0 !important;
    cursor: pointer;
}
/* Supprime toute pseudo-icône éventuelle */
.js-ansizeguide::before,
.js-ansizeguide::after {
    display: none !important;
    content: none !important;
}
/* Survol : inversion */
.open-modal-btn:hover {
    background: #555 !important;
}
.open-modal-btn:hover .js-ansizeguide {
    color: #fff !important;
}


/* ── Popup Guide des tailles : passe au-dessus du header sticky ── */
/* La popup elle-même */
.sg-modal,
.sg-modal-js {
    z-index: 10050 !important;
}
/* Le fond sombre derrière la popup */
.sg-cover,
.sg-cover-js {
    z-index: 10040 !important;
}
/* ── Checkout : marge intérieure des blocs d'étape ── */
#checkout .col-md-8.chechout-steps .checkout-step {
    padding: 30px 35px !important;
    box-sizing: border-box !important;
}
#checkout .col-md-8.chechout-steps .checkout-step .step-content {
    padding: 0 !important;   /* on ne double pas le padding */
}
#checkout .checkout-step .step-title {
    margin-top: 0;
}

/* ============================================================
   MÉGA-MENU — Correctif Safari : panneau fermé qui déborde
   Le thème met height:0 à l'état fermé mais Safari laisse le
   contenu visible. On force le masquage tant que le panneau
   n'est pas ouvert (survol).
   ============================================================ */

/* État fermé : le contenu ne déborde pas de la boîte à hauteur nulle */
.ml-menu-band #amegamenu .adropdown {
  overflow: hidden !important;   /* coupe tout ce qui dépasse quand height:0 */
}

/* État ouvert (au survol de l'entrée de menu) : on libère l'affichage */
.ml-menu-band #amegamenu .amenu-item:hover .adropdown,
.ml-menu-band #amegamenu .amenu-item.hover .adropdown {
  overflow: visible !important;  /* le panneau ouvert peut afficher son contenu */
}

/* Le panneau du méga-menu est en position absolue : tout ancêtre
   en overflow hidden le découpe et le rend invisible. */
#header,
.header-top,
.ml-menu-band,
.ml-menu-band .container,
.header-center,
.header-top-nav {
    overflow: visible;
}

/* Et on s'assure qu'il passe devant le slider */
.mlmm-bar { z-index: 1000; }
.mlmm-panel { z-index: 1001; }


@media (max-width: 991px) {
    /* .row applique des marges negatives prevues pour des colonnes
       Bootstrap ; notre menu n'en est pas une, on les neutralise. */
    #mobile_top_menu_wrapper {
        margin-left: 0;
        margin-right: 0;
    }

    #_mobile_top_menu {
        width: 100%;
        padding: 0;
    }

    .mlmm-mobile {
        width: 100%;
    }

    /* Tiroir plus large : la moitie d'ecran est trop juste pour des
       intitules en majuscules. */
    .amegamenu_mobile-modal {
        width: 88%;
        max-width: 400px;
    }
}



/* Le titre natif de la catégorie fait doublon avec celui du texte
   d'introduction. Les deux sont enfants de #category-description : on les
   distingue par la classe .h1, que seul le titre du thème porte. 
#category #category-description > h1.h1 {
    display: none;
}*/

/* =========================================================================
   Texte de présentation des pages catégorie
   -------------------------------------------------------------------------
   Le bloc est émis en haut du code source, juste après le titre, mais
   affiché sous la liste de produits grâce à l'ordre flex. Les moteurs
   voient donc le texte tôt dans la page, les visiteurs voient les produits
   en premier.
   ========================================================================= */

/* #main devient une colonne flex : c'est ce qui rend « order » utilisable.
   Les autres enfants gardent l'ordre 0 et ne bougent donc pas. */
#category #main {
    display: flex;
    flex-direction: column;
}

#category #main > .ml-cat-desc {
    order: 99;                       /* toujours en dernier */
    position: relative;
    margin: 30px 0 10px;
    padding: 26px 30px 22px;
    border-radius: 4px;
    background: #f6f6f6;
    color: #5a5a5a;
    font-size: 15px;
    line-height: 1.75;

    /* Nombre de lignes visibles quand le texte est replié, et hauteur de
       ligne des paragraphes générés. La hauteur repliée est calculée à
       partir des deux : elle tombe donc toujours sur une ligne entière,
       jamais au milieu d'un caractère. */
    --ml-lines: 3;
    --ml-lh: 1.7em;
}

/* La case à cocher pilote le repli : masquée, mais pas avec display:none,
   qui la rendrait inaccessible au clavier. */
.ml-cat-desc-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Hauteur repliée : trois lignes pleines. position:relative sert d'ancrage
   au dégradé ci-dessous, qui se cale ainsi sur le bas de CETTE zone et non
   sur celui de l'encadré. */
.ml-cat-desc-inner {
    position: relative;
    max-height: calc(var(--ml-lines) * var(--ml-lh));
    overflow: hidden;
    transition: max-height .3s ease;
}

.ml-cat-desc-toggle:checked ~ .ml-cat-desc-inner {
    max-height: 2000px;
}

/* Dégradé de fondu sur la dernière ligne visible : signale que le texte
   continue. Ancré en bas de la zone de texte, il ne peut plus déborder
   sur le bouton. */
.ml-cat-desc-inner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--ml-lh);
    background: linear-gradient(to bottom, rgba(246, 246, 246, 0), #f6f6f6);
    pointer-events: none;
}

.ml-cat-desc-toggle:checked ~ .ml-cat-desc-inner::after {
    display: none;
}

/* Les paragraphes générés portent déjà leurs marges en style inline :
   on neutralise seulement celle du dernier, pour ne pas creuser le bas. */
.ml-cat-desc-inner p:last-child {
    margin-bottom: 0 !important;
}

.ml-cat-desc-inner strong {
    color: #2c2c2c;
}

/* ---------- Bouton de dépliage ---------- */

.ml-cat-desc-more {
    display: table;                  /* rompt tout flux inline residuel */
    clear: both;
    margin: 18px 0 0;
    padding: 10px 22px;
    border: 0;
    border-radius: 3px;
    background: #009d96;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.2;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    /* Aucune bordure ni contour : le thème en ajoutait un au focus, qui se
       superposait au mien et dessinait un double cadre autour du bouton. */
    outline: 0;
    box-shadow: none;
    transition: background .15s ease;
}

.ml-cat-desc-more:hover {
    background: #007d78;
    color: #fff;
}

/* Le libellé change selon l'état de la case : une seule balise suffit. */
.ml-cat-desc-more::after {
    content: "LIRE LA SUITE \25BE";
}

.ml-cat-desc-toggle:checked ~ .ml-cat-desc-more::after {
    /* Le É est écrit directement : un échappement \00C9 suivi d'un D
       ferait lire \00C9D au navigateur, soit un caractère erroné. */
    content: "RÉDUIRE \25B4";
}

/* Repère au clavier uniquement. Un box-shadow plutôt qu'un outline : il
   se dessine à l'intérieur du bouton, sans créer de second cadre. */
.ml-cat-desc-toggle:focus-visible ~ .ml-cat-desc-more {
    box-shadow: 0 0 0 3px rgba(0, 157, 150, .35);
}

/* Le thème habille les <label> du site : on neutralise ce qui déborde
   sur ce bouton précis. */
#category #main > .ml-cat-desc label.ml-cat-desc-more {
    max-width: none;
    margin-bottom: 0;
    font-weight: 700;
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
    #category #main > .ml-cat-desc {
        margin: 22px 0 6px;
        padding: 18px 18px 16px;
        font-size: 14px;
        line-height: 1.7;
    }

    /* La hauteur suit automatiquement la police reduite */
    #category #main > .ml-cat-desc { --ml-lines: 3; }

    .ml-cat-desc-more {
        display: block;
        width: 100%;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ml-cat-desc-inner { transition: none; }
}



/* =========================================================================
   Page catégorie : quatre produits par ligne
   -------------------------------------------------------------------------
   La pleine largeur et le tiroir de filtres sont traités dans le bloc
   « TIROIR DE FILTRES » plus bas : #left-column y est réduit à zéro plutôt
   que masqué, car le panneau de filtres vit à l'intérieur.
   ========================================================================= */

/* Les vignettes portent col-lg-4, soit trois par ligne. On force le quart
   sur grand écran, en surchargeant la classe Bootstrap du thème. */
@media (min-width: 1200px) {
    #category #js-product-list .products > .product-miniature {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* Sous 1200px, on repasse à trois : à 25%, une vignette deviendrait trop
   étroite pour son sélecteur de nicotine. */
@media (min-width: 992px) and (max-width: 1199px) {
    #category #js-product-list .products > .product-miniature {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
}
/* =========================================================================
   TIROIR DE FILTRES — pages catégorie
   -------------------------------------------------------------------------
   Le thème contient déjà tout le HTML nécessaire : le bouton « Filtrer »
   (masqué sur desktop par la classe Bootstrap hidden-md-up), le panneau
   .search_filters_mobile-modal et son voile. Seul le mécanisme d'ouverture
   manquait au-dessus de 992px.

   On ne réutilise PAS le mécanisme d'Anvanto : il pilote l'affichage par
   du style en ligne posé en JavaScript, impossible à surcharger de façon
   fiable. On définit donc notre propre état, par la classe ml-filters-open
   sur le body.
   ========================================================================= */

@media (min-width: 992px) {

    /* ---------- Récupérer la largeur ----------
       #left-column n'est PAS masqué : le tiroir vit à l'intérieur, et un
       parent en display:none rendrait tout son contenu inaffichable.
       On lui retire seulement sa largeur, il ne prend donc plus de place. */
    #category #left-column {
        width: 0;
        min-width: 0;
        padding: 0;
        margin: 0;
        overflow: visible;
    }

    #category #content-wrapper {
        /* Le thème utilise la grille Bootstrap 3, en float et width :
           les propriétés flex seules n'auraient aucun effet ici. */
        float: none;
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    /* ---------- Le bouton Filtrer ----------
       hidden-md-up le masque au-dessus de 992px : c'est cette règle qu'on
       neutralise, d'où le !important. */
    #category .filter-button {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        margin-left: 18px;
        padding: 7px 16px;
        border-radius: 3px;
        background: #009d96;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        cursor: pointer;
        user-select: none;
        transition: background .15s ease;
    }

    #category .filter-button:hover {
        background: #007d78;
    }

    /* Compteur de filtres actifs, alimenté par le JavaScript */
    #category .filter-button .ml-filters-count {
        min-width: 18px;
        padding: 1px 6px;
        border-radius: 9px;
        background: rgba(255, 255, 255, .28);
        font-size: 11px;
        line-height: 1.4;
        text-align: center;
    }

    #category .filter-button .ml-filters-count:empty {
        display: none;
    }

    /* ---------- Le voile ---------- */
    #category .search_filters_mobile-cover {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10000;
        display: block;
        background: rgba(0, 0, 0, .45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .24s ease, visibility 0s linear .24s;
    }

        body#category.ml-filters-open .search_filters_mobile-cover {
        opacity: 1;
        visibility: visible;
        transition: opacity .24s ease, visibility 0s;
    }

    /* ---------- Le panneau ---------- */
    #category .search_filters_mobile-modal {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 10001;
        width: 340px;
        max-width: 88vw;
        padding: 20px 22px 30px;
        background: #fff;
        box-shadow: 4px 0 22px rgba(0, 0, 0, .18);
        /* translate est animé par le compositeur : plus fluide qu'une
           animation de « left ». */
        transform: translateX(-100%);
        transition: transform .28s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

          /* body#category : le body porte lui-même cet identifiant. L'écrire ici
       équilibre la spécificité avec la règle de fermeture, qui utilise
       #category — sans quoi elle l'emporterait toujours. */
    body#category.ml-filters-open .search_filters_mobile-modal {
        transform: translateX(0);
    }

    /* Empêche la page de défiler derrière le tiroir ouvert */
       body#category.ml-filters-open {
        overflow: hidden;
    }

    /* ---------- Croix de fermeture ----------
       Elle existe déjà dans le thème, mais reste invisible sur desktop. */
    #category .search_filters_mobile-btn-close {
        display: block;
        position: absolute;
        top: 12px;
        right: 14px;
        width: 30px;
        height: 30px;
        cursor: pointer;
        opacity: .55;
        transition: opacity .15s ease;
    }

    #category .search_filters_mobile-btn-close:hover {
        opacity: 1;
    }

    /* Croix dessinée en CSS : le thème n'en fournit pas sur desktop */
    #category .search_filters_mobile-btn-close::before,
    #category .search_filters_mobile-btn-close::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 17px;
        height: 2px;
        margin: -1px 0 0 -8.5px;
        background: #2c2c2c;
    }

    #category .search_filters_mobile-btn-close::before { transform: rotate(45deg); }
    #category .search_filters_mobile-btn-close::after  { transform: rotate(-45deg); }

    /* Titre du tiroir, ajouté par le JavaScript */
    #category .ml-filters-title {
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 1px solid #e3e6e8;
        color: #2c2c2c;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }
}

@media (prefers-reduced-motion: reduce) {
    #category .search_filters_mobile-modal,
    #category .search_filters_mobile-cover {
        transition: none;
    }
}


/* =========================================================================
   TIROIR DE FILTRES — mobile
   -------------------------------------------------------------------------
   Même mécanisme que sur desktop. Le tiroir d'Anvanto ne répond plus depuis
   la désactivation de son méga-menu : plutôt que de dépendre d'un code
   qu'on ne peut pas lire, on étend le nôtre aux petits écrans.
   ========================================================================= */

@media (max-width: 991px) {

    /* Le panneau vit dans #left-column : un parent masqué le rendrait
       inaffichable, on lui retire donc seulement sa largeur. */
    #left-column {
        width: 0;
        min-width: 0;
        padding: 0;
        margin: 0;
        overflow: visible;
    }

        .search_filters_mobile-cover {
        display: block !important;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10000;
        display: block;
        background: rgba(0, 0, 0, .45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .24s ease, visibility 0s linear .24s;
    }

    body#category.ml-filters-open .search_filters_mobile-cover {
        opacity: 1;
        visibility: visible;
        transition: opacity .24s ease, visibility 0s;
    }

        .search_filters_mobile-modal {
        /* Le thème masque ce panneau sous 992px pour le remplacer par son
           propre mécanisme, désormais inopérant. On rétablit l'affichage. */
        display: block !important;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 10001;
        /* Plus large qu'en desktop : sur un petit écran, 340px fixes
           laisseraient les libellés de facettes à l'étroit. */
        width: 86%;
        max-width: 340px;
        padding: 20px 18px 30px;
        background: #fff;
        box-shadow: 4px 0 22px rgba(0, 0, 0, .18);
        transform: translateX(-100%);
        transition: transform .28s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    body#category.ml-filters-open .search_filters_mobile-modal {
        transform: translateX(0);
    }

    body#category.ml-filters-open {
        overflow: hidden;
    }

    /* Croix de fermeture, dessinée en CSS comme sur desktop */
    .search_filters_mobile-btn-close {
        display: block;
        position: absolute;
        top: 12px;
        right: 14px;
        width: 30px;
        height: 30px;
        cursor: pointer;
        opacity: .55;
    }

    .search_filters_mobile-btn-close::before,
    .search_filters_mobile-btn-close::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 17px;
        height: 2px;
        margin: -1px 0 0 -8.5px;
        background: #2c2c2c;
    }

    .search_filters_mobile-btn-close::before { transform: rotate(45deg); }
    .search_filters_mobile-btn-close::after  { transform: rotate(-45deg); }
}


/* =========================================================================
   Barre de tri des pages catégorie
   ========================================================================= */

/* Le tri fait doublon avec les filtres. On masque uniquement le libellé et
   le sélecteur : le bouton FILTRER partage le même conteneur. */
#category .filters-toggler-block .sort-by,
#category .filters-toggler-block .products-sort-order {
    display: none !important;
}

/* Le conteneur ne doit plus s'étirer une fois le tri retiré : il occupait
   toute la hauteur de la barre, d'où le bouton géant. */
#category .filters-toggler-block {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    min-height: 0;
}

@media (min-width: 992px) {
    #category .filter-button {
        display: inline-flex !important;
        align-items: center;
                gap: 10px;
        flex: 0 0 auto;
        width: auto;
        height: auto;
        margin: 0;
                padding: 22px 26px;
        border: 1px solid #d4d4d4;
        border-radius: 0;
        background: #f7f7f7;
        color: #1a1a1a;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: .02em;
        line-height: 1.3;
        text-transform: uppercase;
                cursor: pointer;
        user-select: none;
        transition: background .15s ease, border-color .15s ease;
    }

    #category .filter-button:hover {
        background: #efefef;
        border-color: #b8b8b8;
    }

    /* Le thème habille l'intérieur du bouton : on neutralise son fond et
       ses marges, sans toucher à l'icône elle-même. */
    #category .filter-button > * {
        background: transparent !important;
        border: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: inherit !important;
        line-height: inherit !important;
    }

    /* L'icône en trois traits, dessinée par le thème en pseudo-élément */
        #category .filter-button::before,
    #category .filter-button > *::before {
        color: #1a1a1a !important;
    }
}

/* Catégorie sans facette : le bouton n'a rien à ouvrir. La classe est
   posée par le JavaScript, qui compte les facettes au chargement. */
/* body#category : le body porte lui-même cet identifiant. Sans lui, cette
   règle perdrait face à « #category .filter-button », qui compte un id. */
body#category.ml-no-filters .filter-button {
    display: none !important;
}

/* =========================================================================
   Avertissement légal sous la galerie produit
   -------------------------------------------------------------------------
   Ajouté en pseudo-élément plutôt que dans le template : rien à modifier
   dans le thème, et le retrait tient en une ligne. L'image est purement
   décorative, l'absence de texte alternatif est donc sans conséquence.
   ========================================================================= */

#product .images-container::after {
    content: "";
    display: block;
    width: 100%;
    max-width: 800px;
    height: 46px;
    margin: 18px auto 0;
    background-image: url('../img/sivous.jpg');
    background-repeat: no-repeat;
    background-position: center;
    /* contain plutôt que cover : l'image ne doit jamais être rognée,
       le texte deviendrait illisible. */
    background-size: contain;
}

@media (max-width: 767px) {
    #product .images-container::after {
        height: 38px;
        margin-top: 14px;
    }
}



/* Fiche technique de la fiche produit : uniformise la casse des valeurs.
   Purement visuel — les données ne sont pas modifiées en base. */
#product .product-features dd,
#product .product-features dt,
#product .data-sheet dd,
#product .data-sheet dt {
    text-transform: uppercase;
}


/* Cadre d'étiquette : masqué uniquement quand son contenu est vide.
   Sur un e-liquide, il porte les mentions nicotine et doit rester ;
   sur une base neutre, il n'a rien à afficher. */
.cadre-etiquette:has(.texte-etiquette:empty) {
    display: none;
}


/* =========================================================================
   INFOBULLES AU SURVOL DES VIGNETTES — pages catégorie
   -------------------------------------------------------------------------
   Le texte est saisi dans l'onglet INFOBULLES du manager. La bulle est
   posée par JavaScript sur le conteneur de l'image, jamais sur la vignette
   entière : survoler le prix ou le bouton panier ne doit rien déclencher.
   ========================================================================= */

/* Ancrage de la bulle. position:relative suffit — la vignette n'a pas
   d'overflow caché, contrairement à la barre d'onglets du manager. */
.ml-tip-host {
    position: relative;
    /* Écrête la bulle pendant qu'elle glisse : sans cela, on la verrait
       dépasser sous l'image avant d'arriver en place. */
    overflow: hidden;
}

.ml-tip {
    /* Ancrée en bas de l'image. Le décalage remonte la bulle au-dessus du
       nom, du prix et du bouton panier, que le conteneur inclut parfois. */
    position: absolute;
    bottom: 150px;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 10px 12px;
    background: #ffffff;
    color: #009d96;
    border: 1px solid #009d96;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    white-space: normal;
    pointer-events: none;          /* la bulle ne doit jamais gêner le clic */
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

.ml-tip-host:hover .ml-tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

/* ---------- Petits écrans ----------
   Le survol n'existe pas au doigt : afficher une bulle qui ne s'ouvre
   jamais ne ferait qu'alourdir la page. */
@media (max-width: 767px) {
    .ml-tip {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {f
    .ml-tip {
        transition: none;
    }
}



/* ===== Blog ybc_blog : page article ===== */
/* Le thème limite la hauteur de .blog_description (prévu pour les résumés en liste).
   Sur la page article, on affiche le texte complet.
   - .popup_image : classe présente sur le texte de la page article
   - .ybc_create_table_content : classe présente quand la table des matières est active */
.blog_description.popup_image,
.blog_description.ybc_create_table_content {
    height: auto !important;              /* hauteur libre selon le contenu */
    max-height: none !important;          /* aucune hauteur maximale */
    overflow: visible !important;         /* ne rien masquer */
    display: block !important;            /* affichage normal */
    -webkit-line-clamp: unset !important; /* annule la coupure à X lignes */
    -webkit-box-orient: unset !important;
    text-overflow: clip !important;       /* pas de "..." en fin de texte */
}

/* ===== Blog ybc_blog : colonne de gauche ===== */
/* Supprime les puces (• et ○) de toutes les listes de la colonne du blog :
   catégories, articles archivés, tags, etc.
   .ybc-navigation-blog-content = conteneur de tous les blocs de la colonne */
.ybc-navigation-blog-content ul,
.ybc-navigation-blog-content li {
    list-style: none !important;   /* pas de puce, y compris dans les sous-listes (mois) */
    margin-left: 0;                /* supprime le décalage laissé par la puce */
}

/* Garde un léger retrait pour les mois sous chaque année, pour rester lisible */
.ybc-navigation-blog-content ul ul {
    padding-left: 15px;
}

/* ===== Blog ybc_blog : page d'accueil ===== */
/* Retire le fond blanc des blocs du blog affichés sur l'accueil
   (.page_home = version accueil du bloc ; couvre aussi "Articles populaires"
   ou "En vedette" si tu les actives un jour) */
.ybc_blog_ltr_mode.page_home {
    background: transparent !important;  /* fond transparent : on voit le fond de la page */
    box-shadow: none !important;         /* pas d'ombre autour du bloc */
}