/* ===========================================
   CATEGORY DETAIL PAGE — EPI Côte d'Ivoire
=========================================== */

/* ---- Hero catégorie ---- */
.cat-hero {
    position: relative;
    min-height: 260px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: linear-gradient(135deg, var(--epi-dark) 0%, var(--epi-dark-3) 100%);
}
.cat-hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.cat-hero-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.25;
    transform: scale(1.05);
    transition: transform 8s ease;
    filter: blur(1px);
}
.cat-hero:hover .cat-hero-bg img { transform: scale(1.1); }
.cat-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(26,26,46,0.85) 0%,
        rgba(15,52,96,0.6) 60%,
        rgba(184,0,15,0.3) 100%
    );
}
.cat-hero-content {
    position: relative;
    z-index: 2;
    padding: 48px 0 36px;
    width: 100%;
}
.cat-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(227,6,19,0.2);
    border: 1px solid rgba(227,6,19,0.4);
    color: var(--epi-red-light);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 14px;
}
.cat-hero-title {
    font-size: clamp(26px, 4vw, 48px);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}
.cat-hero-title span { color: var(--epi-red-light); }
.cat-hero-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.cat-hero-count {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cat-hero-count i { color: var(--epi-red-light); }

/* Breadcrumb hero */
.cat-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cat-hero-breadcrumb a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.2s;
}
.cat-hero-breadcrumb a:hover { color: var(--epi-red-light); }
.cat-hero-breadcrumb .sep {
    color: rgba(255,255,255,0.3);
    font-size: 12px;
}
.cat-hero-breadcrumb .current {
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    font-weight: 600;
}

/* Décoration géométrique */
.cat-hero-deco {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    height: 200px;
    opacity: 0.06;
    z-index: 1;
}
.cat-hero-deco svg { width: 100%; height: 100%; }

/* ---- Sous-catégories pills ---- */
.cat-subcategories {
    background: #fff;
    border-bottom: 1px solid var(--epi-gray-2);
    padding: 0;
    position: sticky;
    top: 74px;
    z-index: 50;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.cat-subcat-track {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 12px 0;
    -webkit-overflow-scrolling: touch;
}
.cat-subcat-track::-webkit-scrollbar { display: none; }
.subcat-pill {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 30px;
    border: 2px solid var(--epi-gray-2);
    background: #fff;
    color: var(--epi-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.subcat-pill .subcat-img {
    width: 24px; height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.subcat-pill:hover, .subcat-pill.active {
    background: linear-gradient(135deg, var(--epi-red), var(--epi-red-dark));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px var(--epi-red-20);
    transform: translateY(-1px);
}
.subcat-pill.all-pill {
    background: var(--epi-dark);
    border-color: var(--epi-dark);
    color: #fff;
}
.subcat-pill.all-pill:hover { background: var(--epi-red); border-color: var(--epi-red); }

/* ---- Barre de contrôles ---- */
.cat-controls-bar {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--epi-gray-2);
    padding: 12px 0;
    position: sticky;
    top: 74px; /* Override via .has-subcategories sur le parent */
    z-index: 40;
}
.has-subcategories .cat-controls-bar { top: 125px; }
.cat-controls-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.cat-controls-left, .cat-controls-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ctrl-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: 2px solid var(--epi-gray-2);
    border-radius: 30px;
    background: #fff;
    color: var(--epi-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
}
.ctrl-filter-btn:hover, .ctrl-filter-btn.has-filters {
    border-color: var(--epi-red);
    color: var(--epi-red);
    background: var(--epi-red-pale);
}
.ctrl-filter-btn .filter-badge {
    background: var(--epi-red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    width: 18px; height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ctrl-results-count {
    font-size: 13px;
    color: var(--epi-text-muted);
    font-weight: 500;
}
.ctrl-results-count strong { color: var(--epi-text); font-weight: 700; }

/* Tri */
.ctrl-sort-dropdown { position: relative; }
.ctrl-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: 2px solid var(--epi-gray-2);
    border-radius: 30px;
    background: #fff;
    color: var(--epi-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}
.ctrl-sort-btn:hover { border-color: var(--epi-red); color: var(--epi-red); }
.ctrl-sort-menu {
    position: absolute;
    right: 0; top: calc(100% + 8px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    border: 1px solid var(--epi-gray-2);
    min-width: 200px;
    overflow: hidden;
    z-index: 100;
    display: none;
    animation: epi-slideDown 0.2s ease;
}
.ctrl-sort-menu.show { display: block; }
.ctrl-sort-item {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--epi-text);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ctrl-sort-item:hover { background: var(--epi-red-pale); color: var(--epi-red); }
.ctrl-sort-item.active { background: var(--epi-red-pale); color: var(--epi-red); font-weight: 700; }
.ctrl-sort-item.active::before { content: '✓'; font-weight: 900; font-size: 12px; }

/* Toggle vue */
.ctrl-view-toggle {
    display: flex;
    gap: 2px;
    background: var(--epi-gray);
    border-radius: 10px;
    padding: 3px;
}
.view-btn {
    width: 32px; height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--epi-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 14px;
}
.view-btn.active, .view-btn:hover {
    background: #fff;
    color: var(--epi-red);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Filtres actifs */
.active-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: 8px;
}
.active-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--epi-red-pale);
    border: 1px solid rgba(227,6,19,0.2);
    color: var(--epi-red);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}
.active-filter-tag button {
    background: none;
    border: none;
    color: var(--epi-red);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-size: 12px;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.active-filter-tag button:hover { opacity: 1; }
.clear-all-btn {
    background: none;
    border: none;
    color: var(--epi-text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s;
}
.clear-all-btn:hover { color: var(--epi-red); }

/* ---- Layout principal ---- */
.cat-main-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 28px;
    padding: 32px 0 64px;
    align-items: start;
}
@media(max-width:1100px) { .cat-main-layout { grid-template-columns: 250px 1fr; } }
@media(max-width:991px)  {
    .cat-main-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .cat-sidebar {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        overflow: hidden !important;
    }
    .products-zone {
        width: 100%;
        grid-column: 1 / -1;
    }
}

/* ---- Sidebar ---- */
.cat-sidebar {
    position: sticky;
    top: 155px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-card {
    background: rgba(255,255,255,0.97);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    border: 1px solid var(--epi-gray-2);
}
.sidebar-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--epi-gray) 0%, #f0f1f5 100%);
    border-bottom: 1px solid var(--epi-gray-2);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}
.sidebar-card-header:hover { background: var(--epi-red-pale); }
.sidebar-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--epi-text);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sidebar-card-title i { color: var(--epi-red); font-size: 14px; }
.sidebar-toggle-icon {
    color: var(--epi-text-muted);
    font-size: 12px;
    transition: transform 0.3s ease;
}
.sidebar-card-header.collapsed .sidebar-toggle-icon { transform: rotate(-90deg); }
.sidebar-card-body { padding: 16px 18px; }

/* Liste catégories sidebar */
.sidebar-cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-cat-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--epi-text);
    transition: all 0.2s ease;
}
.sidebar-cat-list li a:hover {
    background: var(--epi-red-pale);
    color: var(--epi-red);
    padding-left: 16px;
}
.sidebar-cat-list li.active a {
    background: linear-gradient(135deg, var(--epi-red), var(--epi-red-dark));
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 12px var(--epi-red-20);
}
.sidebar-cat-list li.active a .cat-count { background: rgba(255,255,255,0.2); color: #fff; }
.cat-count {
    font-size: 11px;
    font-weight: 700;
    background: var(--epi-gray-2);
    color: var(--epi-text-muted);
    padding: 2px 8px;
    border-radius: 20px;
    transition: all 0.2s;
}
.sidebar-cat-list.sub-list {
    padding-left: 12px;
    border-left: 2px solid var(--epi-gray-2);
    margin-left: 12px;
    margin-top: 4px;
}
.sidebar-cat-list.sub-list li a { font-size: 12px; }

/* Produits vedettes sidebar */
.featured-prod-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--epi-gray-2);
    text-decoration: none;
    transition: all 0.2s ease;
}
.featured-prod-item:last-child { border-bottom: none; padding-bottom: 0; }
.featured-prod-item:hover { transform: translateX(4px); }
.fp-thumb {
    width: 52px; height: 52px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--epi-gray);
    border: 1px solid var(--epi-gray-2);
}
.fp-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.featured-prod-item:hover .fp-thumb img { transform: scale(1.1); }
.fp-info { flex: 1; min-width: 0; }
.fp-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--epi-text);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
    transition: color 0.2s;
}
.featured-prod-item:hover .fp-name { color: var(--epi-red); }
.fp-price {
    font-size: 13px;
    font-weight: 800;
    color: var(--epi-red);
}

/* Info boxes sidebar */
.info-box-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--epi-gray-2);
}
.info-box-item:last-child { border-bottom: none; }
.info-box-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--epi-red-pale);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--epi-red);
    font-size: 16px;
}
.info-box-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--epi-text);
    margin-bottom: 2px;
}
.info-box-desc { font-size: 12px; color: var(--epi-text-muted); line-height: 1.4; }

/* Galerie sidebar */
.sidebar-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.sidebar-gallery a {
    border-radius: 8px;
    overflow: hidden;
    display: block;
    aspect-ratio: 1;
}
.sidebar-gallery a img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.sidebar-gallery a:hover img { transform: scale(1.12); }

/* Social sidebar */
.sidebar-social {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.sidebar-social-btn {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 14px;
    border: 1px solid var(--epi-gray-2);
    color: var(--epi-text-muted);
}
.sidebar-social-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.sidebar-social-btn.fb:hover  { background: #3b5998; color: #fff; border-color: #3b5998; }
.sidebar-social-btn.tw:hover  { background: #1da1f2; color: #fff; border-color: #1da1f2; }
.sidebar-social-btn.ig:hover  { background: #e4405f; color: #fff; border-color: #e4405f; }
.sidebar-social-btn.tt:hover  { background: #000;    color: #fff; border-color: #000; }

/* ---- Zone produits ---- */
.products-zone { min-width: 0; }

/* Grid view */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 36px;
}
@media(max-width:1200px) { .products-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:991px)  { .products-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media(max-width:480px)  { .products-grid { grid-template-columns: 1fr; gap: 12px; } }

/* Card produit grid */
.pcat-card {
    background: rgba(255,255,255,0.97);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 1px solid var(--epi-gray-2);
    transition: all 0.35s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}
.pcat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(227,6,19,0.12);
    border-color: rgba(227,6,19,0.15);
}
.pcat-card .pc-img {
    height: 220px;
    overflow: hidden;
    position: relative;
    background: var(--epi-gray);
}
@media(max-width:991px) { .pcat-card .pc-img { height: 180px; } }
@media(max-width:480px) { .pcat-card .pc-img { height: 200px; } }
.pcat-card .pc-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.pcat-card:hover .pc-img img { transform: scale(1.08); }

.pc-badge {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 2;
}
.pc-badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.badge-featured { background: linear-gradient(135deg, #f57c00, #e65100); color: #fff; }
.badge-instock  { background: linear-gradient(135deg, #2ecc71, #27ae60); color: #fff; }

.pc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(184,0,15,0.75) 0%, transparent 55%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 16px;
    gap: 10px;
    z-index: 3;
}
.pcat-card:hover .pc-overlay { opacity: 1; }
.pc-action {
    width: 42px; height: 42px;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(4px);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    color: var(--epi-text);
    font-size: 15px;
    transform: translateY(12px);
    transition: all 0.3s cubic-bezier(0.68,-0.55,0.27,1.55);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    border: none;
    cursor: pointer;
}
.pcat-card:hover .pc-action { transform: translateY(0); }
.pc-action:hover { background: var(--epi-red) !important; color: #fff !important; }
.pcat-card:hover .pc-action:nth-child(2) { transition-delay: 0.05s; }
.pcat-card:hover .pc-action:nth-child(3) { transition-delay: 0.1s; }

.pcat-card .pc-body {
    padding: 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.pc-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--epi-text);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
    margin-bottom: 8px;
    transition: color 0.2s;
}
.pc-name:hover { color: var(--epi-red); }
.pc-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--epi-gray-2);
}
.pc-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--epi-red);
}
.pc-foot {
    padding: 0 16px 14px;
    display: flex;
    gap: 8px;
}
.pc-btn {
    flex: 1;
    padding: 8px 0;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all 0.25s ease;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    border: none; cursor: pointer;
}
.pc-btn-primary {
    background: linear-gradient(135deg, var(--epi-red), var(--epi-red-dark));
    color: #fff;
}
.pc-btn-primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px var(--epi-red-20); }
.pc-btn-secondary {
    background: var(--epi-gray);
    color: var(--epi-text-muted);
    border: 1px solid var(--epi-gray-2) !important;
}
.pc-btn-secondary:hover { border-color: var(--epi-red) !important; color: var(--epi-red); background: var(--epi-red-pale); }

/* Vue liste */
.products-list-view { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; }
.pcat-list-item {
    display: flex;
    gap: 16px;
    background: rgba(255,255,255,0.97);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: 1px solid var(--epi-gray-2);
    transition: all 0.3s ease;
    padding: 0;
}
.pcat-list-item:hover {
    transform: translateX(6px);
    box-shadow: 0 6px 24px rgba(227,6,19,0.1);
    border-color: rgba(227,6,19,0.15);
}
.pli-thumb {
    width: 140px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}
@media(max-width:991px) { .pli-thumb { width: 110px; } }
@media(max-width:480px) { .pli-thumb { width: 90px; } }
.pli-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.pcat-list-item:hover .pli-thumb img { transform: scale(1.06); }
.pli-body {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.pli-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--epi-text);
    text-decoration: none;
    margin-bottom: 6px;
    transition: color 0.2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}
.pli-name:hover { color: var(--epi-red); }
.pli-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--epi-red);
    margin-bottom: auto;
    margin-top: 6px;
}
.pli-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* ---- Pagination ---- */
.cat-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--epi-gray-2);
}
.cat-pagination-info {
    font-size: 13px;
    color: var(--epi-text-muted);
    font-weight: 500;
}
.pag-list {
    display: flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}
.pag-list li a,
.pag-list li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid var(--epi-gray-2);
    color: var(--epi-text);
    background: #fff;
    transition: all 0.25s ease;
}
.pag-list li a:hover { border-color: var(--epi-red); color: var(--epi-red); background: var(--epi-red-pale); }
.pag-list li.active a, .pag-list li.active span {
    background: linear-gradient(135deg, var(--epi-red), var(--epi-red-dark));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px var(--epi-red-20);
}
.pag-list li.disabled a, .pag-list li.disabled span {
    opacity: 0.4;
    pointer-events: none;
}
.pag-list li.ellipsis span {
    border-color: transparent;
    background: transparent;
    width: auto;
    padding: 0 4px;
}

/* ---- Offcanvas filtre redesigné ---- */
.filter-offcanvas .offcanvas-header {
    background: linear-gradient(135deg, var(--epi-dark), var(--epi-dark-3));
    padding: 20px;
}
.filter-offcanvas .offcanvas-title { color: #fff; font-weight: 800; font-size: 18px; }
.filter-section { margin-bottom: 24px; }
.filter-section-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--epi-text-muted);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--epi-gray-2);
    display: flex;
    align-items: center;
    gap: 8px;
}
.filter-section-title i { color: var(--epi-red); }
.filter-radio-item, .filter-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}
.filter-radio-item:hover, .filter-check-item:hover { background: var(--epi-red-pale); }
.filter-radio-item label, .filter-check-item label {
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--epi-text);
    flex: 1;
}
.filter-size-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.filter-size-btn {
    padding: 8px;
    border: 2px solid var(--epi-gray-2);
    border-radius: 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
    color: var(--epi-text);
}
.filter-size-btn:hover, .filter-size-btn.selected {
    border-color: var(--epi-red);
    background: var(--epi-red);
    color: #fff;
}
.filter-color-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.filter-color-swatch {
    width: 36px; height: 36px;
    border-radius: 10px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}
.filter-color-swatch:hover, .filter-color-swatch.selected {
    border-color: var(--epi-red);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.filter-color-swatch.selected::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 14px;
    background: rgba(0,0,0,0.3);
}

/* État vide */
.empty-cat {
    grid-column: 1/-1;
    text-align: center;
    padding: 80px 20px;
    color: var(--epi-text-muted);
}
.empty-cat-icon {
    width: 80px; height: 80px;
    background: var(--epi-red-pale);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    font-size: 2rem;
    color: var(--epi-red);
    opacity: 0.5;
}
.empty-cat h3 { font-size: 18px; font-weight: 700; color: var(--epi-text); margin-bottom: 8px; }
.empty-cat p { font-size: 14px; margin-bottom: 20px; }

/* ---- Correctifs mobiles consolidés ---- */
@media(max-width:991px) {
    /* Élimination complète sidebar — évite la superposition avec la galerie */
    .cat-sidebar,
    .cat-sidebar *  { display: none !important; }

    /* Padding container sur mobile */
    .cat-main-layout { padding: 20px 0 40px; }

    /* Barre contrôles : empiler filtre + tri sur mobile */
    .cat-controls-inner { flex-direction: row; flex-wrap: wrap; gap: 8px; }
    .cat-controls-left  { width: 100%; }
    .ctrl-results-count { font-size: 12px; }

    /* Carte produit plus lisible */
    .pc-name   { font-size: 12px; }
    .pc-price  { font-size: 13px; }
    .pc-foot   { padding: 0 10px 10px; gap: 6px; }
    .pc-btn    { font-size: 11px; padding: 7px 0; }
    .pc-body   { padding: 10px 12px; }

    /* Pagination compacte */
    .cat-pagination { flex-direction: column; align-items: flex-start; gap: 8px; }
    .pag-list li a, .pag-list li span { width: 34px; height: 34px; font-size: 12px; }
}

@media(max-width:480px) {
    /* Vue liste : ne pas écraser l'image */
    .pli-actions { gap: 6px; }
    .pli-body    { padding: 12px 10px; }
    .pli-name    { font-size: 13px; }

    /* Boutons footer card */
    .pc-foot .pc-btn-secondary { display: none; } /* masquer le bouton info sur très petit écran */
    .pc-foot .pc-btn-primary   { flex: 1; }
}