/* Cartes d'actualités, communes à l'accueil (aperçu) et à la page Actualités */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.news-card {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 20px 20px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel);
  transition: border-color .25s, transform .25s;
}
.news-card:hover { border-color: rgba(244, 122, 46, 0.45); transform: translateY(-3px); }
.news-card:focus-within { border-color: var(--flame); }
.news-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.news-cat { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 3px 8px; border-radius: 999px; border: 1px solid currentColor; }
.cat-cyber { color: var(--flame); }
.cat-tech { color: var(--sea); }
.cat-pro { color: #c4b5fd; }
.cat-afrique { color: var(--leaf); }
.cat-conseils { color: #fcd34d; }
.news-time { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.news-title { margin: 0; font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.01em; }
.news-title a { color: var(--fg); text-decoration: none; }
/* Toute la carte est cliquable via le lien du titre */
.news-card { position: relative; }
.news-title a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.news-title a:focus-visible { outline: none; }
.news-excerpt { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }
.news-source { margin: auto 0 0; padding-top: 6px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.news-source::before { content: "↗ "; color: var(--flame); }
.news-msg { color: var(--muted); margin: 0 0 14px; }
.news-more-row { display: flex; justify-content: center; margin-top: 28px; }
.news-note { margin: 22px 0 0; font-size: 0.8125rem; color: var(--muted); }

@media (max-width: 960px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .news-card { transition: none; } }