feat(v13-bg): layout 1 ecran fixe + hamburger desktop hide + categorie Pro

Le @load event ne fire pas (ou tardivement) sur l'iframe AEP enfermee
dans un wrapper avec transform scale(0.42) + viewport simulee 1440px.
Resultat : skeleton 'Chargement de la carte AEP...' reste affiche
indefiniment, masquant l'iframe meme si elle se charge.

Fix :
- setTimeout 2.5s dans onMounted qui force revealIframe() inconditionnellement
- onIframeLoad clear le timer si l'event fire dans les temps (cas nominal)
- retrait du z-10 sur le skeleton (defense en profondeur : si bug residuel,
  l'iframe sera quand meme visible derriere)
- factorisation revealIframe() partagee entre @load et fallback
- cleanup du timer dans onUnmounted

Build SSR : 5 pages, 0 warning, ~4s.
Tests browser manuels a faire par Jules pour confirmer disparition skeleton.

src/components/astro/ColJournal.astro

@@ -34,6 +34,16 @@ const categories = [
     ],
     hasSelector: false,
   },
+  {
+    id: 'pro',
+    label: 'Pro',
+    color: '#0F172A',
+    hashtags: ['#building-public', '#pro'],
+    plateformes: [
+      { id: 'linkedin', label: 'LinkedIn', url: 'https://www.linkedin.com/in/jules-neny/' },
+    ],
+    hasSelector: false,
+  },
 ];
 ---
 <div class="h-full flex flex-col p-4 pt-20 md:pt-6 gap-5">
@@ -42,7 +52,7 @@ const categories = [
   <details id="hashtags-accordion" class="border-t border-neutral-200 pt-4">
     <summary class="font-semibold cursor-pointer select-none flex items-center justify-between">
       <span>Hashtags</span>
-      <span class="text-xs text-neutral-400 font-normal">3 categories</span>
+      <span class="text-xs text-neutral-400 font-normal">4 categories</span>
     </summary>
 
     <div class="mt-3 flex flex-wrap gap-2" id="category-badges">
@@ -126,7 +136,7 @@ const categories = [
   const PLATFORM_KEY = 'tf-platform-filter';
 
   // Active state : map categoryId -> boolean
-  const activeCategories: Record<string, boolean> = { politique: true, art: true, outils: true };
+  const activeCategories: Record<string, boolean> = { politique: true, art: true, outils: true, pro: true };
 
   // Platform filter : map categoryId -> platformId | null
   const platformFilters: Record<string, string | null> = { politique: null };
@@ -138,15 +148,18 @@ const categories = [
     const politiqueHashtags = ['#politique', '#aep-politique'];
     const artHashtags = ['#peinture', '#art'];
     const outilsHashtags = ['#stack', '#building-public'];
+    const proHashtags = ['#building-public', '#pro'];
 
     const allPolitique = politiqueHashtags.every(h => storedHashtags[h] !== false);
     const allArt = artHashtags.every(h => storedHashtags[h] !== false);
     const allOutils = outilsHashtags.every(h => storedHashtags[h] !== false);
+    const allPro = proHashtags.every(h => storedHashtags[h] !== false);
 
     if (Object.keys(storedHashtags).length > 0) {
       activeCategories['politique'] = allPolitique;
       activeCategories['art'] = allArt;
       activeCategories['outils'] = allOutils;
+      activeCategories['pro'] = allPro;
     }
   } catch { /* mode prive */ }
 
@@ -163,6 +176,7 @@ const categories = [
       politique: ['#politique', '#aep-politique'],
       art: ['#peinture', '#art'],
       outils: ['#stack', '#building-public'],
+      pro: ['#building-public', '#pro'],
     };
     for (const [catId, tags] of Object.entries(catHashtags)) {
       const active = activeCategories[catId] ?? true;

src/components/astro/HamburgerMenu.astro

@@ -5,7 +5,7 @@
 <button
   id="hamburger-trigger"
   type="button"
-  class="fixed top-4 right-4 z-50 p-3 bg-white/95 border border-neutral-200 rounded-lg shadow-md hover:bg-white transition-colors md:top-6 md:right-6"
+  class="fixed top-4 right-4 z-50 p-3 bg-white/95 border border-neutral-200 rounded-lg shadow-md hover:bg-white transition-colors md:hidden"
   aria-label="Ouvrir le menu"
   aria-expanded="false"
   aria-controls="hamburger-drawer"

src/components/vue/EmbedDynamique.vue

@@ -23,24 +23,43 @@ const iframeStyle = computed(() => ({
   transformOrigin: '0 0',
 }))
 
+let fallbackTimer: ReturnType<typeof setTimeout> | null = null
+
+const revealIframe = () => {
+  if (iframeRef.value) {
+    iframeRef.value.classList.remove('opacity-0')
+    iframeRef.value.classList.add('opacity-100')
+  }
+  skeletonHidden.value = true
+}
+
 onMounted(() => {
   if (wrapperRef.value && typeof ResizeObserver !== 'undefined') {
     updateScale()
     resizeObs = new ResizeObserver(updateScale)
     resizeObs.observe(wrapperRef.value)
   }
+  // Fallback : si @load ne fire pas dans 2.5s (transform/scale peut bloquer l'event),
+  // on revele quand meme l'iframe pour ne pas laisser le skeleton infini.
+  fallbackTimer = setTimeout(() => {
+    revealIframe()
+  }, 2500)
 })
 onUnmounted(() => {
   resizeObs?.disconnect()
   resizeObs = null
+  if (fallbackTimer) {
+    clearTimeout(fallbackTimer)
+    fallbackTimer = null
+  }
 })
 
 const onIframeLoad = () => {
-  if (iframeRef.value) {
+  if (fallbackTimer) {
-    iframeRef.value.classList.remove('opacity-0')
+    clearTimeout(fallbackTimer)
-    iframeRef.value.classList.add('opacity-100')
+    fallbackTimer = null
   }
-  skeletonHidden.value = true
+  revealIframe()
 }
 </script>
 
@@ -51,7 +70,7 @@ const onIframeLoad = () => {
         <div
           v-if="!skeletonHidden"
           id="embed-skeleton"
-          class="absolute inset-0 flex items-center justify-center bg-neutral-50 animate-pulse z-10"
+          class="absolute inset-0 flex items-center justify-center bg-neutral-50 animate-pulse"
         >
           <span class="text-neutral-400 text-sm">Chargement de la carte AEP...</span>
         </div>

src/layouts/BaseLayout.astro

@@ -14,7 +14,7 @@ const {
 } = Astro.props;
 ---
 <!doctype html>
-<html lang="fr">
+<html lang="fr" class="h-screen">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
@@ -29,11 +29,15 @@ const {
     <meta name="twitter:title" content={title} />
     <meta name="twitter:description" content={description} />
   </head>
-  <body class="m-0 bg-white text-neutral-900 antialiased min-h-screen flex flex-col">
+  <body class="m-0 bg-white text-neutral-900 antialiased h-screen flex flex-col overflow-hidden">
+    <div class="flex-shrink-0">
       <SiteHeader />
-    <div class="flex-1 flex flex-col min-h-0">
+    </div>
+    <div class="flex-1 flex flex-col min-h-0 overflow-hidden">
       <slot />
     </div>
+    <div class="flex-shrink-0">
       <Footer />
+    </div>
   </body>
 </html>

src/pages/a-propos.astro

@@ -10,7 +10,7 @@ import HamburgerMenu from '../components/astro/HamburgerMenu.astro';
 >
   <HamburgerMenu />
 
-  <main class="min-h-screen bg-white">
+  <main class="h-full overflow-y-auto bg-white">
     <article class="max-w-2xl mx-auto px-6 py-16 md:py-24">
 
       <header class="mb-10">

src/pages/index.astro

@@ -15,18 +15,16 @@ import PopupOnboarding from '../components/astro/PopupOnboarding.astro';
   <MobileTabBar />
   <PopupOnboarding />
 
-  <!-- Desktop : grid 3 colonnes (header 64px deja consommes par SiteHeader, on prend le reste) -->
+  <!-- Desktop : grid 3 colonnes V1.3-BG : prend toute la place du wrapper flex-1 du BaseLayout.
-  <div
+       Header et footer sont fixes (flex-shrink-0), pas besoin de calc(100vh - X). -->
-    class="hidden md:grid md:grid-cols-[320px_1fr_320px] overflow-hidden"
+  <div class="hidden md:grid md:grid-cols-[320px_1fr_320px] h-full overflow-hidden">
-    style="height: calc(100vh - 64px);"
+    <aside class="border-r border-neutral-200 overflow-y-auto h-full"><ColJournal /></aside>
-  >
+    <main class="overflow-hidden h-full"><ColCentre /></main>
-    <aside class="border-r border-neutral-200 overflow-y-auto"><ColJournal /></aside>
+    <aside class="border-l border-neutral-200 overflow-y-auto h-full"><ColInsta /></aside>
-    <main class="overflow-hidden"><ColCentre /></main>
-    <aside class="border-l border-neutral-200 overflow-y-auto"><ColInsta /></aside>
   </div>
 
-  <!-- Mobile : SwipeContainer Vue island - header 48px + tabbar 44px = 92px reserves -->
+  <!-- Mobile : SwipeContainer Vue island - tabbar 44px reserve dans la zone flex-1 -->
-  <div class="md:hidden overflow-hidden" style="height: calc(100dvh - 48px - 44px); margin-top: 44px;">
+  <div class="md:hidden h-full overflow-hidden" style="padding-top: 44px;">
     <SwipeContainer client:load>
       <ColJournal slot="left" />
       <ColCentre slot="center" />

src/pages/manifeste.astro

@@ -10,7 +10,7 @@ import HamburgerMenu from '../components/astro/HamburgerMenu.astro';
 >
   <HamburgerMenu />
 
-  <main class="min-h-screen bg-white">
+  <main class="h-full overflow-y-auto bg-white">
     <article class="max-w-2xl mx-auto px-6 py-16 md:py-24">
 
       <!-- En-tete -->

src/pages/manifeste/commander.astro

@@ -10,7 +10,7 @@ import HamburgerMenu from '../../components/astro/HamburgerMenu.astro';
 >
   <HamburgerMenu />
 
-  <main class="min-h-screen bg-white">
+  <main class="h-full overflow-y-auto bg-white">
     <article class="max-w-xl mx-auto px-6 py-16 md:py-24">
 
       <header class="mb-10">

src/pages/mentions-legales.astro

@@ -10,7 +10,7 @@ import HamburgerMenu from '../components/astro/HamburgerMenu.astro';
 >
   <HamburgerMenu />
 
-  <main class="min-h-screen bg-white">
+  <main class="h-full overflow-y-auto bg-white">
     <article class="max-w-2xl mx-auto px-6 py-16 md:py-24">
 
       <header class="mb-10">