/*
Theme Name: Konverta
Theme URI: https://konverta.online
Author: Konverta
Author URI: https://konverta.online
Description: Thème WordPress Konverta — IA, Data & Croissance mesurable. Design sombre premium, optimisé conversion & SEO.
Version: 1.0.0
Text Domain: konverta
*/

/* ====== Design system (dark by défaut) ====== */
:root{
  --bg:#0f1115; --card:#12151c; --muted:#8b91a1; --text:#e9ecf1; --title:#fff;
  --brand:#ffd84d; --brand-strong:#ffc800; --ring:rgba(255,216,77,.35);
  --shadow:0 10px 25px rgba(0,0,0,.35); --radius:16px; --radius-lg:20px; --max:1120px;
}
[data-theme="light"]{
  --bg:#ffffff; --card:#f7f7f9; --muted:#586071; --text:#111418; --title:#0f1115;
  --shadow:0 10px 22px rgba(0,0,0,.08);
}

/* Reset minimal & base */
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: radial-gradient(1000px 600px at 20% -10%, #2a2f3b 0%, #171a22 40%, #0e1116 100%);
  color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
[data-theme="light"] body{background:#fff}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}

/* Layout */
.container{max-width:var(--max); margin:0 auto; padding:0 20px}
section{scroll-margin-top:84px; padding:28px 0}

/* Nav */
.nav{position:sticky; top:0; z-index:20; backdrop-filter:saturate(130%) blur(8px);
  background:linear-gradient(180deg, rgba(15,17,21,.85), rgba(15,17,21,.55));
  border-bottom:1px solid rgba(255,255,255,.06)}
[data-theme="light"] .nav{background:#ffffffcc; border-bottom:1px solid #e8eaee}
.nav-inner{max-width:var(--max); margin:0 auto; padding:12px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{display:flex; align-items:center; gap:10px; color:var(--title); font-weight:800; letter-spacing:.2px}
.brand .logo{width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:radial-gradient(80% 80% at 30% 20%, var(--brand) 0%, var(--brand-strong) 50%, #f4b500 100%);
  box-shadow:0 6px 18px var(--ring), inset 0 0 10px rgba(255,255,255,.25); color:#1b1400; font-size:18px; font-weight:900}
.nav-links{display:flex; gap:18px; flex-wrap:wrap; align-items:center}
.link{color:var(--text); font-weight:600; opacity:.9}
.link:hover{opacity:1}
.btn{
  appearance:none; border:0; cursor:pointer; padding:10px 16px; border-radius:999px; font-weight:700;
  color:#111; background:linear-gradient(180deg, var(--brand), var(--brand-strong)); box-shadow:0 8px 18px var(--ring); transition:transform .08s}
.btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)}
.btn-outline{padding:10px 16px; border-radius:999px; font-weight:700; color:var(--title); background:transparent; border:1.5px solid rgba(255,255,255,.18)}
[data-theme="light"] .btn-outline{color:#0f1115; border-color:#dfe3ea}

/* Hero */
.hero{padding:36px 0 12px}
.kicker{display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; color:#111;
  background:linear-gradient(180deg, var(--brand), var(--brand-strong)); box-shadow:0 6px 18px var(--ring)}
h1{margin:14px 0 8px; line-height:1.06; font-size: clamp(30px, 5vw, 54px); color:var(--title); font-weight:800}
.subtitle{font-size: clamp(14px, 2.4vw, 18px); color:var(--muted); max-width:820px}

/* Grid panels */
.grid{display:grid; grid-template-columns:1fr; gap:18px; margin-top:26px}
@media(min-width:900px){.grid{grid-template-columns:1fr 1fr}}
.panel{padding:22px; border-radius:var(--radius-lg); background:#161922; border:1px solid rgba(255,255,255,.06); box-shadow:var(--shadow)}
[data-theme="light"] .panel{background:#f7f7f9; border-color:#e8eaee}
.panel--light{background:linear-gradient(180deg, rgba(255,216,77,.12), rgba(255,216,77,.06)); border:1px solid rgba(255,216,77,.35)}
.panel h2{margin:2px 0 10px; font-size:24px; color:var(--title)}
.list{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.item{display:flex; gap:10px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06)}
[data-theme="light"] .item{background:#fff; border-color:#eceef2}
.badge{min-width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:rgba(255,216,77,.18); color:#ffd84d; font-size:14px; font-weight:900; box-shadow:inset 0 0 10px rgba(255,216,77,.18)}
.cta{margin-top:16px; display:flex; gap:12px; flex-wrap:wrap}

/* Center CTA */
.center-cta{margin:28px 0 8px}
.cta-card{background: radial-gradient(120% 120% at 100% 0%, rgba(255,216,77,.16), rgba(255,216,77,.06));
  border:1px solid rgba(255,216,77,.28); border-radius:var(--radius-lg); padding:18px; display:grid; gap:12px}
@media(min-width:860px){.cta-card{grid-template-columns:1.2fr 1fr; align-items:center}}
.inline{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.input{background:#0f131a; color:var(--text); border:1px solid rgba(255,255,255,.14); padding:10px 12px; border-radius:999px; outline:none; min-width:240px}
[data-theme="light"] .input{background:#fff; color:#0f1115; border-color:#dfe3ea}

/* Insights mini */
.card{margin-top:12px; background:#11151c; border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
[data-theme="light"] .card{background:#fff; border-color:#eceef2}
.mini{display:grid; gap:12px}
@media(min-width:760px){.mini{grid-template-columns:1.3fr 1fr}}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.kpi{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:12px}
[data-theme="light"] .kpi{background:#fff; border-color:#eceef2}
.kpi .label{color:var(--muted); font-size:12px; font-weight:600} .kpi .value{font-size:22px; font-weight:800; color:var(--title)}
.chart{height:160px; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.06)}
.bar{position:absolute; bottom:0; width:26px; background:rgba(255,216,77,.35); border:1px solid rgba(255,216,77,.65); border-radius:8px 8px 0 0}
.line{position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,216,77,.0) 0%, rgba(255,216,77,.35) 100%); mix-blend:screen; opacity:.6; clip-path: polygon(0% 70%, 20% 65%, 35% 72%, 50% 58%, 65% 66%, 80% 52%, 100% 60%)}

/* Project & Articles cards */
.cards{display:grid; grid-template-columns:1fr; gap:16px}
@media(min-width:860px){.cards{grid-template-columns:1fr 1fr 1fr}}
.proj{background:#131722; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:16px; display:grid; gap:8px}
[data-theme="light"] .proj{background:#fff; border-color:#eceef2}
.proj .tag{font-size:12px; color:#111; font-weight:800; padding:4px 8px; border-radius:999px; width:max-content; background:linear-gradient(180deg, var(--brand), var(--brand-strong))}
.proj h3{margin:4px 0 2px; color:var(--title); font-size:18px}
.proj p{margin:0; color:var(--muted)}
.article{background:#121621; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:16px; display:grid; gap:6px}
[data-theme="light"] .article{background:#fff; border-color:#eceef2}
.article h3{margin:0; font-size:18px} .article p{margin:0; color:var(--muted)}
.meta{font-size:12px; color:var(--muted)}

/* Footer */
footer{color:var(--muted); font-size:13px; text-align:center; padding:40px 16px 60px; border-top:1px solid rgba(255,255,255,.06); margin-top:30px}
[data-theme="light"] footer{border-top-color:#eceef2}
