/* ==========================================================================
   Item 301 · Tumeurs du côlon et du rectum (Hépato-gastro-entérologie)
   Premier item HGE du corpus — squelette de référence pour 303/304/305/308.
   Palette hepato dominante (--spe-hepato terracotta) + accents onco/genetique/anapath/radio.
   ========================================================================== */

:root {
  --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;
  --info:     #2f5e7a;

  /* Familles thématiques (hepato dominante terracotta) */
  --fam-hepato:    var(--spe-hepato);
  --fam-onco:      var(--spe-onco, #c4366b);
  --fam-anapath:   var(--spe-anapath, #6e3f8a);
  --fam-radio:     var(--spe-radio, #7a5a3a);
  --fam-genetique: var(--spe-genetique, #6b9c4d);

  /* Mindmap branches */
  --fam-epidemio:   var(--spe-hepato);
  --fam-fr-risque:  var(--warn);
  --fam-anapath:    var(--spe-anapath, #6e3f8a);
  --fam-depistage:  var(--spe-radio, #7a5a3a);
  --fam-pec-loc:    var(--spe-onco, #c4366b);
  --fam-complic:    var(--danger);

  /* Définitions par clé */
  --fam-adenome:     var(--spe-anapath, #6e3f8a);
  --fam-filiation:   var(--warn);
  --fam-adk-lieber:  var(--spe-onco, #c4366b);
  --fam-mesorectum:  var(--spe-hepato);
  --fam-crm:         var(--info);
  --fam-msi:         var(--spe-genetique, #6b9c4d);
  --fam-caecum:      var(--danger);

  /* Profils génétiques */
  --fam-piege-paf:        var(--danger);
  --fam-piege-map:        var(--warn);
  --fam-piege-peutz:      var(--info);
  --fam-piege-cowden:     var(--spe-anapath, #6e3f8a);
  --fam-piege-juvenile:   var(--spe-onco, #c4366b);

  /* Pièges QCM-killers */
  --fam-piege-occlusion:    var(--danger);
  --fam-piege-chirurgie:    var(--warn);
  --fam-piege-surveillance: var(--info);
  --fam-piege-biothera:     var(--spe-onco, #c4366b);
  --fam-piege-genetique:    var(--spe-genetique, #6b9c4d);
  --fam-piege-anatomie:     var(--spe-radio, #7a5a3a);
  --fam-piege-anapath:      var(--spe-anapath, #6e3f8a);
}

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

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

/* ============ Mindmap (7 branches) ============ */
#mm-svg .ring             { fill: none; stroke: var(--rule-2); stroke-dasharray: 3 5; opacity: .35; }
#mm-svg .link.main        { fill: none; stroke: var(--rule); stroke-width: 2; opacity: .55; }
#mm-svg .link.sat         { fill: none; stroke: var(--rule); stroke-width: 1; opacity: .4; stroke-dasharray: 2 3; }
#mm-svg .root-circle      { fill: var(--bg-dark); stroke: var(--spe-hepato); stroke-width: 2; }
#mm-svg .root-text        { fill: var(--paper); font-family: var(--font-serif); }
#mm-svg .node-bg          { fill: var(--paper); stroke: var(--rule); stroke-width: 1; }
#mm-svg .node-card { cursor: pointer; }
#mm-svg .node-card:hover .node-bg { fill: var(--paper-2); }
#mm-svg .node-accent      { fill: var(--mat, var(--spe-hepato)); }
#mm-svg .node-chip        { fill: var(--mat, var(--spe-hepato)); opacity: .9; }
#mm-svg .node-chip-t      { fill: #fff; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; }
#mm-svg .node-title       { fill: var(--ink); font-family: var(--font-serif); font-size: 18px; font-style: italic; }
#mm-svg .node-sub         { fill: var(--ink-3); font-family: var(--font-sans); font-size: 12px; }
#mm-svg .node-sat         { cursor: pointer; }
#mm-svg .node-sat .sat-bg { fill: var(--bg-2); stroke: var(--rule); stroke-width: 1; }
#mm-svg .node-sat:hover .sat-bg { fill: var(--bg-3); }
#mm-svg .node-sat .sat-title { fill: var(--ink); font-family: var(--font-sans); font-size: 13px; }

#mm-svg .fam-epidemio  .node-accent, #mm-svg .fam-epidemio  .node-chip { fill: var(--spe-hepato); }
#mm-svg .fam-fr-risque .node-accent, #mm-svg .fam-fr-risque .node-chip { fill: var(--warn); }
#mm-svg .fam-genetique .node-accent, #mm-svg .fam-genetique .node-chip { fill: var(--spe-genetique); }
#mm-svg .fam-anapath   .node-accent, #mm-svg .fam-anapath   .node-chip { fill: var(--spe-anapath); }
#mm-svg .fam-depistage .node-accent, #mm-svg .fam-depistage .node-chip { fill: var(--spe-radio); }
#mm-svg .fam-pec-loc   .node-accent, #mm-svg .fam-pec-loc   .node-chip { fill: var(--spe-onco); }
#mm-svg .fam-complic   .node-accent, #mm-svg .fam-complic   .node-chip { fill: var(--danger); }

/* ============ Vignettes ============ */
.vignettes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 10px 0 18px; }
@media (max-width: 900px) { .vignettes-grid { grid-template-columns: 1fr; } }
.vignette { background: var(--paper); border: 1px solid var(--rule); border-left: 4px solid var(--spe-hepato); border-radius: 4px; padding: 16px 18px; }
.vignette.vignette-cas2 { border-left-color: var(--danger); }
.vg-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-3); margin-bottom: 8px; }
.vignette p { margin: 0 0 12px; line-height: 1.55; }
.vg-question { font-style: italic; color: var(--ink-2); border-top: 1px dashed var(--rule); padding-top: 10px; font-size: 14px; }
.vg-trap-global { background: var(--bg-2); border-left: 4px solid var(--warn); border-radius: 4px; padding: 14px 16px; margin: 14px 0 24px; font-size: 14px; line-height: 1.55; }

/* ============ Lane (keypoints) ============ */
.lane { background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 14px 18px; margin: 10px 0 18px; }
.lane-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lane-h .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--spe-hepato); }
.lane-h h3 { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 18px; }
.lane-h .kind { color: var(--ink-3); font-size: 12px; font-family: var(--font-mono); letter-spacing: .1em; }
.kp-list { margin: 0 0 0 18px; padding: 0; }
.kp-list li { margin-bottom: 10px; line-height: 1.55; }

/* ============ Définitions ============ */
.def-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0 24px; }
@media (max-width: 900px) { .def-grid { grid-template-columns: 1fr; } }
.def-card { background: var(--paper); border: 1px solid var(--rule); border-left: 4px solid var(--mat, var(--spe-hepato)); border-radius: 4px; padding: 14px 16px; }
.def-card.fam-adenome     { border-left-color: var(--fam-adenome); }
.def-card.fam-filiation   { border-left-color: var(--fam-filiation); }
.def-card.fam-adk-lieber  { border-left-color: var(--fam-adk-lieber); }
.def-card.fam-mesorectum  { border-left-color: var(--fam-mesorectum); }
.def-card.fam-crm         { border-left-color: var(--fam-crm); }
.def-card.fam-msi         { border-left-color: var(--fam-msi); }
.def-card.fam-caecum      { border-left-color: var(--fam-caecum); }
.def-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.def-head h3 { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 18px; }
.def-sub { font-size: 12px; color: var(--ink-3); }
.def-card p { margin: 0 0 8px; line-height: 1.55; }
.def-pillar { background: var(--bg-2); padding: 8px 10px; border-radius: 3px; font-size: 13px; }

/* ============ Hbox helper ============ */
.hbox {
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-auto-rows: min-content;
  gap: 6px 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--spe-hepato);
  border-radius: 4px;
  padding: 12px 14px;
  margin: 10px 0 14px;
}
.hbox.fam-warn     { border-left-color: var(--warn); }
.hbox.fam-danger   { border-left-color: var(--danger); }
.hbox.fam-ok       { border-left-color: var(--ok); }
.hbox.fam-info     { border-left-color: var(--info); }
.hbox.fam-onco     { border-left-color: var(--spe-onco); }
.hbox.fam-anapath  { border-left-color: var(--spe-anapath); }
.hbox.fam-radio    { border-left-color: var(--spe-radio); }
.hbox.fam-genetique{ border-left-color: var(--spe-genetique); }
.hbox > .n {
  grid-column: 1;
  grid-row: 1;                  /* place .n explicitement en row 1, ne crée pas de rows fantômes */
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink-3);
  padding-top: 4px;
  align-self: start;
}
.hbox > *:not(.n) {
  grid-column: 2;               /* force h5, p, ul, etc. en col 2 — empêche la 3e col implicite */
}
.hbox h5 { margin: 0 0 8px; font-family: var(--font-serif); font-style: italic; font-size: 17px; }
.hbox p, .hbox ul { margin: 0; line-height: 1.55; }
.hbox ul { padding-left: 18px; }
.hbox li { margin-bottom: 4px; }

/* ============ ic-table ============ */
.ic-table { width: 100%; border-collapse: collapse; margin: 10px 0 18px; background: var(--paper); }
.ic-table th, .ic-table td { padding: 10px 12px; text-align: left; vertical-align: top; border: 1px solid var(--rule); font-size: 14px; line-height: 1.5; }
.ic-table thead th { background: var(--bg-2); font-family: var(--font-serif); font-style: italic; font-size: 15px; }
.ic-table tbody th { background: var(--paper-2); font-weight: 600; width: 22%; }
.ic-table tbody tr:nth-child(even) td { background: var(--paper-2); }
.ic-table b { color: var(--ink); }

/* ============ Profils génétiques ============ */
.profils-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0 24px; }
@media (max-width: 900px) { .profils-grid { grid-template-columns: 1fr; } }
.profil-card { background: var(--paper); border: 1px solid var(--rule); border-left: 5px solid var(--spe-genetique); border-radius: 4px; padding: 14px 16px; font-size: 13.5px; line-height: 1.55; }
.profil-card.fam-genetique     { border-left-color: var(--spe-genetique); }
.profil-card.fam-piege-paf      { border-left-color: var(--danger); }
.profil-card.fam-piege-map      { border-left-color: var(--warn); }
.profil-card.fam-piege-peutz    { border-left-color: var(--info); }
.profil-card.fam-piege-cowden   { border-left-color: var(--spe-anapath); }
.profil-card.fam-piege-juvenile { border-left-color: var(--spe-onco); }
.profil-head h3 { margin: 0 0 10px; font-family: var(--font-serif); font-style: italic; font-size: 19px; }
.profil-block { margin-bottom: 7px; }
.profil-block ul { margin: 4px 0 0 16px; padding: 0; }
.profil-block li { margin-bottom: 3px; }
.profil-piege { margin-top: 10px; padding: 8px 10px; background: var(--bg-2); border-radius: 3px; font-size: 13px; font-style: italic; color: var(--ink-2); }

/* ============ Schémas SVG ============ */
.schema-host { margin: 12px 0 18px; }
.schema-svg { width: 100%; height: auto; max-height: 540px; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 10px; }
.schema-lbl   { font-family: var(--font-sans); font-size: 12px; fill: var(--ink); }
.schema-lbl-w { font-family: var(--font-sans); font-size: 12px; fill: #fff; }

/* ============ Alerte rouge ============ */
.alerte-rouge {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  background: #f3dccf;
  border-left: 4px solid var(--danger);
  border-radius: 4px;
  padding: 12px 14px;
  margin: 12px 0;
}
.alerte-rouge.fam-info { background: #d9e6ef; border-left-color: var(--info); }
.alerte-rouge .ar-icon { font-size: 24px; line-height: 1; color: var(--danger); text-align: center; padding-top: 4px; }
.alerte-rouge.fam-info .ar-icon { color: var(--info); }
.alerte-rouge .ar-body h4 { margin: 0 0 6px; font-family: var(--font-serif); font-size: 16px; }
.alerte-rouge .ar-body p { margin: 0; line-height: 1.55; font-size: 14px; }

.commun-note { background: var(--bg-2); border-left: 3px solid var(--ink-3); padding: 10px 14px; margin: 10px 0 14px; font-size: 14px; line-height: 1.55; border-radius: 3px; }
.commun-note.fam-danger { background: #f3dccf; border-left-color: var(--danger); }
.rxt-intro { background: var(--paper); border: 1px dashed var(--rule); border-radius: 4px; padding: 12px 14px; line-height: 1.55; margin: 10px 0 16px; font-size: 14.5px; }

/* ============ Images TDM ============ */
.images-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 18px; }
@media (max-width: 900px) { .images-grid { grid-template-columns: 1fr; } }
.img-tdm { background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 10px; }
.img-tdm img { width: 100%; height: auto; display: block; border-radius: 3px; }
.img-tdm figcaption { font-size: 13px; color: var(--ink-2); padding: 8px 4px 0; line-height: 1.5; }

/* ============ Pièges QCM-killers ============ */
.pieges-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 12px 0 24px; }
@media (max-width: 900px) { .pieges-grid { grid-template-columns: 1fr; } }
.piege-card { background: var(--paper); border: 1px solid var(--rule); border-left: 5px solid var(--danger); border-radius: 4px; padding: 14px 16px; font-size: 14px; line-height: 1.5; }
.piege-card.fam-piege-occlusion    { border-left-color: var(--danger); }
.piege-card.fam-piege-chirurgie    { border-left-color: var(--warn); }
.piege-card.fam-piege-surveillance { border-left-color: var(--info); }
.piege-card.fam-piege-biothera     { border-left-color: var(--spe-onco); }
.piege-card.fam-piege-genetique    { border-left-color: var(--spe-genetique); }
.piege-card.fam-piege-anatomie     { border-left-color: var(--spe-radio); }
.piege-card.fam-piege-anapath      { border-left-color: var(--spe-anapath); }
.piege-affirm { font-style: italic; font-size: 15px; margin-bottom: 8px; color: var(--ink); }
.piege-verdict { display: inline-block; padding: 3px 10px; border-radius: 3px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; margin-bottom: 10px; }
.piege-verdict-faux { background: #f3dccf; color: var(--danger); }
.piege-verdict-vrai { background: #d4e5cc; color: var(--ok); }
.piege-pourquoi, .piege-bonne { margin-bottom: 6px; }

/* ============ Sec-title ============ */
.sec-title { display: flex; align-items: baseline; gap: 14px; margin: 22px 0 8px; }
.sec-title .sec-num { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: .14em; min-width: 60px; }
.sec-title h2 { margin: 0; font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.sec-title .rule { flex: 1; height: 1px; background: var(--rule); }
.sec-title .hint { font-size: 12px; color: var(--ink-3); font-style: italic; }
.sec-title .rang-tag { font-family: var(--font-mono); font-size: 11px; padding: 2px 8px; border-radius: 3px; background: var(--bg-2); }
.sec-title .rang-a { background: #e2c0a8; color: var(--danger); }
.sec-title .rang-b { background: #d9e6ef; color: var(--info); }