/* Klikage — Demo publique de verification d'age (modale autonome). */
.kdemo-overlay {
  position: fixed; inset: 0; z-index: 999999;
  background: rgba(8, 10, 18, 0.78); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: kdemo-fade .2s ease;
}
@keyframes kdemo-fade { from { opacity: 0; } to { opacity: 1; } }
.kdemo-card {
  position: relative; width: 100%; max-width: 460px;
  background: #141826; color: #eef0f6;
  border: 1px solid rgba(120, 140, 255, .18);
  border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  max-height: 92vh; overflow-y: auto;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.kdemo-body { padding: 30px 28px 26px; }
.kdemo-close {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  background: transparent; border: 0; color: #97a0bd;
  font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
.kdemo-close:hover { color: #fff; background: rgba(255,255,255,.06); }

.kdemo-badge {
  display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: #9db0ff;
  background: rgba(108, 140, 255, .12); border: 1px solid rgba(108, 140, 255, .28);
  padding: 5px 11px; border-radius: 999px; margin-bottom: 14px;
}
.kdemo-h2 { font-family: 'Syne', sans-serif; font-size: 1.45rem; margin: 0 0 10px; line-height: 1.2; }
.kdemo-h3 { font-size: 1.05rem; margin: 0 0 6px; }
.kdemo-p { color: #b8c0d6; line-height: 1.55; margin: 0 0 14px; font-size: .95rem; }
.kdemo-list { color: #b8c0d6; line-height: 1.5; margin: 0 0 20px; padding-left: 20px; font-size: .92rem; }
.kdemo-list li { margin-bottom: 6px; }
.kdemo-fine { color: #8a93ad; font-size: .8rem; line-height: 1.5; margin: 14px 0 0; }
.kdemo-fine a, .kdemo-check a { color: #8aa2ff; }

.kdemo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 18px; border-radius: 12px; border: 0;
  font-size: .98rem; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: transform .12s ease, opacity .12s ease;
}
.kdemo-btn:active { transform: translateY(1px); }
.kdemo-btn:disabled { opacity: .55; cursor: default; }
.kdemo-btn--primary { background: linear-gradient(135deg, #6c8cff, #8a6cff); color: #fff; }
.kdemo-btn--primary:hover { filter: brightness(1.07); }
.kdemo-btn--ghost { background: transparent; color: #c7cee2; border: 1px solid rgba(160,170,210,.25); }
.kdemo-btn--ghost:hover { background: rgba(255,255,255,.05); }
.kdemo-btn--link {
  background: transparent; color: #8aa2ff; border: 0; margin-top: 8px;
  font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.kdemo-btn--link:hover { color: #aeb9ff; }

/* Secours mobile (handoff QR) */
.kdemo-qr {
  display: flex; align-items: center; justify-content: center;
  width: 200px; height: 200px; margin: 6px auto 16px; padding: 12px;
  background: #fff; border-radius: 14px; box-sizing: border-box;
  color: #64748b; font-size: .85rem; text-align: center;
}
.kdemo-qr img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.kdemo-steps {
  color: #b8c0d6; line-height: 1.5; margin: 0 0 18px; padding-left: 20px; font-size: .92rem;
}
.kdemo-steps li { margin-bottom: 6px; }

.kdemo-videowrap {
  position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 14px;
  overflow: hidden; background: #0c0f18; margin: 4px 0 16px;
  border: 1px solid rgba(120,140,255,.15);
}
.kdemo-video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.kdemo-scanline {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #6c8cff, transparent);
  box-shadow: 0 0 12px #6c8cff; animation: kdemo-scan 2.4s ease-in-out infinite;
}
@keyframes kdemo-scan { 0%,100% { top: 8%; } 50% { top: 92%; } }

.kdemo-status { display: flex; align-items: center; gap: 10px; color: #c7cee2; font-size: .92rem; }
.kdemo-spin {
  width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid rgba(160,170,210,.3); border-top-color: #6c8cff;
  animation: kdemo-rot .8s linear infinite;
}
@keyframes kdemo-rot { to { transform: rotate(360deg); } }

.kdemo-result { text-align: center; padding: 8px 0 4px; }
.kdemo-result-icon { font-size: 3rem; line-height: 1; margin-bottom: 8px; }
.kdemo-result--ok .kdemo-h2 { color: #5fe0a8; }
.kdemo-result--ko .kdemo-h2 { color: #ff9a8a; }

.kdemo-sep { border: 0; border-top: 1px solid rgba(160,170,210,.14); margin: 22px 0 18px; }

.kdemo-news { background: rgba(108,140,255,.06); border: 1px solid rgba(108,140,255,.16); border-radius: 14px; padding: 18px; }
.kdemo-form { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.kdemo-input {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  background: #0e111c; border: 1px solid rgba(160,170,210,.25); color: #eef0f6;
  font-size: .95rem; font-family: inherit; box-sizing: border-box;
}
.kdemo-input:focus { outline: none; border-color: #6c8cff; }
.kdemo-check { display: flex; gap: 9px; align-items: flex-start; color: #b8c0d6; font-size: .85rem; line-height: 1.45; cursor: pointer; }
.kdemo-check input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: #6c8cff; }
.kdemo-news-msg { font-size: .88rem; padding: 8px 0 0; }
.kdemo-news-msg--ok { color: #5fe0a8; }
.kdemo-news-msg--err { color: #ff9a8a; }

@media (max-width: 520px) {
  .kdemo-body { padding: 26px 20px 22px; }
  .kdemo-h2 { font-size: 1.3rem; }
}