feat(v13-f): palette desopacifiee pills + toggle cols laterales + footer gap-6 + manifeste CTA bord rouge

src/pages/index.astro

@@ -15,12 +15,39 @@ import PopupOnboarding from '../components/astro/PopupOnboarding.astro';
   <MobileTabBar />
   <PopupOnboarding />
 
-  <!-- Desktop : grid 3 colonnes V1.3-BG : prend toute la place du wrapper flex-1 du BaseLayout.
-       Header et footer sont fixes (flex-shrink-0), pas besoin de calc(100vh - X). -->
-  <div class="hidden md:grid md:grid-cols-[320px_1fr_320px] h-full overflow-hidden">
-    <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-l border-neutral-200 overflow-y-auto h-full"><ColInsta /></aside>
+  <!-- Desktop : grid 3 colonnes V1.3-F avec toggle replier latéraux.
+       Layout dynamique pilote par CSS vars --col-left / --col-right (320px par defaut, 0 quand replie).
+       Header et footer fixes (flex-shrink-0), pas de calc(100vh - X). -->
+  <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);"
+  >
+    <aside id="col-left-aside" class="border-r border-neutral-200 overflow-y-auto h-full"><ColJournal /></aside>
+    <main class="overflow-hidden h-full relative">
+      <ColCentre />
+      <!-- Toggle gauche : pose sur le bord gauche de la colonne centrale -->
+      <button
+        type="button"
+        id="toggle-col-left"
+        aria-label="Replier/deplier colonne gauche"
+        class="hidden md:flex absolute left-0 top-1/2 -translate-y-1/2 z-20 w-5 h-12 items-center justify-center bg-white border border-neutral-200 border-l-0 rounded-r text-neutral-500 hover:bg-neutral-50 hover:text-neutral-900 transition-colors cursor-pointer"
+        style="font-family:'Courier New',Courier,monospace;font-size:14px;line-height:1;"
+      >
+        <span id="toggle-col-left-icon">&lsaquo;</span>
+      </button>
+      <!-- Toggle droite : pose sur le bord droit de la colonne centrale -->
+      <button
+        type="button"
+        id="toggle-col-right"
+        aria-label="Replier/deplier colonne droite"
+        class="hidden md:flex absolute right-0 top-1/2 -translate-y-1/2 z-20 w-5 h-12 items-center justify-center bg-white border border-neutral-200 border-r-0 rounded-l text-neutral-500 hover:bg-neutral-50 hover:text-neutral-900 transition-colors cursor-pointer"
+        style="font-family:'Courier New',Courier,monospace;font-size:14px;line-height:1;"
+      >
+        <span id="toggle-col-right-icon">&rsaquo;</span>
+      </button>
+    </main>
+    <aside id="col-right-aside" class="border-l border-neutral-200 overflow-y-auto h-full"><ColInsta /></aside>
   </div>
 
   <!-- Mobile : SwipeContainer Vue island - tabbar 44px reserve dans la zone flex-1 -->
@@ -31,4 +58,52 @@ import PopupOnboarding from '../components/astro/PopupOnboarding.astro';
       <ColInsta slot="right" />
     </SwipeContainer>
   </div>
+
+  <script>
+    // V1.3-F : toggle replier/deplier colonnes laterales desktop.
+    // Etat persiste en sessionStorage. Quand replie : col = 0px, aside cache, ColCentre s'etend.
+    const KEY_LEFT = 'tf-col-left-collapsed';
+    const KEY_RIGHT = 'tf-col-right-collapsed';
+
+    const grid = document.getElementById('desktop-grid') as HTMLElement | null;
+    const asideLeft = document.getElementById('col-left-aside') as HTMLElement | null;
+    const asideRight = document.getElementById('col-right-aside') as HTMLElement | null;
+    const btnLeft = document.getElementById('toggle-col-left') as HTMLButtonElement | null;
+    const btnRight = document.getElementById('toggle-col-right') as HTMLButtonElement | null;
+    const iconLeft = document.getElementById('toggle-col-left-icon');
+    const iconRight = document.getElementById('toggle-col-right-icon');
+
+    let collapsedLeft = false;
+    let collapsedRight = false;
+
+    try {
+      collapsedLeft = sessionStorage.getItem(KEY_LEFT) === '1';
+      collapsedRight = sessionStorage.getItem(KEY_RIGHT) === '1';
+    } catch { /* mode prive */ }
+
+    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' : '';
+      // Icones : pointe vers la direction d'ouverture (sens depliage).
+      if (iconLeft) iconLeft.innerHTML = collapsedLeft ? '&rsaquo;' : '&lsaquo;';
+      if (iconRight) iconRight.innerHTML = collapsedRight ? '&lsaquo;' : '&rsaquo;';
+    };
+
+    apply();
+
+    btnLeft?.addEventListener('click', () => {
+      collapsedLeft = !collapsedLeft;
+      try { sessionStorage.setItem(KEY_LEFT, collapsedLeft ? '1' : '0'); } catch { /* mode prive */ }
+      apply();
+    });
+
+    btnRight?.addEventListener('click', () => {
+      collapsedRight = !collapsedRight;
+      try { sessionStorage.setItem(KEY_RIGHT, collapsedRight ? '1' : '0'); } catch { /* mode prive */ }
+      apply();
+    });
+  </script>
 </BaseLayout>