/*
Theme Name: Mataf News
Theme URI: https://example.com/mataf-news
Author: Mataf TV & ChatGPT
Description: Thème magazine optimisé pour articles importés (RSS) avec affichage de la source et bouton 'Lire plus'.
Version: 0.3.2
License: GPL-2.0+
Text Domain: mataf-news
Tags: news, magazine, grid, responsive
*/

/* =====================
   Variables couleurs
===================== */
:root {
  --bg:#f8f9fa;
  --card:#ffffff;
  --text:#1e293b;
  --muted:#64748b;
  --accent:#3b82f6;
  --accent-2:#2563eb;
  --radius:16px;
  --shadow:0 4px 20px rgba(0,0,0,0.08);
}

/* =====================
   Reset & général
===================== */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background: var(--bg);
  color: var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;
}
a { color:var(--accent); text-decoration:none; }
a:hover { opacity:.9; }
.container { max-width:1200px; margin:0 auto; padding:0 16px; }

/* =====================
   Header & menu
===================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #000000 !important;       /* noir pur */
  background-color: #000000 !important; /* sécurité */
  border-bottom: 1px solid rgba(255,255,255,.1);
  backdrop-filter: none !important;     /* aucune transparence */
}

.site-header * {
  background: transparent !important;
}




.navbar { display:flex; gap:16px; align-items:center; justify-content:space-between; padding:14px 0; }
.brand { display:flex; gap:10px; align-items:center; }
.brand .logo { width:36px; height:36px; border-radius:12px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); }
.brand .name { font-weight:700; letter-spacing:.3px; color:#ffffff; }
.menu { display:flex; gap:16px; flex-wrap:wrap; }
.menu a { padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.05); color:#ffffff; }
.menu a.current { background:linear-gradient(135deg, rgba(59,130,246,.2), rgba(37,99,235,.2)); }
.search { display:flex; gap:8px; align-items:center; }
.search input {
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  color:#ffffff;
  padding:10px 12px;
  border-radius:10px;
  outline:none;
  min-width:200px;
}

/* =====================
   Boutons
===================== */
.btn {
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
  font-weight:700;
  border:none;
  border-radius:12px;
  padding:10px 14px;
  cursor:pointer;
  box-shadow:var(--shadow);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn:disabled { opacity:.6; cursor:not-allowed; }
.btn.outline {
  background:transparent;
  border:1px solid rgba(100,116,139,.3);
  color:var(--text);
}

/* =====================
   Sections & cartes
===================== */
.main { padding:24px 0; }
.grid {
  display:grid;
  gap:18px;
  grid-template-columns:repeat(12,1fr);
}
.grid.cols-3>.card { grid-column:span 4; }
.grid.cols-2>.card { grid-column:span 6; }
.grid.cols-1>.card { grid-column:span 12; }

.card {
  background: var(--card);
  border:1px solid rgba(100,116,139,.12);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.card .thumb { aspect-ratio:16/9; width:100%; object-fit:cover; background:var(--card); }
.card .body { padding:14px; }
.card .meta { font-size:12px; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.card h3 { margin:.3rem 0 .4rem; font-size:1.05rem; line-height:1.3; }
.badge {
  display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-radius:999px; padding:4px 8px; font-weight:700;
}
.section { margin:28px 0; }
.section .head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.section .title { font-size:1.2rem; font-weight:800; letter-spacing:.3px; }
.source-cta { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.source-cta .src { font-size:12px; color:var(--muted); }

/* =====================
   Images cartes
===================== */
.card .thumb img { width:100%; height:200px; object-fit:cover; }

/* =====================
   Footer
===================== */
.site-footer {
  background: #000a08; /* bleu foncé */
  color:#ffffff;
  padding:50px 16px 20px 16px;
  font-family: system-ui, sans-serif;
  clear:both;
}
.footer-columns { display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; }
.footer-col { flex:1 1 30%; min-width:220px; }
.footer-col h4 { font-size:1.2rem; margin-bottom:16px; font-weight:700; border-bottom:2px solid rgba(255,255,255,.3); display:inline-block; padding-bottom:6px; }
.footer-col ul { list-style:none; padding:0; margin:0; }
.footer-col ul li { margin-bottom:10px; }
.footer-col ul li a { color:#ffffff; text-decoration:none; transition:all 0.3s ease; }
.footer-col ul li a:hover { color:var(--accent); text-decoration:underline; }
.social-links li { display:inline-block; margin-right:14px; }
.footer-bottom { text-align:center; margin-top:40px; border-top:1px solid rgba(255,255,255,.3); padding-top:16px; font-size:0.9rem; color:#e0f7ff; }

/* =====================
   Responsive mobile
===================== */
@media (max-width:1024px) {
  .grid.cols-3>.card { grid-column:span 6; }
}

@media (max-width:768px){
  .footer-columns { flex-direction:column !important; gap:24px; }
  .footer-col { flex:1 1 100%; }
}

@media (max-width:640px) {
  .grid { display:grid !important; grid-template-columns:1fr !important; gap:16px; max-width:100%; }
  .grid>.card { grid-column:span 12 !important; width:100%; }
}