/* Grille catalogue avec carte univers mise en avant (2 colonnes) */
.products-grid--catalog {
    container-type: inline-size;
    --catalog-grid-column-gap: 1rem;
    --catalog-grid-row-gap: 2.5rem;
    --catalog-grid-cols: 5;
    /* 100cqw = largeur de la grille (évite le % mal résolu sur height) */
    --catalog-col-width: calc((100cqw - (var(--catalog-grid-cols) - 1) * var(--catalog-grid-column-gap)) / var(--catalog-grid-cols));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--catalog-grid-column-gap);
    row-gap: var(--catalog-grid-row-gap);
    padding: 2rem 0;
}

.products-grid--catalog .product-card {
    flex: unset;
    width: auto;
    min-width: 0;
}

.catalog-featured-univers {
    grid-column: span 2;
    min-width: 0;
}

.catalog-featured-univers__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.catalog-featured-univers__link:hover {
    text-decoration: none;
    color: inherit;
}

.catalog-featured-univers__media {
    position: relative;
    width: 100%;
    height: 0;
    /* Même hauteur qu'une image produit (1 colonne), largeur = 2 colonnes + gap */
    padding-top: calc(
        var(--catalog-col-width) * var(--carousel-card-h) / var(--carousel-card-w)
        / (2 * var(--catalog-col-width) + var(--catalog-grid-column-gap))
        * 100%
    );
    overflow: hidden;
    background: #e8e8e8;
}

.catalog-featured-univers__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.catalog-featured-univers__body {
    padding: 0.85rem 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.catalog-featured-univers__label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888;
}

.catalog-featured-univers__title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1a1a1a !important;
}

.catalog-featured-univers__tagline {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #4a4a4a !important;
}

.catalog-featured-univers__cta {
    display: inline-block;
    padding: 0.45rem 1.1rem;
    border: 1px solid #1a1a1a;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #1a1a1a;
    background: #fff;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.catalog-featured-univers__link:hover .catalog-featured-univers__cta {
    background: #1a1a1a;
    color: #fff;
}

@media (max-width: 1200px) {
    .products-grid--catalog {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        --catalog-grid-cols: 4;
    }
}

@media (max-width: 992px) {
    .products-grid--catalog {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        --catalog-grid-cols: 3;
    }

    .catalog-featured-univers {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .products-grid--catalog {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        --catalog-grid-cols: 2;
    }

    .catalog-featured-univers {
        grid-column: span 2;
    }

    .catalog-featured-univers__title {
        font-size: 1.15rem;
    }
}

/* Fallback sans container queries : ratio proche 2 colonnes */
@supports not (width: 100cqw) {
    .catalog-featured-univers__media {
        height: auto;
        padding-top: 0;
        aspect-ratio: 576 / 400;
    }

    .catalog-featured-univers__media img {
        position: static;
    }
}
