/* Animations globales */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fadeIn {
            animation: fadeIn 0.6s ease-out forwards;
        }
        
        @keyframes slideIn {
            from { transform: translateX(-50px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        .animate-slideIn {
            animation: slideIn 0.6s ease-out forwards;
        }

        @keyframes scaleUp {
            from { transform: scale(1); }
            to { transform: scale(1.02); }
        }
        .animate-scaleUp {
            animation: scaleUp 0.3s ease-in-out forwards;
        }

        /* Hero Slider */
        .hero-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.8s ease-in-out;
        }
        .hero-slide.active {
            opacity: 1;
            visibility: visible;
        }

        /* Style pour les sections */
        .section-container {
            position: relative;
            padding: 4rem 1rem;
        }
        .section-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(10px);
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        /* Scrollbar hide */
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
		/* Styles pour les overlays mobiles */
.mobile-overlay {
    @extend glass-card;
    @extend animate-slideIn;
    @extend fixed;
    @extend top-0;
    @extend z-50;
    @extend w-64;
    @extend h-full;
    @extend bg-white;
    @extend shadow-lg;
    @extend transform;
    @extend transition-transform;
    @extend duration-300;
}

/* Animation slide depuis la droite */
.animate-slideRight {
    animation: slideRight 0.3s ease-out forwards;
}

@keyframes slideRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
/* Focus state pour le champ de recherche */
.focus-ring {
    @extend ring-2;
    @extend ring-black;
    @extend ring-opacity-50;
}

/* Effet de pulsation */
.animate-pulse-slow {
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.tab-image img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    height: 100%;
}
* Effet pour les cards */
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
        }

        /* Effet pour les produits */
        .product-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .product-card:hover {
            transform: translateY(-5px);
        }

        /* Effet pour les catégories */
        .category-card {
            transition: transform 0.3s ease;
        }
        .category-card:hover {
            transform: scale(1.03);
        }

        /* Section Container */
        .section-container {
            position: relative;
            padding: 4rem 1rem;
            opacity: 0;
        }
        .section-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 240, 0.02);
            backdrop-filter: blur(10px);
        }

        /* Scrollbar hide */
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Styles pour les overlays mobiles */
        .mobile-overlay {
            position: fixed;
            top: 0;
            z-index: 50;
            width: 256px;
            height: 100%;
            background: white;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            transform: translateX(100%);
            transition: transform 0.3s ease;
        }
        .mobile-overlay.active {
            transform: translateX(0);
        }
		/* Animation pour le dropdown */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .animate-fadeIn {
        animation: fadeIn 0.3s ease-out forwards;
        opacity: 0;
    }

    /* Style pour les résultats de recherche */
    .search-result {
        @extend animate-slideIn;
        @extend flex;
        @extend items-center;
        @extend p-3;
        @extend hover:bg-gray-50;
        @extend transition;
    }
    .search-result:hover {
        background-color: #f9f9f9;
    }
	/* Style pour le block mobile search */
    #mobileSearch {
        @extend glass-card;
        @extend fixed;
        @extend top-0;
        @extend left-0;
        @extend right-0;
        @extend z-50;
        @extend h-full;
        @extend bg-white;
        @extend shadow-lg;
        @extend transform;
        @extend transition-transform;
        @extend duration-300;
    }
    
    /* Effet pour les résultats de recherche */
    .search-result:hover {
        @extend hover:bg-gray-50;
    }
	/* Badge de compteur */
    .counter-badge {
        @extend bg-black;
        @extend text-white;
        @extend text-xs;
        @extend px-2;
        @extend py-1;
        @extend rounded-full;
    }
    
    /* Badge de favoris */
    .favorite-badge {
        @extend bg-gray-100;
        @extend text-gray-700;
        @extend text-xs;
        @extend px-2;
        @extend py-1;
        @extend rounded-full;
    }
	.countCart{
	display: inline-block;
    font-size: 12px;
    color: #191919;
    line-height: 14px;
    background-color: #000;
    border-radius: 16px;
    text-align: center;
    font-weight: 700;
    min-height: 15px;
    width: 24px;
    margin-left: 4px;
	}
	.butMobileCart{
				position: relative;
				}
				.countMobileCart{
				position: absolute;
    top: 0px;
    right: 1px;
	display: inline-block;
    font-size: 12px;
    color: #191919;
    line-height: 14px;
    background-color: #000;
    border-radius: 16px;
    text-align: center;
    font-weight: 700;
    min-height: 15px;
    width: 24px;
    margin-left: 4px;
	}
	.scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  /* Animation pour les produits */
.product-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
  transform: translateY(-5px);
}
.glass-card {
  background: rgba(255, 255, 250, 0.02);
  backdrop-filter: blur(10px);
}
.product-item img:hover {
  transform: scale(1.05);
}

/* Badge de réduction */
.reduction-badge {
  background: linear-gradient(45deg, #10b981, #34d399);
  color: white;
  padding: 4px 8px;
  border-radius: 9999px;
  font-size: 10px;
  margin-top: 4px;
}
/* Masquer la scrollbar */
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* Effet de zoom au survol */
  .group:hover img {
    transform: scale(1.05);
  }

  /* Overlay de zoom */
  #zoomOverlay img { 
    transition: transform 0.3s ease;
  }
  #zoomedImage:hover {
    transform: scale(1.2);
  }
  .bg-red{
    background-color: rgb(206 37 37);
  }
  /* Masquer la scrollbar */
    .scrollbar-hide::-webkit-scrollbar {
      display: none;
    }
    .scrollbar-hide {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    /* Effet de zoom */
    .group:hover img#mainProductImage {
      transform: scale(1.05);
    }
    #zoomedImage:hover {
      transform: scale(1.2);
    }

    /* Fade-in animation */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fadeIn {
      animation: fadeIn 0.6s ease-out forwards;
    }

    /* Style pour les variantes */
    .variant-item img {
      transition: transform 0.3s ease, border 0.3s ease;
    }
    .variant-item img:hover {
      transform: scale(1.03);
    }
    .variant-item.active img {
      border-color: #000;
      transform: scale(1.05);
    }

    /* Style pour le zoom */
    .zoom-overlay {
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(4px);
    }
	.rotate-180 {
  @extend transform;
  @extend rotate-180;
}
.service-round{
border-radius: 50%;
    background-color: #cccccc30;
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
}
.comet-v2-divider.comet-v2-divider-small {
    background-color: rgba(0, 0, 0, .1);
    height: 1px;
}
.comet-v2-divider {
    -webkit-font-feature-settings: "tnum", "tnum";
    font-feature-settings: "tnum", "tnum";
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #222;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    margin: 0;
    padding: 0;
}
 *,
::before,
::after {
/* Animations globales */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fadeIn {
            animation: fadeIn 0.6s ease-out forwards;
        }
        
        @keyframes slideIn {
            from { transform: translateX(-50px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        .animate-slideIn {
            animation: slideIn 0.6s ease-out forwards;
        }

        @keyframes scaleUp {
            from { transform: scale(1); }
            to { transform: scale(1.02); }
        }
        .animate-scaleUp {
            animation: scaleUp 0.3s ease-in-out forwards;
        }

        /* Hero Slider */
        .hero-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.8s ease-in-out;
        }
        .hero-slide.active {
            opacity: 1;
            visibility: visible;
        }

        /* Style pour les sections */
        .section-container {
            position: relative;
            padding: 4rem 1rem;
        }
        .section-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(10px);
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        /* Scrollbar hide */
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
		/* Styles pour les overlays mobiles */
.mobile-overlay {
    @extend glass-card;
    @extend animate-slideIn;
    @extend fixed;
    @extend top-0;
    @extend z-50;
    @extend w-64;
    @extend h-full;
    @extend bg-white;
    @extend shadow-lg;
    @extend transform;
    @extend transition-transform;
    @extend duration-300;
}

/* Animation slide depuis la droite */
.animate-slideRight {
    animation: slideRight 0.3s ease-out forwards;
}

@keyframes slideRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
/* Focus state pour le champ de recherche */
.focus-ring {
    @extend ring-2;
    @extend ring-black;
    @extend ring-opacity-50;
}

/* Effet de pulsation */
.animate-pulse-slow {
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.tab-image img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    height: 100%;
}
* Effet pour les cards */
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
        }

        /* Effet pour les produits */
        .product-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .product-card:hover {
            transform: translateY(-5px);
        }

        /* Effet pour les catégories */
        .category-card {
            transition: transform 0.3s ease;
        }
        .category-card:hover {
            transform: scale(1.03);
        }

        /* Section Container */
        .section-container {
            position: relative;
            padding: 4rem 1rem;
            opacity: 0;
        }
        .section-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 240, 0.02);
            backdrop-filter: blur(10px);
        }

        /* Scrollbar hide */
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Styles pour les overlays mobiles */
        .mobile-overlay {
            position: fixed;
            top: 0;
            z-index: 50;
            width: 256px;
            height: 100%;
            background: white;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            transform: translateX(100%);
            transition: transform 0.3s ease;
        }
        .mobile-overlay.active {
            transform: translateX(0);
        }
		/* Animation pour le dropdown */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .animate-fadeIn {
        animation: fadeIn 0.3s ease-out forwards;
        opacity: 0;
    }

    /* Style pour les résultats de recherche */
    .search-result {
        @extend animate-slideIn;
        @extend flex;
        @extend items-center;
        @extend p-3;
        @extend hover:bg-gray-50;
        @extend transition;
    }
    .search-result:hover {
        background-color: #f9f9f9;
    }
	/* Style pour le block mobile search */
    #mobileSearch {
        @extend glass-card;
        @extend fixed;
        @extend top-0;
        @extend left-0;
        @extend right-0;
        @extend z-50;
        @extend h-full;
        @extend bg-white;
        @extend shadow-lg;
        @extend transform;
        @extend transition-transform;
        @extend duration-300;
    }
    
    /* Effet pour les résultats de recherche */
    .search-result:hover {
        @extend hover:bg-gray-50;
    }
	/* Badge de compteur */
    .counter-badge {
        @extend bg-black;
        @extend text-white;
        @extend text-xs;
        @extend px-2;
        @extend py-1;
        @extend rounded-full;
    }
    
    /* Badge de favoris */
    .favorite-badge {
        @extend bg-gray-100;
        @extend text-gray-700;
        @extend text-xs;
        @extend px-2;
        @extend py-1;
        @extend rounded-full;
    }
	.countCart{
	display: inline-block;
    font-size: 12px;
    color: #191919;
    line-height: 14px;
    background-color: #000;
    border-radius: 16px;
    text-align: center;
    font-weight: 700;
    min-height: 15px;
    width: 24px;
    margin-left: 4px;
	}
	.butMobileCart{
				position: relative;
				}
				.countMobileCart{
				position: absolute;
    top: 0px;
    right: 1px;
	display: inline-block;
    font-size: 12px;
    color: #191919;
    line-height: 14px;
    background-color: #000;
    border-radius: 16px;
    text-align: center;
    font-weight: 700;
    min-height: 15px;
    width: 24px;
    margin-left: 4px;
	}
	.scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  /* Animation pour les produits */
.product-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
  transform: translateY(-5px);
}
.glass-card {
  background: rgba(255, 255, 250, 0.02);
  backdrop-filter: blur(10px);
}
.product-item img:hover {
  transform: scale(1.05);
}

/* Badge de réduction */
.reduction-badge {
  background: linear-gradient(45deg, #10b981, #34d399);
  color: white;
  padding: 4px 8px;
  border-radius: 9999px;
  font-size: 10px;
  margin-top: 4px;
}
/* Masquer la scrollbar */
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* Effet de zoom au survol */
  .group:hover img {
    transform: scale(1.05);
  }

  /* Overlay de zoom */
  #zoomOverlay img { 
    transition: transform 0.3s ease;
  }
  #zoomedImage:hover {
    transform: scale(1.2);
  }
  .bg-red{
    background-color: rgb(206 37 37);
  }
  /* Masquer la scrollbar */
    .scrollbar-hide::-webkit-scrollbar {
      display: none;
    }
    .scrollbar-hide {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    /* Effet de zoom */
    .group:hover img#mainProductImage {
      transform: scale(1.05);
    }
    #zoomedImage:hover {
      transform: scale(1.2);
    }

    /* Fade-in animation */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fadeIn {
      animation: fadeIn 0.6s ease-out forwards;
    }

    /* Style pour les variantes */
    .variant-item img {
      transition: transform 0.3s ease, border 0.3s ease;
    }
    .variant-item img:hover {
      transform: scale(1.03);
    }
    .variant-item.active img {
      border-color: #000;
      transform: scale(1.05);
    }

    /* Style pour le zoom */
    .zoom-overlay {
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(4px);
    }
	.rotate-180 {
  @extend transform;
  @extend rotate-180;
}
.service-round{
border-radius: 50%;
    background-color: #cccccc30;
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
}
.comet-v2-divider.comet-v2-divider-small {
    background-color: rgba(0, 0, 0, .1);
    height: 1px;
}
.comet-v2-divider {
    -webkit-font-feature-settings: "tnum", "tnum";
    font-feature-settings: "tnum", "tnum";
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #222;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---- Logo BShoper ---- */
/* ==============================
   Section Ingrédients — moderne & responsive
   ============================== */

/* ==============================
   Section Ingrédients — moderne & responsive (thème rouge)
   ============================== */

/* ============== Base & anti-overflow ============== */
#ingredients,
.ingredients-hero { position: relative; }


/* ============== Héros ingrédients (halos NOIRS) ============== */
.ingredients-hero {
  padding: 3rem 0;
  background:#f9fafb;
}
@media (min-width: 768px){
  .ingredients-hero { padding: 5rem 0; }
}

/* ============== Conteneur interne ============== */
.ingredients-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* ============== Carte ============== */
.ingredients-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 1.75rem;
  text-align: center;
  box-shadow: 0 12px 30px rgba(17,24,39,.08), 0 2px 8px rgba(17,24,39,.04);
  overflow: hidden;
}
@media (min-width: 768px){
  .ingredients-card { padding: 2.5rem 3rem; }
}

/* Bulles floues NOIR/GRIS (remplace le rouge) */
.ingredients-card::before,
.ingredients-card::after {
  content: "";
  position: absolute;
  width: 220px; height: 220px;
  filter: blur(40px);
  opacity: .18;
  z-index: 0;
  pointer-events: none;
}
.ingredients-card::before {
  top: -60px; left: -60px;
  background: #111827; /* gris très foncé (tailwind gray-900) */
}
.ingredients-card::after {
  bottom: -70px; right: -70px;
  background: #000000; /* noir */
}

/* ============== Titre ============== */
.ingredients-title {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 0 0 .75rem 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #111827;
  font-size: clamp(1.25rem, 3.6vw, 1.875rem);
  line-height: 1.2;
}

/* Barre d’accent NOIRE (remplace le dégradé rouge) */
.ingredients-title::after {
  content: "";
  display: block;
  width: 72px; height: 3px;
  margin: .6rem auto 0;
  border-radius: 9999px;
  background: linear-gradient(90deg, #111827 0%, #000000 100%);
}

/* ============== Contenu ============== */
.ingredients-content {
  position: relative;
  z-index: 1;
  margin-top: .75rem;
  color: #374151;
  font-size: clamp(0.95rem, 2.3vw, 1.0625rem);
  line-height: 1.75;
}
.ingredients-content p + p { margin-top: .8rem; }

.ingredients-content ul,
.ingredients-content ol {
  text-align: left;
  display: inline-block;
  margin: .75rem auto 0;
  padding-left: 1.25rem;
}
.ingredients-content li { margin: .35rem 0; }

/* Liens en NOIR (remplace le rouge) */
.ingredients-content a {
  color: #111827; /* gris très foncé */
  text-decoration: none;
  border-bottom: 1px solid rgba(17,24,39,.35);
  transition: color .12s ease, border-color .12s ease;
}
.ingredients-content a:hover {
  color: #000000;
  border-bottom-color: rgba(0,0,0,.55);
}

/* ============== Petits écrans ============== */
@media (max-width: 360px){
  .ingredients-hero { padding: 2.25rem 0; }
  .ingredients-card { padding: 1.25rem; }
}
.rot-180 { transform: rotate(180deg); }

/* ====== Conteneur ====== */
/* =============================
   BSHOPER – Mega menu (fix)
   ============================= */

/* =============================
   BSHOPER – Mega menu (CSS complète corrigée)
   ============================= */

:root{
  --menu-radius: 12px;
  --menu-shadow: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.05);
  --menu-border: 1px solid #e5e7eb;
  --menu-w: clamp(760px, 58vw, 1100px);
  --cat-col-min: 14rem;
  --cat-col-max: 28rem;
  --gap: 16px;
  --panel-gap: 24px;
  --text: #111827;
  --bg: #fff;
  --bg-soft: #f9fafb;
  --header-offset: 112px;
}

/* Garde-fous anti débordement */
*, *::before, *::after { box-sizing: border-box; }


/* ----- conteneur ----- */
#categoriesAllMenu{
  position:absolute; left:0; top:auto; margin-top:.5rem;
  width:var(--menu-w); max-width:100vw;
  background:var(--bg); color:var(--text);
  box-shadow:var(--menu-shadow); border:var(--menu-border);
  border-top-left-radius:0; border-top-right-radius:0;
  border-bottom-left-radius:var(--menu-radius);
  border-bottom-right-radius:var(--menu-radius);
  z-index:1050; box-sizing:border-box;
  overflow-x:hidden;
}

/* visible uniquement si ouvert ET non hidden */
#categoriesAllMenu.is-open:not(.hidden){ display:flex !important; }

/* ----- layout desktop / mobile ----- */
.bshop-desktop{ display:none; }
.bshop-mobile{ display:flex; flex-direction:column; width:100%; overflow-y:auto; }

/* ======= DESKTOP (>=768px) ======= */
@media (min-width:768px){
  .bshop-desktop{
    display:flex; width:100%;
    align-items:stretch;
    max-height: calc(100vh - var(--header-offset));
  }
  .bshop-mobile{ display:none; }
}

/* ----- colonne catégories (desktop) ----- */
.bshop-catlist{
  flex:0 0 auto;
  min-width:var(--cat-col-min);
  width:max-content;
  max-width:var(--cat-col-max);
  border-right:var(--menu-border);
  border-bottom-left-radius:var(--menu-radius);
  margin:0; padding:0; list-style:none;
  overflow-y:auto;
  max-height:inherit;
}
.bshop-catlist > li{ border-bottom:1px solid #f3f4f6; }
.bshop-catlist .cat-entry{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; padding:.6rem 1rem; background:var(--bg); border:0; cursor:pointer;
  font-size:.95rem; line-height:1.3; color:var(--text); transition:background .15s ease, box-shadow .15s ease;
  white-space:nowrap; border-left:3px solid transparent;
}
.bshop-catlist .cat-entry-left{display:flex;align-items:center;gap:.75rem;min-width:0;}
.bshop-catlist .cat-entry-link{color:var(--text);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;white-space:nowrap;}
.bshop-catlist .cat-entry-link:hover{color:#0f172a;}
.bshop-catlist .cat-entry:hover,
.bshop-catlist .cat-entry:focus-within{background:var(--bg-soft);outline:none;}
.bshop-catlist-item.active .cat-entry{background:#eef2ff;border-left-color:#6366f1;}

/* ----- panneau droite (desktop) ----- */
.bshop-desktop > .flex-1.p-6{
  flex:1 1 auto; padding:1.25rem;
  overflow-y:auto;
  max-height:inherit;
}
.bshop-panel{ display:none; }
.bshop-panel.active{
  display:grid; gap:var(--panel-gap);
  grid-template-columns:repeat(auto-fill, minmax(100px, 3fr));
}

/* ----- cartes ----- */
.bshop-card{
  border:var(--menu-border); border-radius:10px; background:var(--bg);
  padding:14px; transition:box-shadow .18s, transform .18s;
  width:100%;
}
.bshop-card:hover{ box-shadow:0 6px 16px rgba(0,0,0,.08); transform:translateY(-1px); }
.bshop-avatar{ width:80px; height:80px; border-radius:9999px; overflow:hidden; border:1px solid #e5e7eb; margin:0 auto; }
.bshop-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.bshop-subtitle{
  margin-top:.6rem; font-weight:600; font-size:.95rem; text-align:center; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.bv-links{ margin-top:.6rem; font-size:.88rem; margin: 0 auto; width: fit-content; }
@media (max-width:767px){ .bv-links{ display:none; } }

/* ----- header mobile ----- */
.bshop-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 1rem; border-bottom:var(--menu-border); background:var(--bg);
  position:sticky; top:0; z-index:1;
}
.bshop-header h3{ margin:0; font-size:1.05rem; font-weight:700; }
.bshop-iconbtn{
  width:2.25rem; height:2.25rem; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #e5e7eb; border-radius:.6rem; background:#fff;
}

#catArrow{ transition:transform .2s; }
#catArrow.is-rot{ transform:rotate(180deg); }

/* ======= MOBILE : plein écran + 2 vues superposées ======= */
@media (max-width: 767px){

  #categoriesAllMenu.is-open{
    position: fixed; inset: 0; margin-top: 0;
    width: 100vw; height: 100dvh;
    display: flex; flex-direction: column;
    border-radius: 0;
    overflow: hidden;
    touch-action: pan-y;
  }

  .bshop-views{
    position: relative;
    flex: 1 1 auto; min-height: 0;
    width: 100%;
    overflow: hidden;
  }

  .bshop-v{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 1rem;
    background: #fff;
    transition: transform .25s ease;
    will-change: transform;
  }

  /* ÉTATS PAR DÉFAUT (V1 visible) */
  #bshop-v1 { transform: translateX(0); }
  #bshop-v2 { transform: translateX(100%); }

  /* Quand on passe en V2 */
  #categoriesAllMenu.is-v2 #bshop-v1 { transform: translateX(-100%); }
  #categoriesAllMenu.is-v2 #bshop-v2 { transform: translateX(0); }

  /* Grilles mobiles stables */
  .bshop-grid{ display:grid; gap:var(--gap); }
  #bshop-v1 .bshop-grid{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
  #bshop-v2 .bshop-grid,
  .bshop-mpanel.bshop-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Sécurité : les liens ne doivent pas élargir la grille */
  #bshop-v2 a { display:block; max-width:100%; }
}

/* (Sécu) si un display:none traîne quelque part */
#categoriesAllMenu.is-open{ display:flex !important; }

/* utilitaires */
.bshop-hidden{ display:none !important; }
/* ============================
   PATCH FAILSAFE (colle tout en bas)
   ============================ */

/* 1) Sécurité scroll horizontal */


/* 2) Ouverture du mega-menu, même si "hidden" de Tailwind est présent */
#categoriesAllMenu.is-open { display:flex !important; }

/* 3) — MOBILE — : on supprime complètement le système de slide.
      On bascule entre V1 et V2 avec display, impossible d’être “hors écran”. */
@media (max-width: 767px){

  /* Le conteneur plein écran reste fixe et enferme le scroll */
  #categoriesAllMenu.is-open{
    position: fixed; inset: 0; margin-top: 0;
    width: 100vw; height: 100dvh;
    flex-direction: column;
    border-radius: 0;
    overflow: hidden;
    touch-action: pan-y;
  }

  /* Le conteneur des vues occupe l’espace restant */
  .bshop-views{
    position: relative;
    flex: 1 1 auto; min-height: 0;
    width: 100%;
    overflow: hidden;
  }

  /* On annule toute translation/position héritée, au cas où */
  .bshop-v{
    position: static !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    display: none;                 /* invisible par défaut */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 1rem;
    background: #fff;
  }

  /* V1 visible par défaut quand le menu est ouvert */
  #categoriesAllMenu.is-open #bshop-v1{ display: block !important; }

  /* Quand on passe en V2, on cache V1 et on montre V2 */
  #categoriesAllMenu.is-open.is-v2 #bshop-v1{ display: none !important; }
  #categoriesAllMenu.is-open.is-v2 #bshop-v2{ display: block !important; }

  /* Grilles stables : pas d’auto-fill qui peut “déborder” */
  #bshop-v1 .bshop-grid{ display:grid; gap: var(--gap,16px); grid-template-columns: repeat(1, minmax(0, 1fr)); }
  #bshop-v2 .bshop-grid{ display:grid; gap: var(--gap,16px); grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Les liens/cartes ne doivent jamais élargir la grille */
  #bshop-v2 a{ display:block; max-width:100%; }
  .bshop-card{ width:100%; }
}

/* 4) Desktop intact, mais on garde la sécu sur l’affichage du conteneur */
@media (min-width: 768px){
  #categoriesAllMenu.is-open{ position:absolute; width: var(--menu-w); max-width:100vw; }
}
/* ===== Corrige le scroll vertical de la V2 (et V1) ===== */
@media (max-width: 767px){
  /* Le menu plein écran fait la hauteur du viewport et
     laisse la place au scroll interne des vues */
  #categoriesAllMenu.is-open{
    position: fixed; inset: 0;
    width: 100vw; height: 100dvh;
    display: flex; flex-direction: column;
    overflow: hidden;
    touch-action: pan-y;
  }

  /* Le conteneur des vues prend tout le reste sous le header */
  .bshop-views{
    flex: 1 1 auto;               /* occupe tout l’espace restant */
    min-height: 0;
    overflow-y: auto; 	/* 💡 indispensable pour permettre le scroll interne */
    overflow-x: hidden;              /* pas de scroll ici, seulement dans .bshop-v */
  }

  /* Chaque vue occupe 100% de la hauteur dispo et scrolle en vertical */
  .bshop-v{
    display: none;                 /* visible selon l’état */
    height: 100%;                  /* 💡 clé : crée une zone scrollable */
    min-height: 0;                 /* Safari/iOS */
    overflow-y: auto;              /* le scroll se fait ici */
    -webkit-overflow-scrolling: touch;
    padding: 1rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom)); /* évite que la dernière ligne soit masquée */
    background: #fff;
  }

  /* V1 visible par défaut quand ouvert */
  #categoriesAllMenu.is-open #bshop-v1{ display: block; }

  /* En V2 on bascule l’affichage */
  #categoriesAllMenu.is-open.is-v2 #bshop-v1{ display: none; }
  #categoriesAllMenu.is-open.is-v2 #bshop-v2{ display: block; }

  /* Grilles stables */
  #bshop-v1 .bshop-grid{ display:grid; gap: var(--gap,16px); grid-template-columns: repeat(1, minmax(0,1fr)); }
  #bshop-v2 .bshop-grid{ display:grid; gap: var(--gap,16px); grid-template-columns: repeat(2, minmax(0,1fr)); }
  #bshop-v2 a{ display:block; max-width:100%; }
}

/* iOS anciens (optionnel, mais utile) */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 767px){
    #categoriesAllMenu.is-open{ height: -webkit-fill-available; }
    .bshop-views{ block-size: -webkit-fill-available; }
    .bshop-v{ block-size: 100%; }
  }
}