/* ============================================================================
   LE BIVOUAC — CSS CONSOLIDÉ portage theme1186 (PS 1.6, variante theme5) → PS 9.1
   Thème : theme1186v9 (dérivé de classic) — remplace l'ancienne pile de
   correctifs v1→v18 de custom.css.
   Fidélité prod 1.6 : palette effective (overrides theme5) =
     anthracite #373737 (nav, menu, tuiles, boutons, footer)
     olive #4e5049 (sous-menus, textes identitaires, prix)
     crème #e9ded7 (bordures, fond home) · taupe #cac2bb (onglets, btns 2nd)
     beige vignettes #f0e9e4 · barre basse footer #313131 · texte #777
   Typo prod : Arvo (h1-h5, slab serif), Roboto 400/700/900, Open Sans,
   Helvetica stack (body 13px). Icônes : Material Icons (déjà chargées par classic,
   remplacent les glyphes "material-design" du thème 1.6).
   NB !important : uniquement pour battre le theme.css COMPILÉ de classic
   (justifié en commentaire à chaque fois).
   ========================================================================== */
/* Arvo ajouté à l'import : c'est le slab serif des h1-h5 de la prod
   (h1,h2,h3,h4,h5{font-family:'Arvo'} !important dans le CSS 1.6). */
@import url('https://fonts.googleapis.com/css2?family=Arvo:wght@400;700&family=Roboto:wght@400;700;900&family=Open+Sans:wght@400;600&display=swap');

/* ==========================================================================
   1. TOKENS & GLOBAL
   ========================================================================== */
:root {
  --bv-anthracite: #373737;   /* effectif theme5 (écrase le kaki de base) */
  --bv-olive: #4e5049;        /* sous-menus, textes, prix */
  --bv-creme: #e9ded7;        /* bordures + fond home */
  --bv-taupe: #cac2bb;        /* onglets, boutons secondaires */
  --bv-beige-card: #f0e9e4;   /* fond vignettes produit */
  --bv-bottom: #313131;       /* barre basse footer */
  --bv-hover-tile: #5b5857;
  --bv-hover-btn: #606060;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* stack body prod */
  font-size: 13px;
  color: #777777;
}
/* Prod 1.6 : h1..h5 forcés en Arvo (slab serif) par un override !important final.
   !important requis ici aussi : classic compile ses familles sur les headings. */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { font-family: 'Arvo', serif !important; }

a { color: var(--bv-olive); }
a:hover { color: var(--bv-anthracite); }

/* Fonds : pages internes blanches, home beige crème (iso #index prod) */
#wrapper { background: #fff; }
#index #wrapper { background: var(--bv-creme); padding-top: 0; } /* home collée au header */
#index .breadcrumb { display: none; } /* pas de fil d'ariane sur la home prod */

/* Boutons globaux (add-to-cart prod = anthracite, hover #606060) */
.btn-primary, .btn-secondary {
  background: var(--bv-anthracite); border-color: var(--bv-anthracite); color: #fff;
  font-family: 'Roboto', sans-serif; transition: background .3s ease;
}
.btn-primary:hover, .btn-primary:focus, .btn-secondary:hover {
  background: var(--bv-hover-btn); border-color: var(--bv-hover-btn); color: #fff;
}
.pagination .current a, .pagination a:hover { background: var(--bv-olive); color: #fff; }

/* ==========================================================================
   2. HEADER — barre fine sombre (nav)
   ========================================================================== */
/* !important : classic pose background #fff + border sur .header-nav */
#header { box-shadow: none; position: relative; z-index: 100; }
#header .header-nav {
  background: var(--bv-anthracite) !important;
  border-bottom: none !important;
  max-height: none;
  margin-bottom: 0;
}
#header .header-nav #contact-link {
  color: #fff; opacity: .85;
  font: 400 13px/17px 'Roboto', sans-serif;
  padding: 10px 0;
}
#header .header-nav #contact-link a { color: #fff; }
/* Connexion : Roboto 900 13px uppercase, blanc 50% → 100% au hover (iso prod) */
#header .header-nav .user-info a {
  display: inline-block;
  font: 900 13px/17px 'Roboto', sans-serif;
  text-transform: uppercase;
  color: #fff !important; /* classic force un gris sur ses liens de nav */
  opacity: .5;
  padding: 8px 12px 10px 18px;
  border-left: 1px solid rgba(0, 0, 0, .2);
  border-right: 1px solid rgba(0, 0, 0, .2);
}
#header .header-nav .user-info a:hover { opacity: 1; }
#header .header-nav .material-icons { color: #fff; font-size: 15px; vertical-align: -2px; }

/* ==========================================================================
   3. HEADER — zone camo : logo + panier + recherche
   ========================================================================== */
/* !important : classic peint .header-top en blanc */
#header .header-top {
  background: url('../img/bivouac/bg_patern_theme5.jpg') 0 0 repeat !important; /* tuile camo 300x300 iso prod */
  padding-bottom: 0;
}
#header { border-bottom: 5px solid var(--bv-creme); } /* liseré crème sous le header (iso prod) */

.header-top .lb-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 0; /* iso prod : logo et panier padding-top 30px */
}
/* Logo 845x150 (panneau sombre inclus dans l'image), ~50% du container comme en prod */
#_desktop_logo { flex: 0 1 555px; margin: 0; padding: 0; text-align: left; }
#_desktop_logo h1 { margin: 0; }
#_desktop_logo img.logo { max-width: 100%; width: auto; height: auto; display: block; }

/* Colonne droite : panier puis recherche, blocs de 326px cadre crème (iso prod) */
.lb-header-right { display: flex; flex-direction: column; gap: 10px; width: 330px; flex: 0 0 330px; }

/* Panier : fond transparent sur camo, cadre 2px crème, Roboto 900 blanc */
.lb-cart-box .blockcart {
  background: none !important; /* classic peint le blockcart en gris clair */
  border: 2px solid var(--bv-creme);
  padding: 4px 10px 8px;
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
}
.lb-cart-box .blockcart .header { display: block; }
.lb-cart-box .blockcart .material-icons.shopping-cart {
  color: #fff; font-size: 26px; vertical-align: -5px; margin-right: 6px;
}
.lb-cart-box .blockcart span.hidden-sm-down { /* "Panier" : 23px iso prod b{} */
  color: #fff; font: 900 23px/27px 'Roboto', sans-serif; padding-right: 8px;
}
.lb-cart-box .blockcart .cart-products-count { /* "(0)" : 13px décalé haut */
  color: #fff; font: 900 13px/17px 'Roboto', sans-serif; vertical-align: 3px;
}
.lb-cart-box .blockcart .header::after { /* caret ▼ à droite (glyphe \e071 prod) */
  content: "\e5cf"; /* U+E5CF = expand_more (glyphe direct : pas de ligature) */
  font-family: 'Material Icons';
  font-feature-settings: 'liga';
  font-size: 21px; color: #fff; float: right; padding-top: 5px;
}

/* Recherche : même gabarit que le panier (326px, cadre crème, fond transparent) */
.lb-search-box #search_widget { float: none; margin: 0; width: 100%; max-width: none; min-width: 0; }
.lb-search-box #search_widget form {
  position: relative;
  border: 2px solid var(--bv-creme);
  background: none;
  padding: 0;
  display: block;
}
/* !important : classic force fond blanc + couleur sombre sur l'input */
.lb-search-box #search_widget input[type="text"] {
  background: none !important;
  border: none !important;
  box-shadow: none;
  color: #fff !important;
  width: 100%;
  height: 38px;
  padding: 3px 78px 3px 13px;
  font-size: 14px;
  opacity: .9;
}
.lb-search-box #search_widget input[type="text"]::placeholder { color: #fff; opacity: .8; }
.lb-search-box #search_widget .material-icons.search {
  position: absolute; top: 50%; right: 9px; transform: translateY(-50%);
  padding: 0; line-height: 1;  /* centrage vertical (classic ajoute padding .5rem) */
  color: #fff; font-size: 22px; cursor: pointer;
}
.lb-search-box #search_widget .material-icons.clear { top: 50%; right: 40px; transform: translateY(-50%); padding: 0; line-height: 1; color: #fff; }

/* ==========================================================================
   4. BARRE DE MENU + DROPDOWNS (desktop uniquement : tout est scopé
   .header-menu-bar → ne touche JAMAIS #mobile_top_menu_wrapper)
   ========================================================================== */
.header-menu-bar { background: transparent; width: 100%; clear: both; }
.header-menu-bar .container { padding-top: 0; padding-bottom: 0; }
.header-menu-bar .header-top-right { width: 100%; float: none; }
/* La barre sombre = largeur du container, sur le camo (iso .sf-menu prod) */
.header-menu-bar #_desktop_top_menu {
  background: var(--bv-anthracite);
  border-bottom: 4px solid var(--bv-creme);
  margin: 0; padding: 0; float: none; width: 100%;
}
.header-menu-bar .top-menu[data-depth="0"] {
  display: flex; flex-wrap: wrap; justify-content: flex-start;
  margin: 0; padding: 0; list-style: none;
}
.header-menu-bar .top-menu[data-depth="0"] > li {
  position: relative; /* ancrage du dropdown (acquis) */
  float: none;
  border-right: 1px solid rgba(0, 0, 0, .2); /* séparateurs iso prod */
}
/* Items N1 : Roboto 900 14px/29px uppercase, blanc 50% → 100% (iso prod, custom !important 1.6) */
.header-menu-bar .top-menu[data-depth="0"] > li > a {
  font: 900 14px/29px 'Roboto', sans-serif;
  text-transform: uppercase;
  color: #fff !important; /* classic met ses dropdown-item en gris foncé */
  display: block;
  padding: 16px 21px 27px;
  opacity: .5;
  background: none;
}
.header-menu-bar .top-menu[data-depth="0"] > li:hover > a,
.header-menu-bar .top-menu[data-depth="0"] > li.sfHover > a { opacity: 1; background: none; }
/* Caret ▼ centré sous le libellé, seulement si sous-menu (iso prod \e071) */
.header-menu-bar .top-menu[data-depth="0"] > li:has(.sub-menu) > a::after {
  content: "\e5cf"; /* U+E5CF = expand_more (glyphe direct : pas de ligature) */
  font-family: 'Material Icons';
  font-feature-settings: 'liga';
  font-size: 20px; line-height: 1;
  position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%);
}

/* --- Dropdowns (mécanique acquise v14-v16 : display figé, pilotage par visibility) --- */
/* !important : classic pose display:none sur .sub-menu.collapse + left:14.7% */
.header-menu-bar .top-menu > li > .sub-menu {
  display: block !important;
  visibility: hidden;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 1000;
  width: 760px !important;
  max-width: 92vw;
  background: var(--bv-olive) !important; /* fond olive #4e5049 iso mega-menu prod */
  padding: 26px 30px 25px;
  margin: 0;
  box-shadow: rgba(0, 0, 0, .2) 0 5px 13px;
  border: none;
  text-align: left;
}
.header-menu-bar .top-menu > li:hover > .sub-menu,
.header-menu-bar .top-menu > li.sfHover > .sub-menu { visibility: visible; }
/* Les 2 derniers items ouvrent vers la gauche (acquis, évite le débordement) */
.header-menu-bar .top-menu[data-depth="0"] > li:nth-last-child(-n+2) > .sub-menu {
  left: auto !important; right: 0 !important;
}
/* Le ul.top-menu IMBRIQUÉ ne doit PAS hériter du flex de la barre (acquis v15) */
.header-menu-bar .sub-menu .top-menu,
.header-menu-bar .sub-menu ul {
  display: block !important; /* bat le display:flex ci-dessus + resets classic */
  background: transparent !important;
  width: auto; max-width: none; margin: 0; padding: 0;
}
/* 3 colonnes dans le panneau (acquis — équivalent des 5 col. 20% prod) */
.header-menu-bar .top-menu > li > .sub-menu > .top-menu[data-depth="1"] {
  column-count: 3; column-gap: 8px;
}
.header-menu-bar .sub-menu li {
  display: block; position: static; float: none !important; /* classic floate les li depth-1 */
  width: auto; break-inside: avoid;
}
/* Entrées N2 : Roboto 600 15px/22px uppercase blanc, hover opacity .4 (iso prod) */
.header-menu-bar .sub-menu a {
  display: block;
  font: 600 15px/22px 'Roboto', sans-serif;
  text-transform: uppercase;
  color: #fff !important; /* classic met ses dropdown-item en gris */
  padding: 8px 12px;
  white-space: normal;
}
.header-menu-bar .sub-menu a:hover { opacity: .4; background: none; }
/* Niveau 3 : masqué comme en prod (les div.collapse de classic restent fermées) */

/* ==========================================================================
   5. CARROUSEL — pleine largeur viewport, hauteur naturelle (2048x714)
   ========================================================================== */
/* Breakout 100vw depuis le .container (le slider vit dans #content-wrapper) */
#carousel {
  position: relative;
  left: 50%; right: 50%;
  width: 100vw; max-width: 100vw;
  margin-left: -50vw; margin-right: -50vw;
  margin-bottom: 0;
  overflow: hidden;
  background: transparent;
}
#carousel .carousel-inner, #carousel .carousel-item { height: auto; width: 100%; }
#carousel .carousel-item figure { margin: 0; position: relative; }
/* Image : largeur pleine, hauteur AUTO (aspect naturel — jamais de hauteur fixe) */
#carousel .carousel-item img {
  display: block;
  width: 100% !important;   /* classic contraint l'image du slider */
  height: auto !important;
  max-width: 100%;
  object-fit: unset;
}
/* Caption iso prod : bloc ancré en haut, padding 50px, texte h1 Arvo 36px blanc
   aligné à droite par le markup 1.6 migré (table > td text-align:right). */
#carousel .caption .display-1 { display: none; } /* doublon du titre injecté par classic */
#carousel figcaption.caption {
  position: absolute;
  top: 0 !important; bottom: auto !important;  /* classic ancre sa caption en bas */
  left: 0 !important; right: 0 !important;
  transform: none;
  width: auto; max-width: none; height: auto;
  padding: 50px;
  margin: 0;
  text-align: left;
  text-shadow: none; /* prod : aucun text-shadow */
  z-index: 3;
}
#carousel .caption .caption-description { color: #fff; }
#carousel .caption .caption-description table { width: 100%; }
#carousel .caption .caption-description h1 {
  font-family: 'Arvo', serif !important;
  font-size: 36px; line-height: 1.1; font-weight: 500;
  color: #fff; margin: 0 0 8px; text-transform: none;
}
/* Pager : ronds 15px bordés blanc, actif plein (iso bx-pager prod) */
#carousel .carousel-indicators { bottom: 30px; margin-bottom: 0; z-index: 4; }
#carousel .carousel-indicators li {
  width: 15px; height: 15px;
  border: 3px solid #fff; border-radius: 50%;
  background: transparent; opacity: 1; margin: 0 5px;
}
#carousel .carousel-indicators li.active, #carousel .carousel-indicators li:hover { background: #fff; }
/* Flèches : material, gris sable → blanc au hover (iso prod #b6b0a9) */
#carousel .carousel-control {
  position: absolute; top: 46%; width: auto;
  background: none; opacity: 1; z-index: 4;
}
#carousel .left.carousel-control { left: 6%; }
#carousel .right.carousel-control { right: 7%; }
#carousel .carousel-control .material-icons {
  font-size: 41px; color: #b6b0a9; text-shadow: none; transition: color .3s ease;
}
#carousel .carousel-control:hover .material-icons { color: #fff; }

/* ==========================================================================
   6. TUILES CATÉGORIES (module lebivouactiles) — 3 tuiles pleine largeur
   ========================================================================== */
.lebivouac-tiles {
  position: relative;
  left: 50%; right: 50%;
  width: 100vw; max-width: 100vw;
  margin-left: -50vw; margin-right: -50vw;
  padding: 20px 0 0;
  background: transparent; /* le beige de la home est déjà derrière */
}
.lebivouac-tiles .container { max-width: none; width: 100%; padding: 0; }
.lebivouac-tiles .lb-tiles-row {
  display: flex; gap: 30px; /* gouttières 30px iso grille prod */
  list-style: none; margin: 0 0 20px; padding: 0 15px;
}
.lebivouac-tiles .lb-tile { flex: 1 1 0; margin: 0; }
/* Tuile iso prod : liseré crème 4px en haut, bandeau anthracite sous la photo */
.lebivouac-tiles .lb-tile-link {
  display: block; position: relative; overflow: hidden;
  border-top: 4px solid var(--bv-creme);
  background: var(--bv-anthracite);
  text-align: center;
}
.lebivouac-tiles .lb-tile-img { width: 100%; height: auto; display: block; border: none; box-shadow: none; }
/* Titre : Arvo 700 43px uppercase crème, dans le flux sous l'image (pas d'overlay) */
.lebivouac-tiles .lb-tile-title {
  position: static;
  display: inline-block;
  background: none; padding: 0; letter-spacing: normal;
  font-family: 'Arvo', serif;
  font-size: 43px; line-height: 1.12em; font-weight: 700;
  color: var(--bv-creme);
  text-transform: uppercase;
  margin: 2% 0 2.2%;
  transition: color .3s ease;
}
.lebivouac-tiles .lb-tile-link:hover { background: var(--bv-hover-tile); }
.lebivouac-tiles .lb-tile-link:hover .lb-tile-title { color: #fff; }
@media (min-width: 1200px) {
  .lebivouac-tiles .lb-tile-link:hover .lb-tile-title { animation: .35s ease 0s 1 lbMoveFromTop; }
}
@keyframes lbMoveFromTop {
  0% { opacity: 0; transform: translateY(-200%); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   7. ONGLETS HOME « Populaire / Meilleures ventes » (insérés par JS)
   ========================================================================== */
.lb-home-tabs { background: #fff; padding: 0 8px; margin: 0; } /* début de la bande blanche centrale */
.lb-home-tabs .lb-tabnav {
  display: flex; justify-content: center; flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
  background: var(--bv-taupe); /* iso #home-page-tabs prod */
  border: none; max-width: none;
}
.lb-home-tabs .lb-tab {
  padding: 19px 17px 20px;
  font: 900 17px/21px 'Roboto', sans-serif;
  text-transform: uppercase;
  letter-spacing: normal;
  color: var(--bv-olive);
  cursor: pointer;
  border: none; background: none;
}
/* Actif / hover : texte blanc, PAS de changement de fond (iso prod) */
.lb-home-tabs .lb-tab.active, .lb-home-tabs .lb-tab:hover { color: #fff; background: none; }

/* ==========================================================================
   8. PRODUITS (grilles home + listes)
   ========================================================================== */
/* Bande blanche centrale de la home sous les onglets */
.page-home .featured-products { background: #fff; padding: 30px 8px 10px; margin: 0; }
/* Les titres de section sont remplacés par les onglets (iso prod) */
.page-home .featured-products[data-type] .products-section-title { display: none; }
/* Titres de section ailleurs (accessoires produit, etc.) : bandeau taupe */
.featured-products .h2, .products-section-title {
  color: var(--bv-olive); background: var(--bv-taupe);
  font-weight: 700; text-transform: uppercase;
  padding: 14px 20px; display: block;
}
/* Vignette : fond beige rosé iso prod */
.product-miniature .thumbnail-container {
  background: var(--bv-beige-card);
  padding-bottom: 6px;
  box-shadow: none;
}
/* Titre produit : Roboto 400 14px/18px uppercase olive (iso .product-name prod).
   !important : bat la famille/couleur compilées de classic sur h3/a. */
.product-miniature .product-title, .product-miniature .product-title a {
  font-family: 'Roboto', sans-serif !important;
  font-size: 14px; line-height: 18px; font-weight: 400 !important;
  color: var(--bv-olive) !important;
  text-transform: uppercase;
}
.product-miniature .product-title a:hover { opacity: .55; }
/* Prix : Roboto 700 20px olive (iso .price.product-price prod) */
.product-miniature .price, .product-price, .current-price {
  color: var(--bv-olive);
  font-family: 'Roboto', sans-serif;
  font-weight: 700; font-size: 20px; line-height: 25px;
}
.product-miniature .regular-price {
  font: 400 15px/19px 'Roboto', sans-serif;
  color: #888888; text-decoration: line-through;
}
.product-flag { background: var(--bv-olive); font-family: 'Roboto', sans-serif; }
.product-flag.discount, .product-flag.discount-percentage { background: #a94442; }

/* ==========================================================================
   9. BLOC PAIEMENT (bandeau logos CB avant le footer, sur le beige)
   ========================================================================== */
.lebivouac-payment { background: var(--bv-creme); padding: 36px 0 40px; text-align: left; }
.lebivouac-payment .lb-payment-img { display: block; max-width: 100%; height: auto; margin: 0; } /* calé à gauche iso prod */

/* ==========================================================================
   10. FOOTER — anthracite + frise camo, barre basse #313131
   ========================================================================== */
/* !important : classic peint le footer en clair */
#footer {
  background: url('../img/bivouac/footer-bg_theme5.png') 0 0 repeat-x var(--bv-anthracite) !important;
  color: #777777;
  padding-top: 0; margin-top: 0;
}
#footer .footer-container { background: transparent !important; padding: 50px 0 0; margin: 0; color: #777; }
#footer .footer-container .wrapper { margin-top: 41px; margin-bottom: 30px; }
/* Titres de colonnes : gabarit Roboto 900 17px mais famille Arvo (override prod),
   souligné crème translucide */
#footer .h3, #footer .footer-container .h3 {
  font-size: 17px; line-height: 22px; font-weight: 700;
  color: #fff !important; /* classic grise ses .h3 de footer */
  text-transform: uppercase;
  margin: 0 0 23px;
  padding-bottom: 16px;
  border-bottom: 4px solid rgba(233, 222, 215, .2);
}
#footer .h3 a { color: #fff !important; font: inherit; opacity: 1; }
#footer .h3 a:hover { opacity: .5; }
/* Liens : Roboto 900 13px uppercase blanc 50% → 100% */
#footer .footer-container li { padding-bottom: 12px; }
#footer .footer-container li a, #footer .links a {
  font: 900 13px/22px 'Roboto', sans-serif;
  color: #fff !important; /* classic grise les liens */
  opacity: .5;
  text-transform: uppercase;
  text-decoration: none;
}
#footer .footer-container li a:hover, #footer .links a:hover { opacity: 1; text-decoration: none; }
/* Bloc contact : texte blanc 50%, liens pleins */
#footer .block-contact { color: rgba(255, 255, 255, .5) !important; text-transform: uppercase; font: 400 13px/20px 'Roboto', sans-serif; }
#footer .block-contact a { color: #fff !important; opacity: 1; }
/* Barre basse : breakout 100vw depuis le .container du footer, fond #313131 */
#footer .footer-container p.text-sm-center {
  position: relative;
  left: 50%;
  width: 100vw;
  margin: 40px 0 0 -50vw;
  background: var(--bv-bottom);
  padding: 11px 15px 12px;
  font: 400 12px/16px 'Roboto', sans-serif;
  color: #fff;
  text-align: center;
  text-transform: none;
}
#footer .footer-container p.text-sm-center a {
  font: 400 12px/16px 'Roboto', sans-serif;
  color: #fff !important;
  opacity: .5;
  text-transform: none;
}
#footer .footer-container p.text-sm-center a:hover { opacity: 1; }

/* ==========================================================================
   11. FILETS DE SÉCURITÉ & RESPONSIVE
   ========================================================================== */
/* Anti-wishlist (acquis v10) : blockwishlist laisse des .modal-backdrop
   opacity:0 plein écran qui bloquent tous les clics. !important vital. */
.modal-backdrop:not(.show):not(.in) { display: none !important; pointer-events: none !important; }
.modal:not(.show):not(.in) { pointer-events: none; }
/* Les breakouts 100vw incluent la scrollbar : on neutralise le scroll horizontal */
body { overflow-x: hidden; }

@media (max-width: 1199px) {
  .lebivouac-tiles .lb-tile-title { font-size: 35px; }
}
@media (max-width: 991px) {
  .lebivouac-tiles .lb-tile-title { font-size: 25px; }
  #_desktop_logo { flex-basis: 45%; }
  .header-menu-bar .top-menu[data-depth="0"] > li > a { padding: 14px 12px 25px; }
}
@media (max-width: 767px) {
  /* Le header desktop (.lb-header-row, #_desktop_top_menu) est déjà masqué par
     classic (hidden-sm-down) : le menu mobile de classic reste intact.
     On masque juste la barre devenue vide. */
  .header-menu-bar { display: none; }
  /* Breakouts sains sur mobile */
  #carousel figcaption.caption { padding: 30px; }
  #carousel .caption .caption-description h1 { font-size: 25px; }
  #carousel .carousel-indicators { bottom: 12px; }
  /* Tuiles empilées */
  .lebivouac-tiles .lb-tiles-row { flex-wrap: wrap; }
  .lebivouac-tiles .lb-tile { flex: 1 1 100%; }
  .lebivouac-tiles .lb-tile-title { font-size: 35px; }
  /* Onglets empilés iso prod */
  .lb-home-tabs .lb-tabnav { display: block; padding: 13px 0 18px; }
  .lb-home-tabs .lb-tab { display: block; width: 100%; padding: 5px 10px; text-align: center; }
  /* La barre basse footer garde son breakout sans débordement */
  #footer .footer-container p.text-sm-center { width: 100vw; }
}
/* ==========================================================================
   12. FIXES VALIDÉS POST-CONSOLIDATION (état approuvé par Ludo le 29/07)
   — priment sur les sections 5/6 : overlay tuiles centré + anti-rétraction figure
   ========================================================================== */
/* Carrousel : la figure de classic est inline-block -> shrink-wrap possible. Forcer block. */
#carousel .carousel-item figure { display: block !important; width: 100% !important; height: auto !important; }
#carousel .carousel-item a { display: block; }

/* Tuiles : conteneur CENTRÉ (pas pleine largeur) en OVERLAY sur le bas du slider (iso prod) */
.lebivouac-tiles {
  left: auto !important; right: auto !important;
  width: auto !important; max-width: none !important;
  margin-left: 0 !important; margin-right: 0 !important;
  background: transparent !important; padding: 0 0 10px;
}
.lebivouac-tiles .container { max-width: 1200px !important; width: auto !important; margin: 0 auto; padding: 0 15px; }
.lebivouac-tiles .lb-tiles-row { display: flex; gap: 20px; justify-content: center; list-style: none; margin: 0; padding: 0; }
.lebivouac-tiles .lb-tile { flex: 1 1 0; max-width: 370px; background: none !important; overflow: visible; }
.lebivouac-tiles .lb-tile-img { border: 4px solid #fff !important; box-shadow: 0 1px 5px rgba(0,0,0,.35) !important; }
.lebivouac-tiles .lb-tile-link { position: relative; display: block; }
.lebivouac-tiles .lb-tile-title {
  position: absolute !important; left: 14px; right: 14px; bottom: 16px;
  background: rgba(48,49,44,.85) !important; color: #fff !important;
  font-family: 'Arvo', Georgia, serif !important; font-weight: 700;
  text-transform: uppercase; font-size: 28px; text-align: center; padding: 5px 0 !important; line-height: 1.15;
}
.lebivouac-tiles .lb-tile-link:hover .lb-tile-title { background: #4e5049 !important; }
@media (min-width: 992px) {
  .lebivouac-tiles { margin-top: clamp(-320px, -12vw, -120px) !important; position: relative; z-index: 5; }
}

/* ==========================================================================
   13. FOOTER — 4 colonnes égales + contacts avec icônes (contenu iso prod)
   ========================================================================== */
#footer .footer-container > .container > .row { display: flex; flex-wrap: wrap; }
#footer .footer-container .links.col-md-6 { flex: 0 0 25%; max-width: 25%; }
#footer .footer-container .links.col-md-3, #footer .footer-container .block-contact { flex: 0 0 25%; max-width: 25%; }
#footer .footer-container .wrapper { margin-top: 41px; }
@media (max-width: 767px) {
  #footer .footer-container .links.col-md-6, #footer .footer-container .links.col-md-3,
  #footer .footer-container .block-contact { flex: 0 0 100%; max-width: 100%; }
}
/* le wrapper linklist ne doit pas imposer sa largeur : chaque bloc = une colonne */
#footer .footer-container .links > .row, #footer .linklist > .row { display: contents; }
/* Contacts avec icônes */
.lb-contacts .lb-contact-list { list-style: none; margin: 0; padding: 0; }
.lb-contacts .lb-contact-list li { display: flex; gap: 10px; align-items: flex-start; padding-bottom: 14px; color: rgba(255,255,255,.5); font: 400 13px/20px 'Roboto', sans-serif; text-transform: uppercase; }
.lb-contacts .lb-contact-list .material-icons { font-size: 17px; color: rgba(255,255,255,.6); margin-top: 1px; }
.lb-contacts .lb-shopname { color: rgba(255,255,255,.55); }
.lb-contacts a { color: #fff !important; opacity: 1 !important; }

/* 13b — wrapper linklist passé col-md-9 (3 blocs col-md-4) : 3×25% global + contacts 25% */
#footer .footer-container .links.col-md-9 { flex: 0 0 75%; max-width: 75%; }
#footer .footer-container .links.col-md-9 > .row { display: flex; flex-wrap: wrap; width: 100%; }
#footer .footer-container .links .wrapper.col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }

/* 13c — alignement vertical CONTACTS sur les 3 colonnes linklist (même marge que .wrapper) */
#footer .footer-container .block-contact { margin-top: 41px; }

/* ==========================================================================
   14. IMAGE DE CATÉGORIE — jamais déformée (filet de sécurité)
   Le format category_default a été remis à 870x217 (valeur prod 1.6) ;
   ces règles garantissent le ratio même si un format change à l'avenir.
   ========================================================================== */
#category #content .category-cover img,
#category .category-cover img,
#category-description img,
.block-category .category-cover img {
  width: auto !important; height: auto !important;
  max-width: 100% !important; object-fit: contain !important; display: block;
}

/* 14b — image de catégorie : bandeau pleine largeur sous la description.
   classic la coince dans une colonne 141x180 (theme.css) et l'écrase :
   l'asset historique du site est un bandeau 870x217, on le rend tel quel. */
.block-category .block-category-inner { display: block !important; }
.block-category .category-cover {
  width: 100% !important; height: auto !important;
  margin: 12px 0 0 !important; float: none !important; text-align: center;
}
.block-category .block-category-inner .category-cover img,
.block-category .category-cover img, .block-category .category-cover picture {
  width: 100% !important; max-width: 870px !important; height: auto !important;
  object-fit: contain !important; display: inline-block !important; margin: 0 auto;
}

/* 15 — HORAIRES dans la colonne Contacts du footer (demande client 04/08) */
.lb-contacts .lb-hours { align-items: flex-start; }
.lb-contacts .lb-hours > span { display: block; }
.lb-contacts .lb-hours-title {
  display: block; color: #fff; font-family: 'Arvo', Georgia, serif;
  font-weight: 700; text-transform: uppercase; font-size: 13px;
  margin: 0 0 6px; letter-spacing: .3px;
}
.lb-contacts .lb-hours-line {
  display: block; color: rgba(255,255,255,.5);
  font: 400 12px/19px 'Roboto', sans-serif; text-transform: none;
}
.lb-contacts .lb-hours-line b {
  display: inline-block; min-width: 74px; color: rgba(255,255,255,.75); font-weight: 700;
}

/* ==========================================================================
   16. LIENS « TOUS LES … » DE LA HOME — masquage de 2 destinations invalides
   (audit du 04/08) :
   - /2-accueil  : catégorie racine (946 produits) qui répond en ~65 s ET qui
                   n'existe PAS en prod (404 sur lebivouac.fr) -> ne pas exposer.
   - /meilleures-ventes : contrôleur best-sales désactivé -> 302 vers 404.
                   Idem prod (404), mais la prod n'affiche pas ce lien.
   Le lien « Tous les nouveaux produits » (/nouveaux-produits) reste actif : il fonctionne.
   ========================================================================== */
.page-home a.all-product-link[href$="/2-accueil"],
.page-home a.all-product-link[href*="/meilleures-ventes"] { display: none !important; }

/* ===== 15. Pagination des listes produits (28/10/2026, retour Ludo) ===== */
.pagination { align-items: center; margin-top: 1.5rem; }
.pagination > div:first-child { color: #7a7a7a; font-size: 14px; }
.pagination .page-list { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px;
  padding: 0; margin: 0; background: transparent; box-shadow: none; }
.pagination .page-list li { display: block; float: none; margin: 0; }
.pagination .page-list li a,
.pagination .page-list li .spacer { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px;
  padding: 0 10px; border: 1px solid var(--bv-creme); border-radius: 2px; background: #fff; color: var(--bv-anthracite);
  font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.pagination .page-list li .spacer { min-width: auto; padding: 0 4px; border-color: transparent; background: transparent; }
.pagination .page-list li a:hover { background: var(--bv-olive); border-color: var(--bv-olive); color: #fff; }
.pagination .page-list li.current a { background: var(--bv-anthracite); border-color: var(--bv-anthracite); color: #fff; cursor: default; }
.pagination .page-list li a.next,
.pagination .page-list li a.previous { gap: 4px; padding: 0 14px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.pagination .page-list li a .material-icons { font-size: 18px; }
@media (max-width: 767px) {
  .pagination .page-list { justify-content: center; margin-top: 10px; }
}