:root{
  --paper:#F2ECE0;
  --ink:#20211D;
  --muted:#6B6A60;
  --accent:#6B4423;
  --line:#DCD6C7;

  --papier: var(--paper);
  --papier-elevee: color-mix(in srgb, var(--paper) 100%, white 4%);
  --papier-journal: color-mix(in srgb, var(--paper) 92%, var(--ink) 6%);
  --encre: var(--ink);
  --encre-vive: color-mix(in srgb, var(--ink) 88%, black 12%);
  --encre-douce: var(--muted);
  --ligne: var(--line);
  --marque: var(--accent);
  --sur-marque: color-mix(in srgb, var(--accent) 12%, var(--paper) 88%);
  --ombre-marque: color-mix(in srgb, var(--accent) 75%, black 25%);
  --sur-accent: color-mix(in srgb, var(--accent) 14%, var(--paper) 86%);
  --ombre-accent: color-mix(in srgb, var(--accent) 75%, black 25%);
  --surlignage: color-mix(in srgb, var(--accent) 24%, var(--paper) 76%);
  --rayon:8px;
  --rayon-bouton:6px;
  --grain:none;
}
.marque-app .puce{background:var(--marque)}

/* Onglets (réemploi du motif assistant-telephone) */
.onglets{display:flex;gap:.4rem;padding:.7rem 1.25rem 0;border-bottom:1.4px solid var(--ligne);overflow-x:auto}
.onglets button{background:none;border:none;font-family:"Source Sans 3",sans-serif;font-weight:600;font-size:.86rem;
  color:var(--encre-douce);padding:.6rem .9rem;border-radius:10px 10px 0 0;cursor:pointer;min-height:44px;white-space:nowrap;
  border-bottom:3px solid transparent}
.onglets button.actif{color:var(--marque);border-bottom-color:var(--marque);background:var(--sur-marque)}

/* Fil de conversation */
.fil-chat{display:flex;flex-direction:column;gap:.7rem;min-height:220px}
.bulle{max-width:min(520px,100%);padding:.75rem .95rem;border-radius:var(--rayon);font-size:.92rem;line-height:1.55}
.bulle.visiteur{align-self:flex-end;background:var(--marque);color:var(--sur-marque);border-bottom-right-radius:3px}
.bulle.agent{align-self:flex-start;background:var(--papier-elevee);border:1.4px solid var(--ligne);border-bottom-left-radius:3px}
.source-citee{margin-top:.55rem;padding:.5rem .65rem;background:var(--papier-journal);border-left:3px solid var(--accent);
  border-radius:4px;font-size:.76rem;color:var(--encre-douce);display:flex;gap:.4rem;align-items:flex-start}
.source-citee .icone{color:var(--accent);width:14px;height:14px;margin-top:.15rem;flex:none}
.source-citee button{background:none;border:none;color:var(--marque);text-decoration:underline;font-size:.76rem;
  cursor:pointer;padding:0;font-family:inherit}

.suggestions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.3rem}
.suggestion{background:var(--papier-elevee);border:1.4px solid var(--ligne);border-radius:20px;padding:.5rem .9rem;
  font-size:.82rem;cursor:pointer;color:var(--encre);min-height:44px}
.suggestion:hover{border-color:var(--marque);color:var(--marque)}

.barre-saisie{display:flex;gap:.6rem;position:sticky;bottom:0;background:var(--papier);padding-top:.6rem}
.barre-saisie input{flex:1;font-family:"Source Sans 3",sans-serif;font-size:.92rem;border:1.4px solid var(--ligne);
  border-radius:var(--rayon-bouton);padding:.7rem .9rem;background:var(--papier-elevee);color:var(--encre);min-height:44px}
.barre-saisie input:focus-visible{border-color:var(--marque)}
.barre-saisie button{min-width:44px}

/* Formulaire de contact */
.carte-contact{background:var(--sur-accent);border:1.6px dashed var(--accent);border-radius:var(--rayon);padding:1rem;
  display:flex;flex-direction:column;gap:.7rem;max-width:min(520px,100%)}
.carte-contact label{font-size:.8rem;font-weight:600;color:var(--encre-vive);display:block;margin-bottom:.25rem}
.carte-contact input, .carte-contact textarea{width:100%;font-family:"Source Sans 3",sans-serif;font-size:.9rem;
  border:1.4px solid var(--ligne);border-radius:6px;padding:.6rem .7rem;background:var(--papier-elevee);color:var(--encre);min-height:44px}
.carte-contact textarea{min-height:70px;resize:vertical}
.champ{display:flex;flex-direction:column}

/* Documentation */
.grille-doc{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (max-width:640px){.grille-doc{grid-template-columns:1fr}}
.carte-doc{background:var(--papier-elevee);border:1.4px solid var(--ligne);border-radius:var(--rayon);padding:1rem;scroll-margin-top:1rem}
.carte-doc.surlignee{border-color:var(--accent);box-shadow:0 0 0 2px var(--sur-accent) inset}
.carte-doc h3{font-size:1rem;display:flex;align-items:center;gap:.4rem}
.carte-doc h3 .icone{width:16px;height:16px;color:var(--accent)}
.carte-doc p{font-size:.85rem;color:var(--encre-douce);margin:0}

/* Dashboard */
.stats-chat{display:flex;gap:.7rem;flex-wrap:wrap}
.stat-carte{flex:1;min-width:140px;background:var(--papier-elevee);border:1.4px solid var(--ligne);border-radius:var(--rayon);padding:.8rem .9rem}
.stat-carte .valeur{font-family:"Newsreader",serif;font-size:1.7rem;font-weight:600;color:var(--encre-vive)}
.stat-carte .label{font-size:.74rem;color:var(--encre-douce);text-transform:uppercase;letter-spacing:.04em}

table.dashboard{width:100%;border-collapse:collapse;font-size:.85rem}
table.dashboard th{text-align:left;font-family:"Source Sans 3",sans-serif;font-size:.7rem;text-transform:uppercase;
  color:var(--encre-douce);padding:.5rem .4rem;border-bottom:1.6px solid var(--marque)}
table.dashboard td{padding:.55rem .4rem;border-bottom:1px solid var(--ligne);vertical-align:top}
.puce-rep{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:700;padding:.15rem .5rem;border-radius:20px}
.puce-rep.oui{background:var(--sur-marque);color:var(--marque)}
.puce-rep.non{background:var(--sur-accent);color:var(--ombre-accent)}

@media (max-width:640px){
  table.dashboard thead{display:none}
  table.dashboard, table.dashboard tbody, table.dashboard tr, table.dashboard td{display:block;width:100%}
  table.dashboard tr{border-bottom:1.4px solid var(--ligne);padding:.5rem 0}
  table.dashboard td{border-bottom:none;padding:.15rem 0}
  table.dashboard td::before{content:attr(data-label);font-size:.68rem;text-transform:uppercase;color:var(--encre-douce);display:block}
}