:root{
    --cat-cols: 6;
}


.cat-grid{
    max-width:1600px;
    margin:0 auto;
    padding:28px 16px 36px;

    --radius: 10px;
    --bd: rgba(0,0,0,.08);
    --shadow: 0 10px 30px rgba(0,0,0,.08);
    --bg: #fff;
    --soft: rgba(0,0,0,.04);
}

.cat-grid__breadcrumb{
    margin-bottom: 16px;
    overflow: hidden;
}
.cat-grid__breadcrumb a{
    color: inherit;
    text-decoration: none;
}
.cat-grid__breadcrumb a:hover{
    text-decoration: underline;
}

.cat-grid__title{
    /* text-align:center; */
    /* font-weight:850; */
    /* font-size:clamp(32px,4.8vw,56px); */
    /* letter-spacing:-.02em; */
    /* margin:0 0 26px; */
    /* color:#141414; */

    /* copie hilight */
    display: flex;
    justify-content: flex-start;
    font-size: 2.4em;
    font-weight: 700;
    margin: 0 0 26px;
    text-align: center;
}

/* ===== GRID : 4 COLONNES ===== */
.cat-grid__list{
    list-style:none;
    margin:0;
    padding:0;

    display:grid;
    grid-template-columns:repeat(var(--cat-cols, 4), minmax(0,1fr));
    gap:18px;
}

.cat-grid__item{
    min-width:0;
}

/* ===== CARTE ===== */
.cat-grid__link{
    display:grid;
    grid-template-rows: 150px auto; /* image / texte */
    height:100%;

    text-decoration:none;
    color:inherit;

    background:var(--bg);
    border:1px solid var(--bd);
    border-radius:var(--radius);
    overflow:hidden;

    box-shadow: 0 0 0 rgba(0,0,0,0);
    transform:translateY(0);
    transition:
            transform .25s ease,
            box-shadow .25s ease,
            border-color .25s ease;
}

/* ===== ZONE IMAGE ===== */
.cat-grid__media{
    display:flex;
    align-items:center;
    justify-content:center;

    height:150px;
    padding:12px;

    background:linear-gradient(180deg, var(--soft), rgba(0,0,0,0));
}

/* Image plus petite */
.cat-grid__img{
    width:auto;
    height:auto;
    max-width:90%;
    max-height:90%;
    object-fit:contain;

    transform:scale(1);
    transition:transform .35s ease;
    mix-blend-mode: multiply;
}

/* ===== ZONE TEXTE ===== */
.cat-grid__meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;

    padding:14px 16px 16px;
    border-top:1px solid rgba(0,0,0,.06);
}

/* Titre : 2 lignes max */
.cat-grid__name{
    font-size:16px;
    font-weight:750;
    letter-spacing:.01em;
    text-transform:uppercase;
    line-height:1.15;
    opacity:.92;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.cat-grid__cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:34px;
    height:34px;
    border-radius:999px;
    background:rgba(0,0,0,.05);

    transform:translateX(0);
    transition:transform .25s ease, background .25s ease;
}

/* ===== HOVER ===== */
.cat-grid__link:hover,
.cat-grid__link:focus-visible{
    border-color: rgba(0,0,0,.16);
    box-shadow: var(--shadow);
    transform:translateY(-2px);
    outline:none;
}

.cat-grid__link:hover .cat-grid__img,
.cat-grid__link:focus-visible .cat-grid__img{
    transform:scale(1.04);
}

.cat-grid__link:hover .cat-grid__cta,
.cat-grid__link:focus-visible .cat-grid__cta{
    background:rgba(0,0,0,.08);
    transform:translateX(2px);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px){
    .cat-grid__list{
        grid-template-columns:repeat(3, minmax(0,1fr));
    }
}

@media (max-width: 860px){
    .cat-grid__list{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }

    .cat-grid__link{
        grid-template-rows: 140px auto;
    }

    .cat-grid__media{
        height:140px;
    }
}

@media (max-width: 520px){
    .cat-grid__list{
        grid-template-columns:1fr;
    }
}

/* ===== ACCESSIBILITÉ ===== */
@media (prefers-reduced-motion: reduce){
    .cat-grid__link,
    .cat-grid__img,
    .cat-grid__cta{
        transition:none;
    }

    .cat-grid__link:hover{
        transform:none;
    }

    .cat-grid__link:hover .cat-grid__img{
        transform:none;
    }
}