@tekkare/romulus 0.1.254 → 0.1.256

package/layer/app/components/oip-patients/Publications.vue

@@ -0,0 +1,298 @@
+<!--
+  Tableau d'articles PubMed pour la fiche patient.
+
+  Reprend CrossPublicationPubmed de Discovery : un compte, une recherche
+  (PMID, titre, type d'article, auteurs), une periode, un filtre par type
+  d'article et le tableau PMID / date / type / titre / auteurs / lien. La page
+  passe la clause qui definit le perimetre (l'article source, ou les articles
+  sur les genes de la fiche).
+
+  Filtres et recherche partent au serveur ; les 1 000 premieres lignes, triees
+  de la plus recente a la plus ancienne, se paginent dans la table.
+-->
+<template>
+  <RmTableCard source="PubMed" :lang="lang">
+    <template #header>
+      <div class="oip_list gap-12 full_width">
+        <div class="oip_row v-center gap-8 wrap">
+          <h2 class="pubs_title">{{ title }}</h2>
+          <span class="pubs_count">
+            {{ total === null ? "" : fr ? `${number(total)} résultat${total > 1 ? "s" : ""}` : `${number(total)} result${total > 1 ? "s" : ""}` }}
+          </span>
+        </div>
+        <p v-if="total !== null && total > MAX_ROWS" class="pubs_note">
+          {{
+            fr
+              ? `Les ${number(MAX_ROWS)} plus récents sont affichés : affinez avec la recherche ou les filtres.`
+              : `The ${number(MAX_ROWS)} most recent are shown: narrow down with the search or the filters.`
+          }}
+        </p>
+        <div class="oip_row v-end gap-12 wrap">
+          <RmInput
+            v-model="searchText"
+            class="pubs_search"
+            :placeholder="fr ? 'Rechercher par PMID, titre, auteur, type d\'article…' : 'Search by PMID, title, author, article type…'"
+          />
+          <RmDropdownSelect v-model="periodLabel" :options="periods.map((p) => p.label)" :search="false" :label="fr ? 'Période' : 'Period'" :lang="lang" />
+          <RmMultipleSelect
+            v-model="articleTypes"
+            :options="typeOptions"
+            :label="fr ? 'Type d\'article' : 'Article type'"
+            :loading="loading"
+            :lang="lang"
+          />
+        </div>
+      </div>
+    </template>
+
+    <RmErrorState
+      v-if="error"
+      icon="CloudWarning"
+      :title="fr ? 'Articles indisponibles' : 'Papers unavailable'"
+      :text="fr ? 'L\'index PubMed n\'a pas répondu.' : 'The PubMed index did not answer.'"
+      :action-label="fr ? 'Réessayer' : 'Retry'"
+      @action="load()"
+    />
+    <RmTable
+      v-else
+      :columns="columns"
+      :rows="rows"
+      :loading="loading"
+      :page-size="25"
+      row-key="pmid"
+      :caption="title"
+      :empty-text="fr ? 'Aucun article' : 'No paper'"
+      max-height="none"
+      class="pubs_table"
+      @row-click="(row) => (openPmid = row.pmid)"
+    >
+      <template #pmid="{ value }">
+        <a class="pubs_link pubs_mono" :href="pubmedUrl(value)" target="_blank" rel="noopener" @click.stop>{{ value }}</a>
+      </template>
+      <template #title="{ value, row }">
+        <button type="button" class="pubs_open" @click.stop="openPmid = row.pmid">
+          <RmTextHighlight :text="value || '-'" :queries="highlight" :lang="lang" />
+        </button>
+      </template>
+      <template #authors="{ value }">
+        <RmTextHighlight :text="value || '-'" :queries="highlight" :lang="lang" />
+      </template>
+      <template #link="{ row }">
+        <a class="pubs_link" :href="pubmedUrl(row.pmid)" target="_blank" rel="noopener" @click.stop>
+          {{ fr ? "Voir sur PubMed" : "See on PubMed" }}
+          <RmIcon name="ArrowSquareOut" :size="12" />
+        </a>
+      </template>
+    </RmTable>
+
+    <OipPatientsPubmedDrawer v-model:pmid="openPmid" :highlight="highlight" :lang="lang" />
+  </RmTableCard>
+</template>
+
+<script setup lang="ts">
+import { oipEsSearch } from "../../composables/useOipResources";
+import { OIP_PATIENT_INDEXES } from "../../oip-patients/indexes";
+
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    /** La clause qui definit le perimetre du tableau. */
+    query: Record<string, unknown>;
+    lang?: "fr" | "en";
+  }>(),
+  { lang: "fr" },
+);
+
+const MAX_ROWS = 1000;
+
+const lang = computed(() => props.lang);
+const fr = computed(() => lang.value === "fr");
+const number = (n: number) => new Intl.NumberFormat(fr.value ? "fr-FR" : "en-US").format(n);
+const pubmedUrl = (pmid: string) => `https://pubmed.ncbi.nlm.nih.gov/${pmid}/`;
+
+interface PubmedAuthor {
+  forename?: string;
+  lastname?: string;
+}
+interface PubmedHit {
+  PubMed_ID: string;
+  title?: string;
+  article_date?: string;
+  publication_types?: string[];
+  authors?: PubmedAuthor[];
+}
+
+/** L'article ouvert dans le tiroir de detail. */
+const openPmid = ref<string | null>(null);
+
+const searchText = ref("");
+const debouncedSearch = ref("");
+let searchTimer: ReturnType<typeof setTimeout> | undefined;
+watch(searchText, (text) => {
+  clearTimeout(searchTimer);
+  searchTimer = setTimeout(() => (debouncedSearch.value = text.trim()), 300);
+});
+const highlight = computed(() => (debouncedSearch.value ? [debouncedSearch.value] : []));
+
+/** Les periodes du filtre de Discovery, sur la date de publication. */
+const periods = computed(() => [
+  { label: fr.value ? "Toutes" : "All", gte: null },
+  { label: fr.value ? "30 derniers jours" : "Last 30 days", gte: "now-30d/d" },
+  { label: fr.value ? "90 derniers jours" : "Last 90 days", gte: "now-90d/d" },
+  { label: fr.value ? "180 derniers jours" : "Last 180 days", gte: "now-180d/d" },
+  { label: fr.value ? "360 derniers jours" : "Last 360 days", gte: "now-360d/d" },
+  { label: fr.value ? "3 dernières années" : "Last 3 years", gte: "now-3y/d" },
+  { label: fr.value ? "5 dernières années" : "Last 5 years", gte: "now-5y/d" },
+]);
+const periodIndex = ref(0);
+const periodLabel = computed({
+  get: () => periods.value[periodIndex.value]?.label,
+  set: (label) => {
+    const index = periods.value.findIndex((p) => p.label === label);
+    periodIndex.value = index < 0 ? 0 : index;
+  },
+});
+
+const articleTypes = ref<string[]>([]);
+const typeOptions = ref<string[]>([]);
+
+const results = ref<PubmedHit[]>([]);
+const total = ref<number | null>(null);
+const loading = ref(true);
+const error = ref(false);
+
+function searchClause(text: string) {
+  const fields = ["PubMed_ID^5", "title^3", "publication_types"];
+  return {
+    bool: {
+      should: [
+        { multi_match: { query: text, fields, type: "best_fields", fuzziness: 0 } },
+        { multi_match: { query: text, fields, type: "phrase_prefix" } },
+        {
+          nested: {
+            path: "authors",
+            query: { multi_match: { query: text, fields: ["authors.lastname^2", "authors.forename"], type: "best_fields", fuzziness: 0 } },
+          },
+        },
+      ],
+    },
+  };
+}
+
+let requestId = 0;
+
+/**
+ * Une requete pour les lignes et le compte, l'agregation des types comptee
+ * sans son propre filtre : cocher un type ne fait pas disparaitre les autres.
+ */
+async function load() {
+  const id = ++requestId;
+  loading.value = true;
+  error.value = false;
+  const must: unknown[] = [props.query];
+  if (debouncedSearch.value) must.push(searchClause(debouncedSearch.value));
+  const gte = periods.value[periodIndex.value]?.gte;
+  if (gte) must.push({ range: { article_date: { gte } } });
+  const typeFilter = articleTypes.value.length ? [{ terms: { "publication_types.keyword": articleTypes.value } }] : [];
+
+  try {
+    const res: any = await oipEsSearch("science", OIP_PATIENT_INDEXES.PUBMED, {
+      size: MAX_ROWS,
+      track_total_hits: true,
+      _source: ["PubMed_ID", "title", "authors", "article_date", "publication_types"],
+      sort: [{ article_date: { order: "desc", missing: "_last" } }],
+      query: { bool: { must } },
+      post_filter: typeFilter.length ? { bool: { filter: typeFilter } } : undefined,
+      aggs: { types: { terms: { field: "publication_types.keyword", size: 50 } } },
+    });
+    if (id !== requestId) return;
+    results.value = (res?.hits?.hits ?? []).map((hit: any) => hit._source);
+    total.value = res?.hits?.total?.value ?? 0;
+    typeOptions.value = (res?.aggregations?.types?.buckets ?? []).map((b: any) => b.key);
+  } catch (err) {
+    if (id !== requestId) return;
+    console.error("PubMed papers failed:", err);
+    error.value = true;
+  } finally {
+    if (id === requestId) loading.value = false;
+  }
+}
+
+watch([() => props.query, debouncedSearch, periodIndex, articleTypes], load, { immediate: true, deep: true });
+
+const columns = computed(() => [
+  { key: "pmid", label: "PMID", width: "110px" },
+  { key: "date", label: fr.value ? "Publication" : "First published", width: "120px" },
+  { key: "types", label: fr.value ? "Type d'article" : "Article type", width: "180px" },
+  { key: "title", label: fr.value ? "Titre" : "Title", minWidth: "280px" },
+  { key: "authors", label: fr.value ? "Auteurs" : "Authors", minWidth: "200px" },
+  { key: "link", label: fr.value ? "Lien" : "Link", width: "150px" },
+]);
+
+const formatDate = (iso?: string) =>
+  iso ? new Date(iso).toLocaleDateString(fr.value ? "fr-FR" : "en-US", { year: "numeric", month: "short", day: "numeric" }) : "-";
+
+const rows = computed(() =>
+  results.value.map((item) => ({
+    pmid: item.PubMed_ID,
+    date: formatDate(item.article_date),
+    types: (item.publication_types ?? []).join(", ") || "-",
+    title: item.title ?? "",
+    authors: (item.authors ?? []).map((a) => [a.forename, a.lastname].filter(Boolean).join(" ")).join(", "),
+    link: item.PubMed_ID,
+  })),
+);
+</script>
+
+<style scoped>
+.pubs_title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.pubs_count,
+.pubs_note {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.pubs_search {
+  flex: 1 1 260px;
+  min-width: 220px;
+}
+
+.pubs_table :deep(.rm-table__row) {
+  cursor: pointer;
+}
+
+.pubs_open {
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.pubs_open:hover,
+.pubs_open:focus-visible {
+  color: var(--primary);
+  text-decoration: underline;
+}
+
+.pubs_mono {
+  font-family: var(--font-mono, ui-monospace, monospace);
+}
+
+.pubs_link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+  color: var(--primary);
+  text-decoration: underline;
+}
+</style>

package/layer/app/components/oip-patients/PubmedDrawer.vue

@@ -0,0 +1,379 @@
+<!--
+  Detail d'un article PubMed dans un tiroir.
+
+  Reprend la fiche PubMed de France Augmented Science (pubmed/[id]) : son
+  bandeau (titre, onglets Resume et Auteurs) et, dans l'onglet Resume, le
+  sommaire colle a gauche et les cartes Introduction, sections du resume et
+  Liens. L'onglet Essais cliniques et l'appariement RPPS des auteurs sont
+  propres aux donnees francaises : ils ne sont pas repris.
+  Le tableau des publications l'ouvre sur un clic de ligne, sans quitter la
+  fiche patient. L'onglet ouvert reste local au tiroir : `?tab=` appartient a
+  la fiche patient.
+-->
+<template>
+  <RmDrawer
+    :model-value="pmid !== null"
+    size="min(1180px, calc(100vw - 48px))"
+    :label="fr ? `Article PubMed ${pmid ?? ''}` : `PubMed paper ${pmid ?? ''}`"
+    :close-label="fr ? 'Fermer le détail' : 'Close the detail'"
+    @update:model-value="(open) => !open && emit('update:pmid', null)"
+  >
+    <!-- Le bandeau de la fiche d'origine (RmPageHeader, ses onglets dossier) tient
+         le haut du tiroir ; l'en-tete du tiroir s'efface (cf. style global). -->
+    <div class="oip-patients pubmed_drawer">
+      <RmPageHeader
+        :eyebrow="`PubMed · PMID ${pmid ?? ''}`"
+        :tabs="paper ? headerTabs : []"
+        :tabs-label="fr ? 'Sections de l\'article' : 'Paper sections'"
+        @tab="(key) => (tab = key as 'summary' | 'authors')"
+      >
+        <template #title>
+          <h2>
+            <RmTextHighlight v-if="paper" :text="paper.title || '-'" :queries="highlight" :lang="lang" />
+          </h2>
+        </template>
+        <template #actions>
+          <RmButton
+            variant="tertiary"
+            size="md"
+            icon-only
+            ghost
+            prefix-icon="X"
+            :aria-label="fr ? 'Fermer le détail' : 'Close the detail'"
+            @click="emit('update:pmid', null)"
+          />
+        </template>
+        <div v-if="paper?.delete || paper?.deleted">
+          <RmTag variant="rose">{{ fr ? "L'article a été supprimé" : "Article has been deleted" }}</RmTag>
+        </div>
+      </RmPageHeader>
+
+      <div class="drawer_scroll">
+        <RmLoadingState v-if="loading" :lines="6" />
+        <RmErrorState
+          v-else-if="error"
+          icon="CloudWarning"
+          :title="fr ? 'Article indisponible' : 'Paper unavailable'"
+          :text="fr ? 'L\'index PubMed n\'a pas répondu.' : 'The PubMed index did not answer.'"
+          :action-label="fr ? 'Réessayer' : 'Retry'"
+          @action="load()"
+        />
+        <RmEmptyState v-else-if="!paper" icon="Prohibit" :title="fr ? 'Article introuvable' : 'Paper not found'" />
+
+        <RmTable
+          v-else-if="tab === 'authors'"
+          :columns="authorColumns"
+          :rows="authors"
+          :caption="fr ? 'Auteurs' : 'Authors'"
+          search
+          :search-placeholder="fr ? 'Chercher un auteur' : 'Search an author'"
+          :empty-text="fr ? 'Aucun auteur' : 'No authors'"
+        />
+
+        <div v-else class="oip_row gap-16 drawer_layout">
+          <RmChaptersNav class="drawer_chapters" :chapters="chapters" @select="scrollToChapter" />
+
+          <div class="oip_list gap-16 drawer_content">
+            <RmSectionCard id="pubmed-introduction">
+              <template #header>
+                <h3 class="drawer_section">Introduction</h3>
+              </template>
+              <div class="oip_list gap-24">
+                <div class="oip_list gap-4">
+                  <p class="drawer_field">{{ fr ? "Titre complet" : "Full title" }}</p>
+                  <p class="drawer_text">
+                    <RmTextHighlight :text="paper.title || '-'" :queries="highlight" :lang="lang" />
+                  </p>
+                </div>
+                <div class="oip_list gap-4">
+                  <p class="drawer_field">{{ fr ? "Première publication" : "First published" }}</p>
+                  <p class="drawer_text">{{ formatDate(paper.article_date) }}</p>
+                </div>
+
+                <div v-for="group in tagGroups" :key="group.label" class="oip_list gap-4">
+                  <div class="oip_row v-center gap-4 drawer_label">
+                    <RmIcon :name="group.icon" :size="12" />
+                    <span>{{ group.label }}</span>
+                  </div>
+                  <div v-if="group.values.length" class="oip_row gap-8 wrap">
+                    <RmTag v-for="value in group.values" :key="value" variant="gray">
+                      <RmTextHighlight :text="value" :queries="highlight" :lang="lang" />
+                    </RmTag>
+                  </div>
+                  <p v-else class="drawer_none">{{ fr ? `Aucun élément (${group.label.toLowerCase()})` : `No ${group.label.toLowerCase()}` }}</p>
+                </div>
+              </div>
+            </RmSectionCard>
+
+            <RmSectionCard v-for="(section, index) in sections" :id="`pubmed-section-${index}`" :key="index">
+              <template #header>
+                <h3 class="drawer_section">{{ sectionName(section.label) }}</h3>
+              </template>
+              <p class="drawer_text drawer_abstract">
+                <RmTextHighlight :text="section.text || '-'" :queries="highlight" :lang="lang" />
+              </p>
+            </RmSectionCard>
+
+            <RmSectionCard v-if="hasLinks" id="pubmed-links">
+              <template #header>
+                <h3 class="drawer_section">{{ fr ? "Liens" : "Links" }}</h3>
+              </template>
+              <div class="oip_list gap-24">
+                <div v-if="!paper.delete" class="oip_list gap-4">
+                  <div class="oip_row v-center gap-4 drawer_label">
+                    <RmIcon name="Link" :size="12" />
+                    <span>{{ fr ? "Article PubMed" : "PubMed article" }}</span>
+                  </div>
+                  <a class="drawer_link" :href="`https://pubmed.ncbi.nlm.nih.gov/${pmid}/`" target="_blank" rel="noopener">
+                    https://pubmed.ncbi.nlm.nih.gov/<b>{{ pmid }}</b>/
+                  </a>
+                </div>
+                <div v-if="paper.doi" class="oip_list gap-4">
+                  <div class="oip_row v-center gap-4 drawer_label">
+                    <RmIcon name="Link" :size="12" />
+                    <span>{{ fr ? "Article complet" : "Complete article" }}</span>
+                  </div>
+                  <a class="drawer_link" :href="`https://www.doi.org/${paper.doi}`" target="_blank" rel="noopener">
+                    https://www.doi.org/<b>{{ paper.doi }}</b>
+                  </a>
+                </div>
+              </div>
+            </RmSectionCard>
+          </div>
+        </div>
+      </div>
+    </div>
+  </RmDrawer>
+</template>
+
+<script setup lang="ts">
+import { oipEsSearch } from "../../composables/useOipResources";
+import { OIP_PATIENT_INDEXES } from "../../oip-patients/indexes";
+
+const props = withDefaults(
+  defineProps<{
+    /** PMID de l'article ouvert, `null` quand le tiroir est ferme. */
+    pmid: string | null;
+    /** Termes a surligner, ceux de la recherche du tableau. */
+    highlight?: string[];
+    lang?: "fr" | "en";
+  }>(),
+  { highlight: () => [], lang: "fr" },
+);
+
+const emit = defineEmits<{ "update:pmid": [value: string | null] }>();
+
+const lang = computed(() => props.lang);
+const fr = computed(() => lang.value === "fr");
+
+interface PubmedPaper {
+  PubMed_ID: string;
+  title?: string;
+  article_date?: string;
+  journal?: string;
+  doi?: string;
+  delete?: boolean;
+  deleted?: boolean;
+  publication_types?: string[];
+  chemical_list?: string[];
+  keywords?: string[];
+  mesh_terms?: string[];
+  rare_diseases?: { concat_disease_name_orpha_code?: string }[];
+  diseases?: { icd10?: { combined_label?: string }[]; section?: { label?: string }[] }[];
+  sections?: { label?: string; text?: string; order?: number }[];
+  authors?: { forename?: string; lastname?: string; affiliation?: string }[];
+}
+
+const paper = ref<PubmedPaper | null>(null);
+const loading = ref(false);
+const error = ref(false);
+let requestId = 0;
+
+async function load() {
+  const pmid = props.pmid;
+  if (pmid === null) return;
+  const id = ++requestId;
+  loading.value = true;
+  error.value = false;
+  paper.value = null;
+  try {
+    const res: any = await oipEsSearch("science", OIP_PATIENT_INDEXES.PUBMED, {
+      size: 1,
+      _source: { excludes: ["embedding", "search_text"] },
+      query: { term: { PubMed_ID: pmid } },
+    });
+    if (id !== requestId) return;
+    paper.value = res?.hits?.hits?.[0]?._source ?? null;
+  } catch (err) {
+    if (id !== requestId) return;
+    console.error("PubMed paper failed:", err);
+    error.value = true;
+  } finally {
+    if (id === requestId) loading.value = false;
+  }
+}
+
+watch(() => props.pmid, load, { immediate: true });
+
+/** Chaque article s'ouvre sur son resume. */
+const tab = ref<"summary" | "authors">("summary");
+watch(
+  () => props.pmid,
+  () => (tab.value = "summary"),
+);
+
+const headerTabs = computed(() => [
+  { key: "summary", label: fr.value ? "Résumé" : "Summary", active: tab.value === "summary" },
+  { key: "authors", label: fr.value ? "Auteurs" : "Authors", count: authors.value.length, active: tab.value === "authors" },
+]);
+
+const unique = (values: (string | undefined)[]) => [...new Set(values.filter((v): v is string => !!v && v.trim() !== ""))];
+
+/** Les groupes de l'introduction, vides compris : la fiche d'origine dit « Aucun élément ». */
+const tagGroups = computed(() => {
+  const p = paper.value;
+  if (!p) return [];
+  return [
+    { icon: "Article", label: fr.value ? "Type d'article" : "Article type", values: unique(p.publication_types ?? []) },
+    { icon: "BookOpen", label: fr.value ? "Nom de la revue" : "Journal name", values: unique([p.journal]) },
+    { icon: "Molecule", label: fr.value ? "Molécules" : "Molecules", values: unique(p.chemical_list ?? []) },
+    { icon: "TextAa", label: fr.value ? "Mots-clés" : "Keywords", values: unique(p.keywords ?? []) },
+    { icon: "Tag", label: fr.value ? "Termes MeSH" : "MeSH terms", values: unique(p.mesh_terms ?? []) },
+    { icon: "Bandaids", label: fr.value ? "Maladies rares" : "Rare diseases", values: unique((p.rare_diseases ?? []).map((d) => d.concat_disease_name_orpha_code)) },
+    { icon: "FaceMask", label: fr.value ? "CIM-10" : "ICD-10", values: unique((p.diseases ?? []).flatMap((d) => (d.icd10 ?? []).map((i) => i.combined_label))) },
+    { icon: "ListMagnifyingGlass", label: fr.value ? "Termes oncologiques" : "Oncology terms", values: unique((p.diseases ?? []).flatMap((d) => (d.section ?? []).map((s) => s.label))) },
+  ];
+});
+
+const sections = computed(() => [...(paper.value?.sections ?? [])].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)));
+
+/** Les libelles de section arrivent en majuscules (« BACKGROUND ») ou vides. */
+const sectionName = (label?: string) => {
+  if (!label || label.toUpperCase() === "UNASSIGNED") return fr.value ? "Résumé" : "Abstract";
+  return label.charAt(0).toUpperCase() + label.slice(1).toLowerCase();
+};
+
+const authors = computed(() =>
+  (paper.value?.authors ?? []).map((a) => ({
+    name: [a.forename, a.lastname].filter(Boolean).join(" ") || "-",
+    affiliation: a.affiliation || "-",
+  })),
+);
+
+const authorColumns = computed(() => [
+  { key: "name", label: fr.value ? "Nom" : "Name", sortable: true, rowHeader: true },
+  { key: "affiliation", label: "Affiliation" },
+]);
+
+const hasLinks = computed(() => !paper.value?.delete || !!paper.value?.doi);
+
+/** Le sommaire de l'onglet Resume : Introduction, les sections du resume, Liens. */
+const chapters = computed(() => [
+  { label: "Introduction", value: "pubmed-introduction" },
+  ...sections.value.map((section, index) => ({ label: sectionName(section.label), value: `pubmed-section-${index}` })),
+  ...(hasLinks.value ? [{ label: fr.value ? "Liens" : "Links", value: "pubmed-links" }] : []),
+]);
+
+/** RmChaptersNav defile la fenetre ; ici c'est le corps du tiroir qui defile. */
+function scrollToChapter(id: string) {
+  document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
+}
+
+const formatDate = (iso?: string) =>
+  iso ? new Date(iso).toLocaleDateString(fr.value ? "fr-FR" : "en-US", { year: "numeric", month: "long", day: "numeric" }) : "-";
+</script>
+
+<style scoped>
+/* Le bandeau reste en haut, seul le contenu defile : le sommaire colle a 0. */
+.pubmed_drawer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.pubmed_drawer :deep(.rm-page-header__title) {
+  font-size: 24px;
+  line-height: 1.25;
+}
+
+.drawer_scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--space-24);
+}
+
+.drawer_layout {
+  align-items: flex-start;
+}
+
+/* Le sommaire colle en haut du corps du tiroir, qui est le conteneur qui defile. */
+.drawer_chapters {
+  position: sticky;
+  top: 0;
+  flex: 0 0 auto;
+}
+
+/* Sans min-width, l'item flex ne descend pas sous son enfant le plus large. */
+.drawer_content {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.drawer_section {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.drawer_field {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+  text-decoration: underline;
+}
+
+.drawer_label {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.drawer_text {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--text-primary);
+}
+
+.drawer_abstract {
+  white-space: pre-line;
+}
+
+.drawer_none {
+  margin: 0;
+  font-size: 12px;
+  font-style: italic;
+  color: var(--text-secondary);
+}
+
+.drawer_link {
+  width: fit-content;
+  font-size: 14px;
+  color: var(--primary);
+  text-decoration: underline;
+  word-break: break-all;
+}
+</style>
+
+<style>
+/* Hors portee : l'en-tete et le corps appartiennent au tiroir (teleporte). */
+.rm-drawer:has(.pubmed_drawer) > .rm-drawer__header {
+  display: none;
+}
+
+.rm-drawer:has(.pubmed_drawer) > .rm-drawer__body {
+  padding: 0;
+  overflow: hidden;
+}
+</style>