/* Styles complémentaires — PatteGrise */

/* Notation étoiles */
.rating {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.rating__stars { color: #f0a500; font-size: 1.1rem; }
.rating__score { font-weight: 700; }
.rating__count { color: var(--color-text-light); font-size: 0.88rem; }

/* Tableau comparatif responsive */
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0; }

/* Highlight box (notre avis) */
.notre-avis {
    background: linear-gradient(135deg, #f0f5f1, #faf8f5);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin: 2rem 0;
}
.notre-avis__title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

/* Pros/Cons */
.pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}
.pros, .cons {
    padding: 1rem;
    border-radius: var(--radius);
}
.pros { background: #f0faf4; border: 1px solid #b8e4c8; }
.cons { background: #fff5f5; border: 1px solid #fcc; }
.pros h4 { color: #2d7a4e; margin-bottom: 0.5rem; }
.cons h4 { color: #c0392b; margin-bottom: 0.5rem; }
.pros ul, .cons ul { list-style: none; padding: 0; font-size: 0.92rem; }
.pros li::before { content: "✓ "; color: #2d7a4e; font-weight: bold; }
.cons li::before { content: "✗ "; color: #c0392b; font-weight: bold; }

/* Sticky CTA sur mobile */
@media (max-width: 768px) {
    .sticky-cta {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 2px solid var(--color-border);
        padding: 0.8rem 1rem;
        z-index: 50;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
    }
}

/* Score badge */
.score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
}
.score-badge--high { background: var(--color-success); }
.score-badge--mid  { background: var(--color-warning); }
.score-badge--low  { background: #e74c3c; }

@media (max-width: 600px) {
    .pros-cons { grid-template-columns: 1fr; }
}