/* =============================================================================
   H2J Homeblocks — Front CSS footer columns v3.13.1
   Loaded AFTER the main CSS to override theme interferences.
   Résistant aux écrasements des thèmes parents (01grid, classic, CUBX).
   Spécificité maximale via #h2j-homeblocks prefix + !important
   sur les règles critiques (grid, list-style, padding).

   v3.12.2 : Responsive fin basé sur .hb-footer-cols--count-N
   v3.12.3 : Container queries (@container) pour que le responsive
             du footer soit pilote par la largeur du conteneur parent.
   v3.12.4 : Seuils ajustes aux cas reels du theme CUBX.
             Hero Gallery prend 40% du viewport, donc le wrapper
             h2jhomeblocks ne voit que ~60% de l'ecran.
             Nouveaux seuils :
               < 500px  du conteneur : mobile (1 colonne)
               500-899  du conteneur : tablet (2:2)
               >= 900px du conteneur : desktop (N colonnes normales)
   v3.13.1 : Hardened Copyright Bar (theme neutralization, full-bleed, a specificity)
   v3.13.0 : Ajout styles Copyright Bar (.hb-copyright) — 2 lignes
             configurables, separateurs, alignements, responsive mobile.
   ============================================================================= */

/* ── Container query root : le wrapper general devient un container ──
   Cela permet aux enfants de reagir a la largeur de #h2j-homeblocks
   au lieu du viewport. */
#h2j-homeblocks {
    container-type: inline-size;
    container-name: h2jhb;
}

/* ── Base grid (desktop default = N colonnes, piloté par --hb-fc-count) ── */
#h2j-homeblocks .hb-footer-cols {
    display: grid !important;
    grid-template-columns: repeat(var(--hb-fc-count, 4), minmax(0, 1fr)) !important;
    gap: 32px 40px;
    padding: 40px 20px;
    margin: 0;
    color: var(--cubx-footer-color, inherit);
    list-style: none;
}

/* Fallback classes pour layouts forcés (auto = var, sinon N fixe) */
#h2j-homeblocks .hb-footer-cols--auto  { grid-template-columns: repeat(var(--hb-fc-count, 4), minmax(0, 1fr)) !important; }
#h2j-homeblocks .hb-footer-cols--2-col { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
#h2j-homeblocks .hb-footer-cols--3-col { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
#h2j-homeblocks .hb-footer-cols--4-col { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

/* Classes explicites --count-N pour responsive précis en desktop */
#h2j-homeblocks .hb-footer-cols--count-1 { grid-template-columns: minmax(0, 1fr) !important; }
#h2j-homeblocks .hb-footer-cols--count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
#h2j-homeblocks .hb-footer-cols--count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
#h2j-homeblocks .hb-footer-cols--count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
#h2j-homeblocks .hb-footer-cols--count-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
#h2j-homeblocks .hb-footer-cols--count-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }

#h2j-homeblocks .hb-footer-col {
    min-width: 0;
    padding: 0;
    margin: 0;
    list-style: none;
}

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

/* Liste — retirer bullets et padding du thème parent */
#h2j-homeblocks .hb-footer-col__links,
#h2j-homeblocks .hb-footer-col__contact,
#h2j-homeblocks .hb-footer-col__social {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
#h2j-homeblocks .hb-footer-col__links li,
#h2j-homeblocks .hb-footer-col__contact li,
#h2j-homeblocks .hb-footer-col__social li {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    background: none !important;
}
#h2j-homeblocks .hb-footer-col__links li::before,
#h2j-homeblocks .hb-footer-col__contact li::before,
#h2j-homeblocks .hb-footer-col__social li::before {
    content: none !important;
    display: none !important;
}

#h2j-homeblocks .hb-footer-col__links li { margin: 0 0 8px !important; }
#h2j-homeblocks .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;
}
#h2j-homeblocks .hb-footer-col__links a:hover {
    opacity: 1;
    color: var(--cubx-primary, #5d4e8c);
}

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

/* About — image contrainte à la colonne */
#h2j-homeblocks .hb-footer-col__image {
    display: block;
    max-width: 180px !important;
    width: auto !important;
    height: auto;
    margin: 0 0 16px;
}
#h2j-homeblocks .hb-footer-col__text {
    font-size: 0.875rem;
    line-height: 1.6;
    opacity: 0.85;
}

/* Newsletter */
#h2j-homeblocks .hb-footer-col__subtitle {
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 12px;
    opacity: 0.85;
}
#h2j-homeblocks .hb-footer-col__newsletter { margin: 0 0 10px; }
#h2j-homeblocks .hb-newsletter-row {
    display: flex;
    gap: 0;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}
#h2j-homeblocks .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;
    box-shadow: none;
}
#h2j-homeblocks .hb-newsletter-row input[type="email"]::placeholder { opacity: 0.5; }
#h2j-homeblocks .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;
    text-transform: none;
}
#h2j-homeblocks .hb-newsletter-row button:hover:not(:disabled) {
    background: var(--cubx-primary-dark, #4a3e70);
}
#h2j-homeblocks .hb-footer-col__newsletter--disabled .hb-newsletter-row { opacity: 0.5; }
#h2j-homeblocks .hb-footer-col__newsletter--disabled input[type="email"],
#h2j-homeblocks .hb-footer-col__newsletter--disabled button { cursor: not-allowed; }
#h2j-homeblocks .hb-footer-col__gdpr {
    font-size: 0.75rem;
    line-height: 1.4;
    margin: 8px 0 0;
    opacity: 0.65;
}

/* Social — icônes en pastilles */
#h2j-homeblocks .hb-footer-col__social {
    display: flex !important;
    gap: 10px;
}
#h2j-homeblocks .hb-footer-col__social li { margin: 0 !important; }
#h2j-homeblocks .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;
}
#h2j-homeblocks .hb-footer-col__social a:hover { background: var(--cubx-primary, #5d4e8c); color: #fff; }
#h2j-homeblocks .hb-footer-col__social i.material-icons { font-size: 18px; }


/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — CONTAINER QUERIES (v3.12.4)
   Seuils ajustes au cas Hero Gallery actif (40% hero + 60% content) :
     < 500px  du conteneur : mobile (1 colonne)
     500-899  du conteneur : tablet (2:2)
     >= 900px du conteneur : desktop (N colonnes normales)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Mobile : < 500px du conteneur (petit ecran ou demi-ecran + hero active) ── */
@container h2jhb (max-width: 499px) {
    #h2j-homeblocks .hb-footer-cols {
        grid-template-columns: 1fr !important;
        gap: 28px;
        padding: 28px 16px;
    }
}

/* ── Tablet : 500-899px du conteneur (desktop + hero active le cas typique) ── */
@container h2jhb (min-width: 500px) and (max-width: 899px) {
    #h2j-homeblocks .hb-footer-cols--count-3,
    #h2j-homeblocks .hb-footer-cols--count-4,
    #h2j-homeblocks .hb-footer-cols--count-5,
    #h2j-homeblocks .hb-footer-cols--count-6,
    #h2j-homeblocks .hb-footer-cols--auto,
    #h2j-homeblocks .hb-footer-cols--3-col,
    #h2j-homeblocks .hb-footer-cols--4-col {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    #h2j-homeblocks .hb-footer-cols--count-2,
    #h2j-homeblocks .hb-footer-cols--2-col {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    #h2j-homeblocks .hb-footer-cols--count-1 {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — MEDIA QUERIES (FALLBACK VIEWPORT-BASED)
   Utilisees si le navigateur ne supporte pas @container.
   Seuils classiques bases sur viewport (fenetre entiere).
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    #h2j-homeblocks .hb-footer-cols {
        grid-template-columns: 1fr !important;
        gap: 28px;
        padding: 28px 16px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #h2j-homeblocks .hb-footer-cols--count-3,
    #h2j-homeblocks .hb-footer-cols--count-4,
    #h2j-homeblocks .hb-footer-cols--count-5,
    #h2j-homeblocks .hb-footer-cols--count-6,
    #h2j-homeblocks .hb-footer-cols--auto,
    #h2j-homeblocks .hb-footer-cols--3-col,
    #h2j-homeblocks .hb-footer-cols--4-col {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    #h2j-homeblocks .hb-footer-cols--count-2,
    #h2j-homeblocks .hb-footer-cols--2-col {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    #h2j-homeblocks .hb-footer-cols--count-1 {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   COPYRIGHT BAR — v3.13.0 (hardened v3.13.1)
   Structure :
     section.hb-block--copyright             — wrapper section (theme-neutralized)
     .hb-copyright                           — inner wrapper (bg, couleur, padding)
     .hb-copyright--align-{left|center|right}— modificateur d'alignement
     .hb-copyright__line                     — ligne (L1 ou L2)
     .hb-copyright__line--1                  — liens legaux (display:flex)
     .hb-copyright__line--2                  — texte copyright (display:block)
     .hb-copyright__link                     — lien legal
     .hb-copyright__sep                      — separateur entre liens
   CSS vars inline :
     --hb-cpr-bg     — couleur de fond (configurable BO)
     --hb-cpr-color  — couleur du texte (configurable BO)
   Hardening v3.13.1 : neutralise les styles parents (section > theme padding),
     force la couleur sur les <a> meme si le theme utilise a { color: ... !important },
     full-bleed (sort des containers a largeur limitee) pour aller bord a bord.
   ═══════════════════════════════════════════════════════════════════════ */

/* Neutralize the <section.hb-block--copyright> wrapper : no theme padding,
   no theme margin, no background (background is on .hb-copyright inside). */
#h2j-homeblocks section.hb-block--copyright {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    width: 100% !important;
    max-width: none !important;
}

/* Inner wrapper : full width + colors from CSS vars */
#h2j-homeblocks .hb-copyright {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    background: var(--hb-cpr-bg, #1a1f2c) !important;
    color: var(--hb-cpr-color, #bfbfbf) !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    font-size: 0.85rem;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Alignment modifiers */
#h2j-homeblocks .hb-copyright--align-left   { text-align: left   !important; }
#h2j-homeblocks .hb-copyright--align-center { text-align: center !important; }
#h2j-homeblocks .hb-copyright--align-right  { text-align: right  !important; }

/* Lines */
#h2j-homeblocks .hb-copyright .hb-copyright__line {
    display: block;
    margin: 0;
    padding: 0;
}
#h2j-homeblocks .hb-copyright .hb-copyright__line + .hb-copyright__line {
    margin-top: 6px;
}

/* L1 — Legal links : flex wrap with inline separators */
#h2j-homeblocks .hb-copyright .hb-copyright__line--1 {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Alignment of flex items inside L1 (overrides default text-align) */
#h2j-homeblocks .hb-copyright--align-left  .hb-copyright__line--1 { justify-content: flex-start !important; }
#h2j-homeblocks .hb-copyright--align-right .hb-copyright__line--1 { justify-content: flex-end   !important; }
#h2j-homeblocks .hb-copyright--align-center .hb-copyright__line--1 { justify-content: center    !important; }

/* Link style — target <a> explicitly to beat theme selectors like `a { color: X !important }` */
#h2j-homeblocks .hb-copyright a.hb-copyright__link,
#h2j-homeblocks .hb-copyright a.hb-copyright__link:link,
#h2j-homeblocks .hb-copyright a.hb-copyright__link:visited {
    color: var(--hb-cpr-color, #bfbfbf) !important;
    text-decoration: none !important;
    opacity: 0.85;
    transition: opacity .15s, color .15s, text-decoration-color .15s;
    padding: 2px 4px;
    background: transparent !important;
    border: none !important;
}
#h2j-homeblocks .hb-copyright a.hb-copyright__link:hover,
#h2j-homeblocks .hb-copyright a.hb-copyright__link:focus {
    opacity: 1;
    text-decoration: underline !important;
    color: var(--cubx-primary, #cfa0e9) !important;
}

/* Separator */
#h2j-homeblocks .hb-copyright .hb-copyright__sep {
    display: inline-block;
    opacity: 0.5;
    user-select: none;
    white-space: pre;
    pointer-events: none;
    color: inherit !important;
}

/* L2 — Copyright text */
#h2j-homeblocks .hb-copyright .hb-copyright__line--2 {
    opacity: 0.75;
    font-size: 0.8rem;
    color: inherit !important;
}

/* Responsive — mobile (container query) */
@container h2jhb (max-width: 499px) {
    #h2j-homeblocks .hb-copyright {
        padding: 14px 16px !important;
        font-size: 0.8rem;
    }
    #h2j-homeblocks .hb-copyright .hb-copyright__line--1 {
        flex-direction: column;
        gap: 4px;
    }
    /* Hide separators in mobile (vertical stack) */
    #h2j-homeblocks .hb-copyright .hb-copyright__line--1 .hb-copyright__sep {
        display: none;
    }
    #h2j-homeblocks .hb-copyright .hb-copyright__line--2 {
        font-size: 0.75rem;
    }
}

/* Responsive — mobile (viewport fallback) */
@media (max-width: 767px) {
    #h2j-homeblocks .hb-copyright {
        padding: 14px 16px !important;
        font-size: 0.8rem;
    }
    #h2j-homeblocks .hb-copyright .hb-copyright__line--1 {
        flex-direction: column;
        gap: 4px;
    }
    #h2j-homeblocks .hb-copyright .hb-copyright__line--1 .hb-copyright__sep {
        display: none;
    }
    #h2j-homeblocks .hb-copyright .hb-copyright__line--2 {
        font-size: 0.75rem;
    }
}