/* =============================================================
   atlas-edn · Item 143 (Soins palliatifs en pédiatrie)
   Matière Douleur & Anesthésie (mat-douleur — palette posée par 137/138)
   Variables CSS uniquement — pas de couleurs en dur.
   Réutilise les classes génériques de item-138.css quand possible
   (.kp-grid, .def-grid, .profil-card, .alerte-rouge, .bg-soft,
    .natif-table, .schema-fig, .regle-or, .vignette, .vg-tag,
    .ludic-block, .ludic-card).
   ============================================================= */

/* ---------- Mindmap : couleurs des familles ---------- */
.fam-pop .node-accent      { fill: var(--accent, var(--spe-douleur)); }
.fam-legal .node-accent    { fill: var(--accent-strong, var(--spe-douleur)); }
.fam-lat .node-accent      { fill: var(--accent-blue); }
.fam-demarche .node-accent { fill: var(--accent-green); }
.fam-peri .node-accent     { fill: var(--accent-orange); }
.fam-deuil .node-accent    { fill: var(--spe-neuro); }

.node-sat.sat-danger .sat-bg {
  fill: var(--alert-red-soft);
  stroke: var(--alert-red);
  stroke-width: 1.5;
}
.node-sat.sat-danger .sat-title { fill: var(--alert-red); font-weight: 600; }

/* ---------- Vignette · Keypoints · Définitions
              (héritent de .kp-grid / .def-grid / .vignette) ---------- */
/* (Pas de redéfinition — voir assets/item-138.css) */

/* ---------- Tableau natif (commun à tous les onglets)
              hérité de item-138.css ---------- */

/* ---------- Onglet 04 : Populations (6 cards-profil flashcard rubricée) ---------- */
.populations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.population-card {
  border-left: 4px solid var(--accent, var(--spe-douleur));
  padding: 14px 16px;
}
.population-card .profil-card-title {
  font-size: 15.5px;
  color: var(--accent-strong, var(--spe-douleur));
}

/* ---------- Onglet 06 : Cadre légal & éthique ---------- */
.autonomie-bloc {
  background: var(--accent-soft, var(--bg-card));
  border-left: 4px solid var(--accent-strong, var(--spe-douleur));
}
.procedure-blocs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 12px 0 18px;
}
.procedure-bloc {
  background: var(--bg-card);
  border: 1px solid var(--accent-border);
  border-left: 4px solid var(--accent, var(--spe-douleur));
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.procedure-bloc h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-strong, var(--spe-douleur));
  margin: 0 0 6px;
}
.procedure-bloc ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
}
.procedure-bloc li { margin-bottom: 4px; }

/* ---------- Schéma 1 — LAT limitation vs arrêt ---------- */
.lat-titre {
  fill: var(--accent-soft, var(--bg-card));
  stroke: var(--accent-strong, var(--spe-douleur));
  stroke-width: 1.5;
}
.lat-titre-t { fill: var(--accent-strong, var(--spe-douleur)); }
.lat-card rect {
  fill: var(--bg-cream);
  stroke-width: 2;
}
.lat-card text { fill: var(--ink); }
.lat-limit rect {
  stroke: var(--accent, var(--spe-douleur));
  fill: color-mix(in oklab, var(--accent, var(--spe-douleur)) 6%, var(--bg-cream));
}
.lat-arret rect {
  stroke: var(--accent-strong, var(--spe-douleur));
  fill: color-mix(in oklab, var(--accent-strong, var(--spe-douleur)) 8%, var(--bg-cream));
}
.lat-sep {
  stroke: var(--accent-dash);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

/* ---------- Schéma 2 — Triangulation enfant-parents-soignants ---------- */
.tri-shape {
  fill: var(--accent-soft, var(--bg-cream));
  stroke: var(--accent-dash);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  fill-opacity: 0.4;
}
.tri-node ellipse {
  fill: var(--bg-card);
  stroke-width: 2;
}
.tri-node text { fill: var(--ink); }
.tri-enfant ellipse    { stroke: var(--accent, var(--spe-douleur)); fill: color-mix(in oklab, var(--accent, var(--spe-douleur)) 8%, var(--bg-card)); }
.tri-parents ellipse   { stroke: var(--accent-blue); fill: color-mix(in oklab, var(--accent-blue) 10%, var(--bg-card)); }
.tri-soignants ellipse { stroke: var(--accent-strong, var(--spe-douleur)); fill: color-mix(in oklab, var(--accent-strong, var(--spe-douleur)) 12%, var(--bg-card)); }
.tri-link {
  stroke: var(--accent-strong, var(--spe-douleur));
  stroke-width: 1.6;
}
.tri-arrow { fill: var(--accent-strong, var(--spe-douleur)); }
.tri-center {
  fill: var(--accent-strong, var(--spe-douleur));
  stroke: none;
}
.tri-center-t { fill: var(--bg-card); }

/* ---------- Schéma 3 — Soins de développement (bébé + 6 pétales) ---------- */
.sd-baby {
  fill: var(--accent, var(--spe-douleur));
  stroke: var(--accent-strong, var(--spe-douleur));
  stroke-width: 2;
}
.sd-baby-t { fill: var(--bg-card); }
.sd-petal ellipse {
  fill: var(--bg-cream);
  stroke: var(--accent, var(--spe-douleur));
  stroke-width: 1.5;
}
.sd-petal text { fill: var(--ink); }
.sd-petal-danger ellipse {
  fill: var(--alert-red-soft);
  stroke: var(--alert-red);
  stroke-width: 2;
}
.sd-petal-danger text { fill: var(--ink); }
.sd-petal-strong ellipse {
  fill: color-mix(in oklab, var(--accent-strong, var(--spe-douleur)) 12%, var(--bg-cream));
  stroke: var(--accent-strong, var(--spe-douleur));
  stroke-width: 2;
}

/* ---------- Onglet 10 : Soins de développement — 6 axes en grille ---------- */
.soindev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 12px 0 18px;
}
.soindev-axe {
  background: var(--bg-card);
  border: 1px solid var(--accent-border);
  border-left: 4px solid var(--accent, var(--spe-douleur));
  border-radius: var(--radius-md);
  padding: 12px 14px;
  text-align: left;
}
.soindev-axe-danger {
  border-left-color: var(--alert-red);
  background: var(--alert-red-soft);
}
.soindev-icone {
  font-size: 22px;
  margin-bottom: 6px;
  line-height: 1;
}
.soindev-axe h4 {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--accent-strong, var(--spe-douleur));
}
.soindev-axe-danger h4 { color: var(--alert-red); }
.soindev-axe p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
}

/* ---------- Schéma 4 — Échelle d'âges et seuils périnataux ---------- */
.seuil-titre {
  fill: var(--accent-soft, var(--bg-card));
  stroke: var(--accent-strong, var(--spe-douleur));
  stroke-width: 1.5;
}
.seuil-titre-t { fill: var(--accent-strong, var(--spe-douleur)); }
.seuil-axe {
  stroke: var(--accent-strong, var(--spe-douleur));
  stroke-width: 2;
}
.seuil-tick {
  stroke: var(--accent, var(--spe-douleur));
  stroke-width: 2;
}
.seuil-tick-strong { stroke: var(--accent-strong, var(--spe-douleur)); stroke-width: 3; }
.seuil-tick-danger { stroke: var(--alert-red); stroke-width: 3; }
.seuil-danger-t { fill: var(--alert-red); font-weight: 600; }
.schema-seuils text { fill: var(--ink); }
.seuil-plage {
  fill: var(--accent-soft, var(--bg-card));
  stroke: var(--accent-strong, var(--spe-douleur));
  stroke-width: 1.5;
}
.seuil-plage-t { fill: var(--accent-strong, var(--spe-douleur)); }

/* ---------- Onglet 12 : Deuil périnatal (4 cards-profil 2×2) ---------- */
.deuil-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.deuil-card {
  border-left: 4px solid var(--spe-neuro);
}
.deuil-card .profil-card-title {
  color: var(--spe-neuro);
  font-size: 15.5px;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .populations-grid,
  .deuil-grid,
  .procedure-blocs,
  .soindev-grid {
    grid-template-columns: 1fr;
  }
}