/* ═════════════════════════════════════════════════════════════════
   automatisations_ia.css — composants visuels uniques à la page
   /automatisations-ia/
   Thème : workflow IA / chaîne de production automatisée (n8n, Make,
   Lindy). Sensation "atelier d'automates" + monitoring sérieux.
   ─────────────────────────────────────────────────────────────────
   Composants : workflow canvas, flow-node, flow-edge animée, activity
   log scrolling, prompt console (terminal mac), ai-response card,
   confidence bar, human-loop flag, agent card, eval suite, json
   viewer, token counter, cost meter, dataflow diagram, guardrail
   card, api call graph, bot avatar.
═════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   0 · TOKENS IA (locaux à la page) — bleu IA en variables CSS
───────────────────────────────────────────────────────────────── */
.ia-page {
  /* Palette migrée vers "Encre de circuit" (ambre brûlé) — accent unique métier.
     Noms historiques --ia-violet-* conservés pour ne pas réécrire les ~30 usages CSS internes. */
  --ia-violet: #b85c00;
  --ia-violet-soft: #f5d8b0;
  --ia-violet-dark: #7a3e00;
  --ia-bot: #6b8169;
  --ia-bot-dark: #4d5e4b;
  --ia-alert: #5a1224;
  --ia-cream: #f5ecd9;
  --ia-ink: #0c0f1a;
  --ia-marine: #13234f;
  --ia-marine-dark: #0a1538;
}


/* ─────────────────────────────────────────────────────────────────
   1 · WORKFLOW CANVAS — grille de points type n8n / Make
───────────────────────────────────────────────────────────────── */
.workflow-canvas {
  position: relative;
  background-color: #fdf6e3;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(12, 15, 26, 0.16) 1px, transparent 0),
    linear-gradient(180deg, rgba(184, 92, 0, 0.04) 0, transparent 70%);
  background-size: 22px 22px, 100% 100%;
  border: 1px solid rgba(12, 15, 26, 0.12);
  border-radius: 14px;
  padding: 1.8rem 1.4rem 2.2rem;
  overflow: hidden;
  isolation: isolate;
}
.workflow-canvas.is-ink {
  background-color: #0c0f1a;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(245, 236, 217, 0.12) 1px, transparent 0),
    linear-gradient(180deg, rgba(184, 92, 0, 0.08) 0, transparent 70%);
  border-color: rgba(245, 236, 217, 0.15);
}
.workflow-canvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0.4rem 1.2rem;
  border-bottom: 1px dashed rgba(12, 15, 26, 0.15);
  margin-bottom: 1.4rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b6557;
}
.workflow-canvas.is-ink .workflow-canvas-head {
  color: rgba(245, 236, 217, 0.55);
  border-color: rgba(245, 236, 217, 0.15);
}
.workflow-canvas-head .dot-running {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #4d5e4b;
}
.workflow-canvas.is-ink .workflow-canvas-head .dot-running { color: #a8c4a6; }
.workflow-canvas-head .dot-running::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6b8169;
  box-shadow: 0 0 8px rgba(107, 129, 105, 0.85);
  animation: ia-pulse-dot 1.6s ease-in-out infinite;
}
@keyframes ia-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.7); }
}


/* ─────────────────────────────────────────────────────────────────
   2 · FLOW NODE — carte d'une étape du workflow
───────────────────────────────────────────────────────────────── */
.workflow-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  align-items: stretch;
  position: relative;
}
@media (max-width: 768px) {
  .workflow-row { grid-template-columns: 1fr; gap: 1.4rem; }
}

.flow-node {
  position: relative;
  background: #fdf6e3;
  border: 1.5px solid rgba(12, 15, 26, 0.12);
  border-radius: 12px;
  padding: 0.85rem 0.95rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 120px;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
.workflow-canvas.is-ink .flow-node {
  background: rgba(245, 236, 217, 0.04);
  border-color: rgba(245, 236, 217, 0.15);
}
.flow-node:hover {
  border-color: rgba(184, 92, 0, 0.55);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -18px rgba(184, 92, 0, 0.4);
}
.flow-node.is-running { border-color: var(--ia-bot); box-shadow: 0 0 0 3px rgba(107, 129, 105, 0.12); }
.flow-node.is-done    { border-color: rgba(107, 129, 105, 0.55); }
.flow-node.is-error   { border-color: var(--ia-alert); box-shadow: 0 0 0 3px rgba(90, 18, 36, 0.1); }
.flow-node.is-human   { border-color: var(--ia-alert); border-style: dashed; }

.flow-node-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.flow-node-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(184, 92, 0, 0.12);
  color: var(--ia-violet);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex: none;
}
.flow-node.is-input  .flow-node-icon { background: rgba(19, 35, 79, 0.12);  color: var(--ia-marine); }
.flow-node.is-output .flow-node-icon { background: rgba(107, 129, 105, 0.18); color: var(--ia-bot-dark); }
.flow-node.is-human  .flow-node-icon { background: rgba(90, 18, 36, 0.12);  color: var(--ia-alert); }
.workflow-canvas.is-ink .flow-node-icon { background: rgba(184, 92, 0, 0.2); color: #f5d8b0; }

.flow-node-num {
  margin-left: auto;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #6b6557;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(12, 15, 26, 0.06);
}
.workflow-canvas.is-ink .flow-node-num {
  color: rgba(245, 236, 217, 0.55);
  background: rgba(245, 236, 217, 0.08);
}

.flow-node-title {
  font-family: "Fraunces", serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.15;
  color: #0c0f1a;
  letter-spacing: -0.01em;
}
.workflow-canvas.is-ink .flow-node-title { color: #f5ecd9; }
.flow-node-title em { font-style: italic; color: var(--ia-violet); }

.flow-node-meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6557;
  line-height: 1.3;
}
.workflow-canvas.is-ink .flow-node-meta { color: rgba(245, 236, 217, 0.55); }

.flow-node-status {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(12, 15, 26, 0.06);
  color: #6b6557;
  width: max-content;
}
.flow-node-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
.flow-node.is-running .flow-node-status {
  background: rgba(107, 129, 105, 0.16);
  color: var(--ia-bot-dark);
}
.flow-node.is-running .flow-node-status::before {
  animation: ia-pulse-dot 1.2s ease-in-out infinite;
  opacity: 1;
}
.flow-node.is-done .flow-node-status {
  background: rgba(107, 129, 105, 0.12);
  color: var(--ia-bot-dark);
}
.flow-node.is-error .flow-node-status {
  background: rgba(90, 18, 36, 0.14);
  color: var(--ia-alert);
}
.flow-node.is-human .flow-node-status {
  background: rgba(90, 18, 36, 0.12);
  color: var(--ia-alert);
}
.workflow-canvas.is-ink .flow-node-status {
  background: rgba(245, 236, 217, 0.08);
  color: rgba(245, 236, 217, 0.7);
}


/* ─────────────────────────────────────────────────────────────────
   3 · FLOW EDGES — flèches SVG entre les nodes avec dots animés
───────────────────────────────────────────────────────────────── */
.flow-edges {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.flow-edge {
  fill: none;
  stroke: rgba(184, 92, 0, 0.55);
  stroke-width: 1.6;
  stroke-dasharray: 5 5;
}
.workflow-canvas.is-ink .flow-edge { stroke: rgba(167, 139, 250, 0.55); }
.flow-edge-pulse {
  fill: var(--ia-violet);
  filter: drop-shadow(0 0 4px rgba(184, 92, 0, 0.7));
  animation: ia-edge-pulse 2.8s linear infinite;
  offset-rotate: 0deg;
  r: 3;
}
.workflow-canvas.is-ink .flow-edge-pulse { fill: var(--ia-violet-soft); }
@keyframes ia-edge-pulse {
  from { offset-distance: 0%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  to   { offset-distance: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-edge-pulse { animation: none; }
}


/* ─────────────────────────────────────────────────────────────────
   4 · ACTIVITY LOG — panneau de logs scrollants type Linear / Vercel
───────────────────────────────────────────────────────────────── */
.activity-log {
  background: #0c0f1a;
  border: 1px solid rgba(245, 236, 217, 0.15);
  border-radius: 12px;
  overflow: hidden;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: rgba(245, 236, 217, 0.85);
}
.activity-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(245, 236, 217, 0.1);
  background: rgba(245, 236, 217, 0.03);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 236, 217, 0.55);
}
.activity-log-head .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6b8169;
  box-shadow: 0 0 6px rgba(107, 129, 105, 0.85);
  animation: ia-pulse-dot 1.6s ease-in-out infinite;
}
.activity-log-body {
  max-height: 260px;
  overflow: hidden;
  padding: 0.4rem 0;
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.activity-log-line {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 0.6rem;
  padding: 0.32rem 1rem;
  font-size: 0.7rem;
  line-height: 1.4;
  color: rgba(245, 236, 217, 0.78);
  opacity: 0;
  transform: translateY(8px);
  animation: ia-log-in 0.5s ease forwards;
}
.activity-log-line.is-fresh { animation: ia-log-in 0.5s ease forwards; }
.activity-log-line .ts { color: rgba(245, 236, 217, 0.4); }
.activity-log-line .ok  { color: #a8c4a6; }
.activity-log-line .warn { color: #e2a8a0; }
.activity-log-line .err  { color: #ff7a8a; }
.activity-log-line .ai   { color: #f5d8b0; }
.activity-log-line .meta {
  color: rgba(245, 236, 217, 0.5);
  font-size: 0.62rem;
}
@keyframes ia-log-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .activity-log-line { animation: none; opacity: 1; transform: none; }
}


/* ─────────────────────────────────────────────────────────────────
   5 · PROMPT CONSOLE — terminal mac qui montre un prompt à Claude
───────────────────────────────────────────────────────────────── */
.prompt-console {
  background: #0c0f1a;
  border: 1px solid rgba(245, 236, 217, 0.18);
  border-radius: 12px;
  overflow: hidden;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.55);
}
.prompt-console-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1rem;
  background: linear-gradient(180deg, #1a1a26 0%, #0c0f1a 100%);
  border-bottom: 1px solid rgba(245, 236, 217, 0.12);
}
.prompt-console-dots {
  display: inline-flex;
  gap: 6px;
}
.prompt-console-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #4d5060;
}
.prompt-console-dots span:nth-child(1) { background: #ff5f57; }
.prompt-console-dots span:nth-child(2) { background: #febc2e; }
.prompt-console-dots span:nth-child(3) { background: #28c840; }
.prompt-console-title {
  font-size: 0.7rem;
  color: rgba(245, 236, 217, 0.7);
  letter-spacing: 0.08em;
}
.prompt-console-title em {
  font-style: normal;
  color: var(--ia-violet-soft);
}
.prompt-console-pill {
  margin-left: auto;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #a8c4a6;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(107, 129, 105, 0.18);
}
.prompt-console-body {
  padding: 1.1rem 1.2rem;
  font-size: 0.78rem;
  line-height: 1.7;
  color: rgba(245, 236, 217, 0.92);
  background: #0c0f1a;
  background-image: linear-gradient(180deg, rgba(184, 92, 0, 0.04) 0, transparent 80%);
}
.prompt-console-section {
  margin-bottom: 0.9rem;
}
.prompt-console-section:last-child { margin-bottom: 0; }
.prompt-console-label {
  display: inline-block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ia-violet-soft);
  margin-bottom: 0.35rem;
}
.prompt-console-label.is-user { color: #e2a8a0; }
.prompt-console-label.is-ai   { color: #a8c4a6; }
.prompt-console-text {
  color: rgba(245, 236, 217, 0.88);
}
.prompt-console-text .k { color: #f5d8b0; }   /* keyword */
.prompt-console-text .s { color: #a8c4a6; }   /* string */
.prompt-console-text .n { color: #e2a8a0; }   /* number */
.prompt-console-text .c { color: rgba(245, 236, 217, 0.4); font-style: italic; } /* comment */
.prompt-console-text .v { color: #f5ecd9; font-weight: 600; }  /* variable */

.prompt-typed::after {
  content: "▍";
  color: var(--ia-violet-soft);
  margin-left: 2px;
  animation: ia-caret 1s steps(2) infinite;
}
@keyframes ia-caret {
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .prompt-typed::after { animation: none; }
}

.prompt-console-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1rem;
  background: rgba(245, 236, 217, 0.03);
  border-top: 1px solid rgba(245, 236, 217, 0.1);
  font-size: 0.62rem;
  color: rgba(245, 236, 217, 0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* ─────────────────────────────────────────────────────────────────
   6 · AI RESPONSE CARD — réponse Claude avec reasoning visible
───────────────────────────────────────────────────────────────── */
.ai-response-card {
  background: #fdf6e3;
  border: 1px solid rgba(12, 15, 26, 0.12);
  border-left: 4px solid var(--ia-violet);
  border-radius: 10px;
  padding: 1.1rem 1.25rem 1.25rem;
  font-family: "Inter", sans-serif;
  color: #0c0f1a;
  position: relative;
}
.ai-response-card.is-ink {
  background: rgba(245, 236, 217, 0.04);
  border-color: rgba(245, 236, 217, 0.15);
  border-left-color: var(--ia-violet-soft);
  color: #f5ecd9;
}
.ai-response-card-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.7rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ia-violet);
}
.ai-response-card.is-ink .ai-response-card-head { color: var(--ia-violet-soft); }
.ai-response-card-reasoning {
  padding: 0.6rem 0.85rem;
  background: rgba(184, 92, 0, 0.07);
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(12, 15, 26, 0.7);
  font-style: italic;
  margin-bottom: 0.8rem;
}
.ai-response-card.is-ink .ai-response-card-reasoning {
  background: rgba(184, 92, 0, 0.15);
  color: rgba(245, 236, 217, 0.7);
}
.ai-response-card-output {
  font-size: 0.92rem;
  line-height: 1.6;
}


/* ─────────────────────────────────────────────────────────────────
   7 · CONFIDENCE BAR — barre de score 0-100 %
───────────────────────────────────────────────────────────────── */
.confidence-bar {
  position: relative;
  display: block;
  width: 100%;
  height: 7px;
  background: rgba(12, 15, 26, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.ai-response-card.is-ink .confidence-bar { background: rgba(245, 236, 217, 0.08); }
.confidence-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, var(--ia-violet) 0%, var(--ia-bot) 100%);
  border-radius: 999px;
  transition: width 1.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.confidence-bar-fill.is-low    { background: linear-gradient(90deg, #e2a8a0 0%, #b00020 100%); }
.confidence-bar-fill.is-medium { background: linear-gradient(90deg, #febc2e 0%, #e2a8a0 100%); }
.confidence-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6557;
  margin-bottom: 0.35rem;
}
.ai-response-card.is-ink .confidence-label { color: rgba(245, 236, 217, 0.6); }
.confidence-label strong {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--ia-violet);
}
.ai-response-card.is-ink .confidence-label strong { color: var(--ia-violet-soft); }


/* ─────────────────────────────────────────────────────────────────
   8 · HUMAN LOOP FLAG — badge "Human review requis"
───────────────────────────────────────────────────────────────── */
.human-loop-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.75rem;
  border: 1.5px dashed var(--ia-alert);
  background: rgba(90, 18, 36, 0.08);
  color: var(--ia-alert);
  border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.human-loop-flag i { font-size: 0.85rem; }


/* ─────────────────────────────────────────────────────────────────
   9 · AGENT CARD — carte d'un agent IA avec avatar circulaire
───────────────────────────────────────────────────────────────── */
.agent-card {
  position: relative;
  background: #fdf6e3;
  border: 1px solid rgba(12, 15, 26, 0.1);
  border-radius: 14px;
  padding: 1.4rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.agent-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ia-violet) 0%, var(--ia-bot) 100%);
}
.agent-card:hover {
  transform: translateY(-3px);
  border-color: rgba(184, 92, 0, 0.45);
  box-shadow: 0 18px 36px -22px rgba(184, 92, 0, 0.4);
}
.agent-card-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.bot-avatar {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ia-violet) 0%, var(--ia-violet-dark) 100%);
  color: #f5ecd9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 1.1rem;
  font-weight: 500;
  flex: none;
  box-shadow: 0 6px 14px -8px rgba(184, 92, 0, 0.5);
}
.bot-avatar.is-marine { background: linear-gradient(135deg, var(--ia-marine) 0%, var(--ia-marine-dark) 100%); }
.bot-avatar.is-bot    { background: linear-gradient(135deg, var(--ia-bot) 0%, var(--ia-bot-dark) 100%); }
.bot-avatar.is-alert  { background: linear-gradient(135deg, var(--ia-alert) 0%, #3a0a17 100%); }
.bot-avatar::after {
  content: "";
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #6b8169;
  border: 2px solid #fdf6e3;
  box-shadow: 0 0 6px rgba(107, 129, 105, 0.85);
}
.agent-card-name {
  font-family: "Fraunces", serif;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.15;
  color: #0c0f1a;
}
.agent-card-name em { font-style: italic; color: var(--ia-violet); }
.agent-card-role {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6557;
  margin-top: 0.2rem;
}
.agent-card-desc {
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  color: rgba(12, 15, 26, 0.78);
  line-height: 1.55;
}
.agent-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(12, 15, 26, 0.1);
}
.agent-card-stat {
  text-align: center;
}
.agent-card-stat dt {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6557;
}
.agent-card-stat dd {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ia-violet);
  margin: 0;
  line-height: 1;
}


/* ─────────────────────────────────────────────────────────────────
   10 · EVAL SUITE — tableau de tests pass/fail/skip
───────────────────────────────────────────────────────────────── */
.eval-suite {
  background: #fdf6e3;
  border: 1px solid rgba(12, 15, 26, 0.12);
  border-radius: 12px;
  overflow: hidden;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.eval-suite-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(12, 15, 26, 0.1);
  background: rgba(245, 236, 217, 0.5);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b6557;
}
.eval-suite-summary {
  display: inline-flex;
  gap: 0.85rem;
}
.eval-suite-summary span strong {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0;
  text-transform: none;
}
.eval-suite-summary .ok strong   { color: var(--ia-bot-dark); }
.eval-suite-summary .err strong  { color: var(--ia-alert); }
.eval-suite-summary .skip strong { color: #6b6557; }

.eval-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.55rem 1rem;
  border-bottom: 1px dashed rgba(12, 15, 26, 0.08);
  font-size: 0.74rem;
  color: #0c0f1a;
}
.eval-row:last-child { border-bottom: none; }
.eval-row .eval-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 600;
}
.eval-row.is-pass  .eval-icon { background: rgba(107, 129, 105, 0.18); color: var(--ia-bot-dark); }
.eval-row.is-fail  .eval-icon { background: rgba(90, 18, 36, 0.14);  color: var(--ia-alert); }
.eval-row.is-skip  .eval-icon { background: rgba(12, 15, 26, 0.08);   color: #6b6557; }
.eval-row.is-running .eval-icon {
  background: rgba(184, 92, 0, 0.18);
  color: var(--ia-violet);
  animation: ia-spin 1s linear infinite;
}
@keyframes ia-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .eval-row.is-running .eval-icon { animation: none; }
}
.eval-row .eval-name {
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: #0c0f1a;
}
.eval-row .eval-name small {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6557;
  margin-top: 0.1rem;
  font-weight: 400;
}
.eval-row .eval-duration { color: #6b6557; font-size: 0.7rem; }
.eval-row .eval-score {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ia-violet);
}
.eval-row.is-fail .eval-score { color: var(--ia-alert); }


/* ─────────────────────────────────────────────────────────────────
   11 · JSON VIEWER — affichage JSON coloré (structured outputs)
───────────────────────────────────────────────────────────────── */
.json-viewer {
  background: #0c0f1a;
  border: 1px solid rgba(245, 236, 217, 0.15);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.74rem;
  line-height: 1.7;
  color: rgba(245, 236, 217, 0.92);
  overflow-x: auto;
}
.json-viewer .jk { color: #f5d8b0; }   /* key */
.json-viewer .js { color: #a8c4a6; }   /* string */
.json-viewer .jn { color: #e2a8a0; }   /* number */
.json-viewer .jb { color: #febc2e; }   /* bool */
.json-viewer .jnull { color: #6b6557; font-style: italic; }
.json-viewer .jbrace { color: rgba(245, 236, 217, 0.6); }
.json-viewer .jc { color: rgba(245, 236, 217, 0.35); font-style: italic; }


/* ─────────────────────────────────────────────────────────────────
   12 · TOKEN COUNTER — compteur de tokens et coût
───────────────────────────────────────────────────────────────── */
.token-counter {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.85rem;
  background: rgba(184, 92, 0, 0.08);
  border: 1px solid rgba(184, 92, 0, 0.25);
  border-radius: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: #0c0f1a;
}
.token-counter .label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #6b6557;
}
.token-counter .num {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--ia-violet);
}
.token-counter .sep { color: rgba(12, 15, 26, 0.25); }


/* ─────────────────────────────────────────────────────────────────
   13 · COST METER — jauge mensuelle dépense API
───────────────────────────────────────────────────────────────── */
.cost-meter {
  background: #fdf6e3;
  border: 1px solid rgba(12, 15, 26, 0.12);
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
}
.cost-meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}
.cost-meter-title {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b6557;
}
.cost-meter-value {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--ia-violet);
  line-height: 1;
}
.cost-meter-value small {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-style: normal;
  font-size: 0.7rem;
  color: #6b6557;
  margin-left: 0.3rem;
}
.cost-meter-bar {
  position: relative;
  height: 8px;
  background: rgba(12, 15, 26, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.cost-meter-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, var(--ia-bot) 0%, var(--ia-violet) 60%, #e2a8a0 100%);
  border-radius: 999px;
  transition: width 1.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.cost-meter-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: #6b6557;
}


/* ─────────────────────────────────────────────────────────────────
   14 · DATAFLOW DIAGRAM — sources → pipeline → destinations
───────────────────────────────────────────────────────────────── */
.dataflow-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0.85rem;
  align-items: stretch;
}
@media (max-width: 768px) {
  .dataflow-diagram { grid-template-columns: 1fr; }
  .dataflow-arrow { display: none; }
}
.dataflow-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dataflow-column-head {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b6557;
  padding-bottom: 0.4rem;
  border-bottom: 1px dashed rgba(12, 15, 26, 0.15);
  margin-bottom: 0.3rem;
}
.dataflow-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  background: #fdf6e3;
  border: 1px solid rgba(12, 15, 26, 0.12);
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  color: #0c0f1a;
  font-weight: 500;
}
.dataflow-chip i {
  color: var(--ia-violet);
  width: 16px;
  text-align: center;
}
.dataflow-chip.is-pipeline {
  background: linear-gradient(135deg, var(--ia-marine) 0%, var(--ia-marine-dark) 100%);
  border-color: rgba(245, 236, 217, 0.2);
  color: #f5ecd9;
}
.dataflow-chip.is-pipeline i { color: var(--ia-violet-soft); }
.dataflow-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(184, 92, 0, 0.5);
  font-size: 1.2rem;
  align-self: center;
}


/* ─────────────────────────────────────────────────────────────────
   15 · GUARDRAIL CARD — carte garde-fou (bouclier)
───────────────────────────────────────────────────────────────── */
.guardrail-card {
  position: relative;
  background: #fdf6e3;
  border: 1px solid rgba(12, 15, 26, 0.1);
  border-radius: 12px;
  padding: 1.3rem 1.4rem 1.4rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.guardrail-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--ia-alert) 0%, var(--ia-violet) 100%);
}
.guardrail-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(90, 18, 36, 0.1);
  color: var(--ia-alert);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.guardrail-card-num {
  position: absolute;
  top: 0.7rem;
  right: 1rem;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 2.6rem;
  color: rgba(90, 18, 36, 0.08);
  line-height: 0.85;
  pointer-events: none;
  user-select: none;
}
.guardrail-card-title {
  font-family: "Fraunces", serif;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.2;
  color: #0c0f1a;
}
.guardrail-card-title em { font-style: italic; color: var(--ia-alert); }
.guardrail-card-desc {
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  color: rgba(12, 15, 26, 0.78);
  line-height: 1.55;
}


/* ─────────────────────────────────────────────────────────────────
   16 · API CALL GRAPH — sparkline svg minimaliste
───────────────────────────────────────────────────────────────── */
.api-call-graph {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 38px;
  margin-top: 0.6rem;
}
.api-call-graph span {
  display: inline-block;
  width: 5px;
  background: linear-gradient(180deg, var(--ia-violet) 0%, rgba(184, 92, 0, 0.3) 100%);
  border-radius: 1px;
  transition: height 1s ease;
}
.api-call-graph.is-ink span {
  background: linear-gradient(180deg, var(--ia-violet-soft) 0%, rgba(167, 139, 250, 0.25) 100%);
}


/* ─────────────────────────────────────────────────────────────────
   17 · KPI CARD (observability) — variante page IA, fond clair
───────────────────────────────────────────────────────────────── */
.kpi-card {
  position: relative;
  background: #fdf6e3;
  border: 1px solid rgba(12, 15, 26, 0.1);
  border-radius: 12px;
  padding: 1.1rem 1.25rem 1.2rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.kpi-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ia-violet) 0%, var(--ia-bot) 100%);
}
.kpi-card-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b6557;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kpi-card-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
}
.kpi-card-trend.is-up   { background: rgba(107, 129, 105, 0.16); color: var(--ia-bot-dark); }
.kpi-card-trend.is-down { background: rgba(90, 18, 36, 0.12); color: var(--ia-alert); }
.kpi-card-value {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 2rem;
  color: var(--ia-violet);
  line-height: 1;
  font-feature-settings: "tnum";
}
.kpi-card-meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: #6b6557;
}


/* ─────────────────────────────────────────────────────────────────
   18 · MANIFESTO CARD (5 principes) — variant IA
───────────────────────────────────────────────────────────────── */
.manifesto-card {
  position: relative;
  background: rgba(245, 236, 217, 0.06);
  border: 1px solid rgba(245, 236, 217, 0.15);
  border-radius: 14px;
  padding: 1.5rem 1.6rem 1.7rem;
  overflow: hidden;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.manifesto-card:hover {
  background: rgba(245, 236, 217, 0.1);
  border-color: rgba(167, 139, 250, 0.4);
  transform: translateY(-2px);
}
.manifesto-card-num {
  position: absolute;
  top: 0.85rem;
  right: 1.2rem;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 3.2rem;
  color: rgba(167, 139, 250, 0.18);
  line-height: 0.85;
  pointer-events: none;
}
.manifesto-card-title {
  font-family: "Fraunces", serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.2;
  color: #f5ecd9;
  margin-bottom: 0.55rem;
  max-width: 22ch;
}
.manifesto-card-title em { font-style: italic; color: var(--ia-violet-soft); }
.manifesto-card-desc {
  font-family: "Inter", sans-serif;
  font-size: 0.88rem;
  color: rgba(245, 236, 217, 0.72);
  line-height: 1.6;
}


/* ─────────────────────────────────────────────────────────────────
   19 · USE CASE CARD — typologie (commerçant, service client, …)
───────────────────────────────────────────────────────────────── */
.usecase-card {
  position: relative;
  background: #fdf6e3;
  border: 1px solid rgba(12, 15, 26, 0.1);
  border-radius: 14px;
  padding: 1.4rem 1.4rem 1.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.usecase-card:hover {
  transform: translateY(-3px);
  border-color: rgba(184, 92, 0, 0.45);
  box-shadow: 0 18px 36px -22px rgba(184, 92, 0, 0.35);
}
.usecase-card-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.usecase-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(184, 92, 0, 0.18) 0%, rgba(107, 129, 105, 0.14) 100%);
  color: var(--ia-violet);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex: none;
}
.usecase-card-tag {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ia-violet);
  font-weight: 600;
}
.usecase-card-title {
  font-family: "Fraunces", serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.2;
  color: #0c0f1a;
}
.usecase-card-title em { font-style: italic; color: var(--ia-violet); }
.usecase-card-desc {
  font-family: "Inter", sans-serif;
  font-size: 0.88rem;
  color: rgba(12, 15, 26, 0.78);
  line-height: 1.6;
}
.usecase-card-gain {
  margin-top: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(12, 15, 26, 0.1);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6557;
}
.usecase-card-gain strong {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ia-bot-dark);
  letter-spacing: 0;
  text-transform: none;
}


/* ─────────────────────────────────────────────────────────────────
   20 · MODULE CARD — catalogue d'agents (6 modules)
───────────────────────────────────────────────────────────────── */
.module-card {
  position: relative;
  background: #fdf6e3;
  border: 1px solid rgba(12, 15, 26, 0.1);
  border-radius: 14px;
  padding: 1.3rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.module-card::before {
  content: attr(data-num);
  position: absolute;
  top: 0.6rem;
  right: 1.1rem;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 4rem;
  color: rgba(184, 92, 0, 0.08);
  line-height: 0.85;
  pointer-events: none;
  user-select: none;
}
.module-card:hover {
  transform: translateY(-3px);
  border-color: rgba(184, 92, 0, 0.45);
  box-shadow: 0 18px 36px -22px rgba(184, 92, 0, 0.35);
}
.module-card-tag {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ia-violet);
  font-weight: 600;
}
.module-card-title {
  font-family: "Fraunces", serif;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.2;
  color: #0c0f1a;
  max-width: 18ch;
}
.module-card-title em { font-style: italic; color: var(--ia-violet); }
.module-card-list {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-family: "Inter", sans-serif;
  font-size: 0.82rem;
  color: rgba(12, 15, 26, 0.78);
}
.module-card-list li {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
}
.module-card-list li::before {
  content: "▸";
  color: var(--ia-violet);
  flex: none;
  font-family: "JetBrains Mono", monospace;
}


/* ─────────────────────────────────────────────────────────────────
   21 · PIPELINE STEP — étape numérotée méthode (6 steps)
───────────────────────────────────────────────────────────────── */
.pipeline-step {
  position: relative;
  background: #fdf6e3;
  border: 1px solid rgba(12, 15, 26, 0.1);
  border-radius: 12px;
  padding: 1.3rem 1.4rem 1.4rem 4.2rem;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.pipeline-step:hover {
  border-color: rgba(184, 92, 0, 0.45);
  transform: translateX(2px);
}
.pipeline-step::before {
  content: attr(data-step);
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ia-violet) 0%, var(--ia-violet-dark) 100%);
  color: #f5ecd9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  box-shadow: 0 6px 14px -8px rgba(184, 92, 0, 0.5);
}
.pipeline-step-title {
  font-family: "Fraunces", serif;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.2;
  color: #0c0f1a;
  margin-bottom: 0.35rem;
}
.pipeline-step-title em { font-style: italic; color: var(--ia-violet); }
.pipeline-step-desc {
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  color: rgba(12, 15, 26, 0.78);
  line-height: 1.55;
}
.pipeline-step-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ia-bot-dark);
  padding: 0.15rem 0.55rem;
  background: rgba(107, 129, 105, 0.12);
  border-radius: 999px;
}


/* ─────────────────────────────────────────────────────────────────
   22 · STACK BRICK — 4 briques tech
───────────────────────────────────────────────────────────────── */
.stack-brick {
  position: relative;
  background: rgba(245, 236, 217, 0.05);
  border: 1px solid rgba(245, 236, 217, 0.14);
  border-radius: 14px;
  padding: 1.4rem 1.5rem 1.6rem;
  overflow: hidden;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.stack-brick:hover {
  background: rgba(245, 236, 217, 0.09);
  border-color: rgba(167, 139, 250, 0.45);
}
.stack-brick-glyph {
  position: absolute;
  top: -10px;
  right: -10px;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 7rem;
  color: rgba(167, 139, 250, 0.1);
  line-height: 0.85;
  pointer-events: none;
}
.stack-brick-tag {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ia-violet-soft);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.stack-brick-title {
  font-family: "Fraunces", serif;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.15;
  color: #f5ecd9;
  margin-bottom: 0.5rem;
}
.stack-brick-title em { font-style: italic; color: var(--ia-violet-soft); }
.stack-brick-desc {
  font-family: "Inter", sans-serif;
  font-size: 0.88rem;
  color: rgba(245, 236, 217, 0.72);
  line-height: 1.6;
}
.stack-brick-list {
  list-style: none;
  padding: 0;
  margin: 0.7rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(245, 236, 217, 0.65);
}
.stack-brick-list li::before {
  content: "▮ ";
  color: var(--ia-violet-soft);
  margin-right: 0.35rem;
}


/* ─────────────────────────────────────────────────────────────────
   23 · ANONYMIZED CASE CARD — fiche cas client sous NDA
───────────────────────────────────────────────────────────────── */
.anon-case {
  position: relative;
  background: #fdf6e3;
  border: 1px solid rgba(12, 15, 26, 0.1);
  border-radius: 14px;
  padding: 1.6rem 1.7rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  overflow: hidden;
}
.anon-case::before {
  content: "NDA";
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  padding: 0.18rem 0.55rem;
  border-radius: 4px;
  background: rgba(90, 18, 36, 0.1);
  color: var(--ia-alert);
  border: 1px solid rgba(90, 18, 36, 0.25);
}
.anon-case-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.anon-case-mask {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--ia-marine) 0%, var(--ia-marine-dark) 100%);
  color: rgba(245, 236, 217, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex: none;
  position: relative;
  overflow: hidden;
}
.anon-case-mask::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(167, 139, 250, 0.15) 4px 5px);
}
.anon-case-sector {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ia-violet);
  font-weight: 600;
}
.anon-case-title {
  font-family: "Fraunces", serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.2;
  color: #0c0f1a;
  max-width: 30ch;
}
.anon-case-title em { font-style: italic; color: var(--ia-violet); }
.anon-case-body {
  font-family: "Inter", sans-serif;
  font-size: 0.88rem;
  color: rgba(12, 15, 26, 0.78);
  line-height: 1.6;
}
.anon-case-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  padding-top: 0.95rem;
  border-top: 1px dashed rgba(12, 15, 26, 0.1);
}
.anon-case-metric dt {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6557;
}
.anon-case-metric dd {
  margin: 0;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ia-bot-dark);
  line-height: 1;
}


/* ─────────────────────────────────────────────────────────────────
   24 · ANTI-PROMISE ROW — refus listés
───────────────────────────────────────────────────────────────── */
.anti-promise {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.1rem 1.2rem;
  background: rgba(245, 236, 217, 0.4);
  border: 1px solid rgba(12, 15, 26, 0.08);
  border-left: 3px solid var(--ia-alert);
  border-radius: 8px;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.anti-promise:hover {
  background: rgba(245, 236, 217, 0.7);
  border-left-color: var(--ia-violet);
}
.anti-promise-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(90, 18, 36, 0.1);
  color: var(--ia-alert);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex: none;
}
.anti-promise-title {
  font-family: "Fraunces", serif;
  font-size: 1rem;
  font-weight: 500;
  color: #0c0f1a;
  line-height: 1.25;
  margin-bottom: 0.25rem;
}
.anti-promise-title em { font-style: italic; color: var(--ia-alert); }
.anti-promise-desc {
  font-family: "Inter", sans-serif;
  font-size: 0.82rem;
  color: rgba(12, 15, 26, 0.7);
  line-height: 1.5;
}


/* ─────────────────────────────────────────────────────────────────
   25 · POC RECAP — récap final (4 lignes "0 €")
───────────────────────────────────────────────────────────────── */
.poc-recap {
  background: rgba(245, 236, 217, 0.06);
  border: 1px solid rgba(245, 236, 217, 0.18);
  border-radius: 14px;
  padding: 1.6rem 1.7rem 1.7rem;
  position: relative;
  overflow: hidden;
}
.poc-recap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ia-violet-soft) 0%, #e2a8a0 50%, var(--ia-violet-soft) 100%);
}
.poc-recap-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(245, 236, 217, 0.18);
  margin-bottom: 0.85rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 236, 217, 0.55);
}
.poc-line {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0;
  border-bottom: 1px dashed rgba(245, 236, 217, 0.12);
}
.poc-line:last-of-type { border-bottom: none; }
.poc-line-thumb {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  background: rgba(184, 92, 0, 0.18);
  color: var(--ia-violet-soft);
}
.poc-line-thumb.is-bot { background: rgba(107, 129, 105, 0.2); color: #a8c4a6; }
.poc-line-thumb.is-marine { background: linear-gradient(135deg, var(--ia-marine), var(--ia-marine-dark)); color: #f5ecd9; }
.poc-line-thumb.is-alert { background: rgba(226, 168, 160, 0.18); color: #e2a8a0; }
.poc-line-name {
  font-family: "Fraunces", serif;
  font-size: 0.98rem;
  color: #f5ecd9;
  line-height: 1.15;
}
.poc-line-meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 236, 217, 0.5);
  margin-top: 0.15rem;
}
.poc-line-price {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 1.1rem;
  color: #a8c4a6;
}
.poc-total {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid rgba(245, 236, 217, 0.2);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.poc-total-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f5ecd9;
}
.poc-total-value {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 2.4rem;
  color: var(--ia-violet-soft);
  line-height: 1;
}


/* ─────────────────────────────────────────────────────────────────
   26 · IA TOPBAR — bandeau "agent disponible"
───────────────────────────────────────────────────────────────── */
.ia-topbar {
  background: #0c0f1a;
  color: #f5ecd9;
  padding: 0.5rem 1rem;
  text-align: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
  z-index: 5;
  border-bottom: 1px solid rgba(245, 236, 217, 0.1);
}
.ia-topbar-track {
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  justify-content: center;
}
.ia-topbar .dot-ai {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ia-violet-soft);
}
.ia-topbar .dot-ai::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ia-violet-soft);
  box-shadow: 0 0 6px rgba(167, 139, 250, 0.85);
  animation: ia-pulse-dot 1.6s ease-in-out infinite;
}
.ia-topbar .dot-ok {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #a8c4a6;
}
.ia-topbar .dot-ok::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6b8169;
  box-shadow: 0 0 6px rgba(107, 129, 105, 0.85);
}


/* ─────────────────────────────────────────────────────────────────
   27 · CHAT SUPPORT IA — variante mock-up chat de service
───────────────────────────────────────────────────────────────── */
.ia-chat {
  background: #fdf6e3;
  border: 1px solid rgba(12, 15, 26, 0.12);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 44px -22px rgba(12, 15, 26, 0.25);
}
.ia-chat-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.1rem;
  background: linear-gradient(135deg, var(--ia-marine) 0%, var(--ia-marine-dark) 100%);
  color: #f5ecd9;
}
.ia-chat-head .bot-avatar { width: 38px; height: 38px; font-size: 0.95rem; }
.ia-chat-head .bot-avatar::after {
  width: 9px;
  height: 9px;
  border-color: var(--ia-marine);
}
.ia-chat-head .title {
  font-family: "Fraunces", serif;
  font-size: 1rem;
  line-height: 1.1;
}
.ia-chat-head .title em { font-style: italic; color: var(--ia-violet-soft); }
.ia-chat-head .meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: rgba(245, 236, 217, 0.7);
  margin-top: 0.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.ia-chat-head .meta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6b8169;
  box-shadow: 0 0 5px rgba(107, 129, 105, 0.8);
}

.ia-chat-body {
  padding: 1.2rem 1.2rem 0.6rem;
  background-color: #fdf6e3;
  background-image: radial-gradient(circle at 1px 1px, rgba(12, 15, 26, 0.05) 1px, transparent 0);
  background-size: 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.ia-chat-bubble {
  max-width: 80%;
  padding: 0.7rem 0.95rem;
  border-radius: 14px;
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
}
.ia-chat-bubble.is-user {
  background: var(--ia-violet);
  color: #f5ecd9;
  border-top-right-radius: 4px;
  align-self: flex-end;
}
.ia-chat-bubble.is-bot {
  background: #fdf6e3;
  border: 1px solid rgba(12, 15, 26, 0.1);
  color: #0c0f1a;
  border-top-left-radius: 4px;
  align-self: flex-start;
}
.ia-chat-bubble .ts {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  margin-top: 0.4rem;
  opacity: 0.65;
}
.ia-chat-bubble.is-bot .ai-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ia-violet);
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.ia-chat-footer {
  padding: 0.9rem 1.1rem 1rem;
  border-top: 1px solid rgba(12, 15, 26, 0.08);
  background: #fdf6e3;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6557;
  text-align: center;
}


/* ─────────────────────────────────────────────────────────────────
   28 · TYPING DOTS — indicateur "Claude réfléchit…"
───────────────────────────────────────────────────────────────── */
.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.6rem 0.8rem;
  background: #fdf6e3;
  border: 1px solid rgba(12, 15, 26, 0.1);
  border-radius: 14px;
  border-top-left-radius: 4px;
  align-self: flex-start;
}
.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ia-violet);
  opacity: 0.4;
  animation: ia-typing 1.2s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.typing-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes ia-typing {
  0%, 80%, 100% { opacity: 0.4; transform: scale(0.85); }
  40%           { opacity: 1; transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .typing-dots span { animation: none; }
}


/* ─────────────────────────────────────────────────────────────────
   29 · FOOTER STRIP IA — séparateur de section
───────────────────────────────────────────────────────────────── */
.ia-strip {
  background: var(--ia-marine);
  color: #f5ecd9;
  padding: 0.9rem 0;
  overflow: hidden;
  border-top: 1px solid rgba(245, 236, 217, 0.12);
  border-bottom: 1px solid rgba(245, 236, 217, 0.12);
}
.ia-strip-track {
  display: flex;
  gap: 2.6rem;
  white-space: nowrap;
  width: max-content;
  animation: ia-strip-scroll 38s linear infinite;
  align-items: center;
}
.ia-strip-item {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f5ecd9;
}
.ia-strip-glyph {
  color: var(--ia-violet-soft);
  font-size: 0.9rem;
}
@keyframes ia-strip-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ia-strip-track { animation: none; }
}


/* ─────────────────────────────────────────────────────────────────
   30 · BREADCRUMB IA
───────────────────────────────────────────────────────────────── */
.ia-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6557;
}
.ia-breadcrumb a { color: #6b6557; transition: color 0.2s; }
.ia-breadcrumb a:hover { color: var(--ia-violet); }
.ia-breadcrumb .sep { color: rgba(12, 15, 26, 0.25); }
.ia-breadcrumb .current { color: #0c0f1a; font-weight: 500; }


/* ─────────────────────────────────────────────────────────────────
   31 · MODEL BADGE — pastille modèle Claude
───────────────────────────────────────────────────────────────── */
.model-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.7rem;
  border: 1px solid rgba(184, 92, 0, 0.4);
  border-radius: 999px;
  background: rgba(184, 92, 0, 0.08);
  color: var(--ia-violet);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.model-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ia-violet);
  box-shadow: 0 0 6px rgba(184, 92, 0, 0.7);
}
.model-badge.is-bot {
  border-color: rgba(107, 129, 105, 0.4);
  background: rgba(107, 129, 105, 0.1);
  color: var(--ia-bot-dark);
}
.model-badge.is-bot .dot { background: var(--ia-bot); box-shadow: 0 0 6px rgba(107, 129, 105, 0.7); }


/* ─────────────────────────────────────────────────────────────────
   32 · HERO IA — titre éditorial avec aura violette
───────────────────────────────────────────────────────────────── */
.ia-hero {
  position: relative;
}
.ia-hero::before {
  content: "";
  position: absolute;
  inset: -10% -5% auto auto;
  width: 540px;
  height: 540px;
  background: radial-gradient(circle at center, rgba(184, 92, 0, 0.16) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.ia-hero > * { position: relative; z-index: 1; }


/* ─────────────────────────────────────────────────────────────────
   33 · UTILITAIRES
───────────────────────────────────────────────────────────────── */
.ia-divider {
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 6px,
    rgba(184, 92, 0, 0.35) 6px 12px
  );
  border: none;
  width: 100%;
}
.ia-divider.is-ink {
  background: repeating-linear-gradient(
    90deg,
    transparent 0 6px,
    rgba(167, 139, 250, 0.35) 6px 12px
  );
}

.tabular-nums { font-variant-numeric: tabular-nums; }

/* Eyebrow IA variant (override discret pour la touche violette) */
.eyebrow.is-ia {
  color: var(--ia-violet);
}
.eyebrow.is-ia::before {
  background-color: var(--ia-violet);
}
.eyebrow-ink.is-ia {
  color: var(--ia-violet-soft);
}
.eyebrow-ink.is-ia::before {
  background-color: var(--ia-violet-soft);
}