/* ==========================================================================
   Item 147 · Fièvre aiguë chez l'enfant et l'adulte — styles spécifiques
   Charge après styles.css + components.css. Composants :
   - Mindmap radiale 6 branches (template 194)
   - Schéma physiopath cascade SVG vertical
   - Arbre décisionnel SVG nourrisson < 28j (foreignObject + markers)
   - Tableaux natifs (terrains, examens, âges, fièvre vs hyperthermie)
   - Cartes profils (5 ATB + 8 terrains + 4 âges + 6 non-infectieuses)
   - Alertes rouges (7 alertes)
   ========================================================================== */

:root {
  /* Tokens locaux (alignés sur les 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 sémantiques propres à cet item */
  --fam-def:        var(--spe-cardio);    /* bleu canard · définir */
  --fam-urgence:    var(--spe-urgences);  /* bordeaux · urgence */
  --fam-danger:     var(--alert-red);     /* rouge alerte · purpura, neutropénie, hyperthermies */
  --fam-dx:         var(--spe-cardio);    /* bleu canard · démarche */
  --fam-paraclin:   var(--spe-mir);       /* ardoise · examens compl. */
  --fam-atb:        var(--warn);          /* sable · ATB urgente */
  --fam-pec:        #6b9c4d;              /* vert tendre · PEC sympto */
  --fam-pediatrie:  #6b9c4d;              /* vert tendre · pédiatrie */
  --fam-warn:       var(--warn);          /* sable warning · terrains particuliers */
}

.content { max-width: 1400px; }

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

/* ----- Familles utilitaires ----- */
.fam-def        { --fam: var(--fam-def);       --fam-bg: #cfdde0; }
.fam-urgence    { --fam: var(--fam-urgence);   --fam-bg: #f1cdc8; }
.fam-danger     { --fam: var(--fam-danger);    --fam-bg: #f3dccf; }
.fam-dx         { --fam: var(--fam-dx);        --fam-bg: #cfdde0; }
.fam-paraclin   { --fam: var(--fam-paraclin);  --fam-bg: #d8d3c5; }
.fam-atb        { --fam: var(--fam-atb);       --fam-bg: #f3e9cc; }
.fam-pec        { --fam: var(--fam-pec);       --fam-bg: #dde6cb; }
.fam-pediatrie  { --fam: var(--fam-pediatrie); --fam-bg: #dde6cb; }
.fam-warn       { --fam: var(--fam-warn);      --fam-bg: #f3e9cc; }

/* ============================================================
   Sec-title (recopie 190 pour cohérence)
   ============================================================ */
.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; }

.rang-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 2px;
  border: 1px solid var(--rule-2); color: var(--ink-2); background: var(--paper);
  vertical-align: middle;
}
.rang-tag.rang-a { color: var(--ok);    border-color: color-mix(in oklab, var(--ok) 40%, var(--rule-2)); }
.rang-tag.rang-b { color: var(--ink-3); border-color: var(--rule-2); }

/* ============================================================
   Mindmap radiale (template 190/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; }

/* ============================================================
   Vignette + keypoints + définitions
   ============================================================ */
.vignette {
  background: var(--paper); border: 1px solid var(--rule);
  border-left: 4px solid var(--fam-dx);
  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-dx); 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: 10px 14px; background: var(--bg-2); border-radius: 3px;
  font-family: var(--font-sans); font-size: 12.5px; font-style: italic; color: var(--ink-2);
}
.vignette .vg-trap b { font-style: normal; color: var(--ink); }

.keypoints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 26px; }
.keypoint  {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 14px 16px;
  display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start;
}
.keypoint .kp-n {
  font-family: var(--font-serif); font-style: italic; font-size: 26px; line-height: 1; color: var(--fam-dx);
}
.keypoint p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.keypoint p b { color: var(--ink); font-weight: 600; }

.def-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.def-card {
  background: var(--paper); border: 1px solid var(--rule);
  border-top: 4px solid var(--fam, var(--ink));
  border-radius: 4px; padding: 18px 20px;
}
.def-card .def-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.def-card h3 { font-family: var(--font-serif); font-weight: 500; font-size: 20px; letter-spacing: -.005em; margin: 0; color: var(--fam, var(--ink)); }
.def-card .def-sub { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.def-card p { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin: 0 0 10px; }
.def-card p b { color: var(--ink); }
.def-card .def-pillar {
  margin-top: 12px; padding: 10px 12px; background: var(--bg-2);
  border-radius: 3px; font-family: var(--font-sans); font-size: 12px;
  letter-spacing: .01em; color: var(--ink); font-style: italic;
}
.def-card .def-pillar b { font-weight: 600; font-style: normal; }

/* ============================================================
   Encadrés ALERTE clinique (règle B CLAUDE.md)
   ============================================================ */
.alert-clinical {
  background: #f3dccf; border: 1px solid var(--danger);
  border-radius: 4px; padding: 16px 20px;
  display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start;
  margin: 18px 0;
}
.alert-clinical .alert-icon {
  font-family: var(--font-serif); font-size: 32px; line-height: 1;
  color: var(--danger); font-style: italic; font-weight: 500;
}
.alert-clinical h4 {
  font-family: var(--font-serif); font-weight: 500; font-size: 18px;
  letter-spacing: -.005em; color: var(--danger); margin: 0 0 8px;
}
.alert-clinical ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.alert-clinical ul li { margin: 4px 0; }
.alert-clinical ul li b { color: var(--ink); font-weight: 600; }

/* ============================================================
   03 · Physiopath — schéma cascade + tableau fièvre vs hyperthermie
   ============================================================ */
.physio-intro,
.urg-intro,
.synthese-intro {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-left: 4px solid var(--fam-dx); border-radius: 3px;
  padding: 14px 18px; margin-bottom: 22px;
  font-size: 13.5px; color: var(--ink-2); line-height: 1.6;
}
.physio-intro b,
.urg-intro b,
.synthese-intro b { color: var(--ink); font-weight: 600; }

.physio-grid {
  display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px;
  align-items: start;
}
.physio-cascade-wrap {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 4px; padding: 16px 14px;
}
.physio-cascade-wrap .pp-cascade-svg {
  width: 100%; height: auto; display: block; margin: 0 auto;
}

/* SVG cascade physiopath */
.pp-cascade-svg .pp-title {
  font-family: var(--font-serif); font-size: 13px; font-weight: 500; fill: var(--ink);
}
.pp-cascade-svg .pp-stage-bg { fill: #fff; stroke: var(--rule); stroke-width: 1; }
.pp-cascade-svg .pp-stage-agresseur .pp-stage-bg { fill: var(--bg-2); stroke: var(--ink-3); }
.pp-cascade-svg .pp-stage-exo .pp-stage-bg       { fill: var(--accent-orange-soft); stroke: var(--warn); stroke-width: 1.2; }
.pp-cascade-svg .pp-stage-endo .pp-stage-bg      { fill: #f3dccf; stroke: var(--danger); stroke-width: 1.2; }
.pp-cascade-svg .pp-stage-hypo .pp-stage-bg      { fill: #cfdde0; stroke: var(--spe-cardio); stroke-width: 1.4; }
.pp-cascade-svg .pp-stage-eff .pp-stage-bg       { fill: var(--accent-yellow-soft); stroke: var(--warn); stroke-width: 1.2; }
.pp-cascade-svg .pp-stage-cons .pp-stage-bg      { fill: var(--paper-2); stroke: var(--ink-2); stroke-width: 1.2; }

.pp-cascade-svg .pp-fo { font-family: var(--font-sans); color: var(--ink-2); }
.pp-cascade-svg .pp-fo .pp-stage-label {
  font-family: var(--font-serif); font-weight: 500; font-size: 13px;
  color: var(--ink); margin-bottom: 2px; line-height: 1.2;
}
.pp-cascade-svg .pp-fo ul {
  margin: 2px 0 0; padding-left: 14px; font-size: 11px; line-height: 1.35;
}
.pp-cascade-svg .pp-fo ul li { margin: 1px 0; }
.pp-cascade-svg .pp-fo ul li b { color: var(--ink); font-weight: 600; }

.pp-cascade-svg .pp-arrow { fill: none; stroke: var(--ink-2); stroke-width: 2; }
.pp-cascade-svg marker path { fill: var(--ink-2); }

.pp-legende {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 12px; padding: 10px 12px;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 3px;
  font-size: 11px; color: var(--ink-2);
}
.pp-legende > div {
  display: inline-flex; align-items: center; gap: 6px;
}
.pp-legende .pp-leg {
  display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--rule);
}
.pp-legende .pp-stage-exo  { background: var(--accent-orange-soft); border-color: var(--warn); }
.pp-legende .pp-stage-endo { background: #f3dccf; border-color: var(--danger); }
.pp-legende .pp-stage-hypo { background: #cfdde0; border-color: var(--spe-cardio); }
.pp-legende .pp-stage-eff  { background: var(--accent-yellow-soft); border-color: var(--warn); }

.physio-table-wrap {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 4px; padding: 18px 22px;
}
.fh-title {
  font-family: var(--font-serif); font-weight: 500; font-size: 18px;
  margin: 0 0 12px; color: var(--ink);
}
.fh-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
}
.fh-table th, .fh-table td {
  padding: 10px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
.fh-table thead th {
  background: var(--bg-2); font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); font-weight: 500;
}
.fh-table .fh-th-row { width: 130px; background: var(--bg-3); }
.fh-table .fh-th-fievre { color: var(--fam-dx); border-bottom: 3px solid var(--fam-dx); }
.fh-table .fh-th-hyper  { color: var(--danger);  border-bottom: 3px solid var(--danger); }
.fh-table tbody th {
  font-family: var(--font-serif); font-weight: 500; font-size: 13px;
  color: var(--ink); background: var(--paper-2); width: 130px;
  border-right: 1px solid var(--rule);
}
.fh-table tbody td { color: var(--ink-2); line-height: 1.45; }
.fh-table tbody td b { color: var(--ink); font-weight: 600; }

.physio-citation {
  margin-top: 16px; padding: 14px 18px;
  background: var(--ink); color: var(--paper);
  border-radius: 4px;
  font-family: var(--font-serif); font-size: 14px; font-style: italic;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .physio-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   04 · Urgence ⚡
   ============================================================ */
.urg-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px;
}
.urg-bloc {
  background: var(--paper); border: 1px solid var(--rule);
  border-left: 4px solid var(--fam, var(--fam-urgence));
  border-radius: 4px; padding: 14px 18px;
}
.urg-bloc h4 {
  font-family: var(--font-serif); font-weight: 500; font-size: 16px;
  margin: 0 0 8px; color: var(--fam, var(--fam-urgence));
}
.urg-bloc ul { margin: 0; padding-left: 20px; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.urg-bloc ul li { margin: 4px 0; }
.urg-bloc ul li b { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .urg-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Démarche dx (blocs)
   ============================================================ */
.demarche-bloc {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 4px;
  padding: 16px 18px; margin-bottom: 18px;
  border-left: 4px solid var(--fam, var(--fam-dx));
}
.demarche-bloc h4 {
  font-family: var(--font-serif); font-weight: 500; font-size: 18px;
  margin: 0 0 10px; color: var(--fam, var(--fam-dx));
}
.demarche-bloc ul { margin: 4px 0 0; padding-left: 22px; font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.demarche-bloc ul li { margin: 5px 0; }
.demarche-bloc ul li b { color: var(--ink); font-weight: 600; }

/* ============================================================
   05 · Tableau natif "orientation par terrain"
   ============================================================ */
.terrain-table-wrap,
.age-table-wrap,
.ex-table-wrap {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 4px;
  overflow-x: auto;
}
.terrain-table,
.age-table,
.ex-table {
  width: 100%; border-collapse: collapse; min-width: 720px;
}
.terrain-table th, .terrain-table td,
.age-table th, .age-table td,
.ex-table th, .ex-table td {
  padding: 10px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--rule); font-size: 12.5px; line-height: 1.5;
}
.terrain-table thead th,
.age-table thead th,
.ex-table thead th {
  background: var(--bg-2); font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); font-weight: 500;
  border-bottom: 1px solid var(--rule-2);
}
.terrain-table tbody th,
.age-table tbody th,
.ex-table tbody th {
  font-family: var(--font-serif); font-weight: 500; font-size: 13px;
  color: var(--ink); background: var(--paper-2);
  border-right: 1px solid var(--rule); width: 18%; min-width: 130px;
}
.terrain-table tbody tr:nth-child(even) td,
.age-table tbody tr:nth-child(even) td,
.ex-table tbody tr:nth-child(even) td {
  background: var(--paper-2);
}
.terrain-table tbody td b,
.age-table tbody td b,
.ex-table tbody td b { color: var(--ink); font-weight: 600; }

.renvoi-chip {
  display: inline-block;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  padding: 2px 8px; background: var(--bg-2); border: 1px solid var(--rule);
  border-radius: 2px; color: var(--ink-2);
}

/* ============================================================
   06 · Cartes profils par âge pédiatrique
   ============================================================ */
.age-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px;
}
.age-card {
  background: var(--paper); border: 1px solid var(--rule);
  border-left: 4px solid var(--fam, var(--fam-pediatrie));
  border-radius: 4px; padding: 16px 18px;
}
.age-card .age-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.age-card .age-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fam, var(--fam-pediatrie));
  background: var(--paper-2); border: 1px solid var(--fam, var(--rule));
  padding: 2px 8px; border-radius: 2px;
}
.age-card h4 {
  font-family: var(--font-serif); font-weight: 500; font-size: 17px;
  margin: 0; color: var(--ink);
}
.age-card ul { margin: 4px 0 0; padding-left: 20px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.age-card ul li { margin: 4px 0; }
.age-card ul li b { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .age-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   06c · Tableau bénin vs sévère pédia (2 colonnes contrastées)
   ============================================================ */
.bensev-table {
  width: 100%; border-collapse: collapse; min-width: 720px;
}
.bensev-table th, .bensev-table td {
  padding: 11px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--rule); font-size: 13px; line-height: 1.5;
}
.bensev-table thead th {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  border-bottom: 2px solid var(--rule-2);
  background: var(--bg-2);
}
.bensev-table thead .bs-th-row { background: var(--bg-3); width: 22%; }
.bensev-table thead .bs-th-ben {
  color: var(--ok);
  border-bottom-color: var(--ok);
}
.bensev-table thead .bs-th-sev {
  color: var(--danger);
  border-bottom-color: var(--danger);
}
.bensev-table tbody th {
  font-family: var(--font-serif); font-weight: 500; font-size: 14px;
  color: var(--ink); background: var(--paper-2);
  border-right: 1px solid var(--rule); width: 22%;
}
.bensev-table tbody .bs-ben { background: var(--accent-green-soft); color: var(--ink-2); }
.bensev-table tbody .bs-sev { background: #f3dccf; color: var(--ink-2); }
.bensev-table tbody td b { color: var(--ink); font-weight: 600; }

/* ============================================================
   10e · Tableau critères HAS 2017 INBP (2 colonnes maj/min)
   ============================================================ */
.has2017-table {
  width: 100%; border-collapse: collapse; min-width: 720px;
}
.has2017-table th, .has2017-table td {
  padding: 11px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--rule); font-size: 12.5px; line-height: 1.55;
}
.has2017-table thead th {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  border-bottom: 2px solid var(--rule-2);
  background: var(--bg-2);
}
.has2017-table thead .h17-th-maj {
  color: var(--danger); border-bottom-color: var(--danger); width: 55%;
}
.has2017-table thead .h17-th-min {
  color: var(--warn); border-bottom-color: var(--warn);
}
.has2017-table tbody .h17-maj {
  background: #f3dccf; border-right: 1px solid var(--rule);
}
.has2017-table tbody .h17-min { background: var(--accent-yellow-soft); }
.has2017-table tbody td b { color: var(--ink); font-weight: 600; }
.has2017-table .h17-empty { color: var(--ink-4); font-style: italic; }

/* ============================================================
   07 · Examens compl. (note pivot)
   ============================================================ */
.ex-note-pivot {
  margin-top: 18px; padding: 14px 18px;
  background: #cfdde0; border: 1px solid var(--spe-cardio);
  border-left: 4px solid var(--spe-cardio);
  border-radius: 3px; font-size: 13px; color: var(--ink-2); line-height: 1.6;
}
.ex-note-pivot b { color: var(--ink); font-weight: 600; }

/* ============================================================
   08 · Cartes ATB urgente (5 cartes profils)
   ============================================================ */
.atb-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px;
}
.atb-card {
  background: var(--paper); border: 1px solid var(--rule);
  border-left: 5px solid var(--fam, var(--fam-atb));
  border-radius: 4px; padding: 16px 18px;
}
.atb-card .atb-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 10px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px dashed var(--rule);
}
.atb-card .atb-tag {
  font-family: var(--font-mono); font-size: 14px; font-weight: 600;
  color: var(--paper); background: var(--fam, var(--fam-atb));
  padding: 4px 10px; border-radius: 2px; letter-spacing: .04em;
}
.atb-card h4 {
  font-family: var(--font-serif); font-weight: 500; font-size: 18px;
  margin: 0; color: var(--ink);
}
.atb-card .atb-row {
  display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed var(--rule);
  font-size: 12.5px; color: var(--ink-2); line-height: 1.55;
}
.atb-card .atb-row:first-of-type { border-top: none; padding-top: 0; }
.atb-card .atb-lbl {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); padding-top: 2px;
}
.atb-card .atb-row ul { margin: 0; padding-left: 16px; }
.atb-card .atb-row ul li { margin: 3px 0; }
.atb-card .atb-row b { color: var(--ink); font-weight: 600; }
.atb-card .atb-row i { font-size: 11.5px; color: var(--ink-3); }

@media (max-width: 900px) {
  .atb-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   09 · Cartes PEC sympto (5 cartes)
   ============================================================ */
.pec-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px;
}
.pec-card {
  background: var(--paper); border: 1px solid var(--rule);
  border-left: 4px solid var(--fam, var(--fam-pec));
  border-radius: 4px; padding: 14px 18px;
}
.pec-card h4 {
  font-family: var(--font-serif); font-weight: 500; font-size: 17px;
  margin: 0 0 10px; color: var(--fam, var(--fam-pec));
}
.pec-card ul { margin: 0; padding-left: 20px; font-size: 12.5px; color: var(--ink-2); line-height: 1.65; }
.pec-card ul li { margin: 5px 0; }
.pec-card ul li b { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .pec-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   10 · Arbre décisionnel SVG nourrisson < 28j
   ============================================================ */
.nv-arbre-wrap {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 4px; padding: 18px 14px;
  overflow-x: auto;
}
.nv-arbre-svg {
  display: block; width: 100%; max-width: 960px; height: auto;
  margin: 0 auto;
}

.nv-arbre-svg .nv-bg              { fill: #fff; stroke: var(--rule); stroke-width: 1; }
.nv-arbre-svg .nv-entry .nv-bg    { fill: var(--ink); stroke: var(--ink); }
.nv-arbre-svg .nv-warn .nv-bg     { fill: var(--accent-orange-soft); stroke: var(--warn); stroke-width: 1.4; }
.nv-arbre-svg .nv-ok .nv-bg       { fill: var(--accent-green-soft); stroke: var(--ok); stroke-width: 1.4; }
.nv-arbre-svg .nv-branch .nv-bg   { fill: var(--accent-orange-soft); stroke: var(--warn); stroke-width: 1.2; }
.nv-arbre-svg .nv-bg-danger       { fill: #f3dccf; stroke: var(--danger); stroke-width: 1.4; }

.nv-arbre-svg .nv-fo-entry { color: var(--paper); font-family: var(--font-sans); }
.nv-arbre-svg .nv-fo-entry .nv-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-dash); margin-bottom: 2px;
}
.nv-arbre-svg .nv-fo-entry .nv-htitle {
  font-family: var(--font-serif); font-size: 16px; font-weight: 500; margin-bottom: 2px;
}
.nv-arbre-svg .nv-fo-entry .nv-sub { font-size: 12px; opacity: .85; }

.nv-arbre-svg .nv-fo { font-family: var(--font-sans); color: var(--ink); }
.nv-arbre-svg .nv-fo .nv-htitle-w {
  font-family: var(--font-serif); font-weight: 500; font-size: 14px;
  color: var(--warn); margin-bottom: 4px;
}
.nv-arbre-svg .nv-fo .nv-sub-w { font-size: 11px; color: var(--ink-2); line-height: 1.35; }
.nv-arbre-svg .nv-fo .nv-htitle-ok {
  font-family: var(--font-serif); font-weight: 500; font-size: 14px;
  color: var(--ok); margin-bottom: 4px;
}
.nv-arbre-svg .nv-fo .nv-sub-ok { font-size: 11px; color: var(--ink-2); line-height: 1.35; }

.nv-arbre-svg .nv-fo .nv-tag-side {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px;
}

.nv-arbre-svg .nv-fo-danger { font-family: var(--font-sans); color: var(--ink); }
.nv-arbre-svg .nv-fo-danger .nv-htitle-d {
  font-family: var(--font-serif); font-weight: 600; font-size: 14px;
  color: var(--danger); margin-bottom: 4px;
}
.nv-arbre-svg .nv-fo-danger .nv-sub-d { font-size: 11px; color: var(--ink-2); line-height: 1.35; }

/* Arrows / markers */
.nv-arbre-svg .cs-arrow path { fill: none; stroke-width: 2; }
.nv-arbre-svg .arr-warn   path { stroke: var(--warn); }
.nv-arbre-svg .arr-ok     path { stroke: var(--ok); }
.nv-arbre-svg .arr-danger path { stroke: var(--danger); }
.nv-arbre-svg .mh-ok     { fill: var(--ok); }
.nv-arbre-svg .mh-warn   { fill: var(--warn); }
.nv-arbre-svg .mh-danger { fill: var(--danger); }

/* Légende */
.nv-arbre-svg .nv-legende-g text {
  font-family: var(--font-mono); font-size: 11px; fill: var(--ink-2);
  letter-spacing: .04em;
}
.nv-arbre-svg .nv-leg-warn   { fill: var(--accent-orange-soft); stroke: var(--warn); }
.nv-arbre-svg .nv-leg-ok     { fill: var(--accent-green-soft);  stroke: var(--ok); }
.nv-arbre-svg .nv-leg-danger { fill: #f3dccf;                   stroke: var(--danger); }

/* Bilan en blocs (réutilisé de 190) */
.bilan1-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 8px; }
.bilan1-card {
  background: #fff; border: 1px solid var(--rule); border-radius: 3px;
  padding: 14px 16px; position: relative;
}
.bilan1-card .b-icon {
  position: absolute; top: -10px; left: 14px; background: var(--paper);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  color: var(--warn); text-transform: uppercase; padding: 0 8px;
}
.bilan1-card h5 { font-family: var(--font-serif); font-weight: 500; font-size: 15px; margin: 2px 0 8px; color: var(--ink); }
.bilan1-card ul { margin: 4px 0 0; padding-left: 20px; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.bilan1-card ul li { margin: 3px 0; }
.bilan1-card ul li b { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .nv-arbre-wrap { padding: 10px; }
  .nv-arbre-svg { min-width: 720px; }
  .bilan1-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   11 · Cartes profils terrains (8 cartes — gabarit 152)
   ============================================================ */
.profil-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.profil-card {
  background: var(--paper); border: 1px solid var(--rule);
  border-left: 4px solid var(--fam, var(--ink));
  border-radius: 4px; padding: 16px 18px;
}
.profil-card .pc-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.profil-card .pc-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--paper);
  background: var(--fam, var(--ink));
  padding: 3px 8px; border-radius: 2px; font-weight: 500;
}
.profil-card h4 {
  font-family: var(--font-serif); font-weight: 500; font-size: 18px;
  letter-spacing: -.005em; margin: 0; color: var(--ink);
}
.profil-card .pc-row {
  display: grid; grid-template-columns: 90px 1fr; gap: 8px 12px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--rule);
  font-size: 12px; color: var(--ink-2); line-height: 1.5;
}
.profil-card .pc-row:first-of-type { border-top: none; padding-top: 0; }
.profil-card .pc-row .pc-lbl {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); padding-top: 2px;
}
.profil-card .pc-row b { color: var(--ink); font-weight: 600; }
.profil-card .pc-piege {
  margin-top: 10px; padding: 10px 12px; background: #f3dccf;
  border-left: 3px solid var(--danger); border-radius: 3px;
  font-size: 12px; color: var(--ink-2); line-height: 1.5;
}
.profil-card .pc-piege::before {
  content: 'Piège QCM'; display: block;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em;
  color: var(--danger); text-transform: uppercase; margin-bottom: 4px;
}
.profil-card .pc-piege b { color: var(--ink); font-weight: 600; }

.zone-rares {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-left: 3px solid var(--ink-3); border-radius: 3px;
  padding: 14px 18px; margin-top: 18px;
}
.zone-rares h4 {
  font-family: var(--font-serif); font-weight: 500; font-size: 16px;
  margin: 0 0 8px; color: var(--ink-2);
}
.zone-rares ul { margin: 0; padding-left: 20px; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.zone-rares ul li { margin: 3px 0; }
.zone-rares ul li b { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .profil-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   12 · Cartes étiologies non infectieuses (6 cartes pièges)
   ============================================================ */
.pieges-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px;
}
.piege-card {
  background: var(--paper); border: 1px solid var(--rule);
  border-left: 4px solid var(--fam, var(--warn));
  border-radius: 4px; padding: 16px 18px;
}
.piege-card .pg-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fam, var(--warn));
  display: inline-block; padding: 2px 6px;
  background: color-mix(in oklab, var(--fam, var(--warn)) 12%, var(--paper));
  border-radius: 2px; margin-bottom: 6px;
}
.piege-card h4 {
  font-family: var(--font-serif); font-weight: 500; font-size: 17px;
  margin: 0 0 10px; color: var(--ink);
}
.piege-card ul { margin: 0; padding-left: 20px; font-size: 12.5px; color: var(--ink-2); line-height: 1.65; }
.piege-card ul li { margin: 5px 0; }
.piege-card ul li b { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .pieges-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   13 · Synthèse (table décompensation + checklist + connexes)
   ============================================================ */
.decomp-table {
  width: 100%; border-collapse: collapse; background: var(--paper);
  border: 1px solid var(--rule); margin-top: 8px;
}
.decomp-table th, .decomp-table td {
  padding: 10px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--rule); font-size: 13px;
}
.decomp-table thead th {
  background: var(--bg-2); font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); font-weight: 500;
}
.decomp-table tbody th {
  font-family: var(--font-serif); font-weight: 500; font-size: 14px;
  color: var(--ink); border-right: 1px solid var(--rule); width: 40%;
}
.decomp-table tbody td b { color: var(--ink); font-weight: 600; }

.checklist-table {
  width: 100%; border-collapse: collapse; background: var(--paper);
  border: 1px solid var(--rule); margin-top: 10px;
}
.checklist-table th, .checklist-table td {
  padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--rule);
  vertical-align: top; font-size: 12.5px;
}
.checklist-table 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);
}
.checklist-table tbody th {
  font-family: var(--font-serif); font-weight: 500; font-size: 14px; color: var(--ink);
  border-right: 1px solid var(--rule);
}
.checklist-table tbody td b { color: var(--ink); font-weight: 600; }
.checklist-table .ch-stars {
  font-family: var(--font-mono); font-size: 13px; color: var(--warn);
  letter-spacing: .04em; white-space: nowrap;
}
.checklist-table .ch-stars-7 { color: var(--danger); font-weight: 600; }

.pieges-classiques {
  margin-top: 22px;
  background: var(--paper); border: 1px solid var(--rule);
  border-left: 3px solid var(--danger); border-radius: 3px;
  padding: 16px 22px;
}
.pieges-classiques h4 {
  font-family: var(--font-serif); font-weight: 500; font-size: 17px;
  color: var(--danger); margin: 0 0 10px;
}
.pieges-classiques ol { margin: 0; padding-left: 22px; font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.pieges-classiques ol li { margin: 6px 0; }
.pieges-classiques ol li b { color: var(--ink); font-weight: 600; }

/* ============================================================
   Items EDN connexes (bloc bas synthèse)
   ============================================================ */
.items-connexes {
  margin-top: 28px;
  background: var(--paper); border: 1px solid var(--rule);
  border-left: 3px solid var(--spe-interne); border-radius: 3px;
  padding: 18px 22px;
}
.items-connexes h4 {
  font-family: var(--font-serif); font-weight: 500; font-size: 17px;
  color: var(--spe-interne); margin: 0 0 4px;
}
.items-connexes .ic-sub {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 14px;
}
.ic-list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.ic-card {
  display: grid; grid-template-columns: 50px 1fr 24px;
  gap: 12px; align-items: center;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 3px; padding: 10px 14px;
  color: inherit; text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.ic-card:hover {
  background: #fff;
  border-color: var(--spe-interne);
}
.ic-card .ic-num {
  font-family: var(--font-serif); font-style: italic;
  font-size: 26px; line-height: 1; color: var(--spe-interne);
  text-align: center;
}
.ic-card .ic-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ic-card .ic-titre {
  font-family: var(--font-serif); font-weight: 500; font-size: 14px;
  color: var(--ink);
}
.ic-card .ic-ctx {
  font-size: 11.5px; color: var(--ink-2); line-height: 1.4;
}
.ic-card .ic-arrow {
  font-family: var(--font-mono); font-size: 14px; color: var(--ink-3);
  text-align: center;
}
.ic-card:hover .ic-arrow { color: var(--spe-interne); }

@media (max-width: 1100px) {
  .ic-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .ic-list { grid-template-columns: 1fr; }
}

/* ============================================================
   Mobile · adaptations
   ============================================================ */
@media (max-width: 900px) {
  .keypoints,
  .def-grid                     { grid-template-columns: 1fr; }
  .mmwrap                       { height: 560px; }
}

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