fix(v14-bis): drag handle overlay + toggle gauche + manifeste preview + scrollbar visible + couleurs attenuees + 2e logo insta

FIX 1 drag handle : overlay full-screen z-9998 capture mouseup garanti
  (iframe AEP capturait les events — overlay au-dessus de tout au mousedown)
FIX 2 toggle gauche : minmax(0,1fr) + visibility hidden au lieu de display:none
  (conflit display:none + width:0 effondrait la col centre quand 2 cols togglees)
FIX 3 manifeste preview : slot flex-col + astro-island display:block
  (display:contents masquait astro-island au flex layout, preview ne s'inserait pas)
FIX 4 scrollbar visible : overflow-y:auto + scrollbar-color custom #94A3B8
  (style WebKit + Firefox uniquement quand data-preview-open=true)
FIX 5 couleurs attenuees : data-muted #C8867E/#8F9A78/#7B848E/#566375 + texte encre
FIX 6 Insta x2 : @aep.politique + @julesneny avec aria-labels et titles distincts
FIX 7 SVG Insta : path simple (camera carree + lentille) au lieu du path complexe

src/pages/index.astro

@@ -17,16 +17,19 @@ import PopupOnboarding from '../components/astro/PopupOnboarding.astro';
 
   <!-- Desktop : grid 3 colonnes V1.4-A avec toggle CACHER latéraux (bidirectionnel).
        Layout dynamique pilote par CSS vars --col-left / --col-right (320px visible, 0 cache).
-       Aside cache via display:none ET width 0 → centre s'elargit pour occuper la place.
        Re-clic = bidirectionnel : col reapparait, centre se retracte. sessionStorage persist.
-       Pas de full-screen lateral : juste cacher pour focus simple. -->
+       V1.4-bis FIX 2 : suppression du couplage display:none + width:0 (conflit grid).
+       On utilise EXCLUSIVEMENT --col-left/--col-right (0px = aside disparait visuellement).
+       Le contenu de l'aside est cache via visibility hidden (preserve la place 0 sans bug grid).
+       Grid template utilise minmax(0,1fr) pour que la col centre ne s'effondre pas quand les
+       voisins sont a 0 (cas critique 2 togglees). -->
   <div
     id="desktop-grid"
     class="hidden md:grid h-full overflow-hidden relative"
-    style="grid-template-columns: var(--col-left, 320px) 1fr var(--col-right, 320px);"
+    style="grid-template-columns: var(--col-left, 320px) minmax(0, 1fr) var(--col-right, 320px);"
   >
     <aside id="col-left-aside" class="border-r border-neutral-200 overflow-hidden h-full"><div class="h-full overflow-y-auto"><ColJournal /></div></aside>
-    <main class="overflow-hidden h-full relative">
+    <main class="overflow-hidden h-full relative" style="min-width: 0;">
       <ColCentre />
       <!-- Toggle gauche : pose sur le bord gauche de la colonne centrale.
            Icone < quand col visible (clic = cacher) ; > quand col cachee (clic = rouvrir). -->
@@ -87,12 +90,25 @@ import PopupOnboarding from '../components/astro/PopupOnboarding.astro';
       collapsedRight = sessionStorage.getItem(KEY_RIGHT) === '1';
     } catch { /* mode prive */ }
 
+    // V1.4-bis FIX 2 : UNE SEULE technique (CSS var width 0px) — pas de display:none
+    // qui creait un conflit grid : quand display:none + grid-column 0 cohabitent,
+    // certains navigateurs ne recalculent pas la col centre correctement → centre disparu.
+    // Maintenant : aside reste dans le flux avec width 0 (overflow hidden cache le contenu)
+    // + le contenu interne avec visibility hidden pour ne pas etre focusable au tab.
     const apply = () => {
       if (!grid) return;
       grid.style.setProperty('--col-left', collapsedLeft ? '0px' : '320px');
       grid.style.setProperty('--col-right', collapsedRight ? '0px' : '320px');
-      if (asideLeft) asideLeft.style.display = collapsedLeft ? 'none' : '';
-      if (asideRight) asideRight.style.display = collapsedRight ? 'none' : '';
+      // Aside reste en flux (display: '' par defaut) pour ne pas casser le grid template.
+      // Visibility hidden + tabindex -1 sur le contenu pour empecher interaction inutile.
+      if (asideLeft) {
+        asideLeft.style.visibility = collapsedLeft ? 'hidden' : '';
+        asideLeft.setAttribute('aria-hidden', collapsedLeft ? 'true' : 'false');
+      }
+      if (asideRight) {
+        asideRight.style.visibility = collapsedRight ? 'hidden' : '';
+        asideRight.setAttribute('aria-hidden', collapsedRight ? 'true' : 'false');
+      }
       // Icones : pointe vers la direction d'ouverture (sens depliage).
       if (iconLeft) iconLeft.innerHTML = collapsedLeft ? '&rsaquo;' : '&lsaquo;';
       if (iconRight) iconRight.innerHTML = collapsedRight ? '&lsaquo;' : '&rsaquo;';