:root{
  --kblue:#1d4ed8;
  --kblue2:#2563eb;
  --kink:#0f172a;
  --kmuted:#64748b;
  --kbg:#f8fafc;
  --kline:#e5e7eb;
  --kradius:14px;
}

.kchrome-container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

.kchrome-header{
  background:#fff;
  border-bottom:1px solid var(--kline);
  position:sticky;
  top:0;
  z-index:50;
}

.kchrome-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
}

.kchrome-logo{
  font-weight:800;
  font-size:20px;
  color:var(--kblue);
  text-decoration:none;
}

.kchrome-mainnav ul{
  display:flex;
  gap:14px;
  list-style:none;
  margin:0;
  padding:0;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.kchrome-link{
  font-size:14px;
  color:var(--kmuted);
  padding:8px 10px;
  border-radius:999px;
  text-decoration:none;
  transition:background .2s ease, color .2s ease;
}

.kchrome-link:hover{
  color:var(--kblue);
  background:#eff6ff;
}

.kchrome-link--active{
  color:var(--kblue);
  background:#eff6ff;
  border:1px solid #bfdbfe;
}

.kchrome-main{
  background:var(--kbg);
  padding:22px 0 30px;
}

/* On laisse ton app gérer ses tailles, mais on évite que tout colle au header */
#root{
  min-height: calc(100vh - 64px - 160px);
}

/* Footer */
.kchrome-footer{
  background:#020617;
  color:#e5e7eb;
  padding:44px 0;
}

.kchrome-footer-inner{
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}

.kchrome-footer-title{
  font-weight:800;
  margin-bottom:8px;
}

.kchrome-footer-muted{
  color:#cbd5e1;
  font-size:14px;
  margin:4px 0;
}

.kchrome-footer a{
  color:#cbd5f5;
  text-decoration:none;
}

.kchrome-footer a:hover{
  color:#ffffff;
}

.kchrome-footer-links a{
  display:block;
  font-size:14px;
  margin:0 0 8px;
}

@media (max-width: 980px){
  .kchrome-nav{height:auto; padding:12px 0;}
}