.replique { display: flex; gap: 0.6rem; margin-bottom: 1.1rem; animation: arrive 0.3s var(--rebond); }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } }

.replique-moi { justify-content: flex-end; }
.bulle {
  max-width: 78%;
  padding: 0.6rem 1rem;
  border-radius: var(--r-22) var(--r-22) 6px var(--r-22);
  background: linear-gradient(170deg, var(--velours-3), var(--velours-1));
  box-shadow: var(--verre), 0 2px 0 rgba(5, 13, 42, 0.5), 0 10px 22px rgba(5, 13, 42, 0.22);
  color: var(--sur-velours);
  font-size: var(--t-16);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.avatar {
  flex: none;
  width: 2rem;
  height: 2rem;
  margin-top: 0.1rem;
  border-radius: var(--r-12);
  background: url(../img/clowis-icone-plate.svg) center / cover no-repeat;
  box-shadow: 0 2px 0 rgba(5, 13, 42, 0.35);
}
.replique-claude .contenu {
  min-width: 0;
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: 6px var(--r-22) var(--r-22) var(--r-22);
  background: var(--papier);
  box-shadow: inset 0 0 0 1px var(--trait), 0 1px 2px rgba(5, 13, 42, 0.06);
}
.contenu > * + * { margin-top: 0.55rem; }

/* ---------- Texte ---------- */

.md { font-size: var(--t-16); line-height: 1.55; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md pre, .md table { margin: 0 0 0.6rem; }
.md ul, .md ol { padding-left: 1.25rem; }
.md li::marker { color: var(--or-3); }
.md li + li { margin-top: 0.2rem; }
.md h1, .md h2, .md h3, .md h4 { margin: 1rem 0 0.4rem; font-family: var(--titre); font-weight: 700; line-height: 1.2; }
.md h1 { font-size: var(--t-20); }
.md h2 { font-size: var(--t-16); }
.md h3, .md h4 { font-size: var(--t-14); }
.md a { color: var(--azur); font-weight: 700; text-underline-offset: 3px; }
.md strong { font-weight: 800; }
.md blockquote { padding: 0.2rem 0 0.2rem 0.8rem; border-left: 3px solid var(--or-2); color: var(--encre-2); }
.md code {
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: rgba(220, 180, 92, 0.18);
  color: var(--or-4);
  font: 0.86em var(--code);
}
.md pre {
  padding: 0.8rem 1rem;
  overflow-x: auto;
  border-radius: var(--r-16);
  background: linear-gradient(180deg, var(--velours-1), var(--velours-0));
  box-shadow: inset 0 0 0 1px rgba(220, 180, 92, 0.25);
  color: var(--sur-velours);
}
.md pre code { padding: 0; background: none; color: inherit; font-size: var(--t-12); line-height: 1.55; }
.md table { border-collapse: separate; border-spacing: 0; font-size: var(--t-13); display: block; overflow-x: auto; }
.md th, .md td { padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
.md th { background: rgba(220, 180, 92, 0.22); font-family: var(--titre); font-weight: 700; }
.md tr:last-child td { border-bottom: 0; }
.md hr { border: 0; border-top: 1px solid var(--trait); margin: 0.9rem 0; }

.md.en-cours > :last-child::after {
  content: "";
  display: inline-block;
  width: 0.5em; height: 0.9em;
  margin-left: 3px;
  vertical-align: -0.1em;
  border-radius: 2px;
  background: var(--or-2);
  animation: clignote 1s steps(2) infinite;
}
@keyframes clignote { 50% { opacity: 0.2; } }

/* ---------- Outils ---------- */

.outil { font-size: var(--t-12); }
.outil summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.7rem 0.35rem 0.35rem;
  border-radius: 999px;
  background: var(--papier-creux);
  box-shadow: inset 0 0 0 1px var(--trait);
  list-style: none;
  cursor: pointer;
  color: var(--encre-2);
  transition: transform 0.16s var(--rebond);
}
.outil summary::-webkit-details-marker { display: none; }
.outil summary:hover { transform: translateX(3px); box-shadow: inset 0 0 0 1px var(--or-2); }
.outil-icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.5rem; height: 1.5rem;
  border-radius: var(--r-8);
  background: linear-gradient(170deg, var(--velours-3), var(--velours-1));
  color: var(--or-1);
  font-size: 0.85rem;
}
.outil[data-etat="attente"] .outil-icone { background: linear-gradient(170deg, var(--or-1), var(--or-3)); color: #2a1a04; }
.outil[data-etat="ok"] .outil-icone { background: linear-gradient(170deg, #5cc47e, var(--vert)); color: #062a13; }
.outil[data-etat="erreur"] .outil-icone { background: linear-gradient(170deg, #e07a6f, var(--rouge)); color: #fff; }
.outil-nom { color: var(--encre); font-family: var(--titre); font-weight: 700; }
.outil-cible { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--t-11) var(--code); }
.outil-corps {
  margin: 0.35rem 0 0.2rem;
  padding: 0.6rem 0.8rem;
  max-height: 20rem;
  overflow: auto;
  border-radius: var(--r-16);
  background: linear-gradient(180deg, var(--velours-1), var(--velours-0));
  box-shadow: inset 0 0 0 1px rgba(220, 180, 92, 0.2);
  color: var(--sur-velours);
  font: var(--t-11)/1.55 var(--code);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.outil-corps .moins { color: #ff9a86; }
.outil-corps .plus { color: #8fe0a8; }
.outil-erreur { color: #ff9a86; }

/* ---------- Permission ---------- */

.permission {
  display: grid;
  gap: 0.6rem;
  padding: 0.9rem;
  border-radius: var(--r-22);
  background: linear-gradient(180deg, rgba(220, 180, 92, 0.16), rgba(220, 180, 92, 0.28));
  box-shadow: inset 0 0 0 1px rgba(220, 180, 92, 0.55);
}
.permission-tete { display: flex; align-items: center; gap: 0.5rem; }
.permission-tete .icone { color: var(--or-4); font-size: 1.3rem; }
.permission-titre { margin: 0; font: 700 var(--t-14) var(--titre); }
.permission-raison { margin: 0; color: var(--encre-2); font-size: var(--t-12); }
.permission-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.permission-voix { margin-left: auto; color: var(--encre-3); font-size: var(--t-11); }
.permission[data-reponse] { background: none; box-shadow: none; padding: 0.15rem 0; }
.permission[data-reponse] .permission-actions,
.permission[data-reponse] .permission-raison,
.permission[data-reponse] .outil-corps,
.permission[data-reponse] .md { display: none; }
.permission[data-reponse] .permission-titre { color: var(--encre-2); font-weight: 500; font-size: var(--t-12); }
.permission[data-reponse="oui"] .permission-tete .icone { color: var(--vert); }
.permission[data-reponse="non"] .permission-tete .icone { color: var(--rouge); }

.note-systeme { color: var(--encre-2); font-size: var(--t-12); }
.note-systeme.erreur { color: var(--rouge); white-space: pre-wrap; }

.duree { margin-top: 0.4rem; color: var(--encre-3); font: 700 var(--t-11) var(--titre); font-variant-numeric: tabular-nums; }

.separateur-reprise {
  display: flex; align-items: center; gap: 0.7rem;
  margin-bottom: 1.1rem;
  color: var(--encre-3);
  font: 700 var(--t-11) var(--titre);
}
.separateur-reprise::before, .separateur-reprise::after { content: ""; flex: 1; border-top: 1px solid var(--trait); }