avec parfois un .card interne. On remet à zéro border/padding/shadow pour que seul le rendu .hb-product soit visible. */ .products article.product-miniature, .products .product-miniature, .products article.js-product-miniature { background: transparent; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; overflow: visible; list-style: none; } .products article.product-miniature > .card, .products .product-miniature > .card { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent; overflow: visible; padding: 0 !important; margin: 0 !important; } /* Les styles .product-miniature .card / .product-title / .price / .regular-price deviennent inutiles car la miniature CUBX utilise .hb-product__* (stylisable via h2jhomeblocks.css chargé via hookDisplayHeader). Conservés pour fallback au cas où un module tiers rendrait une miniature Classic brute. */ .product-miniature .card { border: 1px solid var(--h2j-border); border-radius: var(--cubx-radius); overflow: hidden; transition: box-shadow 0.2s; height: 100%; } .product-miniature .card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.1); } .product-miniature .product-title a { color: var(--h2j-text); font-weight: 600; font-size: 14px; } .product-miniature .price { color: var(--cubx-accent); font-weight: 700; font-size: 16px; } .product-miniature .regular-price { color: var(--h2j-text-light); text-decoration: line-through; font-size: 13px; } /* Badges */ .product-flag { border-radius: var(--cubx-radius); font-weight: 700; font-size: 11px; padding: 3px 8px; text-transform: uppercase; } .product-flag.new { background-color: var(--h2j-success); color: #fff; } .product-flag.on-sale, .product-flag.discount { background-color: var(--cubx-accent); color: #fff; } /* ══════════════════════════════════════════════════════════ 24. HERO ACTIVE — full-width container (v1.6.5) ========================================================= Fix de l'espace parasite entre le panel hero (à gauche) et le content column (à droite) sur pages catégorie avec hero-gallery. CAUSE : Le panel hero est `position: fixed; left: 0; width: var(--cubx-hero-w);` (38% par défaut), donc ancré sur le VIEWPORT. Mais `.cubx-hero-content` a `margin-left: 38%` calculé par rapport à son PARENT .container Bootstrap (max-width: 1280px, centré auto). Sur un viewport > 1280px, le .container est plus étroit que le viewport, donc 38% du container ≠ 38% du viewport → décalage visible entre le bord droit du panel hero et le premier élément du content. Exemple concret viewport 1920px : • Panel hero : 0 → 38% × 1920 = 730px • Container : centré, 1280px large, donc x=(1920-1280)/2=320px à 1600px • Content margin-left = 38% × 1280 = 486px (relatif au container) • Donc content commence à 320 + 486 = 806px (viewport) • GAP = 806 - 730 = 76px entre fin panel et début content FIX : Neutraliser les contraintes .container (max-width + padding-left/right) et .row (margin gutters Bootstrap) dans le scope d'une page hero-active. Même traitement que `body.page-index` applique pour la homepage. SÉLECTEUR : body:has(.cubx-hero-active) — supporté sur tous navigateurs modernes (Chrome 105+, Safari 15.4+, Firefox 121+). Fallback : la hero panel reste fonctionnelle sans ce fix sur vieux navigateurs, juste avec un léger gap. ═══════════════════════════════════════════════════════════ */ body:has(.cubx-hero-active) #wrapper > .container { max-width: none; padding-left: 0; padding-right: 0; width: 100%; } body:has(.cubx-hero-active) #wrapper > .container > .row { margin-left: 0; margin-right: 0; } body:has(.cubx-hero-active) #content-wrapper { padding-left: 0; padding-right: 0; } /* Neutralise également le padding Bootstrap 4 .card.card-block que Classic PS 8.2 applique au wrapper

. Sans ce fix, le card-block ajoute ~20px de padding-left supplémentaire qui s'ajoute au gap. */ body:has(.cubx-hero-active) .cubx-hero-content .card.card-block, body:has(.cubx-hero-active) .cubx-hero-content > #content.page-content, body:has(.cubx-hero-active) .cubx-hero-content section.page-content { padding-left: 0; padding-right: 0; background: transparent; border: none; box-shadow: none; } /* Sur mobile (<992px), la hero passe en statique pleine largeur (cf section 19), donc ces règles ne doivent pas s'appliquer : on restaure le comportement natif Bootstrap pour que le content bénéficie de ses paddings normaux. */ @media (max-width: 991px) { body:has(.cubx-hero-active) #wrapper > .container { max-width: 1280px; padding-left: 15px; padding-right: 15px; } body:has(.cubx-hero-active) #wrapper > .container > .row { margin-left: -15px; margin-right: -15px; } body:has(.cubx-hero-active) #content-wrapper { padding-left: 15px; padding-right: 15px; } } /* ══════════════════════════════════════════════════════════ 25. CATEGORY HEADER TOGGLES — v1.8.9 (Sprint cat header) ========================================================= Les 6 toggles BO (Thème CUBX > Category Page > Header + Toolbar) pilotent l'affichage des éléments suivants sur la page catégorie CUBX. Les classes html.cubx-cat-no-* sont ajoutées par h2jecosystem hookDisplayHeader (v2.14.10+) via un script inline sur avant le DOMContentLoaded, évitant le flash d'élément visible. Clés consommées : H2JCUBX_CAT_SHOW_BREADCRUMB → .cubx-cat-no-breadcrumb H2JCUBX_CAT_SHOW_TITLE → .cubx-cat-no-title H2JCUBX_CAT_SHOW_DESCRIPTION → .cubx-cat-no-description H2JCUBX_CAT_SHOW_FILTER → .cubx-cat-no-filter H2JCUBX_CAT_SHOW_SORT → .cubx-cat-no-sort H2JCUBX_CAT_SHOW_COUNT → .cubx-cat-no-count Description collapsible (H2JCUBX_CAT_DESC_COLLAPSIBLE + DESC_MAX_CHARS) est géré par JS dans cubx-core.js initCatDescCollapsible qui lit window.cubxCatDesc. ══════════════════════════════════════════════════════════ */ /* Breadcrumb : cache le wrapper injecté par cubx-theme + le nav Classic */ html.cubx-cat-no-breadcrumb .cubx-cat-breadcrumb-wrap, html.cubx-cat-no-breadcrumb body#category .breadcrumb, html.cubx-cat-no-breadcrumb body#category nav[aria-label="Breadcrumb"] { display: none !important; } /* Titre H1 catégorie */ html.cubx-cat-no-title body#category .block-category > h1, html.cubx-cat-no-title body#category .block-category > .h1, html.cubx-cat-no-title body#category .block-category h1.h1, html.cubx-cat-no-title body#category .page-heading { display: none !important; } /* Description catégorie (+ inner wrapper + bouton toggle collapsible) */ html.cubx-cat-no-description body#category #category-description, html.cubx-cat-no-description body#category .block-category-inner, html.cubx-cat-no-description body#category .cubx-cat-desc-toggle { display: none !important; } /* Si ni titre ni description : cache aussi le bloc .block-category pour éviter le padding vide */ html.cubx-cat-no-title.cubx-cat-no-description body#category .block-category { display: none !important; } /* Toolbar : bouton Filter */ html.cubx-cat-no-filter .cubx-cat-toolbar__btn--filter { display: none !important; } /* Toolbar : dropdown Sort (bouton + menu) */ html.cubx-cat-no-sort .cubx-cat-toolbar__sort { display: none !important; } /* Count "Il y a N produits" / "Showing X of Y" — déjà masqué par défaut (cf section 23 body#category .total-products { display:none !important }), mais on garde la règle cat-no-count explicite pour la cohérence + futur unhide si on le réintroduit visuellement en non-default. */ html.cubx-cat-no-count body#category .total-products, html.cubx-cat-no-count body#category #js-product-list-top .total-products, html.cubx-cat-no-count body#category .pagination__count, html.cubx-cat-no-count body#category .pagination-nav .text-muted, html.cubx-cat-no-count body#category .pagination-nav > p { display: none !important; } /* Si toolbar devient vide (ni filter ni sort ni density sur mobile), on cache la toolbar entière pour éviter le padding + bordures haut/bas vides. Le switcher density est masqué sur mobile uniquement, donc sur desktop s'il reste visible la toolbar reste affichée même avec cat-no-filter + cat-no-sort. */ html.cubx-cat-no-filter.cubx-cat-no-sort .cubx-cat-toolbar:not(:has(.cubx-cat-toolbar__density:not([hidden]))) { display: none !important; } /* ════════════════════════════════════════════════════════ 26. CATEGORY ADS FORMATS — v1.8.13 (h2jhomeblocks v3.33.0) ========================================================= Les ads peuvent prendre 4 formats de grille (champ BO) : - square → 1×1 (cellule standard, équivalent miniature produit) - tall → 1×2 (portrait, hauteur double — pinup pleine hauteur) - wide → 2×1 (bannère horizontale — ex: offre combo) - hero → 2×2 (hero promo, mis en avant maximal) Les classes .cubx-cat-ad-cell--fmt-{format} pilotent grid-column / grid-row. L'image conserve object-fit:cover (overflow caché), donc pas de crop disgracieux même si l'image source n'a pas le bon ratio. Responsive : - Desktop : formats appliqués tels quels - Tablet (768-992px) : wide/hero restent 2×X, mais comme la grille est en 3 colonnes, ça reste lisible - Mobile (< 768px) : tous les formats reviennent à 1×1 (square) car la grille 2 colonnes ne tolère pas un spread 2×X sans casser le layout IMPORTANT : l'algorithme de placement PHP (H2JHBAdMedia::placeRandom) ne connaît pas les formats — donc un wide/hero placé sur la dernière ligne peut déborder visuellement. Pour un comportement robuste, l'utilisateur BO peut limiter les formats non-carrés aux premières positions en ajustant le poids (weight élevé = placé en priorité). ════════════════════════════════════════════════════════ */ /* square = défaut, pas de span explicite (1×1) */ .cubx-cat-ad-cell--fmt-square { grid-column: span 1; grid-row: span 1; } /* tall = 1×2 (1 colonne, 2 lignes — portrait hauteur double) */ .cubx-cat-ad-cell--fmt-tall { grid-column: span 1; grid-row: span 2; aspect-ratio: auto; /* override du 1/1 imposé aux cellules standards */ } /* wide = 2×1 (2 colonnes, 1 ligne — bannère horizontale) */ .cubx-cat-ad-cell--fmt-wide { grid-column: span 2; grid-row: span 1; aspect-ratio: auto; } /* hero = 2×2 (2 colonnes, 2 lignes — hero promo maximal) */ .cubx-cat-ad-cell--fmt-hero { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } /* Image dans une cellule non-carrée : remplit entièrement la zone */ .cubx-cat-ad-cell--fmt-tall .cubx-cat-ad-cell__img, .cubx-cat-ad-cell--fmt-wide .cubx-cat-ad-cell__img, .cubx-cat-ad-cell--fmt-hero .cubx-cat-ad-cell__img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* Mobile : tous les formats redeviennent square pour que la grille 2 cols reste propre. Un hero 2×2 sur une grille 2 cols prendrait toute la ligne et la ligne suivante — mais ça casse le rythme visuel global. */ @media (max-width: 768px) { .cubx-cat-ad-cell--fmt-tall, .cubx-cat-ad-cell--fmt-wide, .cubx-cat-ad-cell--fmt-hero { grid-column: span 1; grid-row: span 1; aspect-ratio: 1 / 1; } } /* ══════════════════════════════════════════════════════════════════════ v2.5.96 — PAGINATION : Bouton "Back to top" intégré + page unique always-on ══════════════════════════════════════════════════════════════════════ Avant : Classic générait un bloc "Retour en haut" séparé sous la pagination, visible uniquement en mobile (.hidden-md-up). En début de session 29/04 nuit, David a proposé de l'intégrer dans la liste pagination en bout de ligne avec une icône ↑ et toujours visible. Après : pagination.tpl override CUBX expose toujours , même avec 1 page (suppression du `should_be_displayed` extérieur), avec un bouton .page-item--top en bout de liste. Le compteur "Showing 1-X of Y" s'affiche également en permanence (toggle BO H2JCUBX_CAT_SHOW_COUNT toujours respecté). Le bouton hérite des styles .page-link standard (40px carré, border, hover accent). Cette section ajoute juste une légère marge à gauche pour séparer visuellement "page navigation" de "action retour en haut". ══════════════════════════════════════════════════════════════════════ */ /* Sépare le bouton "retour en haut" du reste de la pagination */ .pagination-nav .page-item--top { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--h2j-border, #e5e7eb); } /* Le svg dans le bouton est chaîné à la couleur via stroke=currentColor : il hérite donc automatiquement de la couleur à l'état hover/focus. Pas de règle supplémentaire nécessaire ici. */ .pagination-nav .page-link--top svg { display: block; flex-shrink: 0; } /* Smooth scroll natif pour le retour en haut (et tout autre #anchor). Si dejà défini ailleurs en theme-core.css, cette règle est idempotente. */ html { scroll-behavior: smooth; } /* Mobile : la séparation visuelle reste utile mais on réduit l'espace */ @media (max-width: 560px) { .pagination-nav .page-item--top { margin-left: 8px; padding-left: 8px; } } /* ═══════════════════════════════════════════════════════════════════════ v2.4.0 — GRILLE CATÉGORIE : DENSITY OFFSET FO + HERO AUTO -2 ═══════════════════════════════════════════════════════════════════════ Modèle : - cols_baseline (BO) : valeur "Normal" choisie par l'admin (consomme --cubx-cat-grid-cols-no-hero) - density_offset (FO) : offset client {-2, -1, 0, +1, +2} posé via --cubx-density-offset sur par cubx-cat-density.js (localStorage) - hero_open offset (auto) : -2 quand hero ouvert - mobile (auto) : 2 cols figé, ignore tous les offsets Formule cols affichées (v2.4.1 — plancher 2) : cols = max(2, baseline + density_offset - (hero_open ? 2 : 0)) Niveaux density (4 — v2.4.1 : retrait "Très aéré") : +2 = Ultra-dense +1 = Dense 0 = Normal (défaut) -1 = Aéré Variables CSS : --cubx-cat-grid-cols-no-hero (BO baseline, default 4) --cubx-density-offset (FO, default 0) --cubx-cat-grid-cols-mobile (BO, default 2 — figé sur mobile) ═══════════════════════════════════════════════════════════════════════ */ /* Default offset = 0 si jamais le JS n'a pas encore posé la variable */ :root { --cubx-density-offset: 0; } /* Vue 1 — Desktop sans hero / hero fermé cols = max(2, baseline + density_offset) v2.4.1 : plancher 2 cols partout pour garantir la lisibilité */ #js-product-list .products { display: grid !important; grid-template-columns: repeat( max(2, calc(var(--cubx-cat-grid-cols-no-hero, 4) + var(--cubx-density-offset, 0))), 1fr ) !important; gap: 0 !important; } /* Vue 2 — Desktop avec hero ouvert cols = max(2, baseline + density_offset - 2) v2.4.1 : plancher 2 cols (clamp Aéré+hero à 2 au lieu de 1) */ body.cubx-hero-active:not(.cubx-hero-collapsed) #js-product-list .products { grid-template-columns: repeat( max(2, calc(var(--cubx-cat-grid-cols-no-hero, 4) + var(--cubx-density-offset, 0) - 2)), 1fr ) !important; } /* Vue 3 — Mobile (<768px) : 2 cols figé, ignore offset et hero */ @media (max-width: 768px) { #js-product-list .products, body.cubx-hero-active:not(.cubx-hero-collapsed) #js-product-list .products { grid-template-columns: repeat(var(--cubx-cat-grid-cols-mobile, 2), 1fr) !important; } } /* â”€â”€â”€ H2J MENU CATEGORIES â€” Footer actions (Home + Top) â”€â”€â”€ */ .cubx-menu-categories__actions { margin: 48px 0 0; padding: 24px 0 0; border-top: 1px solid var(--h2j-border, #e5e7eb); display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; } .cubx-menu-categories__actions .cubx-cms-home-btn-wrap { margin: 0; padding: 0; border-top: 0; flex: 0 0 auto; } .cubx-menu-categories__top-wrap { margin-top: 0; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .cubx-menu-categories__top-nav { margin: 0; } .cubx-menu-categories__top-nav .pagination { margin-bottom: 0; } .cubx-menu-categories__top-nav .page-item--top { margin-left: 0; padding-left: 0; border-left: 0; } @media (max-width: 560px) { .cubx-menu-categories__actions { margin-top: 32px; padding-top: 20px; gap: 12px; } .cubx-menu-categories__top-wrap { margin-top: 0; } }