merge(v14-cde): Carte O cadre + bouton toggle desktop + drag mouseup fix + manifeste preview client:load + transitions

src/components/astro/ColJournal.astro

@@ -1,8 +1,8 @@
 ---
 import JournalList from '../vue/JournalList.vue';
 
-// V1.3-F : palette desopacifiee — chaque categorie a une pastel pour le fill pill inactive.
+// V1.4-B : pill inactive en transparent (revert pastels V1.3-F).
-// Regle bicouche : pastel = FILL pill inactive uniquement. Border + texte = encre couleur 100%.
+// Active = fill couleur 100% + texte blanc. Inactive = transparent + border + texte couleur 100%.
 const categories = [
   {
     id: 'politique',
@@ -78,14 +78,14 @@ const categories = [
       ))}
     </div>
 
-    <!-- Selecteur plateforme Politique (V1.3-F : pastel #E5C3BE en fill inactive) -->
+    <!-- Selecteur plateforme Politique (V1.4-B : transparent en fill inactive) -->
     <div id="politique-selector" class="mt-2 hidden flex gap-2">
       {categories[0].plateformes.map((p) => (
         <button
           type="button"
           data-platform-id={p.id}
           class="platform-pill"
-          style="font-family:'Courier New',Courier,monospace;font-size:12px;padding:2px 8px;border-radius:12px;cursor:pointer;border:1px solid #B5443A;background:#E5C3BE;color:#B5443A;"
+          style="font-family:'Courier New',Courier,monospace;font-size:12px;padding:2px 8px;border-radius:12px;cursor:pointer;border:1px solid #B5443A;background:transparent;color:#B5443A;"
         >
           {p.label}
         </button>
@@ -210,18 +210,17 @@ const categories = [
     window.dispatchEvent(new CustomEvent('platform-filter-change', { detail: { platform } }));
   };
 
-  // V1.3-F : palette desopacifiee.
+  // V1.4-B : revert pastels — pill inactive en transparent (papier visible).
   // Active = fill couleur 100% + texte blanc.
-  // Inactive = fill pastel + texte couleur 100% + border couleur 100% (regle bicouche).
+  // Inactive = transparent + texte couleur 100% + border couleur 100%.
   const updateBadgeStyle = (btn: HTMLElement, active: boolean) => {
     const color = btn.dataset.color || '#000';
-    const pastel = btn.dataset.pastel || '#E5C3BE';
     if (active) {
       btn.style.background = color;
       btn.style.color = '#fff';
       btn.style.border = `1px solid ${color}`;
     } else {
-      btn.style.background = pastel;
+      btn.style.background = 'transparent';
       btn.style.color = color;
       btn.style.border = `1px solid ${color}`;
     }
@@ -239,9 +238,9 @@ const categories = [
     }
   };
 
-  // V1.3-F : sub-pills Politique, regle bicouche identique.
+  // V1.4-B : sub-pills Politique, transparent au lieu de pastel.
   // Active (ou aucun filtre) = fill brique #B5443A + texte blanc.
-  // Inactive = fill pastel #E5C3BE + texte brique + border brique 100%.
+  // Inactive = transparent + texte brique + border brique 100%.
   const updatePillStyles = () => {
     const pills = document.querySelectorAll<HTMLElement>('.platform-pill');
     const active = platformFilters['politique'];
@@ -251,7 +250,7 @@ const categories = [
         pill.style.background = '#B5443A';
         pill.style.color = '#fff';
       } else {
-        pill.style.background = '#E5C3BE';
+        pill.style.background = 'transparent';
         pill.style.color = '#B5443A';
       }
     });

src/components/astro/Footer.astro

@@ -1,30 +1,32 @@
 ---
-// Footer.astro - V1.2-L : 1 ligne 3 zones (nav / subscribe / logos RS)
+// Footer.astro - V1.4-F : 1 ligne 3 zones (nav / subscribe / logos RS).
-// Style monochrome encre #0F172A palette terre V1.2
+// Alignement vertical centre + padding-y reduit (py-2) pour profil plus fin.
+// Subscribe input/button compact (py-1) cale sur baseline des autres elements.
 ---
-<footer class="border-t border-neutral-200 px-6 py-4 bg-[#FAFAF7] text-[#0F172A]">
+<footer class="border-t border-neutral-200 px-6 py-2 bg-[#FAFAF7] text-[#0F172A]">
-  <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 md:gap-6">
+  <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-2 md:gap-6">
 
     <!-- ZONE GAUCHE : liens nav -->
-    <nav class="flex gap-4 text-xs justify-center md:justify-start">
+    <nav class="flex gap-4 text-xs items-center justify-center md:justify-start">
       <a href="/manifeste" data-manifeste-link class="opacity-60 hover:opacity-100 transition-opacity">Manifeste</a>
       <a href="/a-propos" class="opacity-60 hover:opacity-100 transition-opacity">A propos</a>
       <a href="/mentions-legales" class="opacity-60 hover:opacity-100 transition-opacity">Mentions legales</a>
     </nav>
 
-    <!-- ZONE CENTRE : subscribe form compact (endpoint /api/subscribe V1.1-I) -->
+    <!-- ZONE CENTRE : subscribe form compact (endpoint /api/subscribe V1.1-I).
-    <div class="flex flex-col items-center gap-1">
+         V1.4-F : padding-y reduit (py-1) pour caler input sur la baseline des liens + logos. -->
+    <div class="flex flex-col items-center gap-0.5">
       <form id="subscribe-form" class="flex gap-2 items-center">
         <input
           type="email"
           name="email"
           required
           placeholder="ton@email.fr"
-          class="px-3 py-1.5 border border-neutral-300 rounded text-xs focus:outline-none focus:border-[#0F172A] bg-white"
+          class="px-3 py-1 border border-neutral-300 rounded text-xs focus:outline-none focus:border-[#0F172A] bg-white leading-tight"
         />
         <button
           type="submit"
-          class="px-3 py-1.5 bg-[#0F172A] text-white rounded text-xs hover:bg-[#475569] transition-colors whitespace-nowrap"
+          class="px-3 py-1 bg-[#0F172A] text-white rounded text-xs hover:bg-[#475569] transition-colors whitespace-nowrap leading-tight"
         >
           s'abonner
         </button>
@@ -33,7 +35,7 @@
     </div>
 
     <!-- ZONE DROITE : logos RS cliquables (SVG inline, fill #0F172A 60%) -->
-    <!-- V1.3-F : gap-4 mobile / gap-6 desktop pour espacer les logos -->
+    <!-- V1.3-F : gap-4 mobile / gap-6 desktop pour espacer les logos. V1.4-F : items-center force baseline. -->
     <div class="flex gap-4 md:gap-6 items-center justify-center md:justify-end text-[#0F172A]">
       <!-- Instagram -->
       <a

src/pages/index.astro

@@ -15,39 +15,43 @@ import PopupOnboarding from '../components/astro/PopupOnboarding.astro';
   <MobileTabBar />
   <PopupOnboarding />
 
-  <!-- Desktop : grid 3 colonnes V1.3-F avec toggle replier latéraux.
+  <!-- Desktop : grid 3 colonnes V1.4-A avec toggle CACHER latéraux (bidirectionnel).
-       Layout dynamique pilote par CSS vars --col-left / --col-right (320px par defaut, 0 quand replie).
+       Layout dynamique pilote par CSS vars --col-left / --col-right (320px visible, 0 cache).
-       Header et footer fixes (flex-shrink-0), pas de calc(100vh - X). -->
+       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. -->
   <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>
+    <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">
       <ColCentre />
-      <!-- Toggle gauche : pose sur le bord gauche de la colonne centrale -->
+      <!-- Toggle gauche : pose sur le bord gauche de la colonne centrale.
+           Icone < quand col visible (clic = cacher) ; > quand col cachee (clic = rouvrir). -->
       <button
         type="button"
         id="toggle-col-left"
-        aria-label="Replier/deplier colonne gauche"
+        aria-label="Cacher/afficher 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 -->
+      <!-- Toggle droite : pose sur le bord droit de la colonne centrale.
+           Icone > quand col visible (clic = cacher) ; < quand col cachee (clic = rouvrir). -->
       <button
         type="button"
         id="toggle-col-right"
-        aria-label="Replier/deplier colonne droite"
+        aria-label="Cacher/afficher 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>
+    <aside id="col-right-aside" class="border-l border-neutral-200 overflow-hidden h-full"><div class="h-full overflow-y-auto"><ColInsta /></div></aside>
   </div>
 
   <!-- Mobile : SwipeContainer Vue island - tabbar 44px reserve dans la zone flex-1 -->
@@ -60,8 +64,10 @@ import PopupOnboarding from '../components/astro/PopupOnboarding.astro';
   </div>
 
   <script>
-    // V1.3-F : toggle replier/deplier colonnes laterales desktop.
+    // V1.4-A : toggle CACHER colonnes laterales (bidirectionnel, focus simple).
-    // Etat persiste en sessionStorage. Quand replie : col = 0px, aside cache, ColCentre s'etend.
+    // - Clic bouton gauche / droite -> cache la col concernee (width 0 + display:none).
+    // - Re-clic -> re-affiche. ColCentre s'elargit ou se retracte selon le grid recalcul.
+    // - Etat persiste en sessionStorage (survit aux refresh dans la meme tab).
     const KEY_LEFT = 'tf-col-left-collapsed';
     const KEY_RIGHT = 'tf-col-right-collapsed';