/*
Theme Name: Infonumerik Theme
Theme URI: https://infonumerik.com
Author: Infonumerik
Author URI: https://infonumerik.com
Description: Thème vitrine responsive pour Numérisation + Dépannage informatique & téléphonie
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: infonumerik
*/

:root{
  --blue:#1976d2;   /* bleu Infonumerik */
  --red:#e53935;
  --black:#111;
  --gray-900:#1f2937;
  --gray-700:#374151;
  --gray-500:#6b7280;
  --gray-200:#e5e7eb;
  --bg:#f7f8fb;
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--gray-900); background:var(--bg); line-height:1.6;
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; display:block}
.container{width:min(1120px, 92%); margin:auto}
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px;
  background:var(--blue); color:#fff; font-weight:600; text-decoration:none; border:0;
  transition:.2s transform,.2s box-shadow;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 24px #0002; text-decoration:none}
.btn-outline{background:#fff; color:var(--blue); border:2px solid var(--blue)}
.badge{display:inline-block; padding:6px 10px; border-radius:999px; font-size:.85rem; background:#eaf2fe; color:var(--blue); font-weight:600}

header.site-header{
  position:sticky; top:0; z-index:50; background:#fff; box-shadow:0 2px 18px #0001;
}
.topbar{background:var(--black); color:#fff; font-size:.9rem}
.topbar .container{display:flex; gap:16px; align-items:center; justify-content:space-between; padding:8px 0}
.topbar a{color:#fff; text-decoration:none}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand-logo{
  width:42px; height:42px; border-radius:12px;
  background:linear-gradient(135deg,var(--blue),var(--red)); box-shadow:0 6px 20px #0002;
}
.brand-title{font-size:1.25rem; font-weight:800; letter-spacing:.2px}
.menu-toggle{display:none; border:0; background:#fff; padding:8px 10px; border-radius:10px}
.main-menu{display:flex; gap:22px; align-items:center}
.main-menu a{color:var(--gray-900); font-weight:600}
.main-menu .current-menu-item a{color:var(--blue)}

.hero{
  background: radial-gradient(1200px 600px at 85% -10%, #eaf2fe 0%, transparent 60%), #fff;
  padding:56px 0 22px;
  border-bottom:1px solid var(--gray-200);
}
.hero .grid{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center}
.hero h1{font-size:clamp(1.9rem,3.5vw,3rem); line-height:1.1; margin:0 0 16px}
.hero p{font-size:1.1rem; color:var(--gray-700); margin:0 0 18px}
.hero .cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:18px}
.card{
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius);
  padding:18px; box-shadow:0 10px 24px #0001;
}
.card h3{margin:0 0 8px}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px}
.kpi{background:#fff; border:1px solid var(--gray-200); padding:16px; border-radius:14px; text-align:center}
.kpi strong{font-size:1.4rem}

.section{padding:46px 0}
.section h2{font-size:clamp(1.6rem,2.5vw,2.2rem); margin:0 0 16px}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.cta{
  background:linear-gradient(120deg,var(--blue),var(--red));
  color:#fff; border-radius:var(--radius); padding:26px;
}

footer.site-footer{background:#0f172a; color:#cbd5e1; margin-top:42px}
.footer-top{padding:36px 0}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px}
.footer-title{color:#fff; font-weight:800; margin:0 0 12px}
.footer-bottom{border-top:1px solid #334155; padding:14px 0; font-size:.9rem; color:#94a3b8}

.post-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.post-card{background:#fff; border:1px solid var(--gray-200); border-radius:14px; overflow:hidden}
.post-card .content{padding:14px}
.post-card h3{margin:0 0 8px; font-size:1.1rem}

@media (max-width: 980px){
  .hero .grid{grid-template-columns:1fr}
  .hero .cards{grid-template-columns:1fr 1fr}
  .kpis{grid-template-columns:1fr 1fr 1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 680px){
  .main-menu{display:none}
  .menu-toggle{display:inline-flex}
  .hero .cards{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}