/* ════════════════════════════════════════════════════════════════════
   MeowChip Shop — shop.css v1.0.0
   Palette : #FB7258 coral · #8B3A21 bordeaux · #171927 dark
             #f9f7ef parchemin · #8a9a5b olive · #647687 slate
   ════════════════════════════════════════════════════════════════════ */

.mcs-wrap {
    --mcs-coral:   #FB7258;
    --mcs-rust:    #8B3A21;
    --mcs-dark:    #171927;
    --mcs-parch:   #f9f7ef;
    --mcs-parch2:  #e7e4d6;
    --mcs-olive:   #8a9a5b;
    --mcs-slate:   #647687;
    --mcs-card:    #F4F4F5;
    --mcs-border:  #DFDFE2;
    --mcs-sr:      Georgia, 'Times New Roman', serif;
    --mcs-r:       8px;

    /* Full width — casse le conteneur Blocksy */
    width:        calc(100% + 2 * var(--global-content-spacing, 20px)) !important;
    margin-left:  calc(-1 * var(--global-content-spacing, 20px)) !important;
    margin-right: calc(-1 * var(--global-content-spacing, 20px)) !important;
    max-width:    none !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--mcs-dark);
    overflow-x: hidden;
}
.mcs-wrap *, .mcs-wrap *::before, .mcs-wrap *::after { box-sizing: border-box; }

/* ── Layout ───────────────────────────────────────────────────────── */
.mcs-section { padding: 48px 0; }
.mcs-section + .mcs-section { border-top: 1px solid var(--mcs-border); }
.mcs-inner { max-width: 1160px; margin: 0 auto; padding: 0 20px; }

.mcs-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.mcs-section-title {
    font-family: var(--mcs-sr);
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    font-weight: 700;
    color: var(--mcs-rust);
    margin: 0 0 4px;
}
.mcs-section-sub {
    font-size: .75rem;
    color: var(--mcs-slate);
    margin: 0;
}
.mcs-btn-all {
    flex-shrink: 0;
    font-size: .75rem;
    font-weight: 700;
    color: var(--mcs-rust) !important;
    border: 1.5px solid var(--mcs-rust);
    padding: 7px 14px;
    border-radius: 4px;
    text-decoration: none !important;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.mcs-btn-all:hover { background: var(--mcs-rust); color: var(--mcs-parch) !important; }

/* ── PODIUM ───────────────────────────────────────────────────────── */
.mcs-section--podium { background: var(--mcs-parch); }

/* Radio tabs CSS purs */
.mcs-tab-radio { display: none; }

.mcs-tabs-nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-bottom: 20px;
}
.mcs-tabs-nav::-webkit-scrollbar { display: none; }

.mcs-tab-label {
    flex: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1.5px solid var(--mcs-border);
    border-radius: 4px;
    cursor: pointer;
    background: #fff;
    transition: all .15s;
    white-space: nowrap;
    user-select: none;
}
.mcs-tab-label:hover { border-color: var(--mcs-rust); }
.mcs-tab-icon { font-size: 1rem; }
.mcs-tab-name { font-size: .75rem; font-weight: 700; color: var(--mcs-dark); letter-spacing: .04em; }

/* Panels */
.mcs-tabs-panels .mcs-panel { display: none; }

/* Liste podium */
.mcs-podium-list { display: flex; flex-direction: column; gap: 8px; }

.mcs-podium-item {
    display: grid;
    grid-template-columns: 32px 80px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--mcs-border);
    border-radius: var(--mcs-r);
    transition: border-color .15s, box-shadow .15s;
}
.mcs-podium-item:hover { border-color: var(--mcs-rust); box-shadow: 0 3px 12px rgba(139,58,33,.08); }
.mcs-podium-item--top {
    border-color: rgba(139,58,33,.3);
    background: #fffdf8;
}

.mcs-podium-rank { font-size: 1.3rem; text-align: center; flex-shrink: 0; }

.mcs-podium-img-wrap {
    display: block;
    width: 80px;
    height: 72px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--mcs-card);
    flex-shrink: 0;
}
.mcs-podium-img-wrap img { width: 100%; height: 100%; object-fit: contain; }

.mcs-podium-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mcs-podium-nom { margin: 0; font-size: .88rem; font-weight: 600; line-height: 1.3; }
.mcs-podium-nom a { color: var(--mcs-dark) !important; text-decoration: none !important; }
.mcs-podium-nom a:hover { color: var(--mcs-coral) !important; }

.mcs-podium-score-row { display: flex; align-items: center; gap: 8px; }
.mcs-score-bar-wrap { flex: 1; max-width: 200px; height: 5px; background: var(--mcs-border); border-radius: 3px; overflow: hidden; }
.mcs-score-bar-fill { height: 100%; border-radius: 3px; transition: width .8s ease; }
.mcs-score-val { font-size: .9rem; font-weight: 800; color: var(--mcs-rust); font-family: var(--mcs-sr); }
.mcs-score-max { font-size: .65rem; color: var(--mcs-slate); }

/* Mini jauges */
.mcs-gauges-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mcs-gauge-item { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 52px; }
.mcs-gauge-svg { width: 48px; height: 48px; }
.mcs-gauge-track { fill: none; stroke: var(--mcs-border); stroke-width: 3; stroke-linecap: round; }
.mcs-gauge-fill { fill: none; stroke-width: 3; stroke-linecap: round; transform-origin: center; transform: rotate(-90deg); }
.mcs-gauge-val { font-size: 9.5px; font-weight: 800; fill: var(--mcs-dark); text-anchor: middle; dominant-baseline: central; }
.mcs-gauge-label { font-size: .6rem; color: var(--mcs-slate); text-align: center; white-space: nowrap; }

.mcs-podium-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.mcs-podium-prix { font-size: .9rem; font-weight: 700; color: var(--mcs-coral); white-space: nowrap; }
.mcs-badge { font-size: .6rem; font-weight: 700; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: .04em; }
.mcs-badge--anc { background: rgba(139,58,33,.1); color: var(--mcs-rust); }
.mcs-btn-fiche {
    font-size: .72rem; font-weight: 700; padding: 6px 12px;
    background: var(--mcs-rust); color: #fff !important; border-radius: 4px;
    text-decoration: none !important; transition: background .15s;
    white-space: nowrap;
}
.mcs-btn-fiche:hover { background: var(--mcs-coral); }

/* ── CATÉGORIES ───────────────────────────────────────────────────── */
.mcs-section--cats { background: #fff; }
.mcs-cats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.mcs-cat-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mcs-border);
    border-radius: var(--mcs-r);
    overflow: hidden;
    text-decoration: none !important;
    transition: border-color .15s, transform .15s, box-shadow .15s;
    background: var(--mcs-parch);
}
.mcs-cat-card:hover { border-color: var(--mcs-rust); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(139,58,33,.1); }

.mcs-cat-thumb { width: 100%; aspect-ratio: 4/3; overflow: hidden; background: var(--mcs-card); }
.mcs-cat-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.mcs-cat-card:hover .mcs-cat-thumb img { transform: scale(1.05); }
.mcs-cat-thumb--empty { display: flex; align-items: center; justify-content: center; font-size: 2rem; }

.mcs-cat-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.mcs-cat-name { font-size: .8rem; font-weight: 700; color: var(--mcs-dark); line-height: 1.3; }
.mcs-cat-count { font-size: .68rem; color: var(--mcs-slate); }

/* ── NOUVEAUTÉS ───────────────────────────────────────────────────── */
.mcs-section--new { background: var(--mcs-parch); }
.mcs-new-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.mcs-new-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mcs-border);
    border-radius: var(--mcs-r);
    overflow: hidden;
    background: #fff;
    text-decoration: none !important;
    transition: border-color .15s, box-shadow .15s;
}
.mcs-new-card:hover { border-color: var(--mcs-rust); box-shadow: 0 4px 16px rgba(139,58,33,.1); }
.mcs-new-badge {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    background: var(--mcs-rust); color: #fff;
    font-size: .6rem; font-weight: 700; padding: 2px 7px;
    border-radius: 3px; letter-spacing: .04em;
}
.mcs-new-img { width: 100%; aspect-ratio: 4/3; overflow: hidden; background: var(--mcs-card); }
.mcs-new-img img { width: 100%; height: 100%; object-fit: contain; }
.mcs-new-body { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.mcs-new-pilier { font-size: .62rem; font-weight: 700; color: var(--mcs-olive); text-transform: uppercase; letter-spacing: .06em; }
.mcs-new-nom { font-size: .82rem; font-weight: 600; color: var(--mcs-dark); margin: 0; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mcs-new-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.mcs-new-score { font-size: .78rem; font-weight: 800; color: var(--mcs-rust); }
.mcs-new-prix { font-size: .75rem; color: var(--mcs-slate); }

/* ── Q/PRIX ───────────────────────────────────────────────────────── */
.mcs-section--qp { background: #fff; }
.mcs-qp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.mcs-qp-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--mcs-border);
    border-radius: var(--mcs-r);
    text-decoration: none !important;
    background: var(--mcs-parch);
    transition: border-color .15s, box-shadow .15s;
    position: relative;
}
.mcs-qp-card:hover { border-color: var(--mcs-rust); box-shadow: 0 4px 16px rgba(139,58,33,.1); }
.mcs-qp-img { width: 70px; height: 70px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: var(--mcs-card); }
.mcs-qp-img img { width: 100%; height: 100%; object-fit: contain; }
.mcs-qp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mcs-qp-pilier { font-size: .6rem; font-weight: 700; color: var(--mcs-olive); text-transform: uppercase; letter-spacing: .06em; }
.mcs-qp-nom { font-size: .82rem; font-weight: 600; color: var(--mcs-dark); margin: 0; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mcs-qp-scores { display: flex; gap: 10px; }
.mcs-qp-qp-score { font-size: .72rem; color: var(--mcs-slate); }
.mcs-qp-qp-score strong { color: var(--mcs-coral); font-weight: 800; }
.mcs-qp-global { font-size: .72rem; color: var(--mcs-slate); }
.mcs-qp-global strong { color: var(--mcs-rust); font-weight: 800; }
.mcs-qp-prix { font-size: .82rem; font-weight: 700; color: var(--mcs-coral); }
.mcs-qp-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: .9rem; color: var(--mcs-rust); opacity: .5; }
.mcs-qp-card:hover .mcs-qp-arrow { opacity: 1; }

/* ── CTA ARBITRE ──────────────────────────────────────────────────── */
.mcs-section--arbitre { background: var(--mcs-dark); }
.mcs-arbitre-block {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    justify-content: space-between;
}
.mcs-arbitre-icon {
    font-size: 3rem;
    color: var(--mcs-coral);
    flex-shrink: 0;
    filter: drop-shadow(0 0 16px rgba(251,114,88,.4));
}
.mcs-arbitre-content { flex: 1; min-width: 200px; }
.mcs-arbitre-title {
    font-family: var(--mcs-sr);
    font-size: clamp(1.1rem, 3vw, 1.6rem);
    font-weight: 700;
    color: var(--mcs-parch);
    margin: 0 0 6px;
}
.mcs-arbitre-desc { font-size: .85rem; color: var(--mcs-slate); margin: 0; line-height: 1.5; }
.mcs-arbitre-cta-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    background: var(--mcs-rust);
    color: var(--mcs-parch) !important;
    text-decoration: none !important;
    border-radius: 6px;
    font-family: var(--mcs-sr);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .03em;
    transition: background .15s, transform .12s;
    white-space: nowrap;
}
.mcs-arbitre-cta-btn:hover { background: var(--mcs-coral); color: var(--mcs-dark) !important; transform: translateY(-2px); }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .mcs-new-grid { grid-template-columns: repeat(3, 1fr); }
    .mcs-cats-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
    .mcs-section { padding: 32px 0; }
    /* Podium — image plus petite mais visible */
    .mcs-podium-item { grid-template-columns: 28px 56px 1fr; gap: 10px; }
    .mcs-podium-img-wrap { width: 56px; height: 52px; }
    .mcs-podium-right { display: none; }
    .mcs-podium-nom { font-size: .82rem; }
    /* Jauges — réduites mais visibles */
    .mcs-gauges-row { gap: 5px; }
    .mcs-gauge-item { width: 42px; }
    .mcs-gauge-svg { width: 38px; height: 38px; }
    .mcs-gauge-val { font-size: 8px; }
    .mcs-gauge-label { font-size: .55rem; }
    /* Grilles */
    .mcs-cats-grid { grid-template-columns: repeat(2, 1fr); }
    .mcs-new-grid { grid-template-columns: repeat(2, 1fr); }
    .mcs-qp-grid { grid-template-columns: 1fr; }
    /* Arbitre CTA — centré */
    .mcs-arbitre-block {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .mcs-arbitre-content { text-align: center; }
    .mcs-arbitre-cta-btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
    /* Podium — image encore plus petite */
    .mcs-podium-item { grid-template-columns: 24px 44px 1fr; gap: 8px; padding: 10px 12px; }
    .mcs-podium-img-wrap { width: 44px; height: 40px; }
    /* Jauges — 3 max sur très petit écran */
    .mcs-gauges-row .mcs-gauge-item:nth-child(n+4) { display: none; }
    .mcs-cats-grid { grid-template-columns: repeat(2, 1fr); }
    .mcs-new-grid { grid-template-columns: repeat(2, 1fr); }
    .mcs-tab-label { padding: 8px 10px; }
    .mcs-tab-icon { display: none; }
}