/* REMSIM — habillage « BIOTRONIK Home Monitoring Service Center ».
   Reconstitution visuelle à but pédagogique : mise en page, trames et
   proportions calquées sur le portail, sans reprise d'aucun fichier
   graphique du site d'origine (le logo est un rendu typographique). */

body.bt-bg { background: #c6d3ec; }

.bt-page {
  --bt-blue:   #0a5ca9;
  --bt-dark:   #16456f;
  --bt-line:   #a9c0d8;
  --bt-line2:  #c8d6e4;
  --bt-soft:   #dce9f5;
  --bt-soft2:  #eef5fb;
  /* Jaune d'alerte du portail : bandeau de statut et ligne de résultat non
     confirmé. Approché sur captures du portail réel — une seule famille de
     tons pour les deux, comme sur le site. */
  --bt-warn:   #fdedb0;
  --bt-warn2:  #f8dc82;
  --bt-warn-b: #dcb63f;
  --bt-bad:    #fbe0dc;
  --bt-bad2:   #f4c8c2;
  --bt-bad-b:  #c0392b;
  --bt-link:   #16548c;
  width: 906px; margin: 0 auto 30px;
  background: #fff;
  border: 1px solid #93aecb;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px; color: #1c1c1c; line-height: 1.35;
}

.bt-page a { color: var(--bt-link); }

/* ---------------- en-tête ---------------- */
.bt-hdr {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  height: 34px; padding: 0 12px;
  background:
    radial-gradient(120px 60px at 62% 130%, rgba(120,170,215,.20), transparent 70%),
    radial-gradient(150px 70px at 84% -20%, rgba(120,170,215,.18), transparent 70%),
    linear-gradient(#ffffff 0%, #eaf2f9 55%, #dae8f4 100%);
  border-bottom: 1px solid #9db8d2;
}
.bt-brand { display: flex; align-items: center; gap: 5px; }
.bt-brand-logo { height: 21px; width: auto; display: block; }
.bt-hdr-sys { color: var(--bt-dark); font-size: 11.5px; }
.bt-help {
  margin-left: auto; width: 17px; height: 17px; border-radius: 50%;
  background: linear-gradient(#f7fafd, #d3e2f0); border: 1px solid #8fadc9;
  color: var(--bt-blue); font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; cursor: help;
}

/* ---------------- corps ---------------- */
.bt-body { display: flex; align-items: stretch; min-height: 560px; }

.bt-side {
  width: 132px; flex: 0 0 132px;
  border-right: 1px solid var(--bt-line);
  background: #f7fafd;
  padding: 8px 0 14px; display: flex; flex-direction: column;
}
.bt-side-h {
  font-weight: 700; color: var(--bt-dark); font-size: 11px;
  padding: 3px 8px; margin-bottom: 4px;
  background: var(--bt-soft); border-top: 1px solid var(--bt-line); border-bottom: 1px solid var(--bt-line);
}
.bt-side-a {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px; text-decoration: none; font-size: 11px;
}
.bt-side-a:hover { text-decoration: underline; }
.bt-side-ico {
  width: 12px; height: 12px; flex: 0 0 12px; border-radius: 50%;
  background: linear-gradient(#eaf3fb, #b9d2e8); border: 1px solid #7fa3c4;
}
.bt-side-a.bt-dis { color: #9aa9b6; cursor: default; }
.bt-side-a.bt-dis:hover { text-decoration: none; }
.bt-side-a.bt-dis .bt-side-ico { background: #e8ecef; border-color: #c0c8d0; }
.bt-side-top { margin-top: auto; padding: 10px 8px 0; }

.bt-main { flex: 1; min-width: 0; padding: 10px 12px 16px; }

/* titre */
.bt-title-row { display: flex; align-items: flex-start; }
.bt-title { margin: 0; font-size: 17px; font-weight: 700; color: #1a3d66; letter-spacing: .01em; }
.bt-subtitle { color: #555; font-size: 10.5px; margin-top: 1px; }
.bt-pdf { margin-left: auto; display: flex; align-items: center; gap: 4px; cursor: not-allowed; opacity: .75; }
.bt-pdf-ico {
  width: 15px; height: 15px; border-radius: 2px;
  background: linear-gradient(#fdfdfd, #e4e4e4); border: 1px solid #b9b9b9;
  position: relative;
}
.bt-pdf-ico::after {
  content: ''; position: absolute; right: -1px; bottom: -1px;
  width: 9px; height: 9px; border-radius: 50%; background: #c0392b;
}
.bt-pdf-txt { color: var(--bt-link); font-size: 10.5px; }

/* bandeau de statut */
.bt-statusbar {
  display: flex; align-items: stretch;
  margin-top: 8px; border: 1px solid var(--bt-line); background: #fff;
}
.bt-statusbar-l {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 1px 7px; font-weight: 700; font-size: 12px; color: #1a3d66; line-height: 1.25;
}
.bt-statusbar-r {
  flex: 0 0 auto; text-align: right; padding: 2px 7px;
  border-left: 1px solid var(--bt-line); font-weight: 700; color: #1a3d66; font-size: 10.5px; line-height: 1.2;
}
.bt-statusbar-r .bt-small { font-weight: 400; color: #4a5c6b; font-size: 9.5px; }
/* Pictogrammes d'origine du portail (assets/img/bio-alert-*.gif,
   bio-message.gif). Ils ont remplacé les pastilles dessinées en CSS :
   l'apprenant doit reconnaître à l'écran l'icône qu'il verra en vrai. */
.bt-icon { display: block; flex: 0 0 auto; image-rendering: auto; }

.bt-ico-warn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 3px; flex: 0 0 16px;
  background: linear-gradient(#ffe066, #f2c200); border: 1px solid #cba300;
  color: #4a3800; font-weight: 700; font-size: 11px;
}
.bt-ico-info {
  background: linear-gradient(#f2f6fa, #dbe6f0); border: 1px solid #a9bccf; color: #4a5c6b;
}
.bt-ico-alert {
  background: linear-gradient(#e0574a, #c0392b); border: 1px solid #962e20; color: #fff;
}

/* Bandeau de statut JAUNE : le portail teinte la partie gauche (l'intitulé
   daté) et laisse le bloc prothèse/NS en blanc à droite — vérifié sur
   captures du portail réel (19/08/2026). C'est le signal principal de la
   page : en blanc, il passait inaperçu. */
.bt-statusbar-warn .bt-statusbar-l {
  background: linear-gradient(var(--bt-warn), var(--bt-warn2));
  border-right: 1px solid var(--bt-warn-b);
}

/* bandeau de statut critique : le portail passe toute la barre en rouge,
   pas seulement une petite pastille (alerte jaune ordinaire) */
.bt-statusbar-danger { background: linear-gradient(#e2493c, #c0392b); border-color: #962e20; }
.bt-statusbar-danger .bt-statusbar-l,
.bt-statusbar-danger .bt-statusbar-r { color: #fff; }
.bt-statusbar-danger .bt-ico-alert { background: #fff; color: #c0392b; border-color: #fff; }
.bt-statusbar-danger .bt-statusbar-r { border-left-color: rgba(255,255,255,.4); }
/* La bille rouge du portail disparaîtrait sur une barre rouge : on la pose
   sur un disque blanc, comme le faisait la pastille CSS qu'elle remplace. */
.bt-statusbar-danger .bt-icon {
  background: #fff; border-radius: 50%; box-shadow: 0 0 0 2px #fff;
}

/* pastille colorée sur un onglet portant un résultat non consulté */
.bt-tab-dot-red { background: radial-gradient(circle at 35% 32%, #fff 0 18%, #c0392b 22% 100%); border-color: #962e20; }
.bt-tab-dot-yellow { background: radial-gradient(circle at 35% 32%, #fff 0 18%, #f2c200 22% 100%); border-color: #cba300; }

/* ---------------- onglets ---------------- */
.bt-tabs {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px;
  margin-top: 8px; border-bottom: 1px solid var(--bt-line);
}
.bt-qc-toplink {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 0 4px 4px; text-decoration: none; color: var(--bt-link);
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.bt-qc-toplink-ico {
  width: 13px; height: 13px; border-radius: 50%; flex: 0 0 13px;
  border: 1.5px solid #8a9aa8; color: #8a9aa8;
  display: flex; align-items: center; justify-content: center; font-size: 9px;
}
.bt-tab {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px 0; text-decoration: none; color: var(--bt-dark); font-size: 10.5px;
  background: linear-gradient(#f6fafd, #dce9f5);
  border: 1px solid var(--bt-line); border-bottom: none;
  border-radius: 4px 4px 0 0; position: relative; top: 1px;
}
.bt-tab:hover { background: linear-gradient(#ffffff, #e6f0f9); text-decoration: none; }
.bt-tab-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
  background: radial-gradient(circle at 35% 32%, #fff 0 22%, #cfe0ee 24% 100%);
  border: 1px solid #93aecb;
}
.bt-tab-on { background: #fff; font-weight: 700; padding-bottom: 1px; }
.bt-tab-on .bt-tab-dot { background: radial-gradient(circle at 35% 32%, #fff 0 18%, var(--bt-blue) 22% 100%); }

.bt-lowtabs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1px;
  padding: 4px 6px; border: 1px solid var(--bt-line); border-top: none;
  background: #f4f9fd;
}
.bt-lowtab {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 6px; text-decoration: none; color: var(--bt-dark); font-size: 10.5px;
}
.bt-lowtab:hover { text-decoration: underline; }
.bt-lowtab-on { font-weight: 700; }
.bt-lowtab-on .bt-tab-dot { background: radial-gradient(circle at 35% 32%, #fff 0 18%, var(--bt-blue) 22% 100%); }
.bt-lowsep { color: #b9cbdd; padding: 0 1px; }

.bt-content { padding-top: 8px; }
.bt-flow > * { margin-bottom: 8px; }

/* ---------------- panneaux ---------------- */
.bt-panel { border: 1px solid var(--bt-line); background: #fff; }
.bt-panel-h {
  background: var(--bt-soft); color: var(--bt-dark); font-weight: 700; font-size: 11px;
  padding: 1px 6px; border-bottom: 1px solid var(--bt-line);
}
.bt-panel-h-flex { display: flex; align-items: center; }
.bt-unit-link { margin-left: auto; font-weight: 400; }
.bt-unit-on { font-weight: 700; color: #b34700; }

.bt-remark { padding: 1px 5px; font-size: 10px; line-height: 1.3; color: #111; }

.bt-tbl { width: 100%; border-collapse: collapse; }
.bt-tbl td, .bt-tbl th { padding: 1px 5px; vertical-align: top; text-align: left; font-size: 10px; line-height: 1.3; }
.bt-tbl tbody tr + tr td { border-top: 1px solid #e9eff5; }
.bt-tbl th { font-weight: 700; color: var(--bt-dark); border-bottom: 1px solid var(--bt-line); }
.bt-c0 { color: #222; width: var(--c0w, 74%); }
.bt-cn { color: #111; text-align: right; white-space: nowrap; }

/* Le portail centre la colonne des valeurs sur tous les onglets sauf
   Moniteur IC, Options et Profil du patient — voir LEFT_ALIGNED dans
   render-biotronik.js. La jauge de pile garde son alignement à gauche :
   c'est une barre, pas une valeur. */
.bt-center .bt-cn,
.bt-center .bt-stat-v,
.bt-center .bt-stat th.bt-stat-v { text-align: center; }
.bt-center .bt-gauge-cell { text-align: left; }
.bt-tbl-grid td, .bt-tbl-grid th { border: 1px solid var(--bt-line2); text-align: left; }
/* Colonne de niveau d'un masque d'options : pictogrammes du portail
   (bille jaune/rouge, « + », enveloppe) au lieu de « JAUNE + notification ».
   Pas de `display: flex` sur un `td` — la cellule cesserait d'être une
   cellule de tableau et la colonne perdrait son alignement. */
.bt-lvl { width: 58px; white-space: nowrap; text-align: left; }
.bt-lvl .bt-icon { display: inline-block; vertical-align: middle; }
.bt-lvl-plus { display: inline-block; vertical-align: middle; margin: 0 2px; color: #33506a; }
.bt-tbl-grid tbody tr:nth-child(even) { background: #f6fafd; }
.bt-tbl-grid tbody tr:hover { background: #e9f2fa; }

/* jauge de pile — la ligne lui cède de la largeur, sans quoi les
   repères EOS/ERI/50 %/BOS se chevauchent */
.bt-gauge-row .bt-c0 { width: 26%; }
.bt-gauge-cell { text-align: left; white-space: nowrap; }
.bt-gauge-val { display: inline-block; min-width: 62px; }
/* Largeur fixe : dans une cellule de tableau en largeur automatique, une
   largeur en pourcentage se résout de façon circulaire et retombe sur la
   largeur minimale — la jauge se tassait à 150 px au lieu de ~250. */
.bt-gauge {
  position: relative; display: inline-block; vertical-align: middle;
  width: 248px; max-width: 100%; height: 13px;
  border: 1px solid #8fa8bf; background: #e4ecf3; overflow: hidden;
}
.bt-gauge-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#dcebf7, #c3daed); }
.bt-gauge-tick {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: 9px; color: #33506a; line-height: 12px;
}

.bt-bullets { padding: 4px 7px; }
.bt-bullet { display: flex; align-items: baseline; gap: 5px; }
.bt-bullet-muted { color: #7a8a99; font-style: italic; }
.bt-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
  background: radial-gradient(circle at 35% 32%, #fff 0 20%, #cfe0ee 22% 100%);
  border: 1px solid #93aecb;
}

.bt-note {
  border: 1px solid #cfe0ee; border-left: 3px solid var(--bt-blue);
  background: #f6fafd; padding: 5px 8px; color: #33506a; font-size: 10.5px;
}

/* ---------------- deux colonnes ---------------- */
.bt-2col { display: flex; gap: 8px; align-items: flex-start; }
.bt-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
/* Répartition par défaut du haut du Quick View sur le portail (~1,6 : 1).
   Les blocs qui s'en écartent déclarent leur propre `split` dans le cas. */
.bt-2col > .bt-col:first-child { flex: 1.62 1 0; }

/* ---------------- groupes repliables ---------------- */
.bt-group { border: 1px solid var(--bt-line); }
.bt-group-h {
  display: flex; align-items: center; gap: 6px;
  background: var(--bt-soft); color: var(--bt-dark); font-weight: 700;
  padding: 3px 7px; cursor: pointer; user-select: none; font-size: 11px;
}
.bt-group-h:hover { background: #d2e3f2; }
.bt-caret { font-size: 9px; }
.bt-group-body { padding: 6px; }
.bt-collapsed .bt-group-body { display: none; }

.bt-qv-head { display: flex; gap: 16px; padding: 1px 1px 8px; }
.bt-qv-col { flex: 1 1 0; min-width: 0; }
.bt-qv-k { color: #333; }

/* Remote Scheduling */
.bt-sched-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bt-sched-date { display: inline-flex; align-items: center; gap: 3px; color: var(--bt-link); }
.bt-cal-ico {
  width: 12px; height: 12px; flex: 0 0 12px; border-radius: 1px;
  background: linear-gradient(#fff 0 34%, #e8f0f8 34% 100%);
  border: 1px solid #7fa3c4; box-shadow: inset 0 2px 0 #d94f4f;
}
.bt-btn, .bt-sched-btn, .bt-debrief-btn, .bt-navbtn, .bt-epbtn, .bt-apply {
  font: inherit; font-size: 11px; cursor: pointer;
  border: 1px solid #8fadc9; background: linear-gradient(#ffffff, #dfeaf5);
  color: var(--bt-dark); border-radius: 3px; padding: 2px 8px;
}
.bt-btn:hover, .bt-sched-btn:hover,
.bt-debrief-btn:hover, .bt-epbtn:hover, .bt-apply:hover { background: linear-gradient(#ffffff, #cfe2f2); }
.bt-sched-btn { margin-left: auto; font-weight: 700; }
.bt-sched-det { margin-top: 8px; display: grid; gap: 6px; }

/* ---------------- bandeau d'événements ---------------- */
.bt-events { border: 1px solid var(--bt-line); }
.bt-ev-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #fff; }
.bt-ev-row + .bt-ev-row { border-top: 1px solid #e9eff5; }
.bt-ev-icon { flex: 0 0 17px; display: flex; align-items: center; }
.bt-ev-lab { flex: 0 0 128px; color: var(--bt-dark); font-weight: 700; }
.bt-ev-txt { flex: 1 1 auto; min-width: 0; color: #222; }
.bt-ev-thumb { flex: 0 0 56px; }
.bt-ev-right { flex: 0 0 96px; color: #333; }

/* Résultat non confirmé : le portail teinte TOUTE la ligne, jaune ou rouge
   selon le niveau, et borde le bloc de la même couleur. C'est le signal le
   plus visible de la page — le reproduire en blanc le faisait disparaître. */
.bt-ev-warn {
  background: linear-gradient(var(--bt-warn), var(--bt-warn2));
  box-shadow: inset 3px 0 0 var(--bt-warn-b);
}
.bt-ev-alert {
  background: linear-gradient(var(--bt-bad), var(--bt-bad2));
  box-shadow: inset 3px 0 0 var(--bt-bad-b);
}
.bt-ev-warn + .bt-ev-row, .bt-ev-alert + .bt-ev-row { border-top-color: #dfe7ee; }

/* Bouton « Confirmation » du portail, au bout d'une ligne non confirmée. */
.bt-confirm {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  font: inherit; font-size: 10.5px; font-weight: 700; color: var(--bt-dark);
  padding: 2px 8px; border: 1px solid #8fadc9; border-radius: 3px;
  background: linear-gradient(#ffffff, #dfeaf5); cursor: not-allowed;
}
.bt-confirm-tick { color: #2e7d32; font-size: 11px; }
.bt-thumb {
  display: block; width: 52px; height: 20px;
  border: 1px solid #8fadc9; background: #fff; border-radius: 2px;
}
.bt-thumb:hover { border-color: var(--bt-blue); }
.bt-egm-glyph { width: 100%; height: 100%; display: block; object-fit: contain; }

/* ---------------- histogramme ---------------- */
.bt-bars-wrap { display: flex; gap: 8px; padding: 6px; align-items: stretch; }
.bt-bars { flex: 1 1 auto; display: flex; gap: 3px; min-width: 0; }
.bt-bars-ax { width: 24px; flex: 0 0 24px; position: relative; font-size: 9px; color: #555;
              border-right: 1px solid #cfdbe6; height: 96px; }
.bt-bars-ax span { position: absolute; right: 3px; }
.bt-bars-ax span:first-child { top: 0; }
.bt-bars-pct { top: 9px !important; }
.bt-bars-zero { bottom: 15px; }
.bt-bars-plot { flex: 1 1 auto; display: flex; align-items: flex-end; gap: 5px; height: 96px; }
.bt-bar-col { flex: 1 1 0; display: flex; flex-direction: column; height: 100%; }
.bt-bar-stack { flex: 1 1 auto; position: relative; display: flex; flex-direction: column;
                justify-content: flex-end; border-bottom: 1px solid #8fa8bf; }
.bt-bar-fill { background: linear-gradient(#5a9fdc, #2f7fd0); position: relative; }
.bt-bar-num-in { position: absolute; top: 2px; left: 0; right: 0; text-align: center;
                 color: #fff; font-size: 9px; font-weight: 700; }
.bt-bar-num-out { position: absolute; bottom: 1px; left: 0; right: 0; text-align: center;
                  color: #666; font-size: 9px; }
.bt-bar-lab { font-size: 9px; color: #444; text-align: center; padding-top: 2px; }
.bt-bars-foot { font-size: 9px; color: #666; padding: 0 6px 5px 36px; }
.bt-bars-side { flex: 0 0 118px; border: 1px solid var(--bt-line); align-self: flex-start; }

/* ---------------- tendances ---------------- */
.bt-trend { display: flex; align-items: stretch; gap: 5px; padding: 6px; }
.bt-trend-lab { flex: 0 0 70px; color: #333; font-size: 10px; }
.bt-trend-unit { flex: 0 0 30px; display: flex; flex-direction: column; justify-content: space-between;
                 font-size: 9px; color: #555; text-align: right; padding-bottom: 11px; }
.bt-trend-svg-holder { flex: 1 1 auto; min-width: 0; }
.bt-trend-svg { width: 100%; height: 58px; display: block; }
.bt-trend-leg { flex: 0 0 50px; display: flex; flex-direction: column; gap: 3px; font-size: 9.5px; color: #333; }
.bt-leg-item { display: flex; align-items: center; gap: 4px; }
.bt-leg-dash { width: 12px; height: 2px; display: inline-block; }

/* ---------------- pages de courbes du Statut ---------------- */
.bt-devmsg {
  border: 1px solid var(--bt-line); background: #fff;
  padding: 3px 8px; color: #1a3d66; font-weight: 700;
}
.bt-timescale {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--bt-line); background: #f4f9fd; padding: 3px 8px;
}
.bt-ts-lab { font-weight: 700; color: var(--bt-dark); }

/* tableau de statistiques des sous-onglets du Statut */
.bt-stat { width: 100%; border-collapse: collapse; }
.bt-stat th {
  background: var(--bt-soft); color: var(--bt-dark); font-weight: 700; font-size: 10.5px;
  padding: 3px 6px; border: 1px solid var(--bt-line); text-align: left; vertical-align: bottom;
}
.bt-stat th.bt-stat-v { text-align: right; font-weight: 400; color: #33506a; }
.bt-stat td { padding: 2px 6px; border: 1px solid #e4ebf2; font-size: 10.5px; vertical-align: middle; }
.bt-stat-band {
  background: var(--bt-soft); color: var(--bt-dark); font-weight: 700;
  border: 1px solid var(--bt-line) !important;
}
.bt-stat-lab { color: #222; padding-left: 14px !important; }
.bt-stat-ico { width: 34px; text-align: center; }
.bt-stat-v { text-align: right; white-space: nowrap; width: 110px; }
.bt-stat-glyph {
  display: inline-block; width: 30px; height: 14px;
  border: 1px solid #8fadc9; background: #fff; border-radius: 2px; vertical-align: middle;
}
.bt-stat tbody tr:hover { background: #f2f7fc; }

/* panneau de courbe */
.bt-chart { padding: 8px 10px 4px; }
.bt-chart-t { text-align: center; font-weight: 700; color: #222; font-size: 12px; }
.bt-chart-st { text-align: center; color: #555; font-size: 9.5px; margin-top: 2px; }
.bt-chart-lg { text-align: center; margin: 4px 0 2px; }
.bt-chart-lgi { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; margin: 0 6px; }
.bt-chart-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.bt-chart-svg { width: 100%; height: 200px; display: block; }
.bt-chart-note { text-align: center; color: #666; font-size: 10px; margin-top: 3px; }

/* jauge de pile pleine largeur (page Statut > Prothèse) */
.bt-batt-wrap { margin: 14px 8% 0; background: #e8e8e8; border: 1px solid #999; height: 17px; }
.bt-batt { height: 100%; background: #3a3a3a; }
.bt-batt-marks { position: relative; height: 16px; margin: 3px 8% 8px; font-size: 10px; color: #333; }
.bt-batt-mark { position: absolute; transform: translateX(-50%); white-space: nowrap; }

/* ---------------- liste des enregistrements ---------------- */
.bt-rec-head {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 7px; border: 1px solid var(--bt-line); border-bottom: none; background: #f4f9fd;
}
.bt-rec-head-lab { font-weight: 700; color: var(--bt-dark); }
.bt-page-links { display: flex; gap: 6px; }
.bt-page-links a { text-decoration: underline; }
.bt-page-links .bt-pg-on { font-weight: 700; color: #333; text-decoration: none; }
.bt-pager { margin-left: auto; display: flex; align-items: center; gap: 3px; }
.bt-pgbtn {
  width: 17px; height: 15px; border: 1px solid #8fadc9; border-radius: 2px;
  background: linear-gradient(#ffffff, #dfeaf5); color: var(--bt-dark);
  font-size: 8px; line-height: 13px; text-align: center; cursor: pointer;
}
.bt-pgbtn:disabled { opacity: .4; cursor: default; }
.bt-pg-range { padding: 0 5px; }

.bt-rec-tbl { width: 100%; border-collapse: collapse; }
.bt-rec-tbl th {
  background: var(--bt-soft); color: var(--bt-dark); font-weight: 700; font-size: 10.5px;
  text-align: left; padding: 3px 6px; border: 1px solid var(--bt-line); vertical-align: bottom;
}
.bt-rec-tbl td { padding: 3px 6px; border: 1px solid var(--bt-line2); font-size: 11px; vertical-align: middle; }
.bt-rec-tbl tbody tr:hover { background: #e9f2fa; }
.bt-rec-tbl .bt-rec-sub { background: #f2f6fa; color: #556; }
.bt-egm-btn {
  display: inline-block; width: 34px; height: 15px; border: 1px solid #8fadc9;
  border-radius: 2px; background: #fff; cursor: pointer; vertical-align: middle;
}
.bt-egm-btn:hover { border-color: var(--bt-blue); }
.bt-egm-btn canvas { width: 100%; height: 100%; display: block; }

.bt-vue {
  border: 1px solid var(--bt-line); border-top: none; background: #f7fafd;
  display: flex; align-items: flex-start; gap: 10px; padding: 6px 7px;
}
.bt-vue-lab { font-weight: 700; color: var(--bt-dark); flex: 0 0 34px; }
.bt-vue-grid { flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 8px; }
.bt-vue-item { display: flex; align-items: center; gap: 4px; }
.bt-apply { flex: 0 0 auto; padding: 1px 7px; }

/* ---------------- fil d'Ariane / épisodes ---------------- */
.bt-crumb {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--bt-line); background: #f4f9fd; padding: 3px 8px;
}
.bt-crumb-sep { color: #7f9dbd; }
.bt-crumb-cur { font-weight: 700; color: var(--bt-dark); }
.bt-entry-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.bt-navbtn { padding: 0 6px; font-size: 9px; line-height: 15px; }
.bt-navbtn:disabled { opacity: .4; cursor: default; }
.bt-epbtn { text-decoration: none; display: inline-block; padding: 1px 7px; }

/* Graphique repris tel quel du rapport de transmission (section `figure`).
   Même règle d'échelle que le cadre EGM : l'image porte sa taille naturelle
   en attributs, `height: auto` la rétrécit sans l'étirer. */
.bt-fig-wrap { padding: 5px 6px 7px; background: #fff; overflow-x: auto; }
.bt-fig { display: block; max-width: 100%; height: auto; margin: 0 auto; }

/* ---------------- EGM ---------------- */
.bt-egm-stage {
  padding: 6px; background: #fff; display: flex; justify-content: center;
  overflow-x: auto;
}
/* `height: auto` : les attributs width/height du cas donnent la taille
   naturelle du tracé. Sans cette règle, un tracé plus large que la colonne
   est rétréci par max-width mais garde sa hauteur d'attribut — l'image est
   alors étirée verticalement. */
.bt-egm-img { display: block; max-width: 100%; height: auto; }
.bt-egm-missing {
  border: 1px dashed #c9a800; background: #fffdf0; color: #6b5200;
  padding: 5px 8px; font-size: 10.5px; margin: 6px 6px 0;
}
.bt-egm-absent { border-style: solid; border-color: #d0a0a0; background: #fdf6f6; color: #7a3030; }
.bt-trend-vide { opacity: .85; }
.egm-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  padding: 5px 7px; border-top: 1px solid var(--bt-line); background: #f4f9fd;
}
.egm-bar-title { font-weight: 700; color: var(--bt-dark); }
.egm-grp { display: inline-flex; align-items: center; gap: 4px; }
.egm-grp-lab { font-weight: 700; color: var(--bt-dark); }
.egm-sel {
  font: inherit; font-size: 11px; padding: 1px 2px;
  border: 1px solid #8fadc9; background: #fff; color: #1c1c1c;
}
.egm-bar .bt-entry-nav { margin-left: auto; }
.egm-hint { padding: 4px 7px 6px; font-size: 10px; color: #5d7186; }

/* commandes du repli « tracé reconstruit » */
.egm-btn {
  font: inherit; font-size: 11px; cursor: pointer; min-width: 20px;
  border: 1px solid #8fadc9; background: linear-gradient(#ffffff, #dfeaf5);
  color: var(--bt-dark); border-radius: 3px; padding: 1px 6px;
}
.egm-btn:hover { background: linear-gradient(#ffffff, #cfe2f2); }
.egm-btn-on { background: #cfe2f2; border-color: var(--bt-blue); font-weight: 700; }
.egm-strip + .egm-strip { margin-top: 6px; }
.egm-canvas { width: 100%; display: block; background: #fff; }

/* ---------------- pied de page du portail ---------------- */
.bt-foot {
  border-top: 1px solid var(--bt-line); background: #f7fafd;
  padding: 6px 12px; display: flex; gap: 14px; align-items: center;
  font-size: 10px; color: #8894a0;
}
.bt-foot a { color: #8894a0; text-decoration: none; }
.bt-foot a:hover { text-decoration: underline; }
.bt-foot-pdf { margin-left: auto; }

/* ---------------- débriefing (hors portail) ---------------- */
.bt-debrief { border: 1px solid #b7d3a8; background: #f6fbf3; }
.bt-debrief-h { display: flex; align-items: center; gap: 8px; padding: 5px 8px; }
.bt-debrief-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: #4f9a3a; color: #fff; padding: 2px 6px; border-radius: 8px;
}
.bt-debrief-q { flex: 1; font-weight: 700; color: #2c5220; }
.bt-debrief-btn { border-color: #7fae6a; background: linear-gradient(#ffffff, #ebf5e5); color: #2c5220; }
.bt-debrief-body { padding: 0 10px 10px; border-top: 1px solid #d7e8cd; }
.bt-step { padding-top: 8px; }
.bt-step-t { font-weight: 700; color: #2c5220; }
.bt-step-x { color: #24331c; max-width: 92ch; }
.bt-pitfall { margin-top: 10px; padding: 5px 8px; border-left: 3px solid #d9a441;
              background: #fdf7ea; color: #5a4212; }

/* Onglet Profil du patient > QuickCheck — reproduit le panneau de demande
   du portail réel (bandeau, case inerte, bouton). */
.bt-qc { display: flex; align-items: flex-start; gap: 12px; padding: 26px 20px; }
.bt-qc-ico {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #8a9aa8; color: #8a9aa8; font-size: 16px; font-weight: 700;
}
.bt-qc-title { font-size: 13px; font-weight: 700; color: var(--bt-dark); margin-bottom: 4px; }
.bt-qc-sub { max-width: 60ch; color: #4a5c6b; }
.bt-qc-link { display: inline-block; margin-top: 4px; }
.bt-qc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 20px; border-top: 1px solid var(--bt-line); background: var(--bt-soft2);
}
.bt-qc-notify { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: #4a5c6b; }
.bt-qc-btn {
  padding: 4px 14px; border: 1px solid var(--bt-line); background: linear-gradient(#fff, #eef3f8);
  color: var(--bt-dark); font-weight: 700; font-size: 11px; cursor: pointer;
}
.bt-qc-btn:disabled { cursor: default; opacity: .7; }

/* Notification flottante après réception d'une QuickCheck — indépendante du
   contenu de la page (montée sur document.body, survit au redessin). */
.bt-qc-toast {
  position: fixed; top: 16px; right: 16px; z-index: 500;
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 320px; padding: 12px 14px; border: 1px solid var(--bt-line);
  background: #fff; box-shadow: 0 4px 18px rgba(20, 40, 60, .18);
  font-family: inherit;
}
.bt-qc-toast-ico {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  background: #4f9a3a; color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.bt-qc-toast-title { font-weight: 700; color: var(--bt-dark); font-size: 12px; }
.bt-qc-toast-sub { color: #4a5c6b; font-size: 10.5px; margin-top: 2px; }
.bt-qc-toast-x {
  margin-left: auto; border: none; background: none; color: #8a9aa8;
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
}

/* ================= interrogation en face-à-face =================
   Le seul écran du simulateur qui ne reproduit PAS le portail : il
   montre le programmateur, c'est-à-dire ce qu'on ne voit qu'en faisant
   venir le patient. L'habillage le dit — fond ardoise, cadre de fenêtre,
   rien du bleu BIOTRONIK. Voir renderInterrogation() dans
   assets/js/render-biotronik.js. */

/* Bouton de la barre d'onglets, à droite comme le lien QuickCheck — mais
   PLUS VOYANT que lui : c'est la seule commande de la page qui ne vienne
   pas du portail, et c'est le pas que le cas demande de franchir.
   Ce qui le rend visible n'est pas une couleur étrangère (un premier essai
   en cyan jurait avec la page) mais le CONTRASTE : bleu foncé BIOTRONIK
   plein, texte bleu clair, là où les onglets sont clairs à texte foncé. Il
   passe en texte blanc au survol.
   Le libellé est court — « Interroger le patient », pas le titre de
   l'écran : la barre d'onglets est étroite et le bouton débordait. */
/* `.bt-page a` (0,1,1) impose la couleur de lien du portail à tout <a> de
   la page : il faut au moins autant de poids ici, sinon le bleu clair est
   écrasé et le texte revient au bleu de lien, illisible sur fond foncé. */
.bt-page a.bt-interro-toplink {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 4px; text-decoration: none; color: #9ed0f7;
  font-size: 11px; font-weight: 700; white-space: nowrap; letter-spacing: .2px;
  background: linear-gradient(#1d5789, #16456f);
  border: 1px solid #0e3253; border-radius: 4px;
  box-shadow: 0 1px 4px rgba(22, 69, 111, .35);
  position: relative; top: -2px;
}
/* Les deux liens poussent à droite ; quand le cas déclare les deux, c'est
   QuickCheck (posé en premier) qui prend la marge élastique et le second
   se colle à lui. */
.bt-page a.bt-qc-toplink + a.bt-interro-toplink { margin-left: 14px; }
.bt-page a.bt-interro-toplink:hover {
  background: linear-gradient(#24699f, #1a5182); text-decoration: none;
  color: #fff; box-shadow: 0 2px 7px rgba(22, 69, 111, .45);
}
/* Écran ouvert : le bouton s'enfonce au lieu de s'éteindre — il reste le
   repère de l'endroit où l'on se trouve. */
.bt-page a.bt-interro-toplink-on,
.bt-page a.bt-interro-toplink-on:hover {
  background: linear-gradient(#123a5e, #0e3253); color: #fff;
  box-shadow: none; top: 0;
}
/* fill: currentColor — le pictogramme suit le texte, bleu clair puis blanc. */
.bt-interro-ico { width: 13px; height: 13px; flex: 0 0 13px; fill: currentColor; }

/* Le cadre. */
.bt-interro {
  background: #2b3a46; border: 1px solid #1d2933;
  display: flex; flex-direction: column;
}
.bt-interro-intro { padding: 8px 10px 0; color: #34495e; }

.bt-interro-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px; background: #22303a;
  color: #dbe6ee; font-size: 10.5px; border-bottom: 1px solid #16212a;
}
.bt-interro-bar-t { font-weight: 700; letter-spacing: .2px; }
.bt-interro-count { color: #9db3c3; }
.bt-interro-full {
  margin-left: auto; cursor: pointer;
  padding: 2px 9px; font: inherit; color: #dbe6ee;
  background: #3b4f5e; border: 1px solid #55707f; border-radius: 3px;
}
.bt-interro-full:hover { background: #4a6273; }

.bt-interro-stage { position: relative; display: flex; justify-content: center; background: #1d2933; }
.bt-interro-img { display: block; max-width: 100%; height: auto; }

.bt-interro-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 54px; cursor: pointer;
  font: 700 26px/1 Arial, Helvetica, sans-serif; color: #fff;
  background: rgba(20, 32, 42, .55); border: 1px solid rgba(255, 255, 255, .28);
}
.bt-interro-nav:hover { background: rgba(20, 32, 42, .85); }
.bt-interro-prev { left: 6px; }
.bt-interro-next { right: 6px; }

.bt-interro-cap {
  padding: 7px 10px; background: #22303a; color: #dbe6ee;
  border-top: 1px solid #16212a;
}
.bt-interro-cap-t { font-weight: 700; }
.bt-interro-cap-n { color: #a8bccb; margin-top: 2px; }

/* Pellicule. */
.bt-interro-strip {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 2px;
}
.bt-interro-thumb {
  position: relative; padding: 0; cursor: pointer; line-height: 0;
  background: #fff; border: 1px solid var(--bt-line);
}
.bt-interro-thumb img { width: 96px; height: 60px; object-fit: cover; object-position: top left; }
.bt-interro-thumb-n {
  position: absolute; left: 0; bottom: 0; padding: 0 4px;
  font: 700 9px/13px Arial, Helvetica, sans-serif; color: #fff;
  background: rgba(20, 32, 42, .72);
}
.bt-interro-thumb-on { border-color: #2b3a46; box-shadow: 0 0 0 2px #2b3a46; }

/* Plein écran. La classe suffit à couvrir la fenêtre, que
   requestFullscreen() ait abouti ou non (fichier local, navigateur qui
   refuse) : la commande fait donc toujours quelque chose. */
/* Au-dessus du panneau de quiz (z-index 1200) et de sa lightbox (1300) :
   le plein ecran doit etre plein, sinon le quiz mange le tiers droit de la
   capture — et c est justement pendant le quiz qu on vient la regarder. */
.bt-interro-max {
  position: fixed; inset: 0; z-index: 1400;
  background: #10181f; border: none;
}
.bt-interro-max .bt-interro-stage { flex: 1 1 auto; align-items: center; min-height: 0; }
.bt-interro-max .bt-interro-img { max-height: 100%; max-width: 100%; object-fit: contain; }
body.bt-noscroll { overflow: hidden; }