/* =============================================================================
   H2J Homeblocks — Front CSS v3.5.0
   v3.5.0 (13/04/2026) : Réintroduction du slider "Taille nom produit (px)" en BO.
     - .hb-product__name / .hb-flex-item__name : font-size consomme désormais
       var(--cubx-font-size-name, 10px) au lieu de la constante hardcodée 0.8rem.
     - Config BO : nouveau champ H2JHB_FONT_SIZE_NAME (min 8, max 20, défaut 10).
     - getCssVars() émet --cubx-font-size-name (annule la décision v3.3.7).
   v3.4.0 (13/04/2026) : Alignement visuel de la bande noire hover sur idyll.fr.
     - .hb-product__info / .hb-flex-item__info : padding 8px (au lieu de 4px),
       z-index 15 (au lieu de 8), `inset: auto 0 0 0` pour neutraliser tout
       `top` parasite venant du thème CUBX.
     - .hb-product__name / .hb-flex-item__name : margin-bottom 4px (au lieu de 2px),
       line-height 1.3 (au lieu de 1.2), max-height 2.6em (garde-fou 2 lignes).
     - .hb-cart-btn : `inset: auto 6px 6px auto` (neutralise `top` parasite qui
       causait `top:123.83px` en computed et stretchait le bouton verticalement),
       background rgba(255,255,255,.2) au lieu de .15, z-index 25 au lieu de 12,
       SVG 16x16 au lieu de 14x14.
   FIX: Toutes les variables visuelles alignées sur --cubx-* (définies par le
   thème CUBX ou par getCssVars() comme fallback quand CUBX absent).
   ============================================================================= */

/* ── Reset container ─────────────────────────────────────────────────────── */
.h2j-homeblocks-container,
.h2j-homeblocks-container *,
.h2j-homeblocks-container *::before,
.h2j-homeblocks-container *::after {
    box-sizing: border-box;
}

.h2j-homeblocks-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin: 0;
}

.hb-block {
    padding: 0;
    margin: 0;
}

.hb-block-title {
    /* v3.11.0 — Apparence pilotée par variables BO :
       --cubx-block-title-padding-v : padding vertical (0-30px), défaut 16px
       --cubx-block-title-font-size  : font-size (12-32px), défaut 20px
       --cubx-block-title-font-weight: 400/600/700, défaut 700
       Permet de passer d'un bandeau épais (h2j classique) à un titre discret
       (style idyll.fr) sans toucher au template. */
    font-size: var(--cubx-block-title-font-size, 20px);
    font-weight: var(--cubx-block-title-font-weight, 700);
    text-align: center;
    padding: var(--cubx-block-title-padding-v, 16px) 20px;
    margin: 0;
    color: var(--h2j-text, #1a1a1a);
    background: var(--h2j-bg-card, var(--h2j-bg, #fff));
}


/* =============================================================================
   HERO SLIDER
   ============================================================================= */

.hb-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.hb-hero__track {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: 100%;
}

/* ── Slide de base ── */
.hb-slide {
    grid-column: 1;
    grid-row: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility .6s ease;
    z-index: 0;
}
.hb-slide.is-active  { opacity: 1; visibility: visible; z-index: 2; }

.hb-slide > img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── Caption ── */
.hb-slide__caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 48px 40px 32px;
    background: linear-gradient(transparent, rgba(0,0,0,.65));
    color: #fff;
}
.hb-slide__title { font-size: 2.4rem; font-weight: 700; margin: 0 0 10px; }
.hb-slide__desc  { font-size: 1.05rem; margin: 0 0 18px; opacity: .9; }

/* ── Navigation ── */
.hb-hero__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 10; width: 48px; height: 48px; border: none; border-radius: 50%;
    background: rgba(255,255,255,.88); color: #333; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, transform .2s;
}
.hb-hero__arrow--prev { left: 18px; }
.hb-hero__arrow--next { right: 18px; }
.hb-hero__arrow:hover { background: var(--cubx-accent, var(--h2j-primary, #7c4dff)); color: #fff; }

.hb-hero__dots {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 10px; z-index: 10;
}
.hb-dot {
    width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%;
    background: transparent; cursor: pointer; padding: 0;
    transition: background .2s, border-color .2s;
}
.hb-dot.is-active,
.hb-dot:hover { background: var(--cubx-accent, var(--h2j-primary, #7c4dff)); border-color: var(--cubx-accent, var(--h2j-primary, #7c4dff)); }

/* ── Transition SLIDE ── */
.hb-hero--slide .hb-slide {
    transform: translateX(100%);
    transition: transform .6s ease, opacity .3s;
}
.hb-hero--slide .hb-slide.is-active { transform: translateX(0); }
.hb-hero--slide .hb-slide.hb-slide--out { transform: translateX(-100%); }

/* ── Transition ORIGAMI ── */
.hb-origami {
    position: relative; display: flex;
    width: 100%;
    perspective: 1200px;
}
.hb-origami__strip {
    width: 25%; position: relative;
    overflow: hidden;
    transform-origin: left center;
    backface-visibility: hidden;
}
.hb-origami__strip img { display: block; width: 400%; max-width: none; height: auto; }
.hb-origami__strip--1 img { margin-left: 0; }
.hb-origami__strip--2 img { margin-left: -100%; }
.hb-origami__strip--3 img { margin-left: -200%; }
.hb-origami__strip--4 img { margin-left: -300%; }

/* Shadow on folds */
.hb-origami__strip::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, transparent 50%);
    opacity: 0;
    pointer-events: none;
}

.hb-hero--origami .hb-hero__track {
    transform-style: preserve-3d;
}

.hb-hero--origami .hb-slide:first-child { position: relative; }
.hb-hero--origami .hb-slide:not(:first-child) { position: absolute; top: 0; left: 0; width: 100%; }
.hb-hero--origami .hb-slide {
    transition: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 0;
}
.hb-hero--origami .hb-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}
.hb-hero--origami .hb-slide.hb-origami--out {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}
.hb-hero--origami .hb-slide.hb-origami--in {
    opacity: 1;
    visibility: visible;
    z-index: 3;
}

.hb-hero--origami .hb-slide.hb-origami--out .hb-origami__strip {
    animation: hb-origami-out .7s cubic-bezier(.4,.2,.2,1) forwards;
}
.hb-hero--origami .hb-slide.hb-origami--out .hb-origami__strip:nth-child(1) { animation-delay: 0ms; }
.hb-hero--origami .hb-slide.hb-origami--out .hb-origami__strip:nth-child(2) { animation-delay: 70ms; }
.hb-hero--origami .hb-slide.hb-origami--out .hb-origami__strip:nth-child(3) { animation-delay: 140ms; }
.hb-hero--origami .hb-slide.hb-origami--out .hb-origami__strip:nth-child(4) { animation-delay: 210ms; }

.hb-hero--origami .hb-slide.hb-origami--out .hb-origami__strip::after {
    animation: hb-origami-shadow .7s ease forwards;
}

.hb-hero--origami .hb-slide.hb-origami--in .hb-origami__strip {
    animation: hb-origami-in .7s cubic-bezier(.4,.2,.2,1) forwards;
}
.hb-hero--origami .hb-slide.hb-origami--in .hb-origami__strip:nth-child(1) { animation-delay: 210ms; }
.hb-hero--origami .hb-slide.hb-origami--in .hb-origami__strip:nth-child(2) { animation-delay: 140ms; }
.hb-hero--origami .hb-slide.hb-origami--in .hb-origami__strip:nth-child(3) { animation-delay: 70ms; }
.hb-hero--origami .hb-slide.hb-origami--in .hb-origami__strip:nth-child(4) { animation-delay: 0ms; }

.hb-hero--origami .hb-slide.hb-origami--in .hb-origami__strip::after {
    animation: hb-origami-shadow .7s ease forwards;
}

@keyframes hb-origami-out {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(-90deg); }
}
@keyframes hb-origami-in {
    0%   { transform: rotateY(90deg); }
    100% { transform: rotateY(0deg); }
}

@keyframes hb-origami-shadow {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* ── Bouton CTA hero ── */
.hb-btn {
    display: inline-block;
    padding: 11px 28px;
    background: linear-gradient(135deg, var(--cubx-accent, var(--h2j-primary, #7c4dff)), var(--cubx-accent-2, var(--h2j-secondary, #651fff)));
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 700;
    font-size: .95rem;
    transition: opacity .2s;
}
.hb-btn:hover { opacity: .88; color: #fff; }


/* =============================================================================
   PRODUITS
   FIX v3.0.1 : toutes les variables visuelles consomment --cubx-*
   ============================================================================= */

.hb-products-grid {
    display: grid;
    grid-template-columns: repeat(var(--hb-cols, 4), 1fr);
    gap: 0;
}

/* ── Item produit ── */
.hb-product {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}
.hb-product--hide-desktop { display: none; }

.hb-product__link {
    display: block;
    width: 100%; height: 100%;
    position: relative;
    background: transparent;
}

.hb-product img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    /* FIX: consomme --cubx-grayscale (thème) avec fallback 0% */
    filter: grayscale(var(--cubx-grayscale, 0%));
    transition: filter .3s;
}
.hb-product:hover img {
    filter: none;
}

/* ── Overlay couleur — piloté par --cubx-* ── */
.hb-product::after {
    content: '';
    position: absolute; inset: 0;
    /* FIX: consomme --cubx-overlay-color et --cubx-blend-mode */
    background: var(--cubx-overlay-color, transparent);
    mix-blend-mode: var(--cubx-blend-mode, normal);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
    z-index: 2;
}
/* Overlay visible uniquement sur items marqués .has-overlay (JS aléatoire) */
.hb-product.has-overlay::after {
    opacity: var(--cubx-overlay-opacity, 1);
}
/* Au hover : overlay s'efface → image révélée */
.hb-product:hover::after { opacity: 0 !important; }

/* Supprimer pseudo-éléments parasites du thème */
.hb-product::before,
.hb-product__link::before,
.hb-product__link::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
}

/* ── Badges ── */
.hb-badges {
    position: absolute; top: 6px; left: 6px;
    display: flex; flex-direction: column; gap: 3px;
    z-index: 10; pointer-events: none;
}
.hb-badge {
    display: inline-flex; align-items: center;
    padding: 3px 6px; border-radius: 2px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; color: #fff;
    letter-spacing: .3px; white-space: nowrap;
    min-height: 18px; line-height: 1;
}
/* FIX: consomme --cubx-pill-* (système pastilles centralisé h2jecosystem v2.5.3)
   Les badges héritent de la palette sémantique du preset (success/danger/warning)
   sauf override explicite via BO (à venir en Phase 4). Fallbacks = valeurs WCAG AA
   d'idyll.fr v3.16.0 pour résilience si h2jecosystem absent.

   v2.14.0 — Toggles d'affichage par type via --cubx-show-badge-* (émis par
   H2JHomeBlocksConfig::getCssVars() selon H2JCUBX_BADGE_NEW/PROMO/BESTSELLER/STOCK).
   Fallback inline-flex conserve le comportement précédent si var absente. */
.hb-badge--new        { display: var(--cubx-show-badge-new,   inline-flex); background: var(--cubx-pill-positive,  #1a7a42); }
.hb-badge--promo      { display: var(--cubx-show-badge-promo, inline-flex); background: var(--cubx-pill-negative,  #b5201e); }
.hb-badge--top        { display: var(--cubx-show-badge-top,   inline-flex); background: var(--cubx-pill-attention, #a85d00); }
.hb-badge--stock      { display: var(--cubx-show-badge-stock, inline-flex); background: var(--cubx-pill-neutral,   #212121); }

/* ── Flyover info ── */
/* v3.4.0 : alignement visuel sur idyll.fr — padding 8px vertical,
   z-index 15 (au-dessus de l'overlay couleur), inset bottom forcé
   pour neutraliser tout `top` parasite venant du thème. */
.hb-product__info {
    position: absolute;
    inset: auto 0 0 0; /* top:auto right:0 bottom:0 left:0 — neutralise top parasite */
    /* v2.14.0 — Consomme --cubx-info-band-bg (gradient OR solid selon BO Theme > FX).
       Fallback #000 quand la var n'est pas émise (ex: theme non-CUBX sans h2jhomeblocks). */
    background: var(--cubx-info-band-bg, #000);
    padding: 8px 44px 8px 10px; /* v3.4.0 : retour 8px vertical (idyll.fr) */
    color: #fff;
    text-align: center;
    transform: translateY(100%);
    transition: transform .3s ease;
    z-index: 15; /* v3.4.0 : 15 (idyll.fr) au lieu de 8 */
    pointer-events: none;
}
.hb-product:hover .hb-product__info {
    transform: translateY(0);
}
.hb-product__name {
    /* v3.5.0 : consomme var(--cubx-font-size-name), configurable via BO
       (annule la décision v3.3.7 de le passer en constante 0.8rem) */
    font-size: var(--cubx-font-size-name, 10px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.3; /* v3.4.0 : 1.3 (idyll.fr) au lieu de 1.2 */
    margin: 0 0 4px; /* v3.4.0 : retour à 4px (idyll.fr) */
    padding: 0;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    max-height: 2.6em; /* v3.4.0 : garde-fou hauteur 2 lignes (idyll.fr) */
    width: 100%; text-align: center;
}
.hb-product__price       { font-size: var(--cubx-font-size-price, 16px); font-weight: 700; line-height: 1; text-align: center; display: block; margin: 0; }
.hb-product__price-old   { font-size: calc(var(--cubx-font-size-price, 16px) * 0.85); opacity: .7; text-decoration: line-through; margin-right: 6px; font-weight: 400; }

/* ── Bouton panier — carré coins arrondis, dans la bande noire ──
   v3.4.0 : `inset: auto 6px 6px auto` neutralise tout `top`/`left` parasite
   venant du thème CUBX qui appliquait du positionnement global aux <button>
   en `position: absolute` (causait `top: 123.83px` en computed style et
   stretchait le bouton verticalement). */
.hb-cart-btn {
    position: absolute;
    inset: auto 6px 6px auto; /* top:auto right:6 bottom:6 left:auto */
    width: 28px; height: 28px;
    background: rgba(255,255,255,.2); color: #fff; /* v3.4.0 : .2 (idyll.fr) au lieu de .15 */
    border: none; border-radius: 4px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateY(100%);
    transition: opacity .3s, transform .3s; z-index: 25; /* v3.4.0 : 25 (idyll.fr) au lieu de 12 */
}
.hb-cart-btn svg { width: 16px; height: 16px; } /* v3.4.0 : 16px (idyll.fr) au lieu de 14px */
.hb-product:hover .hb-cart-btn { opacity: 1; transform: translateY(0); }
.hb-cart-btn:hover {
    background: var(--cubx-accent, var(--h2j-primary, #7c4dff));
}
.hb-cart-btn--disabled {
    /* v3.16.0 — Rupture stock : style idyll.fr avec trait rouge diagonal.
       IMPORTANT : ne pas forcer opacity/background avec !important car ça
       écraserait le comportement d'apparition au hover (.hb-product:hover).
       Le cart reste caché par défaut et n'apparait qu'au hover de la tuile,
       comme le cart normal. Au hover : cursor not-allowed + visuel barré. */
    cursor: not-allowed;
    pointer-events: none;
}
/* Chariot (paths + circles) en gris sur disabled, indépendant du hover parent */
.hb-cart-btn--disabled svg { color: #ccc; }
.hb-cart-btn--disabled svg path,
.hb-cart-btn--disabled svg circle { stroke: #ccc; }
/* Trait rouge diagonal : la <line> insérée dans le SVG disabled (home.tpl) */
.hb-cart-btn--disabled svg line {
    stroke: var(--h2j-danger, #e74c3c);
}
/* Hover sur tuile avec cart disabled : pas de fond accent (évite le violet
   qui contredit le "interdit"), garde fond neutre semi-transparent. */
.hb-product:hover .hb-cart-btn--disabled {
    background: rgba(255, 255, 255, 0.2);
}


/* =============================================================================
   PRODUCT RATING STARS (v3.16.0)
   ============================================================================
   Design final acté avec user :
     - .hb-rating-widget  : badge rating permanent en TOP-RIGHT (hors .hb-badges
                            qui est top-left). Format compact ★ 4.5, fond noir,
                            étoile paramétrable via --cubx-rating-star.
     - .hb-rating--detailed : 5 étoiles détaillées + (count) dans la barre noire
                              qui remonte au hover. Prend toute la largeur utile.

   La barre noire s'agrandit automatiquement pour contenir :
     - ligne étoiles (12-13px) + margin
     - ligne nom produit (2 lignes max)
     - ligne prix

   Couleur étoile : --cubx-pill-star (fallback #f9ca24, jaune doré).
   S'inscrit dans le système pastilles centralisé h2jecosystem v2.5.3.
   Overridable via BO (à venir en Phase 4) : clé H2JCUBX_PILL_STAR.

   Data : injecté par H2JRatingProvider dans home.tpl. Cascade :
   h2jreviews → lgcomments → productcomments → MOCK déterministe.
*/

/* ---- Widget rating permanent (top-right de la tuile) ---- */
/* Positionné en top:6px right:6px (symétrique à .hb-badges top:6px left:6px).
   Fond noir #212121 → se démarque des badges colorés. Compact pour ne pas
   empiéter sur l'image. */
.hb-rating-widget {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 6px;
    background: #212121;
    color: #fff;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    min-height: 18px;
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: .3px;
}
.hb-rating-widget__star {
    font-size: 11px !important;
    line-height: 1;
    color: var(--cubx-pill-star, #f9ca24);
}
.hb-rating-widget__value {
    color: #fff;
}

/* ---- Étoiles détaillées (dans la barre noire au hover) ---- */
/* La barre noire .hb-product__info est en position absolue bottom:0 avec
   transform translateY(100%) au repos → translateY(0) au hover. Son hauteur
   est auto, déterminée par son contenu : étoiles + nom + prix.

   .hb-rating--detailed contient les 5 étoiles (star / star_half / star_border)
   plus le compteur (XX). Centré horizontalement, margin-bottom pour séparer
   du nom produit. */
.hb-rating--detailed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0 0 4px;
    line-height: 1;
    width: 100%;
    text-align: center;
}
.hb-rating__stars {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.hb-rating__star {
    font-size: 13px !important;
    line-height: 1;
    color: var(--cubx-pill-star, #f9ca24);
}
.hb-rating__star--empty {
    /* Étoiles vides en gris clair sur fond noir pour rester lisibles */
    color: rgba(255, 255, 255, 0.25);
}
.hb-rating__count {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1;
}


/* =============================================================================
   BRANDS
   ============================================================================= */

/* ── Grille ── */
.hb-brands-grid {
    display: grid;
    grid-template-columns: repeat(var(--hb-cols, 4), 1fr);
}

/* ── Carousel ── */
.hb-brands-carousel { overflow: hidden; width: 100%; }
.hb-brands-carousel__track {
    display: flex; flex-wrap: nowrap;
    animation: hb-carousel-scroll var(--hb-carousel-duration, 30s) linear infinite;
    width: max-content;
}
.hb-brands-carousel__track:hover { animation-play-state: paused; }
.hb-brands-carousel--reverse .hb-brands-carousel__track { animation-direction: reverse; }
@keyframes hb-carousel-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Brand item ── */
.hb-brand {
    display: block; position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    width: var(--hb-carousel-item-w, 25%);
}
.hb-brands-grid .hb-brand { width: 100%; }

.hb-brand img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
    filter: grayscale(var(--cubx-grayscale, 0%));
    transition: filter .3s;
}
.hb-brand:hover img { filter: none; }

/* Overlay sur brands */
.hb-brand::after {
    content: '';
    position: absolute; inset: 0;
    background: var(--cubx-overlay-color, transparent);
    mix-blend-mode: var(--cubx-blend-mode, normal);
    opacity: 0;
    pointer-events: none; transition: opacity .3s; z-index: 2;
}
.hb-brand.has-overlay::after { opacity: var(--cubx-overlay-opacity, 1); }
.hb-brand:hover::after { opacity: 0 !important; }

/* Bande nom — v3.10.2 : aligné sur le style .hb-product__info pour uniformité.
   Avant : background rgba(0,0,0,.88), padding 8px 6px, font-size .75rem (12px).
   Après : background #000 plein, padding 8px 10px, font-size aligned via --cubx-font-size-name.
   Même comportement hover (translateY 100% → 0) que les products. */
.hb-brand__name {
    position: absolute; bottom: 0; left: 0; right: 0;
    /* v2.14.0 — même logique que .hb-product__info : consomme --cubx-info-band-bg. */
    background: var(--cubx-info-band-bg, #000); color: #fff;
    text-align: center; padding: 8px 10px;
    font-size: var(--cubx-font-size-name, 10px);
    font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px;
    line-height: 1.3;
    transform: translateY(100%); transition: transform .3s;
    z-index: 15;
}
.hb-brand:hover .hb-brand__name { transform: translateY(0); }


/* =============================================================================
   IMAGES GRILLES
   ============================================================================= */

.hb-images-grid {
    display: grid;
    grid-template-columns: repeat(var(--hb-cols, 4), 1fr);
}

.hb-image {
    position: relative; overflow: hidden;
    aspect-ratio: 1 / 1;
}
/* Single image: no forced aspect ratio */
.hb-images-grid--single .hb-image { aspect-ratio: auto; }
.hb-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: grayscale(var(--cubx-grayscale, 0%));
    transition: filter .3s;
}
.hb-image:hover img { filter: none; }

.hb-image::after {
    content: '';
    position: absolute; inset: 0;
    background: var(--cubx-overlay-color, transparent);
    mix-blend-mode: var(--cubx-blend-mode, normal);
    opacity: 0;
    pointer-events: none; transition: opacity .3s; z-index: 2;
}
.hb-image.has-overlay::after { opacity: var(--cubx-overlay-opacity, 1); }
.hb-image:hover::after { opacity: 0 !important; }


/* =============================================================================
   REASSURANCE
   ============================================================================= */

.hb-reassurance-grid {
    display: grid;
    grid-template-columns: repeat(var(--hb-cols, 4), 1fr);
    gap: 0;
}
.hb-reassurance-item {
    text-align: center; padding: 32px 20px;
}
.hb-reassurance-icon {
    width: 60px; height: 60px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cubx-accent, var(--h2j-primary, #7c4dff)), var(--cubx-accent-2, var(--h2j-secondary, #651fff)));
    display: flex; align-items: center; justify-content: center;
}
.hb-reassurance-icon i { font-size: 28px; color: #fff; }
.hb-reassurance-title { font-size: 1rem; font-weight: 700; margin: 0 0 6px; }
.hb-reassurance-desc  { font-size: .875rem; color: var(--h2j-text-light, #666); margin: 0; }


/* =============================================================================
   VIDEO
   ============================================================================= */

.hb-video { position: relative; width: 100%; background: #000; }
.hb-video__wrap { position: relative; }
.hb-video__el { display: block; width: 100%; height: auto; }

.hb-video__replay,
.hb-video__cta {
    position: absolute; width: 48px; height: 48px; bottom: 18px;
    border: none; border-radius: 50%; display: flex;
    align-items: center; justify-content: center;
    cursor: pointer; transition: transform .2s, background .2s;
    z-index: 10;
}
.hb-video__replay {
    right: 18px;
    background: rgba(255,255,255,.9); color: #333;
    opacity: 0; pointer-events: none;
}
.hb-video.video-ended .hb-video__replay { opacity: 1; pointer-events: auto; }
.hb-video__replay:hover { transform: scale(1.1); background: #fff; }
.hb-video__replay i { font-size: 26px; }

.hb-video__cta {
    left: 18px;
    background: var(--cubx-accent, var(--h2j-primary, #7c4dff)); color: #fff;
    text-decoration: none;
}
.hb-video__cta:hover { transform: scale(1.1); }
.hb-video__cta i { font-size: 22px; }


/* =============================================================================
   TICKER
   ============================================================================= */

.hb-ticker {
    background: var(--hb-ticker-bg, #2d3436);
    color: var(--hb-ticker-color, #fff);
    overflow: hidden; width: 100%;
    padding: 12px 0;
    /* Distance d'animation : -50% en fallback (pour content > viewport),
       remplacé par -<runWidth>px par initTicker() au load. */
    --hb-ticker-distance: -50%;
}
.hb-ticker__track {
    display: flex;
    width: max-content;
    animation: hb-ticker-scroll var(--hb-ticker-speed, 30s) linear infinite;
}
.hb-ticker[data-pause-hover="1"]:hover .hb-ticker__track { animation-play-state: paused; }
.hb-ticker__run {
    display: flex; align-items: center; gap: 24px;
    padding: 0 12px; white-space: nowrap;
    flex: 0 0 auto;
}
@keyframes hb-ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(var(--hb-ticker-distance, -50%)); }
}
.hb-ticker__item {
    display: inline-flex; align-items: center; gap: 6px;
    color: inherit; text-decoration: none; font-size: .9rem; font-weight: 500;
}
.hb-ticker__item:hover { opacity: .8; }
a.hb-ticker__item:hover { text-decoration: underline; }
.hb-ticker__item i { font-size: 18px; color: inherit; }
.hb-ticker__emoji { font-size: 18px; }
.hb-ticker__sep { opacity: .45; font-size: .75rem; }


/* =============================================================================
   TAGS
   ============================================================================= */

.hb-tags {
    background: var(--hb-tags-bg, #f5f0e8);
    padding: 36px 24px;
    text-align: center;
}
.hb-tags__list {
    display: flex; flex-wrap: wrap;
    justify-content: center; gap: 10px;
    max-width: 980px; margin: 0 auto;
    list-style: none; padding: 0;
}
.hb-tag {
    display: inline-block;
    background: var(--hb-tag-bg, #3d3329);
    color: var(--hb-tag-color, #fff);
    padding: 9px 18px; border-radius: 24px;
    font-size: .875rem; font-weight: 500;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
a.hb-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    color: var(--hb-tag-color, #fff);
    text-decoration: none;
}


/* =============================================================================
   FLEX MIX
   Uniform grid of heterogeneous items (products / brands / custom images).
   Same aspect ratio for every cell — esprit CUBX uniforme.
   Overlay, grayscale and blend mode all consume --cubx-* variables.

   v3.10.2 : .hb-flex-item peut maintenant être soit un <a> (brand, image)
   soit un <div> (product avec bouton panier externe). Quand c'est un <div>,
   il contient un <a class="hb-flex-item__link"> et un <button class="hb-cart-btn">.
   ============================================================================= */

.hb-flex-grid {
    display: grid;
    grid-template-columns: repeat(var(--hb-cols, 4), 1fr);
    grid-auto-rows: 1fr;
    gap: 0;
}

/* v3.22.0 — Desktop/mobile grid toggle.
   Renderer outputs 2 grids with explicit 2D placement (via Manager::buildFlexGrid),
   one per viewport. The mobile grid has its own items list (pubs with
   mobile_hidden are filtered, auto-placement is applied). This toggle swaps
   which grid is displayed based on viewport width. Items inside each grid
   use inline style="grid-column:X/span N;grid-row:Y/span M;" for explicit
   placement, which takes priority over any data-size-based rule below. */
.hb-flex-grid--mobile { display: none; }

@media (max-width: 767px) {
    .hb-flex-grid--desktop { display: none; }
    .hb-flex-grid--mobile  { display: grid; }
}

/* v3.18.1 — Intrusive ad cells can span multiple cols/rows.
   Applied via data-size="NxM" attribute on .hb-flex-item--pub.
   v3.22.0 — These span rules are now FALLBACKS : the template emits explicit
   inline `grid-column:X/span N;grid-row:Y/span M;` on each item which overrides
   these. They're kept for visual aspect-ratio purposes and for robustness if
   items ever lack explicit coords (shouldn't happen post-v3.22.0).
   Horizontal spans (NxA): span N columns, keep 1 row. Aspect ratio preserved.
   Vertical spans (1xM):  span 1 column, keep M rows. Aspect ratio preserved. */
.hb-flex-item[data-size="2x1"] { aspect-ratio: 2 / 1; }
.hb-flex-item[data-size="3x1"] { aspect-ratio: 3 / 1; }
.hb-flex-item[data-size="4x1"] { aspect-ratio: 4 / 1; }
.hb-flex-item[data-size="1x2"] { aspect-ratio: 1 / 2; }
.hb-flex-item[data-size="1x3"] { aspect-ratio: 1 / 3; }

/* v3.22.0 — Legacy mobile collapse rules removed : Manager::buildFlexGrid('mobile')
   now handles mobile placement natively (mobile_hidden filter + auto-placement
   with span adapted to cols_mobile/rows_mobile). The aspect-ratio rules above
   still apply so mobile-visible pubs keep their shape. */

.hb-flex-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: block;
    text-decoration: none;
    color: inherit;
}

/* v3.10.2 : Le <a> interne dans une cellule product (quand c'est un <div>) */
.hb-flex-item__link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
    color: inherit;
}
.hb-flex-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(var(--cubx-grayscale, 0%));
    transition: filter .3s;
}
.hb-flex-item:hover img { filter: none; }

/* Overlay (color tint / blend-mode) — piloté par --cubx-* via h2jecosystem.
   Same behaviour as .hb-product / .hb-brand / .hb-image: random items get
   .has-overlay added by initOverlay() in h2jhomeblocks.js. */
.hb-flex-item::after {
    content: '';
    position: absolute; inset: 0;
    background: var(--cubx-overlay-color, transparent);
    mix-blend-mode: var(--cubx-blend-mode, normal);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
    z-index: 2;
}
.hb-flex-item.has-overlay::after { opacity: var(--cubx-overlay-opacity, 1); }
.hb-flex-item:hover::after { opacity: 0 !important; }

/* Bypass theme pseudo-elements that could interfere */
.hb-flex-item::before {
    display: none !important;
    content: none !important;
}

/* Badges (position identique à .hb-product) */
.hb-flex-item .hb-badges {
    position: absolute; top: 6px; left: 6px;
    display: flex; flex-direction: column; gap: 3px;
    z-index: 10; pointer-events: none;
}

/* Flyover info — bandeau bas qui remonte au hover, identique à .hb-product__info */
/* v3.4.0 : alignement sur .hb-product__info (8px vertical, z-index 15, inset top auto) */
.hb-flex-item__info {
    position: absolute;
    inset: auto 0 0 0;
    /* v2.14.0 — même logique que .hb-product__info : consomme --cubx-info-band-bg. */
    background: var(--cubx-info-band-bg, #000);
    padding: 8px 44px 8px 10px; /* v3.4.0 : retour 8px vertical (idyll.fr) */
    color: #fff;
    text-align: center;
    transform: translateY(100%);
    transition: transform .3s ease;
    z-index: 15;
    pointer-events: none;
}
.hb-flex-item:hover .hb-flex-item__info { transform: translateY(0); }

.hb-flex-item__name {
    /* v3.5.0 : consomme var(--cubx-font-size-name), identique à .hb-product__name */
    font-size: var(--cubx-font-size-name, 10px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.3;
    margin: 0 0 4px; /* v3.4.0 : retour à 4px (idyll.fr) */
    padding: 0;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    max-height: 2.6em;
    width: 100%; text-align: center;
}
.hb-flex-item__price {
    font-size: var(--cubx-font-size-price, 16px);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    display: block;
    margin: 0;
}
.hb-flex-item__price-old {
    font-size: calc(var(--cubx-font-size-price, 16px) * 0.85);
    opacity: .7;
    text-decoration: line-through;
    margin-right: 6px;
    font-weight: 400;
}

/* Brand and image cells use the same cover behaviour as products,
   so every cell looks visually identical (esprit CUBX uniforme).
   PrestaShop manufacturer images are usually exported by PS itself
   on a clean background, so cover works well in practice. */
.hb-flex-item--brand img,
.hb-flex-item--image img {
    object-fit: cover;
}

/* v3.10.2 : Pour les cellules brand et image qui n'ont pas de bouton panier,
   le label de la bande hover est centré symétriquement (pas de décalage à gauche).
   Override du padding 8px 44px 8px 10px de .hb-flex-item__info qui réserve
   l'espace du cart-btn pour les products. */
.hb-flex-item--brand .hb-flex-item__info,
.hb-flex-item--image .hb-flex-item__info {
    padding: 8px 10px;
}

/* v3.10.2 : Bouton panier dans .hb-flex-item--product
   Même comportement que .hb-cart-btn dans .hb-product : apparait au hover
   du parent .hb-flex-item, position bottom-right, même style.
   Le bouton est placé EN DEHORS du <a class="hb-flex-item__link"> pour respecter
   la règle HTML "pas de button dans a" + compatibilité Safari iOS. */
.hb-flex-item--product .hb-cart-btn {
    position: absolute;
    inset: auto 6px 6px auto;
    width: 28px; height: 28px;
    background: rgba(255,255,255,.2); color: #fff;
    border: none; border-radius: 4px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateY(100%);
    transition: opacity .3s, transform .3s;
    z-index: 25;
}
.hb-flex-item--product .hb-cart-btn svg { width: 16px; height: 16px; }
.hb-flex-item--product:hover .hb-cart-btn { opacity: 1; transform: translateY(0); }
.hb-flex-item--product .hb-cart-btn:hover {
    background: var(--cubx-accent, var(--h2j-primary, #7c4dff));
}
.hb-flex-item--product .hb-cart-btn--disabled {
    /* v3.16.0 — Rupture stock dans les blocs flex-mix : même logique que standard.
       Pas de !important sur opacity/background : respecte le hover d'apparition. */
    cursor: not-allowed;
    pointer-events: none;
}
.hb-flex-item--product .hb-cart-btn--disabled svg { color: #ccc; }
.hb-flex-item--product .hb-cart-btn--disabled svg path,
.hb-flex-item--product .hb-cart-btn--disabled svg circle { stroke: #ccc; }
.hb-flex-item--product .hb-cart-btn--disabled svg line {
    stroke: var(--h2j-danger, #e74c3c);
}
.hb-flex-item--product:hover .hb-cart-btn--disabled {
    background: rgba(255, 255, 255, 0.2);
}


/* =============================================================================
   RICHTEXT
   ============================================================================= */

.hb-richtext {
    padding: 24px;
    line-height: 1.65;
}


/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 991px) {

    .hb-product--hide-desktop  { display: block; }
    .hb-product--hide-mobile   { display: none !important; }

    .hb-products-grid { grid-template-columns: repeat(var(--hb-cols-mob, 2), 1fr); }
    .hb-brands-grid   { grid-template-columns: repeat(var(--hb-cols-mob, 2), 1fr); }
    .hb-images-grid   { grid-template-columns: repeat(var(--hb-cols-mob, 2), 1fr); }
    .hb-reassurance-grid { grid-template-columns: repeat(var(--hb-cols-mob, 2), 1fr); }
    .hb-flex-grid     { grid-template-columns: repeat(var(--hb-cols-mob, 2), 1fr); }

    .hb-slide__caption  { padding: 24px 20px 18px; }
    .hb-slide__title    { font-size: 1.5rem; }
    .hb-slide__desc     { font-size: .9rem; }

    .hb-ticker { padding: 9px 0; }
    .hb-ticker__item { font-size: .83rem; }
}

@media (max-width: 576px) {
    .hb-hero__arrow { width: 38px; height: 38px; }
    .hb-hero__arrow--prev { left: 8px; }
    .hb-hero__arrow--next { right: 8px; }
    .hb-hero__arrow i { font-size: 20px; }
}

/* =========================================================================
   v3.12.0 — FOOTER COLUMNS
   Multi-column footer block with 5 column sub-types:
   links · contact · about · newsletter · social
   ========================================================================= */
.hb-footer-cols {
    display: grid;
    grid-template-columns: repeat(var(--hb-fc-count, 4), minmax(0, 1fr));
    gap: 32px 40px;
    padding: 40px 20px;
    color: var(--cubx-footer-color, inherit);
}
.hb-footer-cols--auto { grid-template-columns: repeat(var(--hb-fc-count, 4), minmax(0, 1fr)); }
.hb-footer-cols--2-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hb-footer-cols--3-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hb-footer-cols--4-col { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.hb-footer-col { min-width: 0; }

.hb-footer-col__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cubx-footer-title-color, inherit);
}

/* Links list */
.hb-footer-col__links {
    list-style: none;
    margin: 0; padding: 0;
}
.hb-footer-col__links li { margin: 0 0 8px; }
.hb-footer-col__links a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.85;
    transition: opacity .15s, color .15s;
}
.hb-footer-col__links a:hover {
    opacity: 1;
    color: var(--cubx-primary, #5d4e8c);
}

/* Contact list */
.hb-footer-col__contact {
    list-style: none;
    margin: 0; padding: 0;
}
.hb-footer-col__contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 0.9rem;
    line-height: 1.5;
}
.hb-footer-col__contact li i.material-icons {
    font-size: 18px;
    opacity: 0.7;
    flex-shrink: 0;
    margin-top: 2px;
}
.hb-footer-col__contact a {
    color: inherit;
    text-decoration: none;
}
.hb-footer-col__contact a:hover { color: var(--cubx-primary, #5d4e8c); }

/* About — logo + text */
.hb-footer-col__image {
    display: block;
    max-width: 180px;
    height: auto;
    margin: 0 0 16px;
}
.hb-footer-col__text {
    font-size: 0.875rem;
    line-height: 1.6;
    opacity: 0.85;
}

/* Newsletter */
.hb-footer-col__subtitle {
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 12px;
    opacity: 0.85;
}
.hb-footer-col__newsletter { margin: 0 0 10px; }
.hb-newsletter-row {
    display: flex;
    gap: 0;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}
.hb-newsletter-row input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 0.875rem;
    outline: none;
}
.hb-newsletter-row input[type="email"]::placeholder { opacity: 0.5; }
.hb-newsletter-row button {
    padding: 0 18px;
    border: none;
    background: var(--cubx-primary, #5d4e8c);
    color: #fff;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background .15s;
}
.hb-newsletter-row button:hover:not(:disabled) {
    background: var(--cubx-primary-dark, #4a3e70);
}
.hb-footer-col__newsletter--disabled .hb-newsletter-row { opacity: 0.5; }
.hb-footer-col__newsletter--disabled input[type="email"],
.hb-footer-col__newsletter--disabled button { cursor: not-allowed; }
.hb-footer-col__gdpr {
    font-size: 0.75rem;
    line-height: 1.4;
    margin: 8px 0 0;
    opacity: 0.65;
}

/* Social */
.hb-footer-col__social {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    gap: 10px;
}
.hb-footer-col__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    text-decoration: none;
    transition: background .15s;
}
.hb-footer-col__social a:hover { background: var(--cubx-primary, #5d4e8c); color: #fff; }
.hb-footer-col__social i.material-icons { font-size: 18px; }

/* Mobile stacking */
@media (max-width: 767px) {
    .hb-footer-cols { grid-template-columns: 1fr; gap: 28px; padding: 28px 16px; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .hb-footer-cols--auto,
    .hb-footer-cols--3-col,
    .hb-footer-cols--4-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =============================================================================
   PRODUCT INFO DISPLAY TOGGLES (v2.14.0)
   =============================================================================
   Les 4 toggles BO (Thème CUBX > Product info display) pilotent l'affichage
   de name/price/cart/strikethrough sur toutes les miniatures rendues par
   h2jhomeblocks. Les valeurs sont injectées par H2JHomeBlocksConfig::getCssVars()
   sous forme de 4 CSS vars --cubx-show-* qui prennent soit le display d'origine
   (visible), soit 'none' (caché). Le fallback couvre le cas "var absente" (theme
   non-CUBX sans h2jhomeblocks chargement défaillant) pour laisser tout visible.

   Keys BO → CSS var → selectors :
     H2JCUBX_PROD_SHOW_NAME          → --cubx-show-name          → .hb-product__name,        .hb-flex-item__name
     H2JCUBX_PROD_SHOW_PRICE         → --cubx-show-price         → .hb-product__price,       .hb-flex-item__price
     H2JCUBX_PROD_SHOW_STRIKETHROUGH → --cubx-show-strikethrough → .hb-product__price-old,   .hb-flex-item__price-old
     H2JCUBX_PROD_SHOW_CART          → --cubx-show-cart          → .hb-cart-btn (+ disabled)

   Note : .hb-brand__name n'est PAS dans la liste car le nom de brand est la
   seule info affichée dans la bande hover — le masquer supprimerait toute info.
   ========================================================================== */
.hb-product__name,
.hb-flex-item__name {
    display: var(--cubx-show-name, -webkit-box);
}
.hb-product__price,
.hb-flex-item__price {
    display: var(--cubx-show-price, block);
}
.hb-product__price-old,
.hb-flex-item__price-old {
    display: var(--cubx-show-strikethrough, inline);
}
.hb-cart-btn,
.hb-cart-btn--disabled {
    display: var(--cubx-show-cart, flex);
}

/* =============================================================================
   RATING STARS VISIBILITY TOGGLES (v2.14.0)
   =============================================================================
   2 toggles BO (Thème CUBX > Product info display > Rating badge / Rating in info band)
   pilotent l'affichage des étoiles sur les cards produit. Les valeurs sont injectées
   par H2JHomeBlocksConfig::getCssVars() sous forme de CSS vars --cubx-show-rating-*.

   Keys BO → CSS var → selectors :
     H2JCUBX_PROD_SHOW_RATING_BADGE  → --cubx-show-rating-badge  → .hb-rating-widget (top-right)
     H2JCUBX_PROD_SHOW_RATING_INLAND → --cubx-show-rating-inland → .hb-rating--detailed (info band)

   Couleur de l'étoile : --cubx-pill-star (≠ toggle : géré par H2JCUBX_PILL_STAR,
   section Pastilles du BO). Le CSS .hb-rating-widget__star et .hb-rating__star
   consomme déjà cette var — rien à ajouter ici.
   ========================================================================== */
.hb-rating-widget {
    display: var(--cubx-show-rating-badge, inline-flex);
}
.hb-rating--detailed {
    display: var(--cubx-show-rating-inland, flex);
}

/* =============================================================================
   PROMO COUNTDOWN BLOCK (v3.27.1)
   =============================================================================
   Bloc polymorphe .hb-promo avec 3 layouts banner :
     banner_1line, banner_2lines, banner_3lines

   v3.27.1 : les layouts hero_fullwidth et hero_boxed ont été supprimés.
   Le bloc prend 100% de son parent .hb-block naturellement, exactement
   comme le bloc copyright — aucun wrapper container, aucun max-width,
   aucun hack fullwidth.

   Variantes couleur (bg_mode) :
     hb-promo--bg-dark   : fond sombre (--hb-promo-bg) + accent vif
     hb-promo--bg-accent : fond = couleur accent + CTA en dark pour contraste

   Le timer est rendu par H2JTimer::renderStandaloneTimer() via le template
   partial h2j_timer.tpl de h2jecosystem. Les classes .h2j-timer--* sont
   donc déjà stylisées ailleurs.

   CSS vars consommées :
     --hb-promo-bg     : couleur de fond (dark mode)
     --hb-promo-accent : couleur accent (CTA, code value)
     --hb-promo-text   : couleur texte principale
   Toutes injectées inline sur .hb-promo par home.tpl.
   ========================================================================== */

/* Base commune aux 3 layouts banner — aligné sur le pattern copyright.
   Le bloc n'a AUCUN margin, AUCUN border-radius, AUCUN max-width.
   Il prend 100% de son parent .hb-block (qui est padding:0;margin:0 dans
   le container flex .h2j-homeblocks-container) et se colle naturellement
   aux blocs adjacents. C'est l'approche copyright bar — simple et robuste. */
.hb-promo {
    position: relative;
    margin: 0;
    background: var(--hb-promo-bg, #0a0a10);
    color: var(--hb-promo-text, #ffffff);
    box-sizing: border-box;
    overflow: hidden;
}

/* Mode accent : fond = couleur accent color (plus agressif visuellement) */
.hb-promo--bg-accent {
    background: var(--hb-promo-accent, #f43f5e);
}

/* .hb-promo__inner : conteneur interne qui tient les paddings.
   Pas de max-width — le bandeau prend toute la largeur du parent. */
.hb-promo__inner {
    position: relative;
    box-sizing: border-box;
}

/* ─── EYEBROW (petit texte au-dessus du title) ─── */
.hb-promo__eyebrow {
    font-size: 11px;
    letter-spacing: 0.22em;
    font-weight: 600;
    opacity: 0.85;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
    color: var(--hb-promo-text, #ffffff);
}

/* ─── TITLE ─── */
.hb-promo__title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.2rem;
    color: var(--hb-promo-text, #ffffff);
}

.hb-promo__subtitle {
    font-size: 13px;
    opacity: 0.8;
    margin: 0 0 0.6rem;
    color: var(--hb-promo-text, #ffffff);
}

/* ─── TIMER WRAPPER ─── */
.hb-promo__timer {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}

/* Le timer intérieur (.h2j-timer--*) est indépendant. On force son
   alignement centré pour les layouts qui le centrent, et on s'assure
   qu'il hérite de nos couleurs. */
.hb-promo__timer .h2j-timer {
    margin: 0 auto;
}

/* ─── CODE PROMO (copiable) ─── */
.hb-promo__code {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px dashed rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    font-size: 14px;
    vertical-align: middle;
}

.hb-promo__code-label {
    font-size: 13px;
    opacity: 0.75;
    font-family: inherit;
    font-weight: 400;
    letter-spacing: normal;
}

.hb-promo__code-value {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--hb-promo-accent, #f43f5e);
}

.hb-promo--bg-accent .hb-promo__code-value {
    color: #ffffff;
}

.hb-promo__code-copy {
    border: 0;
    background: rgba(255, 255, 255, 0.16);
    color: var(--hb-promo-text, #ffffff);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.hb-promo__code-copy:hover {
    background: rgba(255, 255, 255, 0.28);
}
.hb-promo__code-copy:active {
    transform: scale(0.96);
}
.hb-promo__code-copy.is-copied {
    background: #22c55e;
    color: #ffffff;
}

/* ─── CTA BUTTON (inline pour tous les layouts banner) ─── */
.hb-promo__cta {
    display: inline-block;
    padding: 8px 16px;
    background: var(--hb-promo-accent, #f43f5e);
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    transition: filter 0.15s, transform 0.1s;
    box-sizing: border-box;
}
.hb-promo__cta:hover {
    filter: brightness(1.12);
}
.hb-promo__cta:active {
    transform: scale(0.98);
}

/* Sur fond accent : le CTA doit trancher → passe en dark */
.hb-promo--bg-accent .hb-promo__cta {
    background: #0a0a10;
    color: #ffffff !important;
}

/* Alias legacy — les 3 layouts banner utilisent tous le style inline compact.
   Conservé pour compat avec le markup qui pose encore la classe --inline. */
.hb-promo__cta--inline {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
}

/* =============================================================================
   LAYOUTS BANNER (1/2/3 lignes)
   ========================================================================== */

/* Le timer en mode banner est compact. Override local pour neutraliser
   toute marge qu'un theme tiers pourrait ajouter. */
.hb-promo--banner_1line .hb-promo__timer,
.hb-promo--banner_2lines .hb-promo__timer,
.hb-promo--banner_3lines .hb-promo__timer {
    margin: 0;
    vertical-align: middle;
}

/* ---- BANNER 1 LIGNE : tout inline, compact ---- */
.hb-promo--banner_1line .hb-promo__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 24px;
    text-align: left;
}
.hb-promo--banner_1line .hb-promo__eyebrow {
    margin: 0;
    font-size: 11px;
}
.hb-promo--banner_1line .hb-promo__title,
.hb-promo--banner_1line .hb-promo__title--inline {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}
.hb-promo--banner_1line .hb-promo__code {
    padding: 5px 10px;
    font-size: 13px;
}

/* ---- BANNER 2 LIGNES : 2 lignes empilées, chacune inline ---- */
.hb-promo--banner_2lines .hb-promo__inner {
    padding: 18px 24px;
    text-align: center;
}
.hb-promo--banner_2lines .hb-promo__line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.hb-promo--banner_2lines .hb-promo__line--1 {
    margin-bottom: 10px;
}
.hb-promo--banner_2lines .hb-promo__line--2 {
    gap: 14px;
}
.hb-promo--banner_2lines .hb-promo__eyebrow {
    margin: 0;
    font-size: 11px;
}
.hb-promo--banner_2lines .hb-promo__title {
    font-size: 18px;
    margin: 0;
}

/* ---- BANNER 3 LIGNES : eyebrow / title / ligne d'action ---- */
.hb-promo--banner_3lines .hb-promo__inner {
    padding: 22px 24px;
    text-align: center;
}
.hb-promo--banner_3lines .hb-promo__line--1.hb-promo__eyebrow {
    margin-bottom: 4px;
    font-size: 11px;
}
.hb-promo--banner_3lines .hb-promo__line--2.hb-promo__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px;
}
.hb-promo--banner_3lines .hb-promo__line--3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* =============================================================================
   RESPONSIVE MOBILE
   — Banner 1 ligne : passe en colonne sur mobile pour lisibilité.
   — Banner 2 & 3 lignes : réduction des fonts, paddings compactés.
   ========================================================================== */
@media (max-width: 768px) {
    .hb-promo__title {
        font-size: 18px;
    }
    .hb-promo__subtitle {
        font-size: 13px;
    }
    .hb-promo__cta {
        padding: 7px 14px;
        font-size: 12px;
    }

    /* Banner 1 ligne : passe en colonne sur mobile pour garder lisibilité */
    .hb-promo--banner_1line .hb-promo__inner {
        flex-direction: column;
        gap: 10px;
        padding: 14px 16px;
        text-align: center;
    }

    /* Banner 2 & 3 lignes : l'inline déjà flex-wrap, juste réduire fonts */
    .hb-promo--banner_2lines .hb-promo__title,
    .hb-promo--banner_3lines .hb-promo__line--2.hb-promo__title {
        font-size: 16px;
    }
    .hb-promo--banner_2lines .hb-promo__inner,
    .hb-promo--banner_3lines .hb-promo__inner {
        padding: 16px 16px;
    }

    /* Code promo plus compact sur mobile */
    .hb-promo__code {
        font-size: 13px;
        padding: 6px 10px;
        gap: 8px;
    }
    .hb-promo__code-value {
        font-size: 13px;
    }
}

/* Petits écrans (<480px) : le timer digital peut déborder. On réduit un
   cran supplémentaire pour éviter l'overflow horizontal. */
@media (max-width: 480px) {
    .hb-promo__title {
        font-size: 18px;
    }
    .hb-promo__timer .h2j-timer--digital {
        font-size: 0.85em;
    }
}

/* ═══════════════════════════════════════════════════════════
   BESTSELLERS RANKED — v3.28.0 (Sprint 1 Catégorie)
   =========================================================
   Mode de rendu alternatif du bloc bestsellers avec pastilles
   numérotées centrées sur chaque cube produit. Consommé par
   H2JHomeBlocksRenderer::renderBestsellersRanked() depuis le
   thème CUBX sur la page catégorie (et potentiellement ailleurs).

   STRUCTURE MARKUP :
     .hb-bestsellers-ranked               wrapper + CSS vars pill colors
       h2.hb-bestsellers-ranked__title    titre TOP VENTES
       .hb-bestsellers-ranked__grid--initial   grille N produits visibles
         .hb-product.hb-product--ranked
           .hb-product__rank-pill        pastille centrée (NEW)
           + markup .hb-product standard
       button.hb-bestsellers-ranked__more-toggle  barre "plus de bestsellers"
       .hb-bestsellers-ranked__grid--more   grille masquée, révélée au clic

   COULEURS :
     --hb-pill-bg    : fond pastille (default #d4af37 gold, configurable BO)
     --hb-pill-color : couleur chiffre pastille (default #ffffff, configurable BO)
   ═══════════════════════════════════════════════════════════ */
.hb-bestsellers-ranked {
    margin: 24px 0;
}

.hb-bestsellers-ranked__title {
    text-align: center;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 2px;
    font-size: clamp(20px, 2.5vw, 32px);
    margin: 0 0 20px;
    padding: 16px 20px;
    background: transparent;
    color: var(--h2j-text, #1a1a1a);
    line-height: 1.1;
}

/* Pastille de rang en bas du cube (v3.28.3) — discrète, centrée horizonta-
   lement au ras du bas. Taille réduite à 36px (vs 60px en v3.28.2, 90px en
   v3.28.0) pour laisser voir l'article. Au repos : cercle opaque, numéro
   lisible. Au hover : fade out + scale down pour révéler le produit +
   laisser l'info-band remonter par-dessus. Font Georgia pour le caractère
   éditorial. */
.hb-product--ranked {
    position: relative;
}

.hb-product__rank-pill {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--hb-pill-bg, #d4af37);
    color: var(--hb-pill-color, #ffffff);
    font-size: 18px;
    font-weight: 800;
    font-family: Georgia, 'Times New Roman', serif;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4; /* au-dessus image/badges/rating-widget mais en-dessous de l'info-band au hover */
    pointer-events: none; /* clic traverse vers le lien produit */
    transition: opacity 0.25s ease, transform 0.25s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    line-height: 1;
    user-select: none;
}

.hb-product--ranked:hover .hb-product__rank-pill,
.hb-product--ranked:focus-within .hb-product__rank-pill {
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
}

/* Responsive : légère réduction sur tablet/mobile pour rester proportion- */
/* nelle aux cubes plus petits. */
@media (max-width: 768px) {
    .hb-product__rank-pill {
        width: 32px;
        height: 32px;
        font-size: 16px;
        bottom: 6px;
    }
}

@media (max-width: 480px) {
    .hb-product__rank-pill {
        width: 28px;
        height: 28px;
        font-size: 14px;
        bottom: 5px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    }
}

/* Barre "plus de bestsellers" — bouton full-width entre les 2 grilles */
.hb-bestsellers-ranked__more-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 20px;
    margin: 0;
    background: transparent;
    border: none;
    border-top: 1px solid var(--h2j-border, #e5e5e5);
    border-bottom: 1px solid var(--h2j-border, #e5e5e5);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--h2j-text-light, #666);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    font-family: inherit;
}

.hb-bestsellers-ranked__more-toggle:hover {
    background-color: rgba(0, 0, 0, 0.03);
    color: var(--cubx-accent, var(--h2j-primary, #7c4dff));
}

.hb-bestsellers-ranked__more-toggle:focus-visible {
    outline: 2px solid var(--cubx-accent, var(--h2j-primary, #7c4dff));
    outline-offset: -2px;
}

.hb-bestsellers-ranked__more-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

/* Au clic, le bouton bascule aria-expanded=true et le wrapper reçoit is-expanded
   → flèche retournée + grille "more" révélée */
.hb-bestsellers-ranked.is-expanded .hb-bestsellers-ranked__more-icon {
    transform: rotate(180deg);
}

/* Grille "more" cachée par défaut, révélée au clic */
.hb-bestsellers-ranked__grid--more {
    display: none;
}

.hb-bestsellers-ranked.is-expanded .hb-bestsellers-ranked__grid--more {
    display: grid;
    /* la règle grid-template-columns est héritée de .hb-products-grid via la classe */
    animation: hb-bs-reveal 0.3s ease-out;
}

@keyframes hb-bs-reveal {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}