@tekkare/romulus 0.1.251 → 0.1.253

package/layer/app/components/oip-science/clinical-trials/CardsGlobal.vue

@@ -0,0 +1,273 @@
+<!--
+  Carte d'un essai CT.gov (NCT), portee de France Augmented Science. Le menu
+  d'export de la carte n'exporte plus que les champs lus dans la carte (cf.
+  RmResultCard) : l'export complet par onglets (useGenerateExcel) reste a FAS.
+-->
+<template>
+  <RmResultCard
+    class="ct_card oip-science"
+    clickable
+    :count="ifNoRes(data.study_first_posted_date, 'date')"
+    :count-label="$t('oipScience.common.firstPosted')"
+    :count-extra="[$t('oipScience.common.lastUpdate'), ifNoRes(data.updated_at, 'date')]"
+    :lang="lang"
+    :link="detailsUrl"
+    @click="openCard($event, nav, 'ClinicalTrialsNCT', data.nct_id)"
+  >
+    <template #code>
+      <RmCopyCode v-if="data.nct_id" :value="data.nct_id" :lang="lang" />
+      <template v-if="linkedEuct">
+        <RmCopyCode label="EUCT" :value="linkedEuct.euct_number" :lang="lang" />
+        <OipScienceClinicalTrialsPairBadge />
+      </template>
+    </template>
+
+    <template #title>
+      <RmTextHighlight
+        :queries="getSearchHighlight"
+        :text="ifNoRes(data.official_title)"
+      />
+    </template>
+
+    <template #actions>
+      <component
+        :is="projectButton"
+        v-if="projectButton"
+        :resource-id="data.nct_id"
+        type="ClinicalTrialsNCT"
+        :label="data.official_title"
+        compact
+      />
+    </template>
+
+    <template #meta>
+      <RmTag :variant="setColorStatus(data.overall_status)">
+        {{ ifNoRes(data.overall_status) }}
+      </RmTag>
+      <RmTag v-if="data.study_type">{{ data.study_type }}</RmTag>
+      <RmTag v-if="data.phase && data.phase != 'Not Applicable'" variant="violet">
+        {{ data.phase }}
+      </RmTag>
+      <slot name="extra" />
+    </template>
+
+        <!-- BODY : seul, ou colonne gauche d'une carte double. -->
+        <component
+          :is="linkedEuct ? PairBody : 'div'"
+          v-bind="linkedEuct ? { kind: 'euct', linked: linkedEuct, queries: getSearchHighlight } : {}"
+        >
+        <div class="oip_grid gap-16">
+          <OipScienceCommonTableTags
+            :isShortFirstColumn="true"
+            icon="FaceMask"
+            :title="$t('oipScience.common.conditions')"
+            :values="data.conditions?.map((val) => val.condition_name_en) || []"
+            :highlightQueries="getSearchHighlight"
+            :isFullResults="false"
+          ></OipScienceCommonTableTags>
+
+          <OipScienceCommonTableTags
+            v-if="prefs.interventions"
+            :isShortFirstColumn="true"
+            icon="Clipboard"
+            :title="$t('oipScience.common.interventions')"
+            :values="
+              data.intervention?.map((val) => val.intervention_name) || []
+            "
+            :highlightQueries="getSearchHighlight"
+            :isFullResults="false"
+          ></OipScienceCommonTableTags>
+          <OipScienceCommonTableTags
+            v-if="prefs.countries"
+            :isShortFirstColumn="true"
+            icon="Globe"
+            :title="$t('oipScience.cards.countries')"
+            :values="
+              data.countries?.map((val) =>
+                getCountryEmoji(ifNoRes(val.countries_name))
+              ) || []
+            "
+            :highlightQueries="getSearchHighlight"
+            :isFullResults="false"
+          ></OipScienceCommonTableTags>
+          <OipScienceCommonTableTags
+            v-if="prefs.sponsors"
+            :isShortFirstColumn="true"
+            icon="Briefcase"
+            :title="$t('oipScience.common.sponsors')"
+            :values="data.sponsors?.map((val) => val.sponsor_name) || []"
+            :highlightQueries="getSearchHighlight"
+            :isFullResults="false"
+          ></OipScienceCommonTableTags>
+
+          <OipScienceCommonTableTags
+            v-if="prefs.enrollment && data.enrollment != null"
+            :isShortFirstColumn="true"
+            icon="ListBullets"
+            :title="$t('oipScience.cards.enrollment')"
+            :values="[ifNoRes(data.enrollment, 'number')]"
+            :isFullResults="false"
+          ></OipScienceCommonTableTags>
+          <OipScienceCommonTableTags
+            v-if="prefs.rare && getRareDiseases.length > 0"
+            :isShortFirstColumn="true"
+            icon="Bandaids"
+            :title="$t('oipScience.common.rareDiseases')"
+            :values="getRareDiseases"
+            :highlightQueries="getSearchHighlight"
+            :isFullResults="false"
+          ></OipScienceCommonTableTags>
+
+          <OipScienceCommonTableTags
+            v-if="prefs.oncoIcd10 && (getIcd10.length > 0)"
+            icon="FaceMask"
+            :title="$t('oipScience.common.oncologyIcd10')"
+            :values="getIcd10"
+            :highlightQueries="getSearchHighlight"
+            :isFullResults="false"
+            :result-size-limit="2"
+          ></OipScienceCommonTableTags>
+           <OipScienceCommonTableTags
+            v-if="prefs.oncoTerms && (getOncoTerms.length > 0)"
+            icon="ListMagnifyingGlass"
+            :title="$t('oipScience.common.oncologyTerms')"
+            :values="getOncoTerms"
+            :highlightQueries="getSearchHighlight"
+            :isFullResults="false"
+            :result-size-limit="2"
+          ></OipScienceCommonTableTags>
+        </div>
+        </component>
+
+    <!-- Ce que la recherche a reellement matche, extraits compris : souvent
+         dans un texte que la carte ne montre pas. -->
+    <OipScienceElasticMatchExplain :match="data._match" />
+
+    <template #footer>
+      <div class="oip_grid gap-8">
+        <OipScienceCommonSource :sources="linkedEuct ? ['CT.gov', 'EUCT'] : ['CT.gov']" :lang="lang" />
+      </div>
+    </template>
+  </RmResultCard>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue';
+import PairBody from './PairBody.vue';
+import {
+  ifNoRes,
+  setColorStatus,
+  getCountryEmoji,
+  removeDuplicate,
+  dedupNormalized,
+} from '../../../oip-science/utils/styleAndFormat';
+import { openCard } from '../../../oip-science/utils/b-openCard';
+
+// Types de France Augmented Science (types/ClinicalTrials) : pas portes.
+type ClinicalTrial = any;
+type ClinicalTrialGenomic = any;
+type ClinicalTrialRareDisease = any;
+
+
+const props = defineProps({
+  data: {
+    type: Object as PropType<ClinicalTrial>,
+    // Rangees en plus (« Personnaliser » de FAS, store cardPrefs) : hors de FAS, celles par defaut.
+    default: () => ({}),
+  },
+  /**
+   * L'essai EUCT qui cite ce numero NCT (useLinkedTrials) : la carte devient
+   * double. `null` : pas de jumeau ; absent : pas encore charge.
+   */
+  linkedEuct: {
+    type: Object as PropType<any | null>,
+    default: undefined,
+  },
+  /** Termes de la recherche a surligner (filterStore dans FAS). */
+  highlight: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  /** Rangees choisies (store cardPrefs de FAS) ; a defaut, celles par defaut. */
+  prefs: {
+    type: Object as PropType<Record<string, boolean>>,
+    default: () => ({ interventions: true, sponsors: true, enrollment: true }),
+  },
+});
+
+const nav = useOipResourceNav();
+const { projectButton } = useOipResourceHooks();
+
+const getGenomicsSymbols = computed(() => {
+  if (!props.data.genomics) return [];
+  return props.data.genomics.map((g: ClinicalTrialGenomic) => g.symbol);
+});
+
+const getRareDiseases = computed(() => {
+  return removeDuplicate(
+    (props.data.rare_diseases &&
+      props.data.rare_diseases.map(
+        (res: ClinicalTrialRareDisease) => res.concat_disease_name_orpha_code
+      )) ??
+      []
+  );
+});
+
+const getSearchHighlight = computed(() => props.highlight);
+
+const { locale } = useI18n();
+const lang = computed(() => (locale.value === 'en' ? 'en' : 'fr'));
+const detailsUrl = computed(() =>
+  props.data.nct_id ? nav.href('ClinicalTrialsNCT', props.data.nct_id) : '',
+);
+
+const getIcd10 = computed(() => {
+  const icd10List = props.data.diseases
+    ?.map((d: any) => d.icd10?.map((y: any) => y.combined_label))
+    .flat()
+  // dedupNormalized collapses case + singular/plural duplicates
+  // (Cancer/cancer, Neoplasms/Neoplasm) so the tag list stays tight.
+  return dedupNormalized(icd10List || []);
+})
+
+const getOncoTerms = computed(() => {
+  const icd10List = props.data.diseases
+    ?.map((d: any) => d.section?.map((y: any) => y.label))
+    .flat()
+  return dedupNormalized(icd10List || []);
+})
+</script>
+
+<style scoped>
+/* Les dates prennent la place du compteur : une date longue ne tient pas
+   dans la colonne de 128px ni en 32px. */
+.ct_card :deep(.rm-rcard__count) {
+  flex-basis: 176px;
+  align-items: flex-start;
+  text-align: left;
+}
+.ct_card :deep(.rm-rcard__count-value) {
+  font-size: 16px;
+  white-space: nowrap;
+}
+/* Libelle au-dessus de sa date, et "Last update" dans le meme style que
+   "First posted" : countExtra porte [libellé, date]. */
+.ct_card :deep(.rm-rcard__count-label) { order: 1; font-size: 10px; }
+.ct_card :deep(.rm-rcard__count-value) { order: 2; }
+.ct_card :deep(.rm-rcard__count-extra) { order: 3; }
+.ct_card :deep(.rm-rcard__count-extra:nth-child(3)) {
+  margin-top: 10px;
+  color: var(--text-muted);
+  font-size: 10px;
+  font-weight: var(--weight-semibold);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.ct_card :deep(.rm-rcard__count-extra:nth-child(4)) {
+  margin-top: var(--space-2);
+  font-size: 16px;
+  font-weight: var(--weight-bold);
+  line-height: 1.1;
+  white-space: nowrap;
+}
+</style>

package/layer/app/components/oip-science/clinical-trials/LinkedList.vue

@@ -0,0 +1,366 @@
+<!--
+  Essais lies a une fiche (professionnel, etablissement, publication, centre
+  ou investigateur d'un registre). Les essais sont charges en entier et rendus
+  avec les cartes des pages /ctgov et /euct ; un essai present dans les deux
+  registres n'apparait qu'une fois, en carte double sur sa carte NCT.
+  Filtres locaux (source, statut, maladies rares, CIM-10, termes
+  oncologiques), recherche texte et affichage par paquets.
+-->
+<template>
+  <div class="oip-science">
+    <div v-if="!loading && !isLoadingDocs" class="oip_grid gap-16">
+      <RmFilterBar
+        v-if="rows.length"
+        class="fbar_top"
+       
+        :filters-amount="activeFiltersCount"
+        :lang="lang"
+        @clear-filters="clearAllFilters"
+      >
+        <template #Search>
+          <RmSearchBar
+            v-model="searchText"
+            :placeholder="$t('oipScience.common.searchHcpTrials')"
+            :have-advanced="false"
+          />
+        </template>
+        <template #Filters>
+          <RmDropdownSelect
+            v-if="hasBothSources"
+            :label="$t('oipScience.common.source')"
+            :options="SOURCE_OPTIONS"
+            v-model="filterSource"
+            :search="false"
+            :lang="lang"
+          />
+          <RmMultipleSelect
+            :label="$t('oipScience.common.status')"
+            :options="statusOptions"
+            v-model="filterStatus"
+            :show-all="true"
+            :search="false"
+            :lang="lang"
+          />
+          <RmMultipleSelect
+            v-if="rareDiseasesOptions.length"
+            :label="$t('oipScience.common.rareDiseases')"
+            :options="rareDiseasesOptions"
+            v-model="filterRareDiseases"
+            :show-all="true"
+            :search="true"
+            :lang="lang"
+          />
+          <RmMultipleSelect
+            v-if="icd10Options.length"
+            :label="$t('oipScience.common.oncologyIcd10')"
+            :options="icd10Options"
+            v-model="filterIcd10"
+            :show-all="true"
+            :search="true"
+            :lang="lang"
+          />
+          <RmMultipleSelect
+            v-if="oncoTermsOptions.length"
+            :label="$t('oipScience.common.oncologyTerms')"
+            :options="oncoTermsOptions"
+            v-model="filterOncoTerms"
+            :show-all="true"
+            :search="true"
+            :lang="lang"
+          />
+        </template>
+      </RmFilterBar>
+
+      <RmResultsLine icon="Flask" :items="[{ count: filtered.length, label: $t('oipScience.resultKpis.trials', filtered.length) }]" />
+      <div class="oip_grid gap-8">
+        <template v-for="row in visible" :key="row.id">
+          <OipScienceClinicalTrialsCardsGlobal
+            v-if="row.kind === 'nct'"
+            :data="row.doc"
+            :linked-euct="row.linked"
+            :highlight="highlight"
+          >
+            <template #extra>
+              <RmTag v-if="row.extra?.role" variant="gray">{{ row.extra.role }}</RmTag>
+              <OipScienceCommonScoreBadge :score="row.extra?.score" />
+            </template>
+          </OipScienceClinicalTrialsCardsGlobal>
+          <OipScienceClinicalTrialsCards v-else :data="row.doc" :linked-nct="row.linked" :highlight="highlight">
+            <template #extra>
+              <RmTag v-if="row.extra?.role" variant="gray">{{ row.extra.role }}</RmTag>
+              <OipScienceCommonScoreBadge :score="row.extra?.score" />
+            </template>
+          </OipScienceClinicalTrialsCards>
+        </template>
+      </div>
+
+      <RmEmptyState v-if="!filtered.length" :title="$t('oipScience.common.noMatchingResult')" />
+      <RmButton
+        v-if="visible.length < filtered.length"
+        variant="secondary"
+        class="load_more"
+        @click="displayCount += PAGE_SIZE"
+      >{{ $t('oipScience.common.loadMore') }}</RmButton>
+    </div>
+    <RmLoadingState v-else :lines="3" :chart-height="240" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import indexConfig from '../../../oip-science/indexConfig.json';
+import useOipElastic from '../../../oip-science/composables/useOipElastic';
+import { useLinkedTrials } from '../../../oip-science/composables/useLinkedTrials';
+
+/** Ce que la fiche sait d'un essai en plus de l'essai lui-meme. */
+export type LinkedTrialExtra = { score?: number | null; role?: string | null };
+
+type Row = {
+  id: string;
+  kind: 'nct' | 'euct';
+  doc: any;
+  /** Essai jumeau de l'autre registre, si connu. */
+  linked: any | null;
+  extra: LinkedTrialExtra | undefined;
+  date: number;
+};
+
+const props = withDefaults(
+  defineProps<{
+    nctIds?: string[];
+    euctIds?: string[];
+    /** Par numero d'essai (NCT ou EUCT). */
+    extras?: Record<string, LinkedTrialExtra>;
+    title: string;
+    sources: string[];
+    indexLastUpdate: string;
+    loading?: boolean;
+    /** Termes a surligner dans les cartes (filterStore dans FAS). */
+    highlight?: string[];
+  }>(),
+  { nctIds: () => [], euctIds: () => [], extras: () => ({}), loading: false, highlight: () => [] },
+);
+
+const { locale } = useI18n();
+const lang = computed<'fr' | 'en'>(() => (locale.value === 'en' ? 'en' : 'fr'));
+const { queryCustomElastic } = useOipElastic();
+const { linked: linkedEuct, load: loadLinkedEuct } = useLinkedTrials('euct');
+const { linked: linkedNct, load: loadLinkedNct } = useLinkedTrials('nct');
+
+const nctDocs = ref<any[]>([]);
+const euctDocs = ref<any[]>([]);
+const isLoadingDocs = ref(false);
+
+async function loadDocs() {
+  const nctIds = [...new Set(props.nctIds.filter(Boolean))];
+  const euctIds = [...new Set(props.euctIds.filter(Boolean))];
+  if (!nctIds.length && !euctIds.length) {
+    nctDocs.value = [];
+    euctDocs.value = [];
+    return;
+  }
+  isLoadingDocs.value = true;
+  try {
+    const [nctRes, euctRes] = await Promise.all([
+      nctIds.length
+        ? queryCustomElastic({
+            index: indexConfig.globalCT.index,
+            cluster: indexConfig.globalCT.cluster,
+            customQuery: { size: nctIds.length, query: { ids: { values: nctIds } } },
+          })
+        : Promise.resolve({ results: [] }),
+      euctIds.length
+        ? queryCustomElastic({
+            index: indexConfig.euct.index,
+            cluster: indexConfig.euct.cluster,
+            customQuery: {
+              size: euctIds.length,
+              query: { terms: { 'euct_number.keyword': euctIds } },
+            },
+          })
+        : Promise.resolve({ results: [] }),
+    ]);
+    nctDocs.value = nctRes?.results || [];
+    euctDocs.value = euctRes?.results || [];
+    // Jumeaux hors de la liste, comme sur les pages de recherche.
+    await Promise.all([
+      loadLinkedEuct(nctDocs.value.map((d) => d.nct_id)),
+      loadLinkedNct(euctDocs.value.map((d) => d.nct_number)),
+    ]);
+  } catch (e) {
+    console.error(e);
+  } finally {
+    isLoadingDocs.value = false;
+  }
+}
+
+watch(() => [props.nctIds, props.euctIds], loadDocs, { immediate: true, deep: true });
+
+const rows = computed<Row[]>(() => {
+  const euctByNct = new Map<string, any>();
+  for (const d of euctDocs.value) {
+    if (d?.nct_number) euctByNct.set(d.nct_number, d);
+  }
+  const out: Row[] = [];
+  const paired = new Set<string>();
+  for (const doc of nctDocs.value) {
+    const twin = euctByNct.get(doc.nct_id) || linkedEuct.value[doc.nct_id] || null;
+    if (twin?.euct_number) paired.add(twin.euct_number);
+    out.push({
+      id: doc.nct_id,
+      kind: 'nct',
+      doc,
+      linked: twin,
+      extra: props.extras[doc.nct_id],
+      date: new Date(doc.study_first_posted_date || doc.updated_at || 0).getTime(),
+    });
+  }
+  for (const doc of euctDocs.value) {
+    // L'essai est deja sur sa carte NCT.
+    if (paired.has(doc.euct_number)) continue;
+    out.push({
+      id: doc.euct_number,
+      kind: 'euct',
+      doc,
+      linked: doc.nct_number ? linkedNct.value[doc.nct_number] || null : null,
+      extra: props.extras[doc.euct_number],
+      date: new Date(doc.decision_date || doc.last_update_date || 0).getTime(),
+    });
+  }
+  return out.sort((a, b) => b.date - a.date);
+});
+
+// ::::: Filtres locaux
+const SOURCE_OPTIONS = ['NCT', 'EUCT'];
+const searchText = ref('');
+const filterSource = ref<string | undefined>(undefined);
+const filterStatus = ref<string[]>([]);
+const filterRareDiseases = ref<string[]>([]);
+const filterIcd10 = ref<string[]>([]);
+const filterOncoTerms = ref<string[]>([]);
+
+const hasBothSources = computed(
+  () => rows.value.some((r) => r.kind === 'nct') && rows.value.some((r) => r.kind === 'euct'),
+);
+
+const statusOf = (row: Row) =>
+  row.kind === 'nct' ? row.doc.overall_status : row.doc.global_status;
+
+// Memes champs sur NCT et EUCT, en comptant le jumeau.
+const rareDiseasesOf = (doc: any): string[] =>
+  Array.isArray(doc?.rare_diseases)
+    ? doc.rare_diseases.map((r: any) => r?.concat_disease_name_orpha_code).filter(Boolean)
+    : [];
+const icd10Of = (doc: any): string[] =>
+  Array.isArray(doc?.diseases)
+    ? doc.diseases.flatMap((d: any) =>
+        (d?.icd10 || []).map((i: any) => i?.combined_label).filter(Boolean),
+      )
+    : [];
+const oncoTermsOf = (doc: any): string[] =>
+  Array.isArray(doc?.diseases)
+    ? doc.diseases.flatMap((d: any) => (d?.section || []).map((s: any) => s?.label).filter(Boolean))
+    : [];
+const bothSides = (row: Row, pick: (doc: any) => string[]) => [
+  ...pick(row.doc),
+  ...pick(row.linked),
+];
+const collect = (pick: (doc: any) => string[]) =>
+  [...new Set(rows.value.flatMap((r) => bothSides(r, pick)))].sort();
+
+const statusOptions = computed(() =>
+  [...new Set(rows.value.map(statusOf).filter((s) => s && s !== '-'))].sort(),
+);
+const rareDiseasesOptions = computed(() => collect(rareDiseasesOf));
+const icd10Options = computed(() => collect(icd10Of));
+const oncoTermsOptions = computed(() => collect(oncoTermsOf));
+
+const activeFiltersCount = computed(
+  () =>
+    [
+      searchText.value,
+      filterSource.value,
+      filterStatus.value.length,
+      filterRareDiseases.value.length,
+      filterIcd10.value.length,
+      filterOncoTerms.value.length,
+    ].filter(Boolean).length,
+);
+
+const clearAllFilters = () => {
+  searchText.value = '';
+  filterSource.value = undefined;
+  filterStatus.value = [];
+  filterRareDiseases.value = [];
+  filterIcd10.value = [];
+  filterOncoTerms.value = [];
+};
+
+const searchableText = (row: Row) => {
+  const d = row.doc;
+  const l = row.linked || {};
+  return [
+    row.id,
+    l.euct_number,
+    l.nct_id,
+    d.official_title,
+    d.brief_title,
+    d.public_title,
+    l.official_title,
+    l.public_title,
+    statusOf(row),
+    d.phase,
+    d.trial_phase,
+    d.study_type,
+    row.extra?.role,
+    ...(d.sponsors || []).map((s: any) => s?.sponsor_name),
+    ...(d.co_sponsors || []).map((s: any) => s?.organisation?.name),
+    ...(d.intervention || []).map((i: any) => i?.intervention_name),
+    ...(d.products || []).map(
+      (p: any) =>
+        p?.productDictionaryInfo?.prodName || p?.productDictionaryInfo?.activeSubstanceName,
+    ),
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .toLowerCase();
+};
+
+const filtered = computed(() => {
+  const hasAny = (values: string[], selected: string[]) =>
+    selected.some((v) => values.includes(v));
+  let out = rows.value;
+  if (filterSource.value) out = out.filter((r) => r.kind === filterSource.value?.toLowerCase());
+  if (filterStatus.value.length) out = out.filter((r) => filterStatus.value.includes(statusOf(r)));
+  if (filterRareDiseases.value.length) {
+    out = out.filter((r) => hasAny(bothSides(r, rareDiseasesOf), filterRareDiseases.value));
+  }
+  if (filterIcd10.value.length) {
+    out = out.filter((r) => hasAny(bothSides(r, icd10Of), filterIcd10.value));
+  }
+  if (filterOncoTerms.value.length) {
+    out = out.filter((r) => hasAny(bothSides(r, oncoTermsOf), filterOncoTerms.value));
+  }
+  const q = searchText.value.trim().toLowerCase();
+  if (q) out = out.filter((r) => searchableText(r).includes(q));
+  return out;
+});
+
+const PAGE_SIZE = 20;
+const displayCount = ref(PAGE_SIZE);
+const visible = computed(() => filtered.value.slice(0, displayCount.value));
+
+watch(
+  [searchText, filterSource, filterStatus, filterRareDiseases, filterIcd10, filterOncoTerms],
+  () => {
+    displayCount.value = PAGE_SIZE;
+  },
+  { deep: true },
+);
+</script>
+
+<style scoped>
+.load_more {
+  align-self: center;
+  justify-self: center;
+}
+</style>

package/layer/app/components/oip-science/clinical-trials/PairBadge.vue

@@ -0,0 +1,25 @@
+<!-- Repere d'une carte double : l'essai est enregistre dans CT.gov et EUCT. -->
+<template>
+  <span class="ct_pair_badge" :data-tooltip="$t('oipScience.cards.pairTooltip')">
+    <RmIcon name="ArrowsLeftRight" :size="14" />
+    {{ $t('oipScience.cards.pairBadge') }}
+  </span>
+</template>
+
+<style scoped>
+/* A la hauteur des codes copiables, dans le violet clair du bandeau de projet. */
+.ct_pair_badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-2) var(--space-8);
+  border: 1px solid color-mix(in srgb, var(--rm-shell-accent) 40%, transparent);
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--rm-shell-accent) 16%, var(--rm-shell-surface));
+  color: var(--color-primary);
+  font-size: var(--font-13);
+  font-weight: var(--weight-semibold);
+  line-height: 1.4;
+  cursor: help;
+}
+</style>