/* ============================================================
   CAROUSEL — Pleine largeur sur toutes les tailles
   ============================================================ */
#carousel {
  width: 100% !important;
  margin-left: 0 !important;
  max-width: 100% !important;
}
/* Desktop : étire le carousel sur toute la largeur de la fenêtre */
@media (min-width: 992px) {
  #carousel {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    max-width: 100vw !important;
  }
}
/* Hauteur automatique des slides */
#carousel .carousel-item, #carousel .carousel-inner {
  height: auto !important;
  min-height: 0 !important;
}
/* Images du carousel en pleine largeur */
#carousel .carousel-item img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
/* Cache le débordement du carousel (sauf override plus bas) */
#carousel, #carousel .direction {
  overflow: hidden !important;
}
/* ============================================================
   SLIDER ALTERNATIF (homeslider / rslides)
   ============================================================ */
.homeslider-container, .rslides, .rslides li, .rslides img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}
/* ============================================================
   HEADER DESKTOP — Alignement logo + barre de recherche
   ============================================================ */
/* Alignement en bas de la row du header */
.header-top .row.d-flex {
  display: flex !important;
  align-items: flex-end !important;
}
/* Logo aligné en bas */
.header-top #_desktop_logo {
  display: flex !important;
  align-items: flex-end !important;
  padding: 0 !important;
  margin: 0 !important;
}
.header-top #_desktop_logo h1 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.header-top #_desktop_logo img {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* ============================================================
   BARRE DE RECHERCHE DESKTOP
   ============================================================ */
/* Colonne droite en colonne flex */
.header-top .col-md-10 {
  display: flex !important;
  flex-direction: column !important;
}
/* Centrage de la barre de recherche avec padding latéral */
.header-top .col-md-10 > div:first-child {
  width: 100% !important;
  justify-content: center !important;
  padding: 0 28% 0 5% !important;
  margin-top: 20px !important;
}
/* Widget recherche pleine largeur */
#search_widget, .search-widgets {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
/* Formulaire de recherche stylisé */
#search_widget form {
  display: flex !important;
  align-items: center !important;
  background: #ffffff;
  border-radius: 8px;
  padding: 4px 16px 4px 4px !important;
  height: 44px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  width: 90% !important;
  gap: 8px;
  margin-left: 20px
}
#search_widget form i {
  position: static !important;
  padding: 0 !important;
}
/* Icône loupe avec fond orange */
#search_widget form i.material-icons.search {
  position: static !important;
  padding: 0 !important;
  background: #e60230;
  color: #ffffff !important;
  font-size: 24px;
  border-radius: 6px;
  width: 44px;
  height: 36px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Cache la croix de réinitialisation */
#search_widget form i.material-icons.clear {
  display: none;
}
/* Champ texte de recherche */
#search_widget input[type="text"] {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
  font-size: 15px;
  font-style: italic;
  color: #333;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  height: 100%;
  position: static !important;
}
#search_widget input[type="text"]::placeholder {
  color: #999;
  font-style: italic;
}
/* ============================================================
   MODULE CONTACT LVPT
   ============================================================ */
.lvpt-contact-wrapper {
  color: #333 !important;
}
.lvpt-contact-wrapper * {
  color: #333 !important;
}
.lvpt-input, .lvpt-select, .lvpt-textarea {
  color: #333 !important;
  background: #f9f9f9 !important;
}
.lvpt-submit-btn {
  color: #ffffff !important;
  background: #5a8a3c !important;
}
/* ============================================================
   MENU MOBILE — Caché sur desktop
   ============================================================ */
@media (min-width: 992px) {
  #mobile_top_menu_wrapper {
    display: none !important;
  }
}
/* ============================================================
   MOBILE — Styles généraux
   ============================================================ */
@media (max-width: 991px) {
  /* Cache la barre de recherche desktop sur mobile */
  .header-top .col-md-10 > div:first-child {
    display: none !important;
  }
  /* Cache le menu desktop sur mobile */
  .col-md-10 .mm-nav {
    display: none !important;
  }
  /* Empêche le scroll horizontal */
  body {
    overflow-x: hidden !important;
  }
  /* Menu mobile fermé par défaut */
  #mobile_top_menu_wrapper {
    display: none;
  }
  /* Menu mobile ouvert (hamburger actif) */
  #header.is-open #mobile_top_menu_wrapper {
    display: block !important;
    width: 100%;
    background: #660230;
    padding: 0;
    margin: 0;
  }
  #header.is-open #mobile_top_menu_wrapper .js-top-menu {
    display: block !important;
  }
  #header.is-open #mobile_top_menu_wrapper .mm-nav {
    display: block !important;
  }
  #header.is-open #mobile_top_menu_wrapper .mm-list {
    display: flex !important;
    flex-direction: column !important;
  }
  /* Barre de navigation sans bordure ni hauteur fixe */
  .header-nav {
    border-bottom: none !important;
    max-height: none !important;
    padding: 0 !important;
  }
  /* Logo mobile limité en hauteur */
  #_mobile_logo img, .top-logo img {
    max-height: 3rem !important;
    width: auto !important;
  }
  /* Cache le menu desktop dans header-nav-full */
  .header-nav-full .mm-nav {
    display: none !important;
  }
  /* Liste du menu en colonne */
  .mm-list {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Chaque item du menu */
  .mm-item {
    width: 100% !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Lien du menu */
  .mm-link {
    display: block !important;
    padding: 12px 16px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Sous-menu fermé par défaut */
  .mm-dropdown {
    position: static !important;
    box-shadow: none !important;
    display: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Sous-menu ouvert */
  .mm-item.mm-open .mm-dropdown {
    display: block !important;
  }
  .mm-nav .container {
    padding: 0 !important;
  }
  /* Carousel mobile pleine largeur */
  #carousel {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    left: 0 !important;
    padding-left: 0 !important;
  }
  #carousel, #carousel .carousel-inner, #carousel ul {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  #carousel .carousel-item figure, #carousel .carousel-item a, #carousel .carousel-item li {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  /* Images du carousel mobile : hauteur fixe 200px */
  #carousel .carousel-item img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    max-width: 100% !important;
  }
  /* Supprime les paddings du contenu principal */
  #main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .page-home#content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Supprime le padding du container sur la page d'accueil pour que le slider soit pleine largeur */
  .page-home#content > .container, #index .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Restaure le padding pour les pages blog */
  #module-smartblog-category .container, #module-smartblog-details .container, #module-smartblog-tag .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .carousel {
    left: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
  /* Icône hamburger → croix quand menu ouvert */
  #header.is-open .mobile #menu-icon i::before {
    content: '\E5CD' !important;
  }
}
/* ============================================================
   CAROUSEL DESKTOP — Images pleine largeur
   ============================================================ */
@media (min-width: 992px) {
  #carousel .carousel-item img, #carousel .carousel-inner > .carousel-item > img, #carousel .carousel-inner > .carousel-item > a > img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
}
@media (min-width: 992px) {
  #carousel .carousel-item figure, #carousel .carousel-item a {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
}
/* ============================================================
   MOBILE — Corrections de padding/margin globaux
   ============================================================ */
/* Supprime le padding-top du wrapper */
@media (max-width: 991px) {
  #wrapper {
    padding-top: 0 !important;
  }
}
/* Supprime les paddings du wrapper de contenu */
@media (max-width: 991px) {
  .js-content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* Padding du container mobile */
@media (max-width: 991px) {
  .container {
    padding-left: 10 !important;
    padding-right: 0 !important;
    padding-top: 10 !important;
  }
}
/* Supprime les marges négatives des rows Bootstrap */
@media (max-width: 991px) {
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* ============================================================
   LVPT INFO BLOCKS — Override overflow pour le chevauchement slider
   ============================================================ */
/* Le carousel doit être visible pour que les blocs chevauchent le slider */
#carousel {
  overflow: visible !important;
}
#carousel .direction {
  overflow: visible !important;
}
.lvpt-slider-wrap {
  overflow: visible !important;
}
/* Sections parentes également visibles */
#content, .page-home, #main, #wrapper {
  overflow: visible !important;
}
/* Fond transparent pour les blocs info */
.lvpt-infoblocks-wrapper, .lvpt-infoblocks-container, .lvpt-infoblock {
  background-color: transparent !important;
}
/* Liens des sous-titres sans soulignement */
.lvpt-infoblock__subtitle a, .lvpt-infoblock__subtitle {
  color: inherit !important;
  text-decoration: none !important;
}
/* ============================================================
   MOBILE — Logo légèrement décalé vers le bas
   ============================================================ */
@media (max-width: 991px) {
  #_mobile_logo img, .top-logo img {
    transform: translateY(10px);
  }
}
/* ============================================================
   MOBILE — Taille des icônes Material Icons dans le header
   ============================================================ */
@media (max-width: 991px) {
  #header .header-nav .material-icons {
    font-size: 40px !important;
    width: 1.5em;
    height: 1.5em;
    transform: translateY(0px);
  }
}
/* ============================================================
   HEADER DESKTOP — Layout flex avec menu pleine largeur
   ============================================================ */
@media (min-width: 992px) {
  .header-top .container {
    flex-wrap: nowrap;
    align-items: flex-end;
  }
  .header-top .col-md-2 {
    flex: 0 0 auto;
  }
  .header-top .col-md-10 {
    flex: 1;
    max-width: 100%;
    padding-left: 0;
    margin-top: 0;
  }
  .position-static {
    width: 100%;
  }
  .mm-nav {
    width: 100% !important;
  }
}
  .mm-nav {
    width: 100% !important;
  }
}
/* Barre de navigation desktop fond orange */
.header-nav-full {
  width: 100%;
  background: #ea002f;
}
.header-nav-full .mm-link {
  line-height: 1.9;
}
.header-nav-full .container {
  padding: 0;
  max-width: 100% !important;
  width: 100% !important;
}
.header-nav-full #_desktop_top_menu {
  width: 100%;
}
/* Menu centré dans la barre orange */
.header-nav-full .mm-list {
  justify-content: center;
}
/* ============================================================
   MOBILE HEADER — Réduction des paddings
   ============================================================ */
@media (max-width: 991px) {
  .header-nav {
    padding: 0;
  }
  .header-nav .mobile {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}
@media (max-width: 991px) {
  .header-nav {
    padding: 0 !important;
    min-height: 0 !important;
  }
  .header-nav .container {
    padding: 0 10px !important;
  }
  .header-nav .mobile {
    padding: 2px 0 !important;
    min-height: 0 !important;
  }
  #_mobile_logo .top-logo {
    line-height: 1;
  }
}
/* Padding réduit du header-top mobile */
@media (max-width: 991px) {
  #header .header-top {
    padding: 0.3rem 0 !important;
  }
}
/* Icône hamburger centrée verticalement */
@media (max-width: 991px) {
  #menu-icon {
    display: flex;
    align-items: center;
    height: 100%;
  }
}
/* ============================================================
   MOBILE HEADER — Icônes personnalisées (PNG) pour panier et compte
   ============================================================ */
@media (max-width: 991px) {
  /* Cache les icônes Material Icons par défaut */
  #_mobile_user_info .material-icons, #_mobile_cart .material-icons {
    display: none !important;
  }
  /* Icône panier personnalisée (PNG) */
  #_mobile_cart .material-icons.shopping-cart {
    display: none !important;
  }
  #_mobile_cart .blockcart .header::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 28px;
    background: url('/themes/classic/assets/img/newpan.png') no-repeat center center;
    background-size: contain;
    vertical-align: middle;
  }
  /* Icône compte personnalisée (PNG) */
  #_mobile_user_info .material-icons {
    display: none !important;
  }
  #_mobile_user_info .user-info a::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 28px;
    background: url('/themes/classic/assets/img/identcompte.png') no-repeat center center;
    background-size: contain;
    vertical-align: middle;
    transform: translateY(1px);
  }
}
/* ============================================================
   MOBILE HEADER — Ordre et disposition des éléments
   ============================================================ */
@media (max-width: 991px) {
  .header-nav .mobile {
    display: flex;
    align-items: center;
    flex-direction: row;
  }
  /* Ordre : hamburger > logo > compte > panier */
  #menu-icon {
    float: none;
    order: 1;
    display: flex;
    align-items: center;
  }
  #_mobile_logo {
    float: none;
    order: 2;
    flex: 1;
    display: flex;
    align-items: center;
  }
  #_mobile_user_info {
    float: none;
    order: 3;
    display: flex;
    align-items: center;
    padding: 0 2px;
  }
  #_mobile_cart {
    float: none;
    order: 4;
    display: flex;
    align-items: center;
  }
}
/* Hauteur fixe de la barre mobile */
@media (max-width: 991px) {
  .header-nav .mobile {
    height: 60px;
  }
}
/* Décalage vertical du panier */
@media (max-width: 991px) {
  #_mobile_cart {
    transform: translateY(5px);
  }
}
/* Cache la première icône menu quand le menu est ouvert */
@media (max-width: 991px) {
  #header.is-open #menu-icon .material-icons:first-child {
    display: none !important;
  }
}
/* Icône hamburger → croix quand menu ouvert */
@media (max-width: 991px) {
  #header.is-open #menu-icon img {
    content: url('/themes/classic/assets/img/close.png');
  }
}
/* Décalage vertical de l'icône hamburger */
@media (max-width: 991px) {
  #menu-icon img {
    transform: translateY(7px);
  }
}
/* ============================================================
   MOBILE — Barre de recherche cachée/affichée au tap
   ============================================================ */
@media (max-width: 991px) {
  .mobile-search {
    padding: 8px 10px;
    background: #fff;
  }
  /* Cache les éléments desktop sur mobile */
  .hidden-sm-down {
    display: none !important;
  }
}
/* Barre de recherche mobile cachée par défaut */
#_mobile_search {
  display: none;
}
@media (max-width: 991px) {
  /* Barre de recherche mobile avec ombre */
  #_mobile_search {
    width: 100%;
    background: #fff;
    padding: 8px 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
  }
  /* Bouton toggle recherche */
  #_mobile_search_toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 8px;
  }
  #_mobile_search_toggle .material-icons {
    font-size: 28px !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
  }
  body {
    overflow-x: hidden;
  }
}
/* ============================================================
   MOBILE — Ordre des éléments header avec toggle recherche
   ============================================================ */
@media (max-width: 991px) {
  .header-nav .mobile {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  /* Ordre : hamburger > logo > loupe > compte > panier */
  #menu-icon {
    order: 1;
    flex-shrink: 0;
  }
  #_mobile_logo {
    order: 2;
    flex: 1;
  }
  #_mobile_search_toggle {
    order: 3;
    flex-shrink: 0;
  }
  #_mobile_user_info {
    order: 4;
    flex-shrink: 0;
  }
  #_mobile_cart {
    order: 5;
    flex-shrink: 0;
  }
}
/* Décalage vertical de l'icône loupe */
@media (max-width: 991px) {
  #_mobile_search_toggle img {
    transform: translateY(7px);
  }
}
/* Empêche le scroll horizontal causé par la recherche */
@media (max-width: 991px) {
  #_mobile_search {
    overflow: hidden;
  }
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
}
/* Taille de police augmentée pour éviter le zoom auto sur iOS */
@media (max-width: 991px) {
  #_mobile_search input[type="text"], #_mobile_search input[type="search"] {
    font-size: 16px !important;
  }
}
/* Bouton effacement dans la recherche mobile */
@media (max-width: 991px) {
  #_mobile_search .search-widget form .clear-search {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
  }
  #_mobile_search .search-widget form .clear-search .material-icons {
    font-size: 18px !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    line-height: 1 !important;
  }
}
/* Correction position icône clear dans recherche mobile */
@media (max-width: 991px) {
  #_mobile_search #search_widget form i.clear {
    position: static !important;
    right: auto !important;
  }
}
@media (max-width: 991px) {
  #_mobile_search #search_widget form i.material-icons.clear {
    position: static !important;
    right: auto !important;
    display: flex !important;
    align-items: center !important;
    font-size: 18px !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
  }
}
@media (max-width: 991px) {
  #_mobile_search #search_widget form i.material-icons.clear {
    display: inline !important;
  }
}
/* ============================================================
   MOBILE — Lien contact dans le menu mobile
   ============================================================ */
@media (max-width: 991px) {
  #mobile_top_menu_wrapper #_mobile_contact_link {
    background: transparent !important;
    color: #ffffff !important;
    padding: 12px 5px;
    display: block !important;
  }
  #mobile_top_menu_wrapper #_mobile_contact_link a {
    color: #ffffff !important;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 15px;
  }
}
/* ============================================================
   MOBILE — Panier : icône PNG noir/blanc selon état
   ============================================================ */
@media (max-width: 991px) {
  #_mobile_cart {
    padding: 0 2px;
  }
  #_mobile_cart .blockcart {
    position: relative;
  }
  #_mobile_cart .blockcart .header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 2px;
  }
  /* Panier vide → icône noire (newpan.png) */
  #_mobile_cart .blockcart.inactive .header::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 28px;
    background: url('/themes/classic/assets/img/newpan.png') no-repeat center center;
    background-size: contain;
    transform: translateY(-4px);
    margin-left: -8px;
  }
  /* Panier avec produits → icône blanche (newpan-white.png) */
  #_mobile_cart .blockcart.active .header::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 28px;
    background: url('/themes/classic/assets/img/newpan-white.png') no-repeat center center;
    background-size: contain;
    transform: translateY(-4px);
    margin-left: -8px;
  }
  /* Lien du panier couvre tout le bloc */
  #_mobile_cart .blockcart .header a {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-right: 4px;
    padding-bottom: 4px;
  }
  #_mobile_cart .material-icons.shopping-cart {
    display: none !important;
  }
  #_mobile_cart .cart-products-count {
    position: static !important;
  }
}
/* ============================================================
   PAGE PRODUIT DESKTOP — Description pleine largeur sous les 2 colonnes
   ============================================================ */
@media (min-width: 992px) {
  @media (min-width: 992px) {
  .row.product-container.js-product-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding-left: 30px;
    position: relative;
  }
  .row.product-container.js-product-container .col-md-6:last-child .product-information {
    display: flex;
    flex-wrap: wrap;
  }
  /* Zone des onglets : pleine largeur, position calculée par JS */
  .row.product-container.js-product-container .col-md-6:last-child .tabs {
    flex: 0 0 200%;
    max-width: 200%;
    width: calc(200% - 30px);
    margin-left: -99%;
    margin-top: 110px;
}
    /* margin-top sera défini dynamiquement par JS */
  }
}
/* ============================================================
   PAGE PRODUIT DESKTOP — Alignement bloc commentaires
   ============================================================ */
@media (min-width: 992px) {
  #product-comments-list-header, #product-comments-list, #product-comments-list-footer, .product-comments-additional-info, #empty-product-comment {
    margin-left: 65px;
    margin-right: -5px;
  }
}
/* PAGE PRODUIT MOBILE — Reset marges commentaires */
@media (max-width: 991px) {
  #product-comments-list-header, #product-comments-list, #product-comments-list-footer, .product-comments-additional-info, #empty-product-comment {
    margin-left: 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
    margin-right: 15px;
  }
}
/* ============================================================
   MINIATURE PRODUIT — Bouton Ajouter au panier sur les listings
   ============================================================ */
/* Conteneur quantité + bouton */
.product-miniature-add-to-cart {
  padding: 25px 0 4px;
}
.product-miniature-add-to-cart .qty-add-to-cart {
  display: flex;
  gap: 6px;
  align-items: center;
}
/* Champ quantité avec flèches natives */
.product-miniature-add-to-cart .qty-input {
  width: 60px !important;
  text-align: center;
  padding: 6px !important;
  -moz-appearance: textfield;
}
.product-miniature-add-to-cart .qty-input::-webkit-outer-spin-button, .product-miniature-add-to-cart .qty-input::-webkit-inner-spin-button {
  -webkit-appearance: inner-spin-button !important;
  opacity: 1 !important;
}
/* Bouton ajouter au panier : même hauteur que le champ quantité */
.product-miniature-add-to-cart .add-to-cart {
  flex: 1;
  font-size: 0 !important;
  padding: 0;
  align-self: stretch;
}
/* Dropdown de sélection de variante */
.product-miniature-add-to-cart .variant-select {
  width: 100%;
  margin-bottom: 6px;
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
/* ============================================================
   MOBILE — Module blog : padding pour alignement
   ============================================================ */
@media (max-width: 991px) {
  .lvpt-blog-home {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}
/* ============================================================
   MOBILE FOOTER — Newsletter et container
   ============================================================ */
@media (max-width: 991px) {
  .block_newsletter, #block_myaccount_infos, .blockcategories_footer, footer .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}
/* ============================================================
   MOBILE FOOTER — Alignement des liens (Produits, Société, etc.)
   ============================================================ */
@media (max-width: 991px) {
  /* Supprime les paddings des blocs liens */
  .footer-container .links, .footer-container .links .wrapper, .footer-container .col-md-3.links, .footer-container .row .col-md-3.links.wrapper, .footer-container .block-contact {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Ajoute le padding uniquement sur les titres des blocs */
  .footer-container .links .title, .footer-container .block-contact .title {
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
}
/* Correction padding "Votre Compte" dans le footer */
@media (max-width: 991px) {
  #footer .col-md-3.links.wrapper {
    padding-left: 0 !important;
  }
}
/* Correction largeur du titre "Votre Compte" pour aligner la flèche */
@media (max-width: 991px) {
  .footer-container .col-md-3.links.wrapper .title {
    width: calc(100vw) !important;
    max-width: calc(100vw) !important;
    box-sizing: border-box !important;
  }
}
/* ============================================================
   PAGE PRODUIT — Bloc footer (commentaires) aligné sur desktop uniquement
   ============================================================ */
@media (min-width: 992px) {
  .product-footer-wrapper {
    padding-left: 30px;
    box-sizing: border-box;
  }
}
@media (max-width: 991px) {
  .product-footer-wrapper {
    padding-left: 0 !important;
  }
}
/* ============================================================
   PAGE PRODUIT — Cache le label TTC sous le prix
   ============================================================ */
.product-prices .tax-shipping-delivery-label {
  font-size: .8125rem;
  color: #7a7a7a;
  word-wrap: break-word;
  display: none;
}
@media (max-width: 991px) {
  .page-product .footer-container .links, .page-product .footer-container .links .wrapper, .page-product .footer-container .col-md-3.links, .page-product .footer-container .row .col-md-3.links.wrapper, .page-product .footer-container .block-contact {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .page-product #footer .col-md-3.links.wrapper {
    padding-left: 0 !important;
  }
  .page-product .footer-container .col-md-3.links.wrapper .title {
    width: calc(100vw) !important;
    max-width: calc(100vw) !important;
    box-sizing: border-box !important;
  }
}
.product-miniature .product-flag.out_of_stock {
  display: none !important;
}


@media (min-width: 992px) {
  .mm-grid-img {
    width: 80% !important;
    /*padding: 10% !important;*/
    object-fit: contain !important;
    box-sizing: border-box !important;
  }
  .mm-grid-images .mm-item, .mm-grid-images li {
    padding: 0 !important;
    margin: 0 -15px !important;
  }
  .mm-grid-images {
    gap: 0 !important;
    justify-content: center !important;
  }
}

@media (min-width: 992px) {
  .mm-section-title {
    font-size: 18px !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
  }
}
/* Boutons — couleur normale */
.btn-primary, button.btn-primary, input.btn-primary, a.btn-primary {
  background-color: #e60230 !important;
  border-color: #e84b0a !important;
  color: #ffffff !important;
}
/* Boutons — hover */
.btn-primary:hover, button.btn-primary:hover, input.btn-primary:hover, a.btn-primary:hover {
  background-color: #c3072d !important;
  border-color: #c23d08 !important;
  color: #ffffff !important;
}
/* Boutons — cliqué */
.btn-primary:active, button.btn-primary:active, input.btn-primary:active, a.btn-primary:active {
  background-color: #e60230 !important;
  border-color: #a03306 !important;
  color: #ffffff !important;
}
.header-nav-full, .mm-nav, #_desktop_top_menu, .header-nav-full .container, nav.header-nav-full {
  background-color: #ea002f !important;
  background: #ea002f !important;
}
@media (min-width: 992px) {
  .mm-item {
    padding: 0 !important;
    align-items: center !important;
  }
  .mm-link {
    margin: 5px 0 !important;
    border: 2px solid transparent !important;
  }
  .mm-link:hover,
  .mm-item:hover > .mm-link {
    background-color: #ffffff !important;
    color: #ea002f !important;
    border-radius: 4px !important;
    border: 2px solid transparent !important;
  }
}
@media (min-width: 992px) {
  #_desktop_search_bar_top, .search-bar-top {
    display: none !important;
  }
}


@media (min-width: 992px) {
  .mm-grid-img {
    background: transparent !important;
  }
  .mm-grid-img:hover {
    background: transparent !important;
    box-shadow: none !important;
  }
}

@media (max-width: 991px) {
  .mm-grid {
    justify-content: center !important;
    text-align: center !important;
  }
  .mm-grid-item {
    text-align: center !important;
  }
  .mm-grid-link {
    text-align: center !important;
  }
}

/*
.mm-dropdown {
  overflow: visible !important;
  max-height: none !important;
}
.mm-dropdown-inner {
  overflow: visible !important;
  max-height: none !important;
}
.mm-grid-images {
  overflow: visible !important;
  max-height: none !important;
  flex-wrap: wrap !important;
}


.mm-grid-link .mm-grid-name,
.mm-grid-item .mm-grid-name {
  color: #cb3b3b !important;
  font-size: 14px !important;
}
*/
@media (min-width: 992px) {
  .mm-dropdown {
    left: 0 !important;
    right: 0 !important;
    position: absolute !important;
  }
  .mm-nav {
    position: relative !important;
  }
}


@media (min-width: 992px) {
  body, html {
    overflow-x: hidden;
    overflow-y: scroll !important;
  }
}

@media (min-width: 992px) {
  .mm-link {
    -webkit-font-smoothing: antialiased !important;
    font-weight: 700 !important;
    min-width: 0 !important;
    width: auto !important;
  }
  .mm-list {
    align-items: stretch !important;
  }
  .mm-item {
    align-items: stretch !important;
  }
}
/* BOUTON CONTINUER MES ACHATS*/
.cart-grid-body > a.label {
    background-color: #00c062 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    border-radius: 3px !important;
    display: inline-block !important;
    text-decoration: none !important;
}

.cart-grid-body > a.label:hover {
    background-color: #c3072d !important;
    color: #ffffff !important;
}
/*BORDER RADIUS SUR TOUT LES BOUTONS*/
.btn, button, input[type="submit"], input[type="button"] {
    border-radius: 3px !important;
}



.product-miniature-add-to-cart .add-to-cart::after {
  content: 'Ajouter' !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  font-family: Arial, sans-serif !important;
  -webkit-font-smoothing: auto !important;
}


/* FICHE PRODUIT — Bouton Ajouter au panier */
.page-product .add-to-cart .btn-primary,
.page-product button.add-to-cart {
  font-size: 0 !important;
}
.page-product .add-to-cart .btn-primary::after,
.page-product button.add-to-cart::after {
  content: 'Ajouter au panier' !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}


@media (min-width: 992px) {
  .mm-nav {
    position: relative !important;
  }
  .mm-item {
    position: static !important;
  }
  .mm-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    min-height: 0 !important;
  }
}

@media (min-width: 992px) {
  .mm-link {
    box-sizing: border-box !important;
    outline: none !important;
  }
  .mm-item:hover > .mm-link {
    margin: 5px 0 !important;
    outline: none !important;
  }
}

@media (min-width: 992px) {
  .mm-dropdown {
    animation: none !important;
    animation-name: none !important;
  }
}

@media (min-width: 992px) {
  #header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
  }
}

@media (min-width: 992px) {
  /* Cache uniquement "Contactez-nous" dans la header-nav */
  .header-nav .col-md-5 {
    display: none !important;
  }
  
  /* Déplace la zone nav2 (Connexion + Panier) dans le header-top */
 .header-nav .col-md-7.right-nav {
  position: absolute !important;
  top: 32px !important;
  right: 180px !important;
  z-index: 100 !important;
}
}


@media (min-width: 992px) {
  .header-nav .col-md-7.right-nav .user-info:has(.logout) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    line-height: 1.2 !important;
  }
  .header-nav .col-md-7.right-nav .user-info:has(.logout) .logout {
    font-size: 11px !important;
    order: 2 !important;
  }
  .header-nav .col-md-7.right-nav .user-info:has(.logout) .account {
    font-size: 13px !important;
    order: 1 !important;
  }
}

@media (min-width: 992px) {
  /* Cache le picto compte */
  .header-nav .col-md-7.right-nav .user-info .material-icons {
    display: none !important;
  }
  /* Centre Déconnexion sous le nom */
  .header-nav .col-md-7.right-nav .user-info:has(.logout) {
    align-items: center !important;
  }
}
@media (min-width: 992px) {
  .header-nav .col-md-7.right-nav .user-info:not(:has(.logout)) a::before {
    content: 'person' !important;
    font-family: 'Material Icons' !important;
    font-size: 20px !important;
    vertical-align: middle !important;
    margin-right: 4px !important;
  }
}


@media (min-width: 992px) {
  .header-nav .col-md-7.right-nav .user-info a span {
    text-transform: uppercase !important;
  }
}

@media (min-width: 992px) {
  .header-nav .col-md-7.right-nav {
    display: flex !important;
    align-items: center !important;
    gap: 30px !important;
  }
}


@media (min-width: 992px) {
  #search_widget input[type="text"] {
    pointer-events: auto !important;
    z-index: 10 !important;
    position: relative !important;
  }
}

#_desktop_logo {
  padding: 0;
}

#_desktop_logo a {
  display: block;
  width: 100%;
}

#_desktop_logo a img {
  display: block;
  width: 100%;
  height: auto;
}

.right-nav {
  pointer-events: none;
}

.right-nav * {
  pointer-events: auto;
}

.bf-section {
  margin-top: 20px !important;
}

@media (max-width: 991px) {
  .mm-section-title,
  .mm-grid-brands {
    display: none !important;
  }
}

/* ============================================================
   MENU MARQUES — Logos à leur taille réelle, sans déformation
   ============================================================ */

.mm-grid-brands {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px 5px !important;
}

.mm-grid-brands li,
.mm-brand-item {
  width: 200px !important;
  height: 90px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mm-brand-link,
.mm-grid-brands a {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mm-brand-img,
.mm-grid-brands img {
  width: auto !important;
  height: auto !important;
  max-width: 260px !important;
  max-height: 150px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Masquer l'onglet "Détail du produit" */
#product-details-tab,
a[href="#product-details"],
.tabs .nav-tabs li a[href="#product-details"],
.tabs .nav-tabs li:nth-child(2) {
    display: none !important;
}

/* Masquer le contenu associé */
#product-details,
.tab-pane#product-details {
    display: none !important;
}

/* Vire le focus bleu partout (liens, boutons, menu) */
*:focus,
*:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Mais garde un focus discret sur les champs de saisie (UX) */
input:focus,
textarea:focus,
select:focus {
    outline: 1px solid #e84b0a !important;
    box-shadow: none !important;
}



/* ===== FILTRE LATÉRAL "KITS ET BATTERIES" ===== */

/* Conteneur du bloc filtre */
#search_filters,
.block-categories {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 20px 18px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Titre "KITS ET BATTERIES" */
#search_filters h4,
#search_filters .h6,
.block-categories .category-top-menu > li > a,
.block-categories h4 {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 12px;
    margin-bottom: 14px !important;
    border-bottom: 2px solid #e84b0a;
    display: block;
}

/* Liste des marques / sous-catégories */
#search_filters ul,
.block-categories ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#search_filters li,
.block-categories li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #f5f5f5;
}

#search_filters li:last-child,
.block-categories li:last-child {
    border-bottom: none;
}

/* Liens des marques */
#search_filters li a,
.block-categories li a {
    display: block;
    padding: 5px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #444 !important;
    text-decoration: none !important;
    text-transform: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    position: relative;
}

/* Effet au survol */
#search_filters li a:hover,
.block-categories li a:hover {
    background: #fff5f0;
    color: #e84b0a !important;
    padding-left: 18px !important;
}

/* Petite flèche au survol */
#search_filters li a::before,
.block-categories li a::before {
    content: "›";
    position: absolute;
    left: 6px;
    opacity: 0;
    color: #e84b0a;
    font-weight: 700;
    transition: opacity 0.2s ease;
}

#search_filters li a:hover::before,
.block-categories li a:hover::before {
    opacity: 1;
}

/* Catégorie active */
#search_filters li.current a,
.block-categories li.current > a,
.block-categories li a.active {
    background: #e84b0a !important;
    color: #fff !important;
    font-weight: 700 !important;
}

#search_filters li.current a::before,
.block-categories li.current > a::before {
    color: #fff;
    opacity: 1;
}

/* Vire les traits orange sous les titres du filtre */
#search_filters h4,
#search_filters .h6,
#search_filters h3,
#search_filters .facet-title,
#search_filters section h4,
#search_filters section .h6 {
    border-bottom: none !important;
    padding-bottom: 4px !important;
}


/* ============================================================
   PAGE PRODUIT MOBILE — Corrections de débordement
   ============================================================ */
@media (max-width: 767px) {
    /* Champs de formulaire (variantes/déclinaisons) */
    .product-variants select,
    .product-variants input,
    .product-variants .form-control,
    .product-variants .input-container {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .product-variants {
        max-width: 100%;
        overflow-x: hidden;
    }
    /* Sécurité globale anti-débordement */
    .product-information,
    .product-actions {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Bouton "Prévenez-moi" qui déborde sur mobile */
    .js-mailalert .btn,
    .js-mailalert .btn-primary,
    .js-mailalert button {
        white-space: normal !important;
        word-wrap: break-word;
        max-width: 100%;
        font-size: 13px;
        padding: 12px 10px;
        line-height: 1.3;
    }
    .js-mailalert input[type="email"] {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Taille du prix sur les fiches produits */
.product-prices .current-price-value,
.product-prices .current-price span {
    font-size: 32px !important;
    font-weight: 700 !important;
    color:#E60230;
}

/* === MODAL DE ZOOM IMAGE PRODUIT === */

/* Header passe en dessous de la modal pour qu'elle soit visible en entier */
body.modal-open #header {
    z-index: 1 !important;
}

/* Cache la miniature parasite dans la modal */
#product-modal #thumbnails,
.modal.js-product-images-modal #thumbnails,
#product-modal .js-modal-mask,
.modal.js-product-images-modal .js-modal-mask {
    display: none !important;
}

/* Cache la légende de l'image (description doublonnée) */
#product-modal .image-caption,
.modal.js-product-images-modal .image-caption {
    display: none !important;
}

/* Croix de fermeture sur la modal de zoom produit */
#product-modal .modal-content,
.modal.js-product-images-modal .modal-content {
    position: relative !important;
}

#product-modal .lvpt-close-btn,
.modal.js-product-images-modal .lvpt-close-btn {
    position: absolute;
    top: 30px;
    right: 10px;
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    line-height: 1;
    padding: 0;
}

#product-modal .lvpt-close-btn:hover,
.modal.js-product-images-modal .lvpt-close-btn:hover {
    background: #f5f5f5;
    color: #000;
}





/* === PAGINATION CATÉGORIES — Style en boîtes === */
.pagination .page-list {
    display: inline-flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination .page-list li {
    display: inline-block;
    margin: 0;
}

.pagination .page-list li > a,
.pagination .page-list li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #d0d0d0;
    background: #fff;
    color: inherit;
    font-weight: bold;
    text-decoration: none;
    border-radius: 2px;
    transition: border-color 0.15s, background 0.15s;
}

.pagination .page-list li > a:hover {
    border-color: #888;
    background: #fafafa;
    text-decoration: none;
}

.pagination .page-list li.disabled > span {
    border-color: #eee;
    color: #ccc;
    cursor: default;
}

/* Page active : numéro en rouge */
.pagination .page-list li.current > span,
.pagination .page-list li.current > a,
.pagination .page-list li.active > span,
.pagination .page-list li.active > a,
.pagination .page-list li.page-item.active > .page-link {
    color: #CC0000 !important;
    border-color: #d0d0d0;
}

/* Flèches précédent / suivant */
.pagination .page-list li > a .material-icons {
    font-size: 18px;
    line-height: 1;
}




/* ===========================================================
   LVPT — Restylage des cartes produit (thème Classic PS 8)
   Style "meilleures ventes" : carte blanche arrondie, ombre douce,
   image centrée, nom orange centré, prix orange en gras.

   NON DESTRUCTIF : surcharge uniquement l'apparence.
   Pour revenir en arrière, il suffit de retirer ce fichier.

   Couleur d'accent : modifiez --lvpt-accent ci-dessous.
   =========================================================== */

:root{
  --lvpt-accent: #666666;     /* orange des noms et prix */
  --lvpt-card-radius: 10px;
  --lvpt-card-gap: 22px;
}

/* --- La carte produit entière --- */
.product-miniature{
  margin-bottom: var(--lvpt-card-gap);
}

.product-miniature .thumbnail-container,
.product-miniature .product-description{
  /* on neutralise d'éventuelles bordures/ombres par défaut du thème */
  box-shadow: none;
  border: 0;
}

/* Conteneur visuel de la carte : fond blanc, coins arrondis, ombre */
.product-miniature .thumbnail-container{
  background: #fff;
  border-radius: var(--lvpt-card-radius);
  box-shadow: 0 6px 22px rgba(0,0,0,.06);
  overflow: hidden;
  padding-bottom: 18px;
  transition: transform .2s ease, box-shadow .2s ease;
  height: auto;
}
.product-miniature .thumbnail-container:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

/* --- Image produit : entière (non rognée), centrée --- */
.product-miniature .thumbnail.product-thumbnail{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  position: static;          /* annule le positionnement absolu du thème */
}
.product-miniature .thumbnail.product-thumbnail img{
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

/* --- Zone texte sous l'image --- */
.product-miniature .product-description{
  padding: 0 18px;
  text-align: center;
}

/* Nom du produit : orange, majuscules, centré */
.product-miniature .product-title{
  margin: 6px 0 0;
  text-align: center;
}
.product-miniature .product-title a{
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #666666;
  text-decoration: none;
  line-height: 1.25;
}
.product-miniature .product-title a:hover{
  text-decoration: underline;
  color: var(--lvpt-accent);
}

/* Petit séparateur fin sous le nom (comme sur la capture) */
.product-miniature .product-title::after{
  content: "";
  display: block;
  width: 70%;
  height: 1px;
  background: #ececec;
  margin: 12px auto 0;
}

/* Prix : orange, gros, gras, centré */
.product-miniature .product-price-and-shipping{
  text-align: center;
  margin-top: 12px;
}
.product-miniature .product-price-and-shipping .price{
  font-size: 20px;
  font-weight: 800;
  color: #cc0000;
}

/* On laisse les boutons et le reste du thème tels quels.
   (Aucune règle sur .add-to-cart, .product-flags, etc.) */

/* --- Espacement de la grille (léger, optionnel) --- */
#products .products,
.featured-products .products,
.product-accessories .products{
  gap: var(--lvpt-card-gap) 0;
}
/* Titre des cartes produit : toujours 2 lignes exactement */
.product-miniature .product-title{
  min-height: 2.5em;          /* réserve 2 lignes même si le titre est court */
}
.product-miniature .product-title a{
  display: -webkit-box;
  -webkit-line-clamp: 2;       /* coupe à 2 lignes max si trop long */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}


/* === Cartes de même hauteur (structure réelle lvpt.fr) === */

/* La grille : les cartes d'une ligne s'étirent à la plus haute */
.products,
.featured-products .products,
.lvpt-featured-item{
  display: flex;
}
.lvpt-featured-item{
  height: 100%;
}

/* La carte occupe toute la hauteur dispo */
.product-miniature{
  display: flex;
  width: 100%;
}
.product-miniature .thumbnail-container{
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* La zone texte s'étire et empile en colonne */
.product-miniature .product-description{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Le bloc sélecteur + quantité + bouton est collé en bas */
.product-miniature .product-miniature-add-to-cart{
  margin-top: auto;
}

/* === Aligner les sélecteurs de saveur (même hauteur partout) === */

/* Hauteur fixe du menu déroulant : 1 seule ligne, le texte long est tronqué */
.product-miniature .variant-select{
  height: 42px;
  line-height: 1.4;
  margin-bottom: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Réserve la place du sélecteur même quand le produit n'en a pas,
   pour que la ligne quantité + bouton reste alignée partout */
.product-miniature .product-miniature-add-to-cart form{
  display: flex;
  flex-direction: column;
}
.product-miniature .product-miniature-add-to-cart form:not(:has(.variant-select))::before{
  content: "";
  display: block;
  height: 52px;          /* = hauteur sélecteur (42) + marge (10) */
}


/* === Zone image à hauteur fixe (titres alignés) === */
.product-miniature .thumbnail-top{
  height: 240px;               /* hauteur identique pour toutes les images */
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-miniature .thumbnail.product-thumbnail{
  width: 100%;
  height: 100%;
}
.product-miniature .thumbnail.product-thumbnail img{
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}


/* Force le titre produit à occuper 2 lignes (corrige les titres courts) */
.product-miniature .product-title a{
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  height: 2.5em !important;
  line-height: 1.25 !important;
}
/* Ombre des cartes un peu plus marquée */
.product-miniature .thumbnail-container{
  box-shadow: 0 6px 22px rgba(0,0,0,.13) !important;
}
.product-miniature .thumbnail-container:hover{
  box-shadow: 0 12px 30px rgba(0,0,0,.19) !important;
}

/* === Quantité + bouton alignés (vraie structure lvpt.fr) === */
.product-miniature .qty-add-to-cart{
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: nowrap;
}

/* Bloc quantité : largeur fixe compacte, flèches à droite */
.product-miniature .qty-add-to-cart .input-group.bootstrap-touchspin{
  flex: 0 0 72px;
  width: 72px;
  display: flex;
}
.product-miniature .qty-add-to-cart .qty-input{
  width: 100%;
  text-align: center;
}
.product-miniature .qty-add-to-cart .input-group-btn-vertical{
  display: flex;
  flex-direction: column;
}

/* Bouton : prend la place restante, taille normale */
.product-miniature .qty-add-to-cart .add-to-cart{
  flex: 1 1 auto;
  min-width: 0;              /* autorise le bouton à rétrécir */
  white-space: normal;       /* le texte peut passer sur 2 lignes si besoin */
  padding-left: 10px;
  padding-right: 10px;
  font-size: 13px;           /* un peu plus petit pour tenir */
  line-height: 1.15;
}



/* Slider d'accueil responsive */
#carousel,
.carousel,
#carousel .carousel-inner,
#carousel .carousel-item{
  max-width: 100%;
  overflow: hidden;
}
#carousel .carousel-item img,
.carousel .carousel-item img{
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}


/* === Slider d'accueil : images entières sur mobile === */
@media (max-width: 768px){
  #carousel,
  .carousel,
  #carousel .carousel-inner,
  #carousel .carousel-item,
  .slider-caption{
    height: auto !important;
    max-width: 100% !important;
    overflow: hidden;
  }
  #carousel .carousel-item img,
  .carousel .carousel-item img,
  #carousel img,
  .carousel img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
 * LVPT — Décalage du scroll pour la pagination
 * Réserve 200px au-dessus de la liste produits quand on scrolle vers elle,
 * pour que la 1ère ligne ne soit pas cachée sous le header fixe (≈188px)
 * lors du clic sur une page de pagination (cf. scrollIntoView dans custom.js)
 * ═══════════════════════════════════════════════════════════════════════ */
#js-product-list-top,
#js-product-list,
.products .product-miniature:first-child {
  scroll-margin-top: 200px;
}


/* ═══════════════════════════════════════════════════════════════════════
 * LVPT — Pagination : garde "Suivant" sur la même ligne que les chiffres
 * (la colonne .col-md-6 était trop étroite, "Suivant" passait en dessous)
 * ═══════════════════════════════════════════════════════════════════════ */
.pagination .page-list {
  display: flex;            /* aligne tous les boutons sur une rangée */
  flex-wrap: nowrap;        /* empêche le retour à la ligne de "Suivant" */
  justify-content: center;  /* centre la pagination */
  align-items: center;
  gap: 4px;                 /* petit espace entre les boutons */
}
.pagination .page-list li {
  float: none;              /* annule le float par défaut du thème */
  margin: 0;
}
.pagination .col-md-6.offset-md-2 {
  flex: 0 0 100%;           /* élargit la colonne à 100% pour faire de la place */
  max-width: 100%;
  margin-left: 0;           /* annule l'offset qui décalait la colonne */
}



/* ── Agrandir l'image dans l'aperçu rapide (Quick View) ── */
/* Cible la modale quickview (id dynamique → on matche par préfixe) */
[id^="quickview-modal"] .modal-body .images-container {
  width: 100% !important;
}
/* Le conteneur de l'image principale */
[id^="quickview-modal"] .modal-body .product-cover {
  width: 100% !important;
  max-width: 100% !important;
}
/* La balise <picture> qui entoure l'image */
[id^="quickview-modal"] .modal-body .product-cover picture {
  display: block !important;
  width: 100% !important;
}
/* L'image elle-même : remplit la colonne */
[id^="quickview-modal"] .modal-body img.js-qv-product-cover {
  width: 100% !important;
  height: auto !important;
  max-width: 450px !important;   /* ajuste : 400, 450, 500… */
  display: block !important;
  margin: 0 auto !important;
}

/* ── Élargir la modale Quick View elle-même ── */
[id^="quickview-modal"] .modal-dialog {
  max-width: 900px !important;   /* largeur totale de la popup */
  width: 90% !important;
}

/* La colonne de gauche (image) prend bien la moitié */
[id^="quickview-modal"] .modal-body .col-md-6:first-child {
  flex: 0 0 50% !important;
  max-width: 50% !important;
}

/* ── Forcer l'image à remplir la colonne (conteneurs flex) ── */
[id^="quickview-modal"] .modal-body .images-container {
  display: block !important;   /* annule le flex qui empêche l'étirement */
  width: 100% !important;
}

[id^="quickview-modal"] .modal-body .product-cover {
  width: 100% !important;
}

[id^="quickview-modal"] .modal-body .product-cover picture {
  display: block !important;
  width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * LVPT — Fix sauts de page Safari : hauteur fixe du carrousel
 * Safari recalcule la hauteur du carrousel à chaque changement de slide
 * (toutes les 3-4s), ce qui fait sauter tout le contenu en dessous.
 * On fige la hauteur pour stabiliser la page.
 * ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  /* Hauteur fixe du carrousel et de ses conteneurs internes */
  #carousel,
  #carousel .carousel-inner,
  #carousel .carousel-item,
  #carousel .carousel-item.active {
    height: 388px !important;
    min-height: 388px !important;
    max-height: 388px !important;
  }
  /* Les images remplissent ce cadre sans le déformer */
 #carousel .carousel-item img {
    height: auto !important;
    width: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
}
}@media (min-width: 992px) {
  /* Libère la hauteur de tous les conteneurs du slider */
  .lvpt-slider-wrap,
  #carousel,
  #carousel .carousel-inner,
  #carousel .carousel-item,
  #carousel .carousel-item.active,
  #carousel .carousel-item figure,
  #carousel .carousel-item a {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}


/* Encadré "Créez votre compte" - LVPT */
.no-account a {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 14px 28px;
  text-align: center;
  text-decoration: none;
  background: #fff;
}
.no-account a:hover {
  border-color: #e30613;
}
.no-account-title {
  display: block;
  color: #222;
  font-size: 1.6rem;
  font-weight: 400;
}
.no-account-subtitle {
  display: block;
  color: #e30613;
  font-size: 0.85rem;
  margin-top: 6px;
}

/* ===== Grille des marques en cartes blanches - LVPT ===== */

/* La grille : espacement régulier entre les cartes */
.mm-grid-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 10px 0;
}

/* Chaque case = une carte blanche */
.mm-grid-brands .mm-brand-item {
  flex: 0 0 calc(18% - 12px);
  background: #fbfbfb;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 18px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Effet au survol de la carte */
.mm-grid-brands .mm-brand-item:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transform: translateY(-2px);    /* la carte se soulève légèrement */
}

/* Le lien occupe toute la carte et centre le logo */
.mm-grid-brands .mm-brand-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Les logos EN COULEUR (on annule le filtre gris) */
.mm-grid-brands .mm-brand-img {
  filter: none !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 125px !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  transition: transform 0.2s ease;
}

/* Petit zoom du logo au survol (optionnel) */
.mm-grid-brands .mm-brand-item:hover .mm-brand-img {
  transform: scale(1.05);
}


/* ===== Responsive : grille des marques sur mobile/tablette ===== */

/* Tablette : 3 colonnes */
@media (max-width: 991px) {
  .mm-grid-brands .mm-brand-item {
    flex: 0 0 calc(33.333% - 14px) !important;  /* 3 par ligne */
    padding: 6px !important;
  }
  .mm-grid-brands .mm-brand-img {
    height: 75px !important;
  }
}

@media (max-width: 767px) {
  .mm-grid-brands {
    gap: 6px !important;
  }
  .mm-grid-brands .mm-brand-item {
    flex: 0 0 calc(33.333% - 6px) !important;
    padding: 2px !important;                /* encore moins de blanc (était 4px) */
    border-radius: 8px !important;
  }
  .mm-grid-brands .mm-brand-img {
    height: 80px !important;                /* logo plus grand (était 70px) */
    width: 100% !important;                 /* le logo prend toute la largeur */
  }
}

/* Le menu déroulant ne déborde pas horizontalement */
.mm-dropdown,
.mm-dropdown-inner {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}
/* Le contenu du menu déroulant reste centré et limité en largeur */
.mm-dropdown-inner {
  max-width: 1200px;        /* largeur max comme le reste du site */
  margin: 0 auto;           /* centre le bloc */
  padding-left: 15px;
  padding-right: 15px;
}
/* Le menu déroulant ne dépasse pas l'écran, scroll interne si besoin */
.mm-dropdown-inner {
  max-height: 75vh;        /* hauteur max = 75% de l'écran */
  overflow-y: auto;        /* scroll vertical si ça dépasse */
}
/* ===== Flèches de défilement du menu MARQUES ===== */

/* La barre qui contient les deux flèches, fixée en bas du menu */
/* Barre de flèches placée sur le côté droit, en vertical */
.mm-scroll-arrows {
  position: absolute;            /* positionnée par rapport au menu */
  top: 50%;                      /* centrée verticalement */
  right: 15px;                   /* collée à droite (mets "left: 15px" pour la gauche) */
  transform: translateY(-50%);   /* ajuste le centrage vertical */
  display: flex;
  flex-direction: column;        /* les flèches l'une SOUS l'autre */
  gap: 12px;                     /* espace entre les deux flèches */
  z-index: 10;
}

/* Chaque bouton flèche */
.mm-scroll-arrows button {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #e30613;           /* rouge LVPT */
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background 0.2s ease;
}

.mm-scroll-arrows button:hover {
  background: #b3050f;           /* rouge foncé au survol */
}

/* Désactive visuellement une flèche quand on ne peut plus scroller dans ce sens */
.mm-scroll-arrows button:disabled {
  opacity: 0.3;
  cursor: default;
}


/* Menu déroulant des suggestions de recherche :
   z-index élevé pour passer AU-DESSUS du menu de navigation et de la bannière,
   sinon la souris "traverse" ces éléments et la liste se ferme. */
.ui-autocomplete.searchbar-autocomplete {
  z-index: 100000 !important;   /* au-dessus du menu (qui est autour de 1000-9999) */
  background: #fff;             /* fond blanc opaque pour la lisibilité */
  border: 1px solid #ddd;
  max-height: 70vh;             /* évite que la liste dépasse l'écran */
  overflow-y: auto;             /* scroll interne si beaucoup de résultats */
}

/* ===== Grille de suggestions de recherche (style cartes produits) ===== */

/* Conteneur du menu : passe en grille 4 colonnes */
.ui-autocomplete.searchbar-autocomplete.lvpt-suggest-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 produits par ligne */
  gap: 4px;
  padding: 10px;
  max-height: 80vh;      /* limite la hauteur, scroll si besoin */
  overflow-y: auto;
  width: 900px;          /* largeur du panneau (ajuste si besoin) */
  max-width: 90vw;       /* ne dépasse pas l'écran */
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Chaque suggestion occupe une cellule (on retire le style liste par défaut) */
.lvpt-suggest-grid .lvpt-suggest-item {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

/* La carte cliquable : image en haut, texte en dessous, centré */
.lvpt-suggest-grid .lvpt-suggest-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 6px;
  border: 1px solid #e0e0e0 !important;   /* encadré léger, prioritaire sur jQuery UI */
  border-radius: 6px;
  text-decoration: none;
  color: #333;
  transition: border-color 0.15s ease;
  height: 100%;
}

/* Survol : PAS de fond, juste la bordure qui se teinte légèrement */
.lvpt-suggest-grid .lvpt-suggest-card:hover,
.lvpt-suggest-grid .ui-state-active .lvpt-suggest-card,
.lvpt-suggest-grid .ui-menu-item-wrapper.ui-state-active {
  background: transparent;   /* pas de fond au survol */
  border-color: #ccc;        /* bordure un peu plus visible au survol */
}

/* Image du produit : grande, format carré */
.lvpt-suggest-grid .lvpt-suggest-img {
  width: 110px;
  height: 110px;
  object-fit: contain;   /* garde les proportions sans déformer */
  margin-bottom: 8px;
}

/* Nom du produit : 2 lignes max, en majuscules comme ton exemple */
.lvpt-suggest-grid .lvpt-suggest-name {
  font-size: 13px;
  line-height: 1.3;
  text-transform: uppercase;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;        /* tronque à 2 lignes */
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}

/* Prix : rouge de ta charte, en gras */
.lvpt-suggest-grid .lvpt-suggest-price {
  font-size: 15px;
  font-weight: 700;
  color: #e60230;   /* rouge LVPT */
}

/* Neutralise le style par défaut de jQuery UI sur les items */
.lvpt-suggest-grid .ui-menu-item {
  margin: 0;
  padding: 0;
}
.lvpt-suggest-grid .ui-menu-item-wrapper {
  padding: 0;
  border: none;
}

/* Neutralise le fond gris par défaut de jQuery UI sur l'item actif */
.lvpt-suggest-grid .ui-menu-item-wrapper.ui-state-active,
.lvpt-suggest-grid .ui-state-focus,
.lvpt-suggest-grid .ui-state-active {
  background: transparent !important;
  border: none;
  margin: 0;
}


/* Retire l'ombre des vignettes de marques */
/* Vignettes de marques : contour léger, sans ombre portée */
.mm-grid-brands li,
.mm-brand-item {
  box-shadow: none !important;              /* pas d'ombre */
  border: 1px solid #cccccc !important;        /* contour très léger */
  border-radius: 0px !important;            /* coins arrondis (mets 0 si tu veux carré) */
}



/* Masque le lien "Vous avez un code promo ?" */
.block-promo .promo-code-button {
    display: none !important;
}

/* Affiche directement le champ du code promo */
.block-promo #promo-code.collapse {
    display: block !important;
}