From 046f34ec8b7bb6e08c88ea714dd8c8b10653c40a Mon Sep 17 00:00:00 2001
From: Jules Neny <jules@trans-former.fr>
Date: Mon, 11 May 2026 15:22:44 +0200
Subject: [PATCH] feat(v11-f): drag-resize desktop ColCentre HAUT/BAS + persist
 session

---
 src/components/astro/ColCentre.astro | 87 +++++++++++++++++++++++++++-
 1 file changed, 85 insertions(+), 2 deletions(-)

diff --git a/src/components/astro/ColCentre.astro b/src/components/astro/ColCentre.astro
index 41e1aec..f67ea2f 100644
--- a/src/components/astro/ColCentre.astro
+++ b/src/components/astro/ColCentre.astro
@@ -7,7 +7,7 @@ import EmbedDynamique from '../vue/EmbedDynamique.vue';
 ---
 <div id="col-centre-grid" class="h-full grid grid-rows-2 gap-2 p-2">
   <!-- HAUT 50% : tabs Carte O / Chatbot -->
-  <section id="col-centre-haut" class="border border-neutral-200 rounded flex flex-col overflow-hidden bg-white">
+  <section id="col-centre-haut" class="border border-neutral-200 rounded flex flex-col overflow-hidden bg-white" style="min-height: 0;">
     <nav role="tablist" aria-label="Vues centrales" class="flex border-b border-neutral-200 px-1 pt-1">
       <button
         type="button"
@@ -55,6 +55,15 @@ import EmbedDynamique from '../vue/EmbedDynamique.vue';
     </div>
   </section>
 
+  <!-- Drag handle desktop - redimensionnement vertical md+ -->
+  <div
+    id="col-centre-drag-handle"
+    class="hidden md:flex items-center justify-center h-2 cursor-row-resize hover:bg-neutral-200 transition-colors w-full -mt-1 -mb-1"
+    aria-hidden="true"
+  >
+    <span class="block w-10 h-0.5 bg-neutral-300 rounded-full"></span>
+  </div>
+
   <!-- Poignee repli zone HAUT - mobile only -->
   <button
     id="col-centre-poignee"
@@ -66,7 +75,7 @@ import EmbedDynamique from '../vue/EmbedDynamique.vue';
   </button>
 
   <!-- BAS 50% : embed dynamique (carte AEP default, article journal au click) -->
-  <section class="border border-neutral-200 rounded overflow-hidden bg-white">
+  <section class="border border-neutral-200 rounded overflow-hidden bg-white" style="min-height: 0;">
     <div class="h-full min-h-[60vh] md:min-h-[400px]">
       <EmbedDynamique client:visible />
     </div>
@@ -107,6 +116,80 @@ import EmbedDynamique from '../vue/EmbedDynamique.vue';
     applyRepliState(next);
   });
 
+  // Drag-resize desktop (>=768px)
+  const dragHandle = document.getElementById('col-centre-drag-handle');
+  const gridEl = document.getElementById('col-centre-grid');
+
+  if (dragHandle && gridEl) {
+    let isDragging = false;
+    let startY = 0;
+    let startTop = 0;
+
+    const getGridHeight = () => gridEl.getBoundingClientRect().height;
+
+    const getHautPercent = (): number => {
+      const rows = gridEl.style.gridTemplateRows;
+      if (rows && rows.includes('fr')) {
+        const parts = rows.split(' ');
+        if (parts.length >= 2) {
+          const top = parseFloat(parts[0]) || 1;
+          const bot = parseFloat(parts[parts.length - 1]) || 1;
+          return (top / (top + bot)) * 100;
+        }
+      }
+      if (rows && rows.includes('%')) {
+        const parts = rows.split(' ');
+        return parseFloat(parts[0]) || 50;
+      }
+      return 50;
+    };
+
+    dragHandle.addEventListener('mousedown', (e: MouseEvent) => {
+      if (sessionStorage.getItem('tf-haut-replie') === 'true') return;
+      isDragging = true;
+      startY = e.clientY;
+      startTop = (getHautPercent() / 100) * getGridHeight();
+      document.body.style.cursor = 'row-resize';
+      document.body.style.userSelect = 'none';
+      e.preventDefault();
+    });
+
+    document.addEventListener('mousemove', (e: MouseEvent) => {
+      if (!isDragging || !gridEl) return;
+      const delta = e.clientY - startY;
+      const totalH = getGridHeight();
+      const newTop = Math.min(Math.max(startTop + delta, totalH * 0.2), totalH * 0.8);
+      const topPct = (newTop / totalH) * 100;
+      const botPct = 100 - topPct;
+      gridEl.style.gridTemplateRows = `${topPct.toFixed(1)}% ${botPct.toFixed(1)}%`;
+      gridEl.classList.remove('grid-rows-2');
+    });
+
+    document.addEventListener('mouseup', () => {
+      if (isDragging) {
+        isDragging = false;
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+        const rows = gridEl.style.gridTemplateRows;
+        if (rows) sessionStorage.setItem('tf-centre-rows', rows);
+      }
+    });
+
+    // Restaurer position depuis sessionStorage
+    const savedRows = sessionStorage.getItem('tf-centre-rows');
+    if (savedRows && sessionStorage.getItem('tf-haut-replie') !== 'true') {
+      gridEl.style.gridTemplateRows = savedRows;
+      gridEl.classList.remove('grid-rows-2');
+    }
+
+    // Double-click sur drag handle = reset 50/50
+    dragHandle.addEventListener('dblclick', () => {
+      gridEl.style.gridTemplateRows = '';
+      gridEl.classList.add('grid-rows-2');
+      sessionStorage.removeItem('tf-centre-rows');
+    });
+  }
+
   // Tabs toggle.
   const tabs = document.querySelectorAll<HTMLButtonElement>('[data-tab]');
   const panels = document.querySelectorAll<HTMLElement>('[data-tab-panel]');