/* ==========================================================================
   Item 329 · Produits Sanguins Labiles (PSL)
   Coque urgence-mir + cartes-profils + tableaux pivot + 5 schémas SVG natifs
   ========================================================================== */

:root {
  /* Tokens locaux (alignés autres items) */
  --paper:    var(--bg-card);
  --paper-2:  #fffcf5;
  --rule:     #d7ccb4;
  --rule-2:   var(--accent-dash);
  --bg-2:     #ece5d6;
  --bg-3:     #e4dcc8;
  --ink-2:    #524a3e;
  --ink-3:    #8a8270;
  --ink-4:    #b2a98f;
  --danger:   #a52a1a;
  --warn:     #8a5a12;
  --ok:       #4e6a2f;

  /* Familles spécifiques 329 */
  --fam-cgr:     #b8472c;            /* rouge sang — CGR */
  --fam-cp:      #c27a2c;            /* ocre — CP (plaquettes) */
  --fam-pfc:     #f1c98c;            /* jaune-paille — PFC (plasma) */
  --fam-immuno:  #8a4a7f;            /* aubergine — groupes / immuno */
  --fam-seuil:   #4e6a2f;            /* vert — seuils */
  --fam-mir:     var(--spe-mir);     /* noir — étapes */
  --fam-compli:  var(--danger);      /* rouge — complications */
  --fam-epargne: #c27a2c;            /* orange — épargne */
  --fam-terrain: #6b5e45;            /* terre — terrain particulier */
}

/* Élargissement local */
.content { max-width: 1400px; }

/* Fade léger au changement d'onglet */
@keyframes psl-fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.content-panel.active { animation: psl-fadeIn .35s ease-out; }

/* Utilitaires textuels */
.mono   { font-family: var(--font-mono); }
.muted  { color: var(--ink-3); }
hr.soft { border: none; border-top: 1px dashed var(--rule); margin: 20px 0; }

/* =========================================================
   Sec-title (numéro · titre · règle · hint)
   ========================================================= */
.sec-title       { display: flex; align-items: baseline; gap: 16px; margin: 36px 0 18px; flex-wrap: wrap; }
.sec-num         { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; color: var(--ink-3); text-transform: uppercase; }
.sec-title h2    { font-family: var(--font-serif); font-weight: 500; font-size: 30px; letter-spacing: -.01em; margin: 0; line-height: 1; }
.sec-title .rule { flex: 1; height: 1px; background: var(--rule); margin-bottom: 8px; min-width: 40px; }
.sec-title .hint { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: .06em; }

.block-title {
  font-family: var(--font-serif); font-weight: 500; font-size: 18px;
  margin: 18px 0 10px; color: var(--ink); letter-spacing: -.005em;
}

/* =========================================================
   Familles couleurs (pour mindmap)
   ========================================================= */
.fam-cgr     { --fam: var(--fam-cgr);     --fam-bg: #f1d8ce; }
.fam-cp      { --fam: var(--fam-cp);      --fam-bg: #f1e0c4; }
.fam-pfc     { --fam: var(--fam-pfc);     --fam-bg: #fbf1d6; }
.fam-immuno  { --fam: var(--fam-immuno);  --fam-bg: #ead8e4; }
.fam-seuil   { --fam: var(--fam-seuil);   --fam-bg: #d8e0c8; }
.fam-mir     { --fam: var(--ink);         --fam-bg: var(--bg-2); }
.fam-compli  { --fam: var(--fam-compli);  --fam-bg: #f3dccf; }
.fam-epargne { --fam: var(--fam-epargne); --fam-bg: #f1e0c4; }
.fam-terrain { --fam: var(--fam-terrain); --fam-bg: #e2dac9; }
.fam-def     { --fam: var(--ink);         --fam-bg: var(--bg-2); }

/* =========================================================
   Tables matrix (réutilisée du 332/194)
   ========================================================= */
table.matrix              { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--rule); }
table.matrix th,
table.matrix td           { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: 12.5px; }
table.matrix thead th     { background: var(--bg-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; border-bottom: 1px solid var(--rule-2); }
table.matrix tbody th     { font-family: var(--font-serif); font-weight: 500; font-size: 14px; color: var(--ink); border-right: 1px solid var(--rule); white-space: nowrap; }
table.matrix tbody tr:last-child th,
table.matrix tbody tr:last-child td { border-bottom: none; }
table.matrix tbody tr:hover td      { background: #fff; }

/* =========================================================
   Hbox (réutilisé) — grid 64px / 1fr
   ========================================================= */
.hstack             { display: flex; flex-direction: column; gap: 10px; }
.hbox {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 3px;
  padding: 12px 16px;
  display: grid; grid-template-columns: 80px 1fr;
  gap: 4px 16px; align-items: baseline;
  margin-bottom: 10px;
}
.hbox > .n {
  grid-column: 1; grid-row: 1 / -1;
  align-self: start; padding-top: 2px;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); font-weight: 500;
  word-break: break-word; line-height: 1.3;
}
.hbox > h5 {
  grid-column: 2;
  font-family: var(--font-serif); font-weight: 500; font-size: 15px; margin: 0 0 4px;
}
.hbox > p, .hbox > ul {
  grid-column: 2; margin: 0;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.6;
}
.hbox > ul { padding-left: 18px; }
.hbox > ul li { margin: 6px 0; }

/* =========================================================
   Pipeline · steps (réutilisé)
   ========================================================= */
.pipeline                { background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 22px; }
.pipeline .lane          { background: var(--fam-bg, var(--bg-2)); border: 1px solid color-mix(in oklab, var(--fam, var(--ink)) 30%, var(--rule)); border-radius: 3px; padding: 14px; }
.pipeline .lane-h        { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pipeline .lane-h .dot   { width: 10px; height: 10px; border-radius: 50%; background: var(--fam, var(--ink)); }
.pipeline .lane-h h3     { font-family: var(--font-serif); font-weight: 500; font-size: 18px; margin: 0; letter-spacing: -.005em; }
.pipeline .lane-h .kind  { margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase; }

.flow-row     { display: grid; gap: 14px; }
.flow-row.r-2 { grid-template-columns: repeat(2, 1fr); }
.flow-row.r-3 { grid-template-columns: repeat(3, 1fr); }
.flow-row.r-4 { grid-template-columns: repeat(4, 1fr); }

.step         { background: #fff; border: 1px solid var(--rule); border-radius: 3px; padding: 14px 16px; position: relative; }
.step .sn     { position: absolute; top: -10px; left: 14px; background: var(--paper); padding: 0 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--ink-3); text-transform: uppercase; }
.step h5      { font-family: var(--font-serif); font-weight: 500; font-size: 16px; margin: 2px 0 6px; }
.step p       { margin: 0; font-size: 12.5px; color: var(--ink-2); }

/* =========================================================
   Mindmap (réutilisée du 194)
   ========================================================= */
.mmwrap {
  position: relative; background: var(--paper); border: 1px solid var(--rule);
  border-radius: 4px; overflow: hidden; height: 740px;
}
.mmwrap .zctl        { position: absolute; top: 14px; right: 14px; z-index: 10; display: flex; gap: 4px; }
.mmwrap .zctl button {
  width: 34px; height: 34px; border: 1px solid var(--rule-2); background: var(--paper);
  border-radius: 3px; font-family: var(--font-mono); font-size: 14px; color: var(--ink-2);
  cursor: pointer;
}
.mmwrap .zctl button:hover { background: var(--bg-2); }
.mmwrap .zhint {
  position: absolute; left: 14px; bottom: 14px; z-index: 10;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  color: var(--ink-3); background: rgba(255, 252, 245, .85);
  padding: 6px 10px; border-radius: 3px; border: 1px solid var(--rule);
}
.mmwrap svg.canvas {
  width: 100%; height: 100%; display: block; cursor: grab;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.035) 1px, transparent 0);
  background-size: 24px 24px;
}
.mmwrap svg.canvas:active { cursor: grabbing; }
.mmwrap svg.canvas .root-circle  { fill: var(--ink); }
.mmwrap svg.canvas .root-text    { fill: var(--paper); font-family: var(--font-serif); font-weight: 500; }
.mmwrap svg.canvas .node-card    { cursor: pointer; }
.mmwrap svg.canvas .node-card:hover .node-bg { stroke-width: 2; }
.mmwrap svg.canvas .node-bg      { fill: #fff; stroke: var(--rule-2); stroke-width: 1; }
.mmwrap svg.canvas .node-accent  { fill: var(--fam, var(--ink)); }
.mmwrap svg.canvas .node-title   { fill: var(--ink); font-family: var(--font-serif); font-weight: 500; font-size: 15px; }
.mmwrap svg.canvas .node-sub     { fill: var(--ink-2); font-size: 11px; }
.mmwrap svg.canvas .node-chip    { fill: #fff; stroke: var(--rule); stroke-width: 1; }
.mmwrap svg.canvas .node-chip-t  { fill: var(--ink-2); font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.mmwrap svg.canvas path.link     { fill: none; stroke: var(--rule-2); stroke-width: 1.2; stroke-dasharray: 3 4; }
.mmwrap svg.canvas path.link.main{ stroke-width: 1.4; }
.mmwrap svg.canvas path.link.sat { stroke: var(--rule-2); stroke-width: 1; stroke-dasharray: 1 5; opacity: .55; }
.mmwrap svg.canvas .ring         { fill: none; stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 5; }

.mmwrap svg.canvas .node-sat                 { cursor: pointer; }
.mmwrap svg.canvas .node-sat:hover .sat-bg   { fill: var(--ink); }
.mmwrap svg.canvas .node-sat:hover .sat-title,
.mmwrap svg.canvas .node-sat:hover .sat-sub  { fill: var(--paper); }
.mmwrap svg.canvas .sat-bg                   { fill: var(--bg-2); stroke: var(--ink); stroke-width: 1; }
.mmwrap svg.canvas .sat-title                { fill: var(--ink); font-family: var(--font-serif); font-weight: 500; font-size: 13px; }
.mmwrap svg.canvas .sat-sub                  { fill: var(--ink-2); font-size: 9.5px; font-family: var(--font-mono); letter-spacing: .04em; }

.legend { display: flex; flex-wrap: wrap; gap: 18px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.legend .sw { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: middle; border-radius: 2px; }

/* =========================================================
   Vignette d'amorçage clinique
   ========================================================= */
.vignette {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--fam-cgr);
  border-radius: 4px;
  padding: 20px 24px;
  margin-bottom: 24px;
}
.vignette .vg-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fam-cgr);
  margin-bottom: 8px;
}
.vignette p {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.vignette p b { font-weight: 600; }
.vignette .vg-trap {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg-2);
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.vignette .vg-trap b { color: var(--ink); }

/* =========================================================
   Keypoints
   ========================================================= */
.keypoints {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.kp {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
}
.kp .kp-n {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  color: var(--fam-cgr);
  line-height: 1;
}
.kp .kp-body h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 15px;
  margin: 0 0 6px;
  color: var(--ink);
}
.kp .kp-body p {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}
.kp .kp-body p b { color: var(--ink); }

/* =========================================================
   Profils des 3 PSL (cartes)
   ========================================================= */
.profils {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.profil-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.profil-card.profil-cgr { border-top: 4px solid var(--fam-cgr); }
.profil-card.profil-cp  { border-top: 4px solid var(--fam-cp); }
.profil-card.profil-pfc { border-top: 4px solid var(--fam-pfc); }

.profil-head {
  padding: 16px 18px 14px;
  border-bottom: 1px dashed var(--rule);
  background: var(--paper-2);
}
.profil-head h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -.01em;
  margin: 4px 0 6px;
  color: var(--ink);
}
.profil-card.profil-cgr .profil-head h3 { color: var(--fam-cgr); }
.profil-card.profil-cp  .profil-head h3 { color: var(--fam-cp); }
.profil-card.profil-pfc .profil-head h3 { color: #a07520; }

.profil-rank {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.profil-headline {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-2);
  letter-spacing: .04em;
  background: var(--bg-2);
  padding: 6px 10px;
  border-radius: 3px;
  margin-top: 6px;
}

.profil-sections { padding: 14px 18px 18px; flex: 1; }
.profil-sec { margin-bottom: 12px; }
.profil-sec:last-child { margin-bottom: 0; }
.profil-sec h5 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--rule);
}
.profil-card.profil-cgr .profil-sec h5 { color: var(--fam-cgr); border-color: color-mix(in oklab, var(--fam-cgr) 25%, var(--rule)); }
.profil-card.profil-cp  .profil-sec h5 { color: var(--fam-cp);  border-color: color-mix(in oklab, var(--fam-cp)  25%, var(--rule)); }
.profil-card.profil-pfc .profil-sec h5 { color: #a07520;        border-color: color-mix(in oklab, #a07520        25%, var(--rule)); }

.profil-sec ul { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.profil-sec ul li { margin: 4px 0; }
.profil-sec ul li b { color: var(--ink); font-weight: 600; }

/* =========================================================
   Qualif & Transfo
   ========================================================= */
.qt-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.qt-intro-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 14px 16px;
  border-left: 3px solid var(--fam-immuno);
}
.qt-intro-card.qt-transfo { border-left-color: var(--fam-cp); }
.qt-intro-card h5 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  margin: 0 0 6px;
  color: var(--fam-immuno);
}
.qt-intro-card.qt-transfo h5 { color: var(--fam-cp); }
.qt-intro-card p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }

table.qt {
  width: 100%; border-collapse: collapse;
  background: var(--paper); border: 1px solid var(--rule);
  margin-bottom: 14px;
}
table.qt th, table.qt td {
  padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--rule);
  vertical-align: top; font-size: 12.5px;
}
table.qt thead th {
  background: var(--bg-2); font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); font-weight: 500;
}
table.qt tbody tr:last-child th, table.qt tbody tr:last-child td { border-bottom: none; }
table.qt tbody tr.qt-row-qualif  { background: #f4ecf2; }
table.qt tbody tr.qt-row-transfo { background: #f9efde; }
.qt-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  font-weight: 500;
}
.qt-pill-qualif  { background: var(--fam-immuno); color: #fff; }
.qt-pill-transfo { background: var(--fam-cp);     color: #fff; }
.qt-name { color: var(--ink); }

/* =========================================================
   Seuils transfusionnels (CGR / CP)
   ========================================================= */
table.seuils {
  width: 100%; border-collapse: collapse;
  background: var(--paper); border: 1px solid var(--rule);
  margin-bottom: 14px;
}
table.seuils th, table.seuils td {
  padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--rule);
  font-size: 13px; vertical-align: top;
}
table.seuils thead th {
  background: var(--bg-2); font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); font-weight: 500;
}
.seuil-th { font-family: var(--font-serif); font-weight: 500; font-size: 16px; color: var(--ink); width: 140px; white-space: nowrap; }
.seuil-row { transition: background-color .15s; }
.seuil-row.seuil-ok      { background: #ecf2e3; }
.seuil-row.seuil-warn    { background: #f7e8d2; }
.seuil-row.seuil-danger  { background: #f3dccf; }
.seuil-row.seuil-ok      .seuil-th { color: var(--ok); }
.seuil-row.seuil-warn    .seuil-th { color: var(--warn); }
.seuil-row.seuil-danger  .seuil-th { color: var(--danger); }

.seuils-pfc {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.seuil-ind {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 14px 16px;
}
.seuil-ind h5 {
  font-family: var(--font-serif); font-weight: 500; font-size: 15px;
  margin: 0 0 6px; color: var(--fam-seuil);
}
.seuil-ind ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.seuil-ind ul li { margin: 4px 0; }

/* =========================================================
   Étapes (pré-transfu) + algo CAT (numérotés)
   ========================================================= */
.etape {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 12px;
}
.etape-n {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  color: var(--fam-mir);
  line-height: 1;
  text-align: center;
}
.etape-body h5 {
  font-family: var(--font-serif); font-weight: 500; font-size: 16px;
  margin: 0 0 6px; color: var(--ink);
}
.etape-body ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.etape-body ul li { margin: 4px 0; }
.etape-body ul li b { color: var(--ink); font-weight: 600; }

.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list li {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 8px;
}
.cat-list .cat-n {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--fam-mir);
  letter-spacing: .04em;
}
.cat-list .cat-b {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
}
.cat-list .cat-b b { color: var(--ink); font-weight: 600; }

/* =========================================================
   Cartes complications immédiates
   ========================================================= */
.compli-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.compli-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--danger);
  border-radius: 4px;
  padding: 14px 16px;
}
.compli-card.compli-taco { border-left-color: var(--danger); background: #f8eee9; }
.compli-card.compli-trali,
.compli-card.compli-hemolyse { border-left-color: var(--danger); }
.compli-card.compli-allergie  { border-left-color: var(--warn); }
.compli-card.compli-rfnh      { border-left-color: var(--ink-3); }
.compli-card.compli-bact      { border-left-color: var(--fam-immuno); }
.compli-card.compli-metab     { border-left-color: var(--fam-cp); }

.compli-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.compli-head h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  margin: 0;
  color: var(--ink);
}
.compli-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--danger);
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--danger) 30%, var(--rule));
  padding: 3px 8px;
  border-radius: 2px;
}
.compli-line {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  padding: 5px 0;
  border-top: 1px dashed var(--rule);
  font-size: 12.5px;
}
.compli-line:first-of-type { border-top: none; }
.cl-k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cl-v { color: var(--ink-2); line-height: 1.55; }
.cl-v b { color: var(--ink); font-weight: 600; }

/* =========================================================
   Encadré rouge TACO vs TRALI (intégré onglet 11)
   ========================================================= */
.alert {
  background: #f3dccf;
  border: 1px solid var(--danger);
  border-radius: 4px;
  padding: 16px 20px;
  margin: 18px 0;
}
.alert-warn {
  background: #f7e8d2;
  border-color: var(--warn);
}
.alert-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--danger);
  margin-bottom: 10px;
  font-weight: 500;
}
.alert-warn .alert-tag { color: var(--warn); }
.alert ul { margin: 0; padding-left: 22px; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.alert ul li { margin: 4px 0; }
.alert ul li b { color: var(--ink); font-weight: 600; }
.alert-pivot { background: #f8e7df; }

table.taco-trali {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--danger) 25%, var(--rule));
}
table.taco-trali th,
table.taco-trali td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid color-mix(in oklab, var(--danger) 15%, var(--rule));
  font-size: 12.5px;
  vertical-align: top;
}
table.taco-trali thead th {
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
table.taco-trali thead th.th-taco  { color: var(--danger); }
table.taco-trali thead th.th-trali { color: var(--fam-immuno); }
table.taco-trali tbody th {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--ink);
  border-right: 1px solid var(--rule);
  background: var(--paper);
  width: 180px;
}
table.taco-trali td.td-taco  { background: #fcf3ef; }
table.taco-trali td.td-trali { background: #f7eef4; }
table.taco-trali td b { color: var(--danger); font-weight: 600; }

/* =========================================================
   Cartes complications retardées
   ========================================================= */
.compli-ret {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.compli-ret-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--fam-immuno);
  border-radius: 4px;
  padding: 14px 16px;
}
.compli-ret-card .cr-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.compli-ret-card .cr-head h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 15.5px;
  margin: 0;
  color: var(--ink);
}
.compli-ret-card .cr-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.compli-ret-card ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.compli-ret-card ul li { margin: 4px 0; }
.compli-ret-card ul li b { color: var(--ink); font-weight: 600; }

/* =========================================================
   Pièges + mnémos
   ========================================================= */
.traps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.trap {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--danger);
  border-radius: 3px;
  padding: 12px 14px;
}
.trap .tn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--danger);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.trap h5 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 14px;
  margin: 0 0 4px;
  color: var(--ink);
}
.trap p {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.trap p b { color: var(--ink); }

.mnemos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.mnemo {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--fam-cp);
  border-radius: 4px;
  padding: 14px 16px;
}
.mnemo .tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.mnemo h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -.005em;
  margin: 0 0 12px;
  color: var(--fam-cp);
}
.mnemo .letters { display: flex; flex-direction: column; gap: 5px; }
.mnemo .lt {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 12.5px;
}
.mnemo .l {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: 18px;
  color: var(--fam-cp);
  text-align: center;
  line-height: 1;
}
.mnemo .t { color: var(--ink-2); line-height: 1.5; }
.mnemo .t b { color: var(--ink); }

/* =========================================================
   SCHÉMAS SVG NATIFS — styles globaux
   ========================================================= */
.schema-svg {
  width: 100%;
  height: auto;
  display: block;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  margin: 14px 0;
}
.schema-svg .sch-title    { font-family: var(--font-serif); font-weight: 500; font-size: 15px; fill: var(--ink); }
.schema-svg .sch-subtitle { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-3); letter-spacing: .04em; }
.schema-svg .sch-section  { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-2); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }

/* Schéma 1 — chaîne transfusionnelle */
.schema-svg .sch-band            { stroke: var(--rule); stroke-width: 0.5; }
.schema-svg .sch-band-donneur    { fill: #ecf2e3; }
.schema-svg .sch-band-efs        { fill: #d6e3e8; }
.schema-svg .sch-band-hop        { fill: #f3dccf; }
.schema-svg .sch-band-pat        { fill: #ecf2e3; }
.schema-svg .sch-band-t          { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-2); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.schema-svg .sch-box             { stroke: var(--rule-2); stroke-width: 1; fill: #fff; }
.schema-svg .sch-box.donneur     { fill: #ecf2e3; stroke: var(--ok); }
.schema-svg .sch-box.efs         { fill: #d6e3e8; stroke: var(--spe-cardio); }
.schema-svg .sch-box.hop         { fill: #f3dccf; stroke: var(--danger); }
.schema-svg .sch-box.pat         { fill: #ecf2e3; stroke: var(--ok); }
.schema-svg .sch-box-n           { font-family: var(--font-mono); font-size: 9px; fill: var(--ink-3); letter-spacing: .14em; }
.schema-svg .sch-box-t           { font-family: var(--font-serif); font-weight: 500; font-size: 12px; fill: var(--ink); }
.schema-svg .sch-box-s           { font-family: var(--font-mono); font-size: 9px; fill: var(--ink-3); }
.schema-svg .sch-arrow           { stroke: var(--ink-3); stroke-width: 1.5; fill: none; }
.schema-svg .sch-lock            { fill: #fffae0; stroke: var(--warn); stroke-width: 1; }
.schema-svg .sch-lock.crit       { fill: #f3dccf; stroke: var(--danger); }
.schema-svg .sch-lock-t          { font-family: var(--font-mono); font-size: 10px; fill: var(--warn); font-weight: 500; }
.schema-svg .sch-lock-t.crit     { fill: var(--danger); }
.schema-svg .sch-lock-s          { font-family: var(--font-mono); font-size: 8.5px; fill: var(--ink-2); }
.schema-svg .sch-lock-s.crit     { fill: var(--danger); }

/* Schéma 2 — Beth Vincent */
.schema-svg .bv-puit             { fill: #fff; stroke: var(--rule-2); stroke-width: 1; }
.schema-svg .bv-puit.puit-a      { stroke: var(--danger); }
.schema-svg .bv-puit.puit-b      { stroke: var(--spe-cardio); }
.schema-svg .bv-puit.aggl        { fill: #b8472c; stroke: var(--danger); stroke-width: 2; }
.schema-svg .bv-puit-l           { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-2); letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.schema-svg .bv-puit-t           { font-family: var(--font-mono); font-size: 7.5px; fill: var(--ink-3); }
.schema-svg .bv-grp              { font-family: var(--font-serif); font-weight: 500; font-style: italic; font-size: 22px; fill: var(--ink); }
.schema-svg .bv-rule             { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 4; }
.schema-svg .bv-row-l            { font-family: var(--font-mono); font-size: 9px; fill: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.schema-svg .bv-sym              { font-family: var(--font-mono); font-size: 14px; font-weight: 500; fill: var(--ink-3); }
.schema-svg .bv-sym.aggl         { fill: var(--danger); font-weight: 700; }
.schema-svg .bv-conc-l           { font-family: var(--font-mono); font-size: 9px; fill: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.schema-svg .bv-conc             { font-family: var(--font-serif); font-weight: 500; font-size: 12px; fill: var(--ink); }
.schema-svg .bv-warn             { fill: #f3dccf; stroke: var(--danger); stroke-width: 1; }
.schema-svg .bv-warn-t           { font-family: var(--font-sans); font-size: 11px; fill: var(--danger); font-weight: 600; }

/* Schéma 3 — algo CAT */
.schema-svg .cat-root            { fill: var(--ink); stroke: var(--ink); }
.schema-svg .cat-root-t          { font-family: var(--font-serif); font-weight: 500; font-size: 14px; fill: var(--paper); }
.schema-svg .cat-root-s          { font-family: var(--font-mono); font-size: 9.5px; fill: rgba(255,255,255,.75); }
.schema-svg .cat-arrow           { stroke: var(--ink-3); stroke-width: 1.5; fill: none; }
.schema-svg .cat-imm             { fill: #f3dccf; stroke: var(--danger); stroke-width: 1; }
.schema-svg .cat-imm-t           { font-family: var(--font-mono); font-size: 11px; fill: var(--danger); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.schema-svg .cat-imm-s           { font-family: var(--font-sans); font-size: 11px; fill: var(--ink); }
.schema-svg .cat-imm-s .b        { font-weight: 600; }
.schema-svg .cat-q               { fill: var(--bg-2); stroke: var(--rule-2); stroke-width: 1; }
.schema-svg .cat-q-t             { font-family: var(--font-serif); font-weight: 500; font-size: 13px; fill: var(--ink); }
.schema-svg .cat-br              { fill: #fff; stroke-width: 1; }
.schema-svg .cat-br-allerg       { stroke: var(--warn);  fill: #f7e8d2; }
.schema-svg .cat-br-hemo         { stroke: var(--danger); fill: #f3dccf; }
.schema-svg .cat-br-infect       { stroke: var(--fam-immuno); fill: #ead8e4; }
.schema-svg .cat-br-t            { font-family: var(--font-serif); font-weight: 500; font-size: 13px; fill: var(--ink); }
.schema-svg .cat-br-s            { font-family: var(--font-mono); font-size: 9px; fill: var(--ink-2); letter-spacing: .04em; }
.schema-svg .cat-br-i            { font-family: var(--font-sans); font-size: 10.5px; fill: var(--ink-2); }
.schema-svg .cat-final           { fill: var(--bg-2); stroke: var(--ink); stroke-width: 1.5; }
.schema-svg .cat-final-t         { font-family: var(--font-serif); font-weight: 500; font-size: 14px; fill: var(--ink); letter-spacing: -.005em; }
.schema-svg .cat-final-s         { font-family: var(--font-sans); font-size: 11px; fill: var(--ink-2); }
.schema-svg .cat-final-b         { font-family: var(--font-sans); font-size: 11px; fill: var(--danger); font-weight: 600; }

/* Schéma 4 — frise temporelle */
.schema-svg .frise-axis          { stroke: var(--ink); stroke-width: 2; }
.schema-svg .frise-tick          { stroke: var(--ink); stroke-width: 1.5; }
.schema-svg .frise-tick-l        { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-2); letter-spacing: .04em; }
.schema-svg .frise-section       { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-2); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.schema-svg .frise-tag.immun     rect  { fill: #ead8e4; stroke: var(--fam-immuno); stroke-width: 1; }
.schema-svg .frise-tag.immun     text  { font-family: var(--font-sans); font-size: 11px; fill: var(--ink); font-weight: 500; }
.schema-svg .frise-tag.surcharge rect  { fill: #f3dccf; stroke: var(--danger); stroke-width: 1.5; }
.schema-svg .frise-tag.surcharge text  { font-family: var(--font-sans); font-size: 11px; fill: var(--danger); font-weight: 600; }
.schema-svg .frise-tag.infect    rect  { fill: #ecf2e3; stroke: var(--ok); stroke-width: 1; }
.schema-svg .frise-tag.infect    text  { font-family: var(--font-sans); font-size: 11px; fill: var(--ink); }
.schema-svg .frise-tag.metab     rect  { fill: #f7e8d2; stroke: var(--warn); stroke-width: 1; }
.schema-svg .frise-tag.metab     text  { font-family: var(--font-sans); font-size: 11px; fill: var(--ink); }
.schema-svg .frise-d             { font-family: var(--font-mono); font-size: 9px; fill: var(--ink-3); }
.schema-svg .frise-mini          { font-family: var(--font-mono); font-size: 9.5px; fill: var(--ink); font-weight: 500; }
.schema-svg .frise-leg           { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-2); }

/* Schéma 5 — pyramide compatibilités */
.schema-svg .pyr-h               { font-family: var(--font-serif); font-weight: 500; font-size: 14px; fill: var(--ink); }
.schema-svg .pyr-s               { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-3); letter-spacing: .04em; }
.schema-svg .pyr-l4              { fill: #ecf2e3; stroke: var(--ok); stroke-width: 1; }
.schema-svg .pyr-l3              { fill: #fef5d9; stroke: var(--warn); stroke-width: 1; }
.schema-svg .pyr-l2              { fill: #f7e8d2; stroke: var(--warn); stroke-width: 1; }
.schema-svg .pyr-l1              { fill: #f3dccf; stroke: var(--danger); stroke-width: 1; }
.schema-svg .pyr-t               { font-family: var(--font-sans); font-size: 11px; fill: var(--ink); font-weight: 500; }
.schema-svg .pyr-arrow           { stroke: var(--ink-3); stroke-width: 1.5; fill: none; }
.schema-svg .pyr-side            { font-family: var(--font-mono); font-size: 9px; fill: var(--ink-3); letter-spacing: .12em; text-transform: uppercase; }
.schema-svg .pyr-warn            { fill: #f3dccf; stroke: var(--danger); stroke-width: 1; }
.schema-svg .pyr-warn-t          { font-family: var(--font-sans); font-size: 11px; fill: var(--danger); font-weight: 600; }

/* =========================================================
   Image médicale (formulaire de prescription)
   ========================================================= */
.psl-img-wrap {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 14px;
  text-align: center;
  margin: 14px 0;
}
.psl-img-wrap img {
  max-width: 100%;
  height: auto;
  border-radius: 3px;
  display: inline-block;
}
.psl-img-wrap .src {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--ink-3);
}

/* =========================================================
   Mode ludique — bouton header
   ========================================================= */
.ludic-toggle {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  padding: 6px 12px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  cursor: pointer;
  color: var(--ink-2);
  margin-left: auto;
}
.ludic-toggle:hover { background: var(--bg-2); }
.ludic-toggle[aria-pressed="true"] {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* =========================================================
   Print
   ========================================================= */
@media print {
  .mmwrap .zctl, .mmwrap .zhint { display: none !important; }
  .content-panel { display: block !important; page-break-after: always; animation: none; }
  body { background: #fff; }
}