/* Fase 4 — Archive publique + ProCard (namespace .apb-*) */

.apb-archive { display:grid; grid-template-columns: 280px 1fr; gap:32px; padding:24px 0; }
@media (max-width: 900px) { .apb-archive { grid-template-columns: 1fr; } }

.apb-filtres { background:#FFFFFF; border:1px solid #E2E6EA; border-radius:16px; padding:20px; position:sticky; top:80px; }
.apb-filtres__title { margin:0 0 12px 0; color:#185FA5; font-size:1.1rem; }
.apb-filtres .apb-field { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.apb-filtres .apb-field span { font-size:0.85rem; color:#6B7280; }
.apb-filtres input, .apb-filtres select { padding:8px 10px; border:1px solid #E2E6EA; border-radius:8px; font-size:0.95rem; background:#F7F8FA; }

.apb-archive__header { margin-bottom:16px; }
.apb-archive__count { margin:0; color:#6B7280; }
.apb-archive__empty { padding:32px; text-align:center; background:#F7F8FA; border-radius:16px; color:#6B7280; }

.apb-pro-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
@media (max-width: 1100px) { .apb-pro-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .apb-pro-grid { grid-template-columns: 1fr; } }

.apb-pro-card { background:#FFFFFF; border:1px solid #E2E6EA; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; position:relative; transition:transform 0.2s, box-shadow 0.2s; }
.apb-pro-card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(24,95,165,0.12); }
.apb-pro-card__cover { display:block; aspect-ratio: 4/3; overflow:hidden; background:#F7F8FA; }
.apb-pro-card__img { width:100%; height:100%; object-fit:cover; display:block; }
.apb-pro-card__img--placeholder { background: linear-gradient(135deg, #EBF3FB 0%, #F7F8FA 100%); }
.apb-pro-card__body { padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.apb-pro-card__title { margin:0; font-size:1.1rem; color:#1A1A2E; }
.apb-pro-card__title a { color:inherit; text-decoration:none; }
.apb-pro-card__title a:hover { color:#185FA5; }
.apb-pro-card__cats { display:flex; flex-wrap:wrap; gap:4px; }
.apb-pro-card__meta { display:flex; flex-direction:column; gap:4px; color:#6B7280; font-size:0.9rem; }
.apb-pro-card__rating { display:flex; align-items:center; gap:6px; font-size:0.9rem; }
.apb-rating-stars { color:#E6892A; letter-spacing:2px; }
.apb-rating-value { font-weight:600; color:#1A1A2E; }
.apb-rating-count { color:#6B7280; }
.apb-pro-card__cta { margin-top:auto; }
.apb-pro-card__cta .apb-btn { width:100%; text-align:center; }

.apb-chip { display:inline-block; padding:2px 8px; border-radius:6px; font-size:0.75rem; background:#F1F5F9; color:#334155; border:1px solid #CBD5E1; }
.apb-chip--cat { background:#EBF3FB; color:#0C447C; border-color:#93C5FD; }
.apb-chip--vies { background:#ECFDF5; color:#065F46; border-color:#6EE7B7; }
.apb-chip--super { background:#EBF3FB; color:#0C447C; border-color:#93C5FD; }
.apb-chip--complet { background:#ECFDF5; color:#065F46; border-color:#6EE7B7; }
.apb-chip--nouveau { background:#F1F5F9; color:#334155; border-color:#CBD5E1; }
.apb-chip--multi { background:#F1F5F9; color:#334155; border-color:#CBD5E1; }

.apb-badges { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0; }

.apb-favori-btn { background:none; border:none; cursor:pointer; color:#6B7280; font-size:1.5rem; padding:4px 8px; transition:color 0.2s, transform 0.15s; }
.apb-favori-btn.is-active { color:#DC2626; }
.apb-favori-btn:hover { transform:scale(1.1); }
.apb-favori-btn--floating { position:absolute; top:8px; right:8px; background:rgba(255,255,255,0.92); border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); box-shadow:0 2px 8px rgba(0,0,0,0.08); }

.apb-btn { display:inline-block; padding:10px 16px; border-radius:10px; border:none; cursor:pointer; font-weight:600; font-size:0.95rem; text-decoration:none; transition:background 0.2s; }
.apb-btn--primary { background:#185FA5; color:#FFFFFF; }
.apb-btn--primary:hover { background:#0C447C; color:#FFFFFF; }
.apb-btn--ghost { background:transparent; color:#185FA5; border:1px solid #E2E6EA; }
.apb-btn--ghost:hover { background:#F7F8FA; }

.apb-pagination { display:flex; gap:6px; justify-content:center; margin-top:32px; flex-wrap:wrap; }
.apb-pagination__link { padding:8px 14px; border-radius:8px; background:#F7F8FA; color:#185FA5; text-decoration:none; }
.apb-pagination__link.is-active { background:#185FA5; color:#FFFFFF; }