/* Card Popularity : fond et border rouge, graphique animé */
.stat-card-popularity {
    background: linear-gradient(120deg,#fee2e2 60%,#fecaca 100%);
    border: 1.5px solid #ef4444;
    position: relative;
    overflow: hidden;
}
.stat-card-popularity::before {
    content: '';
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    background: url('data:image/svg+xml;utf8,<svg width="100%25" height="100%25" viewBox="0 0 120 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0,55 Q20,40 40,50 Q60,30 80,40 Q100,10 120,25" stroke="%23ef4444" stroke-width="2.5" fill="none" opacity="0.18"/><circle cx="100" cy="10" r="4" fill="%23ef4444" opacity="0.22"/></svg>');
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
    pointer-events: none;
    animation: stat-graph-move 2.5s linear infinite alternate;
}

    .stats-rows {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.4rem;
        margin: 0.4rem 1.0rem;
    }
    .stat-card, .stat-rating {
        max-height: 120px;
        height: 100%;
        display: flex;
        align-items: stretch;
        justify-content: stretch;
    }
    .stat-card-inner {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 1.1rem;
        box-shadow: 0 2px 8px 0 rgba(80,40,120,0.07);
        padding: 1.1rem 0.7rem 0.7rem 0.7rem;
        height: 100%;
        transition: box-shadow 0.2s;
        background: #fff;
    }
    .stat-card-views {
        background: linear-gradient(120deg,#ede9fe 60%,#c7d2fe 100%);
        border: 1.5px solid #5b21b6;
        position: relative;
        overflow: hidden;
    }
    .stat-card-sales {
        background: linear-gradient(120deg,#fff7ed 60%,#ffedd5 100%);
        border: 1.5px solid #ff8800;
        position: relative;
        overflow: hidden;
    }

    /* Graphique SVG simulé en fond pour views */
    .stat-card-views::before {
        content: '';
        position: absolute;
        left: 0; top: 0; width: 100%; height: 100%;
        background: url('data:image/svg+xml;utf8,<svg width="100%25" height="100%25" viewBox="0 0 120 60" fill="none" xmlns="http://www.w3.org/2000/svg"><polyline points="0,50 20,40 40,45 60,30 80,35 100,20 120,25" stroke="%235b21b6" stroke-width="2.5" fill="none" opacity="0.18"/><circle cx="100" cy="20" r="3" fill="%235b21b6" opacity="0.22"/></svg>');
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 0;
        pointer-events: none;
        animation: stat-graph-move 2.5s linear infinite alternate;
    }
    /* Graphique SVG simulé en fond pour sales */
    .stat-card-sales::before {
        content: '';
        position: absolute;
        left: 0; top: 0; width: 100%; height: 100%;
        background: url('data:image/svg+xml;utf8,<svg width="100%25" height="100%25" viewBox="0 0 120 60" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="10" y="40" width="10" height="15" fill="%23ff8800" opacity="0.13"/><rect x="30" y="30" width="10" height="25" fill="%23ff8800" opacity="0.18"/><rect x="50" y="20" width="10" height="35" fill="%23ff8800" opacity="0.22"/><rect x="70" y="35" width="10" height="20" fill="%23ff8800" opacity="0.15"/><rect x="90" y="25" width="10" height="30" fill="%23ff8800" opacity="0.19"/></svg>');
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 0;
        pointer-events: none;
        animation: stat-graph-move 2.5s linear infinite alternate;
    }
    @keyframes stat-graph-move {
        0% { background-position-x: 0%; }
        100% { background-position-x: 10%; }
    }
    .stat-card-inner {
        position: relative;
        z-index: 1;
        /* ...existing code... */
    }
    .stat-card-icon {
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .stat-card-label {
        font-size: 1.1rem;
        font-weight: 600;
        color: #43149c;
        margin-bottom: 0.2rem;
    }
    .stat-card-value {
        font-size: 2.1rem;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 0.2rem;
        transition: color 0.2s;
    }
    .stat-card-saleinfo {
        margin-top: 0.2rem;
        display: flex;
        gap: 0.5rem;
    }
    .stat-sale-badge {
        background: #5b21b6;
        color: #fff;
        border-radius: 0.7rem;
        padding: 0.1rem 0.7rem;
        font-size: 1rem;
        font-weight: 600;
    }
    .stat-sale-amount {
        background: #ff8800;
        color: #fff;
        border-radius: 0.7rem;
        padding: 0.1rem 0.7rem;
        font-size: 1rem;
        font-weight: 600;
    }

@media (max-width: 868px) {
    .stats-rows {
        grid-template-columns: repeat(2, 1fr);
    }
    #views-card { display: none !important; }
    #sales-card { display: none !important; }
}