/* ==========================================================================
   blog.css — Utilise les variables de theme.css
   ========================================================================== */

.article-tag {
  display: inline-block; padding: 3px 10px; border-radius: 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.article-tag.wifi     { background: var(--tag-wifi-bg); color: var(--accent-orange); }
.article-tag.securite { background: var(--tag-secu-bg); color: var(--accent-red); }
.article-tag.lan      { background: var(--tag-lan-bg);  color: var(--accent-gold); }
.article-tag.terrain  { background: var(--tag-green-bg); color: var(--accent-green); }

.filter-tag {
  background: var(--filter-bg); border: 1px solid var(--filter-border);
  color: var(--text-muted); padding: 6px 16px; border-radius: 20px;
  font-size: 14px; cursor: pointer; transition: all 0.2s; user-select: none;
}
.filter-tag:hover, .filter-tag.active {
  border-color: var(--accent-orange); color: var(--accent-orange);
  background: var(--filter-active-bg);
}

.read-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--accent-orange);
}
.read-more::after { content: '→'; transition: transform 0.2s; }
.article-card:hover .read-more::after { transform: translateX(4px); }

.reading-time {
  font-size: 12px; color: var(--text-muted);
  background: var(--reading-time-bg); padding: 2px 8px; border-radius: 10px;
}