:root{--content-width: 1900px;--content-edge-padding-x: 15px;--content-edge-padding-y: 50px;--font-size-body: 14px;--palette1: #f0d107!important;--palette2: #15285b!important;--palette3: #000000!important;--palette4: #666666!important;--palette5: #777777!important;--palette6: #888888!important;--palette7: #ededed!important;--palette8: #f0f0f0!important;--palette9: #ffffff!important;--palette10: #f0d107!important;--palette11: #15285b!important;}@media (min-width: 1025px){.container {max-width:1900px;}}@media (min-width: 1025px){.container {max-width:1900px;}}.hero-section .page-title-wrapper{min-height:50px;}/* Supprimer toute la section Sous-catégories sur les pages de catégories */ #subcategories, .block-category .subcategories, .block-category #subcategories { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ================================ HEADER + MEGAMENU (DESKTOP) Objectifs : - Bandeau plus fin - Logo moins envahissant - Dropdown collé au menu ==================================*/ @media (min-width: 992px){ /* 1) Réduire le bandeau (zone header) */ #header, #header .header-top, #header .header-nav, #header .header-top .container, #header .header-top .row { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; } /* 2) Réduire la "boîte" du logo (très souvent elle force la hauteur) */ #header .header-top .col-md-2, #header .header-top .col-lg-2, #header .header-top .col-md-3, #header .header-top .col-lg-3 { padding-top: 6px !important; padding-bottom: 6px !important; } /* Logo image */ #header .logo, #header #_desktop_logo img, #header .header-logo img, #header .header-top .logo img { max-height: 54px !important; /* ajuste 44-60 si besoin */ width: auto !important; height: auto !important; } /* 3) Menu sur une ligne si possible + moins haut */ #_desktop_megamenu .menu-content{ display: flex !important; align-items: center !important; flex-wrap: nowrap !important; /* si ça casse encore, on changera */ gap: 14px !important; } #_desktop_megamenu .menu-itemem > a, #_desktop_megamenu .menu-item > a, #_desktop_megamenu .menu-content .menu-item > a{ padding: 8px 10px !important; line-height: 18px !important; font-size: 13px !important; } /* 4) Dropdown collé sous le parent (corrige ton "écart") */ #_desktop_megamenu .menu-content .menu-item{ position: relative !important; } #_desktop_megamenu .menu-content .menu-item > .dropdown-menu{ top: calc(100% + 2px) !important; margin-top: 0 !important; } /* 5) Sécurise l'affichage au survol (évite la disparition quand tu descends la souris) */ #_desktop_megamenu .menu-content .menu-item:hover > .dropdown-menu{ display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } } /* ================================ FIX BANDEAU HEADER (DESKTOP) - VERSION "MARTEAU" ==================================*/ @media (min-width: 992px){ /* 0) Force le header à ne pas garder une hauteur mini */ header#header, #header, #header .header-top, #header .header-nav, #header .header-top .container, #header .header-nav .container, #header .header-top .row, #header .header-nav .row, #header .nav, #header .top-menu, #header .navbar { min-height: 0 !important; height: auto !important; } /* 1) Coupe la source la plus courante de "bandeau" : padding/margin */ header#header, #header, #header .header-top, #header .header-nav { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* 2) Les containers Bootstrap ajoutent souvent du padding vertical via des classes du thème */ #header .container, #header .container-fluid, #header .row { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* 3) Aligne tout au centre verticalement (sinon le thème garde de l’espace) */ #header .header-top .row, #header .header-nav .row { align-items: center !important; } /* 4) Boîte logo : c’est souvent ELLE qui impose la hauteur */ #_desktop_logo, #_desktop_logo a, #header .header-logo, #header .logo { display: flex !important; align-items: center !important; padding: 4px 0 !important; margin: 0 !important; line-height: 1 !important; } /* 5) Image logo : limite stricte */ #_desktop_logo img, #header .header-logo img, #header .logo img { max-height: 46px !important; /* baisse à 40 si tu veux encore plus fin */ width: auto !important; height: auto !important; display: block !important; } /* 6) Menu : réduit la hauteur des liens (souvent ça “gonfle” le bandeau) */ #_desktop_top_menu a, #_desktop_megamenu a, #header .top-menu a, #header .nav a { padding-top: 8px !important; padding-bottom: 8px !important; line-height: 16px !important; } /* 7) Si un wrapper du thème impose une hauteur (sticky/header wrapper), on neutralise */ .header-wrapper, .desktop-header, .sticky-header, .is-sticky #header { min-height: 0 !important; height: auto !important; padding-top: 0 !important; padding-bottom: 0 !important; } } @media (min-width: 992px){ /* Quand le thème active le sticky/fixed après chargement */ body #header.sticky, body #header.fixed, body #header.is-sticky, body header#header.sticky, body header#header.fixed, body header#header.is-sticky, body .sticky-header #header, body .is-sticky #header, body .stuck #header, body .header-sticky #header { min-height: 0 !important; height: auto !important; padding-top: 0 !important; padding-bottom: 0 !important; } body #header.sticky .header-top, body #header.fixed .header-top, body #header.is-sticky .header-top, body .sticky-header .header-top, body .is-sticky .header-top, body .stuck .header-top { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; height: auto !important; } } @media (min-width: 992px){ /* Cible normal + sticky (classes ajoutées après chargement) */ html body #header, html body header#header, html body #header.sticky, html body #header.fixed, html body #header.is-sticky, html body .sticky-header #header, html body .is-sticky #header, html body .stuck #header, html body .header-sticky #header, html body .header-nav, html body .header-top{ padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; height: auto !important; } /* Souvent la hauteur vient du container/row du header */ html body #header .container, html body #header .container-fluid, html body #header .row{ padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; height: auto !important; } /* Logo box + image (souvent c’est elle qui “gonfle”) */ html body #_desktop_logo, html body #_desktop_logo a, html body #header .logo, html body #header .header-logo{ display:flex !important; align-items:center !important; padding: 4px 0 !important; margin: 0 !important; line-height: 1 !important; min-height: 0 !important; height: auto !important; } html body #_desktop_logo img, html body #header .logo img, html body #header .header-logo img{ max-height: 46px !important; width: auto !important; height: auto !important; display:block !important; } } @media (min-width: 992px){ /* 1) Neutralise le header "fixed/sticky" (souvent la cause du bandeau) */ html body #header, html body header#header, html body #header * { transition: none !important; /* évite les animations qui donnent l'impression de "revenir" */ } /* 2) Si le thème met une hauteur en inline sur #header ou un wrapper */ html body #header[style], html body header#header[style], html body #header .header-top[style], html body #header .header-nav[style], html body #header .container[style], html body #header .row[style]{ height: auto !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* 3) Si le thème force le header en position fixed + top */ html body #header, html body header#header{ position: relative !important; top: auto !important; } /* 4) Logo */ html body #_desktop_logo img, html body #header .logo img{ max-height: 46px !important; width: auto !important; height: auto !important; } } @media (min-width: 992px){ /* Wrappers de thème très fréquents */ html body .header-wrapper, html body .desktop-header, html body .page-header, html body .main-header, html body .header-container, html body .nav-wrapper, html body .topbar, html body .header-top, html body .header-nav, html body header#header, html body #header{ padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; height: auto !important; } /* Neutralise une hauteur injectée en inline sur ces wrappers */ html body .header-wrapper[style], html body .desktop-header[style], html body .page-header[style], html body .main-header[style], html body .header-container[style], html body header#header[style], html body #header[style]{ height: auto !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } } @media (min-width: 992px){ /* Section Elementor du header */ header#header.site-header, header#header.site-header .elementor-section, header#header.site-header .elementor-section-wrap, header#header.site-header .elementor-inner, header#header.site-header .elementor-container { height: auto !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Classe Elementor qui force une hauteur minimale */ header#header.site-header .elementor-section-height-min-height { min-height: 0 !important; } /* Logo */ header#header.site-header img { max-height: 46px !important; width: auto !important; } } /* ================================ CARTES PRODUITS – STYLE PREMIUM ================================ */ .product-miniature, .product-grid .product-item, .js-product-miniature { background: #ffffff; border: none !important; border-radius: 8px; padding: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); transition: box-shadow 0.25s ease; } .product-miniature:hover, .product-grid .product-item:hover, .js-product-miniature:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.10); } /* Réduction des espaces verticaux */ .product-miniature .product-title, .product-miniature h3 { margin-top: 8px; margin-bottom: 6px; } .product-miniature .price { margin-top: 4px; } /* Bouton panier visible */ .product-miniature .add-to-cart, .product-miniature .ajax_add_to_cart_button { opacity: 1 !important; visibility: visible !important; margin-top: 10px; } /* Désactiver zoom image */ .product-miniature img { transform: none !important; transition: none !important; } /* Mobile */ @media (max-width: 768px) { .product-miniature { padding: 10px; } } /* Réduire l’espace au-dessus des images produits */ .product-miniature .thumbnail-container, .product-miniature .product-thumbnail { padding-top: 0 !important; margin-top: 0 !important; } /* Ajuster l’équilibre vertical de la carte */ .product-miniature { display: flex; flex-direction: column; justify-content: space-between; } .product-miniature { min-height: auto; } /* === SUPPRIMER LA MARQUE SUR LA FICHE PRODUIT UNIQUEMENT === */ .product-page .product-manufacturer, .product-page .manufacturer-name, .product-page .brand, .product-page .product-brand { display: none !important; } /* ========================= MASQUER LA MARQUE SUR LA FICHE PRODUIT (AVANAM / PS) ========================= */ /* Cibles PrestaShop classiques */ body#product .product-manufacturer, body#product .product-manufacturer-name, body#product .manufacturer_name, body#product .brand, body#product .product-brand, body#product .product-brand-name, body#product a[rel="brand"], body#product .product-manufacturer a, body#product .product-manufacturer img { display: none !important; } /* Variantes possibles de thème */ .page-product .product-manufacturer, .page-product .brand, .page-product .product-brand, .page-product a[rel="brand"] { display: none !important; } /* Si la marque est dans le header du bloc titre */ body#product .product_header .brand, body#product .product_header .product-brand, body#product .product_header .product-manufacturer { display: none !important; } /* ========================================= AVANAM / PRESTASHOP : MASQUER LA MARQUE SUR LA FICHE PRODUIT (sélecteurs larges mais limités à la zone produit) ========================================= */ body#product #main .product-info [class*="brand"], body#product #main .product-info [class*="Brand"], body#product #main .product-info [class*="manufacturer"], body#product #main .product-info [class*="Manufacturer"], body#product #main .product-information [class*="brand"], body#product #main .product-information [class*="Brand"], body#product #main .product-information [class*="manufacturer"], body#product #main .product-information [class*="Manufacturer"], body#product #main .product-detail [class*="brand"], body#product #main .product-detail [class*="manufacturer"], body#product #main .product-details [class*="brand"], body#product #main .product-details [class*="manufacturer"]{ display: none !important; } /* Masquer description catégorie sur mobile */ @media (max-width: 768px) { .category-description, .category-desc, .block-category, .block-category-inner { display: none !important; } } /* =========================== MOBILE: MASQUER TEXTE CATEGORIE (Avanam/PS) =========================== */ @media (max-width: 768px) { /* Pages catégorie uniquement */ body#category #content-wrapper .block-category, body#category #content-wrapper .category-description, body#category #content-wrapper #category-description, body#category #content-wrapper .category-desc, body#category #content-wrapper .block-category-inner, body#category #content-wrapper .category-cover, body#category #content-wrapper .category-cover + .category-description, body#category #main .block-category, body#category #main .category-description, body#category #main #category-description { display: none !important; } /* =========================== MENU PRINCIPAL: taille + casse (DESKTOP) =========================== */ @media (min-width: 992px){ #_desktop_megamenu .menu-content .menu-item > a{ font-size: 16px !important; /* ajuste 15-17 */ line-height: 20px !important; font-weight: 600 !important; /* 500 si tu veux plus fin */ text-transform: none !important; } @media (min-width: 992px){ body { outline: 5px solid red !important; } } /* Bouton WhatsApp flottant */ .wa-float{ position: fixed; right: 18px; bottom: 96px; z-index: 999999; width: 56px; height: 56px; border-radius: 50%; background:#25D366; box-shadow:0 8px 20px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; text-decoration:none !important; } body { outline: 8px solid red !important; } /* Supprime le trait rouge parasite sur les cartes produits (mobile) */ @media (max-width: 768px){ .product-miniature::before, .product-miniature::after, .product-miniature .thumbnail-container::before, .product-miniature .thumbnail-container::after, .product-miniature .product-description::before, .product-miniature .product-description::after, .products .product-item::before, .products .product-item::after, .products .product-miniature::before, .products .product-miniature::after{ content: none !important; display: none !important; background: transparent !important; border: 0 !important; } } @media (max-width: 768px){ .product-miniature, .product-miniature .thumbnail-container, .product-miniature .product-description{ background-image: none !important; border-top: 0 !important; border-bottom: 0 !important; box-shadow: none !important; } } } /* 3) Au cas où c’est une bordure d’accent rouge sur un wrapper */ #index .featured-products, #index .products, #index .product-list, #index .js-product-list{ background-image: none !important; border-top: 0 !important; border-bottom: 0 !important; } } @media (max-width: 768px){ *::-webkit-scrollbar{ height:0 !important; width:0 !important; } *{ scrollbar-width: none !important; } }