/**
 * BILIA — catalogue.css 
 */

/* Override section padding pour le catalogue */
.catalogue-page section { padding: 0; }

.category {
    position: sticky;
    top: 7rem;
    z-index: 100;
    background: rgba(var(--bg-color-raw, 10, 22, 40), 0.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: .1rem solid var(--border-color);
    padding: 0;
    max-width: none;
    margin: 0;
}

.category ul {
    list-style: none;
    display: flex;
    gap: 0;
    padding: 0 2rem;
    overflow-x: auto;
    max-width: 1300px;
    margin: 0 auto;
    scrollbar-width: none;
}
.category ul::-webkit-scrollbar { display: none; }

.gm-category a {
    display: block;
    padding: 1.5rem 2.5rem;
    font-family: var(--font-head);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: .07em;
    color: var(--light-white);
    text-transform: uppercase;
    transition: var(--transition);
    border-bottom: .2rem solid transparent;
    white-space: nowrap;
}

.gm-category a:hover,
.gm-category a.active {
    color: var(--main-color);
    border-bottom-color: var(--main-color);
}

/* Carousel */
.carousel-section {
    padding: 4rem 2rem;
    max-width: 1300px;
    margin: 0 auto;
}
.carousel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.carousel-controls { display: flex; gap: 1rem; }
.carousel-btn {
    width: 4rem; height: 4rem;
    border-radius: 50%;
    background: var(--surface);
    border: .1rem solid var(--border-color);
    color: var(--white);
    font-size: 1.4rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex; align-items: center; justify-content: center;
}
.carousel-btn:hover {
    background: var(--main-color);
    color: var(--black);
    border-color: var(--main-color);
    box-shadow: var(--glow-shadow);
}

.carousel-container { overflow: hidden; position: relative; }
.carousel-track {
    display: flex;
    gap: 2rem;
    transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.carousel-track .game-card {
    flex: 0 0 calc(25% - 1.5rem);
    min-width: 22rem;
}
@media(max-width:1024px) { .carousel-track .game-card { flex: 0 0 calc(33.33% - 1.35rem); } }
@media(max-width:768px)  { .carousel-track .game-card { flex: 0 0 calc(50% - 1rem); } }
@media(max-width:500px)  { .carousel-track .game-card { flex: 0 0 calc(100%); } }

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: .8rem;
    margin-top: 2rem;
}
.carousel-dot {
    width: .8rem; height: .8rem;
    border-radius: 50%;
    background: var(--border-color);
    cursor: pointer;
    transition: var(--transition);
}
.carousel-dot.active {
    background: var(--main-color);
    box-shadow: 0 0 .8rem var(--main-color);
}