Textes projet éditables suivant Grav + écriture atomique du store

- Champ Présentation prérempli avec le texte Grav, suivi modifié/synchro
  (textOverride undefined = suit Grav, sinon figé ; bouton Réinitialiser)
- Fix génération PDF : savePortfolio écrit en atomique (temp+rename) pour
  éviter la corruption de lecture par l'autosave concurrent du rendu print
- Toast d'échec de génération explicite (message serveur)
- Refonte architecture visuelle, fond unifié white/tint/full, dispositions
  couverture bandeau/colonne, instantané public complet, index 3 lignes

pages/index.vue

@@ -67,30 +67,51 @@ async function downloadPdf(p: PortfolioSummary) {
 
 async function copyPublicLink(id: string) {
   const url = `${window.location.origin}/view/${id}`
-  try {
-    await navigator.clipboard.writeText(url)
+  if (await copyToClipboard(url)) {
     toast.add({ title: 'Lien public copié', color: 'success' })
-  } catch {
+  } else {
     toast.add({ title: 'Copie impossible', description: url, color: 'error' })
   }
 }
+
+const sharing = ref<string | null>(null)
+
+/** Active le lien public (fige le contenu) puis copie l'URL. */
+async function enableShare(id: string) {
+  sharing.value = id
+  try {
+    await $fetch(`/api/portfolios/${id}/share`, { method: 'POST', body: {} })
+    await refresh()
+    await copyPublicLink(id)
+  } catch {
+    toast.add({ title: 'Échec de la génération du lien', color: 'error' })
+  } finally {
+    sharing.value = null
+  }
+}
 </script>
 
 <template>
-  <UContainer class="py-8">
-    <div class="mb-6 flex items-end justify-between gap-4">
-      <div>
-        <h1 class="text-2xl font-bold text-[var(--fl-ink)] dark:text-white">Portfolios</h1>
+  <div class="flex h-screen">
+    <!-- Colonne gauche : header logo (fond + bordure), colonne transparente -->
+    <aside class="w-60 shrink-0">
+      <BrandBar />
+    </aside>
+
+    <!-- Grille des portfolios, pleine hauteur -->
+    <main class="flex min-w-0 flex-1 flex-col overflow-hidden">
+      <div class="flex h-14 items-center justify-end gap-2 border-b border-neutral-200 bg-white px-6 dark:border-neutral-800 dark:bg-neutral-900">
+        <RefreshButton />
+        <UButton icon="i-lucide-plus" size="sm" label="Nouveau portfolio" @click="showCreate = true" />
       </div>
-      <UButton icon="i-lucide-plus" label="Nouveau portfolio" @click="showCreate = true" />
-    </div>
 
-    <div v-if="!portfolios.length" class="rounded-lg border border-dashed border-neutral-300 p-16 text-center text-neutral-500 dark:border-neutral-700">
-      Aucun portfolio pour l'instant — créez-en un pour composer votre premier PDF.
-    </div>
+      <div class="flex-1 overflow-auto p-6">
+        <div v-if="!portfolios.length" class="rounded-lg border border-dashed border-neutral-300 p-16 text-center text-neutral-500 dark:border-neutral-700">
+          Aucun portfolio pour l'instant — créez-en un pour composer votre premier PDF.
+        </div>
 
-    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
-      <UCard v-for="p in portfolios" :key="p.id">
+        <div v-else class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+          <UCard v-for="p in portfolios" :key="p.id">
         <div class="flex items-start justify-between gap-2">
           <div>
             <NuxtLink :to="`/portfolios/${p.id}`" class="font-semibold text-[var(--fl-ink)] hover:underline dark:text-white">
@@ -105,31 +126,39 @@ async function copyPublicLink(id: string) {
             <UBadge v-if="p.hasPdf" color="success" variant="subtle" size="sm">PDF</UBadge>
           </div>
         </div>
-        <div class="mt-4 flex items-center gap-2">
-          <UButton :to="`/portfolios/${p.id}`" size="sm" variant="soft" icon="i-lucide-pencil" label="Ouvrir" />
-          <UButton size="sm" variant="ghost" color="neutral" icon="i-lucide-copy" label="Dupliquer" @click="duplicate(p.id)" />
-          <UButton
-            size="sm"
-            variant="ghost"
-            color="neutral"
-            :icon="p.pdfCurrent ? 'i-lucide-download' : 'i-lucide-file-down'"
-            :label="p.pdfCurrent ? 'Télécharger' : (p.hasPdf ? 'Régénérer' : 'Générer')"
-            :loading="downloading === p.id"
-            @click="downloadPdf(p)"
-          />
-          <UButton
-            v-if="p.publicShare"
-            size="sm"
-            variant="ghost"
-            color="neutral"
-            icon="i-lucide-link"
-            aria-label="Copier le lien public"
-            @click="copyPublicLink(p.id)"
-          />
-          <UButton size="sm" variant="ghost" color="error" icon="i-lucide-trash-2" class="ml-auto" @click="remove(p.id, p.name)" />
+        <div class="mt-4 space-y-2">
+          <div class="flex gap-2">
+            <UButton :to="`/portfolios/${p.id}`" class="flex-1 justify-center" size="sm" variant="soft" icon="i-lucide-pencil" label="Ouvrir" />
+            <UButton class="flex-1 justify-center" size="sm" variant="ghost" color="neutral" icon="i-lucide-copy" label="Dupliquer" @click="duplicate(p.id)" />
+          </div>
+          <div class="flex gap-2">
+            <UButton
+              class="flex-1 justify-center"
+              size="sm"
+              variant="ghost"
+              color="neutral"
+              :icon="p.pdfCurrent ? 'i-lucide-download' : 'i-lucide-file-down'"
+              :label="p.pdfCurrent ? 'Télécharger' : (p.hasPdf ? 'Régénérer' : 'Générer')"
+              :loading="downloading === p.id"
+              @click="downloadPdf(p)"
+            />
+            <UButton
+              class="flex-1 justify-center"
+              size="sm"
+              variant="ghost"
+              color="neutral"
+              :icon="p.publicShare ? 'i-lucide-link' : 'i-lucide-link-2'"
+              :label="p.publicShare ? 'Copier le lien' : 'Générer le lien'"
+              :loading="sharing === p.id"
+              @click="p.publicShare ? copyPublicLink(p.id) : enableShare(p.id)"
+            />
+          </div>
+          <UButton class="w-full justify-center" size="sm" variant="ghost" color="error" icon="i-lucide-trash-2" label="Supprimer" @click="remove(p.id, p.name)" />
         </div>
-      </UCard>
-    </div>
+          </UCard>
+        </div>
+      </div>
+    </main>
 
     <UModal v-model:open="showCreate" title="Nouveau portfolio">
       <template #body>
@@ -142,5 +171,5 @@ async function copyPublicLink(id: string) {
         </form>
       </template>
     </UModal>
-  </UContainer>
+  </div>
 </template>