fix(v14-abf): toggle cols cacher seulement bidirectionnel + revert pastels transparent + footer align

src/components/astro/ColJournal.astro

@@ -1,11 +1,14 @@
 ---
 import JournalList from '../vue/JournalList.vue';
 
+// V1.4-B : pill inactive en transparent (revert pastels V1.3-F).
+// Active = fill couleur 100% + texte blanc. Inactive = transparent + border + texte couleur 100%.
 const categories = [
   {
     id: 'politique',
     label: 'Politique',
     color: '#B5443A',
+    pastel: '#E5C3BE',
     hashtags: ['#politique', '#aep-politique'],
     plateformes: [
       { id: 'instagram', label: 'Court', url: 'https://www.instagram.com/aep.politique/' },
@@ -18,6 +21,7 @@ const categories = [
     id: 'art',
     label: 'Art',
     color: '#5B6B3A',
+    pastel: '#CACFBE',
     hashtags: ['#peinture', '#art'],
     plateformes: [
       { id: 'instagram', label: '@julesneny', url: 'https://www.instagram.com/julesneny/' },
@@ -28,6 +32,7 @@ const categories = [
     id: 'outils',
     label: 'Outils',
     color: '#475569',
+    pastel: '#C4C8CC',
     hashtags: ['#stack', '#building-public'],
     plateformes: [
       { id: 'gitea', label: 'Gitea', url: 'https://git.trans-former.fr/jules' },
@@ -38,6 +43,7 @@ const categories = [
     id: 'pro',
     label: 'Pro',
     color: '#0F172A',
+    pastel: '#C4C8CC',
     hashtags: ['#building-public', '#pro'],
     plateformes: [
       { id: 'linkedin', label: 'LinkedIn', url: 'https://www.linkedin.com/in/jules-neny/' },
@@ -62,6 +68,7 @@ const categories = [
           data-category-id={cat.id}
           data-hashtags={cat.hashtags.join(',')}
           data-color={cat.color}
+          data-pastel={cat.pastel}
           data-has-selector={cat.hasSelector ? 'true' : 'false'}
           class="category-badge"
           style={`background:${cat.color};color:#fff;font-family:'Courier New',Courier,monospace;font-size:13px;padding:3px 10px;border-radius:4px;cursor:pointer;border:1px solid ${cat.color};`}
@@ -71,7 +78,7 @@ const categories = [
       ))}
     </div>
 
-    <!-- Selecteur plateforme Politique -->
+    <!-- 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
@@ -203,6 +210,9 @@ const categories = [
     window.dispatchEvent(new CustomEvent('platform-filter-change', { detail: { platform } }));
   };
 
+  // V1.4-B : revert pastels — pill inactive en transparent (papier visible).
+  // Active = fill couleur 100% + texte blanc.
+  // Inactive = transparent + texte couleur 100% + border couleur 100%.
   const updateBadgeStyle = (btn: HTMLElement, active: boolean) => {
     const color = btn.dataset.color || '#000';
     if (active) {
@@ -228,6 +238,9 @@ const categories = [
     }
   };
 
+  // V1.4-B : sub-pills Politique, transparent au lieu de pastel.
+  // Active (ou aucun filtre) = fill brique #B5443A + texte blanc.
+  // Inactive = transparent + texte brique + border brique 100%.
   const updatePillStyles = () => {
     const pills = document.querySelectorAll<HTMLElement>('.platform-pill');
     const active = platformFilters['politique'];

src/components/astro/Footer.astro

@@ -1,30 +1,32 @@
 ---
-// Footer.astro - V1.2-L : 1 ligne 3 zones (nav / subscribe / logos RS)
-// Style monochrome encre #0F172A palette terre V1.2
+// Footer.astro - V1.4-F : 1 ligne 3 zones (nav / subscribe / logos RS).
+// 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]">
-  <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 md:gap-6">
+<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-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) -->
-    <div class="flex flex-col items-center gap-1">
+    <!-- ZONE CENTRE : subscribe form compact (endpoint /api/subscribe V1.1-I).
+         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,8 @@
     </div>
 
     <!-- ZONE DROITE : logos RS cliquables (SVG inline, fill #0F172A 60%) -->
-    <div class="flex gap-3 items-center justify-center md:justify-end text-[#0F172A]">
+    <!-- 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
         href="https://www.instagram.com/aep.politique/"

src/components/vue/ManifesteContent.vue

@@ -20,13 +20,8 @@
       <p class="mt-3 text-neutral-600 text-sm md:text-base leading-relaxed">
         Un commun vivant pour bifurquer ; ensemble, lentement, par accumulation de petits gestes situés.
       </p>
+      <!-- V1.3-F : CTA "commander" deplace tout en bas (apres lecture). Le seul lien d'entete = page complete. -->
       <div class="mt-5 flex flex-wrap gap-2">
-        <a
-          href="/manifeste/commander"
-          class="inline-block px-4 py-2 border border-neutral-900 text-neutral-900 rounded-lg font-medium text-sm hover:bg-neutral-900 hover:text-white transition-colors"
-        >
-          Commander la version imprimée
-        </a>
         <a
           href="/manifeste"
           class="inline-block px-4 py-2 border border-neutral-300 text-neutral-700 rounded-lg text-sm hover:border-neutral-900 hover:text-neutral-900 transition-colors"
@@ -134,8 +129,22 @@
       </p>
     </div>
 
+    <!-- V1.3-F : CTA commander version papier — bord rouge brique #B5443A, signal politique fort.
+         Place en bas, apres lecture : j'achete, tranquille. -->
+    <section class="mt-10 pt-6 border-t border-neutral-200 text-center">
+      <p class="text-xs italic text-neutral-500 mb-3">
+        Manifeste lu. J'achete la version papier, tranquille.
+      </p>
+      <a
+        href="/manifeste/commander"
+        class="inline-block px-5 py-2.5 border-2 border-[#B5443A] text-[#0F172A] bg-[#FAFAF7] font-medium text-sm hover:bg-[#E5C3BE] transition-colors"
+      >
+        Commander la version papier
+      </a>
+    </section>
+
     <!-- Footer simple : lien vers page complete pour les detail (mouvements, etc.) -->
-    <footer class="mt-10 pt-6 border-t border-neutral-200 text-center">
+    <footer class="mt-6 pt-4 border-t border-neutral-200 text-center">
       <a
         href="/manifeste"
         target="_blank"

src/pages/index.astro

@@ -15,12 +15,43 @@ 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.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. -->
+  <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-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.
+           Icone < quand col visible (clic = cacher) ; > quand col cachee (clic = rouvrir). -->
+      <button
+        type="button"
+        id="toggle-col-left"
+        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.
+           Icone > quand col visible (clic = cacher) ; < quand col cachee (clic = rouvrir). -->
+      <button
+        type="button"
+        id="toggle-col-right"
+        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-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 -->
@@ -31,4 +62,54 @@ import PopupOnboarding from '../components/astro/PopupOnboarding.astro';
       <ColInsta slot="right" />
     </SwipeContainer>
   </div>
+
+  <script>
+    // V1.4-A : toggle CACHER colonnes laterales (bidirectionnel, focus simple).
+    // - 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';
+
+    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>

src/pages/manifeste.astro

@@ -24,14 +24,7 @@ import HamburgerMenu from '../components/astro/HamburgerMenu.astro';
         <p class="mt-4 text-neutral-600 text-base md:text-lg leading-relaxed">
           Un commun vivant pour bifurquer ; ensemble, lentement, par accumulation de petits gestes situes.
         </p>
-        <div class="mt-8">
-          <a
-            href="/manifeste/commander"
-            class="inline-block px-5 py-2.5 border border-neutral-900 text-neutral-900 rounded-lg font-medium hover:bg-neutral-900 hover:text-white transition-colors"
-          >
-            Commander la version imprimee
-          </a>
-        </div>
+        <!-- V1.3-F : CTA "commander" deplace tout en bas de page (apres avoir lu). -->
       </header>
 
       <!-- Corps du manifeste -->
@@ -203,6 +196,20 @@ import HamburgerMenu from '../components/astro/HamburgerMenu.astro';
         </div>
       </section>
 
+      <!-- V1.3-F : CTA commander version papier — bord rouge brique #B5443A, signal politique fort.
+           Place en bas : le lecteur a lu, il sait ce qu'il achete. Tranquille. -->
+      <section class="mt-16 pt-10 border-t border-neutral-200 text-center">
+        <p class="text-sm italic text-neutral-500 mb-4">
+          Manifeste lu. J'achete la version papier, tranquille.
+        </p>
+        <a
+          href="/manifeste/commander"
+          class="inline-block px-6 py-3 border-2 border-[#B5443A] text-[#0F172A] bg-[#FAFAF7] font-medium text-base hover:bg-[#E5C3BE] transition-colors"
+        >
+          Commander la version papier
+        </a>
+      </section>
+
       <!-- En lire plus -->
       <footer class="mt-16 pt-10 border-t border-neutral-200 text-center">
         <p class="text-neutral-600 mb-4">En lire plus</p>