/**
 * Thème Enfant : LaboutiqueDeTraceur
 * Parent : Hummingbird
 * PrestaShop 9
 */

:root {
  --lbt-navy: #082c54;
  --lbt-navy-dark: #051d38;
  --lbt-blue: #0470c9;
  --lbt-blue-hover: #035da8;
  --lbt-blue-light: #eaf3fa;
  --lbt-orange: #f26522;
  --lbt-orange-hover: #d95310;
  --lbt-orange-light: #fef3ec;
  --lbt-green-promo: #28a745;
  --lbt-red-promo: #F3136D;
  --lbt-gray-bg: #f8f9fa;
  --lbt-border: #e2e8f0;
  --lbt-text-dark: #1e293b;
  --lbt-text-muted: #64748b;
  /* Couleur des liens <a> natifs (Bootstrap pilote `a{color}` via ces
     custom properties RGB, cf. theme.css) : alignée sur --lbt-blue /
     --lbt-blue-hover plutôt que le bleu Bootstrap par défaut, pour rester
     cohérent avec .btn-primary et .text-primary déjà recolorés pareil. */
  --bs-link-color-rgb: 4, 112, 201;
  --bs-link-hover-color-rgb: 3, 93, 168;
}

/* Pas de `overflow-x:hidden` ici (ni sur html/body) : un ancêtre avec un
   overflow non-`visible` (même seulement sur l'axe X) désactive le
   `position:sticky` de TOUS ses descendants, y compris le header — déjà
   vécu une fois (header devenu non-sticky après l'avoir ajouté comme filet
   de sécurité générique). Les cas de débordement horizontal réels
   rencontrés dans ce fichier ont chacun été corrigés à la source (bannière
   de financement, badge garantie, etc.) plutôt que masqués globalement. */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--lbt-text-dark);
  background-color: #ffffff;
}

/* Bootstrap 5 pilote .btn-primary via ses propres custom properties
   (--bs-btn-bg/--bs-btn-border-color/...) posées sur la classe elle-même :
   les redéfinir ici plutôt que d'écraser background-color directement,
   pour que .btn-primary garde tout le reste du comportement natif
   (disabled, focus-ring, etc.) tout en utilisant la couleur du thème. */
.btn.btn-primary {
  --bs-btn-bg: var(--lbt-blue);
  --bs-btn-border-color: var(--lbt-blue);
  --bs-btn-hover-bg: var(--lbt-blue-hover);
  --bs-btn-hover-border-color: var(--lbt-blue-hover);
  --bs-btn-active-bg: var(--lbt-blue-hover);
  --bs-btn-active-border-color: var(--lbt-blue-hover);
  --bs-btn-disabled-bg: var(--lbt-blue);
  --bs-btn-disabled-border-color: var(--lbt-blue);
}

/* .text-primary de Bootstrap applique `color:rgba(var(--bs-primary-rgb),...)
   !important` : on redéfinit juste cette custom property (triplet RGB de
   --lbt-blue, #0470c9 = 4,112,201) plutôt que de rajouter un !important
   nous-mêmes — la formule existante du cœur consomme directement la
   nouvelle valeur, sans bataille de spécificité. Scopé à .text-primary
   seul pour ne pas affecter .bg-primary/.border-primary non demandés. */
.text-primary {
  --bs-primary-rgb: 4, 112, 201;
}

/* Ombre portée sous tout le header (bandeau + logo/recherche + menu), pour
   le détacher visuellement du contenu en dessous — maquette : ombre douce,
   toujours présente (le header étant `position:sticky`, cf. .js-sticky-header
   fourni par le thème parent Hummingbird, il reste visible en permanence
   au-dessus du contenu qui défile). */
.header.js-sticky-header {
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

/* ==========================================================================
   1. TOP BAR & HEADER (CONFORME MAQUETTE)
   ========================================================================== */
.lbt-top-bar {
  background-color: #041e3a;
  color: #ffffff;
  padding: 5px 0;
  font-size: 0.82rem;
}
.lbt-top-bar a {
  color: #ffffff;
  transition: opacity 0.2s ease;
}
.lbt-top-bar a:hover {
  opacity: 0.85;
}
@media (max-width: 767.98px) {
  /* Maquette mobile : un seul message centré (téléphone), pas de lien
     "Contactez-nous" ni "Besoin de réparation ?" à cette largeur. */
  .lbt-top-bar .lbt-topbar-secondary-link,
  .lbt-top-bar .lbt-topbar-right {
    display: none;
  }
}
@layer utilities {
  /* `.justify-content-between`/`-center` de Bootstrap sont `!important` et
     vivent dans `@layer utilities` : un `!important` non calqué dans un
     layer nommé perd toujours face à un `!important` de layer nommé, quelle
     que soit la spécificité — il faut donc wrapper ce forçage dans le même
     layer (cf. mêmes correctifs de ce type ailleurs dans ce fichier). */
  @media (max-width: 767.98px) {
    .lbt-top-bar .container,
    .lbt-top-bar .lbt-topbar-left {
      justify-content: center !important;
    }
  }
}

.lbt-header-main {
  padding: 16px 0;
  background: #ffffff;
}

/* Logo */
.lbt-logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lbt-site-logo {
  max-height: 58px;
  width: auto;
}
@media (max-width: 575.98px) {
  .lbt-site-logo {
    max-height: 46px;
  }
}

/* Recherche Arrondie Forme Pilule */
.lbt-search-bar-wrapper {
  max-width: 480px;
  margin: 0 auto;
}
.lbt-search-input {
  border-radius: 30px !important;
  border: 1.5px solid #cbd5e1 !important;
  padding: 10px 48px 10px 22px !important;
  font-size: 0.88rem !important;
  color: var(--lbt-navy) !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.lbt-search-input:focus {
  border-color: var(--lbt-blue) !important;
  box-shadow: 0 0 0 3px rgba(11, 105, 246, 0.15) !important;
}
.lbt-search-input::placeholder {
  color: #94a3b8;
  font-size: 0.88rem;
}
.lbt-search-submit {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lbt-search-submit svg {
  transition: stroke 0.2s ease;
}
.lbt-search-submit:hover svg {
  stroke: var(--lbt-orange);
}

/* Icônes d'action Header (Favoris, Compte, Panier) */
.lbt-header-icon-link {
  color: var(--lbt-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.lbt-header-icon-link:hover {
  transform: translateY(-2px);
}
.lbt-header-icon-link svg {
  stroke: var(--lbt-navy);
  transition: stroke 0.2s ease;
}
.lbt-header-icon-link:hover svg {
  stroke: var(--lbt-orange);
}
.lbt-badge-counter {
  position: absolute;
  top: -6px;
  right: -8px;
  background-color: #e53935;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ==========================================================================
   2. MENU PRINCIPAL (module hit_megamenu) — ICÔNES + MÉGAMENU
   Le CSS livré par hit_megamenu.css cible une présentation "sidebar
   verticale" (clear:both, display:inline-block) qui casse la mise en page
   horizontale voulue par la maquette. On force ici une vraie barre flex
   sur les vraies classes émises par le module.
   ========================================================================== */
.lbt-navbar-container {
  background-color: #ffffff;
  position: relative;
}
.lbt-navbar-container .container_hit_megamenu {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 15px;
  /* Ancre de positionnement du méga-menu : le sous-menu (.menu-dropdown)
     se positionne par rapport à ce conteneur (et non plus par rapport à
     chaque <li>) pour pouvoir couvrir toute la largeur du menu. */
  position: relative;
}
.lbt-navbar-container .hit-menu-vertical,
.lbt-navbar-container .menu-vertical {
  position: static;
  width: 100%;
  height: auto;
}
.lbt-navbar-container .close-menu-content {
  display: none;
}
.lbt-navbar-container ul.menu-content.top-menu {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  height: auto;
}
.lbt-navbar-container ul.menu-content.top-menu > li.level-1 {
  clear: none !important;
  float: none !important;
  /* Pas de position:relative ici : .menu-dropdown (enfant direct) doit se
     positionner par rapport à .container_hit_megamenu (toute la largeur du
     menu), pas par rapport à ce <li> précis. */
  position: static;
  border-bottom: none;
  background: transparent;
  padding: 0;
  width: auto;
  display: flex;
  align-items: stretch;
}
/* Le module enveloppe le lien réel dans 1 ou 2 divs structurelles
   (.icon-drop-mobile > .menu-sub-item) selon le chemin de rendu utilisé.
   display:contents les fait disparaître de la mise en page tout en
   gardant le <a> comme s'il était un enfant direct du <li> flex. */
.lbt-navbar-container ul.menu-content.top-menu > li.level-1 > div.icon-drop-mobile,
.lbt-navbar-container ul.menu-content.top-menu > li.level-1 .menu-sub-item {
  display: contents;
}
.lbt-navbar-container ul.menu-content.top-menu > li.level-1 a.hitIcon,
.lbt-navbar-container ul.menu-content.top-menu > li.level-1 > a {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 22px;
  color: #1e293b;
  text-decoration: none !important;
  text-transform: none;
  transition: color 0.2s ease;
}
.lbt-navbar-container ul.menu-content.top-menu > li.level-1 img.img-icon,
.lbt-navbar-container ul.menu-content.top-menu > li.level-1 a.hitIcon i,
.lbt-navbar-container ul.menu-content.top-menu > li.level-1 > a i {
  max-width: 24px;
  max-height: 24px;
  width: 24px;
  height: 24px;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1e293b;
  transition: transform 0.2s ease;
}
.lbt-navbar-container ul.menu-content.top-menu > li.level-1 a.hitIcon span,
.lbt-navbar-container ul.menu-content.top-menu > li.level-1 > a span {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0 !important;
}
.lbt-navbar-container ul.menu-content.top-menu > li.level-1:hover a.hitIcon,
.lbt-navbar-container ul.menu-content.top-menu > li.level-1:hover > a,
.lbt-navbar-container ul.menu-content.top-menu > li.level-1:hover a.hitIcon span,
.lbt-navbar-container ul.menu-content.top-menu > li.level-1:hover > a span {
  color: var(--lbt-orange) !important;
}
.lbt-navbar-container ul.menu-content.top-menu > li.level-1:hover img.img-icon,
.lbt-navbar-container ul.menu-content.top-menu > li.level-1:hover i {
  transform: translateY(-2px);
}
/* Le toggle "+" mobile existe sous 2 formes selon le rendu du module :
   un <span class="icon-drop-mobile"> (items catégorie avec sous-menu auto)
   à masquer sur desktop, et un <div class="icon-drop-mobile"> qui enveloppe
   le lien complet — géré ci-dessus via display:contents plutôt que masqué. */
.lbt-navbar-container ul.menu-content.top-menu > li.level-1 span.icon-drop-mobile {
  display: none !important;
  width: auto !important;
  float: none !important;
}
.lbt-navbar-container .mobile-plus {
  display: none !important;
}

/* Sous-menu (mega-dropdown) affiché au survol : couvre toute la largeur du
   menu (positionné par rapport à .container_hit_megamenu, cf. plus haut),
   pas juste la largeur de son <li> déclencheur. */
.lbt-navbar-container ul.menu-content.top-menu > li.level-1 > .menu-dropdown {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  border-radius: 0 0 6px 6px;
  border-top: 2px solid var(--lbt-orange);
}
.lbt-navbar-container .menu-dropdown li a {
  white-space: nowrap;
  color: #334155;
  font-size: 0.85rem;
  text-transform: none;
}
.lbt-navbar-container .menu-dropdown li a:hover {
  color: var(--lbt-orange);
}

/* Bande bleue sous le menu */
.lbt-nav-bottom-stripe {
  height: 22px;
  background-color: #0b69f6;
  width: 100%;
}



/* ==========================================================================
   2. HERO SLIDER SECTION
   ========================================================================== */
.lbt-hero-slider {
  position: relative;
  overflow: hidden;
  margin-bottom: 32px;
}
/* Chaque slide affiche sa propre image via une vraie balise <img>, EN FLUX
   NORMAL (pas de position:absolute, pas d'aspect-ratio/max-height forcé,
   pas d'object-fit:cover) : la largeur suit toujours 100% du conteneur et
   la hauteur suit automatiquement (height:auto), donc l'image entière est
   TOUJOURS visible, dans son ratio d'origine, à n'importe quelle largeur —
   plus aucun recadrage, donc plus aucun risque de couper le texte ou le
   produit selon l'écran. Le texte est positionné PAR-DESSUS via .container
   en position:absolute (cf. plus bas), la hauteur du slide étant désormais
   entièrement définie par l'image elle-même. */
.lbt-hero-slide {
  position: relative;
  background-color: var(--lbt-navy);
  color: #ffffff;
  text-decoration: none;
}
.lbt-hero-img {
  display: block;
  width: 100%;
  height: auto;
}
.lbt-hero-slide:hover,
.lbt-hero-slide:focus,
.lbt-hero-slide:visited {
  color: #ffffff;
  text-decoration: none;
}
@media (max-width: 991.98px) {
  /* Les flèches précédent/suivant de Bootstrap occupent chacune 15% de la
     largeur, plein cadre, icône centrée dans cette zone : sous 992px le
     texte plein-largeur entre directement en collision avec elles. On
     réserve donc cet espace de part et d'autre du texte. */
  .lbt-hero-slide > .container {
    padding-left: 60px;
    padding-right: 60px;
  }
}
@media (min-width: 992px) {
  /* En desktop le texte reste cantonné à la moitié gauche (col-lg-6) : seule
     la flèche "précédent" (bord gauche) peut encore le chevaucher. En
     pourcentage (pas en px fixe) car .container est lui-même centré avec sa
     propre marge automatique croissante selon la largeur d'écran (60px à
     1440px, 16px à 992px...) : un padding-left en % de sa boîte englobante
     (.lbt-hero-slide, pleine largeur — même référence que le "15%" des
     flèches Bootstrap) s'ajoute à cette marge et reste proportionnellement
     suffisant à n'importe quelle largeur desktop, pas seulement 1440px. */
  .lbt-hero-slide > .container {
    padding-left: 10%;
  }
}
.lbt-hero-slide > .container {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
}
.lbt-hero-title {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 15px;
  color: #ffffff;
  text-transform: uppercase;
}
.lbt-hero-price-ht {
  font-size: 2rem;
  font-weight: 700;
  color: var(--lbt-orange);
  margin-bottom: 2px;
}
.lbt-hero-price-ht span.old-price {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: line-through;
  margin-left: 10px;
}
.lbt-hero-price-ttc {
  font-size: 1.1rem;
  color: #e0e0e0;
  margin-bottom: 20px;
}
.lbt-hero-desc {
  font-size: 0.95rem;
  color: #d8e6f5;
  margin-bottom: 25px;
  max-width: 500px;
}
.lbt-btn-orange {
  background-color: var(--lbt-orange);
  color: #ffffff !important;
  font-weight: 700;
  padding: 12px 30px;
  border-radius: 6px;
  border: none;
  display: inline-block;
  text-decoration: none;
  transition: background-color 0.2s ease;
  text-transform: none;
}
.lbt-btn-orange:hover {
  background-color: var(--lbt-orange-hover);
  color: #ffffff;
}
@media (max-width: 991.98px) {
  /* Titre plus sobre sous 992px : à 2.2rem plein cadre il passait sur 2-3
     lignes et grignotait toute la hauteur du slide, laissant trop peu
     d'espace pour la description en dessous. */
  .lbt-hero-title {
    font-size: 1.7rem;
  }
}
@media (max-width: 767.98px) {
  .lbt-hero-title {
    font-size: 1.4rem;
  }
  /* Sous 768px, l'image (ratio natif, jamais recadrée) peut devenir très
     basse — pas assez de place pour superposer un titre/description sans
     les tronquer si une slide utilise un jour ces champs (l'image actuelle
     n'en a pas besoin, son texte est incrusté dans le visuel, mais le
     template doit rester correct pour n'importe quelle image). Le texte
     repasse donc en flux normal SOUS l'image plutôt qu'en superposition :
     aucune hauteur forcée, la page grandit simplement selon le contenu. */
  .lbt-hero-slide > .container {
    position: static;
    display: block;
    background-color: var(--lbt-navy);
    padding: 20px 24px;
  }
}

/* Puces de pagination : petits carrés (au lieu des barres Bootstrap par défaut) */
.lbt-hero-slider .carousel-indicators {
  z-index: 3;
  margin-bottom: 14px;
  gap: 6px;
}
.lbt-hero-slider .carousel-indicators [data-bs-target] {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.4);
  border: none;
  opacity: 1;
  margin-left: .1rem;
  margin-right: .1rem;
  text-indent: -9999px;
  transition: background-color 0.2s ease;
}
.lbt-hero-slider .carousel-indicators [data-bs-target].active {
  background-color: #ffffff;
}

/* ==========================================================================
   3. REASSURANCE 4-CARD BANNER
   ========================================================================== */
.lbt-reassurance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin-bottom: 32px;
}
@media (max-width: 991.98px) {
  .lbt-reassurance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .lbt-reassurance-grid { grid-template-columns: 1fr; }
}
.lbt-reassurance-card {
  background: linear-gradient(180deg, #00305f 0%, #005aa3 100%);
  border: 0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.lbt-reassurance-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lbt-blue);
  font-size: 1.4rem;
}
.lbt-reassurance-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.3;
}

/* ==========================================================================
   4. CATEGORY GRID (5 CARDS)
   ========================================================================== */
.lbt-cat-grid-row1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.lbt-cat-grid-row2 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 0;
}
/* Espacement homogène entre TOUTES les sections de la page d'accueil (32px) :
   ces sections utilisaient auparavant des utilitaires Bootstrap posés au cas
   par cas (mb-4, mb-5, my-2) ou des valeurs codées en dur différentes par
   section (8px à 48px selon les cas), d'où des écarts visuellement inégaux. */
.lbt-category-grid {
  margin-bottom: 32px;
}
@media (max-width: 768px) {
  .lbt-cat-grid-row1, .lbt-cat-grid-row2 { grid-template-columns: 1fr; }
}

.lbt-cat-card {
  background-color: var(--lbt-blue-light);
  border-radius: 12px;
  padding: 24px;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 356px;
}
.lbt-cat-card-banner {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  display: block;
  min-height: 0;
}
.lbt-cat-grid-row1 .lbt-cat-card-banner {
  aspect-ratio: 864 / 359;
}
.lbt-cat-grid-row2 .lbt-cat-card-banner {
  aspect-ratio: 566 / 360;
}
.lbt-cat-card-content {
  flex: 1;
  z-index: 2;
  position: relative;
  padding-right: 15px;
}
.lbt-cat-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--lbt-navy);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.lbt-cat-card-desc {
  font-size: 0.85rem;
  color: var(--lbt-text-muted);
  margin-bottom: 15px;
  line-height: 1.3;
}
.lbt-badge-promo {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: #ff0055;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  z-index: 3;
}

/* ==========================================================================
   5. PRODUCT SECTIONS & CARDS ("Les traceurs sélectionnés par nos experts")
   ========================================================================== */
.lbt-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--lbt-navy);
  text-align: center;
  /* Pas de margin-top : sinon, pour un titre premier enfant d'une section,
     ce haut de marge "fuit" à travers la section (sans padding/bordure) et
     s'ajoute au-dessus, faussant l'espacement uniforme entre sections. */
  margin: 0 0 25px;
}

/* Carrousel défilable au doigt/molette (scroll-snap horizontal) à toutes
   les largeurs pour ces sections ("Les traceurs sélectionnés" / "Meilleures
   ventes"), plutôt qu'une grille qui empile le reste des produits sur
   plusieurs lignes : 6 produits visibles ≥1200px, 4 entre 992-1199px
   (comme .lbt-partners-row), 3 en tablette (768-991px), 1 en mobile. */
.lbt-products-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 15px;
  padding-bottom: 4px;
  /* Pas de margin-bottom ici : géré au niveau de la section englobante
     (.lbt-featured-products / .lbt-bestsellers) pour un espacement uniforme
     entre sections de la home. */
  margin-bottom: 0;
}
.lbt-products-grid::-webkit-scrollbar {
  display: none;
}
.lbt-products-grid .lbt-product-card {
  flex: 0 0 calc((100% - 5 * 15px) / 6);
  min-width: 0;
  scroll-snap-align: start;
}
@media (max-width: 1199.98px) and (min-width: 992px) {
  .lbt-products-grid .lbt-product-card {
    flex: 0 0 calc((100% - 3 * 15px) / 4);
  }
}
@media (max-width: 991.98px) {
  .lbt-products-grid .lbt-product-card {
    flex: 0 0 calc((100% - 2 * 15px) / 3);
  }
}
@media (max-width: 767.98px) {
  .lbt-products-grid .lbt-product-card {
    flex: 0 0 100%;
  }
}
/* Flèches précédent/suivant du carrousel (cf. initProductsCarouselArrows
   dans custom.js) : même traitement visuel que .lbt-deal-carousel-arrow,
   généralisé puisque réutilisé par deux sections différentes. */
.lbt-products-carousel {
  position: relative;
}
.lbt-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  color: var(--lbt-navy);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
  z-index: 2;
  padding: 0;
}
.lbt-carousel-arrow:hover {
  color: var(--lbt-orange);
}
.lbt-carousel-prev {
  left: -16px;
}
.lbt-carousel-next {
  right: -16px;
}
@media (max-width: 576px) {
  .lbt-carousel-prev { left: -8px; }
  .lbt-carousel-next { right: -8px; }
}
/* Flèche masquée quand la liste tient entièrement dans la largeur visible
   (pas de défilement possible), ou quand on a atteint la limite de ce
   côté (début pour "précédent", fin pour "suivant") : classe posée par JS
   (updateArrowsVisibility dans initProductsCarouselArrows, custom.js). */
.lbt-carousel-arrow.lbt-carousel-arrow-hidden {
  display: none;
}

.lbt-product-card {
  background: #ffffff;
  border: 1px solid var(--lbt-border);
  border-radius: 16px;
  padding: 24px 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lbt-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}
.lbt-product-card .badge-tag-green{
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: var(--lbt-green-promo);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  z-index: 2;
}
.product-flags .badge{
  background-color: var(--lbt-green-promo);
  border: 1px solid var(--lbt-green-promo);
}
.lbt-product-card .badge-tag-red {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: var(--lbt-red-promo);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  z-index: 2;
}
.lbt-product-card-img {
  height: 180px;
  width: 100%;
  object-fit: contain;
  margin-bottom: 16px;
}
.lbt-product-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--lbt-navy);
  line-height: 1.3;
  margin-bottom: 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.lbt-product-stock-tag {
  font-size: 0.75rem;
  color: var(--lbt-text-muted);
  margin-bottom: 10px;
}
.lbt-product-ref {
  font-size: 0.8rem;
  color: var(--lbt-text-muted);
  margin-bottom: 14px;
}
.lbt-product-price-ht {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--lbt-orange);
}
.lbt-product-price-ht .old-price {
  font-size: 0.9rem;
  font-weight: 400;
  color: #9aa1ac;
  text-decoration: line-through;
  margin-left: 6px;
}
.lbt-product-price-ttc {
  font-size: 0.85rem;
  color: #9aa1ac;
  margin-bottom: 18px;
}
.lbt-product-card-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.lbt-btn-buy {
  flex: 1;
  background-color: var(--lbt-blue);
  color: #ffffff !important;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 11px 12px;
  border-radius: 8px;
  border: none;
  text-align: center;
  text-decoration: none;
}
.lbt-btn-buy:hover {
  background-color: #0852c4;
}
.lbt-btn-icon-secondary {
  position: static !important;
  top: auto !important;
  right: auto !important;
  z-index: auto !important;
  width: 42px;
  height: 42px;
  min-width: 42px;
  border: 1.5px solid #d7dbe2 !important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lbt-navy) !important;
  background: #fff !important;
  box-shadow: none !important;
  cursor: pointer;
}

/* Bouton wishlist (coeur) des listings produits : par défaut le module
   blockwishlist le positionne en overlay absolu sur l'image (coin haut
   droit). On le remet dans le flux normal pour qu'il s'affiche à côté du
   bouton "Acheter", au même format que .lbt-btn-icon-secondary.
   Doit être déclaré dans le même @layer que la règle du cœur qu'il
   surcharge (.wishlist-button-add vit dans le layer `ps-modules` du bundle
   compilé) : ce fichier est concaténé tel quel dans le CSS combiné du
   thème, hors de tout @layer, et les CSS Cascade Layers font perdre tout
   !important non-layered face à un !important dans un layer nommé, quelle
   que soit la spécificité — vérifié empiriquement en inspectant les styles
   calculés dans le navigateur. */
@layer ps-modules {
  .lbt-product-card-actions .wishlist-button-add {
    position: static !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
    flex-shrink: 0;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1.5px solid #d7dbe2 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #fff !important;
    box-shadow: none !important;
    cursor: pointer;
  }
  .lbt-product-card-actions .wishlist-button-add i {
    color: var(--lbt-navy) !important;
    font-size: 1.15rem;
  }
}

/* ==========================================================================
   6. VENTE DU MOIS (DEAL OF THE MONTH)
   ========================================================================== */
.lbt-deal-banner {
  background-color: var(--lbt-navy);
  padding: 40px 0;
  color: #ffffff;
  margin-bottom: 32px;
}
.lbt-deal-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 30px;
  align-items: center;
}
@media (max-width: 992px) {
  .lbt-deal-grid { grid-template-columns: 1fr; }
}
.lbt-deal-title {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 15px;
  text-transform: uppercase;
}
.lbt-deal-desc {
  font-size: 0.95rem;
  color: #cbd5e1;
  margin-bottom: 25px;
}
.lbt-deal-brands {
  margin-top: 40px;
  display: flex;
  gap: 25px;
  align-items: center;
}
.lbt-deal-brands img {
  height: 24px;
  width: auto;
  display: block;
}
.lbt-deal-product-desc {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lbt-deal-carousel {
  position: relative;
  min-width: 0;
}
/* Carrousel à défilement natif avec accroche (scroll-snap) : un seul
   produit visible à la fois (flex:0 0 100%), navigable au doigt/molette
   en plus des flèches/puces (cf. initDealCarousel dans custom.js, qui
   scrolle vers la carte visée au lieu de basculer un display:none).
   `min-width:0` indispensable à la fois sur le track et sur chaque carte :
   avant (bascule display:none), une seule carte restait dans le flux à la
   fois, donc sa largeur intrinsèque ne comptait jamais. Maintenant les 3
   cartes restent en permanence dans le flux (scroll-snap) ; sans
   min-width:0, un flex-item ne rétrécit jamais sous sa largeur de contenu
   (min-width:auto par défaut), donc le track (et la colonne de grille
   .lbt-deal-grid qui le contient) se dimensionnait sur la somme des 3
   cartes à leur taille naturelle — débordement de toute la page en
   largeur (bug vécu, confirmé en vérification). */
.lbt-deal-carousel-track {
  position: relative;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-width: 0;
}
.lbt-deal-carousel-track::-webkit-scrollbar {
  display: none;
}
.lbt-deal-product-card {
  background: #ffffff;
  color: var(--lbt-text-dark);
  border-radius: 12px;
  padding: 25px;
  display: flex;
  gap: 20px;
  align-items: center;
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}
@media (max-width: 576px) {
  .lbt-deal-product-card { flex-direction: column; }
}
.lbt-deal-product-img {
  width: 180px;
  height: 180px;
  object-fit: contain;
}
.lbt-deal-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  color: var(--lbt-navy);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
  z-index: 2;
  padding: 0;
}
.lbt-deal-carousel-arrow:hover {
  color: var(--lbt-orange);
}
.lbt-deal-carousel-prev {
  left: -16px;
}
.lbt-deal-carousel-next {
  right: -16px;
}
.lbt-deal-carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.lbt-deal-carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: width 0.2s ease, background-color 0.2s ease, border-radius 0.2s ease;
}
.lbt-deal-carousel-dot.active {
  width: 22px;
  border-radius: 4px;
  background: var(--lbt-orange);
}
@media (max-width: 576px) {
  .lbt-deal-carousel-prev { left: -8px; }
  .lbt-deal-carousel-next { right: -8px; }
}

/* ==========================================================================
   7. SERVICE BANNERS (REPARATION & MAINTENANCE)
   ========================================================================== */
.lbt-services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}
@media (max-width: 768px) {
  .lbt-services-grid { grid-template-columns: 1fr; }
}
/* Cartes devenues cliquables (lien configurable en admin) : text-decoration
   supprimé car ce sont maintenant des <a>, pas des <div>. */
.lbt-service-card-blue,
.lbt-service-card-orange {
  text-decoration: none;
}
.lbt-service-card-blue {
  background: #eff8ff;
  border: 1px solid #81b7e4;
  border-radius: 12px;
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.lbt-service-card-orange {
  background: #fdf2eb;
  border: 1px solid #fda069;
  border-radius: 12px;
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.lbt-service-icon-blue {
  width: 50px;
  height: 50px;
  min-width: 50px;
  background-color: #81b7e4;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.lbt-service-icon-orange {
  width: 50px;
  height: 50px;
  min-width: 50px;
  background-color: #fd8d4b;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.lbt-service-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--lbt-navy);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.lbt-service-desc {
  font-size: 0.85rem;
  color: var(--lbt-text-muted);
  line-height: 1.3;
}
@media (max-width: 767.98px) {
  /* Maquette mobile : carte centrée (icône au-dessus, titre et texte
     centrés) au lieu de la ligne icône-à-gauche/texte-à-droite desktop. */
  .lbt-service-card-blue,
  .lbt-service-card-orange {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 28px 22px;
  }
  .lbt-service-icon-blue,
  .lbt-service-icon-orange {
    width: 70px;
    height: 70px;
    min-width: 70px;
    font-size: 2rem;
  }
}

/* ==========================================================================
   8. BLOG SECTION
   ========================================================================== */
.lbt-blog-section {
  background: #fafafa;
  border: 1px solid var(--lbt-border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 32px;
}
.lbt-blog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.lbt-blog-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--lbt-navy);
  text-transform: uppercase;
}
.lbt-blog-link {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--lbt-text-muted);
  text-decoration: underline;
}
.lbt-blog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 768px) {
  .lbt-blog-grid { grid-template-columns: 1fr; }
}
/* Mobile : "Tous les articles" descend en bas du bloc (après la grille
   d'articles) au lieu de rester à côté du titre. `.lbt-blog-header` passe
   en `display:contents` pour que son titre et son lien deviennent des
   items directs de `.lbt-blog-section` (devenu flex column), replaçables
   indépendamment via `order` — même technique que `.lbt-cart-line-right`
   plus bas dans ce fichier. */
@media (max-width: 767.98px) {
  .lbt-blog-section {
    display: flex;
    flex-direction: column;
  }
  .lbt-blog-header {
    display: contents;
  }
  .lbt-blog-title {
    order: 1;
    margin-bottom: 20px;
  }
  .lbt-blog-grid {
    order: 2;
  }
  .lbt-blog-link {
    order: 3;
    margin-top: 20px;
    text-align: right;
  }
}
.lbt-blog-card {
  /*background: var(--lbt-gray-bg);*/
  border-radius: 10px;
  padding: 16px;
  display: flex;
  gap: 15px;
  align-items: stretch;
}
.lbt-blog-img {
  width: 110px;
  min-width: 110px;
  height: auto;
  align-self: stretch;
  object-fit: cover;
  border-radius: 6px;
}
.lbt-blog-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--lbt-navy);
  margin-bottom: 6px;
}
.lbt-blog-card-snippet {
  font-size: 0.8rem;
  color: var(--lbt-text-muted);
  line-height: 1.25;
  margin-bottom: 6px;
}
.lbt-blog-card-date {
  font-size: 0.72rem;
  color: #94a3b8;
}

/* ==========================================================================
   9. PARTNERS SECTION
   ========================================================================== */
.lbt-partners-container {
  text-align: center;
  margin-bottom: 32px;
  padding: 10px 0;
}
/* Carrousel défilable au doigt/molette (scroll-snap, pas de JS) sur tous
   les gabarits : 6 logos visibles ≥1200px, 4 entre 992-1199px, 3 en
   tablette (768-991px), 1 en mobile — au lieu d'une grille figée qui
   affichait tout en desktop. */
.lbt-partners-row {
  /* position:relative indispensable pour initPartnersAutoScroll (custom.js) :
     `jumpTo()` cible `items[index].offsetLeft`, qui se mesure par rapport au
     plus proche ancêtre positionné (offsetParent) — sans ce `position`, cet
     ancêtre est plus haut dans l'arbre (ex: .container), donc offsetLeft
     inclut aussi ce décalage externe et le retour au premier logo ne
     retombe jamais exactement à scrollLeft:0 (bug vécu, confirmé en
     diagnostic : décalage résiduel constant de 12 à 102px selon la largeur
     au lieu de 0). Avec ce `position`, le logo devient lui-même
     l'offsetParent de ses enfants directs, donc offsetLeft redevient
     relatif à SA propre origine de scroll. */
  position: relative;
  display: flex;
  align-items: center;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  column-gap: 20px;
  padding: 15px 0 4px;
  /* min-width:0 indispensable : sans lui, un flex-item (ici le conteneur
     lui-même, enfant de .container) ne rétrécit jamais sous la largeur de
     son contenu — même bug déjà rencontré et corrigé sur .lbt-deal-carousel
     et .lbt-products-grid (débordement horizontal de toute la page), cf.
     leurs commentaires plus haut dans ce fichier. */
  min-width: 0;
  /* Le thème parent pose `scroll-behavior:smooth` sur <html> : chaque
     micro-incrément de scrollLeft du défilement auto (initPartnersAutoScroll,
     ~60×/s) déclencherait alors sa propre transition fluide qui interrompt
     la précédente, d'où un défilement saccadé/brusque au lieu de continu.
     On force `auto` ici pour que chaque frame s'applique instantanément —
     c'est le requestAnimationFrame à 60fps qui produit la fluidité, pas
     l'interpolation CSS du scroll. */
  scroll-behavior: auto;
}
.lbt-partners-row::-webkit-scrollbar {
  display: none;
}
.lbt-partners-row > a,
.lbt-partners-row > span {
  flex: 0 0 calc((100% - 5 * 20px) / 6);
  min-width: 0;
  scroll-snap-align: start;
  text-align: center;
}
.lbt-partner-logo {
  max-width: 75%;
  width: auto;
  object-fit: contain;
  opacity: 1;
  transition: transform 0.2s;
  max-height: 100px;
}
.lbt-partner-logo:hover {
  transform: scale(1.05);
}
@media (max-width: 1199.98px) and (min-width: 992px) {
  .lbt-partners-row > a,
  .lbt-partners-row > span {
    flex: 0 0 calc((100% - 3 * 20px) / 4);
  }
}
@media (max-width: 991.98px) {
  .lbt-partners-row > a,
  .lbt-partners-row > span {
    flex: 0 0 calc((100% - 2 * 20px) / 3);
  }
}
@media (max-width: 767.98px) {
  .lbt-partners-row > a,
  .lbt-partners-row > span {
    flex: 0 0 100%;
  }
}
/* Défilement automatique continu (cf. custom.js, initPartnersAutoScroll) en
   mobile/tablette : le scroll-snap du carrousel manuel (desktop) empêcherait
   le défilement programmatique (scrollLeft en continu) d'être fluide, donc
   désactivé ici. */
@media (max-width: 991.98px) {
  .lbt-partners-row {
    scroll-snap-type: none;
  }
  .lbt-partners-row > a,
  .lbt-partners-row > span {
    scroll-snap-align: none;
  }
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
footer#footer {
  background-color: var(--lbt-navy-dark);
  color: #ffffff;
  padding-top: 0;
  padding-bottom: 30px;
}
footer#footer a {
  color: #cbd5e1;
  text-decoration: none;
}
footer#footer a:hover {
  color: #ffffff;
}
.lbt-footer-col-title {
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  font-size: 0.95rem;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Bannières services (Besoin de réparation / Contrats de maintenance) quand
   elles sont rendues dans le footer : fond blanc propre, pour rester
   lisibles (le titre est en navy foncé) au-dessus du footer navy foncé. */
.lbt-footer-services-wrap {
  background-color: #ffffff;
  padding: 30px 0;
}
.lbt-footer-services-wrap .lbt-services-grid {
  margin-bottom: 0;
}

/* Barre "réassurance" au-dessus du footer (module lbtthemeblocks) */
.lbt-footer-features-wrap {
  background-color: #ffffff;
  padding: 30px 15px 25px;
  border-bottom: 1px solid #eef2f7;
}
.lbt-footer-features-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 20px;
}
@media (max-width: 992px) {
  .lbt-footer-features-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
  .lbt-footer-features-row { grid-template-columns: 1fr; }
}
.lbt-footer-feature {
  color: var(--lbt-navy);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  min-width: 0;
}
.lbt-footer-feature-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0b69f6;
  font-size: 1.6rem;
}
.lbt-footer-feature-icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lbt-footer-feature-text {
  min-width: 0;
}
.lbt-footer-feature strong {
  display: block;
  font-size: 0.9rem;
  color: var(--lbt-navy);
}
.lbt-footer-feature p {
  font-size: 0.78rem;
  color: #64748b;
  margin: 4px 0 0;
  line-height: 1.3;
}

/* Colonne entreprise (module ps_contactinfo) */
.lbt-footer-company-line {
  font-size: 0.85rem;
  color: #cbd5e1;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.lbt-footer-company-line i {
  color: var(--lbt-orange);
  width: 16px;
  text-align: center;
  margin-top: 2px;
}
.lbt-footer-company-line a {
  color: #cbd5e1;
}
.lbt-footer-company-line a:hover {
  color: #fff;
}

/* Icônes réseaux sociaux (module ps_socialfollow) */
.lbt-footer-social {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  gap: 14px;
}
.lbt-footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1 !important;
  font-size: 1.15rem;
  transition: color 0.2s ease, transform 0.2s ease;
}
.lbt-footer-social-link:hover {
  color: var(--lbt-orange) !important;
  transform: translateY(-2px);
}

/* Colonnes de liens */
.lbt-footer-links {
  list-style: none;
  padding: 0;
  font-size: 0.85rem;
  line-height: 2;
  margin: 0;
}

/* Newsletter (module ps_emailsubscription) */
.lbt-footer-newsletter-block .lbt-footer-col-title {
  margin-bottom: 12px;
}
.lbt-footer-newsletter-form {
  display: flex;
  flex-direction: column;
}
.lbt-footer-newsletter-input {
  width: 100%;
  border: none;
  background-color: #fff;
  color: var(--lbt-text-dark);
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 0.85rem;
  margin-bottom: 12px;
}
.lbt-footer-newsletter-input::placeholder {
  color: #94a3b8;
}
.lbt-footer-newsletter-input:focus {
  outline: none;
  border-color: var(--lbt-orange);
}
.lbt-footer-newsletter-btn {
  width: 50%;
  background-color: var(--lbt-orange);
  color: #fff;
  border: none;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 6px;
  margin-top: 12px;
}
.lbt-footer-newsletter-btn:hover {
  background-color: var(--lbt-orange-hover);
}
@media (max-width: 1199.98px) and (min-width: 992px) {
  .lbt-footer-newsletter-btn {
    width: 65%;
  }
}
.lbt-footer-newsletter-note {
  font-size: 0.75rem;
  color: #94a3b8;
  line-height: 1.4;
  margin: 0;
}
.lbt-footer-newsletter-note a {
  color: #cbd5e1;
  text-decoration: underline;
}
/* En dessous de 992px (maintenant que les rubriques du footer sont en
   pleine largeur, cf. .lbt-footer-accordion-item), assez de place pour
   mettre le champ email et le bouton "S'abonner" sur une même ligne
   (comme la maquette), au lieu de les empiler verticalement ; le texte
   d'accompagnement repasse sur sa propre ligne en dessous. */
@media (max-width: 991.98px) {
  .lbt-footer-newsletter-form {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
  }
  .lbt-footer-newsletter-input {
    order: 1;
    flex: 1 1 auto;
    width: auto;
    margin-bottom: 0;
    background-color: #fff;
    color: var(--lbt-text-dark);
    border: none;
  }
  .lbt-footer-newsletter-btn {
    order: 2;
    width: auto;
    margin-top: 0;
    flex: 0 0 auto;
  }
  .lbt-footer-newsletter-note {
    order: 3;
    flex: 0 0 100%;
    margin-top: 4px;
  }
}

/* Bas de footer : moyens de paiement + copyright */
.lbt-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8rem;
  color: #cbd5e1;
}
.lbt-footer-payment-icons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.lbt-footer-payment-icons span {
  background: #fff;
  color: var(--lbt-navy);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.lbt-footer-payment-icons img {
  height: 25px;
  width: auto;
  display: block;
}
.lbt-footer-features-wrap{
  max-width: 100% !important;
}

/* ==========================================================================
   11. PAGE CATÉGORIE / LISTING (module ps_facetedsearch)
   ========================================================================== */

/* Fil d'Ariane */
.breadcrumb__wrapper {
  background: transparent !important;
  padding: 10px 0;
}
.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
  color: var(--lbt-text-muted);
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  margin-right: 6px;
  color: var(--lbt-border);
}
.breadcrumb-link {
  color: var(--lbt-blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.breadcrumb-link:hover {
  text-decoration: underline;
}
.breadcrumb-item:first-child .breadcrumb-link::before {
  /* Logo (pas l'icône "maison" générique précédente) : plusieurs couleurs,
     donc `background-image` plutôt qu'un `mask` (qui ne peut appliquer
     qu'une seule `background-color`). */
  content: "";
  width: 18px;
  height: 18px;
  background: url("../img/logo-mark.svg") center / contain no-repeat;
}
.breadcrumb-item:first-child .breadcrumb-link span {
  /* "Accueil" masqué visuellement (le logo suffit) mais toujours présent
     pour les lecteurs d'écran — technique `.visually-hidden` standard,
     pas juste display:none. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* En-tête de catégorie : titre + description à gauche, bannière à droite */
.lbt-category-header {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
  align-items: center;
  margin: 25px 0 30px;
}
.lbt-category-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--lbt-navy);
  margin-bottom: 12px;
}
.lbt-category-desc {
  font-size: 0.9rem;
  color: var(--lbt-text-muted);
  line-height: 1.6;
}
.lbt-category-desc a {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 18px;
  border: 1.5px solid var(--lbt-blue);
  color: var(--lbt-blue);
  border-radius: 30px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.lbt-category-desc a:hover {
  background-color: var(--lbt-blue);
  color: #ffffff;
}
.lbt-category-header-banner {
  background-color: var(--lbt-navy);
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
}
.lbt-category-header-banner img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 991.98px) {
  .lbt-category-header {
    grid-template-columns: 1fr;
  }
  /* La maquette tablette/mobile affiche la bannière AVANT le titre/texte,
     alors que le HTML (partagé avec le desktop) a le texte en premier. */
  .lbt-category-header-banner {
    order: 1;
  }
  .lbt-category-header-text {
    order: 2;
  }
}

/* Barre résultats : compteur + tri + bascule grille/liste */
.products__selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--lbt-border);
  margin-bottom: 20px;
}
.products__count {
  font-size: 0.85rem;
  color: var(--lbt-text-muted);
}
.products__sort {
  display: flex;
  align-items: center;
  gap: 15px;
}
.products__sort-label {
  font-size: 0.85rem;
  color: var(--lbt-text-muted);
}
.products__sort-dropdown-button {
  border: 1px solid var(--lbt-border);
  border-radius: 6px;
  background: #fff;
  color: var(--lbt-navy);
  font-size: 0.85rem;
  padding: 6px 12px;
}
.lbt-view-toggle {
  display: flex;
  gap: 6px;
}
.lbt-view-toggle button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--lbt-border);
  border-radius: 6px;
  background: #fff;
  color: var(--lbt-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lbt-view-toggle button.active {
  border-color: var(--lbt-blue);
  color: var(--lbt-blue);
}

/* Bouton "Filtres" (< 992px uniquement : la sidebar de filtres est toujours
   visible à partir de 992px, cf. #search_filters_wrapper plus bas). Replie/
   déplie la sidebar EN LIGNE via Bootstrap Collapse, sans la masquer avec
   un offcanvas (contrairement au comportement d'origine du thème parent
   Hummingbird) : le fil d'Ariane, la bannière et le titre restent visibles
   au-dessus, comme la maquette. */
.lbt-catalog-filter-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  color: var(--lbt-navy);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
}
.lbt-catalog-filter-toggle-chevron {
  font-size: 1.2rem;
  transition: transform 0.2s ease;
}
.lbt-catalog-filter-toggle:not(.collapsed) .lbt-catalog-filter-toggle-chevron {
  transform: rotate(0.5turn);
}

/* En dessous de 992px : bouton Filtres + compteur sur 1ère ligne, bascule
   grille/liste sur sa propre ligne, tri sur sa propre ligne — comme la
   maquette. .products__sort passe en display:contents pour que son
   contenu (label+dropdown de tri, bascule grille/liste) rejoigne
   directement la grille flex de .products__selection et puisse être
   réordonné/mis en ligne pleine largeur indépendamment. */
@media (max-width: 991.98px) {
  .products__selection {
    justify-content: flex-start;
  }
  .lbt-catalog-filter-toggle {
    display: flex;
    order: 1;
  }
  .products__count {
    order: 2;
    margin-left: auto;
  }
  .products__sort {
    display: contents;
  }
  .lbt-view-toggle {
    order: 3;
    flex: 1 0 100%;
  }
  .products__sort-label {
    order: 4;
  }
  .products__sort-dropdown {
    order: 4;
  }
}

/* Grille catalogue : 4 colonnes (distincte de la grille home en 6 colonnes) */
.lbt-catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}
@media (max-width: 1199.98px) and (min-width: 992px) { .lbt-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991.98px) { .lbt-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .lbt-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .lbt-catalog-grid { grid-template-columns: 1fr; } }
/* Carte produit listing, mobile : passage en grille 3 colonnes pour que le
   bouton "Acheter" soit vraiment centré dans la largeur totale de la
   rangée (colonne du milieu), et le cœur wishlist poussé à droite (3e
   colonne), au lieu d'être centrés ensemble comme un seul groupe flex. La
   1re colonne reste vide, c'est juste un contrepoids symétrique à la 3e
   pour que la colonne du milieu (donc le bouton) soit bien au centre. */
@media (max-width: 767.98px) {
  .lbt-product-card-actions {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .lbt-product-card-actions form,
  .lbt-product-card-actions > .lbt-btn-buy {
    grid-column: 2;
    justify-self: center;
  }
  .lbt-product-card-actions .lbt-btn-buy.w-100 {
    width: auto !important;
    min-width: 140px;
  }
  .lbt-product-card-actions .lbt-product-wishlist {
    grid-column: 3;
    justify-self: end;
  }
}
/* Vue liste (bascule JS) : carte en ligne horizontale */
.lbt-catalog-grid.lbt-view-list {
  display: flex;
  flex-direction: column;
}
.lbt-catalog-grid.lbt-view-list .lbt-product-card {
  flex-direction: row;
  align-items: center;
  gap: 20px;
}
.lbt-catalog-grid.lbt-view-list .lbt-product-card-img {
  width: 120px;
  height: 100px;
  flex-shrink: 0;
  margin-bottom: 0;
}
.lbt-catalog-grid.lbt-view-list .lbt-product-card-title {
  height: auto;
  -webkit-line-clamp: unset;
}

/* Produits récemment consultés (module ps_viewedproduct) */
.lbt-viewed-products {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--lbt-border);
}
.lbt-section-title-sm {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 0 0 20px;
}

/* Pagination */
.pagination__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 40px;
}
.pagination__number {
  font-size: 0.82rem;
  color: var(--lbt-text-muted);
}
.pagination {
  display: flex;
  list-style: none;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.pagination .page-link {
  width: 34px;
  height: 34px;
  border: 1px solid var(--lbt-border);
  border-radius: 50%;
  background: #fff;
  color: var(--lbt-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
}
.pagination .page-item.active .page-link {
  background-color: var(--lbt-blue);
  border-color: var(--lbt-blue);
  color: #ffffff;
}
.pagination .page-link.previous,
.pagination .page-link.next {
  width: auto;
  border-radius: 20px;
  padding: 0 14px;
  gap: 4px;
}
.pagination .page-item.disabled .page-link {
  opacity: 0.4;
  cursor: default;
}

/* Colonne de gauche (facets, module ps_facetedsearch — surcharge Hummingbird
   utilisant des accordéons Bootstrap + classes BEM "search-filters__*",
   confirmées en inspectant le rendu réel plutôt que la doc du module). */
#left-column {
  font-size: 0.88rem;
}
#search_filters_wrapper,
.search-filters {
  background: #fff;
  padding: 20px 0;
}
/* #search_filters_wrapper porte la classe Bootstrap .collapse (repliée par
   défaut en dessous de 992px, ouverte via le bouton Filtres). À partir de
   992px elle doit rester TOUJOURS visible quel que soit l'état du
   composant Collapse (pas de bouton pour la refermer à cette taille) :
   ne nécessite pas de !important, une règle non-layered gagne déjà face à
   la règle Bootstrap `.collapse:not(.show){display:none}` (elle-même sans
   !important, dans un @layer nommé du bundle compilé) — même recette que
   l'accordéon du footer et le menu mobile. */
@media (min-width: 992px) {
  #search_filters_wrapper.collapse {
    display: block;
  }
}
@media (max-width: 991.98px) {
  #search_filters_wrapper {
    border-top: 1px solid var(--lbt-border);
    margin-top: 4px;
  }
}
.left-block__title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--lbt-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}
/* Filtres empilés (accordéon) : repliés par défaut, sauf section active */
.search-filters__section {
  border-bottom: 1px solid var(--lbt-border);
  padding: 20px 0;
}
.search-filters__section:first-child {
  padding-top: 0;
}
.search-filters__section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.search-filters__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0 0 22px;
  cursor: pointer;
}
.search-filters__section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 0;
  text-align: left;
}
.search-filters__toggle-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid #6b7280;
  border-radius: 50%;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}
.search-filters__toggle-icon::before {
  content: "\2212"; /* − */
  /* Le glyphe "−"/"+" n'est pas centré verticalement dans sa propre boîte
     de ligne (line-height:16px = font-size:16px) malgré le flex-centrage du
     cercle parent : décalage vers le bas d'environ 1,35px, mesuré. */
  margin-top: -1.5px;
}
.search-filters__section-header.collapsed .search-filters__toggle-icon::before {
  content: "+";
}
.search-filters__section-body {
  padding: 0;
}
.search-filters__section-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.search-filters__section-list li {
  margin-bottom: 18px;
}
.search-filters__section-list li:last-child {
  margin-bottom: 0;
}
/* En tablette (768-991px), les cases à cocher passent sur 2 colonnes
   (comme la maquette) ; en desktop (sidebar étroite, ≥992px) et en mobile
   (<768px), une seule colonne. Le slider de prix (pas de <li>, cf. plus
   bas) n'est jamais concerné. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .search-filters__section-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 18px;
  }
  .search-filters__section-list li {
    margin-bottom: 0;
  }
}
.search-filters__item {
  display: flex;
  align-items: center;
  width: 100%;
}
.search-filters__form-check {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.search-filters__form-check .form-check-input {
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid #b0b7c3;
  border-radius: 3px;
  flex-shrink: 0;
}
.search-filters__form-check .form-check-input:checked {
  background-color: var(--lbt-blue);
  border-color: var(--lbt-blue);
}
.search-filters__form-label {
  margin: 0;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  display: flex;
}
.search-filters__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 1;
  color: #2b2f36;
  font-size: 0.9rem;
  text-decoration: none;
}
.search-filters__item.active .search-filters__link,
.search-filters__link:hover {
  color: var(--lbt-blue);
}
.search-filters__magnitude {
  color: #2b2f36;
  font-size: 0.78rem;
  flex-shrink: 0;
}
.search-filters__clear,
#_desktop_search_filters_clear_all {
  margin-bottom: 14px;
}
.search-filters__clear .btn,
#_desktop_search_filters_clear_all .btn {
  font-size: 0.78rem;
  color: var(--lbt-text-muted);
  border: none;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Slider de prix (noUiSlider, cf. themes/hummingbird/src/js/modules/facetedsearch) */
.search-filters__slider-container {
  padding: 8px 4px 0;
}
.search-filters__slider {
  height: 4px;
  margin: 8px 6px 14px;
}
.search-filters__slider .noUi-target {
  background: var(--lbt-border);
  border: none;
  border-radius: 2px;
  box-shadow: none;
  height: 4px;
}
.search-filters__slider .noUi-connect {
  background: var(--lbt-blue);
}
.search-filters__slider .noUi-handle {
  width: 16px;
  height: 16px;
  right: -8px;
  top: -6px;
  border-radius: 50%;
  border: 2px solid var(--lbt-blue);
  background: #fff;
  box-shadow: none;
  cursor: pointer;
}
.search-filters__slider .noUi-handle::before,
.search-filters__slider .noUi-handle::after {
  display: none;
}
.search-filters__slider-values {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--lbt-navy);
  margin-bottom: 14px;
}

/* ==========================================================================
   12. FICHE PRODUIT
   ========================================================================== */
.lbt-product-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 25px 0 40px;
}
@media (max-width: 991.98px) {
  .lbt-product-top { grid-template-columns: 1fr; }
}

.lbt-product-gallery .product__images {
  padding: 20px;
}
.lbt-product-gallery .product__thumbnails-list {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.lbt-product-gallery .product__thumbnail {
  width: 64px;
  height: 64px;
  border: 1px solid var(--lbt-border);
  border-radius: 8px;
  padding: 4px;
  background: #fff;
  cursor: pointer;
}
.lbt-product-gallery .product__thumbnail.active {
  border-color: var(--lbt-blue);
}
.lbt-product-gallery .product__thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 767.98px) {
  /* Maquette mobile : galerie swipe-only, pas de bande de vignettes. */
  .lbt-product-gallery .product__thumbnails {
    display: none;
  }
}

.lbt-product-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--lbt-navy);
  margin-bottom: 10px;
}
.lbt-product-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--lbt-text-muted);
  margin-bottom: 14px;
}
.lbt-product-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.lbt-product-meta-row-rating {
  justify-content: flex-start;
  gap: 10px;
}
.lbt-product-meta-ref {
  color: var(--lbt-text-muted);
  font-weight: 700;
}
.lbt-product-meta-right {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.lbt-product-meta-condition {
  color: var(--lbt-text-dark);
  font-weight: 600;
}
@media (max-width: 767.98px) {
  /* Maquette mobile : "Référence" seule sur sa ligne, "État" + garantie sur
     la suivante (au lieu d'une seule ligne qui déborde à cette largeur). */
  .lbt-product-meta-row:not(.lbt-product-meta-row-rating) {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .lbt-product-meta-right {
    margin-left: 0;
  }
}
.lbt-badge-warranty {
  background-color: var(--lbt-orange);
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 5px 12px;
  border-radius: 4px;
  white-space: nowrap;
  max-width: 100%;
}
@media (max-width: 767.98px) {
  .lbt-badge-warranty {
    white-space: normal;
  }
}
/* Pastille "Derniers articles en stock" : même gabarit que les autres
   badges (.lbt-badge-warranty), fond bleu dédié — case à cocher indépendante
   dans l'onglet "Garantie & pack offert" (module lbtproductwarranty),
   purement déclarative (pas liée à la quantité réelle). `display:block` +
   `width:fit-content` : chacun sur sa propre ligne (un <div> inline-block
   restait sur la même ligne que le badge "pack offert" juste au-dessus,
   bug vécu) SANS pour autant s'étirer sur toute la largeur du bloc. */
.lbt-badge-last-items {
  display: block;
  width: fit-content;
  background-color: var(--lbt-blue);
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 5px 12px;
  border-radius: 4px;
  white-space: nowrap;
  max-width: 100%;
  margin-bottom: 10px;
}
@media (max-width: 767.98px) {
  .lbt-badge-last-items {
    white-space: normal;
  }
}
/* Bandeau "Produit arrêté par le constructeur" : fond rouge, sur sa propre
   ligne mais PAS pleine largeur (comme les autres badges, cf. demande
   explicite — contrairement à une version précédente qui l'étirait). */
.lbt-badge-discontinued {
  display: block;
  width: fit-content;
  max-width: 100%;
  background-color: var(--lbt-red-promo);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 10px 16px;
  border-radius: 6px;
  margin-bottom: 14px;
}
.lbt-product-meta-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Même remarque de @layer que .lbt-product-card-actions .wishlist-button-add
   ci-dessus : nécessaire pour battre le !important du cœur dans `ps-modules`. */
@layer ps-modules {
  .lbt-meta-wishlist .wishlist-button-add {
    position: static !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border: 1.5px solid #d7dbe2 !important;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lbt-navy) !important;
    background: #fff !important;
    box-shadow: none !important;
    cursor: pointer;
  }
  .lbt-meta-wishlist .wishlist-button-add i {
    color: var(--lbt-navy) !important;
    font-size: 0.95rem;
  }
}
.lbt-stars {
  --lbt-rating: 0;
  display: inline-block;
  position: relative;
  font-size: 0.9rem;
  line-height: 1;
  font-family: sans-serif;
  color: #e2e8f0;
}
.lbt-stars::before {
  content: "★★★★★";
}
.lbt-stars::after {
  content: "★★★★★";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--lbt-rating) / 5 * 100%);
  overflow: hidden;
  color: #f5a623;
  white-space: nowrap;
}

/* Grid (pas flow inline), cf. product-prices.tpl : chaque montant est son
   propre item nommé, pour pouvoir réordonner HT/TTC/ancien-prix/économie par
   simple `grid-template-areas` selon le breakpoint sans dupliquer le HTML. */
.lbt-product-prices {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-areas: "ht old savings" "ttc ttc ttc";
  /* "end" (bas) plutôt que "baseline" : avec des tailles de police très
     différentes entre le prix HT (1.7rem) et l'ancien prix barré (1rem),
     un alignement sur la ligne de base fait flotter le texte le plus
     petit au-dessus du bas du texte le plus grand au lieu d'être aligné
     avec lui (bug vécu, visible sur la maquette). */
  align-items: end;
  column-gap: 10px;
  row-gap: 12px;
  margin-bottom: 16px;
}
.lbt-price-ht-amount {
  grid-area: ht;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--lbt-orange);
}
.lbt-price-old {
  grid-area: old;
  font-size: 1rem;
  font-weight: 400;
  color: #9aa1ac;
  text-decoration: line-through;
}
.lbt-price-savings {
  grid-area: savings;
  display: inline-block;
  background-color: var(--lbt-orange);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 4px;
  align-self: end;
  width: fit-content;
}
@media (max-width: 1199.98px) and (min-width: 992px) {
  .lbt-price-savings {
    font-size: 0.6rem;
  }
}
.lbt-price-ttc {
  grid-area: ttc;
  font-size: 1.1rem;
  color: #000000;
  font-weight: 600;
}
@media (max-width: 767.98px) {
  /* Maquette mobile : HT + TTC sur la même ligne, ancien prix et économie
     chacun isolés sur leur propre ligne pleine largeur en dessous. */
  .lbt-product-prices {
    grid-template-columns: auto 1fr;
    grid-template-areas: "ht ttc" "old old" "savings savings";
  }
  .lbt-price-ttc {
    text-align: right;
  }
  /*.lbt-price-savings {
     width: auto; 
  }*/
}

/* Bandeau bleu uni (icône + texte blanc), largeur au contenu — PAS pleine
   largeur du bloc, maquette fournie par le client — remplace l'ancien
   style "chip" discret (fond bleu clair, texte bleu, sans icône). */
.lbt-pack-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  background-color: var(--lbt-blue);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 12px 16px;
  border-radius: 8px;
  text-decoration: none;
  margin: 10px 0;
}
.lbt-pack-badge .material-icons {
  font-size: 1.15rem;
}

/* Flag "Nouveau" (produit récent, .product-flags .badge.new) en vert,
   distinct des autres flags (promo, pack...) restés en bleu primaire natif.
   !important nécessaire : la règle du cœur (.product-flags .badge:not(.discount))
   est elle-même en !important. Doit en plus être déclarée dans le même
   @layer (`bs-base`, celui du cœur) : un !important hors layer est TOUJOURS
   perdant face à un !important dans un layer nommé, quelle que soit la
   spécificité ou l'ordre dans le fichier — même piège déjà rencontré et
   corrigé pour .wishlist-button-add plus haut dans ce fichier (cf. son
   commentaire), vérifié empiriquement ici aussi (couleur restée bleue tant
   que la règle n'était pas dans ce layer). */
@layer bs-base {
  .product-flags .badge.new {
    background-color: var(--lbt-green-promo) !important;
  }
}

.lbt-description-short {
  font-size: 0.9rem;
  color: var(--lbt-text-dark);
  line-height: 1.6;
  margin: 14px 0;
}
.lbt-specs-link {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--lbt-blue);
  text-decoration: none;
  margin-bottom: 20px;
}
.lbt-specs-link:hover {
  text-decoration: underline;
}

/* Options produit (déclinaisons natives : installation / garantie / reprise)
   Chaque groupe est sa propre carte bordée (comme la maquette) ; le libellé
   et les pills vivent dans UNE seule ligne flex qui s'enroule naturellement :
   quand tout tient sur une ligne (1 seule option payante), libellé + pills
   restent côte à côte ; quand ça ne tient pas (plusieurs options), le
   libellé se retrouve seul en tête et les pills repassent à la ligne. */
.product__variants.js-product-variants {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}
.product-variant {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  border: 1px solid var(--lbt-border);
  border-radius: 10px;
  padding: 18px;
  margin: 0;
}
.product-variant__label {
  flex: 0 0 auto;
}
.product-variant__legend {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--lbt-text-dark);
  margin: 0;
  padding: 0;
}
.product-variant__selected {
  display: none;
}
.product-variant__radios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
}
.product-variant__radio {
  margin: 0;
  padding: 0;
}
.product-variant__radio .form-check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.product-variant__radio label {
  display: inline-block;
  background: #fff;
  border: 1.5px solid var(--lbt-border);
  color: var(--lbt-text-dark);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 6px;
  cursor: pointer;
  margin: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.lbt-attribute-price-impact {
  font-weight: 400;
  opacity: 0.85;
}
.product-variant__radio .form-check-input:checked + label {
  background-color: #fff;
  border-color: var(--lbt-blue);
  border-width: 2px;
  color: var(--lbt-text-dark);
}
.product-variant__radio .form-check-input:focus-visible + label {
  outline: 2px solid var(--lbt-blue);
  outline-offset: 2px;
}

.lbt-financing-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 0.8rem;
  color: var(--lbt-text-dark);
  margin-bottom: 12px;
  padding: 10px 14px;
}
.lbt-financing-banner span {
  width: 60%;
}
.lbt-financing-btn {
  flex-shrink: 0;
  background: #fff;
  border: 1.5px solid var(--lbt-text-dark);
  color: var(--lbt-text-dark);
  font-weight: 600;
  font-size: 0.78rem;
  padding: 7px 14px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
}
.lbt-financing-btn:hover {
  background-color: var(--lbt-navy);
  border-color: var(--lbt-navy);
  color: #fff;
}
@media (max-width: 767.98px) {
  .lbt-financing-banner {
    flex-direction: column;
    align-items: stretch;
  }
  .lbt-financing-banner span {
    width: 100%;
  }
  .lbt-financing-btn {
    width: 100%;
    text-align: center;
  }
}

.lbt-availability {
  font-size: 0.78rem;
  margin-bottom: 10px;
  padding-bottom: 8px;
}
.lbt-availability-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.lbt-stock-status {
  color: var(--lbt-text-dark);
}
.lbt-delivery-promise {
  color: var(--lbt-text-muted);
  font-size: 0.76rem;
  text-decoration: underline;
}
.lbt-availability .product__availability-status {
  color: var(--lbt-text-dark);
  font-weight: 600;
  margin-top: 4px;
}
.lbt-delivery-infos {
  color: var(--lbt-text-muted);
  font-size: 0.76rem;
  margin-top: 3px;
}

.lbt-qty-add-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--lbt-border);
  border-radius: 10px;
  padding: 10px 14px;
}
.lbt-qty-add-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.lbt-qty-add-left .btn-square-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
}
.lbt-qty-add-left .quantity-button__group .form-control {
  width: 38px !important;
  height: 30px !important;
  padding: 0 4px !important;
  font-size: 0.82rem;
}
.lbt-qty-add-left .quantity-button__group .material-icons {
  font-size: 1rem;
}
.lbt-qty-add-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lbt-total-block {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 1rem;
  color: var(--lbt-text-dark);
  font-weight: 700;
}
.lbt-total-value {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--lbt-orange);
}
.lbt-btn-add-to-cart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--lbt-blue);
  border: none;
  color: #fff !important;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 9px 20px;
  border-radius: 8px;
}
.lbt-btn-add-to-cart:hover {
  background-color: #0852c4;
}
.lbt-btn-add-to-cart .material-icons {
  font-size: 1rem;
}
@media (max-width: 767.98px) {
  /* Maquette mobile : stepper seul (centré), Total centré dessous, bouton
     "Ajouter au panier" pleine largeur — au lieu du flex-wrap desktop qui
     laisse juste le bloc droit repasser à la ligne, aligné à gauche. */
  .lbt-qty-add-row {
    flex-direction: column;
    align-items: center;
  }
  .lbt-qty-add-left {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }
  .lbt-qty-add-right {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .lbt-total-block {
    justify-content: center;
    font-size: 1.1rem;
  }
  .lbt-btn-add-to-cart {
    width: 100%;
    justify-content: center;
  }
}

/* Onglets fiche produit (pleine largeur du .container de la page, pas du
   navigateur : mêmes marges gauche/droite que le reste du contenu).
   ≥768px : barre d'onglets horizontale (.lbt-tabs-nav), un panneau
   exclusif. <768px : bandeaux empilés TOUJOURS visibles (.lbt-tab-toggle,
   sans icône +/-, pas de nav séparée) — reproduit la maquette fournie :
   bandeau actif orange avec son contenu juste en dessous, bandeaux
   inactifs navy, simple filet entre eux. Un seul état "actif" exclusif
   partagé entre les deux présentations (cf. JS).
   IMPORTANT : les styles de base (mobile) ci-dessous doivent rester AVANT
   le `@media (min-width:768px)` qui les surcharge — à spécificité égale,
   c'est l'ordre dans la feuille qui tranche, pas la media query seule
   (bug déjà vécu sur cette même section : une règle de base placée APRÈS
   le bloc ≥768px l'emportait à toutes les largeurs). */
.lbt-product-tabs {
  margin-top: 20px;
  margin-bottom: 45px;
}
.lbt-tabs-nav {
  display: none;
}
.lbt-tabs-content {
  border: 1px solid var(--lbt-border);
  border-radius: 5px;
  overflow: hidden;
}
.lbt-tab-pane + .lbt-tab-pane {
  border-top: 1px solid var(--lbt-border);
}
.lbt-tab-toggle {
  display: block;
  width: 100%;
  background-color: var(--lbt-navy);
  color: #fff;
  border: none;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  padding: 14px 22px;
  cursor: pointer;
}
.lbt-tab-pane.active .lbt-tab-toggle {
  background-color: var(--lbt-orange);
}
.lbt-tab-body {
  padding: 24px 22px;
}
@media (min-width: 768px) {
  .lbt-tabs-nav {
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }
  /* Les vrais enfants flex de .lbt-tabs-nav sont les <li>, pas les boutons :
     flex:1 doit être posé ici pour que chaque onglet occupe une part égale
     et dynamique de la largeur (min-width:0 autorise le rétrécissement, le
     texte passe sur 2 lignes plutôt que de déborder). `align-items:stretch`
     (valeur par défaut du flex container) rend déjà tous les <li> aussi
     hauts que le plus grand ; encore faut-il que le <button> à l'intérieur
     remplisse lui-même toute cette hauteur (height:100%, sinon il garde sa
     hauteur naturelle d'une seule ligne et laisse un vide en bas des
     onglets plus courts — bug vécu, bandeaux navy visiblement plus bas que
     le bandeau actif sur 2 lignes). */
  .lbt-tabs-nav > li {
    flex: 1 1 0;
    min-width: 0;
  }
  .lbt-tab-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--lbt-navy);
    color: rgba(255, 255, 255, 0.7);
    border: none;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 14px 22px;
    cursor: pointer;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }
  .lbt-tab-link.active {
    background-color: var(--lbt-orange);
    color: #fff;
  }
  /* Un seul panneau exclusif visible : .lbt-tab-pane entier masqué (pas
     seulement son corps), pour ne pas laisser traîner le filet de
     séparation (.lbt-tab-pane + .lbt-tab-pane) des panneaux inactifs. */
  .lbt-tab-pane {
    display: none;
  }
  .lbt-tab-pane.active {
    display: block;
  }
  .lbt-tab-toggle {
    display: none;
  }
  .lbt-tabs-content {
    border-radius: 0 0 5px 5px;
  }
}
/* Tablette (768-991.98px) : identique au desktop (colonnes égales pleine
   largeur), aucune règle spécifique nécessaire — hérite de .lbt-tabs-nav /
   .lbt-tab-link du bloc ≥768px ci-dessus. */

.lbt-features-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.lbt-features-table tr:nth-child(odd) {
  background-color: #bfced7;
}
.lbt-features-table th,
.lbt-features-table td {
  padding: 10px 14px;
  text-align: left;
}
.lbt-features-table th {
  width: 30%;
  /* color: var(--lbt-text-muted); */
  font-weight: 600;
}
.lbt-features-table td {
  color: var(--lbt-text-dark);
}

.lbt-attachments {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .lbt-attachments {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.lbt-attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--lbt-blue);
  text-decoration: none;
  font-size: 0.88rem;
}
.lbt-attachment:hover {
  text-decoration: underline;
}
.lbt-attachment-size {
  color: var(--lbt-text-muted);
  font-size: 0.78rem;
}

/* Liste des consommables (pas <table> : une ligne de table ne peut que
   défiler horizontalement sous 992px, jamais se réorganiser en carte). Ligne
   desktop en flex (mimique les colonnes du tableau d'origine) ; tablette :
   2 blocs côte à côte (infos produit | stepper+bouton+total) ; mobile : tout
   empilé sur une colonne, bouton pleine largeur. Cf. product.tpl. */
.lbt-consumables-header {
  display: none;
}
.lbt-consumables-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}
.lbt-consumable-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--lbt-border);
}
.lbt-consumable-main {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1 1 auto;
  min-width: 0;
}
.lbt-consumable-name {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--lbt-navy);
  text-decoration: none;
  font-weight: 600;
  flex: 1 1 auto;
  min-width: 0;
}
.lbt-consumable-name img {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.lbt-consumable-ref {
  flex: 0 0 auto;
  color: var(--lbt-text-muted);
  font-size: 0.78rem;
}
.lbt-consumable-price {
  flex: 0 0 auto;
  text-align: right;
}
.lbt-consumable-ttc {
  color: var(--lbt-text-muted);
  font-size: 0.78rem;
}
.lbt-consumable-side {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
}
.lbt-consumable-total {
  text-align: right;
}
@media (min-width: 992px) {
  /* Même grille de colonnes partagée par l'en-tête ET les lignes : avant,
     l'en-tête définissait 5 colonnes indépendantes (flex) alors que chaque
     ligne n'était composée que de 2 blocs imbriqués (.lbt-consumable-main /
     .lbt-consumable-side) dont les largeurs internes ne correspondaient pas
     à celles de l'en-tête — d'où le désalignement. `display:contents` sur
     ces 2 blocs les retire de la mise en page (leurs enfants deviennent des
     items directs de la grille), afin que chaque colonne de donnée tombe
     exactement sous son en-tête. */
  .lbt-consumables-header,
  .lbt-consumable-row {
    display: grid;
    grid-template-columns: 1fr 140px 110px 106px 150px 140px;
    align-items: center;
    gap: 16px;
  }
  .lbt-consumable-main,
  .lbt-consumable-side {
    display: contents;
  }
  .lbt-consumables-header {
    padding: 0 0 10px;
    border-bottom: 1px solid var(--lbt-border);
    color: var(--lbt-text-muted);
    font-weight: 600;
    font-size: 0.85rem;
  }
  .lbt-consumables-header-qty,
  .lbt-qty-stepper {
    justify-self: center;
  }
  .lbt-consumables-header-price,
  .lbt-consumables-header-total {
    text-align: right;
  }
}
@media (max-width: 991.98px) {
  /* Maquette tablette : bloc infos (image+nom / réf / prix, empilés) à
     gauche, bloc stepper+bouton+total à droite — stepper et bouton sur une
     même ligne, total juste dessous, aligné à droite. */
  .lbt-consumable-row {
    align-items: flex-start;
  }
  .lbt-consumable-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .lbt-consumable-price {
    text-align: left;
  }
  .lbt-consumable-side {
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 12px;
    max-width: 180px;
  }
  .lbt-consumable-side .lbt-qty-stepper { order: 1; }
  .lbt-consumable-side .lbt-consumable-form { order: 2; }
  .lbt-consumable-total { order: 3; flex: 0 0 100%; }
}
@media (max-width: 767.98px) {
  /* Maquette mobile : tout empilé sur une seule colonne, stepper puis total
     puis bouton pleine largeur (au lieu de stepper+bouton groupés). */
  .lbt-consumable-row {
    flex-direction: column;
    align-items: stretch;
  }
  .lbt-consumable-side {
    flex-direction: column;
    align-items: stretch;
    max-width: none;
    width: 100%;
  }
  .lbt-consumable-side .lbt-qty-stepper {
    order: 1;
    align-self: flex-start;
  }
  .lbt-consumable-total {
    order: 2;
    flex-basis: auto;
    text-align: left;
  }
  .lbt-consumable-side .lbt-consumable-form {
    order: 3;
    width: 100%;
  }
  .lbt-btn-buy-sm {
    width: 100%;
    text-align: center;
  }
}
.lbt-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--lbt-border);
  border-radius: 5px;
  overflow: hidden;
}
.lbt-qty-btn {
  background: var(--lbt-gray-bg);
  border: none;
  width: 28px;
  height: 28px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--lbt-navy);
  cursor: pointer;
  line-height: 1;
}
.lbt-qty-btn:hover {
  background: var(--lbt-border);
}
.lbt-qty-input {
  width: 36px;
  height: 28px;
  border: none;
  border-left: 1px solid var(--lbt-border);
  border-right: 1px solid var(--lbt-border);
  text-align: center;
  font-size: 0.82rem;
  color: var(--lbt-text-dark);
}
.lbt-qty-input::-webkit-outer-spin-button,
.lbt-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.lbt-btn-buy-sm {
  background-color: var(--lbt-blue);
  color: #fff !important;
  border: none;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 5px;
  white-space: nowrap;
}

/* Avis (onglet fiche produit) : on masque uniquement la liste/pagination
   native de productcomments (remplacée par notre affichage), en ciblant ses
   ids précisément — jamais un wrapper englobant, qui masquerait aussi sa
   modale "Donnez votre avis" (rendue par le même hook) puisque display:none
   sur un ancêtre l'emporte toujours sur le display:block ajouté par Bootstrap
   quand la modale s'ouvre. */
#product-comments-list-header,
#product-comments-list,
#product-comments-list-footer,
#empty-product-comment,
.product-comments-additional-info {
  display: none;
}
/* displayFooterProduct est aussi utilisé par ps_categoryproducts ("produits
   de la même catégorie") : hors sujet dans l'onglet Avis (redondant avec la
   section "sélection experts" de la page), masqué ici spécifiquement. */
#lbt-tab-reviews .ps-categoryproducts {
  display: none;
}
.lbt-reviews-list {
  display: flex;
  flex-direction: column;
}
.lbt-review-item {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--lbt-border);
}
.lbt-review-item:last-child {
  border-bottom: none;
}
.lbt-review-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.lbt-review-rating .lbt-stars {
  font-size: 0.8rem;
}
.lbt-review-grade {
  font-size: 0.78rem;
  color: var(--lbt-text-muted);
}
.lbt-review-name {
  font-weight: 700;
  color: var(--lbt-navy);
  margin: 0;
  font-size: 0.85rem;
}
.lbt-review-date {
  color: var(--lbt-text-muted);
  font-size: 0.78rem;
  margin: 2px 0 0;
}
.lbt-review-title {
  font-weight: 700;
  color: var(--lbt-text-dark);
  margin: 0 0 6px;
  font-size: 0.9rem;
}
.lbt-review-content {
  color: var(--lbt-text-dark);
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0;
}
.lbt-reviews-empty {
  color: var(--lbt-text-muted);
  font-size: 0.88rem;
  margin: 0 0 20px;
}
.lbt-btn-review {
  display: inline-block;
  background-color: var(--lbt-orange);
  color: #fff;
  border: none;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 24px;
  cursor: pointer;
  margin-top: 24px;
}
.lbt-btn-review:hover {
  opacity: 0.92;
}
@media (max-width: 991.98px) {
  .lbt-review-item { grid-template-columns: 1fr; gap: 10px; }
}

/* ==========================================================================
   13. PAGE PANIER (MON PANIER)
   ========================================================================== */
.lbt-cart-page {
  padding: 30px 0 10px;
}
.lbt-cart-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}
.lbt-cart-card {
  border: 1px solid var(--lbt-border);
  border-radius: 10px;
  padding: 24px;
}
.lbt-cart-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--lbt-navy);
  margin: 0 0 10px;
}
.lbt-cart-list {
  display: flex;
  flex-direction: column;
}
.lbt-cart-empty {
  color: var(--lbt-text-muted);
  padding: 20px 0;
}

/* Ligne produit */
.lbt-cart-line {
  display: grid;
  grid-template-columns: 90px 1fr auto auto;
  align-items: center;
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--lbt-border);
}
.lbt-cart-line-image img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--lbt-gray-bg);
}
.lbt-cart-line-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lbt-cart-line-name {
  color: var(--lbt-text-dark);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
}
.lbt-cart-line-name:hover {
  color: var(--lbt-blue);
}
.lbt-cart-line-ref {
  font-weight: 400;
  color: var(--lbt-text-muted);
  margin-left: 4px;
}
.lbt-cart-line-attribute {
  font-size: 0.78rem;
  color: var(--lbt-text-muted);
}
.lbt-cart-line-attribute-label {
  font-weight: 600;
}
.lbt-cart-line-availability {
  font-size: 0.78rem;
  color: var(--lbt-text-muted);
}
.lbt-cart-line-price {
  font-size: 0.85rem;
  color: var(--lbt-text-dark);
}
.lbt-cart-line-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.lbt-cart-line-subtotal {
  font-size: 1rem;
  font-weight: 800;
  color: var(--lbt-navy);
}
.lbt-cart-line-subtotal-label {
  /* Préfixe "Total : " maquette, utile seulement sous 992px : en desktop le
     montant de ligne reste un simple prix, comme avant ce correctif. */
  display: none;
  font-weight: 700;
}
.lbt-cart-line-gift {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--lbt-text-muted);
}
.lbt-cart-qty-stepper .quantity-button__group {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--lbt-border);
  border-radius: 6px;
  overflow: hidden;
}
.lbt-cart-qty-stepper .btn-square-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  border: none;
  background: var(--lbt-gray-bg);
}
.lbt-cart-qty-stepper .btn-square-icon .material-icons {
  font-size: 1rem;
}
.lbt-cart-qty-stepper .form-control {
  width: 42px !important;
  height: 30px !important;
  padding: 0 4px !important;
  text-align: center;
  font-size: 0.82rem;
  border: none;
  border-left: 1px solid var(--lbt-border);
  border-right: 1px solid var(--lbt-border);
}
.lbt-cart-line-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lbt-text-muted);
  text-decoration: none;
}
.lbt-cart-line-remove:hover {
  color: #d9534f;
}
.lbt-cart-line-remove .material-icons {
  font-size: 1.3rem;
}

.lbt-continue-shopping {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--lbt-navy);
  text-decoration: none;
  border: 1.5px solid var(--lbt-border);
  border-radius: 6px;
  padding: 10px 18px;
}
.lbt-continue-shopping:hover {
  border-color: var(--lbt-navy);
}
.lbt-continue-shopping .material-icons {
  font-size: 1.1rem;
}

/* Résumé de commande */
.lbt-cart-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lbt-cart-summary-card {
  border: 1px solid var(--lbt-border);
  border-radius: 10px;
  padding: 22px;
}
.lbt-cart-summary-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 0.85rem;
  color: var(--lbt-text-dark);
}
.lbt-cart-summary-line--header {
  font-weight: 700;
}
.lbt-cart-summary-amount {
  font-weight: 700;
  color: var(--lbt-orange);
  white-space: nowrap;
}
.lbt-cart-summary-divider {
  border: none;
  border-top: 1px solid var(--lbt-border);
  margin: 10px 0;
}
.lbt-cart-voucher-toggle {
  background: none;
  border: none;
  padding: 6px 0;
  color: var(--lbt-blue);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
  width: 100%;
  text-align: center;
}
.lbt-cart-voucher-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.lbt-cart-voucher-form .form-control {
  flex: 1;
  font-size: 0.82rem;
}
.lbt-cart-voucher-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.lbt-cart-summary-line--total {
  align-items: flex-start;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--lbt-navy);
  padding: 10px 0;
}
.lbt-cart-summary-total-amount {
  text-align: right;
  color: var(--lbt-orange);
  font-size: 1rem;
  font-weight: 800;
}
.lbt-cart-summary-total-ttc {
  color: var(--lbt-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
}
.lbt-btn-order,
.lbt-btn-quote {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  margin-top: 12px;
  border: none;
  cursor: pointer;
}
.lbt-btn-order {
  background-color: var(--lbt-blue);
  color: #fff !important;
}
.lbt-btn-order:hover {
  background-color: #0852c4;
}
.lbt-btn-order.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.lbt-btn-quote {
  background-color: var(--lbt-orange);
  color: #fff !important;
}
.lbt-btn-quote:hover {
  opacity: 0.92;
}

/* Bandeaux politiques (sécurité / livraison / retour) */
.lbt-cart-policies {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.lbt-cart-policy {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--lbt-border);
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--lbt-text-dark);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}
.lbt-cart-policy:hover {
  border-color: var(--lbt-navy);
  color: var(--lbt-navy);
}
.lbt-cart-policy .material-icons {
  color: var(--lbt-navy);
  font-size: 1.2rem;
}

@media (max-width: 991.98px) {
  .lbt-cart-grid { grid-template-columns: 1fr; }
}

/* Ligne produit, tablette (768-991.98px) : identique au desktop (une seule
   ligne : image / contenu / total+quantité / suppression), aucune règle
   spécifique nécessaire — hérite de `.lbt-cart-line` de base. */

/* Ligne produit, mobile (< 768px) : maquette = 3 lignes, mais toutes
   alignées sur la colonne du contenu (nom/référence), pas sur celle de
   l'image — la vignette occupe sa colonne sur toute la hauteur des 3
   lignes (zone "img" répétée verticalement) pendant que stepper/total
   démarrent à la même position horizontale que le nom du produit. */
@media (max-width: 767.98px) {
  .lbt-cart-line {
    grid-template-columns: 70px 1fr auto;
    grid-template-areas:
      "img content content"
      "img qty     trash"
      "img price   price";
    row-gap: 10px;
  }
  .lbt-cart-line-image { grid-area: img; }
  .lbt-cart-line-content { grid-area: content; }
  .lbt-cart-line-right { display: contents; }
  .lbt-cart-line-subtotal { grid-area: price; }
  .lbt-cart-line-subtotal-label { display: inline; }
  .lbt-cart-qty-stepper { grid-area: qty; justify-self: start; }
  .lbt-cart-line-remove { grid-area: trash; justify-self: end; }
}

/* ==========================================================================
   14. TUNNEL DE COMMANDE (CHECKOUT)
   ========================================================================== */
.lbt-checkout-page .checkout-grid { align-items: start; }
.lbt-checkout-card {
  border: 1px solid var(--lbt-border);
  border-radius: 10px;
  padding: 24px;
}

/* Étapes numérotées façon maquette (1 Connexion / 2 Adresse / 3 Expédition / 4 Paiement) :
   la nav horizontale native est masquée, chaque titre d'étape devient une ligne
   numérotée par CSS (counter), avec l'étape courante en évidence. */
.checkout-steps__desktop,
.checkout-steps__mobile {
  display: none !important;
}
.lbt-checkout-card .tab-content {
  counter-reset: lbt-step;
}
/* `.d-none` de Bootstrap (ajouté par PrestaShop tant qu'une étape n'est pas
   atteignable) vit dans `@layer utilities` : un `!important` non calqué dans
   un layer nommé perd TOUJOURS face à un `!important` de layer nommé, quelle
   que soit la spécificité (cf. les autres correctifs de ce type dans ce
   fichier) — il faut donc wrapper ce forçage dans le même layer pour que la
   spécificité (2 classes vs 1) tranche normalement en notre faveur. */
@layer utilities {
  .lbt-checkout-card .step {
    /* On force l'affichage des étapes 2-4 pour qu'elles restent visibles,
       comme sur la maquette, même non atteignables — seul leur contenu est
       masqué ci-dessous, leur titre numéroté reste lui toujours affiché. */
    display: block !important;
  }
}
.lbt-checkout-card .step {
  counter-increment: lbt-step;
  border-top: 1px solid var(--lbt-border);
  padding: 18px 0 0;
  margin-top: 18px;
}
.lbt-checkout-card .step:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.lbt-checkout-card .step__title {
  margin: 0 0 16px;
}
.lbt-checkout-card .step__title hr {
  display: none;
}
.lbt-checkout-card .step__title h1,
.lbt-checkout-card .step__title p {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--lbt-navy);
}
.lbt-checkout-card .step__title h1::before,
.lbt-checkout-card .step__title p::before {
  content: counter(lbt-step) ' ';
}
.lbt-checkout-card .step:not(.step--current) .step__title p,
.lbt-checkout-card .step:not(.step--current) .step__title h1 {
  /* Le tag h1/p est figé au rendu serveur pour l'étape courante d'origine ;
     après un retour en arrière (JS, cf. script plus bas), seule la classe
     "step--current" change — ce sélecteur doit donc couvrir les deux tags. */
  font-weight: 700;
  color: #000;
}
.lbt-checkout-card .step--reachable:not(.step--current) .step__title {
  cursor: pointer;
}
.lbt-checkout-card .step:not(.step--current) .step__content {
  display: none;
}

/* Sélecteur "Connectez-vous / Créez votre compte / Commander comme invité" */
.lbt-identity-switch {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.lbt-identity-switch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 160px;
  padding: 11px 14px;
  border-radius: 6px;
  border: 1.5px solid var(--lbt-border);
  background: #fff;
  color: var(--lbt-text-dark);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lbt-identity-switch-btn.active {
  background-color: var(--lbt-blue);
  border-color: var(--lbt-blue);
  color: #fff;
}

/* Puce "radio" affichée dans les boutons segmentés (identité + type de client) */
.lbt-radio-dot {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  position: relative;
}
.lbt-identity-switch-btn.active .lbt-radio-dot::after,
.lbt-customer-type-btn.active .lbt-radio-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #fff;
}

/* Sélecteur "Vous êtes* : Particulier / Professionnel" */
.lbt-customer-type {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.lbt-customer-type-label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--lbt-text-dark);
}
@media (max-width: 767.98px) {
  /* Maquette mobile : le libellé seul sur sa ligne, puis les deux boutons
     ensemble sur la ligne suivante (sinon le 1er bouton reste collé au
     libellé et seul le 2e boutton passe à la ligne). */
  .lbt-customer-type-label {
    flex: 0 0 100%;
  }
}
.lbt-customer-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 6px;
  border: 1.5px solid var(--lbt-border);
  background: #fff;
  color: var(--lbt-text-dark);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lbt-customer-type-btn.active {
  background-color: var(--lbt-blue);
  border-color: var(--lbt-blue);
  color: #fff;
}
.lbt-pro-fields {
  display: none;
}
.lbt-pro-fields.lbt-pro-fields--visible {
  display: block;
}
.lbt-siret-group {
  display: flex;
  gap: 10px;
}
.lbt-siret-group .form-control {
  flex: 1 1 auto;
}
.lbt-siret-autofill-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0 18px;
  border: none;
  border-radius: 6px;
  background-color: var(--lbt-orange);
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.lbt-siret-autofill-btn:hover {
  opacity: 0.92;
}
.lbt-siret-autofill-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.lbt-siret-help {
  font-style: italic;
  color: var(--lbt-text-muted);
  font-size: 0.78rem;
}
@media (max-width: 575.98px) {
  .lbt-siret-group { flex-direction: column; }
}

/* Ligne Prénom/Nom à 2 colonnes dès la tablette (maquette) */
@media (min-width: 768px) {
  .lbt-form-row-2col {
    display: flex;
    gap: 16px;
  }
  .lbt-form-row-2col > div {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Case "créer un compte" (masquée quand le mode "Créez votre compte" force la création) */
.lbt-password-optin .form-check-label em {
  font-style: normal;
  color: var(--lbt-text-muted);
  font-size: 0.8rem;
}
.lbt-force-account .lbt-password-optin .form-check {
  display: none;
}

/* Bouton de bascule de visibilité du mot de passe (déjà natif) : couleur du thème */
.password-field .btn.btn-primary[data-ps-action="toggle-password"] {
  background-color: var(--lbt-orange);
  border-color: var(--lbt-orange);
}

/* Colonne latérale du checkout : mini-liste imagée des produits */
.lbt-checkout-summary-products {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 14px 0;
}
.lbt-checkout-summary-product {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lbt-checkout-summary-product-image img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--lbt-gray-bg);
}
.lbt-checkout-summary-product-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lbt-checkout-summary-product-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--lbt-text-dark);
}
.lbt-checkout-summary-product-price {
  font-size: 0.82rem;
  color: var(--lbt-text-muted);
}
.lbt-checkout-payment-icons {
  text-align: center;
  margin-top: 10px;
}
.lbt-checkout-payment-icons img {
  max-width: 100%;
}

@media (max-width: 991.98px) {
  .checkout-grid__aside { margin-top: 24px; }
}

/* Adresse de facturation/livraison : bloc Entreprise / TVA / SIRET (clients
   professionnels uniquement) + icône crayon sur les champs pré-remplis
   automatiquement à partir du SIRET saisi à l'étape "Connexion". */
.lbt-pro-address-fields {
  display: none;
}
.lbt-pro-address-fields.lbt-pro-address-fields--visible {
  display: block;
}
.lbt-field-editable {
  position: relative;
}
.lbt-field-editable .form-control {
  padding-right: 38px;
}
.lbt-field-edit-icon {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--lbt-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lbt-field-edit-icon:hover {
  color: var(--lbt-blue);
}
.lbt-field-edit-icon .material-icons {
  font-size: 1.1rem;
}
/* Le thème natif n'aligne `.buttons-wrapper--end` à droite (justify-content:
   flex-end) qu'à partir de 768px (cf. theme.css) ; on l'impose ici à toutes
   les largeurs pour que les boutons "Continuer" (connexion, adresses,
   livraison) restent à droite dès le mobile, tant que le conteneur n'est
   pas en pleine largeur (cf. `--no-fw-mobile` posé sur ces wrappers). */
.buttons-wrapper--end {
  justify-content: flex-end;
}
.lbt-btn-address-continue {
  background-color: var(--lbt-orange) !important;
  border-color: var(--lbt-orange) !important;
}
.lbt-btn-address-continue:hover {
  opacity: 0.92;
}
.lbt-btn-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.lbt-btn-full {
  display: block;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 700;
  padding: 12px 20px;
}

/* Étape "Méthode d'expédition" : liste des transporteurs en cartes grises
   séparées (maquette), radio custom, prix en majuscules aligné à droite —
   vrais transporteurs/tarifs du back-office. */
.delivery-options__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.delivery-option__item {
  border: 1px solid var(--lbt-border);
  border-radius: 10px;
  overflow: hidden;
}
.delivery-option__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--lbt-gray-bg);
  cursor: pointer;
  margin: 0;
}
.delivery-option__left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.delivery-option__check {
  display: flex;
}
.delivery-option__check .form-check-input {
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid var(--lbt-text-muted);
  appearance: none;
  -webkit-appearance: none;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
}
.delivery-option__check .form-check-input:checked {
  border-color: var(--lbt-blue);
}
.delivery-option__check .form-check-input:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--lbt-blue);
}
.delivery-option__carrier {
  display: flex;
  align-items: center;
  gap: 10px;
}
.delivery-option__carrier-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.delivery-option__carrier-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--lbt-text-dark);
  white-space: nowrap;
}
.delivery-option__content {
  flex: 1;
  font-size: 0.85rem;
  color: var(--lbt-text-muted);
}
.delivery-option__price {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--lbt-text-dark);
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  /* Mobile : le nom du transporteur, le délai et le prix doivent tous
     s'aligner à droite du rond radio (pas seulement le délai comme avant,
     et pas le prix qui restait plaqué à droite du bloc, désaligné du reste
     du texte) — grille 2 colonnes (radio | texte), `.delivery-option__left`
     promu en `display:contents` pour que radio et nom deviennent chacun un
     item direct de la grille, alignés indépendamment. */
  .delivery-option__label {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: start;
    row-gap: 4px;
  }
  .delivery-option__left {
    display: contents;
  }
  .delivery-option__check {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }
  .delivery-option__carrier {
    grid-column: 2;
    grid-row: 1;
  }
  .delivery-option__content {
    grid-column: 2;
    grid-row: 2;
    margin-left: 0;
  }
  .delivery-option__price {
    grid-column: 2;
    grid-row: 3;
    text-align: left;
  }
}

/* Étape "Paiement" : mêmes moyens de paiement réels (modules configurés en
   back-office), en cartes grises séparées (maquette, même traitement que les
   transporteurs de l'étape précédente), radio custom. */
.payment-options__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.payment-option {
  border: 1px solid var(--lbt-border);
  border-radius: 10px;
  overflow: hidden;
}
.payment-option__form-check {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--lbt-gray-bg);
  margin: 0;
}
.payment-option__form-check .form-check-input {
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid var(--lbt-text-muted);
  appearance: none;
  -webkit-appearance: none;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
}
.payment-option__form-check .form-check-input:checked {
  border-color: var(--lbt-blue);
}
.payment-option__form-check .form-check-input:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--lbt-blue);
}
.payment-option__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex: 1 1 auto;
  margin: 0;
  cursor: pointer;
}
.payment-option__text {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--lbt-text-dark);
}
.payment-option__logo {
  max-height: 26px;
  width: auto;
}
.js-conditions-to-approve .form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
}

/* ==========================================================================
   13. HEADER — BURGER MENU MOBILE/TABLETTE (< 992px)
   En dessous de 992px (tablette : 768-991px, puis mobile), le méga-menu
   desktop (hit_megamenu) déborde et devient illisible (pas de repli
   responsive dans ce module) : on le
   masque et on affiche à la place un bouton burger sur la même ligne que
   le logo + les icônes (favoris/compte/panier), la recherche repassant
   sur sa propre ligne pleine largeur en dessous. Le burger ouvre le
   panneau offcanvas rendu dans hit_megamenu.tpl (#mobileMenu).
   ========================================================================== */
.lbt-header-row {
  flex-wrap: wrap;
  row-gap: 14px;
}
.lbt-menu-toggle {
  color: var(--lbt-navy);
  line-height: 1;
}
.lbt-menu-toggle .material-icons {
  font-size: 1.6rem;
}
.lbt-header-logo-col {
  min-width: 0;
}
@media (min-width: 992px) {
  /* Barre de recherche centrée par rapport à toute la ligne du header, pas
     seulement dans sa propre colonne `col-lg-6` (qui n'est pas visuellement
     centrée puisque la colonne logo et la colonne actions n'ont pas la même
     largeur). Grille 3 colonnes "1fr auto 1fr" : les 2 colonnes latérales se
     partagent TOUJOURS l'espace restant à parts égales quel que soit le
     contenu de chacune, ce qui place la colonne centrale (recherche,
     largeur naturelle) exactement au centre géométrique de la ligne SANS
     jamais empiéter sur le logo ou les icônes (contrairement à un centrage
     absolu sur le milieu de la ligne entière, qui ignorait l'asymétrie
     logo/icônes et provoquait un chevauchement entre 992 et ~1250px). */
  .lbt-header-row {
    display: grid;
    /* La piste centrale doit avoir une largeur EXPLICITE (pas "auto") :
       sinon `width:100%` sur .lbt-header-search-col n'a rien de définie
       contre quoi se calculer et retombe sur la largeur intrinsèque du
       contenu (la barre devient beaucoup plus étroite qu'avant, quand
       c'était une colonne Bootstrap col-lg-6 à largeur fixe). minmax(0,620px)
       occupe l'espace disponible jusqu'à 620px, comme l'ancienne colonne. */
    grid-template-columns: 1fr minmax(0, 480px) 1fr;
    align-items: center;
  }
  .lbt-header-logo-col {
    justify-self: start;
  }
  .lbt-header-search-col {
    justify-self: center;
    width: 100%;
    padding: 0;
  }
  .lbt-header-actions-col {
    justify-self: end;
  }
}
/* 992–1199px : la colonne "Nom du produit" prend la place libérée par des
   colonnes de données plus étroites (ref / prix / qté / total / bouton). */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .lbt-consumables-header,
  .lbt-consumable-row {
    grid-template-columns: 1fr 110px 90px 90px 120px 130px;
    gap: 12px;
  }
  .lbt-consumables-header-ref,
  .lbt-consumable-ref {
    font-size: 0.8rem;
  }
}

/* Entre 992 et 1399px les colonnes latérales (1fr) font 170–260px, moins que
   la largeur naturelle du logo (254px) : sans ça il déborde sur la barre de
   recherche. On le fait tenir dans sa colonne (largeur 100%, hauteur proportionnelle). */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .lbt-header-logo-col {
    min-width: 0;
  }
  .lbt-header-logo-col .lbt-site-logo {
    max-width: 100%;
    height: auto;
  }
}
@media (max-width: 991.98px) {
  .lbt-header-burger-col { order: 1; }
  .lbt-header-logo-col { order: 2; text-align: center; }
  .lbt-header-logo-col > a { justify-content: center; }
  .lbt-header-actions-col { order: 3; }
  .lbt-header-search-col {
    order: 4;
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* Le méga-menu desktop déborde en dessous de 992px : remplacé par le
     burger + panneau offcanvas. On ne masque que la barre horizontale de
     liens (pas tout .lbt-navbar-container), pour ne pas cacher le panneau
     offcanvas qui vit dans le même conteneur. */
  .lbt-navbar-container #_desktop_top_menu {
    display: none;
  }
}

/* Favoris + Compte : affichés à côté du panier dans le header principal en
   tablette (768-991px) ET en desktop, mais masqués en dessous de 768px où
   ils ne vivent plus que dans le panneau du menu burger (classe inverse
   .lbt-mobile-menu-icon-mobile-only ci-dessous).
   Doit être dans @layer utilities : le wrapper du widget compte porte la
   classe Bootstrap .d-inline-flex (display:inline-flex!important dans le
   layer `utilities` du bundle compilé) — même problème de Cascade Layers
   que le bouton wishlist plus haut, un !important non-layered perd
   toujours face à un !important dans un layer nommé. */
@layer utilities {
  @media (max-width: 767.98px) {
    .lbt-header-icon-tablet-only {
      display: none !important;
    }
  }
  /* Inverse : ces icônes du panneau offcanvas ne servent qu'en mobile
     (< 768px) ; en tablette elles seraient redondantes avec le header
     principal, donc masquées. */
  @media (min-width: 768px) {
    .lbt-mobile-menu-icon-mobile-only {
      display: none !important;
    }
  }
}

/* Panneau offcanvas du menu mobile/tablette */
.lbt-mobile-menu {
  width: min(85vw, 360px);
}
.lbt-mobile-menu-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--lbt-border);
}
.lbt-mobile-menu-header .lbt-badge-counter {
  top: -6px;
  right: -8px;
}
.lbt-mobile-menu-back {
  padding: 10px 20px;
  border-bottom: 1px solid var(--lbt-border);
}
/* Le JS du thème (initMobileMenu) ne bascule d-none que sur le <button>
   .js-back-button, jamais sur ce conteneur : sans cette règle, son padding
   + sa bordure restent visibles comme une barre vide au-dessus du menu
   racine, même quand le bouton "Retour" lui-même est bien caché.
   Le 2e sélecteur couvre le cas où le clic sur "Retour" ramène au menu
   racine : le JS de Hummingbird (mobile-menu.ts) ne réapplique d-none au
   bouton que si data-depth==="2" (numérotation pensée pour son propre
   module ps_mainmenu, où le 1er niveau réel démarre à depth 2) — chez
   nous le menu racine est depth 0, donc cette condition ne se déclenche
   jamais au retour. On se base à la place sur data-depth du menu
   effectivement affiché (.menu--current), que le JS bascule correctement
   dans les deux sens. */
.lbt-mobile-menu-back:has(.js-back-button.d-none),
.lbt-mobile-menu-back:has(~ .ps-mainmenu__mobile .menu--current[data-depth="0"]) {
  display: none;
}
.lbt-mobile-menu-back .js-back-button {
  display: flex !important;
  align-items: center;
  gap: 4px;
  padding: 0;
  color: var(--lbt-navy);
  font-weight: 600;
  text-decoration: none;
}
.lbt-mobile-menu-back .js-back-button.d-none {
  display: none !important;
}
.lbt-mobile-menu .menu__list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}
.lbt-mobile-menu .menu__title {
  padding: 0;
  margin: 0;
}
/* Titre du panneau (h2, ex: "Traceurs") : pas de trait sous le titre
   lui-même (seuls les sous-titres de section, h3, en ont un). */
.lbt-mobile-menu .lbt-mobile-menu-panel-title {
  margin-bottom: 6px;
}
.lbt-mobile-menu .lbt-mobile-menu-panel-title h2 {
  margin: 0;
  padding: 14px 20px 10px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--lbt-text-dark);
}
.lbt-mobile-menu .lbt-mobile-menu-sub-title {
  margin-top: 6px;
  padding: 0;
}
.lbt-mobile-menu .lbt-mobile-menu-panel-title + .lbt-mobile-menu-sub-title {
  margin-top: 0;
}
.lbt-mobile-menu .lbt-mobile-menu-sub-title h3 {
  margin: 0;
  padding: 10px 20px 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--lbt-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.lbt-mobile-menu .menu__link,
.lbt-mobile-menu li.type-link {
  display: block;
  padding: 12px 20px;
  color: var(--lbt-text-dark);
  font-size: 0.92rem;
  text-decoration: none;
}
/* Tiret devant les liens simples d'une section (li.type-link), pour les
   distinguer des titres (h2/h3) qui n'en ont pas. */
.lbt-mobile-menu li.type-link > .menu__link {
  position: relative;
  padding-left: 32px;
}
.lbt-mobile-menu li.type-link > .menu__link::before {
  content: "\2013";
  position: absolute;
  left: 20px;
  color: var(--lbt-text-muted);
}
.lbt-mobile-menu li:has(> .menu__link) {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lbt-mobile-menu li:has(> .menu__link) .menu__link {
  flex: 1 1 auto;
}
.lbt-mobile-menu .menu__toggle-child {
  padding: 0 20px;
  color: var(--lbt-text-muted);
  display: flex;
  align-items: center;
}
.lbt-mobile-menu .menu--child {
  padding-bottom: 12px;
}
/* Items spéciaux du méga-menu (recherche rapide / bloc HTML-bannière /
   produits mis en avant), auparavant filtrés et absents du menu
   mobile/tablette : repris ici dans leur propre colonne pleine largeur. */
.lbt-mobile-menu .lbt-mobile-menu-search,
.lbt-mobile-menu .lbt-mobile-menu-html,
.lbt-mobile-menu .lbt-mobile-menu-product {
  padding: 10px 20px;
}
.lbt-mobile-menu .hit-search-form {
  gap: 8px;
}
.lbt-mobile-menu .hit-search-input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--lbt-border);
  border-radius: 6px;
  padding: 8px 36px 8px 12px;
}
.lbt-mobile-menu .hit-search-submit {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
}
.lbt-mobile-menu .lbt-mobile-menu-html img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
/* Utilitaire générique : masque n'importe quel élément en mobile ET
   tablette (<992px), visible seulement à partir du desktop. */
@media (max-width: 991.98px) {
  .lbt-hidden-mobile-tablet {
    display: none !important;
  }
}
.lbt-mobile-menu .lbt-mobile-menu-product .menu__link {
  padding: 0;
}
.js-conditions-to-approve .form-check-input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
}
.js-conditions-to-approve .form-check-label {
  font-size: 0.85rem;
  color: var(--lbt-text-dark);
}
.lbt-btn-confirm-order {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background-color: var(--lbt-blue) !important;
  border-color: var(--lbt-blue) !important;
}
.lbt-btn-confirm-order:hover {
  background-color: #0852c4 !important;
}
.lbt-btn-confirm-order.disabled {
  opacity: 0.5;
  pointer-events: none;
}
@media (max-width: 575.98px) {
  .payment-option__label { flex-wrap: wrap; }
}

/* ==========================================================================
   14. FOOTER — ACCORDÉON MOBILE/TABLETTE (< 992px)
   En dessous de 992px, chaque colonne du footer (entreprise, notre site,
   service client, mon compte, newsletter) devient une section repliable
   (bouton chevron, la ligne de titre entière est cliquable via
   .stretched-link) plutôt qu'une grille de 5 colonnes toujours ouvertes.
   Entreprise + Newsletter sont ouvertes par défaut, les 3 colonnes de
   liens sont repliées. Réutilise le composant Bootstrap Collapse déjà
   chargé (même mécanisme que l'offcanvas du menu mobile).
   ========================================================================== */
.lbt-footer-accordion-toggle {
  position: relative;
  cursor: pointer;
}
.lbt-footer-accordion-btn {
  background: none;
  border: none;
  padding: 0;
  margin-left: auto;
  color: inherit;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lbt-footer-accordion-btn .material-icons {
  font-size: 1.4rem;
  transition: transform 0.2s ease;
}
.lbt-footer-accordion-btn:not(.collapsed) .material-icons {
  transform: rotate(0.5turn);
}
@media (max-width: 991.98px) {
  .lbt-footer-accordion-btn {
    display: flex;
  }
  .lbt-footer-accordion-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 14px;
  }
  .lbt-footer-accordion-item:last-child {
    border-bottom: none;
  }
}
/* En desktop (≥992px), le contenu reste toujours visible quel que soit
   l'état du composant Collapse (bouton caché, personne ne peut le
   replier) : ne nécessite pas de !important, une règle non-layered gagne
   déjà face à la règle Bootstrap `.collapse:not(.show){display:none}`
   (elle-même sans !important, dans un @layer nommé du bundle compilé). */
@media (min-width: 992px) {
  .lbt-footer-accordion-content.collapse {
    display: block;
  }
}

/* Colonne "entreprise" : adresse/horaires à gauche, coordonnées à droite,
   en dessous de 992px (comme la maquette) ; en desktop les 2 blocs
   restent simplement empilés (comportement d'origine, colonne étroite). */
@media (max-width: 991.98px) {
  .lbt-footer-company-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
  }
}
@media (max-width: 575.98px) {
  .lbt-footer-company-grid {
    grid-template-columns: 1fr;
  }
}
.carousel-control-next, .carousel-control-prev{
  width: 5%;
}
#menuslide > li.menu-item.item-header{
  margin-bottom: 1.2rem;
}
#menuslide > li > div > p > img{
  width: 100%;
  height: auto;
}
.lbt-featured-products > div.container,
.lbt-bestsellers > div.container{
  padding: 0;
}
.lbt-featured-products,
.lbt-bestsellers {
  margin-bottom: 1.5rem;
}
.page-content--home {
  gap: 0;
}
.page:not(body) {
  padding-bottom: 0;
}
#encre-more{
  display: none;
}
.search-fast-row .input-group{
  margin-left: 5px;
  /* Bootstrap pose `flex-wrap:wrap` par défaut sur .input-group (pensé pour
     un addon qui repasse à la ligne en cas de manque de place), et la règle
     générique `.input-group{justify-content:center}` plus bas centre alors
     ce qui passe à la ligne : combinées, la loupe (bouton icon-search)
     tombait sous le champ de saisie au lieu de rester sur la même ligne
     (bug vécu). On force nowrap ici, et le champ doit pouvoir rétrécir
     (min-width:0, un input n'a pas cette liberté par défaut en flex). */
  flex-wrap: nowrap;
}
.search-fast-row .input-group input {
  min-width: 0;
}
.search-fast-row{
    padding: 10px;
}
/* Logos marque (Canon/Epson/HP) des lignes de recherche rapide du
   méga-menu (hit_megamenu.css ne pose que des max-width/max-height, pas de
   taille fixe) : chaque logo source a un ratio très différent (texte large
   et bas pour Canon/Epson, icône presque carrée pour HP), donc avec de
   simples max-*, object-fit:contain les réduit chacun à une taille très
   différente au lieu d'occuper le même espace visuel. Boîte fixe ici pour
   un alignement cohérent, quel que soit le ratio d'origine du logo. */
.search-fast-row img {
  width: 50px;
  height: 35px;
  object-fit: contain;
}
.payment-option__additional-information p{
  padding: 1.2rem;
}
.input-group{
  justify-content: center;
}
.hit-megamenu-search-item.hit-search-mode-category .hit-search-input{
    padding-right: 15px !important;
}
.product-flags .badge.discount{
  color: #fff;
  background-color: var(--lbt-red-promo);
  border: 1px solid var(--lbt-red-promo);
}
.btn-outline-primary{
  color: var(--lbt-blue);
  border-color: var(--lbt-blue);
}
.btn-outline-primary:hover{
  color: #fff;
  background-color: var(--lbt-blue);
  border-color: var(--lbt-blue);
}
#module-everpsblog-blog .everpsblog-blog-header__title,
#module-everpsblog-post .everpsblog-post-title{
    color: var(--lbt-blue) !important; 
}
body#module-everpsblog-post .breadcrumb a, 
body#module-everpsblog-blog .breadcrumb a, 
body#module-everpsblog-blog .breadcrumb span,
body#module-everpsblog-post .breadcrumb span{
  color: var(--lbt-text-muted) !important; 
}
#module-everpsblog-blog .everpsblog-blog-header__inner,
#module-everpsblog-post .everpsblog-post-hero{
  background: transparent !important;
}
#module-everpsblog-post .everpsblog-post-hero-overlay{
    min-height: 0px;
    padding: 1rem;
}