@tekkare/romulus 0.1.251 → 0.1.252

package/layer/app/components/oip-drugs/heart/results/AccesCard.vue

@@ -0,0 +1,696 @@
+<template>
+  <!-- Component for global result card -->
+  <!-- I would advise to create a separate card component for France results as there is more info displayed on the card -->
+  <RmSectionCard
+    class="oip-drugs"
+    v-if="getLatestHistory !== undefined"
+    position="top"
+    :class="inDetails ? '' : 'action'"
+  >
+    <template #header>
+      <div class="oip_row v-center justify-between full_flex" style="width: 100%">
+        <div class="oip_row gap-8 wrap v-center">
+              <RmTag v-if="inDetails && isFirst" variant="green">{{
+                $t("oipDrugs.heart.card.first")
+              }}</RmTag>
+              <RmTag v-if="opinionMatch" variant="green">
+                Match : {{ opinionMatch.fields.map(f => f.label).join(', ') }} - {{ $t('oipDrugs.heart.card.history.opinion') }} <RmDate :lang="locale" :date="opinionMatch.date" />
+              </RmTag>
+              <RmTag v-if="filterMatches.length > 0" variant="green">
+                Match : {{ filterMatches.join(', ') }}
+              </RmTag>
+          <RmTag variant="teal">{{ opinionCount }} {{ opinionCount > 1 ? (locale === 'fr' ? 'avis' : 'opinions') : (locale === 'fr' ? 'avis' : 'opinion') }}</RmTag>
+          <div class="oip_row v-center gap-8" v-if="locale === 'en' || showOriginal">
+            <p>{{ $t("oipDrugs.heart.translation") }}</p>
+            <div class="link" @click="showOriginal = !showOriginal">
+              {{ showOriginal ? $t("oipDrugs.heart.card.lang") : $t("oipDrugs.heart.card.original") }}
+            </div>
+          </div>
+        </div>
+        <div v-if="!inDetails" class="oip_row v-center gap-8" style="margin-left: auto">
+          <a
+            :href="detailsHref"
+            @click="onDetails"
+          >
+            <RmButton prefix-icon="Eye" variant="secondary">{{ $t("oipDrugs.heart.card.details") }}</RmButton>
+          </a>
+        </div>
+      </div>
+    </template>
+    <div class="card_display">
+      <div class="card_top">
+        <div class="oip_row gap-32 space-between">
+          <div class="card_header">
+            <div class="card_title">
+              <oip-drugs-heart-text-highlight
+                :text="`${product._source.brand_group} - ${getLatestHistory.molecule}`"
+                :queries="getMolHighlight.concat(getHighlight(['brand']))"
+                class="has_product_title"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="oip_row v-center gap-8 card_head_text wrap">
+          <RmDate :lang="locale" :date="getLatestHistory.decision_date" />
+          <div class="sep">&nbsp;</div>
+          <span v-if="getLatestHistory.has_code"><strong class="has_code_prefix">{{ getLatestHistory.has_code.slice(0, 2) }}</strong>{{ getLatestHistory.has_code.slice(2) }}</span>
+          <span
+            v-if="
+              (getLatestHistory.has_code &&
+                getLatestHistory.has_code !== null &&
+                (locale === 'fr' || showOriginal) &&
+                (getLatestHistory.nature_of_request_regroup !== null ||
+                  getLatestHistory.nature_of_request !== null)) ||
+              (locale === 'en' &&
+                !showOriginal &&
+                ((getLatestHistory.nature_of_request_regroup_en &&
+                  getLatestHistory.nature_of_request_regroup_en !== null) ||
+                  (getLatestHistory.nature_of_request_en &&
+                    getLatestHistory.nature_of_request_en !== null)))
+            "
+            >-</span
+          >
+          <oip-drugs-heart-text-highlight
+            :text="
+              !showOriginal && locale === 'en'
+                ? getLatestHistory.nature_of_request_regroup_en !== null
+                  ? getLatestHistory.nature_of_request_regroup_en
+                  : getLatestHistory.nature_of_request_en
+                : getLatestHistory.nature_of_request_regroup !== null
+                ? getLatestHistory.nature_of_request_regroup
+                : getLatestHistory.nature_of_request
+            "
+            :queries="getStore('motif')"
+            v-if="
+              ((locale === 'fr' || showOriginal) &&
+                (getLatestHistory.nature_of_request_regroup !== null ||
+                  getLatestHistory.nature_of_request !== null)) ||
+              (locale === 'en' &&
+                !showOriginal &&
+                ((getLatestHistory.nature_of_request_regroup_en &&
+                  getLatestHistory.nature_of_request_regroup_en !== null) ||
+                  (getLatestHistory.nature_of_request_en &&
+                    getLatestHistory.nature_of_request_en !== null)))
+            "
+          />
+        </div>
+      </div>
+      <div class="oip_row v-center gap-8">
+        <div class="oip_list v-start gap-4">
+          <p class="oip_filter_label">ATC5</p>
+          <RmTag variant="transparent">
+            <oip-drugs-heart-text-highlight
+              v-if="getLatestHistory.atc5_code !== null"
+              :text="getLatestHistory.atc5_code?.join(', ')"
+              :queries="getMolHighlight"
+            />
+            <span v-else>{{ $t("oipDrugs.heart.card.not_provided") }}</span></RmTag>
+        </div>
+        <div
+          v-if="allCompanies.length > 0"
+          class="oip_list v-start gap-4"
+          style="flex: 1; min-width: 0;"
+        >
+          <p class="oip_filter_label">{{ $t("oipDrugs.heart.card.labels.comps") }}</p>
+          <RmTagRow :tags="allCompanies" />
+        </div>
+      </div>
+      <oip-drugs-heart-text-highlight
+        :key="textKey"
+        crop
+        have-read-more
+        :queries="getHighlightQueries"
+        :text="
+          locale === 'en' && !showOriginal ? accessOpinionEn : accessOpinion
+        "
+        v-if="getLatestHistory.essential || getLatestHistory.essential_en"
+        :lang="locale"
+        class="oip_body"
+        :id="`access_${getLatestHistory.brand}_${getLatestHistory.opinion_id}`"
+      />
+      <div
+        v-if="getLatestHistory.theme !== null || rareList.length > 0 || oncologyIcd10.length > 0 || oncologyTerms.length > 0"
+        class="oip_list v-start gap-16"
+      >
+        <div v-if="getLatestHistory.theme !== null" class="indic_category_row">
+          <div class="indic_category_label">
+            <RmIcon name="Tag" :size="16" color="#4A4A4A" />
+            <p class="oip_filter_label">{{ $t("oipDrugs.heart.card.labels.theme") }}</p>
+          </div>
+          <div class="indic_tags_wrap">
+            <RmTag variant="gray"
+              v-for="(theme, index) in locale === 'en' && !showOriginal
+                ? getLatestHistory.theme_en?.split(',')
+                : getLatestHistory.theme?.split(',')"
+              :key="index"
+              ><oip-drugs-heart-text-highlight :text="theme" :queries="getHighlightQueries"
+            /></RmTag>
+          </div>
+        </div>
+        <div v-if="rareList.length > 0" class="indic_category_row">
+          <div class="indic_category_label">
+            <RmIcon name="Virus" :size="16" color="#4A4A4A" />
+            <p class="oip_filter_label">
+              {{ locale === "fr" ? "Maladies Rares" : "Rare Diseases" }}
+            </p>
+          </div>
+          <div class="indic_tags_wrap">
+            <div v-for="(rare, index) in rareList.slice(0, maxTags)" :key="index">
+              <RmTag variant="gray">
+                <oip-drugs-heart-text-highlight
+                  :text="rare"
+                  :queries="getHighlight(['rare'])"
+              /></RmTag>
+            </div>
+            <div v-if="rareList.length > maxTags" class="indic_more_tag" @mouseenter="rareTooltip = true" @mouseleave="rareTooltip = false">
+              <RmTag variant="gray">+{{ rareList.length - maxTags }}</RmTag>
+              <div v-if="rareTooltip" class="indic_tooltip">
+                <RmTag variant="gray" v-for="(rare, i) in rareList.slice(maxTags)" :key="'rare-tip-' + i">
+                  {{ rare }}
+                </RmTag>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-if="oncologyIcd10.length > 0" class="indic_category_row">
+          <div class="indic_category_label">
+            <RmIcon name="Dna" :size="16" color="#4A4A4A" />
+            <p class="oip_filter_label">Oncology ICD-10</p>
+          </div>
+          <div class="indic_tags_wrap">
+            <RmTag v-for="(item, i) in oncologyIcd10.slice(0, maxTags)" :key="'icd-' + i" variant="gray">
+              {{ item }}
+            </RmTag>
+            <div v-if="oncologyIcd10.length > maxTags" class="indic_more_tag" @mouseenter="icdTooltip = true" @mouseleave="icdTooltip = false">
+              <RmTag variant="gray">+{{ oncologyIcd10.length - maxTags }}</RmTag>
+              <div v-if="icdTooltip" class="indic_tooltip">
+                <RmTag v-for="(item, i) in oncologyIcd10.slice(maxTags)" :key="'icd-tip-' + i" variant="gray">
+                  {{ item }}
+                </RmTag>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-if="oncologyTerms.length > 0" class="indic_category_row">
+          <div class="indic_category_label">
+            <RmIcon name="Stethoscope" :size="16" color="#4A4A4A" />
+            <p class="oip_filter_label">Oncology Terms</p>
+          </div>
+          <div class="indic_tags_wrap">
+            <RmTag v-for="(term, i) in oncologyTerms.slice(0, maxTags)" :key="'onco-' + i" variant="gray">
+              {{ term }}
+            </RmTag>
+            <div v-if="oncologyTerms.length > maxTags" class="indic_more_tag" @mouseenter="termsTooltip = true" @mouseleave="termsTooltip = false">
+              <RmTag variant="gray">+{{ oncologyTerms.length - maxTags }}</RmTag>
+              <div v-if="termsTooltip" class="indic_tooltip">
+                <RmTag v-for="(term, i) in oncologyTerms.slice(maxTags)" :key="'onco-tip-' + i" variant="gray">
+                  {{ term }}
+                </RmTag>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Pied de carte : la source voyage avec le resultat plutot
+           qu'en tete de page. Elle est posee ici, dernier enfant de
+           .card_display, et non dans le slot #footer : celui-ci ne
+           s'affiche qu'avec `position="bottom"`, ce qui supprimerait
+           le slot #header dont la carte a besoin. Et pas en frere de
+           .card_display non plus : `.card_content` d'Auriga est un
+           flex row, le pied y deviendrait une colonne de droite. -->
+      <div class="card_source_footer">
+        <oip-drugs-heart-search-page-dynamic-source
+          :last-label="$t('oipDrugs.heart.sources.lastDecision')"
+          :last-date="getLatestHistory?.decision_date"
+        />
+      </div>
+    </div>
+  </RmSectionCard>
+</template>
+
+<script setup lang="ts">
+import {
+  heartGetBestOpinionMatch,
+  heartGetMatchedFields,
+  heartGetRareHighlightTerms,
+  heartGetTaggingHighlightWords,
+  heartSplitSearchTerms,
+} from "../../../../oip-drugs/composables/useHeartDetailSearches";
+import { drugsBrandPath } from "../../../../oip-drugs/kinds";
+import { useOipResourceNav } from "../../../../composables/useOipResourceNav";
+
+
+// product = one result from ES query
+const props = defineProps({
+  product: {
+    type: Object as PropType<Record<string, any>>,
+    required: true,
+  },
+  inDetails: {
+    type: Boolean,
+    default: false,
+  },
+  history: {
+    type: Array as PropType<any[]>,
+    default: () => [],
+  },
+  pathName: {
+    type: String,
+    require: true,
+  },
+  isFirst: {
+    type: Boolean,
+    default: false,
+  },
+  /** Termes cherches a surligner (ex-filterStore de la page de recherche). */
+  highlight: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const showModal = ref(false);
+const { locale } = useI18n();
+const nav = useOipResourceNav();
+const isFavOpinion = ref(0);
+const showOriginal = ref(false);
+
+const maxTags = 4;
+const icdTooltip = ref(false);
+const termsTooltip = ref(false);
+const rareTooltip = ref(false);
+
+const rareList = computed(() => {
+  const src = locale.value === 'fr' || showOriginal.value
+    ? props.product._source?.rare_diseases
+    : props.product._source?.rare_diseases_en;
+  return src?.map((a: any) => a.concat_disease_name_orpha_code) ?? [];
+});
+
+const oncologyIcd10 = computed(() => {
+  const tagging = locale.value === 'fr'
+    ? props.product._source?.oncology_tagging_fr
+    : props.product._source?.oncology_tagging_en;
+  if (!tagging || !Array.isArray(tagging)) return [];
+  const labels = new Set<string>();
+  tagging.forEach((t: any) => {
+    if (t.icd10 && Array.isArray(t.icd10)) {
+      t.icd10.forEach((icd: any) => {
+        if (icd.combined_label) labels.add(icd.combined_label);
+      });
+    }
+  });
+  return [...labels];
+});
+
+const oncologyTerms = computed(() => {
+  const tagging = locale.value === 'fr'
+    ? props.product._source?.oncology_tagging_fr
+    : props.product._source?.oncology_tagging_en;
+  if (!tagging || !Array.isArray(tagging)) return [];
+  const terms = new Set<string>();
+  tagging.forEach((t: any) => {
+    if (t.preferred_label) terms.add(t.preferred_label);
+  });
+  return [...terms];
+});
+
+const textKey = ref(0);
+
+watch(
+  () => showOriginal.value,
+  () => {
+    textKey.value += 1;
+  }
+);
+
+function getHistoryLabel(hist: any) {
+  if (hist.opinion_type === "early_access_decision") {
+    return `AP`;
+  } else {
+    return `CT`;
+  }
+}
+
+const opinionCount = computed(() => {
+  return props.product._source.brand_history.filter((a: any) => a.document_type !== 'alert').length;
+});
+
+const getLatestHistory = computed(() => {
+  // If opinion filter has inner_hits, show the most recent matching opinion
+  if (props.product.inner_hits?.opinion?.hits?.hits?.length > 0) {
+    const matchingOpinions = props.product.inner_hits.opinion.hits.hits
+      .map((h: any) => h._source)
+      .filter((o: any) => o.opinion_type === "early_access_decision")
+      .sort(
+        (a: any, b: any) =>
+          new Date(b.decision_date).getTime() -
+          new Date(a.decision_date).getTime()
+      );
+    if (matchingOpinions.length > 0) {
+      return matchingOpinions[0];
+    }
+  }
+
+  // Default: latest early_access_decision
+  return props.product._source.brand_history?.[0]?.opinion_type ===
+    "early_access_decision"
+    ? props.product._source.brand_history[0]
+    : props.product._source.brand_history?.find(
+        (a: any) => a.opinion_type === "early_access_decision"
+      );
+});
+
+const allCompanies = computed(() => {
+  return [...new Set<string>(
+    props.product._source.brand_history
+      .map((h: any) => h.company)
+      .filter((c: any) => c !== null && c !== undefined && c.length > 0)
+  )];
+});
+
+// fr_drugs_app relisait les filtres de sa page de recherche (filterStore) ;
+// le layer ne recoit que les termes cherches (`highlight`).
+const getStore = (filter: string): any[] => {
+  return filter === "Search Filter" ? props.highlight ?? [] : [];
+};
+
+const isHistoryMatch = computed(() => {
+  const innerHits = props.product.inner_hits
+    ? Object.keys(props.product.inner_hits)
+    : [];
+
+  let match = ref(true);
+  innerHits.forEach((hit) => {
+    if (
+      props.product.inner_hits[hit].hits.total.value > 0 &&
+      props.product.inner_hits[hit].hits.hits.filter(
+        (f: any) => f._source.opinion_id === getLatestHistory.value.opinion_id
+      ).length === 0
+    ) {
+      match.value = false;
+    }
+  });
+
+  return match.value;
+});
+
+const taggingData = computed(() => {
+  return locale.value === 'fr'
+    ? props.product._source?.oncology_tagging_fr
+    : props.product._source?.oncology_tagging_en;
+});
+
+const filterMatches = computed(() => {
+  const opinion = getLatestHistory.value;
+  if (!opinion) return [];
+  const parts: string[] = [];
+
+  const oncoTermsValues = getStore('oncologyTerms');
+  if (oncoTermsValues?.length > 0 && oncologyTerms.value.length > 0) {
+    const highlightWords = heartGetTaggingHighlightWords(taggingData.value, oncoTermsValues);
+    const fields = highlightWords.length > 0 ? heartGetMatchedFields(opinion, highlightWords, locale.value) : [];
+    parts.push(fields.length > 0 ? `Oncology Terms (${fields.map(f => f.label).join(', ')})` : 'Oncology Terms');
+  }
+
+  const oncoIcdValues = getStore('oncologyIcd10');
+  if (oncoIcdValues?.length > 0 && oncologyIcd10.value.length > 0) {
+    const highlightWords = heartGetTaggingHighlightWords(taggingData.value, oncoIcdValues);
+    const fields = highlightWords.length > 0 ? heartGetMatchedFields(opinion, highlightWords, locale.value) : [];
+    parts.push(fields.length > 0 ? `Oncology ICD-10 (${fields.map(f => f.label).join(', ')})` : 'Oncology ICD-10');
+  }
+
+  return parts;
+});
+
+const hasHeaderContent = computed(() => {
+  return (props.inDetails && props.isFirst) || !!opinionMatch.value || filterMatches.value.length > 0 || locale.value === 'en' || showOriginal.value;
+});
+
+const opinionMatch = computed(() => {
+  return heartGetBestOpinionMatch(
+    props.product._source.brand_history,
+    getSearches.value,
+    locale.value
+  );
+});
+
+/** La fiche marque dans fr_drugs_app, sur l'avis matche. */
+const detailsPath = computed(() => {
+  const base = drugsBrandPath(props.product._source.brand_group);
+  const code = opinionMatch.value?.hasCode ?? getLatestHistory.value?.has_code;
+  return code ? `${base}?code=${encodeURIComponent(code)}` : base;
+});
+const detailsHref = computed(() => nav.appHref("fr_drugs_app", detailsPath.value));
+
+/** Le clic garde le Ctrl/Cmd-clic du navigateur (nouvel onglet). */
+function onDetails(event: MouseEvent) {
+  if (event.metaKey || event.ctrlKey || event.shiftKey || event.button === 1) return;
+  event.preventDefault();
+  nav.openApp("fr_drugs_app", detailsPath.value);
+}
+
+
+function getHighlight(filters: string[]) {
+  const filterValues = ref<any[]>([]);
+  filters.forEach((filter) => {
+    filterValues.value.push(getStore(filter));
+  });
+  return filterValues.value
+    .concat(getSearches.value)
+    .flat()
+    .filter((f) => f && f.length > 0);
+}
+const getSearches = computed(() => {
+  const searches = getStore("Search Filter");
+  if (searches && searches.length > 0) {
+    return heartSplitSearchTerms(searches);
+  } else return [];
+});
+
+const getHighlightQueries = computed(() => {
+  const terms = [...getSearches.value];
+  const oncoTermsValues = getStore('oncologyTerms');
+  if (oncoTermsValues?.length > 0) {
+    terms.push(...heartGetTaggingHighlightWords(taggingData.value, oncoTermsValues));
+  }
+  const oncoIcdValues = getStore('oncologyIcd10');
+  if (oncoIcdValues?.length > 0) {
+    terms.push(...heartGetTaggingHighlightWords(taggingData.value, oncoIcdValues));
+  }
+  const rareValues = getStore('rare');
+  if (rareValues?.length > 0) {
+    terms.push(...heartGetRareHighlightTerms(rareValues));
+  }
+  return [...new Set(terms)];
+});
+
+const accessOpinionEn = computed(() => {
+  let accessEssential;
+  // `essential` peut etre null : la HAS ne remplit pas toujours l'essentiel.
+  const essential = getLatestHistory.value.essential ?? "";
+  if (getLatestHistory.value.opinion_status === "avis favorable") {
+    isFavOpinion.value = 2;
+    accessEssential = getLatestHistory.value.essential_en?.replace(
+      "Opinion against",
+      ""
+    );
+  } else if (
+    getLatestHistory.value.opinion_status === "autorisation renouvelée" ||
+    essential.includes("Autorisation d’accès précoce renouvelée") ||
+    essential.includes("L'autorisation d’accès précoce est renouvelée")
+  ) {
+    isFavOpinion.value = 3;
+    accessEssential = getLatestHistory.value.essential_en;
+  } else if (getLatestHistory.value.opinion_status === "avis défavorable") {
+    isFavOpinion.value = 1;
+    accessEssential = getLatestHistory.value.essential_en?.replace(
+      "Opinion unfavorable",
+      ""
+    );
+  } else {
+    isFavOpinion.value = 0;
+    accessEssential = getLatestHistory.value.essential_en;
+  }
+
+  return `${
+    isFavOpinion.value === 2
+      ? '<span class="has_fav_access">Favorable opinion </span>'
+      : isFavOpinion.value === 3
+      ? '<span class="has_fav_access">Authorisation renewal </span>'
+      : '<span class="has_defav_access">Unfavorable opinion </span>'
+  }${accessEssential}`;
+});
+const accessOpinion = computed(() => {
+  let accessEssential;
+  // `essential` peut etre null : la HAS ne remplit pas toujours l'essentiel.
+  const essential = getLatestHistory.value.essential ?? "";
+  if (getLatestHistory.value.opinion_status === "avis favorable") {
+    isFavOpinion.value = 2;
+    accessEssential = essential.replace("Avis favorable", "");
+  } else if (
+    getLatestHistory.value.opinion_status === "autorisation renouvelée" ||
+    essential.includes("Autorisation d’accès précoce renouvelée") ||
+    essential.includes("L'autorisation d’accès précoce est renouvelée")
+  ) {
+    isFavOpinion.value = 3;
+    accessEssential = essential;
+  } else if (getLatestHistory.value.opinion_status === "avis défavorable") {
+    isFavOpinion.value = 1;
+    accessEssential = essential.replace("Avis défavorable", "");
+  } else {
+    isFavOpinion.value = 0;
+    accessEssential = essential;
+  }
+
+  return `${
+    isFavOpinion.value === 2
+      ? '<span class="has_fav_access">Avis favorable </span>'
+      : isFavOpinion.value === 3
+      ? '<span class="has_fav_access">Autorisation renouvelée </span>'
+      : '<span class="has_defav_access">Avis défavorable </span>'
+  }${accessEssential}`;
+});
+const getMolHighlight = computed(() => {
+  const mols = getStore("molecule");
+  const finalMolArray: any = [];
+  if (mols.length > 0) {
+    mols.forEach((mol: any) => {
+      finalMolArray.push(
+        mol.split(" (ATC5: ")[0],
+        mol.split(" (ATC5: ")[1]?.replace(")", "")
+      );
+    });
+  }
+  return finalMolArray.filter(Boolean);
+});
+const nestedResults = computed(() => {
+  const nestedCommonHits = ref<any[]>([]);
+
+  if (props.product.inner_hits !== undefined) {
+    const tempHits = Object.values(props.product.inner_hits).map(
+      (innerHit: any) => innerHit.hits.hits
+    );
+
+    const common =
+      tempHits.length > 0
+        ? tempHits.reduce((acc, currentArray) => {
+            return acc.filter((item: any) =>
+              currentArray.some(
+                (currentItem: any) =>
+                  item._source.opinion_id === currentItem._source.opinion_id
+              )
+            );
+          })
+        : [];
+    if (common.length > 0) {
+      common.forEach((item: any) => {
+        nestedCommonHits.value.push(item);
+      });
+    }
+    return nestedCommonHits.value
+      .map((a) => a._source)
+      .sort(
+        (a, b) =>
+          new Date(b.decision_date).getTime() -
+          new Date(a.decision_date).getTime()
+      );
+  } else {
+    return props.product._source.brand_history;
+  }
+});
+
+const getMatchDate = computed(() => {
+  return nestedResults.value[0]?.decision_date;
+});
+
+</script>
+
+<style scoped>
+/* Pied de source, cale sur `.drug-card-foot` du design system : libelle
+   atenue, 11px, filet clair. Le bleu primaire d'arg-source-container y
+   attirait l'oeil autant que le titre du resultat, alors que la provenance
+   se lit apres. */
+.card_source_footer {
+  display: flex;
+  align-items: center;
+  /* Pas de marge haute : `.card_display` porte deja `gap: 20px`, qui separe
+     le pied du dernier bloc de contenu. S'y ajouter faisait 28px au-dessus
+     du filet contre 25 en dessous, d'ou le desequilibre. */
+  padding-top: 6px;
+  border-top: 1px solid var(--light);
+  font-size: 11px;
+}
+
+/* Auriga pose 24px de padding sous le contenu de la carte, pensés pour un
+   bloc de texte, pas pour un pied de provenance : ça laissait 25px de vide
+   sous le filet. La charte en met 8 sous ce texte (`.drug-card-foot`).
+   Cible la carte courante via son style scope, pas toutes les
+   `arg_section_card` de l'app. */
+:deep(.card_content) {
+  padding-bottom: 8px;
+}
+
+.card_source_footer :deep(a),
+.card_source_footer :deep(span) {
+  color: var(--medium) !important;
+  font-size: 11px;
+}
+
+
+/* Le pied reste cliquable — il ouvre le tiroir Sources. En gris il n'a plus
+   de couleur pour le dire, donc le survol assombrit au lieu de repasser au
+   primaire : l'affordance survit sans reintroduire le bleu. */
+.card_source_footer:hover :deep(a),
+.card_source_footer:hover :deep(span) {
+  color: var(--darkest) !important;
+}
+
+
+.has_code_prefix {
+  font-weight: 700;
+}
+.indic_category_row {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 12px;
+}
+.indic_category_label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 160px;
+  white-space: nowrap;
+  padding-top: 4px;
+}
+.indic_tags_wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+.indic_more_tag {
+  position: relative;
+  cursor: pointer;
+}
+.indic_tooltip {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  right: 0;
+  z-index: 100;
+  background: var(--bg-surface);
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  max-width: 400px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+</style>