/* ═══════════════════════════════════════════════════════════
   CUBX THEME — theme-page-sitemap.css (v2.5.173 — Sprint 6 Paquet 3 Étape B FINITION 1.2)
   ───────────────────────────────────────────────────────────
   Charge à priority 222 (entre theme-cart.css 218 et fixes 220-225).

   Stylise la page /plan-site (controller=sitemap) avec layout VERTICAL
   EMPILÉ : chaque section prend toute la largeur disponible (~624px
   utiles avec hero gallery active), sous-colonnes internes adaptées
   à la densité de chaque section.

   Toutes les règles sont scopées via .cubx-hero-sitemap pour ne TOUCHER
   QUE cette page (et uniquement quand la hero est active). Aucune fuite
   vers d'autres surfaces du thème.

   STRUCTURE CIBLÉE :
     div.cubx-hero-layout.cubx-hero-active.cubx-hero-sitemap
       └─ div.cubx-hero-content
           └─ div#content-wrapper.js-content-wrapper.col-xs-12 (Classic natif)
               └─ section#main
                   ├─ header.page-header > h1.cubx-listing-title
                   └─ div.container-fluid > div.row.sitemap
                       └─ 4× div.col-md-3.cubx-sitemap-section
                           > h2 + ul > li > (a + nested ul OR brands tunnel)

   LAYOUT (toujours vertical empilé) :
     - Section 0 "Nos offres" : pleine largeur, ul en 1 col (3 liens)
     - Section 1 "Catégories" : pleine largeur, ul en 2 cols
     - Section 2 "Votre compte" : 1/2 largeur (côte à côte avec section 3)
     - Section 3 "Pages" : 1/2 largeur (côte à côte avec section 2)

   COLLAPSE MARQUES : la liste détaillée des 147 marques (sous-niveau
   de "Marques" dans "Nos offres" en PS natif) est COLLAPSED par le tpl
   en un seul lien tunnel .cubx-sitemap-brands-tunnel avec compteur. Pas
   de nested list à styler dans cette version.

   Variables CSS consommées :
     --cubx-accent      (couleur accent rose principale)
     --cubx-primary     (couleur primaire violette)
     --h2j-text         (texte foncé)
     --h2j-text-light   (texte gris)
     --h2j-bg-card      (blanc card)
     --h2j-border       (bordure)
     --h2j-radius       (rayon arrondi global)

   @author    H2J Ecosystem <info@2klove.fr>
   @copyright 2024-2026 H2J sas RCS 978391720
   @since     v2.5.171 (initial)
   @updated   v2.5.173 (refonte layout vertical empilé + collapse marques)
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   1. WRAPPER GLOBAL — Card blanche style PDP
   ═══════════════════════════════════════════════════════════ */

.cubx-hero-sitemap .cubx-hero-content {
    padding: 24px 24px 48px;
}

.cubx-hero-sitemap .cubx-hero-content #content-wrapper {
    background: var(--h2j-bg-card, #ffffff);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    padding: 32px;
    margin: 0;
    /* Override col-xs-12 Bootstrap qui forcerait floats */
    float: none;
    width: 100%;
    max-width: 100%;
}

.cubx-hero-sitemap section#main {
    padding: 0;
    margin: 0;
    /* Override section#main display:flex hérité de cubx-theme-core */
    display: block;
}


/* ═══════════════════════════════════════════════════════════
   2. PAGE HEADER — Titre principal "Plan du site"
   ═══════════════════════════════════════════════════════════ */

.cubx-hero-sitemap .page-header {
    margin: 0 0 32px;
    padding: 0;
    border: none;
    background: none;
}

.cubx-hero-sitemap .page-header .cubx-listing-title,
.cubx-hero-sitemap .page-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--h2j-text, #1a1f2c);
    margin: 0;
    padding: 0 0 12px;
    position: relative;
    line-height: 1.2;
}

.cubx-hero-sitemap .page-header .cubx-listing-title::after,
.cubx-hero-sitemap .page-header h1::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 3px;
    background: var(--cubx-accent, #ff4081);
    border-radius: 2px;
}


/* ═══════════════════════════════════════════════════════════
   3. LAYOUT ROW — Grid avec sections empilées + 2 dernières côte-à-côte
   ───────────────────────────────────────────────────────────
   Pattern :
     row.sitemap = grid 2 cols
     ├─ section 0 "Nos offres" = grid-column: 1 / -1 (full width)
     ├─ section 1 "Catégories" = grid-column: 1 / -1 (full width)
     ├─ section 2 "Votre compte" = grid-column: 1 / 2 (half left)
     └─ section 3 "Pages" = grid-column: 2 / 3 (half right)

   Mobile : tout en 1 col (stack vertical naturel).
   ═══════════════════════════════════════════════════════════ */

.cubx-hero-sitemap .container-fluid {
    padding: 0;
    margin: 0;
    max-width: 100%;
}

.cubx-hero-sitemap .row.sitemap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0;
}

@media (min-width: 600px) {
    .cubx-hero-sitemap .row.sitemap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    /* Sections 0 + 1 en pleine largeur (Nos offres + Catégories) */
    .cubx-hero-sitemap .row.sitemap > .cubx-sitemap-section-0,
    .cubx-hero-sitemap .row.sitemap > .cubx-sitemap-section-1 {
        grid-column: 1 / -1;
    }
}

/* Reset col-md-3 Bootstrap (floats + padding) qui interfère avec grid */
.cubx-hero-sitemap .row.sitemap > .col-md-3 {
    float: none;
    width: 100%;
    max-width: 100%;
    flex: none;
    padding: 0;
    margin: 0;
    min-width: 0;
}


/* ═══════════════════════════════════════════════════════════
   4. SOUS-CARDS PAR SECTION — Bg subtil + bordure
   ═══════════════════════════════════════════════════════════ */

.cubx-hero-sitemap .row.sitemap > .col-md-3 {
    background: #fafaff;
    border: 1px solid var(--h2j-border, #e5e7eb);
    border-radius: 12px;
    padding: 20px 20px 24px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cubx-hero-sitemap .row.sitemap > .col-md-3:hover {
    border-color: var(--cubx-accent, #ff4081);
    box-shadow: 0 4px 16px rgba(255, 64, 129, 0.08);
}

.cubx-hero-sitemap .row.sitemap > .col-md-3 h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--h2j-text, #1a1f2c);
    margin: 0 0 16px;
    padding: 0 0 8px;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cubx-hero-sitemap .row.sitemap > .col-md-3 h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 2px;
    background: var(--cubx-accent, #ff4081);
    border-radius: 2px;
}


/* ═══════════════════════════════════════════════════════════
   5. SOUS-COLONNES PAR SECTION — Densité adaptée
   ───────────────────────────────────────────────────────────
   Section 1 "Catégories" : ul interne en 2 cols (CSS columns) car
   l'arborescence des catégories est dense et bénéficie de cette
   densité visuelle.

   Section 0 "Nos offres" : 1 col (3 liens, pas besoin de cols).
   Section 2 "Votre compte" : 1 col (peu d'items, déjà demi-largeur).
   Section 3 "Pages" : 1 col (peu d'items, déjà demi-largeur).
   ═══════════════════════════════════════════════════════════ */

.cubx-hero-sitemap .row.sitemap ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Section 1 "Catégories" : ul racine en 2 cols */
.cubx-hero-sitemap .row.sitemap > .cubx-sitemap-section-1 > ul {
    column-count: 1;
    column-gap: 24px;
}

@media (min-width: 768px) {
    .cubx-hero-sitemap .row.sitemap > .cubx-sitemap-section-1 > ul {
        column-count: 2;
    }
}

.cubx-hero-sitemap .row.sitemap > .cubx-sitemap-section-1 > ul > li {
    /* Empêche un item (catégorie + ses sous-cat nested) de se couper
       entre 2 colonnes — chaque catégorie reste cohérente. */
    break-inside: avoid;
    page-break-inside: avoid;
}


/* ═══════════════════════════════════════════════════════════
   6. LIENS TOP-LEVEL — Style propre + hover discret
   ═══════════════════════════════════════════════════════════ */

.cubx-hero-sitemap .row.sitemap > .col-md-3 > ul > li {
    margin: 0 0 6px;
    padding: 0;
}

.cubx-hero-sitemap .row.sitemap > .col-md-3 > ul > li > a {
    display: inline-block;
    padding: 4px 0;
    color: var(--h2j-text, #1a1f2c);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease, transform 0.15s ease;
}

.cubx-hero-sitemap .row.sitemap > .col-md-3 > ul > li > a:hover,
.cubx-hero-sitemap .row.sitemap > .col-md-3 > ul > li > a:focus {
    color: var(--cubx-accent, #ff4081);
    transform: translateX(2px);
    text-decoration: none;
}


/* ═══════════════════════════════════════════════════════════
   7. NESTED LISTS (Catégories → Sous-catégories)
   ───────────────────────────────────────────────────────────
   Note : la nested list "Marques" (147 entrées) est COLLAPSED dans
   le template Smarty (un seul lien tunnel vers /marques). Donc cette
   règle ne s'applique plus qu'aux sous-catégories de "Catégories".
   ═══════════════════════════════════════════════════════════ */

.cubx-hero-sitemap .row.sitemap ul.nested {
    margin-top: 4px;
    padding-left: 12px;
    border-left: 2px solid var(--h2j-border, #e5e7eb);
    list-style: none;
}

.cubx-hero-sitemap .row.sitemap ul.nested li {
    margin: 0 0 3px;
    padding: 0;
}

.cubx-hero-sitemap .row.sitemap ul.nested li a {
    display: inline-block;
    padding: 2px 0;
    color: var(--h2j-text-light, #6b7280);
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.15s ease;
}

.cubx-hero-sitemap .row.sitemap ul.nested li a:hover,
.cubx-hero-sitemap .row.sitemap ul.nested li a:focus {
    color: var(--cubx-accent, #ff4081);
    text-decoration: none;
}


/* ═══════════════════════════════════════════════════════════
   8. BRANDS TUNNEL — Lien vers hub H2J /marques avec compteur
   ───────────────────────────────────────────────────────────
   Style "lien plus visible" pour le lien collapse Marques →
   tunnel vers le hub. Compteur (147) en couleur accent.
   ═══════════════════════════════════════════════════════════ */

.cubx-hero-sitemap .cubx-sitemap-brands-tunnel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    color: var(--h2j-text, #1a1f2c);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease, transform 0.15s ease;
}

.cubx-hero-sitemap .cubx-sitemap-brands-tunnel:hover,
.cubx-hero-sitemap .cubx-sitemap-brands-tunnel:focus {
    color: var(--cubx-accent, #ff4081);
    transform: translateX(2px);
    text-decoration: none;
}

.cubx-hero-sitemap .cubx-sitemap-brands-count {
    color: var(--cubx-accent, #ff4081);
    font-weight: 600;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════════════════
   9. RESPONSIVE — Mobile (<768px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .cubx-hero-sitemap .cubx-hero-content {
        padding: 16px 12px 32px;
    }

    .cubx-hero-sitemap .cubx-hero-content #content-wrapper {
        padding: 20px 16px;
        border-radius: 12px;
    }

    .cubx-hero-sitemap .page-header .cubx-listing-title,
    .cubx-hero-sitemap .page-header h1 {
        font-size: 22px;
    }

    .cubx-hero-sitemap .row.sitemap > .col-md-3 {
        padding: 16px;
    }
}