/* DocDac — feuille de style unique du site.
   Règles (design/README.md) : base 16 px, 6 tailles de texte seulement (jamais sous 13 px),
   boutons de 44 px, rayons 10 / 14, une seule action principale par écran.
   Mises en page : ordinateur ≥ 1100 px (barre latérale), tablette et téléphone (barre du bas). */

:root {
  --bg: #f4f3f0;
  --paper: #ffffff;
  --ink: #1f1a1d;
  --ink-2: #4d4549;
  --muted: #736b70;
  --line: #e4dfd9;
  --soft: #f3f0ec;
  --plum: #4a1d35;
  --plum-soft: #efe4ea;
  --green: #2e9e4b;
  --green-soft: #dcf2e1;
  --wa-bar: #f0eeea;   /* fond de la barre de saisie et de la barre du bas */
  --ok: #26843f;
  --ok-soft: #e5f3e8;
  --no: #b2452f;
  --no-soft: #f9e8e3;
  --warn: #8a5a00;
  --warn-soft: #fbf1d6;

  --fs-xs: 13px;   /* méta, légendes */
  --fs-sm: 14px;   /* texte secondaire */
  --fs-md: 16px;   /* texte courant */
  --fs-lg: 18px;   /* titres de section */
  --fs-xl: 22px;   /* titres de page (téléphone), totaux */
  --fs-2xl: 30px;  /* titres de page (ordinateur) */

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --r-ctl: 10px;
  --r-card: 14px;
  --h-ctl: 44px;
  --nav-h: 64px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-lg); font-weight: 650; }
h3 { font-size: var(--fs-md); font-weight: 650; }
p { margin: 0; }
.serif { font-family: var(--serif); font-weight: 400; }
.muted { color: var(--muted); }
.small, .tiny, .tiny-inline { font-size: var(--fs-xs); }
.tiny { display: block; margin-top: 2px; }
.lead { color: var(--muted); font-size: var(--fs-md); margin-top: var(--s1); }
.pre { white-space: pre-wrap; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .02em; }
.link { color: var(--plum); text-decoration: underline; text-underline-offset: 3px; }
.spacer { flex: 1; }
code { background: var(--soft); padding: 1px 6px; border-radius: 6px; font-size: .9em; }

/* ---------- Icônes ---------- */
.ic { width: 18px; height: 18px; flex: none; }
.btn .ic { width: 18px; height: 18px; }
.btn.small .ic, .chip .ic { width: 15px; height: 15px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--h-ctl); padding: 0 var(--s4); border-radius: var(--r-ctl);
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font: inherit; font-size: var(--fs-md); font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: #cfc7bf; }
.btn.plum { background: var(--plum); border-color: var(--plum); color: #fff; }
.btn.green { background: var(--green); border-color: var(--green); color: #fff; }
.btn.plum:hover, .btn.green:hover { filter: brightness(1.1); }
.btn.soft { background: var(--soft); }
.btn.ghost { background: transparent; }
.btn.small { min-height: 36px; padding: 0 var(--s3); font-size: var(--fs-sm); }
.btn.big { min-height: 48px; padding: 0 var(--s5); font-size: var(--fs-md); }
.btn.wide { width: 100%; }
.btn.danger { color: var(--no); }
.btn:disabled { opacity: .4; cursor: default; }
.link-btn { border: 0; background: none; color: var(--plum); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; display: inline-flex; gap: var(--s1); align-items: center; padding: var(--s1); }
.record.on { background: var(--no); border-color: var(--no); }
.record.on .ic { animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* ---------- Champs ---------- */
input, textarea, select { font: inherit; font-size: var(--fs-md); color: var(--ink); }
input[type=search], input:not([type]), input[type=text], input[type=date], input[type=time], select, textarea {
  border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--paper); padding: 0 var(--s3); min-height: var(--h-ctl);
}
textarea { padding: var(--s2) var(--s3); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--plum-soft); border-color: #c9b3bf; }

/* ---------- Structure : barre latérale (ordinateur) ---------- */
body { display: grid; grid-template-columns: 264px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--paper); border-right: 1px solid var(--line); padding: var(--s5) var(--s4); display: flex; flex-direction: column; gap: var(--s4); }
.brand { display: flex; align-items: center; gap: var(--s2); font-family: var(--serif); font-size: var(--fs-xl); color: var(--plum); }
.logo { width: 34px; height: 34px; border-radius: var(--r-ctl); background: var(--plum); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-lg); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item { position: relative; display: flex; align-items: center; gap: var(--s3); min-height: var(--h-ctl); padding: 0 var(--s3); border-radius: var(--r-ctl); color: var(--ink-2); font-weight: 550; }
.nav-item:hover { background: var(--soft); color: var(--ink); }
.nav-item.on { background: var(--plum-soft); color: var(--plum); font-weight: 650; }
.nav-badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--green); color: #fff; font-size: var(--fs-xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.nav-section { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; margin-top: var(--s2); }
.nav-section form { display: inline; }
.threads { display: flex; flex-direction: column; gap: 2px; }
.with-del { display: flex; align-items: center; gap: 2px; min-width: 0; }
.with-del > a { flex: 1; min-width: 0; }
.del-form { flex: none; }
.btn.icon-only { width: 36px; padding: 0; }
.btn.icon-only .ic { width: 16px; height: 16px; }
.thread { display: flex; flex-direction: column; padding: var(--s2) var(--s3); border-radius: var(--r-ctl); }
.thread:hover { background: var(--soft); }
.thread.current { background: var(--soft); box-shadow: inset 3px 0 var(--plum); }
.thread-name { font-weight: 600; text-transform: capitalize; }
.thread-sub { font-size: var(--fs-xs); color: var(--muted); }
.bottom-nav { display: none; }
.main { min-width: 0; }
/* Ordinateur : comme une application, la fenêtre ne défile jamais ; seule la zone de contenu défile. */
@media (min-width: 1100px) {
  html, body { height: 100vh; overflow: hidden; }
  .tab-row > a.tab { order: -1; }
  .tabs [data-tab="facturation"] { display: none; }
  .doc.chat { grid-column: 1; grid-row: 1; }
  #rencontres { grid-column: 2; grid-row: 1; }
  #rencontres .assist-fold { display: flex; flex-direction: column; }
  #rencontres .assist-fold > .assist-body { display: flex !important; }
  #rencontres summary.assist-head { pointer-events: none; cursor: default; }
  #rencontres summary.assist-head::after { content: none; }
  .main { height: 100vh; overflow-y: auto; overscroll-behavior: contain; }
  .sidebar { overflow: hidden; }
  .threads { flex: 1; min-height: 0; overflow-y: auto; }
  .lang-switch { flex-shrink: 0; }
}
/* Mise à jour htmx du sous-titre du fil dans la barre latérale : jamais affichée dans le fil lui-même. */
#fil-body > .thread-sub { display: none; }

/* ---------- Pages ---------- */
.page { max-width: 1120px; width: 100%; margin: 0 auto; padding: var(--s6) var(--s6) 64px; display: flex; flex-direction: column; gap: var(--s5); }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; }
.section { display: flex; flex-direction: column; gap: var(--s3); }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.card { background: var(--paper); border-radius: var(--r-card); border: 1px solid var(--line); padding: var(--s4) var(--s5); }
.list-card { padding: var(--s2) var(--s3); }
.empty-card { background: var(--paper); border: 1px dashed #d6cec6; border-radius: var(--r-card); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }
.steps-list { margin: 0; padding-left: 22px; display: grid; gap: var(--s2); color: var(--ink-2); }
.alert { background: var(--no-soft); color: var(--no); padding: var(--s3) var(--s4); border-radius: var(--r-ctl); font-size: var(--fs-sm); }
.ok-msg { background: var(--ok-soft); color: var(--ok); padding: var(--s2) var(--s3); border-radius: var(--r-ctl); font-size: var(--fs-sm); font-weight: 600; display: inline-block; }
.back { display: inline-flex; align-items: center; gap: var(--s1); color: var(--plum); font-weight: 600; font-size: var(--fs-sm); }
.fine { font-size: var(--fs-xs); color: var(--muted); }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--plum); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Accueil */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: 2px; }
.link-card:hover { border-color: #cfc7bf; }
.stat-label { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.stat-value { font-family: var(--serif); font-size: var(--fs-2xl); }
.stat-sub { color: var(--ink-2); font-size: var(--fs-sm); }
.todos { display: flex; flex-direction: column; gap: var(--s2); }
.todo { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s4); align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s3) var(--s4); }
.todo.warn { border-color: #ecd9a6; background: #fffaf0; }
.todo.ok { border-color: #c7e3cf; background: #f7fbf8; }
.todo-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--soft); color: var(--plum); display: inline-flex; align-items: center; justify-content: center; }
.todo.warn .todo-icon { background: var(--warn-soft); color: var(--warn); }
.todo.ok .todo-icon { background: var(--ok-soft); color: var(--ok); }
.todo-text { display: flex; flex-direction: column; gap: 2px; }
.todo-text span { color: var(--ink-2); font-size: var(--fs-sm); }

/* ---------- Écrans de travail (fil, rencontre) ---------- */
.session { display: flex; flex-direction: column; height: 100vh; padding: var(--s4) var(--s5); gap: var(--s3); }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.tabs { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; min-width: 0; }
.tab-row { display: contents; }
.tab { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s3); border-radius: var(--r-ctl); border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.tab:hover { background: rgba(255,255,255,.7); }
.tab.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.patient-chip { background: var(--paper); cursor: text; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.patient-chip input { border: 0; min-height: 0; padding: 0; font-weight: 650; font-size: var(--fs-md); width: 190px; background: transparent; }
.patient-chip input:focus { outline: none; }
.top-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.top-pair { display: flex; align-items: center; gap: var(--s2); min-width: 0; flex: 1 1 240px; }
.top-pair .context-form { flex: 1; min-width: 0; }
.top-pair .context-form .field { width: 100%; min-width: 0; }
.top-pair .context-form .field input { width: 100%; min-width: 0; }
.top-pair .del-form { flex: none; }
.field { display: inline-flex; align-items: center; gap: var(--s2); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 0 var(--s3); min-height: 40px; color: var(--muted); font-size: var(--fs-sm); }
.field input { border: 0; min-height: 0; padding: 0; background: transparent; font-size: var(--fs-sm); }
.field input:focus { outline: none; }
.field input[name=nam] { width: 130px; }
.context-form .field input { width: 280px; }
.status-pill { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-radius: 999px; font-weight: 650; font-size: var(--fs-sm); }
.status-pill.atteste { background: var(--ok-soft); color: var(--ok); }

#body, #fil-body { flex: 1; min-height: 0; }
.rencontre { display: flex; flex-direction: column; gap: var(--s3); height: 100%; min-height: 0; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--s3); flex: 1; min-height: 0; height: 100%; }
.doc { background: var(--paper); border-radius: var(--r-card); border: 1px solid var(--line); overflow-y: auto; padding: var(--s5) var(--s6); }
.panel { display: none; }
.panel.on { display: block; }
.doc-tools { display: flex; justify-content: flex-end; margin-bottom: var(--s2); }
.note { line-height: 1.65; max-width: 760px; }
.note h4 { font-size: var(--fs-md); margin: var(--s4) 0 var(--s1); }
.note h4:first-child { margin-top: 0; }
.note ul { margin: 0; padding-left: 22px; }
.doc-empty { max-width: 560px; margin: 8vh auto; text-align: center; display: grid; gap: var(--s3); }
.doc-empty h2 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-xl); }
.source { border-bottom: 1px solid var(--line); padding: var(--s3) 0; }
.source header { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.src-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--soft); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; }
.source audio { width: 100%; margin-top: var(--s2); }

/* Étapes de la rencontre */
.steps { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s3) var(--s4); }
.step-list { display: flex; gap: var(--s5); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: var(--s2); color: var(--muted); }
.step-num { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-sm); }
.step-text { display: flex; flex-direction: column; line-height: 1.25; }
.step-text strong { color: var(--ink); font-size: var(--fs-sm); }
.step-text span { font-size: var(--fs-xs); }
.step.cur .step-num { border-color: var(--plum); color: var(--plum); }
.step.done .step-num { background: var(--ok); border-color: var(--ok); color: #fff; }
.next-action { flex: none; }

/* Dossier patient */
.patient-bar { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; padding: var(--s3) var(--s4); margin-bottom: var(--s4); border-radius: var(--r-ctl); background: var(--soft); font-size: var(--fs-sm); }
.patient-bar.suggere { background: var(--warn-soft); }
.patient-bar.confirme { background: var(--ok-soft); }
.pb-label { color: var(--muted); }
.pb-name { font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.pb-state { color: var(--warn); display: inline-flex; gap: var(--s1); align-items: center; }
.pb-state.ok { color: var(--ok); }
.pb-nam { flex-basis: 100%; }
.picker { position: relative; margin-left: auto; }
.picker summary { list-style: none; cursor: pointer; }
.picker summary::-webkit-details-marker { display: none; }
.picker-pop { position: absolute; right: 0; top: 44px; z-index: 30; width: min(340px, 86vw); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s3); box-shadow: 0 12px 32px rgba(0,0,0,.14); display: grid; gap: var(--s2); }
.pick { display: flex; gap: var(--s3); align-items: center; text-align: left; border: 0; background: transparent; padding: var(--s2); border-radius: var(--r-ctl); cursor: pointer; font: inherit; width: 100%; }
.pick:hover { background: var(--soft); }
.pick-text { display: flex; flex-direction: column; }
.nam-msgs { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s2); }
.nam-msg { display: inline-flex; gap: var(--s1); align-items: center; font-size: var(--fs-sm); }
.nam-msg .ic { width: 15px; height: 15px; }
.nam-msg.err { color: var(--no); }
.nam-msg.warn { color: var(--warn); }
.nam-msg.ok { color: var(--ok); }

/* Panneau de droite (codes, rencontres du fil) */
.assistant { background: var(--paper); border-radius: var(--r-card); border: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.assist-fold { flex: 1; min-height: 0; }
.assist-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); font: inherit; color: inherit; }
#rencontres summary.assist-head { list-style: none; cursor: pointer; }
#rencontres summary.assist-head::-webkit-details-marker { display: none; }
#rencontres summary.assist-head::after { content: ""; width: 8px; height: 8px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
#rencontres details[open] > summary.assist-head::after { transform: rotate(-135deg) translateY(-1px); }
#rencontres .assist-title { flex: 1; min-width: 0; }
.assist-title { font-weight: 650; font-size: var(--fs-lg); }
.assist-total { font-family: var(--serif); font-size: var(--fs-xl); }
.assist-body { flex: 1; overflow-y: auto; padding: var(--s3) var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.bubble.ai { font-size: var(--fs-sm); color: var(--ink-2); padding: var(--s2) var(--s3); background: var(--warn-soft); border-radius: var(--r-ctl); }
.bubble.ai::before { content: "DocDac · "; font-weight: 650; }
.tasks { border: 1px solid var(--line); border-radius: var(--r-card); }
.tasks-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s3) var(--s2); }
.tasks-logo { width: 26px; height: 26px; border-radius: 7px; background: var(--plum-soft); color: var(--plum); font-family: var(--serif); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-sm); flex: none; }
.task-empty { padding: 0 var(--s3) var(--s3); }
.task { display: grid; grid-template-columns: 32px 1fr; gap: var(--s1); align-items: start; padding: var(--s1) var(--s2); border-top: 1px solid var(--soft); }
.check { width: 24px; height: 24px; margin-top: 10px; border-radius: 50%; border: 2px solid #b9b1ab; background: var(--paper); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: #fff; }
.check:hover { border-color: var(--green); }
.check.on { background: var(--green); border-color: var(--green); }
.check .ic { width: 14px; height: 14px; stroke-width: 3; }
.task details { min-width: 0; }
.task summary { list-style: none; display: grid; grid-template-columns: 1fr auto; gap: var(--s2); padding: var(--s2) var(--s1); cursor: pointer; }
.task summary::-webkit-details-marker { display: none; }
.task-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.task-title { font-size: var(--fs-md); line-height: 1.35; }
.task-meta { font-size: var(--fs-xs); color: var(--muted); }
.task-warn { font-size: var(--fs-xs); color: var(--warn); display: inline-flex; gap: var(--s1); align-items: center; font-weight: 600; }
.task-warn .ic { width: 14px; height: 14px; }
.task-amount { font-weight: 650; white-space: nowrap; }
.task.rejete { opacity: .5; }
.task.rejete .task-title { text-decoration: line-through; }
.chip { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 650; font-size: var(--fs-xs); background: var(--soft); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.detail { padding: 0 var(--s1) var(--s3); }
.detail table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-sm); }
.detail td { overflow-wrap: anywhere; }
.detail td.two input { min-width: 0; flex: 1 1 0; }
.detail th { text-align: left; font-weight: 500; color: var(--muted); width: 96px; padding: var(--s2) var(--s2) var(--s2) 0; vertical-align: top; }
.detail td { padding: var(--s1) 0; border-top: 1px solid var(--soft); }
.detail tr:first-child td, .detail tr:first-child th { border-top: 0; }
.detail input, .detail textarea { width: 100%; min-height: 40px; background: var(--soft); border-color: transparent; font-size: var(--fs-sm); }
.detail td.two { display: flex; align-items: center; gap: var(--s2); }
.detail input.short { width: 72px; }
.detail-actions { display: flex; gap: var(--s2); margin-top: var(--s3); align-items: center; }
.conf { font-size: var(--fs-xs); padding: 1px 8px; border-radius: 999px; margin-left: var(--s1); background: var(--soft); }
.conf.haute { background: var(--ok-soft); color: var(--ok); }
.conf.basse { background: var(--no-soft); color: var(--no); }
.add-code { margin: var(--s2) var(--s3) var(--s3); position: relative; }
.add-code > .ic { position: absolute; left: 12px; top: 13px; color: var(--muted); }
.add-code input { width: 100%; padding-left: 38px; border-style: dashed; }
.results { list-style: none; padding: 0; margin: var(--s2) 0 0; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; background: var(--paper); }
.results li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s2); align-items: start; padding: var(--s2) var(--s3); border-top: 1px solid var(--line); font-size: var(--fs-sm); cursor: pointer; }
.results li:first-child { border-top: 0; }
.results li:hover { background: var(--soft); }
.num { white-space: nowrap; font-weight: 600; }
.attested { color: var(--ok); font-weight: 650; display: flex; gap: var(--s2); align-items: center; }
.meds li { margin: var(--s1) 0; }
.verified, .unverified { display: flex; gap: var(--s1); align-items: center; font-size: var(--fs-sm); }
.verified { color: var(--ok); }
.unverified { color: var(--warn); }
.verified .ic, .unverified .ic { width: 15px; height: 15px; }

/* Compositeur de la rencontre (corrections) */
.composer-actions { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); }
.ghost-round { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); cursor: pointer; }
.ghost-round:hover { background: var(--soft); }
.ghost-round .ic { width: 22px; height: 22px; }

/* Fil du jour */
.doc.chat { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.messages { flex: 1; overflow-y: auto; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.msg { display: flex; gap: var(--s2); }
.msg.me { justify-content: flex-end; }
.bubble-me { background: #f1e9ed; border-radius: var(--r-card); padding: var(--s3) var(--s4); max-width: min(560px, 90%); }
.bubble-me .pre { margin-top: var(--s1); }
.msg-head { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-xs); color: var(--ink-2); font-weight: 650; }
.msg-head .ic { width: 15px; height: 15px; }
.thumb { display: block; max-width: 100%; max-height: 260px; border-radius: var(--r-ctl); margin-top: var(--s2); border: 1px solid var(--line); }
.bubble-me audio { width: 100%; margin-top: var(--s2); }
.msg.docdac { align-items: flex-start; }
.reply { flex: 1; border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s3) var(--s4); background: var(--paper); display: flex; flex-direction: column; gap: var(--s2); max-width: 720px; }
.reply-msg { color: var(--ink-2); font-size: var(--fs-sm); }
.reply-actions { display: flex; gap: var(--s2); }
.unassigned { border-top: 1px solid var(--soft); padding-top: var(--s3); display: grid; gap: var(--s2); }
.new-patient { display: flex; gap: var(--s2); flex-wrap: wrap; }
.new-patient input { flex: 1; min-width: 180px; }
.enc-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s3); align-items: center; padding: var(--s2); border-radius: var(--r-ctl); }
.enc-row:hover { background: var(--soft); }
.enc-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.enc-name { display: inline-flex; gap: var(--s1); align-items: center; font-weight: 650; }
.enc-name .ic { width: 15px; height: 15px; color: var(--ok); }
.enc-codes { display: flex; gap: var(--s1); flex-wrap: wrap; }
.enc-sub { font-size: var(--fs-xs); color: var(--muted); display: flex; gap: var(--s1); align-items: center; flex-wrap: wrap; }
.enc-total { font-weight: 650; white-space: nowrap; }
.enc-row.atteste .enc-total { color: var(--ok); }
.review-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: center; border-top: 1px solid var(--soft); }

/* Avatars et pastilles */
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--plum-soft); color: var(--plum); font-size: var(--fs-sm); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.avatar.small { width: 28px; height: 28px; font-size: var(--fs-xs); }
.avatar.tiny { width: 22px; height: 22px; font-size: var(--fs-xs); }
.avatar.big { width: 56px; height: 56px; font-size: var(--fs-xl); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #c9c1b9; flex: none; display: inline-block; }
.dot.a_reviser { background: #d9a43a; }
.dot.atteste { background: var(--ok); }

/* Patients */
.search-big { width: 100%; max-width: 640px; }
.plist { display: grid; gap: var(--s2); }
.prow { display: grid; grid-template-columns: auto 1fr auto auto; gap: var(--s3); align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s3) var(--s4); }
.prow:hover { border-color: #cfc7bf; }
.prow-main { display: flex; flex-direction: column; gap: 2px; }
.prow-main .small { color: var(--muted); }
.dup-badge { display: inline-flex; gap: var(--s1); align-items: center; font-size: var(--fs-xs); color: var(--warn); background: var(--warn-soft); padding: 2px 10px; border-radius: 999px; font-weight: 600; }
.dup-badge .ic { width: 14px; height: 14px; }
.patient-head { display: flex; gap: var(--s4); align-items: center; }
.ph-fields { flex: 1; display: grid; gap: var(--s2); }
.ph-name { font-family: var(--serif); font-size: var(--fs-2xl); border: 0; background: transparent; width: 100%; padding: 0; min-height: 0; }
.ph-name:focus { outline: none; }
.meta { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.dups { background: var(--warn-soft); border-color: #ecd9a6; display: grid; gap: var(--s2); }
.dups h3 { display: flex; gap: var(--s2); align-items: center; }
.dup { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s3); align-items: center; padding: var(--s2) 0; border-top: 1px solid rgba(0,0,0,.06); }
.timeline { display: grid; gap: var(--s2); }
.tl-item { display: grid; grid-template-columns: 160px 1fr auto; gap: var(--s4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s3) var(--s4); align-items: start; }
.tl-item:hover { border-color: #cfc7bf; }
.tl-date { display: flex; flex-direction: column; gap: 2px; }
.sess-sub { font-size: var(--fs-xs); color: var(--muted); display: flex; gap: var(--s1); align-items: center; }
.tl-body p { margin-top: var(--s1); }

/* Semaine, À valider */
.week { display: grid; gap: var(--s3); }
.week-day { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s3) var(--s4); }
.week-day.quiet { background: transparent; border-style: dashed; }
.week-day header { display: flex; justify-content: space-between; align-items: baseline; }
.week-day h3 { text-transform: capitalize; }
.week-day.quiet h3 { font-weight: 500; color: var(--muted); }
.week-patient { display: grid; grid-template-columns: auto minmax(140px, 220px) 1fr auto; gap: var(--s3); align-items: center; padding: var(--s2) 0; border-top: 1px solid var(--soft); margin-top: var(--s2); }
.wp-codes { display: flex; flex-wrap: wrap; gap: var(--s1); }
.wp-total { font-weight: 650; }

/* Réglages */
.settings { display: grid; gap: var(--s4); max-width: 520px; }
.settings label { display: grid; gap: var(--s1); color: var(--ink-2); font-weight: 600; font-size: var(--fs-sm); min-width: 0; }
.settings input, .settings select { width: 100%; min-width: 0; }
.config { display: grid; gap: var(--s2); padding-left: 20px; margin: 0; }

/* ---------- Composeur façon WhatsApp ----------
   Une bulle de saisie (trombone, texte) et un bouton rond : micro quand c'est vide, flèche dès qu'on écrit.
   Pendant la dictée, la bulle montre le minuteur et le bouton rond devient un carré d'arrêt rouge. */
.wa-composer { display: flex; align-items: flex-end; gap: var(--s2); padding: var(--s2) var(--s3); background: var(--wa-bar); border-top: 1px solid var(--line); }
.wa-pill { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: var(--s1); background: var(--paper); border-radius: 24px; padding: 4px 6px 4px 6px; min-height: 48px; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.wa-pill textarea, .wa-pill input { flex: 1; min-width: 0; border: 0; background: transparent; resize: none; font-size: var(--fs-md); line-height: 1.4; padding: 9px 8px; min-height: 40px; max-height: 160px; }
.wa-pill textarea:focus, .wa-pill input:focus { outline: none; }
.wa-pill .avatar.tiny { margin: 9px 2px 9px 6px; }
.wa-clip { width: 40px; height: 40px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; }
.wa-clip:hover { background: var(--soft); color: var(--ink-2); }
.wa-clip .ic { width: 22px; height: 22px; }
.wa-btn { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 0; background: var(--green); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.wa-btn:hover { filter: brightness(.95); }
.wa-btn .ic { width: 22px; height: 22px; }
.wa-send .ic { transform: translateX(-1px); }
.wa-composer .wa-send { display: none; }
.wa-composer.has-text .wa-send { display: inline-flex; }
.wa-composer.has-text .wa-mic { display: none; }
.wa-mic .ic-stop { display: none; }
.wa-composer.recording .wa-mic .ic-mic { display: none; }
.wa-composer.recording .wa-mic .ic-stop { display: block; fill: currentColor; stroke: none; }
.wa-composer .record.on .ic { animation: none; }
.wa-rec { display: none; align-items: center; gap: var(--s2); padding: 0 var(--s2); min-height: 40px; color: var(--ink-2); font-size: var(--fs-sm); }
.wa-rec .rec-label { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--no); animation: pulse 1s infinite; }
.wa-composer.recording .wa-rec { display: flex; }
.wa-composer.recording textarea, .wa-composer.recording .wa-clip { display: none; }
.wa-hint { flex-basis: 100%; margin: 0; font-size: var(--fs-xs); color: var(--muted); padding-left: var(--s3); }
.composer.wa-composer { flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--r-card); }
.doc.chat .wa-composer { border-radius: 0 0 var(--r-card) var(--r-card); }

/* Barre de facturation en haut du fil */
.bill-bar { display: flex; align-items: center; gap: var(--s3); margin: var(--s3); padding: var(--s3) var(--s4); background: var(--plum); color: #fff; border-radius: var(--r-card); }
.bill-bar:hover { filter: brightness(1.08); }
.bill-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.14); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.bill-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.bill-text strong { font-size: var(--fs-lg); }
.bill-text span { font-size: var(--fs-sm); opacity: .85; }
.bill-go { display: inline-flex; align-items: center; gap: var(--s1); font-weight: 650; font-size: var(--fs-sm); white-space: nowrap; }

/* Onglets segmentés (Facturation : À traiter / Semaine) */
.segmented { display: inline-flex; gap: var(--s1); padding: var(--s1); background: var(--soft); border-radius: 12px; margin: var(--s5) 0 var(--s4); }
.segmented a { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s4); border-radius: 9px; font-weight: 650; color: var(--ink-2); }
.segmented a.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.seg-badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--green); color: #fff; font-size: var(--fs-xs); display: inline-flex; align-items: center; justify-content: center; }
.week-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); flex-wrap: wrap; }

/* ---------- Tablette et téléphone : barre du bas, une colonne ---------- */
@media (max-width: 1099px) {
  body { display: block; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
  .sidebar { display: none; }
  .bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--paper); border-top: 1px solid var(--line); }
  /* Barre du bas façon WhatsApp : pastille verte derrière l'icône active, pastilles de compte vertes. */
  .bottom-nav { background: var(--wa-bar); }
  .bottom-nav .nav-item { flex-direction: column; justify-content: center; gap: 4px; min-height: var(--nav-h); padding: 0; border-radius: 0; font-size: var(--fs-xs); color: var(--ink-2); background: transparent; }
  .bottom-nav .nav-item .ic { width: 56px; height: 30px; padding: 4px 17px; border-radius: 15px; box-sizing: border-box; }
  .bottom-nav .nav-item.on { background: transparent; color: var(--ink); font-weight: 700; }
  .bottom-nav .nav-item.on .ic { background: var(--green-soft); color: #1d6b33; }
  .bottom-nav .nav-badge { position: absolute; top: 4px; left: calc(50% + 8px); margin: 0; min-width: 20px; height: 20px; background: var(--green); }
  .rencontre .wa-composer { position: static; }
  .composer.wa-composer { margin-bottom: var(--s3); }
  .doc.chat .wa-composer { position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); z-index: 20; border-radius: 0; margin: 0 calc(-1 * var(--s3)); }
  .page { padding: var(--s5) var(--s4) var(--s6); }
  .session { height: auto; min-height: 0; padding: var(--s3); }
  #body, #fil-body { flex: none; }
  .rencontre { height: auto; }
  .workspace { grid-template-columns: 1fr; height: auto; }
  .doc { overflow: visible; padding: var(--s4); max-width: 100%; }
  .session, .rencontre, .workspace, .assistant, .topbar, .tabs, .top-actions { min-width: 0; max-width: 100%; }
  .assist-body { overflow: visible; }
  .doc.chat { overflow: visible; }
  .messages { overflow: visible; padding: var(--s3); }
  .session .tab-row { display: flex; flex: 1 1 100%; gap: var(--s2); min-width: 0; overflow-x: auto; }
  .session .tab-row .tab { flex: 1 0 auto; justify-content: center; white-space: nowrap; }
  /* Une partie à la fois, sur toute la hauteur restante. */
  body:has(.rencontre) { height: 100dvh; overflow: hidden; padding-bottom: 0; }
  .session:has(.rencontre) { height: calc(100dvh - var(--nav-h) - env(safe-area-inset-bottom)); overflow: hidden; }
  .session:has(.rencontre) #body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .session:has(.rencontre) .rencontre { flex: 1; min-height: 0; height: 100%; overflow: hidden; }
  .session:has(.rencontre) .workspace { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: auto; }
  .session:has(.rencontre) .doc,
  .session:has(.rencontre) .assistant.on { flex: 1 0 auto; min-height: 100%; }
  .rencontre .assistant { display: none; }
  .rencontre .assistant.on { display: flex; }
  .rencontre:has(.assistant.on) .doc { display: none; }
  .steps { position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); z-index: 20; order: 99; flex-direction: column; align-items: stretch; box-shadow: 0 -6px 20px rgba(0,0,0,.06); }
  .session:has(.rencontre) .steps { position: static; flex: none; }
  .steps { gap: var(--s2); padding: var(--s2) var(--s3); }
  .step-list { gap: var(--s3); justify-content: space-between; flex-wrap: nowrap; }
  .next-action .btn { width: 100%; }
  .stats { grid-template-columns: 1fr 1fr; }
  .context-form .field input { width: 200px; }
  /* Fil : les rencontres se replient en haut, le message reste collé au clavier. */
  body:has(#fil-body) { height: 100dvh; overflow: hidden; padding-bottom: 0; }
  .session:has(#fil-body) { height: calc(100dvh - var(--nav-h) - env(safe-area-inset-bottom)); overflow: hidden; }
  #fil-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  #fil-body .workspace { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; }
  #rencontres { flex: none; max-height: 46%; }
  #rencontres details:not([open]) > .assist-body { display: none !important; }
  #rencontres details[open] .assist-body { overflow-y: auto; max-height: 280px; }
  #fil-body .doc.chat { flex: 1; min-height: 0; overflow: hidden; }
  #fil-body .messages { flex: 1; min-height: 0; overflow-y: auto; }
  #fil-body .doc.chat .wa-composer { position: static; margin: 0; border-radius: 0 0 var(--r-card) var(--r-card); }
}

@media (max-width: 640px) {
  h1 { font-size: var(--fs-xl); }
  .stats { grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .stats > :last-child { grid-column: 1 / -1; }
  .stat { padding: var(--s3); }
  .stat-value { font-size: var(--fs-xl); }
  .todo { grid-template-columns: auto 1fr; }
  .todo > form, .todo > .btn { grid-column: 1 / -1; }
  .todo .btn { width: 100%; }
  .page-head .btn { width: 100%; }
  .topbar { flex-direction: column; align-items: stretch; }
  .top-actions { flex-wrap: wrap; }
  .top-actions .field { flex: 1 1 8.5rem; min-width: 0; }
  .top-actions .field input { width: 100%; min-width: 0; max-width: 100%; }
  .session .tabs > * { flex: 0 1 auto; min-width: 0; justify-content: flex-start; }
  .session .tabs > .patient-chip { flex: 1 1 100%; order: -1; }
  .session .tabs > .tab-row { flex: 1 1 100%; min-width: 0; gap: 4px; }
  .session .tab-row .tab { flex: 1 1 0; min-width: 0; padding: 0 8px; gap: 4px; }
  .session .tab-row > a.tab { position: relative; flex: 0 0 36px; padding: 0; }
  .session .tab-row > a.tab span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .step-num { width: 24px; height: 24px; font-size: var(--fs-xs); }
  .patient-chip input { width: 100%; }
  .tabs > * { flex: 1 1 auto; justify-content: center; }
  .tabs > .top-pair { flex: 1 1 100%; justify-content: flex-start; }
  .tabs > .del-form { flex: 0 0 auto; }
  .top-pair .context-form { width: auto; }
  .context-form, .context-form .field, .context-form .field input { width: 100%; }
  .prow { grid-template-columns: auto 1fr; }
  .prow > :nth-child(n+3) { grid-column: 2; }
  .tl-item { grid-template-columns: 1fr auto; }
  .tl-body { grid-column: 1 / -1; }
  .week-patient { grid-template-columns: auto 1fr auto; row-gap: var(--s1); }
  .wp-total { grid-column: 3; grid-row: 1; }
  .review-row { grid-template-columns: 1fr; gap: 0; padding-bottom: var(--s2); }
  .review-row > :not(.enc-row) { justify-self: end; }
  .wp-codes { grid-column: 2 / -1; grid-row: 2; }
  .step-text span { display: none; }
  .detail table, .detail tbody, .detail tr, .detail th, .detail td { display: block; width: auto; }
  .detail th { padding: var(--s2) 0 var(--s1); border-top: 1px solid var(--soft); }
  .detail td { border-top: 0; padding-top: 0; }
  .detail td.two { display: flex; }
  .doc { padding: var(--s3); }
  .patient-head > .avatar { display: none; }
  .ph-fields .meta .field { flex: 1 1 100%; }
  .ph-fields .meta .field input { flex: 1; min-width: 0; }
}

/* Choix de la langue, collé au bas de la barre latérale. */
.lang-switch { margin-top: auto; display: flex; gap: var(--s1); padding: var(--s1); background: var(--soft); border-radius: var(--r-ctl); }
.lang-switch button { flex: 1; min-height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.lang-switch button.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* ---------- Mouvement ----------
   Court, sans rebond. Les sondages de 2 s (#body, #fil-body) ne sont pas animés :
   seul un message nouveau reçoit .arrive, et seule une navigation hx-boost demande une transition. */
@media (prefers-reduced-motion: no-preference) {
  .btn, .nav-item, .enc-row, .thread, .prow, .tl-item, .week-patient, .segmented a, .tab, .pick {
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease, transform 120ms ease;
  }
  .btn:active:not(:disabled),
  .nav-item:active,
  .enc-row:active,
  .thread:active,
  .prow:active,
  .tl-item:active,
  .week-patient:active,
  .pick:active {
    transform: scale(0.98);
  }
  .picker-pop { transform-origin: top right; animation: pop-in 180ms ease; }
  @keyframes pop-in {
    from { opacity: 0; transform: translateY(4px) scale(0.98); }
    to { opacity: 1; transform: none; }
  }
  .msg.arrive { animation: arrive 180ms ease; }
  @keyframes arrive {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 180ms;
    animation-timing-function: ease;
  }
}

/* Ordinateur : le titre d'une liste reste en place jusqu'à la fin de sa liste,
   puis la section suivante prend sa place. Le téléphone et le fil ne s'en mêlent pas. */
@media (min-width: 1100px) {
  .page > .section > h2,
  .page > .section > .section-head,
  .page > h2.section-title {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg);
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--line);
  }
  .week-day:not(.quiet) > header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--paper);
    padding-bottom: var(--s2);
    border-bottom: 1px solid var(--line);
  }
  .search-stick {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg);
    padding: var(--s3) 0;
  }
}
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .main { scroll-snap-type: y proximity; }
  /* Le titre et les chiffres restent un endroit où s'arrêter. Sinon le premier
     titre de liste, juste en dessous, aspire la page et les masque. */
  .page > .page-head,
  .page > .stats {
    scroll-snap-align: start;
    scroll-margin-top: var(--s6);
  }
  .page > .section,
  .week-day:not(.quiet),
  .page > .dups,
  .page > h2.section-title {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .page > .section { scroll-snap-stop: normal; }
}

/* [hidden] doit gagner sur display: flex/grid des boutons et des listes. */
[hidden] { display: none !important; }
#install { display: grid; gap: var(--s3); align-items: start; max-width: 520px; }