/* Compatibilité page */
.compat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .compat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .compat-grid { grid-template-columns: 1fr; } }
.compat-card { background: #fff; border: 1px solid rgba(0,0,0,0.07); border-radius: var(--radius-lg); padding: 1.75rem; transition: transform 0.24s var(--ease), box-shadow 0.24s; }
.compat-card:hover { transform: translateY(-5px); box-shadow: 0 16px 44px rgba(0,0,0,0.08); }
.compat-icon { font-size: 2rem; display: block; margin-bottom: 0.75rem; }
.compat-name { font-size: 1.05rem; font-weight: 800; color: var(--ink); margin-bottom: 0.3rem; }
.compat-models { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.75rem; }
.compat-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; color: #16a34a; background: rgba(22,163,74,0.1); padding: 0.25rem 0.7rem; border-radius: 99px; margin-bottom: 1rem; }
.compat-apps { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1.25rem; }
.compat-apps li { font-size: 0.82rem; color: #3a3a5c; padding-left: 1rem; position: relative; }
.compat-apps li::before { content: '•'; position: absolute; left: 0; color: var(--red); }
.compat-link { font-size: 0.85rem; font-weight: 700; color: var(--red); }

.compat-table-wrap { overflow-x: auto; }
.compat-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.compat-table th { background: #0d0d1a; color: #fff; padding: 0.9rem 1rem; text-align: left; font-size: 0.78rem; }
.compat-table td { padding: 0.85rem 1rem; border-bottom: 1px solid rgba(0,0,0,0.06); background: #fff; color: #3a3a5c; }
.compat-table .check { color: #16a34a; font-weight: 700; }
.compat-table .check-partial { color: #d97706; font-size: 0.78rem; }