:root {
  --bg-main: #020617;
  --bg-card: #020617;
  --border-color: #111827;
  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --accent: #38bdf8;
  --accent-2: #8b5cf6;
  --kerki-primary: #38bdf8;
  --kerki-secondary: #8b5cf6;
}

[data-theme="light"] {
  --bg-main: #f9fafb;
  --bg-card: #ffffff;
  --border-color: #e5e7eb;
  --text-main: #0f172a;
  --text-muted: #6b7280;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg-main);
  color: var(--text-main);
  line-height: 1.5;
}

a.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  padding: .5rem .75rem;
  background: #0f172a;
  color: #e5e7eb;
  border-radius: .5rem;
  z-index: 50;
  text-decoration: none;
  font-size: .8rem;
}
a.skip-link:focus {
  left: .75rem;
  top: .75rem;
}

.site-header {
  padding: .8rem 1rem .85rem;
  border-bottom: 1px solid #1f2937;
  background: radial-gradient(circle at top, #111827 0, #020617 55%, #000 100%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  flex-wrap:wrap;
}
[data-theme="light"] .site-header {
  background: linear-gradient(135deg,#e5f2ff,#f9fafb);
  border-bottom-color:#cbd5f5;
}

.header-left {
  display:flex;
  align-items:center;
  gap:.6rem;
  min-width:0;
}
.brand-logo {
  width:52px;
  height:52px;
}
.brand-title {
  display:flex;
  flex-direction:column;
}
.brand-title h1 {
  margin:0;
  font-size:1.18rem;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text;
  color:transparent;
}
.brand-title span {
  font-size:.8rem;
  color:var(--text-muted);
}

.header-actions.single {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex:1 0 auto;
}
.pill-btn {
  border-radius:999px;
  border:1px solid rgba(148,163,184,.6);
  padding:.3rem .85rem;
  font-size:.8rem;
  background:rgba(15,23,42,.85);
  color:#e5e7eb;
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  cursor:pointer;
  text-decoration:none;
}
[data-theme="light"] .pill-btn {
  background:#ffffff;
  color:#0f172a;
}
.header-btn:hover {
  border-color:var(--accent);
}
.pay-btn.pay-main {
  background:linear-gradient(135deg,#f97316,#facc15);
  border:none;
  color:#111827;
  font-weight:600;
}
@media (max-width: 640px) {
  .site-header {
    align-items:flex-start;
  }
  .header-actions.single {
    justify-content:flex-start;
  }
}

.intro {
  padding: .9rem 1rem 0;
}
.intro-inner {
  max-width: 1200px;
  margin: 0 auto;
  border-radius: .9rem;
  background: radial-gradient(circle at top left, rgba(56,189,248,.16), transparent 55%);
  border:1px solid rgba(148,163,184,.4);
  padding:.7rem .9rem;
}
.intro-top {
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
@media (min-width: 900px) {
  .intro-top {
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
  }
}
.intro-inner h2 {
  margin:0;
  font-size:1.05rem;
}
.intro-inner p {
  margin:.35rem 0 0;
  font-size:.87rem;
  color:var(--text-muted);
}

.intro-cta-box {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.25rem;
}
.intro-cta {
  border-radius:999px;
  padding:.45rem 1.1rem;
  border:none;
  font-size:.87rem;
  font-weight:600;
  cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#f9fafb;
  box-shadow:0 12px 25px rgba(56,189,248,.3);
}
.intro-cta:hover { filter:brightness(1.05); }
.intro-note {
  margin:0;
  font-size:.78rem;
  color:var(--text-muted);
}

main {
  max-width:1200px;
  margin:1.1rem auto 2.2rem;
  padding:0 1rem;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1rem;
  align-items:stretch;
}
@media (min-width: 900px) {
  main {
    grid-template-columns:minmax(0,1.05fr) minmax(0,1.4fr);
  }
}

.card {
  background:var(--bg-card);
  border-radius:1rem;
  border:1px solid var(--border-color);
  padding:1rem 1.1rem 1.1rem;
  box-shadow:0 14px 30px rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
}

.card h2 {
  margin-top:0;
  font-size:1.02rem;
  margin-bottom:.35rem;
}
.subtitle {
  font-size:.8rem;
  color:var(--text-muted);
  margin-top:-.1rem;
  margin-bottom:.55rem;
}

label {
  display:block;
  margin-top:.7rem;
  margin-bottom:.25rem;
  font-size:.83rem;
  color:#cbd5f5;
}
[data-theme="light"] label {
  color:#0f172a;
}

select, textarea, input[type="text"] {
  width:100%;
  padding:.5rem .6rem;
  border-radius:.6rem;
  border:1px solid #4b5563;
  background:#020617;
  color:var(--text-main);
  font-size:.88rem;
  resize:vertical;
}
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] input[type="text"] {
  background:#f9fafb;
  border-color:#cbd5f5;
}
textarea { min-height:80px; }
.help {
  font-size:.78rem;
  color:var(--text-muted);
  margin-top:.15rem;
}

.inline {
  display:flex;
  align-items:center;
  gap:.35rem;
  margin-top:.6rem;
  font-size:.78rem;
  color:var(--text-muted);
}
.inline input[type="checkbox"] {
  width:1rem;
  height:1rem;
}

button {
  margin-top:.75rem;
  padding:.55rem .9rem;
  border-radius:.7rem;
  border:none;
  font-size:.88rem;
  cursor:pointer;
  font-weight:600;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:white;
  box-shadow:0 10px 24px rgba(56,189,248,.25);
}
button:hover { filter:brightness(1.05); }
button:active {
  transform:translateY(1px);
  box-shadow:0 6px 16px rgba(0,0,0,.4);
}

.secondary-btn {
  background:transparent;
  color:var(--text-main);
  box-shadow:none;
  border:1px solid #4b5563;
}
.secondary-btn:hover {
  border-color:var(--accent);
}

#promptOutput {
  width:100%;
  min-height:320px;
  padding:.7rem .75rem;
  border-radius:.7rem;
  border:1px solid #4b5563;
  background:#020617;
  color:var(--text-main);
  font-size:.88rem;
  resize:vertical;
  white-space:pre-wrap;
  flex:1 1 auto;
}
#promptOutput.expanded {
  min-height:60vh;
}
[data-theme="light"] #promptOutput {
  background:#f9fafb;
  border-color:#cbd5f5;
}

.prompt-header {
  display:flex;
  justify-content:space-between;
  gap:0.5rem;
  align-items:center;
  margin-bottom:.25rem;
}
.tag {
  display:inline-flex;
  align-items:center;
  padding:.12rem .45rem;
  border-radius:999px;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  background:rgba(56,189,248,.12);
  color:#7dd3fc;
}
.desc {
  font-size:.8rem;
  color:var(--text-muted);
  margin-bottom:.45rem;
}

.prompt-actions {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:.4rem;
}
.prompt-actions button {
  margin-top:0;
}

.field-group {
  border-top:1px dashed #1f2937;
  margin-top:.7rem;
  padding-top:.6rem;
  flex:1 1 auto;
}
[data-theme="light"] .field-group {
  border-top-color:#e5e7eb;
}

.pont-desc {
  font-size:.8rem;
  color:var(--text-muted);
  margin-top:.4rem;
  min-height:2rem;
}

.status {
  font-size:.75rem;
  color:var(--text-muted);
  margin-top:.3rem;
  min-height:1rem;
}
.status.ok { color:#22c55e; }
.status.err { color:#f97373; }

.stats-line {
  font-size:.75rem;
  color:var(--text-muted);
  margin-top:.3rem;
}

.studio-header-row {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:.5rem;
}
.studio-title {
  font-size:.9rem;
  margin:.1rem 0 .4rem;
}
.studio-theme-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:.35rem;
}
.studio-theme-label {
  font-size:.75rem;
  color:var(--text-muted);
}
.chip-theme {
  margin-top:0;
  padding:.25rem .6rem;
  font-size:.75rem;
  border-radius:999px;
  border:1px solid #4b5563;
  background:transparent;
  color:var(--text-main);
  box-shadow:none;
}
.chip-theme:hover {
  border-color:var(--accent);
}

.studio-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.7rem;
}
@media (min-width:700px) {
  .studio-grid {
    grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr);
  }
}

.studio-preview {
  display:flex;
  align-items:center;
  justify-content:center;
}
.studio-preview svg {
  width:110px;
  height:110px;
}

.studio-help {
  font-size:.78rem;
  color:var(--text-muted);
  margin:.1rem 0 .45rem;
}

.color-input {
  width:100%;
  height:34px;
  border-radius:.5rem;
  border:1px solid #4b5563;
  background:transparent;
  margin-bottom:.4rem;
}
[data-theme="light"] .color-input {
  border-color:#cbd5f5;
}

.chips-row {
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  margin-top:.15rem;
}
.chip {
  font-size:.7rem;
  border-radius:999px;
  border:1px solid #4b5563;
  padding:.2rem .6rem;
  cursor:pointer;
  color:var(--text-muted);
  background:transparent;
}
.chip:hover {
  border-color:var(--accent);
  color:var(--accent);
}

.multi-presets {
  margin-top:.45rem;
  font-size:.78rem;
}
.preset-buttons {
  display:flex;
  flex-wrap:wrap;
  gap:.3rem;
  margin-top:.3rem;
}
.preset-buttons button {
  padding:.3rem .6rem;
  font-size:.72rem;
  border-radius:999px;
  background:transparent;
  border:1px solid #4b5563;
  color:var(--text-main);
  box-shadow:none;
  margin-top:0;
}
.preset-buttons button:hover { border-color:var(--accent); }

.easter-note {
  font-size:.75rem;
  color:#4b5563;
  margin-top:.6rem;
}

.privacy-note {
  font-size:.75rem;
  color:#9ca3af;
  margin-top:.4rem;
  background:rgba(15,23,42,0.7);
  border-radius:.6rem;
  padding:.45rem .55rem;
}
[data-theme="light"] .privacy-note {
  background:#eef2ff;
  color:#4b5563;
}

#faqWrapper {
  max-width:1200px;
  margin:0 auto 2.5rem;
  padding:0 1rem;
}
#faqWrapper .card { margin-top:.5rem; }
details {
  margin-top:.4rem;
  border-radius:.6rem;
  border:1px solid #111827;
  padding:.4rem .7rem .55rem;
  background:#020617;
}
[data-theme="light"] details {
  background:#f9fafb;
  border-color:#e5e7eb;
}
details summary {
  cursor:pointer;
  font-size:.9rem;
  font-weight:500;
  outline:none;
}
details[open] { border-color:#4b5563; }
details p {
  font-size:.8rem;
  color:var(--text-muted);
  margin-top:.35rem;
  margin-bottom:0;
}
pre {
  font-size:.75rem;
  background:#020617;
  border-radius:.6rem;
  border:1px solid #1f2937;
  padding:.5rem .6rem;
  overflow-x:auto;
  white-space:pre-wrap;
}
[data-theme="light"] pre {
  background:#0f172a;
  color:#e5e7eb;
}

footer {
  border-top:1px solid #1f2937;
  padding:.8rem 1rem 1rem;
  background:#020617;
  text-align:center;
  font-size:.75rem;
  color:#6b7280;
}
[data-theme="light"] footer {
  background:#e5e7eb;
  border-top-color:#cbd5f5;
}
footer a {
  color:#93c5fd;
  text-decoration:none;
}
footer a:hover { text-decoration:underline; }

.footer-row {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.3rem;
}
@media (min-width:700px) {
  .footer-row {
    flex-direction:row;
    justify-content:center;
  }
}
.footer-logo {
  width:32px;
  height:32px;
  opacity:.7;
}
/* ----------------------------------------------------
   KERKI – Correction contraste thème clair / sombre
   ---------------------------------------------------- */

/* Kerki dans le header */
.kerki-header svg path {
    fill: var(--kerki-color);
}

/* Kerki dans le footer */
.kerki-footer svg path {
    fill: var(--kerki-color);
}

/* Kerki dans le Studio */
#kerkiPreview svg path {
    fill: var(--kerki-color);
}

/* ----- Définition couleur globale Kerki ----- */

/* Mode sombre (par défaut) */
:root {
    --kerki-color: #e5e7eb;   /* gris clair lisible sur fond sombre */
}

/* Mode clair */
[data-theme="light"] {
    --kerki-color: #1f2937;   /* gris foncé lisible sur fond clair */
}

/* Optionnel : si tu veux plus de contraste en light */
[data-theme="light"] .kerki-header svg path,
[data-theme="light"] .kerki-footer svg path,
[data-theme="light"] #kerkiPreview svg path {
    stroke: none;
    fill: var(--kerki-color);
}

/* Kerki – liaison Studio → logo footer */
.footer-logo g {
  fill: var(--kerki-primary) !important;
}
[data-theme="light"] .footer-logo g {
  fill: var(--kerki-primary) !important;
}