/* Synovizion V2 — clair, sobre, un seul accent (le vermillon du renard) réservé à l'action et à ce qui t'attend. */
@font-face { font-family: "Archivo"; src: url("polices/archivo.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("polices/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --fond: #F4F2EE;
  --surface: #FFFFFF;
  --surface-2: #EEEBE5;
  --encre: #18181B;
  --encre-2: #57544E;
  --encre-3: #8A867E;
  --trait: #E2DED6;
  --accent: #D23C25;
  --accent-fond: #FBE9E5;
  --vert: #2F7D4F;
  --vert-fond: #E6F2EA;
  --ambre: #A3620B;
  --ambre-fond: #FBF0DD;
  --rayon: 10px;
  --texte: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titre: "Bricolage", "Archivo", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fond); color: var(--encre); font: 15px/1.5 var(--texte); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: inherit; }
button, select, textarea, input { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
code, pre { font-family: var(--mono); font-size: 13px; }

button.principal { background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 9px 16px; font-weight: 600; cursor: pointer; min-height: 40px; }
button.principal:hover { filter: brightness(0.94); }
button.principal:disabled { opacity: .5; cursor: default; }
button.discret { background: none; border: 0; color: var(--encre-2); cursor: pointer; padding: 8px 6px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--trait); }
button:focus-visible, a:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ——— Entrée ——— */
.page-entree { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.entree { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; padding: 28px; }
.entree .marque { font: 700 15px var(--titre); letter-spacing: .02em; margin: 0 0 18px; }
.entree h1 { font: 700 28px/1.1 var(--titre); margin: 0 0 6px; }
.entree .aide { color: var(--encre-2); margin: 0 0 18px; }
.entree label { display: block; font-weight: 600; margin-bottom: 6px; }
.entree input { width: 100%; padding: 11px 12px; border: 1px solid var(--trait); border-radius: 8px; background: var(--fond); font-size: 16px; margin-bottom: 14px; }
.entree button { width: 100%; }
.entree .secours { color: var(--encre-3); font-size: 13px; margin-top: 18px; word-break: break-word; }
.erreur { color: var(--accent); font-weight: 600; }

/* ——— Barre ——— */
.barre { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 18px; padding: 10px 20px; background: var(--fond); border-bottom: 1px solid var(--trait); }
.marque { font: 700 17px var(--titre); text-decoration: none; letter-spacing: .01em; }
.etat-agent { margin: 0; display: flex; align-items: center; gap: 7px; color: var(--encre-2); }
.etat-agent .pastille { width: 9px; height: 9px; border-radius: 50%; background: var(--vert); }
body.travaille .etat-agent .pastille { background: var(--accent); animation: pouls 1.2s ease-in-out infinite; }
@keyframes pouls { 50% { opacity: .35; } }
.conso { margin: 0 0 0 auto; display: flex; gap: 14px; color: var(--encre-3); font-size: 13px; }
.conso b { color: var(--encre); font-weight: 600; font-variant-numeric: tabular-nums; }
.sortie { color: var(--encre-3); font-size: 13px; }

/* ——— Cadre ——— */
.cadre { display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: calc(100vh - 53px); }
.clients { border-right: 1px solid var(--trait); padding: 18px 14px; }
.clients h2 { font: 600 12px var(--texte); text-transform: uppercase; letter-spacing: .08em; color: var(--encre-3); margin: 0 6px 10px; }
.carte { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--rayon); text-decoration: none; border: 1px solid transparent; margin-bottom: 4px; }
.carte:hover { background: var(--surface-2); }
.carte.active { background: var(--surface); border-color: var(--trait); }
.carte .nom { font-weight: 600; }
.carte .meta { color: var(--encre-3); font-size: 12.5px; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge { font-style: normal; font-size: 11.5px; font-weight: 600; border-radius: 99px; padding: 1px 8px; }
.badge.attend { background: var(--accent-fond); color: var(--accent); }
.badge.travaille { background: var(--ambre-fond); color: var(--ambre); }
.ajout { margin: 10px 6px 0; background: none; border: 1px dashed var(--trait); border-radius: var(--rayon); padding: 9px 12px; width: calc(100% - 12px); text-align: left; color: var(--encre-2); cursor: pointer; }
.ajout:hover { border-color: var(--encre-3); color: var(--encre); }

.client { min-width: 0; display: flex; flex-direction: column; padding: 18px 28px 0; }
.entete-client h1 { font: 700 30px/1.1 var(--titre); margin: 0; letter-spacing: -.01em; }
.entete-client .sous { color: var(--encre-2); margin: 6px 0 0; max-width: 70ch; }
.onglets { display: flex; gap: 2px; margin: 16px 0 0; border-bottom: 1px solid var(--trait); overflow-x: auto; scrollbar-width: none; }
.onglet { background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 12px; cursor: pointer; color: var(--encre-2); white-space: nowrap; margin-bottom: -1px; }
.onglet.actif { color: var(--encre); border-bottom-color: var(--encre); font-weight: 600; }

.vue { display: none; }
.vue.active { display: flex; }
#vue-conversation { flex-direction: column; flex: 1; min-height: 0; }
.doc.active, #vue-machines.active { display: block; padding: 18px 0 40px; max-width: 860px; }
.doc h1 { font: 700 22px var(--titre); margin: 0 0 10px; }
.doc h2 { font: 700 17px var(--titre); margin: 22px 0 6px; }
.doc ul { padding-left: 20px; }
.doc li { margin: 3px 0; }
.vide { color: var(--encre-3); }
.qui { display: inline-block; font-size: 11.5px; font-weight: 600; border-radius: 99px; padding: 0 8px; margin-right: 4px; background: var(--surface-2); color: var(--encre-2); vertical-align: 1px; }
.qui-nous { background: var(--accent-fond); color: var(--accent); }
.qui-jeffrey { background: var(--ambre-fond); color: var(--ambre); }
.onglets { scroll-margin-top: 96px; }
table.machines { border-collapse: collapse; width: 100%; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }
table.machines th, table.machines td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--trait); vertical-align: top; }
table.machines th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-3); }

/* ——— Conversation ——— */
.fil { flex: 1; padding: 18px 0 12px; max-width: 860px; width: 100%; }
.vide-fil { color: var(--encre-2); padding: 12px 0; }
.suggestions { display: flex; gap: 8px; flex-wrap: wrap; }
.suggestions button { background: var(--surface); border: 1px solid var(--trait); border-radius: 99px; padding: 7px 14px; cursor: pointer; }
.suggestions button:hover { border-color: var(--encre-3); }
.msg { margin: 0 0 16px; }
.msg.moi { display: flex; justify-content: flex-end; }
.msg.moi .corps { background: var(--surface-2); border-radius: 14px 14px 4px 14px; padding: 9px 14px; max-width: 78%; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.systeme .corps { font-family: var(--mono); font-size: 12.5px; color: var(--encre-2); border-left: 3px solid var(--trait); padding: 4px 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; }
.msg.agent { background: var(--surface); border: 1px solid var(--trait); border-radius: 4px 14px 14px 14px; padding: 12px 16px; }
.msg.agent > header { font: 700 13px var(--titre); color: var(--encre); margin-bottom: 4px; }
.msg.agent .corps { overflow-wrap: anywhere; }
.msg.agent .corps > :first-child { margin-top: 0; }
.msg.agent .corps > :last-child { margin-bottom: 0; }
.msg.agent .corps pre { background: var(--fond); border: 1px solid var(--trait); border-radius: 8px; padding: 10px 12px; overflow-x: auto; }
.msg.agent .corps code { background: var(--fond); padding: 1px 4px; border-radius: 4px; }
.msg.agent .corps pre code { background: none; padding: 0; }
.msg.agent .corps table { border-collapse: collapse; }
.msg.agent .corps th, .msg.agent .corps td { border: 1px solid var(--trait); padding: 4px 8px; }
.msg.agent.en-cours .corps { white-space: pre-wrap; }
.msg.en-erreur { border-color: var(--accent); }
.outils { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.outils li { font-size: 12.5px; color: var(--encre-3); font-family: var(--mono); overflow-wrap: anywhere; }
.outils li::before { content: "↳ "; }
.usage { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--trait); font-size: 12px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.attente { display: inline-flex; gap: 4px; }
.attente i { width: 6px; height: 6px; background: var(--encre-3); border-radius: 50%; animation: pouls 1s infinite; }
.attente i:nth-child(2) { animation-delay: .2s; } .attente i:nth-child(3) { animation-delay: .4s; }

/* ——— Actions à valider ——— */
.action { background: var(--surface); border: 1px solid var(--trait); border-left: 4px solid var(--trait); border-radius: var(--rayon); padding: 12px 16px; margin: 0 0 16px; }
.action.etat-en_attente { border-left-color: var(--accent); }
.action.etat-executee { border-left-color: var(--vert); }
.action.etat-echec { border-left-color: var(--ambre); }
.action header { font-size: 13px; color: var(--encre-2); }
.action .etat { font-weight: 600; }
.action.etat-en_attente .etat { color: var(--accent); }
.action .motif { margin: 6px 0; }
.action pre { background: var(--fond); border: 1px solid var(--trait); border-radius: 8px; padding: 10px 12px; overflow-x: auto; max-height: 380px; white-space: pre; }
.action .sortie { max-height: 260px; }
.action .boutons { display: flex; gap: 8px; margin-top: 10px; }
.action .boutons button:not(.principal) { background: var(--surface); border: 1px solid var(--trait); border-radius: 8px; padding: 9px 14px; cursor: pointer; }

/* ——— Saisie ——— */
.saisie { position: sticky; bottom: 0; background: var(--fond); padding: 10px 0 16px; max-width: 860px; width: 100%; border-top: 1px solid transparent; }
.saisie textarea { width: 100%; resize: none; min-height: 56px; max-height: 40vh; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 12px; background: var(--surface); font-size: 16px; line-height: 1.45; }
.saisie textarea:focus { border-color: var(--encre-3); outline: none; }
.reglages { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.reglages select { background: var(--surface); border: 1px solid var(--trait); border-radius: 8px; padding: 7px 8px; font-size: 13.5px; max-width: 46vw; }
.depense-client { color: var(--encre-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
#envoyer { margin-left: auto; }
body.travaille #envoyer { background: var(--encre); }

/* ——— Téléphone ——— */
@media (max-width: 900px) {
  .barre { gap: 10px; padding: 9px 16px; flex-wrap: wrap; }
  .conso { order: 3; width: 100%; margin: 0; justify-content: space-between; }
  .sortie { margin-left: auto; }
  .cadre { grid-template-columns: 1fr; }
  .clients { border-right: 0; border-bottom: 1px solid var(--trait); padding: 10px 16px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .clients h2 { display: none; }
  #cartes { display: contents; }
  .carte { flex: 0 0 auto; margin: 0; padding: 7px 12px; background: var(--surface-2); max-width: 70vw; }
  .carte .meta { display: none; }
  .carte .nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ajout { flex: 0 0 auto; width: auto; margin: 0; white-space: nowrap; }
  .client { padding: 14px 16px 0; }
  .entete-client h1 { font-size: 24px; }
  .entete-client .sous { font-size: 13.5px; }
  .msg.moi .corps { max-width: 90%; }
  .msg.agent { padding: 10px 12px; }
  .depense-client { display: none; }
  .reglages select { flex: 1 1 40%; }
  #nouvelle-conv { order: 5; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }