#header .header-nav .blockcart { background: transparent }

.page-content.page-cms ul {  text-align: center}



/* ===================== WEB (≥ 768px) ===================== */
@media (min-width: 768px) {

  /* la barre mobile n'est pas utilisée sur le bureau */
  #header .header-nav { display: none; }

  #header {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: #fff;
    z-index: 999;
  }
  #header .header-top { padding: 15px 0; }

  /* ligne : logo | menu + icônes */
  #header .header-top > .container > .row {
    display: flex;
    align-items: center;
    margin: 0;
  }
  #header .header-top #_desktop_logo {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    float: none;
    padding: 0 15px 0 0;
  }
  #header .header-top .logo.img-fluid { max-width: 140px; height: auto; }

  #header .header-top .header-top-right {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    width: auto;
    max-width: none;
    float: none;
    padding: 0;
  }

  /* menu */
  #header #_desktop_top_menu {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    float: none;
  }
  #header #_desktop_top_menu .top-menu[data-depth="0"] { margin: 0; text-align: left; }
  #header .top-menu[data-depth="0"] > li { display: inline-block; }

  /* sous-menus : toujours juste sous le header */
  #header .top-menu .sub-menu {
    top: 100% !important;
    left: 0;
    right: 0;
    width: 100%;
    background: #fff;
  }

  /* icônes : recherche, favoris, compte, panier */
  #header #search_widget                 { order: 2; }
  #header #wishlist-link                 { order: 3; }
  #header #_desktop_user_info            { order: 4; }
  #header #_desktop_cart                 { order: 5; }

  #header #search_widget,
  #header #wishlist-link,
  #header #_desktop_user_info,
  #header #_desktop_cart {
    flex: 0 0 auto;
    float: none !important;
    width: auto !important;
    min-width: 0;
    max-width: none;
    height: 26px;
    margin: 0 0 0 18px !important;
    padding: 0;
    display: flex;
    align-items: center;
  }

  #header #search_widget { width: 26px !important; overflow: hidden; }
  #header #search_widget .sea { position: static; padding: 0; background: none; border: 0; cursor: pointer; }

  #header #_desktop_user_info .user-info { margin: 0; padding: 0; }
  #header #_desktop_cart .blockcart {
    height: auto; margin: 0; padding: 0; background: transparent;
  }
  #header #_desktop_cart .header { position: relative; line-height: 1; }
  #header #_desktop_cart .cart-products-count { top: -10px; right: -12px; font-size: 11px; }
  #header .bi:before { font-size: 22px; }

  /* le contenu ne passe pas sous le header fixe */
  #wrapper .breadcrumb { margin-top: 80px; }
}

/* écrans moyens : on resserre */
@media (min-width: 768px) and (max-width: 1100px) {
  #header #search_widget,
  #header #wishlist-link,
  #header #_desktop_user_info,
  #header #_desktop_cart { margin-left: 10px !important; }
  #header .top-menu a[data-depth="0"] { padding: 15px 7px; font-size: 12px; }
}


/* ===== MOBILE : mise en page de la barre (≤ 767px) ===== */
@media (max-width: 767px) {
 /* le contenu de la page commence sous la barre fixe */
  body { padding-top: 56px; }

  /* le bouton recherche garde sa taille d'icône */
  #header #search_widget .sea { padding: 0; background: none; border: 0; line-height: 1; }
  #header #search_widget { overflow: visible; }
	
  #header { position: fixed; top: 0; left: 0; right: 0; background: #fff; z-index: 999; }

  #header .header-nav {
    position: relative;
    z-index: 1000;
    max-height: none;
    background: #fff;
    border-bottom: 1px solid #eee;
  }
  #header .header-nav .container { padding: 0; width: 100% !important; }
  #header .header-nav .row { margin: 0; }

  #header .header-nav .mobile {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 12px;
    width: 100%;
  }
  #header .header-nav .mobile .clearfix { display: none; }
  #header .header-nav .mobile .float-xs-left,
  #header .header-nav .mobile .float-xs-right { float: none; }

  #menu-icon         { order: 1; margin: 0 !important; }
  #_mobile_logo      { order: 2; flex: 1; text-align: center; }
  #_mobile_user_info { order: 3; margin: 0 6px !important; }
  #_mobile_cart      { order: 4; margin: 0 !important; }

  #header .top-logo { position: static !important; display: block; min-height: 0; margin: 0; }
  #header .top-logo > a,
  #header .top-logo > h1 { margin: 0 !important; display: inline-block; }
  #header .logo,
  #header .top-logo img { height: 40px; width: auto; max-width: 120px; margin: 0; }

  #_mobile_user_info .user-info,
  #_mobile_cart .blockcart { margin: 0 !important; padding: 0 !important; height: auto !important; background: transparent; }
  #_mobile_cart .header { position: relative; line-height: 1; }
  #_mobile_cart .cart-products-count { top: -8px; right: -10px; font-size: 11px; }
  #_mobile_user_info .bi:before,
  #_mobile_cart .bi:before { font-size: 22px; }

  /* recherche et favoris : sur la même ligne, à gauche des icônes compte/panier */
  #header .header-top .container,
  #header .header-top .row { width: 100% !important; margin: 0; padding: 0; }
  #header .header-top .position-static { height: 0; position: static; }

  #header #search_widget {
    position: absolute !important;
    top: 15px;
    right: 100px;              /* à ajuster */
    width: 26px !important;
    min-width: 0;
    height: 26px;
    margin: 0 !important;
    padding: 0;
    float: none !important;
    z-index: 1001;
  }
  #header #wishlist-link {
    position: absolute;
    top: 15px;
    right: 66px;               /* à ajuster */
    width: 26px;
    margin: 0;
    float: none;
    z-index: 1001;
  }

  /* menu ouvert : sous la barre, sans recouvrir les icônes */
  #mobile_top_menu_wrapper {
    position: fixed !important;
    top: 56px;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    padding: 15px;
    height: calc(100vh - 56px);
    min-height: 0;
    overflow-y: auto;
    background: #fff;
    z-index: 999;
  }
  #mobile_top_menu_wrapper .top-menu a[data-depth="0"] { padding: 14px 10px; }

  /* recherche plein écran */
  #header #search_widget .block-form { height: 100vh; z-index: 999999; }
  #search_widget .form-search { width: 100%; padding: 0 16px; top: 60px; transform: translate(-50%, 0); }
  #search_widget .form-search .search_query { height: 52px; padding-right: 40px; }
  .close-overlay { top: 14px; right: 16px; }
}
/* ===== Pas de "saut" des icônes au chargement (mobile) ===== */
@font-face {
  font-family: "bootstrap-icons";
  font-display: block;               /* pas de texte de secours visible */
  src: url("bootstrap-icons.woff2") format("woff2"),
       url("bootstrap-icons.woff") format("woff");
}

@media (max-width: 767px) {

  /* les conteneurs desktop sont vides une fois le JS passé : on les masque dès le départ */
  #_desktop_cart,
  #_desktop_user_info,
  #_desktop_logo,
  #_desktop_top_menu { display: none !important; }

  /* la barre mobile a sa hauteur dès le premier affichage */
  #header .header-nav .mobile { min-height: 56px; }
  #header .header-nav { min-height: 56px; }

  /* emplacements réservés pour chaque élément */
  #menu-icon         { width: 28px; height: 28px; }
  #_mobile_logo      { min-width: 90px; min-height: 40px; }
  #_mobile_user_info { width: 26px; height: 26px; }
  #_mobile_cart      { width: 26px; height: 26px; }

  /* icône du menu : jamais de texte "menu" visible */
  #menu-icon .material-icons {
    width: 28px; height: 28px;
    font-size: 28px; line-height: 28px;
    overflow: hidden; display: inline-block;
  }

  /* icônes Bootstrap : boîte fixe, pas de décalage quand la police arrive */
  .bi::before { display: inline-block; width: 1em; height: 1em; line-height: 1; }

  /* le header-top ne pousse plus le contenu */
  #header .header-top { height: 0; min-height: 0; padding: 0; overflow: visible; }
}


@media (max-width: 767px) {

  /* la barre haute sert de repère de position */
  #header { position: fixed; }
  #header .header-top {
    position: static !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* la loupe remonte dans la barre, à gauche du compte */
  #header #search_widget.search-widget,
  #header .header-top #search_widget {
    position: fixed !important;
    top: 15px !important;
    right: 96px !important;     /* à ajuster : distance depuis le bord droit */
    left: auto !important;
    bottom: auto !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    overflow: visible !important;
    background: transparent !important;
    z-index: 1001;
  }

  #header #search_widget .sea {
    position: static !important;
    display: block;
    width: 26px;
    height: 26px;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    line-height: 26px;
  }<strong></strong>
  #header #search_widget .sea .bi:before { font-size: 22px; }

  /* la bande grise sous la barre disparaît */
  #header .header-top .container,
  #header .header-top .row,
  #header .header-top .header-top-right {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }
	

  /* ne cibler que les vrais conteneurs, pas le menu mobile */
  #header .header-top > .container > .row { height: 0 !important; }

  /* le header reste fixe même à l'ouverture (l'ancien CSS le passait en absolute) */
  #header.is-open { position: fixed !important; top: 0 !important; left: 0; right: 0; }

  /* menu mobile ouvert */
  #header #mobile_top_menu_wrapper.row {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(100vh - 56px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 15px !important;
    overflow-y: auto !important;
    background: #fff !important;
    z-index: 999 !important;
  }
	
	 /* grille 2 colonnes, sans marge négative de .row */
  #products .products.row,
  .featured-products .products.row,
  .product-accessories .products.row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 12px;
    margin: 0 !important;
    padding: 0 10px;
  }
  #products .products.row::before,
  #products .products.row::after { display: none; }

  /* chaque cellule */
  #products .js-product.product {
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
    min-width: 0;
  }
  #products .product-miniature {
    display: block;
    margin: 0;
    height: 100%;
  }

  /* carte */
  #products .product-miniature .thumbnail-container {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
  }

  /* image */
  #products .product-miniature .thumbnail-top {
    margin: 0;
    padding: 28px 8px 0;       /* place pour le badge promo */
    z-index: 1;
  }
  #products .product-miniature .product-thumbnail img {
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    transform: none !important; /* pas de zoom au toucher */
  }

  /* titre et prix */
  #products .product-miniature .product-description {
    flex: 1 1 auto;
    padding: 6px 8px 0;
    margin: 0;
    text-align: center;
  }
  #products .product-miniature .product-title {
    margin: 4px 0 6px;
    min-height: 0;
  }
  #products .product-miniature .product-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 17px;
    min-height: 34px;           /* 2 lignes : cartes alignées */
  }
  #products .product-miniature .product-price-and-shipping {
    font-size: 15px;
    line-height: 1.2;
  }
  #products .product-miniature .regular-price {
    display: block;
    font-size: 12px;
  }

  /* badge promo, en haut à gauche de la carte */
  #products .product-miniature .product-flags {
    top: 0; left: 0;
    width: auto;
    z-index: 3;
  }
  #products .product-miniature .product-flags li.product-flag {
    margin: 8px;
    padding: 3px 10px;
    font-size: 11px;
    border-radius: 12px;
  }
  #products .product-miniature .product-flags li.product-flag.hide { display: none; }

  /* boutons : œil, panier, cœur sur une ligne centrée */
  #products .product-miniature .highlighted-informations {
    position: static;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    padding: 6px 0 10px;
    margin: 0;
  }
  #products .product-miniature .highlighted-informations form { margin: 0; display: flex; }
  #products .product-miniature .button-hover {
    height: 30px;
    width: 30px;
    min-width: 0;
    padding: 0 !important;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    line-height: 1;
  }
  #products .product-miniature .bi:before { font-size: 20px; }

  /* œil : FontAwesome forcé (le texte Material ne s'affiche plus) */
  #products .material-icons.fa-eye {
    width: auto; height: auto;
    margin: 0;
    font-family: "FontAwesome" !important;
    font-size: 18px;
    font-weight: normal;
    line-height: 1;
  }
  #products .material-icons.fa-eye:before {
    content: "\f06e";
    font-family: "FontAwesome";
  }

  /* cœur (module wishlist) : plus de texte "favorite_border" */
  #products .wishlist-button { display: flex; }
  #products .wishlist-button-add {
    position: static !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  #products .wishlist-button-add .material-icons {
    position: relative;
    width: 22px; height: 22px;
    font-size: 0 !important;    /* cache le texte de la ligature */
  }
  #products .wishlist-button-add .material-icons::before {
    content: "\f415";           /* bi-heart : vérifiez le code dans bootstrap-icons.css */
    font-family: "bootstrap-icons" !important;
    font-size: 20px;
    line-height: 22px;
    color: #000;
    position: absolute;
    inset: 0;
    text-align: center;
  }
  #products .add-to-cart.out-of-stock { opacity: .35; }

  /* supprimer le padding des conteneurs imbriqués autour de la liste */
  #wrapper > .container,
  #content-wrapper,
  #main,
  #main .container,
  #products {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* le haut (titre, tri) garde un petit retrait */
  #js-product-list-top { padding: 0 8px; margin: 0; }

  /* grille : presque bord à bord */
  #products .products.row,
  .featured-products .products.row,
  .product-accessories .products.row {
    padding: 0 6px !important;
    column-gap: 6px;
    row-gap: 8px;
    margin: 0 !important;
  }

  /* carte : moins d'arrondi, moins de marges internes */
  #products .product-miniature .thumbnail-container { border-radius: 10px; }
  #products .product-miniature .thumbnail-top { padding: 22px 2px 0; }
  #products .product-miniature .product-description { padding: 4px 4px 0; }

  /* l'image remplit la carte */
  #products .product-miniature .product-thumbnail img {
    width: 100%;
    max-width: 100%;
  }

  /* pagination et "affichage" avec retrait léger */
  #products .pagination,
  #products .showing { padding: 17px 8px; }
}


/* un peu plus large : 3 colonnes */
@media (min-width: 600px) and (max-width: 767px) {
  #products .products.row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}