/* =============================================================
   atlas-edn · Item 137 (Douleur chez l'enfant)
   Matière Douleur & Anesthésie (mat-douleur)
   Variables CSS uniquement — pas de couleurs en dur.
   ============================================================= */

/* ---------- Mindmap : couleurs des familles ---------- */
.fam-dev .node-accent     { fill: var(--accent, var(--spe-douleur)); }
.fam-reperer .node-accent { fill: var(--spe-infectio); }
.fam-echelle .node-accent { fill: var(--spe-cardio); }
.fam-prev .node-accent    { fill: var(--accent-green); }
.fam-paliers .node-accent { fill: var(--accent-orange); }
.fam-piege .node-accent   { fill: var(--alert-red); }

.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 ---------- */
.kp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.kp-card {
  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: 14px 16px;
  position: relative;
}
.kp-card .kp-num {
  position: absolute;
  top: 10px; right: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
}
.kp-card h3 {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--accent-strong, var(--spe-douleur));
  margin: 0 0 6px;
  padding-right: 24px;
}
.kp-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}

.def-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.def-card-mini {
  background: var(--bg-card);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.def-card-mini h4 {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-strong, var(--spe-douleur));
  margin: 0 0 6px;
}
.def-card-mini p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
}

/* ---------- Profil-cards génériques (stades, molécules, situations) ---------- */
.profil-card {
  background: var(--bg-card);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profil-card-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--accent-strong, var(--spe-douleur));
  margin: 0 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--accent-dash);
}
.profil-card .ludic-block {
  margin: 0;
}
.profil-card .ludic-block b {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: 2px;
}
.profil-card .ludic-block p,
.profil-card .ludic-block ul {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.5;
}
.profil-card .ludic-block ul {
  padding-left: 18px;
}
.profil-card .ludic-block li {
  margin-bottom: 3px;
}

/* ---------- Onglet 04 : Stades développementaux + Composantes ---------- */
#stades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.stade-card {
  border-left: 4px solid var(--accent, var(--spe-douleur));
}
.composantes-intro {
  background: var(--bg-card);
  border-left: 3px solid var(--accent-blue);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  margin: 18px 0 12px;
  font-size: 13px;
  line-height: 1.55;
}
.compo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.compo-card {
  background: var(--bg-card);
  border: 1px solid var(--accent-border);
  border-top: 3px solid var(--spe-cardio);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.compo-card h4 {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--accent-strong, var(--spe-douleur));
}
.compo-card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
}

/* ---------- Onglet 05 : Repérage clinique ---------- */
#reperer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.reperer-card {
  background: var(--bg-card);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.reperer-card.tone-spec   { border-left: 4px solid var(--accent-green); }
.reperer-card.tone-orange { border-left: 4px solid var(--accent-orange); }
.reperer-card.tone-red    { border-left: 4px solid var(--alert-red); }
.reperer-card h4 {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 8px;
}
.reperer-card.tone-spec h4   { color: var(--accent-green-strong); }
.reperer-card.tone-orange h4 { color: var(--accent-orange); }
.reperer-card.tone-red h4    { color: var(--alert-red); }
.reperer-card ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
}
.reperer-card li { margin-bottom: 4px; }

/* ---------- Onglet 06 : Échelles (tableaux + schémas) ---------- */
.natif-table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 18px;
  background: var(--bg-card);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 13px;
}
.natif-table thead {
  background: color-mix(in oklab, var(--accent, var(--spe-douleur)) 12%, var(--bg-card));
}
.natif-table th {
  text-align: left;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-strong, var(--spe-douleur));
  border-bottom: 1px solid var(--accent-border);
}
.natif-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--accent-border);
  vertical-align: top;
  line-height: 1.5;
}
.natif-table tr:last-child td { border-bottom: none; }
.natif-table tr:hover td { background: color-mix(in oklab, var(--accent-soft, var(--bg-cream)) 30%, var(--bg-card)); }

.table-note {
  font-size: 12px;
  color: var(--ink-muted);
  font-style: italic;
  margin: -10px 0 14px;
}

.schemas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin: 16px 0;
  align-items: start;
}
.schema-fig {
  background: var(--bg-card);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 0;
  text-align: center;
}
.schema-fig.fig-fps { grid-column: 1 / -1; }
.schema-svg {
  width: 100%;
  max-width: 200px;
  height: auto;
  color: var(--accent-strong, var(--spe-douleur));
}
.fig-fps .schema-svg { max-width: 360px; }
.schema-stroke {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.schema-fig figcaption {
  font-size: 12px;
  color: var(--ink-muted);
  font-style: italic;
  margin-top: 10px;
  line-height: 1.4;
}

/* ---------- Onglet 07 : Prévention ---------- */
.cards-3-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.prev-card {
  background: var(--bg-card);
  border: 1px solid var(--accent-border);
  border-top: 3px solid var(--accent-green);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.prev-card h4 {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--accent-green-strong);
}
.prev-card ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
}
.prev-card li { margin-bottom: 4px; }

/* ---------- Onglet 08 : Principes ---------- */
.cards-2x2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.princ-card {
  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: 14px 16px;
}
.princ-card h4 {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--accent-strong, var(--spe-douleur));
}
.princ-card ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
}
.princ-card li { margin-bottom: 4px; }

/* ---------- Onglet 09 : Paliers (note pédago) ---------- */
.card-pedago {
  background: color-mix(in oklab, var(--accent-soft, var(--bg-cream)) 50%, var(--bg-card));
  border: 1px solid var(--accent-border);
  border-left: 4px solid var(--accent-blue);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin: 12px 0;
}
.card-pedago h4 {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--accent-blue);
}
.card-pedago p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
}

/* ---------- Onglet 10 : Molécules (profil-cards) ---------- */
#molecules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.mol-card.tone-safe    { border-left: 4px solid var(--accent-green); }
.mol-card.tone-caution { border-left: 4px solid var(--accent-orange); }
.mol-card.tone-danger  { border-left: 4px solid var(--alert-red); }

.mol-card.tone-danger .profil-card-title {
  color: var(--alert-red);
}

/* ---------- Onglet 12 : Situations cliniques ---------- */
#situations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.situation-card {
  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: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.situation-card .ludic-block.sit-modere   b { color: var(--accent-green-strong); }
.situation-card .ludic-block.sit-severe   b { color: var(--accent-orange); }
.situation-card .ludic-block.sit-pieges   b { color: var(--alert-red); }
.situation-card .ludic-block ul {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
}
.situation-card .ludic-block li { margin-bottom: 3px; }
.situation-card .ludic-block p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

/* ---------- Onglet 13 : Pièges & alertes EDN (grille) ---------- */
#pieges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.piege-card { margin: 0; }

/* ---------- Alertes rouges (commun) ---------- */
.alerte-rouge {
  background: var(--alert-red-soft);
  border-left: 4px solid var(--danger, var(--alert-red));
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 14px 0;
}
.alerte-rouge h4 {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--danger, var(--alert-red));
}
.alerte-rouge p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}