:root {
  --fond: #0f1115;
  --fond-carte: #171a21;
  --fond-carte-alt: #1d212b;
  --bordure: #2a2f3a;
  --texte: #e8e9ed;
  --texte-doux: #a3a9b7;
  --accent: #7c9eff;
  --accent-doux: #3a4468;
  --succes: #5fd39a;
  --erreur: #ff7a7a;
  --rayon: 12px;
  --police: "Inter", system-ui, -apple-system, sans-serif;
  --police-mono: "SF Mono", "Menlo", "Consolas", monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  line-height: 1.55;
}
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.25; font-weight: 600; }
.conteneur { max-width: 880px; margin: 0 auto; padding: 0 20px; }

/* ---------- En-tête ---------- */
.entete {
  border-bottom: 1px solid var(--bordure);
  padding: 18px 0;
}
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.entete .logo { font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--texte); display: flex; align-items: center; gap: 8px; }
.entete .logo span { color: var(--accent); }
.entete nav a { color: var(--texte-doux); text-decoration: none; font-size: 0.9rem; margin-left: 18px; }
.entete nav a:hover { color: var(--texte); }

/* ---------- Page ---------- */
main { padding: 40px 0 80px; }
.entete-page { margin-bottom: 32px; }
.etiquette {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--accent-doux);
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 10px;
}
.entete-page h1 { font-size: 1.7rem; margin: 0 0 8px; }
.entete-page p { color: var(--texte-doux); margin: 0; max-width: 620px; }

/* ---------- Cartes démo (page d'accueil) ---------- */
.grille-demos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.carte-demo {
  display: block;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 20px;
  text-decoration: none;
  color: var(--texte);
  transition: border-color 0.15s, transform 0.15s;
}
.carte-demo:hover { border-color: var(--accent); transform: translateY(-2px); }
.carte-demo .numero { font-family: var(--police-mono); color: var(--accent); font-size: 0.8rem; }
.carte-demo h3 { margin: 8px 0 6px; font-size: 1.05rem; }
.carte-demo p { margin: 0; color: var(--texte-doux); font-size: 0.9rem; }

/* ---------- Boîte "comment ça marche" ---------- */
.explication {
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 18px 20px;
  margin-bottom: 24px;
  font-size: 0.92rem;
  color: var(--texte-doux);
}
.explication strong { color: var(--texte); }
.explication ol, .explication ul { margin: 10px 0 0; padding-left: 20px; }

/* ---------- Chat ---------- */
.chat {
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  overflow: hidden;
}
.chat-messages { padding: 20px; min-height: 200px; max-height: 480px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.message { max-width: 85%; padding: 10px 14px; border-radius: 10px; font-size: 0.94rem; white-space: pre-wrap; }
.message.utilisateur { align-self: flex-end; background: var(--accent-doux); color: var(--texte); }
.message.assistant { align-self: flex-start; background: var(--fond-carte-alt); border: 1px solid var(--bordure); }
.message.systeme { align-self: center; color: var(--texte-doux); font-size: 0.82rem; font-style: italic; }
.chat-saisie { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--bordure); }
.chat-saisie textarea {
  flex: 1;
  resize: none;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  color: var(--texte);
  padding: 10px 12px;
  font-family: var(--police);
  font-size: 0.94rem;
}
.chat-saisie textarea:focus { outline: none; border-color: var(--accent); }

button, select {
  font-family: var(--police);
  font-size: 0.9rem;
}
.bouton {
  background: var(--accent);
  color: #0f1115;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
}
.bouton:hover { filter: brightness(1.08); }
.bouton:disabled { opacity: 0.5; cursor: not-allowed; }
.bouton-secondaire {
  background: transparent;
  color: var(--texte);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;
}

.champ-select {
  background: var(--fond);
  color: var(--texte);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  padding: 8px 10px;
}

/* ---------- Zone "coulisses" (JSON brut, étapes d'agent...) ---------- */
.coulisses {
  margin-top: 20px;
}
.coulisses summary {
  cursor: pointer;
  color: var(--texte-doux);
  font-size: 0.85rem;
  user-select: none;
}
.coulisses pre {
  background: #0a0b0e;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  padding: 14px;
  overflow-x: auto;
  font-family: var(--police-mono);
  font-size: 0.8rem;
  color: #9fe6a0;
  margin-top: 10px;
}

.etape-agent {
  border-left: 3px solid var(--accent);
  padding: 8px 14px;
  margin-bottom: 10px;
  background: var(--fond-carte-alt);
  border-radius: 0 8px 8px 0;
  font-size: 0.88rem;
}
.etape-agent .type { color: var(--accent); font-weight: 600; font-family: var(--police-mono); font-size: 0.78rem; text-transform: uppercase; }

.textarea-doc {
  width: 100%;
  min-height: 160px;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  color: var(--texte);
  padding: 12px;
  font-family: var(--police-mono);
  font-size: 0.85rem;
  resize: vertical;
}

.chunk {
  background: var(--fond-carte-alt);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 0.85rem;
}
.chunk .score { color: var(--accent); font-family: var(--police-mono); font-size: 0.75rem; }

.pied { border-top: 1px solid var(--bordure); padding: 20px 0; text-align: center; color: var(--texte-doux); font-size: 0.85rem; }

@media (max-width: 600px) {
  .entete .conteneur { flex-direction: column; align-items: flex-start; gap: 8px; }
  .entete nav a { margin-left: 0; margin-right: 16px; }
}