diff --git a/components/Breadcrumbs/BreadcrumbItem.vue b/components/Breadcrumbs/BreadcrumbItem.vue
index 5ff96cbef..2e054e7e6 100644
--- a/components/Breadcrumbs/BreadcrumbItem.vue
+++ b/components/Breadcrumbs/BreadcrumbItem.vue
@@ -14,6 +14,7 @@
       v-else
       class="fr-breadcrumb__link"
       :to
+      aria-current-value="false"
     >
       <slot />
     </CdataLink>
diff --git a/components/Explore/ExploreResourceView.vue b/components/Explore/ExploreResourceView.vue
new file mode 100644
index 000000000..95c8c4ece
--- /dev/null
+++ b/components/Explore/ExploreResourceView.vue
@@ -0,0 +1,217 @@
+<template>
+  <div class="mb-16">
+    <div class="container">
+      <Breadcrumb>
+        <BreadcrumbItem to="/">
+          {{ $t('Accueil') }}
+        </BreadcrumbItem>
+        <BreadcrumbItem :to="backLink">
+          {{ $t('Explorer') }}
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          {{ resource.title || $t('Fichier sans nom') }}
+        </BreadcrumbItem>
+      </Breadcrumb>
+
+      <header class="flex flex-wrap md:flex-nowrap gap-4 items-start justify-between mb-4">
+        <div class="min-w-0">
+          <ResourceSelector
+            :resources="datasetResources"
+            :selected-id="resource.id"
+            searchable
+            :is-disabled="(r) => !hasTabularData(r)"
+            :disabled-title="$t('Cette ressource n\'est pas explorable')"
+            @select="onResourceSelect"
+          >
+            <template #trigger="{ open }">
+              <PopoverButton
+                class="inline-flex items-center gap-1 -mx-1 px-1 py-1 rounded text-left hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-new-primary"
+              >
+                <ResourceIcon
+                  :resource="resource"
+                  class="size-4 mr-1 shrink-0"
+                />
+                <span class="text-lg font-bold line-clamp-2">
+                  {{ resource.title || $t('Fichier sans nom') }}
+                </span>
+                <RiArrowDownSLine
+                  class="size-4 shrink-0 text-gray-medium"
+                  :class="{ 'rotate-180': open }"
+                  aria-hidden="true"
+                />
+              </PopoverButton>
+            </template>
+          </ResourceSelector>
+          <div class="text-sm text-gray-medium flex items-center gap-1 mt-1">
+            <ObjectCardOwner
+              :organization="dataset.organization"
+              :owner="dataset.owner"
+            />
+            <template v-if="resource.format">
+              <span>·</span>
+              <span>{{ resource.format.toLowerCase() }}</span>
+            </template>
+          </div>
+        </div>
+        <BrandedButton
+          :href="resource.latest"
+          :icon="RiDownloadLine"
+          rel="ugc nofollow noopener"
+          download
+          external
+          class="shrink-0"
+        >
+          {{ $t('Télécharger') }}
+        </BrandedButton>
+      </header>
+
+      <TabGroup
+        :default-index="defaultTabIndex"
+        @change="onTabChange"
+      >
+        <TabList class="max-w-full overflow-x-auto">
+          <Tab
+            v-for="tab in displayedTabs"
+            :key="tab.key"
+          >
+            {{ tab.label }}
+          </Tab>
+        </TabList>
+      </TabGroup>
+    </div>
+
+    <!-- Data tab is lazy-mounted (only when first visited) to avoid
+         TabularExplorer's top-level `await useFetch` blocking the page
+         when landing directly on a different tab. Once mounted, we keep
+         it via `v-show` so quick tab switches don't unmount mid-fetch
+         (which would leave Suspense hanging on a stale promise). -->
+    <div
+      v-show="activeTabKey === 'data'"
+      class="mt-4 px-4"
+    >
+      <TabularExplorer
+        v-if="hasVisitedDataTab"
+        :key="resource.id"
+        :resource-id="resource.id"
+      />
+    </div>
+    <div
+      v-show="activeTabKey !== 'data'"
+      class="container mt-4"
+    >
+      <DataStructure
+        v-if="activeTabKey === 'data-structure'"
+        :resource="resource"
+      />
+      <MarkdownViewer
+        v-else-if="activeTabKey === 'description'"
+        :content="resource.description ?? ''"
+        size="sm"
+      />
+      <Metadata
+        v-else-if="activeTabKey === 'metadata'"
+        :resource="resource"
+      />
+      <Downloads
+        v-else-if="activeTabKey === 'downloads'"
+        :resource="resource"
+        :dataset="dataset"
+      />
+      <OpenApiViewer
+        v-else-if="activeTabKey === 'swagger'"
+        :url="`${tabularApiUrl}/api/resources/${resource.id}/swagger/`"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PopoverButton } from '@headlessui/vue'
+import { RiArrowDownSLine, RiDownloadLine } from '@remixicon/vue'
+import {
+  BrandedButton,
+  DataStructure,
+  Downloads,
+  MarkdownViewer,
+  Metadata,
+  ObjectCardOwner,
+  OpenApiViewer,
+  ResourceIcon,
+  ResourceSelector,
+  Tab,
+  TabGroup,
+  TabList,
+  TabularExplorer,
+  provideTabularProfile,
+  useHasTabularData,
+  useResourceCapabilities,
+} from '@datagouv/components-next'
+import type { Dataset, Resource } from '@datagouv/components-next'
+import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
+
+const props = defineProps<{
+  resource: Resource
+  dataset: Dataset
+}>()
+
+const route = useRoute()
+const router = useRouter()
+const config = useRuntimeConfig()
+
+const tabularApiUrl = config.public.tabularApiUrl
+
+const backLink = computed(() => {
+  const params = new URLSearchParams()
+  if (typeof route.query.q === 'string' && route.query.q) params.set('q', route.query.q)
+  const qs = params.toString()
+  return qs ? `/explore?${qs}` : '/explore'
+})
+
+const hasTabularData = useHasTabularData()
+const datasetResources = computed<Resource[]>(() => props.dataset.resources ?? [])
+
+function onResourceSelect(resource: Resource) {
+  router.push({ query: { ...route.query, resource_id: resource.id, tab: undefined } })
+}
+
+// Share the tabular profile fetch between the TabularExplorer and DataStructure
+// tabs. Mounting this component only when a resource exists guarantees the id is
+// always valid, so we never fetch a null profile URL.
+await provideTabularProfile(() => props.resource.id)
+
+const { tabsOptions } = useResourceCapabilities(() => props.resource, () => props.dataset)
+
+// Map tab is out of scope per current product decision; everything else from useResourceCapabilities is shown.
+const displayedTabs = computed(() => tabsOptions.value.filter(tab => tab.key !== 'map'))
+
+const defaultTabIndex = computed(() => {
+  const tabKey = typeof route.query.tab === 'string' ? route.query.tab : null
+  if (!tabKey) return 0
+  const idx = displayedTabs.value.findIndex(tab => tab.key === tabKey)
+  return idx >= 0 ? idx : 0
+})
+
+const activeTabKey = computed(() => {
+  const tabKey = typeof route.query.tab === 'string' ? route.query.tab : null
+  if (tabKey && displayedTabs.value.some(tab => tab.key === tabKey)) return tabKey
+  return displayedTabs.value[0]?.key ?? 'data'
+})
+
+// Lazy-mount TabularExplorer: only mount it the first time the user lands on
+// (or switches to) the Data tab. Once mounted, we keep it via v-show even
+// when other tabs are active, so we don't pay the suspended-fetch cost on
+// quick tab switches.
+const hasVisitedDataTab = ref(false)
+watch(activeTabKey, (key) => {
+  if (key === 'data') hasVisitedDataTab.value = true
+}, { immediate: true })
+
+function onTabChange(index: number) {
+  const tab = displayedTabs.value[index]
+  if (!tab) return
+  const q = { ...route.query }
+  if (tab.key === 'data') delete q.tab
+  else q.tab = tab.key
+  router.replace({ query: q })
+}
+</script>
diff --git a/datagouv-components/src/components/DatasetCard.vue b/datagouv-components/src/components/DatasetCard.vue
index 2913102ba..7e539dd3e 100644
--- a/datagouv-components/src/components/DatasetCard.vue
+++ b/datagouv-components/src/components/DatasetCard.vue
@@ -106,10 +106,12 @@
         </p>
       </div>
     </div>
-    <ObjectCardShortDescription
-      v-if="showDescriptionShort"
-      :text="getDescriptionShort(props.dataset)"
-    />
+    <slot>
+      <ObjectCardShortDescription
+        v-if="showDescriptionShort"
+        :text="getDescriptionShort(props.dataset)"
+      />
+    </slot>
   </ObjectCard>
 </template>
 
diff --git a/datagouv-components/src/components/ResourceAccordion/DataStructure.vue b/datagouv-components/src/components/ResourceAccordion/DataStructure.vue
index 827c7de32..967a3a4c8 100644
--- a/datagouv-components/src/components/ResourceAccordion/DataStructure.vue
+++ b/datagouv-components/src/components/ResourceAccordion/DataStructure.vue
@@ -49,45 +49,23 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed } from 'vue'
 import type { Resource } from '../../types/resources'
-import { useGetProfile } from '../../functions/tabularApi'
 import { useTranslation } from '../../composables/useTranslation'
+import { injectTabularProfile } from '../../composables/useTabularProfile'
 import PreviewLoader from './PreviewLoader.vue'
 
 const props = defineProps<{ resource: Resource }>()
-const getProfile = useGetProfile()
 const { t } = useTranslation()
 
-type ColumnInfo = {
-  score: number
-  format: string
-  python_type: string
-}
+// Profile is shared with sibling components (e.g. TabularExplorer) via
+// `provideTabularProfile` in the parent. Falls back to a local fetch
+// when no parent provides it (standalone usage).
+const { data: profileData, status } = await injectTabularProfile(() => props.resource.id)
 
-const columns = ref<Array<string>>([])
-const columnsInfo = ref<Record<string, ColumnInfo>>({})
-const loading = ref(true)
-const hasError = ref(false)
-const hasColumnInfo = ref(false)
-
-onMounted(async () => {
-  try {
-    const response = await getProfile(props.resource.id) // Assurez-vous que cette fonction retourne bien les données attendues
-    if ('profile' in response && response.profile) {
-      columns.value = Object.keys(response.profile.columns)
-      columnsInfo.value = response.profile.columns
-      hasColumnInfo.value = true
-      loading.value = false
-    }
-    else {
-      hasError.value = true
-      loading.value = false
-    }
-  }
-  catch {
-    hasError.value = true
-    loading.value = false
-  }
-})
+const loading = computed(() => status.value === 'idle' || status.value === 'pending')
+const hasError = computed(() => status.value === 'error')
+const hasColumnInfo = computed(() => !!profileData.value?.profile?.columns)
+const columns = computed(() => profileData.value?.profile ? Object.keys(profileData.value.profile.columns) : [])
+const columnsInfo = computed(() => profileData.value?.profile?.columns ?? {})
 </script>
diff --git a/datagouv-components/src/components/ResourceAccordion/Downloads.vue b/datagouv-components/src/components/ResourceAccordion/Downloads.vue
new file mode 100644
index 000000000..0289155ef
--- /dev/null
+++ b/datagouv-components/src/components/ResourceAccordion/Downloads.vue
@@ -0,0 +1,160 @@
+<template>
+  <dl class="fr-pl-0">
+    <dt
+      v-if="resource.format === 'url'"
+      class="font-bold fr-text--sm fr-mb-0"
+    >
+      {{ t("URL d'origine") }}
+    </dt>
+    <dt
+      v-else
+      class="font-bold fr-text--sm fr-mb-0"
+    >
+      {{ t('Format original') }}
+    </dt>
+    <dd class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center">
+      <span
+        v-if="resource.format === 'url'"
+        class="inline-flex items-center max-w-full"
+      >
+        <a
+          :href="resource.latest"
+          class="fr-link no-icon-after truncate"
+          rel="ugc nofollow noopener"
+          target="_blank"
+          @click="trackEvent('Jeux de données', 'Télécharger un fichier', 'Bouton : télécharger un fichier')"
+        >
+          {{ resource.url }}
+        </a>
+        <span class="fr-ml-1v fr-icon-external-link-line fr-icon--sm shrink-0" />
+      </span>
+      <span v-else>
+        <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
+        <a
+          :href="resource.latest"
+          class="fr-link"
+          rel="ugc nofollow noopener"
+          @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${resource.format}`)"
+        >
+          <span>{{ t('Format {format}', { format: resource.format }) }}<span v-if="resourceFilesize"> - {{ filesize(resourceFilesize) }}</span></span>
+        </a>
+      </span>
+      <CopyButton
+        :label="t('Copier le lien')"
+        :copied-label="t('Lien copié !')"
+        :text="resource.latest"
+        class="relative"
+      />
+    </dd>
+    <template v-if="generatedFormats.length">
+      <dt class="font-bold fr-text--sm fr-mb-0">
+        {{ t('Formats générés automatiquement par {platform} (dernière mise à jour {date})', { platform: config.name, date: conversionsLastUpdate }) }}
+      </dt>
+      <dd
+        v-for="generatedFormat in generatedFormats"
+        :key="generatedFormat.format"
+        class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center"
+      >
+        <span>
+          <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
+          <a
+            :href="generatedFormat.url"
+            class="fr-link"
+            rel="ugc nofollow noopener"
+            @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${generatedFormat.format}`)"
+          >
+            <span>{{ t('Format {format}', { format: generatedFormat.format }) }}<span v-if="generatedFormat.size"> - {{ filesize(generatedFormat.size) }}</span></span>
+          </a>
+        </span>
+        <CopyButton
+          :label="t('Copier le lien')"
+          :copied-label="t('Lien copié !')"
+          :text="generatedFormat.url"
+          class="relative"
+        />
+      </dd>
+    </template>
+    <template v-if="wfsFormats.length">
+      <dt class="font-bold fr-text--sm fr-mb-0">
+        <div class="flex gap-1 items-center">
+          {{ t('Formats exportés depuis le service WFS') }}
+          <span v-if="defaultWfsProjection"> ({{ t('projection {crs}', { crs: defaultWfsProjection }) }})</span>
+          <Tooltip>
+            <RiInformationLine
+              class="flex-none size-4"
+              :aria-label="t(`Le lien de téléchargement interroge directement le flux WFS distant. Le nombre de features téléchargées peut être limité.`)"
+              aria-hidden="true"
+            />
+            <template #tooltip>
+              <p class="text-sm font-normal mb-0">
+                {{ t(`Le lien de téléchargement interroge directement le flux WFS distant.`) }}
+              </p>
+              <p class="text-sm font-normal mb-0">
+                {{ t(`Le nombre de features téléchargées peut être limité.`) }}
+              </p>
+            </template>
+          </Tooltip>
+        </div>
+      </dt>
+      <dd
+        v-for="wfsFormat in wfsFormats"
+        :key="wfsFormat.format"
+        class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center"
+      >
+        <span>
+          <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
+          <a
+            :href="wfsFormat.url"
+            class="fr-link"
+            rel="ugc nofollow noopener"
+            @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${wfsFormat.format}`)"
+          >
+            <span>{{ t('Format {format}', { format: wfsFormat.format }) }}</span>
+          </a>
+        </span>
+        <CopyButton
+          :label="t('Copier le lien')"
+          :copied-label="t('Lien copié !')"
+          :text="wfsFormat.url"
+          class="relative"
+        />
+      </dd>
+    </template>
+  </dl>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RiInformationLine } from '@remixicon/vue'
+import CopyButton from '../CopyButton.vue'
+import Tooltip from '../Tooltip.vue'
+import { filesize } from '../../functions/helpers'
+import { getResourceFilesize } from '../../functions/resources'
+import { trackEvent } from '../../functions/matomo'
+import { useComponentsConfig } from '../../config'
+import { useFormatDate } from '../../functions/dates'
+import { useTranslation } from '../../composables/useTranslation'
+import { useResourceCapabilities } from '../../composables/useResourceCapabilities'
+import type { Resource } from '../../types/resources'
+import type { Dataset, DatasetV2 } from '../../types/datasets'
+
+const props = defineProps<{
+  resource: Resource
+  dataset: Dataset | DatasetV2
+}>()
+
+const { t } = useTranslation()
+const config = useComponentsConfig()
+const { formatRelativeIfRecentDate } = useFormatDate()
+
+const { generatedFormats, wfsFormats, defaultWfsProjection } = useResourceCapabilities(
+  () => props.resource,
+  () => props.dataset,
+)
+
+const resourceFilesize = computed(() => getResourceFilesize(props.resource))
+
+const conversionsLastUpdate = computed(() =>
+  formatRelativeIfRecentDate(props.resource.extras['analysis:parsing:finished_at'] as string | undefined),
+)
+</script>
diff --git a/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue b/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue
index 42c00ea19..468fb32f4 100644
--- a/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue
+++ b/datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue
@@ -265,88 +265,10 @@
             <div
               v-if="tab.key === 'downloads'"
             >
-              <dl class="fr-pl-0">
-                <dt
-                  v-if="resource.format === 'url'"
-                  class="font-bold fr-text--sm fr-mb-0"
-                >
-                  {{ t("URL d'origine") }}
-                </dt>
-                <dt
-                  v-else
-                  class="font-bold fr-text--sm fr-mb-0"
-                >
-                  {{ t('Format original') }}
-                </dt>
-                <dd class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center">
-                  <span v-if="resource.format === 'url'">
-                    <a
-                      :href="resource.latest"
-                      class="fr-link no-icon-after"
-                      rel="ugc nofollow noopener"
-                      target="_blank"
-                      @click="trackEvent('Jeux de données', 'Télécharger un fichier', 'Bouton : télécharger un fichier')"
-                    >
-                      <component
-                        :is="config.textClamp"
-                        v-if="config && config.textClamp"
-                        :auto-resize="true"
-                        :max-lines="1"
-                        :text="resource.url"
-                      >
-                        <template #after>
-                          <span class="fr-ml-1v fr-icon-external-link-line fr-icon--sm" />
-                        </template>
-                      </component>
-                    </a>
-                  </span>
-                  <span v-else>
-                    <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
-                    <a
-                      :href="resource.latest"
-                      class="fr-link"
-                      rel="ugc nofollow noopener"
-                      @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${resource.format}`)"
-                    >
-                      <span>{{ t('Format {format}', { format: resource.format }) }}<span v-if="resourceFilesize"> - {{ filesize(resourceFilesize) }}</span></span>
-                    </a>
-                  </span>
-                  <CopyButton
-                    :label="t('Copier le lien')"
-                    :copied-label="t('Lien copié !')"
-                    :text="resource.latest"
-                    class="relative"
-                  />
-                </dd>
-                <template v-if="generatedFormats.length">
-                  <dt class="font-bold fr-text--sm fr-mb-0">
-                    {{ t('Formats générés automatiquement par {platform} (dernière mise à jour {date})', { platform: config.name, date: conversionsLastUpdate }) }}
-                  </dt>
-                  <dd
-                    v-for="generatedFormat in generatedFormats"
-                    :key="generatedFormat.format"
-                    class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center"
-                  >
-                    <span>
-                      <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
-                      <a
-                        :href="generatedFormat.url"
-                        class="fr-link"
-                        rel="ugc nofollow noopener"
-                        @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${generatedFormat.format}`)"
-                      >
-                        <span>{{ t('Format {format}', { format: generatedFormat.format }) }}<span v-if="generatedFormat.size"> - {{ filesize(generatedFormat.size) }}</span></span>
-                      </a>
-                    </span>
-                    <CopyButton
-                      :label="t('Copier le lien')"
-                      :copied-label="t('Lien copié !')"
-                      :text="generatedFormat.url"
-                      class="relative"
-                    />
-                  </dd>
-                </template>
-              </dl>
+              <Downloads
+                :resource="resource"
+                :dataset="dataset"
+              />
             </div>
             <div
               v-if="tab.key === 'swagger'"
@@ -396,11 +318,11 @@ import SchemaBadge from './SchemaBadge.vue'
 import ResourceIcon from './ResourceIcon.vue'
 import EditButton from './EditButton.vue'
 import DataStructure from './DataStructure.vue'
+import Downloads from './Downloads.vue'
 import Preview from './Preview.vue'
 import { isOrganizationCertified } from '../../functions/organizations'
 import OpenApiViewer from '../OpenApiViewer/OpenApiViewer.vue'
 
-const GENERATED_FORMATS = ['parquet', 'pmtiles', 'geojson']
 const URL_FORMATS = ['url', 'doi', 'www:link', ' www:link-1.0-http--link', 'www:link-1.0-http--partners', 'www:link-1.0-http--related', 'www:link-1.0-http--samples']
 
 const props = withDefaults(defineProps<{
@@ -460,24 +382,6 @@ const ogcService = computed(() => detectOgcService(props.resource))
 
 const ogcWms = computed(() => ogcService.value === 'wms')
 
-const generatedFormats = computed(() => {
-  const formats = GENERATED_FORMATS
-    .filter(format => `analysis:parsing:${format}_url` in props.resource.extras)
-    .map(format => ({
-      url: props.resource.extras[`analysis:parsing:${format}_url`] as string,
-      size: props.resource.extras[`analysis:parsing:${format}_size`] as number | undefined,
-      format: format,
-    }))
-  if ('analysis:parsing:parsing_table' in props.resource.extras) {
-    formats.push({
-      url: `${config.tabularApiUrl}/api/resources/${props.resource.id}/data/json/`,
-      size: undefined,
-      format: 'json',
-    })
-  }
-  return formats
-})
-
 const open = ref(props.expandedOnMount)
 const toggle = () => {
   open.value = !open.value
@@ -540,7 +444,6 @@ const communityResource = computed<CommunityResource | null>(() => {
 const owner = computed(() => communityResource.value ? getOwnerName(communityResource.value) : null)
 
 const lastUpdate = props.resource.last_modified
-const conversionsLastUpdate = computed(() => formatRelativeIfRecentDate(props.resource.extras['analysis:parsing:finished_at'] as string | undefined))
 const availabilityChecked = props.resource.extras && 'check:available' in props.resource.extras
 const resourceFilesize = computed(() => getResourceFilesize(props.resource))
 
diff --git a/datagouv-components/src/components/ResourceExplorer/ResourceExplorer.vue b/datagouv-components/src/components/ResourceExplorer/ResourceExplorer.vue
index b4cefabae..5e4417fd8 100644
--- a/datagouv-components/src/components/ResourceExplorer/ResourceExplorer.vue
+++ b/datagouv-components/src/components/ResourceExplorer/ResourceExplorer.vue
@@ -2,24 +2,13 @@
   <div v-if="allResources.length || hasAnyResources">
     <div class="flex gap-6">
       <div class="flex-1 min-w-0">
-        <div
-          v-if="dataset.resources.total > 1"
-          class="md:hidden flex justify-end mb-3"
-        >
-          <BrandedButton
-            size="xs"
-            color="secondary"
-            :icon="RiListUnordered"
-            @click="mobileSidebarOpen = true"
-          >
-            {{ t('Ressources ({count})', { count: dataset.resources.total }) }}
-          </BrandedButton>
-        </div>
         <ResourceExplorerViewer
           v-if="selectedResource && allResources.length"
           :key="selectedResource.id"
           :dataset
           :resource="selectedResource"
+          :resources="flatResources"
+          @select="selectResource"
         />
         <div
           v-else-if="search"
@@ -56,25 +45,6 @@
         />
       </div>
     </div>
-
-    <!-- Mobile sidebar panel -->
-    <dialog
-      ref="mobileSidebarDialog"
-      class="mobile-sidebar md:hidden fixed inset-0 m-0 ml-auto p-0 h-dvh max-h-dvh w-80 max-w-[85vw] bg-white shadow-lg overflow-y-auto overscroll-contain backdrop:bg-black/30"
-      @close="mobileSidebarOpen = false"
-      @click.self="closeMobileSidebar"
-    >
-      <ResourceExplorerSidebar
-        :resources="allResources"
-        :selected-resource-id="selectedResource?.id ?? null"
-        :collapsed="false"
-        :search
-        @select="selectResource"
-        @load-more="loadMore"
-        @update:collapsed="closeMobileSidebar"
-        @update:search="updateSearch($event)"
-      />
-    </dialog>
   </div>
   <div
     v-else
@@ -107,7 +77,6 @@ import type { DatasetV2 } from '../../types/datasets'
 import type { Resource, ResourceGroup, ResourceType } from '../../types/resources'
 import ResourceExplorerSidebar from './ResourceExplorerSidebar.vue'
 import ResourceExplorerViewer from './ResourceExplorerViewer.vue'
-import { RiListUnordered } from '@remixicon/vue'
 import BrandedButton from '../BrandedButton.vue'
 
 const props = withDefaults(defineProps<{
@@ -246,21 +215,6 @@ const flatResources = computed(() =>
 
 // Fetch resource by ID if specified in URL (for SSR)
 const initialResourceId = resourceIdQuery.value
-const mobileSidebarOpen = ref(false)
-const mobileSidebarDialog = ref<HTMLDialogElement | null>(null)
-
-watch(mobileSidebarOpen, (open) => {
-  if (open) {
-    mobileSidebarDialog.value?.showModal()
-  }
-  else {
-    mobileSidebarDialog.value?.close()
-  }
-})
-
-function closeMobileSidebar() {
-  mobileSidebarOpen.value = false
-}
 const { data: fetchedResource } = initialResourceId
   ? await useFetch<Resource>(`/api/1/datasets/${props.dataset.id}/resources/${initialResourceId}/`)
   : { data: ref(null) }
@@ -288,7 +242,6 @@ function updateSearch(newSearch: string) {
 
 const selectResource = (resource: Resource) => {
   selectedResource.value = resource
-  mobileSidebarOpen.value = false
   router.replace({
     query: { ...router.currentRoute.value.query, resource_id: resource.id },
   })
@@ -303,9 +256,3 @@ watch(flatResources, () => {
   }
 })
 </script>
-
-<style>
-html:has(dialog.mobile-sidebar[open]) {
-  overflow: hidden;
-}
-</style>
diff --git a/datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue b/datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue
index 6f6f5f341..cd29bbdf8 100644
--- a/datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue
+++ b/datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue
@@ -2,7 +2,7 @@
   <div class="border border-gray-default">
     <header class="p-4 flex flex-wrap md:flex-nowrap gap-4 items-center justify-between">
       <div>
-        <div class="flex items-center mb-1">
+        <div class="flex items-center gap-1 mb-1">
           <h3 class="m-0 flex items-baseline text-base font-bold leading-tight">
             <ResourceIcon
               :resource
@@ -10,6 +10,12 @@
             />
             <span class="line-clamp-2">{{ resource.title || t('Fichier sans nom') }}</span>
           </h3>
+          <ResourceSelector
+            v-if="resources && resources.length > 1"
+            :resources
+            :selected-id="resource.id"
+            @select="emit('select', $event)"
+          />
           <CopyButton
             :label="t('Copier le lien')"
             :copied-label="t('Lien copié !')"
@@ -139,9 +145,9 @@
                 v-else-if="hasOpenAPIPreview"
                 :url="resource.extras['apidocUrl'] as string"
               />
-              <Preview
+              <TabularExplorer
                 v-else-if="hasTabularData"
-                :resource="resource"
+                :resource-id="resource.id"
               />
               <PreviewUnavailable v-else>
                 <!-- "File too large to download" is the only analysis:error value from hydra for now -->
@@ -174,128 +180,10 @@
               <Metadata :resource />
             </div>
             <div v-if="tab.key === 'downloads'">
-              <dl class="fr-pl-0">
-                <dt
-                  v-if="resource.format === 'url'"
-                  class="font-bold fr-text--sm fr-mb-0"
-                >
-                  {{ t("URL d'origine") }}
-                </dt>
-                <dt
-                  v-else
-                  class="font-bold fr-text--sm fr-mb-0"
-                >
-                  {{ t('Format original') }}
-                </dt>
-                <dd class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center">
-                  <span
-                    v-if="resource.format === 'url'"
-                    class="inline-flex items-center max-w-full"
-                  >
-                    <a
-                      :href="resource.latest"
-                      class="fr-link no-icon-after truncate"
-                      rel="ugc nofollow noopener"
-                      target="_blank"
-                      @click="trackEvent('Jeux de données', 'Télécharger un fichier', 'Bouton : télécharger un fichier')"
-                    >
-                      {{ resource.url }}
-                    </a>
-                    <span class="fr-ml-1v fr-icon-external-link-line fr-icon--sm shrink-0" />
-                  </span>
-                  <span v-else>
-                    <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
-                    <a
-                      :href="resource.latest"
-                      class="fr-link"
-                      rel="ugc nofollow noopener"
-                      @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${resource.format}`)"
-                    >
-                      <span>{{ t('Format {format}', { format: resource.format }) }}<span v-if="resourceFilesize"> - {{ filesize(resourceFilesize) }}</span></span>
-                    </a>
-                  </span>
-                  <CopyButton
-                    :label="t('Copier le lien')"
-                    :copied-label="t('Lien copié !')"
-                    :text="resource.latest"
-                    class="relative"
-                  />
-                </dd>
-                <template v-if="generatedFormats.length">
-                  <dt class="font-bold fr-text--sm fr-mb-0">
-                    {{ t('Formats générés automatiquement par {platform} (dernière mise à jour {date})', { platform: config.name, date: conversionsLastUpdate }) }}
-                  </dt>
-                  <dd
-                    v-for="generatedFormat in generatedFormats"
-                    :key="generatedFormat.format"
-                    class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center"
-                  >
-                    <span>
-                      <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
-                      <a
-                        :href="generatedFormat.url"
-                        class="fr-link"
-                        rel="ugc nofollow noopener"
-                        @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${generatedFormat.format}`)"
-                      >
-                        <span>{{ t('Format {format}', { format: generatedFormat.format }) }}<span v-if="generatedFormat.size"> - {{ filesize(generatedFormat.size) }}</span></span>
-                      </a>
-                    </span>
-                    <CopyButton
-                      :label="t('Copier le lien')"
-                      :copied-label="t('Lien copié !')"
-                      :text="generatedFormat.url"
-                      class="relative"
-                    />
-                  </dd>
-                </template>
-                <template v-if="wfsFormats.length">
-                  <dt class="font-bold fr-text--sm fr-mb-0">
-                    <div class="flex gap-1 items-center">
-                      {{ t('Formats exportés depuis le service WFS') }}
-                      <span v-if="defaultWfsProjection"> ({{ t('projection {crs}', { crs: defaultWfsProjection }) }})</span>
-                      <Tooltip>
-                        <RiInformationLine
-                          class="flex-none size-4"
-                          :aria-label="t(`Le lien de téléchargement interroge directement le flux WFS distant. Le nombre de features téléchargées peut être limité.`)"
-                          aria-hidden="true"
-                        />
-                        <template #tooltip>
-                          <p class="text-sm font-normal mb-0">
-                            {{ t(`Le lien de téléchargement interroge directement le flux WFS distant.`) }}
-                          </p>
-                          <p class="text-sm font-normal mb-0">
-                            {{ t(`Le nombre de features téléchargées peut être limité.`) }}
-                          </p>
-                        </template>
-                      </Tooltip>
-                    </div>
-                  </dt>
-                  <dd
-                    v-for="wfsFormat in wfsFormats"
-                    :key="wfsFormat.format"
-                    class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center"
-                  >
-                    <span>
-                      <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
-                      <a
-                        :href="wfsFormat.url"
-                        class="fr-link"
-                        rel="ugc nofollow noopener"
-                        @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${wfsFormat.format}`)"
-                      >
-                        <span>{{ t('Format {format}', { format: wfsFormat.format }) }}</span>
-                      </a>
-                    </span>
-                    <CopyButton
-                      :label="t('Copier le lien')"
-                      :copied-label="t('Lien copié !')"
-                      :text="wfsFormat.url"
-                      class="relative"
-                    />
-                  </dd>
-                </template>
-              </dl>
+              <Downloads
+                :resource="resource"
+                :dataset="dataset"
+              />
             </div>
             <div v-if="tab.key === 'swagger'">
               <div class="fr-mb-4w">
@@ -318,7 +206,7 @@
 
 <script setup lang="ts">
 import { computed, defineAsyncComponent } from 'vue'
-import { RiDownloadLine, RiFileCopyLine, RiFileWarningLine, RiInformationLine, RiSubtractLine } from '@remixicon/vue'
+import { RiDownloadLine, RiFileCopyLine, RiFileWarningLine, RiSubtractLine } from '@remixicon/vue'
 import PreviewUnavailable from '../ResourceAccordion/PreviewUnavailable.vue'
 import { toast } from 'vue-sonner'
 import BrandedButton from '../BrandedButton.vue'
@@ -331,11 +219,12 @@ import TabList from '../Tabs/TabList.vue'
 import Tab from '../Tabs/Tab.vue'
 import TabPanels from '../Tabs/TabPanels.vue'
 import TabPanel from '../Tabs/TabPanel.vue'
-import Tooltip from '../Tooltip.vue'
-import Preview from '../ResourceAccordion/Preview.vue'
+import TabularExplorer from '../TabularExplorer/TabularExplorer.vue'
 import DataStructure from '../ResourceAccordion/DataStructure.vue'
+import Downloads from '../ResourceAccordion/Downloads.vue'
 import Metadata from '../ResourceAccordion/Metadata.vue'
 import SchemaBadge from '../ResourceAccordion/SchemaBadge.vue'
+import ResourceSelector from './ResourceSelector.vue'
 import { filesize, summarize } from '../../functions/helpers'
 import { getResourceFormatIcon, getResourceExternalUrl, getResourceFilesize } from '../../functions/resources'
 import { trackEvent } from '../../functions/matomo'
@@ -343,6 +232,7 @@ import { useComponentsConfig } from '../../config'
 import { useFormatDate } from '../../functions/dates'
 import { useTranslation } from '../../composables/useTranslation'
 import { useResourceCapabilities } from '../../composables/useResourceCapabilities'
+import { provideTabularProfile } from '../../composables/useTabularProfile'
 import type { Resource } from '../../types/resources'
 import type { Dataset, DatasetV2 } from '../../types/datasets'
 
@@ -368,6 +258,11 @@ const Pmtiles = defineAsyncComponent(() =>
 const props = defineProps<{
   dataset: Dataset | DatasetV2
   resource: Resource
+  resources?: Resource[]
+}>()
+
+const emit = defineEmits<{
+  select: [resource: Resource]
 }>()
 
 const { t } = useTranslation()
@@ -381,13 +276,13 @@ const {
   hasOpenAPIPreview,
   ogcService,
   ogcWms,
-  generatedFormats,
-  wfsFormats,
-  defaultWfsProjection,
   isResourceUrl,
   tabsOptions,
 } = useResourceCapabilities(() => props.resource, () => props.dataset)
 
+// Share the tabular profile fetch between TabularExplorer and DataStructure tabs.
+await provideTabularProfile(() => props.resource.id)
+
 const resourceFilesize = computed(() => getResourceFilesize(props.resource))
 const resourceExternalUrl = computed(() => getResourceExternalUrl(props.dataset, props.resource))
 
@@ -401,10 +296,6 @@ const downloadButtonTitle = computed(() => {
   return t('Télécharger le fichier en {format}', { format: format.value })
 })
 
-const conversionsLastUpdate = computed(() =>
-  formatRelativeIfRecentDate(props.resource.extras['analysis:parsing:finished_at'] as string | undefined),
-)
-
 const copyResourceUrl = async () => {
   try {
     await navigator.clipboard.writeText(props.resource.url)
diff --git a/datagouv-components/src/components/ResourceExplorer/ResourceSelector.vue b/datagouv-components/src/components/ResourceExplorer/ResourceSelector.vue
new file mode 100644
index 000000000..bba7c66f0
--- /dev/null
+++ b/datagouv-components/src/components/ResourceExplorer/ResourceSelector.vue
@@ -0,0 +1,113 @@
+<template>
+  <Popover
+    v-slot="{ open, close }"
+    class="relative inline-block"
+  >
+    <slot
+      name="trigger"
+      :open="open"
+    >
+      <PopoverButton
+        class="inline-flex items-center justify-center size-6 rounded text-gray-plain hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-new-primary"
+        :aria-label="t('Choisir une autre ressource')"
+      >
+        <RiArrowDownSLine
+          class="size-4"
+          :class="{ 'rotate-180': open }"
+          aria-hidden="true"
+        />
+      </PopoverButton>
+    </slot>
+    <PopoverPanel
+      :class="searchable
+        ? 'absolute left-0 top-full z-50 mt-2 w-96 max-w-[calc(100vw-2rem)] bg-white border border-gray-default rounded shadow-lg p-3 space-y-2'
+        : 'absolute left-0 top-full z-50 mt-1 w-80 max-h-96 overflow-auto bg-white border border-gray-default rounded shadow-lg p-1'"
+    >
+      <input
+        v-if="searchable"
+        v-model="searchQuery"
+        type="search"
+        class="w-full border border-gray-default rounded px-2.5 py-1.5 text-sm"
+        :placeholder="t('Rechercher dans les ressources…')"
+      >
+      <ul
+        v-if="filteredResources.length > 0"
+        class="list-none p-0 m-0 space-y-0.5 max-h-80 overflow-y-auto"
+      >
+        <li
+          v-for="r in filteredResources"
+          :key="r.id"
+        >
+          <button
+            v-if="!isDisabled?.(r)"
+            type="button"
+            class="flex items-center gap-1.5 w-full text-left px-2 py-1.5 rounded text-sm hover:bg-gray-100 focus:outline-none focus-visible:bg-gray-100"
+            :class="{ 'font-bold bg-blue-50 text-new-primary': r.id === selectedId }"
+            @click="emit('select', r); close()"
+          >
+            <ResourceIcon
+              :resource="r"
+              class="size-3.5 shrink-0"
+            />
+            <span class="truncate">{{ r.title || t('Fichier sans nom') }}</span>
+            <span
+              v-if="r.format"
+              class="ml-auto text-xs text-gray-medium uppercase shrink-0"
+            >
+              {{ r.format }}
+            </span>
+          </button>
+          <div
+            v-else
+            class="flex items-center gap-1.5 px-2 py-1.5 rounded text-sm text-gray-medium cursor-not-allowed"
+            :title="disabledTitle"
+          >
+            <ResourceIcon
+              :resource="r"
+              class="size-3.5 shrink-0 opacity-50"
+            />
+            <span class="truncate opacity-70">{{ r.title || t('Fichier sans nom') }}</span>
+          </div>
+        </li>
+      </ul>
+      <p
+        v-else
+        class="text-sm text-gray-medium italic mb-0 px-2 py-2"
+      >
+        {{ t('Aucune ressource correspondante') }}
+      </p>
+    </PopoverPanel>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import { RiArrowDownSLine } from '@remixicon/vue'
+import { useTranslation } from '../../composables/useTranslation'
+import ResourceIcon from '../ResourceAccordion/ResourceIcon.vue'
+import type { Resource } from '../../types/resources'
+
+const props = defineProps<{
+  resources: Resource[]
+  selectedId: string
+  searchable?: boolean
+  isDisabled?: (resource: Resource) => boolean
+  disabledTitle?: string
+}>()
+
+const emit = defineEmits<{
+  select: [resource: Resource]
+}>()
+
+const { t } = useTranslation()
+
+const searchQuery = ref('')
+
+const filteredResources = computed(() => {
+  if (!props.searchable) return props.resources
+  const q = searchQuery.value.trim().toLowerCase()
+  if (!q) return props.resources
+  return props.resources.filter(r => (r.title ?? '').toLowerCase().includes(q))
+})
+</script>
diff --git a/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue b/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue
index 93261c585..105d31766 100644
--- a/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue
+++ b/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue
@@ -1,164 +1,218 @@
 <template>
   <div>
-    <SimpleBanner
-      v-if="error"
-      type="warning"
-      class="mb-4"
+    <div
+      v-if="previewError"
+      class="max-w-3xl mx-auto"
     >
-      {{ t("L'aperçu de ce fichier n'a pas pu être chargé.") }}
-      <pre class="text-xs mt-2">{{ error }}</pre>
-    </SimpleBanner>
-
-    <template v-else-if="tableData">
-      <!-- Toolbar -->
-      <div class="flex items-center py-3 gap-2">
-        <!-- Mobile: filter & sort button -->
-        <BrandedButton
-          class="md:hidden"
-          color="tertiary"
-          size="2xs"
-          :icon="RiFilter2Line"
-          keep-margins-even-without-borders
-          @click="mobileFilterOpen = true"
-        >
-          {{ t('Filtres & tri') }}
-        </BrandedButton>
-
-        <div class="flex-1" />
-
-        <!-- Right: Stats -->
-        <div class="flex items-center gap-4">
-          <!-- Columns (clickable, opens column popover) -->
-          <Popover
-            ref="columnAnchor"
-            v-slot="{ open }"
-            class="relative"
-          >
-            <PopoverButton class="flex items-center gap-1.5 text-xs text-gray-plain rounded px-2 py-1 hover:bg-gray-50 focus:outline-none">
-              <RiLayoutColumnLine
-                class="size-3"
-                aria-hidden="true"
-              />
-              <span class="font-bold hidden md:inline">{{ t('Colonnes') }}</span>
-              <span class="font-mono tabular-nums">{{ visibleColumns.size }}/{{ allColumns.length }}</span>
-              <RiArrowDownSLine
-                class="size-3 opacity-50"
-                aria-hidden="true"
-              />
-            </PopoverButton>
-
-            <ClientOnly>
-              <Teleport to="#tooltips">
-                <PopoverPanel
-                  v-show="open"
-                  ref="columnPanel"
-                  static
-                  class="bg-white border border-gray-default rounded shadow-lg w-72 absolute z-[800]"
-                  :style="columnFloatingStyles"
-                >
-                  <div class="flex items-center justify-between px-3 py-2 border-b border-gray-default">
-                    <span class="text-xs font-medium text-gray-title">
-                      {{ visibleColumns.size }} {{ t('sur') }} {{ allColumns.length }} {{ t('colonnes visibles') }}
-                    </span>
-                    <BrandedButton
-                      v-if="hiddenCount"
-                      color="tertiary"
-                      size="2xs"
-                      @click="showAllColumns"
-                    >
-                      {{ t('Tout afficher') }}
-                    </BrandedButton>
-                  </div>
-                  <div class="max-h-64 overflow-auto p-1">
-                    <label
-                      v-for="col in allColumns"
-                      :key="col"
-                      class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-50 cursor-pointer text-xs"
-                    >
-                      <input
-                        type="checkbox"
-                        :checked="visibleColumns.has(col)"
-                        class="size-3.5 accent-new-primary"
-                        @change="toggleColumn(col)"
-                      >
-                      <span class="truncate">{{ col }}</span>
-                    </label>
-                  </div>
-                </PopoverPanel>
-              </Teleport>
-            </ClientOnly>
-          </Popover>
-
-          <!-- Rows -->
-          <span class="flex items-center gap-1.5 text-xs text-gray-plain">
-            <RiLayoutRowLine
-              class="size-3 text-mention-grey"
-              aria-hidden="true"
-            />
-            <span class="font-bold hidden md:inline">{{ t('Lignes') }}</span>
-            <span class="font-mono tabular-nums">{{ tableData.meta.total.toLocaleString() }}/{{ totalLines.toLocaleString() }}</span>
-          </span>
+      <SimpleBanner
+        type="warning"
+        class="mb-4"
+      >
+        {{ t("L'aperçu de ce fichier n'a pas pu être chargé.") }}
+        <pre class="text-xs mt-2 whitespace-pre-wrap break-words">{{ previewError }}</pre>
+      </SimpleBanner>
+    </div>
+
+    <div
+      v-else-if="previewLoading"
+      class="animate-pulse-placeholder"
+      :aria-label="t('Chargement de l\'aperçu…')"
+      role="status"
+    >
+      <div class="container">
+        <div class="flex items-center justify-end gap-4 py-3">
+          <div class="h-4 w-20 bg-gray-200" />
+          <div class="h-4 w-20 bg-gray-200" />
         </div>
       </div>
+      <div class="overflow-hidden">
+        <table class="w-full text-sm border-collapse">
+          <thead class="shadow-[inset_0_-1px_0_0_#E5E5E5]">
+            <tr>
+              <th
+                v-for="i in 6"
+                :key="i"
+                class="px-3 py-2 text-left"
+              >
+                <div class="h-4 w-24 bg-gray-200" />
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="row in 8"
+              :key="row"
+              class="border-b border-gray-100"
+            >
+              <td
+                v-for="col in 6"
+                :key="col"
+                class="px-3 py-2.5"
+              >
+                <div class="h-3 bg-gray-200" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
 
-      <!-- Active filters -->
-      <div
-        v-if="activeFilters.length > 0"
-        class="bg-gray-some border border-gray-default rounded-xl px-3 py-2.5 mb-3 space-y-2.5"
-      >
-        <!-- Header -->
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-2">
-            <RiFilter2Line
-              class="size-3.5"
-              aria-hidden="true"
-            />
-            <span class="text-xs text-gray-plain">{{ t('Filtres actifs') }}</span>
-            <span class="inline-flex items-center justify-center rounded-full bg-new-primary/10 text-new-primary text-xs tabular-nums min-w-5 h-5 px-1.5">
-              {{ activeFilters.length }}
-            </span>
-          </div>
+    <template v-else-if="tableData && profileData">
+      <!-- Toolbar (constrained width — only the table itself goes edge-to-edge) -->
+      <div class="container">
+        <div class="flex items-center py-3 gap-2">
+          <!-- Mobile: filter & sort button -->
           <BrandedButton
+            class="md:hidden"
             color="tertiary"
             size="2xs"
-            :icon="RiCloseLine"
-            @click="clearAllFilters"
+            :icon="RiFilter2Line"
+            keep-margins-even-without-borders
+            @click="mobileFilterOpen = true"
           >
-            {{ t('Tout effacer') }}
+            {{ t('Filtres & tri') }}
           </BrandedButton>
+
+          <div class="flex-1" />
+
+          <!-- Right: Stats -->
+          <div class="flex items-center gap-4">
+            <!-- Columns (clickable, opens column popover) -->
+            <Popover
+              ref="columnAnchor"
+              v-slot="{ open }"
+              class="relative"
+            >
+              <PopoverButton class="flex items-center gap-1.5 text-xs text-gray-plain rounded px-2 py-1 hover:bg-gray-50 focus:outline-none">
+                <RiLayoutColumnLine
+                  class="size-3"
+                  aria-hidden="true"
+                />
+                <span class="font-bold hidden md:inline">{{ t('Colonnes') }}</span>
+                <span class="font-mono tabular-nums">{{ visibleColumns.size }}/{{ allColumns.length }}</span>
+                <RiArrowDownSLine
+                  class="size-3 opacity-50"
+                  aria-hidden="true"
+                />
+              </PopoverButton>
+
+              <ClientOnly>
+                <Teleport to="#tooltips">
+                  <PopoverPanel
+                    v-show="open"
+                    ref="columnPanel"
+                    static
+                    class="bg-white border border-gray-default rounded shadow-lg w-72 absolute z-[800]"
+                    :style="columnFloatingStyles"
+                  >
+                    <div class="flex items-center justify-between px-3 py-2 border-b border-gray-default">
+                      <span class="text-xs font-medium text-gray-title">
+                        {{ visibleColumns.size }} {{ t('sur') }} {{ allColumns.length }} {{ t('colonnes visibles') }}
+                      </span>
+                      <BrandedButton
+                        v-if="hiddenCount"
+                        color="tertiary"
+                        size="2xs"
+                        @click="showAllColumns"
+                      >
+                        {{ t('Tout afficher') }}
+                      </BrandedButton>
+                    </div>
+                    <div class="max-h-64 overflow-auto p-1">
+                      <label
+                        v-for="col in allColumns"
+                        :key="col"
+                        class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-50 cursor-pointer text-xs"
+                      >
+                        <input
+                          type="checkbox"
+                          :checked="visibleColumns.has(col)"
+                          class="size-3.5 accent-new-primary"
+                          @change="toggleColumn(col)"
+                        >
+                        <span class="truncate">{{ col }}</span>
+                      </label>
+                    </div>
+                  </PopoverPanel>
+                </Teleport>
+              </ClientOnly>
+            </Popover>
+
+            <!-- Rows -->
+            <span class="flex items-center gap-1.5 text-xs text-gray-plain">
+              <RiLayoutRowLine
+                class="size-3 text-mention-grey"
+                aria-hidden="true"
+              />
+              <span class="font-bold hidden md:inline">{{ t('Lignes') }}</span>
+              <span class="font-mono tabular-nums">{{ tableData.meta.total.toLocaleString() }}/{{ totalLines.toLocaleString() }}</span>
+            </span>
+          </div>
         </div>
-        <!-- Chips -->
-        <div class="flex flex-wrap gap-1.5">
-          <span
-            v-for="af in activeFilters"
-            :key="af.column"
-            class="inline-flex items-center gap-1.5 bg-white border border-gray-silver rounded-lg pl-2 pr-1 py-1 text-xs"
-          >
-            <component
-              :is="getTypeConfig(af.column).icon"
-              class="size-3 text-gray-title"
-              aria-hidden="true"
-            />
-            <span class="text-gray-title">{{ af.column }}</span>
-            <span class="text-gray-plain">{{ af.label }}</span>
-            <button
-              class="rounded p-0.5 text-gray-low hover:text-gray-plain hover:bg-gray-100"
-              @click="removeFilter(af.column)"
+
+        <!-- Active filters -->
+        <div
+          v-if="activeFilters.length > 0"
+          class="bg-gray-some border border-gray-default rounded-xl px-3 py-2.5 mb-3 space-y-2.5"
+        >
+          <!-- Header -->
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <RiFilter2Line
+                class="size-3.5"
+                aria-hidden="true"
+              />
+              <span class="text-xs text-gray-plain">{{ t('Filtres actifs') }}</span>
+              <span class="inline-flex items-center justify-center rounded-full bg-new-primary/10 text-new-primary text-xs tabular-nums min-w-5 h-5 px-1.5">
+                {{ activeFilters.length }}
+              </span>
+            </div>
+            <BrandedButton
+              color="tertiary"
+              size="2xs"
+              :icon="RiCloseLine"
+              @click="clearAllFilters"
+            >
+              {{ t('Tout effacer') }}
+            </BrandedButton>
+          </div>
+          <!-- Chips -->
+          <div class="flex flex-wrap gap-1.5">
+            <span
+              v-for="af in activeFilters"
+              :key="af.column"
+              class="inline-flex items-center gap-1.5 bg-white border border-gray-silver rounded-lg pl-2 pr-1 py-1 text-xs"
             >
-              <RiCloseLine
-                class="size-3"
+              <component
+                :is="getTypeConfig(af.column).icon"
+                class="size-3 text-gray-title"
                 aria-hidden="true"
               />
-              <span class="sr-only">{{ t('Supprimer ce filtre') }}</span>
-            </button>
-          </span>
+              <span class="text-gray-title">{{ af.column }}</span>
+              <span class="text-gray-plain">{{ af.label }}</span>
+              <button
+                class="rounded p-0.5 text-gray-low hover:text-gray-plain hover:bg-gray-100"
+                @click="removeFilter(af.column)"
+              >
+                <RiCloseLine
+                  class="size-3"
+                  aria-hidden="true"
+                />
+                <span class="sr-only">{{ t('Supprimer ce filtre') }}</span>
+              </button>
+            </span>
+          </div>
         </div>
       </div>
+      <!-- /container (toolbar + active filters) -->
 
       <!-- Desktop: scrollable table -->
+      <!-- `-mx-4` lets the table extend edge-to-edge of the parent's px-4 wrapper
+           (used in both ResourceExplorerViewer's TabPanel and pages/explore.vue),
+           while the toolbar and active-filter rows above keep that padding. -->
       <div
         ref="scrollContainer"
-        class="hidden md:block overflow-auto max-h-[70vh]"
+        class="hidden md:block overflow-auto max-h-[70vh] -mx-4"
       >
         <table class="text-sm border-collapse">
           <thead class="sticky top-0 bg-white z-10 shadow-[inset_0_-1px_0_0_#E5E5E5]">
@@ -457,7 +511,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onUnmounted, ref, watch, useTemplateRef } from 'vue'
+import { computed, nextTick, onUnmounted, ref, watch, useTemplateRef } from 'vue'
 import { ofetch } from 'ofetch'
 import { flip, shift, autoUpdate, useFloating } from '@floating-ui/vue'
 import { Dialog, DialogPanel, DialogTitle, Popover, PopoverButton, PopoverPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
@@ -474,6 +528,7 @@ import {
 import { useFetch } from '../../functions/api'
 import { useComponentsConfig } from '../../config'
 import { useTranslation } from '../../composables/useTranslation'
+import { injectTabularProfile } from '../../composables/useTabularProfile'
 import { buildTypeConfig, hasFilterForColumn as _hasFilterForColumn, isTruthy, isFalsy } from '../../functions/tabular'
 import ClientOnly from '../ClientOnly.vue'
 import SimpleBanner from '../SimpleBanner.vue'
@@ -484,7 +539,7 @@ import TabularCellPopover from './TabularCellPopover.vue'
 import type { CellInfo } from './TabularCellPopover.vue'
 import TabularFilterContent from './TabularFilterContent.vue'
 import TabularFilterPopover from './TabularFilterPopover.vue'
-import type { TabularDataResponse, TabularProfileResponse, TabularRow, ColumnType, SortConfig, ColumnFilters, BadgeStyle } from './types'
+import type { TabularDataResponse, TabularRow, ColumnType, SortConfig, ColumnFilters, BadgeStyle } from './types'
 
 const props = defineProps<{
   resourceId: string
@@ -509,10 +564,6 @@ const dataUrl = computed(() =>
   `${config.tabularApiUrl}/api/resources/${props.resourceId}/data/`,
 )
 
-const profileUrl = computed(() =>
-  `${config.tabularApiUrl}/api/resources/${props.resourceId}/profile/`,
-)
-
 // Sort & filter state
 const sort = ref<SortConfig | null>(null)
 const filters = ref<Record<string, ColumnFilters>>({})
@@ -552,7 +603,17 @@ const dataQuery = computed(() => {
 
 const { data: tableData, error } = await useFetch<TabularDataResponse>(dataUrl, { raw: true, query: dataQuery })
 
-const { data: profileData } = await useFetch<TabularProfileResponse>(profileUrl, { raw: true })
+// Profile is shared with sibling components (e.g. DataStructure) via
+// `provideTabularProfile` in the parent. Falls back to a local fetch
+// when no parent provides it (standalone usage).
+const { data: profileData, error: profileError, status: profileStatus } = await injectTabularProfile(() => props.resourceId)
+
+// The component renders nothing useful until the profile is available
+// (allColumns is derived from it). Surface a clear loading / error state
+// so we don't end up with an empty table + a spinner running forever.
+const profileLoading = computed(() => !profileData.value && (profileStatus.value === 'idle' || profileStatus.value === 'pending'))
+const previewError = computed(() => error.value || profileError.value)
+const previewLoading = computed(() => !previewError.value && (!tableData.value || profileLoading.value))
 
 // Infinite scroll state
 const allRows = ref<TabularRow[]>([])
@@ -625,23 +686,65 @@ function showAllColumns() {
   visibleColumns.value = new Set(allColumns.value)
 }
 
-// Column resize
+// Column widths
+//
+// Strategy:
+// - On first render (when both data and profile are loaded), we measure the
+//   natural offsetWidth of each <th>, then distribute any leftover container
+//   space proportionally so the table fills the available horizontal area.
+// - We immediately lock all columns to those widths via `columnWidths`, so
+//   pagination, filtering, sorting or infinite-scroll never trigger a layout
+//   shift (the table doesn't re-auto-size based on newly visible content).
+// - Manual resize via the drag handle keeps working unchanged: it always sees
+//   columnWidths populated, so it goes straight into the resize loop.
 const columnWidths = ref<Record<string, number>>({})
 const resizing = ref<{ column: string, startX: number, startWidth: number } | null>(null)
 
-function initColumnWidths() {
-  const ths = scrollContainerRef.value?.querySelectorAll('th')
-  if (!ths) return
-  const widths: Record<string, number> = {}
+function measureAndDistributeColumnWidths() {
+  const container = scrollContainerRef.value
+  if (!container) return
+  const ths = container.querySelectorAll('th')
+  if (!ths || ths.length === 0) return
+
+  const naturalWidths: Record<string, number> = {}
+  let naturalSum = 0
   ths.forEach((th, i) => {
     const col = displayedColumns.value[i]
-    if (col) widths[col] = th.offsetWidth
+    if (!col) return
+    const w = th.offsetWidth
+    naturalWidths[col] = w
+    naturalSum += w
   })
+  if (naturalSum === 0) return
+
+  // Inflate to fill container if columns don't naturally cover it.
+  const containerWidth = container.clientWidth
+  const ratio = naturalSum < containerWidth ? containerWidth / naturalSum : 1
+
+  const widths: Record<string, number> = {}
+  for (const [col, w] of Object.entries(naturalWidths)) {
+    widths[col] = Math.floor(w * ratio)
+  }
   columnWidths.value = widths
 }
 
+// Lock columns once both data and profile are ready (so the <thead> is rendered
+// with content-driven natural widths). Only runs once — subsequent data changes
+// (pagination, filters) keep the locked widths and avoid layout shifts.
+watch(
+  () => [tableData.value !== null, displayedColumns.value.length] as const,
+  async ([dataReady, colCount]) => {
+    if (!dataReady || colCount === 0) return
+    if (Object.keys(columnWidths.value).length > 0) return
+    await nextTick()
+    measureAndDistributeColumnWidths()
+  },
+  { immediate: true },
+)
+
 function startResize(col: string, e: MouseEvent) {
-  if (!Object.keys(columnWidths.value).length) initColumnWidths()
+  // Fallback in case the user grabs the handle before the initial measure ran.
+  if (!Object.keys(columnWidths.value).length) measureAndDistributeColumnWidths()
   resizing.value = { column: col, startX: e.clientX, startWidth: columnWidths.value[col] ?? 100 }
   // Disable smooth scroll during resize
   if (scrollContainerRef.value) scrollContainerRef.value.style.scrollBehavior = 'auto'
diff --git a/datagouv-components/src/composables/useHasTabularData.ts b/datagouv-components/src/composables/useHasTabularData.ts
index 73eaa832e..ddf3ce3b2 100644
--- a/datagouv-components/src/composables/useHasTabularData.ts
+++ b/datagouv-components/src/composables/useHasTabularData.ts
@@ -11,10 +11,17 @@ export const useHasTabularData = () => {
   const config = useComponentsConfig()
 
   return (resource: Resource) => {
+    // Reject resources whose source URL last check failed (>= 400):
+    // the tabular-api purges its parquet when the source dies, but
+    // `parsing_table` may still be set — leading to a 404 on fetch.
+    const checkStatus = resource.extras['check:status']
+    const sourceUnreachable = typeof checkStatus === 'number' && checkStatus >= 400
+
     return (
       config.tabularApiUrl
       && resource.extras['analysis:parsing:parsing_table']
       && !resource.extras['analysis:parsing:error']
+      && !sourceUnreachable
       && (config.tabularAllowRemote || resource.filetype === 'file')
     )
   }
diff --git a/datagouv-components/src/composables/useTabularProfile.ts b/datagouv-components/src/composables/useTabularProfile.ts
new file mode 100644
index 000000000..9ea2f9b55
--- /dev/null
+++ b/datagouv-components/src/composables/useTabularProfile.ts
@@ -0,0 +1,70 @@
+import { computed, inject, provide, toValue, type MaybeRefOrGetter, type Ref } from 'vue'
+import { useComponentsConfig } from '../config'
+import { useFetch } from '../functions/api'
+import type { AsyncDataRequestStatus } from '../functions/api.types'
+import type { TabularProfileResponse } from '../components/TabularExplorer/types'
+
+const TABULAR_PROFILE_KEY = Symbol('tabular-profile')
+
+export type TabularProfileState = {
+  resourceId: Readonly<Ref<string>>
+  data: Readonly<Ref<TabularProfileResponse | null>>
+  error: Readonly<Ref<unknown | null>>
+  status: Readonly<Ref<AsyncDataRequestStatus>>
+  refresh: () => Promise<void>
+}
+
+// What is shared through provide/inject: the resourceId (to let descendants
+// check they target the same resource) and the in-flight fetch promise. We
+// share the promise rather than the resolved state because `provide()` must
+// run synchronously during setup — see `provideTabularProfile`.
+type TabularProfileShared = {
+  resourceId: Readonly<Ref<string>>
+  state: Promise<TabularProfileState>
+}
+
+async function createProfileState(resourceId: MaybeRefOrGetter<string>): Promise<TabularProfileState> {
+  const config = useComponentsConfig()
+  const ridRef = computed(() => toValue(resourceId))
+
+  // Goes through the package's useFetch, which delegates to the host's
+  // customUseFetch (Nuxt useFetch in cdata) so the response is shared
+  // between SSR and CSR via the Nuxt payload — avoiding a double fetch.
+  const profileUrl = computed(() =>
+    ridRef.value ? `${config.tabularApiUrl}/api/resources/${ridRef.value}/profile/` : null,
+  )
+
+  const { data, error, status, refresh } = await useFetch<TabularProfileResponse>(profileUrl, { raw: true })
+
+  return { resourceId: ridRef, data, error, status, refresh }
+}
+
+/**
+ * Parent: fetch the tabular profile once and share it with descendants
+ * (TabularExplorer, DataStructure...) via provide/inject.
+ *
+ * Not async on purpose: `provide()` only works while the active component
+ * instance is set, which is lost after the first `await`. So we kick off the
+ * fetch, `provide()` the resulting promise synchronously, then return it for
+ * the caller to await.
+ */
+export function provideTabularProfile(resourceId: MaybeRefOrGetter<string>): Promise<TabularProfileState> {
+  const ridRef = computed(() => toValue(resourceId))
+  const state = createProfileState(resourceId)
+  provide<TabularProfileShared>(TABULAR_PROFILE_KEY, { resourceId: ridRef, state })
+  return state
+}
+
+/**
+ * Child: get the tabular profile from an ancestor that called
+ * `provideTabularProfile` for the same resourceId. Falls back to
+ * fetching on its own if no compatible ancestor is found — preserves
+ * standalone usage of TabularExplorer / DataStructure.
+ */
+export async function injectTabularProfile(resourceId: MaybeRefOrGetter<string>): Promise<TabularProfileState> {
+  const injected = inject<TabularProfileShared | null>(TABULAR_PROFILE_KEY, null)
+  if (injected && injected.resourceId.value === toValue(resourceId)) {
+    return await injected.state
+  }
+  return await createProfileState(resourceId)
+}
diff --git a/datagouv-components/src/main.ts b/datagouv-components/src/main.ts
index b7543eaf2..c5fad214a 100644
--- a/datagouv-components/src/main.ts
+++ b/datagouv-components/src/main.ts
@@ -40,6 +40,9 @@ import BrandedButton from './components/BrandedButton.vue'
 import CopyButton from './components/CopyButton.vue'
 import DataserviceCard from './components/DataserviceCard.vue'
 import DatasetCard from './components/DatasetCard.vue'
+import DataStructure from './components/ResourceAccordion/DataStructure.vue'
+import Downloads from './components/ResourceAccordion/Downloads.vue'
+import Metadata from './components/ResourceAccordion/Metadata.vue'
 import DescriptionListTerm from './components/DescriptionListTerm.vue'
 import DescriptionListDetails from './components/DescriptionListDetails.vue'
 import DiscussionMessageCard from './components/DiscussionMessageCard.vue'
@@ -60,6 +63,7 @@ import LoadingBlock from './components/LoadingBlock.vue'
 import MarkdownViewer from './components/MarkdownViewer.vue'
 import OrganizationCard from './components/OrganizationCard.vue'
 import OrganizationHorizontalCard from './components/OrganizationHorizontalCard.vue'
+import ObjectCardOwner from './components/ObjectCardOwner.vue'
 import OrganizationLogo from './components/OrganizationLogo.vue'
 import OrganizationNameWithCertificate from './components/OrganizationNameWithCertificate.vue'
 import OwnerType from './components/OwnerType.vue'
@@ -73,6 +77,7 @@ import PostCard from './components/PostCard.vue'
 import ReadMore from './components/ReadMore.vue'
 import ResourceAccordion from './components/ResourceAccordion/ResourceAccordion.vue'
 import ResourceIcon from './components/ResourceAccordion/ResourceIcon.vue'
+import ResourceSelector from './components/ResourceExplorer/ResourceSelector.vue'
 import ResourceExplorer from './components/ResourceExplorer/ResourceExplorer.vue'
 import ResourceExplorerSidebar from './components/ResourceExplorer/ResourceExplorerSidebar.vue'
 import ResourceExplorerViewer from './components/ResourceExplorer/ResourceExplorerViewer.vue'
@@ -113,6 +118,8 @@ export * from './composables/useMetrics'
 export * from './composables/useReuseType'
 export * from './composables/useTranslation'
 export * from './composables/useHasTabularData'
+export * from './composables/useResourceCapabilities'
+export * from './composables/useTabularProfile'
 
 export * from './functions/activities'
 export * from './functions/datasets'
@@ -299,6 +306,9 @@ export {
   CopyButton,
   DataserviceCard,
   DatasetCard,
+  DataStructure,
+  Downloads,
+  Metadata,
   DatasetInformationSection,
   DatasetTemporalitySection,
   DatasetSpatialSection,
@@ -338,7 +348,9 @@ export {
   ResourceExplorer,
   ResourceExplorerSidebar,
   ResourceExplorerViewer,
+  ObjectCardOwner,
   ResourceIcon,
+  ResourceSelector,
   ReuseCard,
   ReuseDetails,
   ReuseHorizontalCard,
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 0a2bce6dd..09251973a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -110,6 +110,12 @@ export default defineNuxtConfig({
       homepagePublishReuseOnboarding: '/reutilisateurs',
       homepageAboutUs: '/a-propos',
       homepageExplore: 'https://explore.data.gouv.fr',
+      // Featured resources shown on the /explore page. Override via env var:
+      // NUXT_PUBLIC_FEATURED_RESOURCE_IDS='["resource-id-1","resource-id-2"]'
+      featuredResourceIds: [
+        '1c5075ec-7ce1-49cb-ab89-94f507812daf', // Visas d'exploitations cinématographiques (CNC)
+        'df2cbcb3-da0a-4265-a24e-c36f2c787db2', // Indices de position sociale dans les lycées
+      ],
       homepageRightNow: {
         title: 'Données relatives aux Énergies',
         url: '/pages/donnees-energie',
diff --git a/pages/explore.vue b/pages/explore.vue
index 7bb0a9adc..2b136c0d4 100644
--- a/pages/explore.vue
+++ b/pages/explore.vue
@@ -1,127 +1,169 @@
 <template>
-  <div class="container py-8">
-    <h1 class="mb-6">
-      Explore
+  <div
+    v-if="!resourceId"
+    class="container mb-16"
+  >
+    <Breadcrumb>
+      <BreadcrumbItem to="/">
+        {{ $t('Accueil') }}
+      </BreadcrumbItem>
+      <BreadcrumbItem>
+        {{ $t('Explorer') }}
+      </BreadcrumbItem>
+    </Breadcrumb>
+
+    <h1 class="text-gray-title font-extrabold text-2xl mb-2">
+      {{ $t('Explorer les données tabulaires') }}
     </h1>
+    <TranslationT
+      keypath="À ce stade, seuls les fichiers tabulaires de moins de {size} sont disponibles."
+      tag="p"
+      class="text-gray-medium mb-6"
+    >
+      <template #size>
+        <strong>{{ $t('100 Mo') }}</strong>
+      </template>
+    </TranslationT>
 
-    <div
-      v-if="!resourceId"
-      class="space-y-6"
+    <form @submit.prevent="() => execute()">
+      <SearchInput
+        v-model="query"
+        :placeholder="$t('Rechercher un fichier (exemple : élections)…')"
+      />
+    </form>
+
+    <p
+      v-show="status === 'pending'"
+      class="mt-4 text-sm text-gray-medium"
     >
-      <div class="flex flex-wrap gap-2">
-        <button
-          class="fr-btn fr-btn--secondary fr-btn--sm"
-          @click="selectResource('eaa95292-072d-4353-a6b8-1be65be0ab0f')"
-        >
-          Petitions du Sénat
-        </button>
-      </div>
+      {{ $t('Chargement…') }}
+    </p>
 
-      <form
-        class="fr-search-bar fr-search-bar--lg w-full"
-        @submit.prevent="() => execute()"
+    <div
+      v-if="flatResults.length > 0"
+      class="mt-6 space-y-3"
+    >
+      <p class="text-sm text-gray-medium">
+        {{ $t('{n} résultat | {n} résultats', results!.total) }}
+      </p>
+      <DatasetCard
+        v-for="entry in flatResults"
+        :key="`${entry.dataset.id}-${entry.resource.id}`"
+        :dataset="entry.dataset"
+        :dataset-url="exploreLink(entry.resource.id)"
       >
-        <label
-          for="search-input"
-          class="sr-only"
-        >Rechercher un jeu de données</label>
-        <input
-          id="search-input"
-          v-model="query"
-          type="search"
-          class="input max-h-12 m-0 rounded-tl shadow-input-blue"
-          placeholder="Rechercher un jeu de données..."
-        >
-        <button
-          class="fr-btn"
-          type="submit"
+        <TranslationT
+          keypath="Fichier : {file}"
+          tag="p"
+          class="text-sm text-gray-700 mb-0"
         >
-          Rechercher
-        </button>
-      </form>
+          <template #file>
+            <strong>{{ entry.resource.title || $t('Sans titre') }}</strong>
+          </template>
+        </TranslationT>
+      </DatasetCard>
+    </div>
 
-      <p
-        v-show="status === 'pending'"
-        class="text-sm text-gray-500"
+    <div
+      v-else-if="results && status === 'success' && query"
+      class="mt-8 flex flex-col items-center text-center py-8"
+    >
+      <img
+        src="/illustrations/magnifying_glass.svg"
+        class="h-20 mb-4"
+        alt=""
       >
-        Chargement...
+      <p class="font-bold mb-2">
+        {{ $t('Pas de résultats pour « {q} »', { q: query }) }}
       </p>
-
-      <div
-        v-if="displayedDatasets.length > 0"
-        class="space-y-4"
-      >
-        <p class="text-sm text-gray-500">
-          {{ results!.total }} résultat{{ results!.total > 1 ? 's' : '' }}
-        </p>
-        <div
-          v-for="dataset in displayedDatasets"
-          :key="dataset.id"
-          class="border rounded p-4 space-y-2"
-        >
-          <p class="font-bold">
-            {{ dataset.title }}
-          </p>
-          <p
-            v-if="dataset.organization"
-            class="text-sm text-gray-500"
-          >
-            {{ dataset.organization.name }}
-          </p>
-          <div class="space-y-1">
-            <button
-              v-for="resource in explorableResources(dataset)"
-              :key="resource.id"
-              class="flex items-center gap-2 text-sm px-3 py-2 rounded hover:bg-blue-50 w-full text-left transition-colors"
-              @click="selectResource(resource.id)"
-            >
-              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 uppercase">
-                {{ resource.format }}
-              </span>
-              <span>{{ resource.title }}</span>
-              <span
-                v-if="resource.filesize"
-                class="text-gray-400 text-xs ml-auto"
-              >
-                {{ filesize(resource.filesize) }}
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <p
-        v-else-if="results && status === 'success'"
-        class="text-sm text-gray-500 italic"
-      >
-        Aucun résultat
+      <p class="text-sm text-gray-medium mb-4">
+        {{ $t('Essayez avec d\'autres mots-clés ou parcourez la sélection ci-dessous.') }}
       </p>
+      <BrandedButton
+        color="secondary"
+        @click="query = ''"
+      >
+        {{ $t('Réinitialiser la recherche') }}
+      </BrandedButton>
     </div>
 
-    <div v-else>
-      <button
-        class="fr-btn fr-btn--tertiary-no-outline fr-btn--sm mb-4"
-        @click="resourceId = ''"
+    <div
+      v-if="featuredEntries && featuredEntries.length > 0"
+      class="mt-12 space-y-3"
+    >
+      <h2 class="text-gray-title font-extrabold text-xl mb-2">
+        {{ $t('Quelques exemples') }}
+      </h2>
+      <p class="text-gray-medium">
+        {{ $t('Si vous ne savez pas par quoi commencer à explorer, nous vous proposons ci-dessous une sélection de quelques jeux de données.') }}
+      </p>
+      <DatasetCard
+        v-for="entry in featuredEntries"
+        :key="`${entry.dataset.id}-${entry.resource.id}`"
+        :dataset="entry.dataset"
+        :dataset-url="exploreLink(entry.resource.id)"
       >
-        &larr; Retour à la recherche
-      </button>
-      <TabularExplorer
-        :key="resourceId"
-        :resource-id="resourceId"
-      />
+        <TranslationT
+          keypath="Fichier : {file}"
+          tag="p"
+          class="text-sm text-gray-700 mb-0"
+        >
+          <template #file>
+            <strong>{{ entry.resource.title || $t('Sans titre') }}</strong>
+          </template>
+        </TranslationT>
+      </DatasetCard>
     </div>
   </div>
+
+  <ExploreResourceView
+    v-else-if="currentResource && currentDataset"
+    :resource="currentResource"
+    :dataset="currentDataset"
+  />
 </template>
 
 <script setup lang="ts">
-import { TabularExplorer, filesize, useHasTabularData } from '@datagouv/components-next'
-import type { Dataset } from '@datagouv/components-next'
+import {
+  BrandedButton,
+  DatasetCard,
+  SearchInput,
+  TranslationT,
+  useHasTabularData,
+  useTranslation,
+} from '@datagouv/components-next'
+import type { Dataset, DatasetV2, Resource } from '@datagouv/components-next'
+import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
 import type { PaginatedArray } from '~/types/types'
 
-useSeoMeta({ robots: 'noindex' })
+const { t } = useTranslation()
 
-const query = ref('')
-const resourceId = ref('')
+useSeoMeta({
+  title: () => t('Explorer les données tabulaires'),
+  description: () => t('Explorer facilement les fichiers tabulaires (CSV, XLSX) référencés sur data.gouv.fr.'),
+  robots: 'noindex',
+})
+
+const route = useRoute()
+const router = useRouter()
+const { $api } = useNuxtApp()
+const config = useRuntimeConfig()
+
+const featuredResourceIds = config.public.featuredResourceIds
+
+const query = computed({
+  get: () => (typeof route.query.q === 'string' ? route.query.q : ''),
+  set: (v: string) => {
+    const q = { ...route.query }
+    if (v) q.q = v
+    else delete q.q
+    router.replace({ query: q })
+  },
+})
+
+const resourceId = computed(() =>
+  typeof route.query.resource_id === 'string' ? route.query.resource_id : '',
+)
 
 const searchParams = computed(() => ({ q: query.value, page_size: 10, format: 'csv' }))
 
@@ -129,7 +171,7 @@ const { data: results, status, execute } = await useAPI<PaginatedArray<Dataset>>
   '/api/1/datasets/',
   {
     query: searchParams,
-    immediate: false,
+    immediate: !!query.value,
     watch: false,
   },
 )
@@ -140,11 +182,64 @@ function explorableResources(dataset: Dataset) {
   return dataset.resources.filter(hasTabularData)
 }
 
-const displayedDatasets = computed(() =>
-  results.value?.data.filter(dataset => explorableResources(dataset).length > 0) ?? [],
+type ResourceInDataset = { dataset: Dataset | DatasetV2, resource: Resource }
+
+const flatResults = computed<ResourceInDataset[]>(() => {
+  const out: ResourceInDataset[] = []
+  for (const dataset of results.value?.data ?? []) {
+    for (const resource of explorableResources(dataset)) {
+      out.push({ dataset, resource })
+    }
+  }
+  return out
+})
+
+const { data: featuredEntries } = await useAsyncData(
+  'explore-featured',
+  async () => {
+    const entries = await Promise.all(
+      featuredResourceIds.map(async (id): Promise<ResourceInDataset | null> => {
+        try {
+          const r = await $api<{ resource: Resource, dataset_id: string }>(
+            `/api/2/datasets/resources/${id}/`,
+          )
+          const dataset = await $api<DatasetV2>(`/api/2/datasets/${r.dataset_id}/`)
+          return { dataset, resource: r.resource }
+        }
+        catch {
+          return null
+        }
+      }),
+    )
+    return entries.filter((e): e is ResourceInDataset => e !== null)
+  },
 )
 
-function selectResource(id: string) {
-  resourceId.value = id
+function exploreLink(id: string) {
+  return { query: { ...route.query, resource_id: id, tab: undefined } }
 }
+
+// Resource view: fetch the current resource + its parent dataset
+type ResourceWithDataset = { resource: Resource, dataset_id: string }
+
+const { data: resourceData } = await useAsyncData(
+  'explore-current-resource',
+  async () => {
+    if (!resourceId.value) return null
+    try {
+      const r = await $api<ResourceWithDataset>(
+        `/api/2/datasets/resources/${resourceId.value}/`,
+      )
+      const dataset = await $api<Dataset>(`/api/1/datasets/${r.dataset_id}/`)
+      return { resource: r.resource, dataset }
+    }
+    catch {
+      return null
+    }
+  },
+  { watch: [resourceId] },
+)
+
+const currentResource = computed(() => resourceData.value?.resource ?? null)
+const currentDataset = computed(() => resourceData.value?.dataset ?? null)
 </script>