:root {
  /* Marque IA Tools for Sage (relevé sur le logo) */
  --navy: #1B1F3B;
  --coral: #FF6B5B;
  --green: #00A651;
  --yellow: #FFC83D;

  --page: #F3F4FA;
  --surface: #FFFFFF;
  --line: #E1E3EF;
  --ink: #1B1F3B;
  --ink-2: #4A4F6E;
  --ink-3: #7A7F9A;

  /* Séries de graphiques, ordre fixe (validées : voir README) */
  --s1: #3D4A9E; --s2: #E8553F; --s3: #7B5CC4; --s4: #0E9F5A; --s5: #D99A00;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--page); color: var(--ink);
  font: 15px/1.55 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  display: flex; flex-direction: column;
}

/* En-tête : le logotype de la marque, rien d'autre */
header {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 800; font-size: 18px; letter-spacing: -.01em; color: var(--navy); }
.brand i { color: var(--coral); font-weight: 500; margin: 0 .15em; }
.brand b { color: var(--green); }
.dots { display: flex; gap: 5px; margin-left: 2px; }
.dots span { width: 6px; height: 6px; border-radius: 50%; }
.dots span:nth-child(1) { background: var(--green); }
.dots span:nth-child(2) { background: var(--yellow); }
.dots span:nth-child(3) { background: var(--coral); }
#societe { margin-left: auto; font-size: 13px; color: var(--ink-2); }
#societe:empty { display: none; }
#expword { margin-left: auto; font: inherit; font-size: 12.5px; color: var(--ink-2); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; cursor: pointer; }
#societe:not(:empty) + #expword { margin-left: 14px; }
#expword:hover { border-color: var(--ink-3); color: var(--ink); }
#societe::before { content: "Société : "; color: var(--ink-3); }

main { flex: 1; overflow-y: auto; scroll-behavior: smooth; }
#fil { max-width: 880px; margin: 0 auto; padding: 22px 20px 40px; display: flex; flex-direction: column; gap: 16px; }

.msg { display: flex; animation: arrive .18s ease-out; }
@keyframes arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .msg { animation: none; } main { scroll-behavior: auto; } }

.msg.user { justify-content: flex-end; }
.msg.user .bulle {
  background: var(--navy); color: #fff; border-radius: 16px 16px 4px 16px;
  padding: 9px 15px; max-width: 78%; white-space: pre-wrap; overflow-wrap: anywhere;
}

.msg.ia .bulle {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--green);
  border-radius: 4px 16px 16px 16px; padding: 12px 18px; max-width: 100%; min-width: 0; width: 100%;
}
.msg.err .bulle {
  background: #FFF3F1; border: 1px solid #F6C9C2; border-left: 3px solid var(--coral);
  border-radius: 4px 16px 16px 16px; padding: 10px 16px; color: #8A2A1C; width: 100%;
}

/* Texte rendu depuis le Markdown */
.md > :first-child { margin-top: 0; } .md > :last-child { margin-bottom: 0; }
.md p { margin: .55em 0; } .md ul, .md ol { margin: .5em 0; padding-left: 1.4em; } .md li { margin: .2em 0; }
.md h1, .md h2, .md h3 { margin: .9em 0 .35em; line-height: 1.25; letter-spacing: -.01em; }
.md h1 { font-size: 1.25em; } .md h2 { font-size: 1.12em; } .md h3 { font-size: 1.02em; }
.md strong { font-weight: 650; }
.md code { background: #EEF0F8; padding: .1em .35em; border-radius: 4px; font: .9em Consolas, monospace; }
.md pre { background: var(--navy); color: #E9EBF7; padding: 12px 14px; border-radius: 10px; overflow-x: auto; }
.md pre code { background: none; padding: 0; color: inherit; }
.md blockquote { margin: .6em 0; padding: .1em 1em; border-left: 3px solid var(--line); color: var(--ink-2); }
.md a { color: var(--s1); }
.tablewrap { overflow-x: auto; margin: .7em 0; border: 1px solid var(--line); border-radius: 10px; }
.md table, table.donnees { border-collapse: collapse; width: 100%; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.md th, .md td, table.donnees th, table.donnees td { padding: 7px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.md th, table.donnees th { background: #F7F8FC; color: var(--ink-2); font-weight: 650; position: sticky; top: 0; }
.md tr:last-child td, table.donnees tr:last-child td { border-bottom: 0; }
/* supervision : mots-clés repérés dans le gras du Markdown (voir rendMd) */
.md strong.sup-hors, .md strong.sup-crit { color: #C62828; font-weight: 700; }
.md tr.sup-pb td { background: #FDECEA; }
.md td.num, table.donnees td.num, .md th.num, table.donnees th.num { text-align: right; }

/* Graphique */
figure.graphique { margin: .8em 0; padding: 12px 14px 8px; border: 1px solid var(--line); border-radius: 12px; background: #FDFDFF; }
figure.graphique figcaption { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
figure.graphique .titre { font-weight: 650; }
figure.graphique .unite { color: var(--ink-3); font-size: 13px; }
figure.graphique button {
  margin-left: auto; font: inherit; font-size: 12.5px; color: var(--ink-2); background: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 11px; cursor: pointer;
}
figure.graphique button:hover { border-color: var(--ink-3); color: var(--ink); }
figure.graphique button:focus-visible, main:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; }
.zonecanvas { position: relative; height: 300px; }
.attente { color: var(--ink-3); font-size: 13.5px; padding: 18px 0; }
.choix { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.choix button { font: inherit; font-size: 14px; padding: 7px 16px; border-radius: 999px; border: 1.5px solid var(--green); background: var(--surface); color: var(--ink); cursor: pointer; }
a.doc { font-weight: 600; text-decoration: underline; cursor: pointer; }
.choix button:hover, .choix button:focus-visible { background: var(--green); color: #fff; outline: none; }
.choix button.pris { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Indicateur de réflexion : bulle verte de la plaquette qui s'agite */
.saisie { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--ink-3); font-size: 13px; }
.saisie svg { width: 34px; height: 34px; overflow: visible; flex: none; }
.saisie .lib { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.saisie .bulle-ico { transform-box: fill-box; transform-origin: 50% 90%; animation: agite 1.3s infinite ease-in-out; }
.saisie .pt { transform-box: fill-box; transform-origin: 50% 50%; animation: saute 1.3s infinite ease-in-out; }
.saisie .p2 { animation-delay: .15s; } .saisie .p3 { animation-delay: .3s; }
.saisie .etincelle { transform-box: fill-box; transform-origin: 50% 50%; animation: scintille 1.3s infinite ease-in-out; }
.saisie .e2 { animation-delay: .45s; } .saisie .e3 { animation-delay: .9s; }
@keyframes agite { 0%, 100% { transform: rotate(0) scale(1); } 15% { transform: rotate(-9deg) scale(1.05); } 35% { transform: rotate(8deg) scale(1.05); } 55% { transform: rotate(-5deg) scale(1.02); } 75% { transform: rotate(3deg) scale(1); } }
@keyframes saute { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }
@keyframes scintille { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .saisie .bulle-ico, .saisie .pt, .saisie .etincelle { animation: none; } }

.actions { display: flex; gap: 8px; margin-top: 10px; }
.actions button { font: inherit; font-size: 12.5px; color: var(--ink-2); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; cursor: pointer; }
.actions button:hover, .actions button:focus-visible { border-color: var(--ink-3); color: var(--ink); outline: none; }
.actions button.ok { border-color: var(--green); color: var(--green); }
#vide { margin: 12vh auto 0; text-align: center; color: var(--ink-2); max-width: 420px; }
#vide .brand { font-size: 26px; display: block; margin-bottom: 6px; }
#bas { position: fixed; right: 22px; bottom: 18px; display: none; background: var(--navy); color: #fff; border: 0;
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; box-shadow: 0 2px 8px rgba(27,31,59,.25); }