@tekkare/romulus 0.1.241 → 0.1.243

package/layer/app/components/OipShell.vue

@@ -0,0 +1,713 @@
+<!--
+  Cadre OIP 7 commun aux apps, extrait de fr_drugs_app (layout/shell.vue).
+
+  Le chrome vient de Romulus (RmAppShell / RmSidebarLeft / RmAppHeader /
+  RmSidebarRight / RmRailPanel). Ce composant le cable sur ce que l'app lui
+  donne : sa navigation et ses tuiles en props, ce qui ne bouge pas (plateforme,
+  pays, parties du hub, langues) dans app.config.oip.
+
+  Ce qui depend d'une fonction de l'app (vues, alertes, tutoriels, projets,
+  metadonnees) n'est pas ici : l'app le pose dans les slots (`tool` pour les
+  panneaux, le slot par defaut pour la pastille de vue ou la visite guidee) et
+  pilote la tuile ouverte par `v-model:tool`. Seule l'accessibilite est servie
+  par le cadre : elle ne depend de rien.
+-->
+<script setup lang="ts">
+import type { Component } from "vue";
+import type {
+  OipExternalCrumb,
+  OipNavSection,
+  OipRailTile,
+} from "../types/oip";
+import {
+  OIP_RAIL_GROUPS,
+  OIP_RAIL_TILES,
+  type OipRailGroupKey,
+  type OipRailTileKey,
+  type OipRailTileStates,
+} from "../utils/oipRail";
+import OipPanelDocuments from "./panels/OipPanelDocuments.vue";
+import OipPanelMetadata from "./panels/OipPanelMetadata.vue";
+import OipPanelNotes from "./panels/OipPanelNotes.vue";
+import OipPanelProjects from "./panels/OipPanelProjects.vue";
+import OipPanelSources from "./panels/OipPanelSources.vue";
+import OipPanelSourceTables from "./panels/OipPanelSourceTables.vue";
+import OipPanelTopics from "./panels/OipPanelTopics.vue";
+import OipPanelTutorials from "./panels/OipPanelTutorials.vue";
+
+// Relatif et non `~/` : dans un layer, `~` designe l'app qui l'etend.
+import tekkareLogoRaw from "../assets/tekkare_logo.svg?raw";
+
+/** Panneaux portes par le layer, par tuile. */
+const LAYER_PANELS: Partial<Record<OipRailTileKey, Component>> = {
+  Documents: OipPanelDocuments,
+  Metadata: OipPanelMetadata,
+  Notes: OipPanelNotes,
+  Projects: OipPanelProjects,
+  Sources: OipPanelSources,
+  SourcesTables: OipPanelSourceTables,
+  Topics: OipPanelTopics,
+  Tutorials: OipPanelTutorials,
+};
+
+const props = withDefaults(
+  defineProps<{
+    /** Identite affichee en tete de la barre gauche. */
+    title: string;
+    /** Code ISO alpha-2 du pays de l'app, dessine devant ce titre. */
+    flag?: string;
+    /** Navigation, dans la forme attendue par RmSidebarLeft. */
+    sections: OipNavSection[];
+    /** Partie du hub ouverte, parmi app.config.oip.parts. */
+    appKey?: string;
+    /** Maillon de partie pose a la main, pour une app sans `parts`. */
+    part?: { label: string; to: string } | null;
+    /** Remplace app.config.oip.home quand le maillon pays est dynamique. */
+    home?: OipExternalCrumb | null;
+    /**
+     * Etat des tuiles pour l'ecran, par cle du catalogue (utils/oipRail).
+     * L'ordre, le nom et l'icone viennent du catalogue ; une tuile absente
+     * sort grisee. Objet vide : le rail ne propose rien (rapports, artefacts).
+     */
+    tiles?: OipRailTileStates;
+    /** Sert les tuiles reservees aux superadmins (metadonnees, templates). */
+    superAdmin?: boolean;
+    /** Utilisateur connecte, pour le profil en haut du rail. */
+    userName?: string;
+    /**
+     * Masque les onglets du panneau ouvert. Pour un panneau qui ne doit pas
+     * etre quitte par un onglet (un formulaire en cours de saisie).
+     */
+    hideTabs?: boolean;
+    /**
+     * Props passees au panneau du layer d'une tuile, pour ce qui depend du
+     * layout (ex. `{ Documents: { app: "heart" } }`). Les options fixes vont
+     * dans app.config.oip.panels.
+     */
+    panelProps?: Partial<Record<OipRailTileKey, Record<string, unknown>>>;
+  }>(),
+  { flag: "fr", appKey: "", part: null, home: undefined, tiles: () => ({}), superAdmin: false, userName: "", hideTabs: false, panelProps: () => ({}) },
+);
+
+/** Tuile ouverte, ou null quand la toolbar est fermee. */
+const tool = defineModel<string | null>("tool", { default: null });
+
+const config = useAppConfig().oip;
+const route = useRoute();
+const { locale, locales, setLocale } = useI18n();
+const localePath = useLocalePath();
+const en = computed(() => locale.value === "en");
+
+/**
+ * Les liens de navigation passent par localePath et portent parfois un slash
+ * final ou une query ; le chemin courant, lui, est brut et prefixe de la
+ * locale. Tout est ramene au meme peigne avant comparaison, sans quoi
+ * "/fr/medicam/market" ne reconnait pas l'entree "/medicam/market".
+ */
+const localeCodes = computed(() =>
+  (locales.value as any[]).map((l) => (typeof l === "string" ? l : l.code)),
+);
+
+const normalize = (path: string) => {
+  let out = (path.split("?")[0] || "").replace(/\/+$/, "") || "/";
+  for (const code of localeCodes.value) {
+    if (out === `/${code}`) return "/";
+    if (out.startsWith(`/${code}/`)) {
+      out = out.slice(code.length + 1);
+      break;
+    }
+  }
+  return out || "/";
+};
+
+const currentPath = computed(() => normalize(route.path));
+
+/**
+ * Entree active : la plus longue dont le chemin prefixe celui de la page.
+ * Un prefixe simple ferait briller "Prix" en meme temps que "Prix > JO".
+ */
+const activeTo = computed(() => {
+  let best = "";
+  for (const section of props.sections) {
+    for (const item of section.items) {
+      if (!item.to) continue;
+      const to = normalize(item.to);
+      const hit = currentPath.value === to || currentPath.value.startsWith(to + "/");
+      if (hit && to.length > best.length) best = to;
+    }
+  }
+  return best;
+});
+
+/** RmSidebarLeft compare `item.to` a `activePath` : on lui donne le verdict. */
+const navSections = computed<OipNavSection[]>(() =>
+  props.sections.map((section) => ({
+    ...section,
+    items: section.items.map((item) => ({
+      ...item,
+      active: !!item.to && normalize(item.to) === activeTo.value,
+    })),
+  })),
+);
+
+const activeItem = computed(() => {
+  for (const section of props.sections) {
+    for (const item of section.items) {
+      if (item.to && normalize(item.to) === activeTo.value) return item;
+    }
+  }
+  return null;
+});
+
+const partLabel = (part: { label: string; labelEn?: string }) =>
+  en.value ? part.labelEn ?? part.label : part.label;
+
+const currentPart = computed(() => config.parts.find((p) => p.key === props.appKey) ?? null);
+
+/** Route d'accueil de la partie courante, sinon de l'app. */
+const appTo = computed(() => localePath(currentPart.value?.to ?? props.part?.to ?? "/"));
+
+const crumbLabel = useOipCrumbLabel();
+
+const activeLabel = computed(() => {
+  if (activeItem.value) return activeItem.value.label;
+  // Une page hors navigation peut nommer son maillon elle-meme (un projet).
+  if (crumbLabel.value) return crumbLabel.value;
+  // Sinon le dernier segment d'URL (une fiche produit porte sa marque).
+  const last = currentPath.value.split("/").filter(Boolean).pop() ?? "";
+  return decodeURIComponent(last).replace(/-/g, " ").replace(/^\w/, (c) => c.toUpperCase());
+});
+
+/**
+ * Derniere page listee dans la navigation. Une fiche s'ouvre depuis une liste :
+ * sans ce maillon, le fil sautait de la partie a la fiche sans offrir le
+ * retour. Gardee en session pour survivre a un rechargement de la fiche.
+ */
+const ORIGIN_KEY = "oip-hub-origin-page";
+const originPage = useState<{ label: string; to: string } | null>(ORIGIN_KEY, () => null);
+
+watchEffect(() => {
+  const item = activeItem.value;
+  if (item?.to) originPage.value = { label: item.label, to: item.to };
+});
+
+onMounted(() => {
+  if (!originPage.value) {
+    try {
+      const raw = sessionStorage.getItem(ORIGIN_KEY);
+      if (raw) originPage.value = JSON.parse(raw);
+    } catch {
+      // Session illisible : le fil se passe du maillon d'origine.
+    }
+  }
+  watch(
+    originPage,
+    (value) => {
+      try {
+        if (value) sessionStorage.setItem(ORIGIN_KEY, JSON.stringify(value));
+      } catch {
+        // Ecriture refusee (navigation privee) : sans consequence.
+      }
+    },
+    { immediate: true },
+  );
+});
+
+/** Le maillon de partie ouvre les autres parties du hub. */
+const partMenu = computed(() =>
+  config.parts
+    .filter((p) => !p.hidden)
+    .map((p) => ({
+      label: partLabel(p),
+      icon: p.icon,
+      to: localePath(p.to),
+      active: p.key === props.appKey,
+    })),
+);
+
+/** Le dernier maillon ouvre toutes les pages de la partie, sections confondues. */
+const pageMenu = computed(() =>
+  props.sections.flatMap((section) =>
+    section.items
+      .filter((item) => item.to)
+      .map((item) => ({
+        label: item.label,
+        icon: item.icon,
+        to: item.to,
+        group: section.label,
+        active: normalize(item.to!) === activeTo.value,
+      })),
+  ),
+);
+
+/** Plateforme > pays > partie > page d'origine > page. */
+const crumbs = computed(() => {
+  const home = props.home !== undefined ? props.home : config.home;
+  return [
+    config.platform,
+    ...(home ? [home] : []),
+    ...(currentPart.value
+      ? [{ label: partLabel(currentPart.value), to: appTo.value, menu: partMenu.value }]
+      : props.part
+        ? [{ label: props.part.label, to: localePath(props.part.to) }]
+        : []),
+    // Sur une fiche, la page d'origine reste dans le fil avant elle.
+    ...(activeItem.value || !originPage.value || !props.sections.length
+      ? []
+      : [{ label: originPage.value.label, to: originPage.value.to, menu: pageMenu.value }]),
+    ...(props.sections.length && activeLabel.value
+      ? [{ label: activeLabel.value, ...(activeItem.value ? { menu: pageMenu.value } : {}) }]
+      : []),
+  ];
+});
+
+const initials = computed(() => {
+  const parts = props.userName.split(/[\s@._-]+/).filter(Boolean);
+  const letters = (parts[0]?.[0] ?? "") + (parts.length > 1 ? parts[1]![0] : "");
+  return letters.toUpperCase() || "?";
+});
+
+// Changer de langue rejoue la route courante dans la nouvelle locale, sinon
+// le prefixe d'URL et la langue divergent.
+async function switchLocale(code: string) {
+  if (code === locale.value) return;
+  await setLocale(code as any);
+  await navigateTo(localePath(route.path));
+}
+
+/**
+ * Les tuiles, toujours les memes et dans le meme ordre d'un ecran et d'une app
+ * a l'autre (catalogue OIP_RAIL_TILES). Celles que l'ecran ne sert pas sortent
+ * grisees au lieu de disparaitre, sinon tout le rail se decale d'une page a
+ * l'autre. Les tuiles du cadre (accessibilite, tutoriels) ne dependent pas de
+ * la page.
+ */
+const A11Y_TILE_KEY = "Accessibility";
+
+if (import.meta.dev) {
+  watchEffect(() => {
+    const unknown = Object.keys(props.tiles).filter((key) => !OIP_RAIL_TILES.some((e) => e.key === key));
+    if (unknown.length) console.warn(`[OipShell] tuiles hors catalogue ignorees : ${unknown.join(", ")}`);
+  });
+}
+
+// Rien quand la page ne declare aucune tuile : les rapports et artefacts
+// pleine largeur ne doivent pas pouvoir ouvrir un panneau par-dessus.
+const baseTiles = computed<(OipRailTile & { ownCount?: boolean })[]>(() => {
+  if (!Object.keys(props.tiles).length) return [];
+  return OIP_RAIL_TILES.filter((entry) => !entry.admin || props.superAdmin).map((entry) => {
+    // Une tuile du cadre est servie sauf si l'ecran la refuse (`false`).
+    const state = props.tiles[entry.key] ?? !!entry.frame;
+    const extra = typeof state === "object" ? state : {};
+    return {
+      key: entry.key,
+      label: en.value ? entry.label.en : entry.label.fr,
+      icon: entry.icon,
+      ownCount: entry.ownCount,
+      ...extra,
+      disabled: !state || !!extra.disabled,
+    };
+  });
+});
+
+/**
+ * Tuiles regroupees en une seule, lue en onglets. `tool` garde la cle du
+ * membre ouvert. Un groupe dont un seul membre est present n'est pas forme.
+ */
+const groups = computed(() =>
+  (Object.keys(OIP_RAIL_GROUPS) as OipRailGroupKey[])
+    .map((key) => ({
+      key,
+      label: en.value ? OIP_RAIL_GROUPS[key].label.en : OIP_RAIL_GROUPS[key].label.fr,
+      icon: OIP_RAIL_GROUPS[key].icon,
+      members: baseTiles.value.filter((tile) =>
+        OIP_RAIL_TILES.some((e) => e.key === tile.key && e.group === key),
+      ),
+    }))
+    .filter((group) => group.members.length > 1),
+);
+
+const railTiles = computed<OipRailTile[]>(() => {
+  const out: OipRailTile[] = [];
+  for (const tile of baseTiles.value) {
+    const group = groups.value.find((g) => g.members.some((m) => m.key === tile.key));
+    if (!group) {
+      out.push(tile);
+      continue;
+    }
+    // Le groupe prend la place de son premier membre dans le rail.
+    if (group.members[0]!.key !== tile.key) continue;
+    const count = group.members.reduce(
+      (sum, m) => sum + (m.disabled || m.ownCount ? 0 : m.count ?? 0),
+      0,
+    );
+    out.push({
+      key: group.key,
+      label: group.label,
+      icon: group.icon ?? tile.icon,
+      width: group.members.find((m) => m.width)?.width,
+      count: count || undefined,
+      dot: group.members.some((m) => m.dot),
+      hint: group.members.find((m) => m.hint)?.hint,
+      // Grise seulement quand aucun de ses panneaux ne sert sur l'ecran.
+      disabled: group.members.every((m) => m.disabled),
+    });
+  }
+  return out;
+});
+
+/**
+ * Tuile reellement ouverte. Une page peut retirer ses tuiles en cours de
+ * route alors que `tool` garde la derniere ouverte : sans ce filtre, le
+ * panneau s'ouvrirait vide.
+ */
+const openGroup = computed(
+  () => groups.value.find((g) => g.members.some((m) => m.key === tool.value)) ?? null,
+);
+
+const openTile = computed(
+  () => railTiles.value.find((tile) => tile.key === (openGroup.value?.key ?? tool.value)) ?? null,
+);
+
+/** Cle du panneau lu : le membre ouvert, pour une tuile regroupee. */
+const openKey = computed(() => (openTile.value ? tool.value : null));
+
+// Le panneau ouvert devient sans objet (on change d'ecran) : son groupe passe
+// au premier panneau qui sert, sinon il se ferme.
+watch(
+  () => baseTiles.value.find((tile) => tile.key === tool.value)?.disabled,
+  (disabled) => {
+    if (!disabled) return;
+    tool.value = openGroup.value?.members.find((m) => !m.disabled)?.key ?? null;
+  },
+);
+
+/** Une deuxieme pression sur la tuile ouverte referme le panneau. */
+function selectTool(key: string) {
+  if (openTile.value?.key === key) {
+    tool.value = null;
+    return;
+  }
+  const group = groups.value.find((g) => g.key === key);
+  // Un groupe s'ouvre sur son premier panneau qui sert sur l'ecran.
+  tool.value = (group?.members.find((m) => !m.disabled) ?? group?.members[0])?.key ?? key;
+}
+
+const panelTabs = computed(() => {
+  if (props.hideTabs) return [];
+  const members = openGroup.value?.members ?? [];
+  return members.length > 1
+    ? members.map((m) => ({
+        key: m.key,
+        label: m.label,
+        active: m.key === tool.value,
+        count: m.count,
+        disabled: m.disabled,
+      }))
+    : [];
+});
+
+/** Largeur du panneau ouvert : celle de la tuile, sinon la largeur commune. */
+const panelWidth = computed(() => openTile.value?.width ?? config.panelWidth);
+
+/**
+ * La simulation du daltonisme ne sort qu'en local et en preproduction : elle
+ * degrade l'affichage pour nous montrer ce que la page donne pour quelqu'un
+ * d'autre, ce qui n'a pas sa place devant un client.
+ */
+const cvdSimulation = computed(
+  () =>
+    import.meta.client &&
+    (window.location.host.includes("localhost") || window.location.host.includes("staging")),
+);
+
+const themeLabels = computed<[string, string]>(() =>
+  en.value ? ["Light", "Dark"] : ["Jour", "Nuit"],
+);
+
+/**
+ * Largeur de la colonne de contenu, publiee en variable CSS : la barre de
+ * filtres traverse tout le cadre par marges negatives et doit la connaitre.
+ */
+let mainSize: ResizeObserver | null = null;
+
+function publishMainWidth() {
+  const main = document.querySelector(".rm-shell__main") as HTMLElement | null;
+  if (!main) return;
+  document.documentElement.style.setProperty("--oip-main-w", `${main.clientWidth}px`);
+}
+
+onMounted(() => {
+  const main = document.querySelector(".rm-shell__main");
+  if (!main) return;
+  mainSize = new ResizeObserver(() => publishMainWidth());
+  mainSize.observe(main);
+  publishMainWidth();
+});
+
+onBeforeUnmount(() => {
+  mainSize?.disconnect();
+  mainSize = null;
+});
+
+/**
+ * Chatwoot passe derriere le panneau du rail. Le SDK accroche ses noeuds au
+ * `body` avec un z-index maximal ; le cadre, en `position: fixed`, forme son
+ * propre contexte d'empilement. La seule sortie est de ramener ces noeuds dans
+ * un plan du cadre. On ne prend que ce qui pend au `body` : deux coquilles
+ * coexistent le temps d'une navigation et se disputeraient les noeuds.
+ */
+const CHATWOOT_NODES = ".woot--bubble-holder, .woot-widget-holder";
+const chatwootLayer = ref<HTMLElement | null>(null);
+let chatwootWatch: MutationObserver | null = null;
+
+function adoptChatwoot() {
+  const layer = chatwootLayer.value;
+  if (!layer) return;
+  document.querySelectorAll<HTMLElement>(CHATWOOT_NODES).forEach((node) => {
+    if (node.parentElement === document.body) layer.appendChild(node);
+  });
+}
+
+onMounted(() => {
+  adoptChatwoot();
+  chatwootWatch = new MutationObserver(() => adoptChatwoot());
+  chatwootWatch.observe(document.body, { childList: true });
+});
+
+// Les noeuds repartent sur le `body` avec la coquille, sinon le widget
+// disparaitrait avec elle.
+onBeforeUnmount(() => {
+  chatwootWatch?.disconnect();
+  chatwootWatch = null;
+  chatwootLayer.value
+    ?.querySelectorAll<HTMLElement>(CHATWOOT_NODES)
+    .forEach((node) => document.body.appendChild(node));
+});
+
+/** Le violet de marque suit `--color-primary`, qui s'eclaircit en mode nuit. */
+const tekkareLogo = tekkareLogoRaw.replaceAll('fill="#2100AD"', 'fill="currentColor"');
+</script>
+
+<template>
+  <RmAppShell>
+    <!-- Sans navigation, la barre gauche ne sort pas. -->
+    <template #nav="{ collapsed, open, toggle }">
+      <RmSidebarLeft
+        v-if="sections.length"
+        :title="title"
+        :flag="flag"
+        :title-to="appTo"
+        :sections="navSections"
+        :active-path="currentPath"
+        :collapsed="collapsed"
+        :open="open"
+        @toggle="toggle"
+      >
+        <template #nav-footer>
+          <slot name="nav-footer" />
+        </template>
+        <template #footer>
+          <div v-if="!collapsed" class="oip-powered-by">
+            <span class="oip-powered-by__caption">Powered by</span>
+            <a
+              class="oip-powered-by__logo"
+              href="https://tekkare.com/"
+              target="_blank"
+              rel="noopener"
+              :aria-label="en ? 'Tekkare (opens in a new tab)' : 'Tekkare (ouvre dans un nouvel onglet)'"
+              v-html="tekkareLogo"
+            />
+          </div>
+        </template>
+      </RmSidebarLeft>
+    </template>
+
+    <template #header>
+      <RmAppHeader :crumbs="crumbs">
+        <template #actions>
+          <slot name="header-actions" />
+        </template>
+      </RmAppHeader>
+      <!-- Sous l'en-tete, hors de la zone qui defile (bandeau de projet...). -->
+      <slot name="header-after" />
+    </template>
+
+    <slot />
+
+    <template #rail>
+      <RmRailPanel
+        :open="!!openTile"
+        :title="openTile?.label"
+        :width="panelWidth"
+        :tabs="panelTabs"
+        :tabs-label="openTile?.label"
+        :close-label="en ? 'Close the panel' : 'Fermer le panneau'"
+        @tab="tool = $event"
+        @close="tool = null"
+      >
+        <!-- Un panneau se resout du plus libre au plus encadre : le slot
+             `panel-<Tuile>` de l'app s'il existe, sinon le panneau du layer
+             (avec ses `panelProps`), sinon le slot `tool` pour les panneaux
+             que le layer ne porte pas encore. `panel-<Tuile>-after` ajoute
+             du contenu sous le panneau. -->
+        <slot v-if="openKey && $slots[`panel-${openKey}`]" :name="`panel-${openKey}`" />
+        <RmA11yPanel
+          v-else-if="openKey === A11Y_TILE_KEY"
+          :lang="en ? 'en' : 'fr'"
+          :cvd-simulation="cvdSimulation"
+        />
+        <component
+          :is="LAYER_PANELS[openKey as OipRailTileKey]"
+          v-else-if="openKey && LAYER_PANELS[openKey as OipRailTileKey]"
+          :app-key="appKey"
+          :super-admin="superAdmin"
+          v-bind="panelProps[openKey as OipRailTileKey] ?? {}"
+        />
+        <slot v-else name="tool" :active="openKey" />
+        <!-- Complement de l'app sous le panneau ouvert, sans le remplacer. -->
+        <slot v-if="openKey" :name="`panel-${openKey}-after`" />
+      </RmRailPanel>
+
+      <RmSidebarRight
+        :user="{ initials, name: userName }"
+        :profile-to="localePath('/profile')"
+        :profile-label="en ? 'Profile' : 'Profil'"
+        :tiles="railTiles"
+        :active="openTile?.key ?? null"
+        :offset="openTile ? panelWidth : '0px'"
+        :expanded="!!openTile"
+        :theme-labels="themeLabels"
+        :locales="config.locales"
+        :locale="locale"
+        @select="selectTool"
+        @update:locale="switchLocale"
+      >
+        <!-- Actions de page : chaque page y teleporte ses boutons, qui y
+             prennent la forme d'une tuile du rail. Les conteneurs se replient
+             quand la page n'a rien a y mettre (:empty). -->
+        <div id="oip-rail-export" class="oip-rail-action" data-label="Export" />
+        <div id="oip-rail-pdf" class="oip-rail-action" data-label="PDF" />
+        <div id="oip-rail-scope" class="oip-rail-action" :data-label="en ? 'My views' : 'Mes vues'" />
+      </RmSidebarRight>
+    </template>
+
+    <template #overlay>
+      <div ref="chatwootLayer" class="oip-chatwoot-layer" />
+    </template>
+  </RmAppShell>
+</template>
+
+<style scoped>
+.oip-powered-by {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 16px 20px;
+  border-top: 1px solid var(--rm-shell-border);
+}
+
+.oip-powered-by__caption {
+  font-size: 13px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--rm-shell-text-muted);
+}
+
+.oip-powered-by__logo {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  color: var(--color-primary);
+  border-radius: 4px;
+  transition: opacity 150ms ease-out;
+}
+
+.oip-powered-by__logo:hover {
+  opacity: 0.8;
+}
+
+.oip-powered-by__logo:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 4px;
+}
+
+.oip-powered-by__logo :deep(svg) {
+  width: 100%;
+  max-width: 190px;
+  height: auto;
+}
+</style>
+
+<!-- Global : les noeuds de Chatwoot et les boutons teleportes par les pages
+     ne portent pas l'attribut de portee de ce composant. -->
+<style>
+.oip-chatwoot-layer .woot--bubble-holder,
+.oip-chatwoot-layer .woot-widget-bubble {
+  /* Rail (56px) + bord du cadre (9px) + une marge : la bulle passe a gauche
+     du rail au lieu de couvrir la bascule de langue, en bas. */
+  right: 105px !important;
+}
+
+/* Plan qui accueille les noeuds de Chatwoot dans le cadre (cf.
+   OipShell.vue). Le SDK les pose sur le `body` avec un z-index maximal :
+   la fenetre ouverte recouvrait le panneau du rail et cachait son contenu.
+   Le plan est un contexte d'empilement a lui seul, ce qui enferme ce z-index
+   maximal : ses 350 le placent au-dessus du contenu de page et sous le voile
+   (400), le panneau (401) et le rail (402).
+
+   Il couvre la fenetre entiere sans rien intercepter : seuls les noeuds de
+   Chatwoot, qui se positionnent eux-memes, reprennent les clics. */
+.oip-chatwoot-layer {
+  position: fixed;
+  inset: 0;
+  z-index: 350;
+  pointer-events: none;
+}
+
+.oip-chatwoot-layer > * {
+  pointer-events: auto;
+}
+
+/* Actions de page dans le rail droit.
+   ------------------------------------------------------------------
+   Chaque page teleporte son bouton d'export et son selecteur de scope vers
+   les conteneurs poses par OipShell.vue. Ce sont les composants Auriga eux-memes, pas des copies :
+   leur logique, leur etat de chargement et leur menu restent ceux de la page.
+   Seule leur forme change — ils se replient sur l'anatomie d'une tuile du
+   rail, pastille de 32px et libelle de 10px, pour ne pas faire tache a cote
+   de Sources ou Support. Le libelle vient du conteneur (data-label) : les
+   trente composants d'export en amont ne portent pas le meme intitule, et le
+   rail n'a pas la place de les afficher. */
+.oip-rail-action {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 12px 0 8px;
+  width: 100%;
+}
+
+/* Une page sans export — ou dont le bouton est masque par v-show tant qu'il
+   n'y a pas de selection — ne laisse pas un libelle orphelin dans le rail. */
+.oip-rail-action:empty,
+.oip-rail-action:not(:has(> :not([style*="display: none"]))) {
+  display: none;
+}
+
+.oip-rail-action::after {
+  content: attr(data-label);
+  font-size: 10px;
+  line-height: 1;
+  color: var(--rm-shell-text-muted);
+  white-space: nowrap;
+}
+
+/* Le halo colore d'Auriga est porte par l'enveloppe du bouton, pas par le
+   bouton : sans cette regle il subsiste un liseré vert autour de l'export. */
+.oip-rail-action [class*="_shadow"] {
+  box-shadow: none !important;
+  filter: none !important;
+}
+</style>