/* ==========================================================================
   Item 135 · Thérapeutiques antalgiques
   Architecture : pharmaco transversale (3 paliers OMS) + 2 arbres décisionnels
   ========================================================================== */

: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;
  --grey:     #5a6e7e;

  /* Familles thématiques de l'item 135 (mindmap) — --spe-douleur défini dans styles.css */
  --fam-strat: var(--spe-douleur);     /* stratégie OMS · turquoise éteint */
  --fam-p1:    var(--spe-pneumo);      /* palier 1 · vert olive (PCT, doux) */
  --fam-p2:    var(--spe-orl);         /* palier 2 · ocre (codéine/tramadol) */
  --fam-p3:    var(--danger);          /* palier 3 · rouge (opioïdes forts) */
  --fam-co:    var(--spe-neuro);       /* co-analgésiques · aubergine */
  --fam-cas:   var(--spe-interne);     /* cas particuliers · brun-tabac */
  --fam-nm:    var(--ok);              /* non médicamenteuses · vert */
}

/* Élargissement local de la zone de contenu pour les tableaux géants */
.content { max-width: 1400px; }

@keyframes douleur-fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.content-panel.active { animation: douleur-fadeIn .35s ease-out; }

/* Utilitaires textuels */
.mono   { font-family: var(--font-mono); font-feature-settings: "ss01"; }
.serif  { font-family: var(--font-serif); font-optical-sizing: auto; }
.muted  { color: var(--ink-3); }
.danger { color: var(--danger); }
.warn   { color: var(--warn); }
.ok     { color: var(--ok); }
hr.soft { border: none; border-top: 1px dashed var(--rule); margin: 20px 0; }

/* ==========================================================================
   PROFIL-CARD — pattern flashcard validé item 99/152
   Wrapper .profil-card + .ludic-block .profil-row avec <b>Label:</b><p>valeur</p>
   ========================================================================== */
.profil-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 18px;
  margin: 14px 0 20px;
}
.profil-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--mat, var(--spe-douleur));
  border-radius: 8px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profil-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 6px;
  letter-spacing: -.005em;
  color: var(--ink);
  border-bottom: 1px dashed var(--rule);
  padding-bottom: 8px;
}
.profil-row {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 13.5px;
  line-height: 1.55;
}
.profil-row > b {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.profil-row > p {
  margin: 0;
  color: var(--ink);
}

/* ==========================================================================
   CO-ANALGÉSIQUES — grille de cards par classe
   ========================================================================== */
.coana-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin: 14px 0;
}
.coana-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--fam-co);
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coana-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--ink);
  border-bottom: 1px dashed var(--rule);
  padding-bottom: 6px;
}
.coana-card .ludic-block {
  font-size: 13px;
  line-height: 1.5;
}
.coana-card .ludic-block ul {
  margin: 4px 0 0 16px;
  padding: 0;
}
.coana-card .ludic-block ul li {
  margin: 2px 0;
}

/* ==========================================================================
   AL-CARDS · NM-CARDS · OUTILS-CARDS
   ========================================================================== */
.al-grid,
.nm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin: 14px 0;
}
.al-card,
.nm-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--mat, var(--spe-douleur));
  border-radius: 8px;
  padding: 14px 16px;
}
.al-card h4,
.nm-card h4 {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--ink);
}
.al-card ul,
.nm-card ul {
  margin: 0 0 0 16px;
  padding: 0;
  font-size: 13px;
  line-height: 1.55;
}
.al-card ul li,
.nm-card ul li {
  margin: 3px 0;
}

.outils-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.outils-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 12px 14px;
}
.outils-card h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 4px;
}
.outils-card p {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================================
   SURVEILLANCE EDS/EQR + Bell-Magendie · Naloxone titration
   ========================================================================== */
.surv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin: 14px 0;
}
.surv-block {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px 16px;
}
.surv-block h4 {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--ink);
}
.surv-block ul {
  margin: 0 0 0 16px;
  padding: 0;
  font-size: 13px;
  line-height: 1.6;
}
.surv-block.surv-bell p {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}

/* ==========================================================================
   VIGNETTE
   ========================================================================== */
.vignette {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--spe-douleur);
  border-radius: 8px;
  padding: 18px 22px;
  margin: 14px 0 20px;
}
.vignette .vg-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.vignette p {
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 12px;
}
.vignette .vg-trap {
  font-size: 13px;
  line-height: 1.6;
  background: var(--bg-2);
  padding: 10px 14px;
  border-radius: 6px;
  margin-top: 12px;
  color: var(--ink-2);
}

/* ==========================================================================
   DÉFINITIONS · grille
   ========================================================================== */
.def-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.def-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 12px 14px;
}
.def-card h3 {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 2px;
  color: var(--ink);
}
.def-card .def-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.def-card p {
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

/* ==========================================================================
   SEMIO-BLOCK (réutilisé : démarche, multimodalité, voies, recepteurs…)
   ========================================================================== */
.semio-block {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 10px 0;
}
.semio-block h4 {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--ink);
}
.semio-block p {
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0 0 6px;
}
.semio-block ul {
  margin: 6px 0 0 18px;
  padding: 0;
  font-size: 13px;
  line-height: 1.6;
}

/* ==========================================================================
   TABLEAUX (réutilise .matrix.ludic-table de styles.css/components.css)
   Surcharges locales : fines bordures, padding souple
   ========================================================================== */
.matrix {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 14px;
  font-size: 13px;
}
.matrix th,
.matrix td {
  border: 1px solid var(--rule);
  padding: 8px 12px;
  text-align: left;
  line-height: 1.5;
  vertical-align: top;
}
.matrix thead th {
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
.matrix tbody th {
  background: var(--paper);
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--ink);
  width: 1%;
  white-space: nowrap;
}
.matrix tbody tr:nth-child(even) td,
.matrix tbody tr:nth-child(even) th { background: color-mix(in oklab, var(--paper) 92%, var(--bg-2)); }

/* ==========================================================================
   MINDMAP — styles SVG (conformes pattern items/213, 194)
   ========================================================================== */
.mmwrap {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 720px;
  margin: 10px 0;
}
.mmwrap .canvas {
  width: 100%;
  height: 100%;
  cursor: grab;
}
.mmwrap .canvas:active { cursor: grabbing; }
.mmwrap .ring         { fill: none; stroke: var(--rule); stroke-dasharray: 2 4; opacity: .5; }
.mmwrap .link.main    { fill: none; stroke: var(--rule-2); stroke-width: 2; }
.mmwrap .link.sat     { fill: none; stroke: var(--rule); stroke-dasharray: 3 4; }
.mmwrap .root-circle  { fill: var(--bg-dark); stroke: var(--accent-dash); stroke-width: 2; }
.mmwrap .root-text    { fill: var(--ink-inverse); font-family: var(--font-serif); }
.mmwrap .node-bg      { fill: var(--paper); stroke: var(--rule); stroke-width: 1; }
.mmwrap .node-accent  { fill: var(--mat, var(--spe-douleur)); }
.mmwrap .node-card.fam-strat .node-accent { fill: var(--fam-strat); }
.mmwrap .node-card.fam-p1    .node-accent { fill: var(--fam-p1); }
.mmwrap .node-card.fam-p2    .node-accent { fill: var(--fam-p2); }
.mmwrap .node-card.fam-p3    .node-accent { fill: var(--fam-p3); }
.mmwrap .node-card.fam-co    .node-accent { fill: var(--fam-co); }
.mmwrap .node-card.fam-cas   .node-accent { fill: var(--fam-cas); }
.mmwrap .node-card.fam-nm    .node-accent { fill: var(--fam-nm); }
.mmwrap .node-chip    { fill: var(--bg-2); }
.mmwrap .node-chip-t  { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-2); letter-spacing: .06em; }
.mmwrap .node-title   { font-family: var(--font-serif); font-size: 16px; fill: var(--ink); }
.mmwrap .node-sub     { font-family: var(--font-sans); font-size: 12px; fill: var(--ink-3); }
.mmwrap .node-card[data-tab] { cursor: pointer; }
.mmwrap .node-card[data-tab]:hover .node-bg { fill: var(--bg-2); }
.mmwrap .sat-bg       { fill: var(--bg-2); stroke: var(--rule); }
.mmwrap .sat-title    { font-family: var(--font-serif); font-size: 13px; fill: var(--ink); }
.mmwrap .sat-sub      { font-family: var(--font-sans); font-size: 11px; fill: var(--ink-3); }
.mmwrap .node-sat[data-tab] { cursor: pointer; }
.mmwrap .node-sat[data-tab]:hover .sat-bg { fill: var(--bg-3); }
.mmwrap .zctl {
  position: absolute; top: 14px; right: 14px;
  display: flex; gap: 6px; z-index: 2;
}
.mmwrap .zctl button {
  width: 28px; height: 28px; border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink); border-radius: 4px;
  cursor: pointer; font-family: var(--font-mono); font-size: 14px;
}
.mmwrap .zctl button:hover { background: var(--bg-2); }
.mmwrap .zhint {
  position: absolute; bottom: 12px; left: 14px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-3); letter-spacing: .06em;
  background: var(--paper);
  padding: 4px 8px; border: 1px solid var(--rule); border-radius: 4px;
  z-index: 2;
}

/* ==========================================================================
   Responsive — tablette / mobile
   ========================================================================== */
@media (max-width: 900px) {
  .profil-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .mmwrap { height: 540px; }
  .matrix { font-size: 12px; }
  .matrix th, .matrix td { padding: 6px 8px; }
}