add responsiveness on pie and comparison

app/src/content/article.mdx

@@ -359,7 +359,7 @@ Below is an example of a correctly identified Duplicate ("Photo"), a false-posit
 We open-source the deduplication pipeline here as well as the precomputed test-set embedding’s here.
 <br/>
 <Wide>
-<HtmlEmbed src="comparison.html" desc="Examples of the Deduplication Pipeline."/>
+<HtmlEmbed src="comparison.html" align="center" desc="Examples of the Deduplication Pipeline."/>
 </Wide>
 
 | Name          | Samples	| Contamination Rate | Performance Drop |

app/src/content/embeds/comparison.html

@@ -1,13 +1,13 @@
 <div class="image-comparison" style="width:100%;margin:10px 0;"></div>
 <style>
   .image-comparison { position: relative; }
-  .image-comparison .controls { display:flex; align-items:center; gap:16px; justify-content:flex-start; margin:12px 0; }
-  .image-comparison .controls label { font-size:12px; color: var(--muted-color); display:flex; align-items:center; gap:8px; }
+  .image-comparison .controls { display:flex; align-items:center; gap:16px; justify-content:center; flex-wrap:wrap; margin:14px 0; }
+  .image-comparison .controls label { font-size:14px; color: var(--text-color); display:flex; align-items:center; justify-content:center; gap:10px; font-weight:600; }
   .image-comparison .controls select {
-    font-size: 12px;
-    padding: 8px 28px 8px 10px;
+    font-size: 14px;
+    padding: 8px 32px 8px 12px;
     border: 1px solid var(--border-color);
-    border-radius: 8px;
+    border-radius: 10px;
     background-color: var(--surface-bg);
     color: var(--text-color);
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f1115' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
@@ -16,6 +16,7 @@
     background-size: 12px;
     -webkit-appearance: none; appearance: none; cursor: pointer;
     transition: border-color .15s ease, box-shadow .15s ease;
+    box-shadow: 0 1px 2px rgba(0,0,0,.04);
   }
   [data-theme="dark"] .image-comparison .controls select {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
@@ -23,8 +24,15 @@
   .image-comparison .controls select:hover { border-color: var(--primary-color); }
   .image-comparison .controls select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(232,137,171,.25); outline: none; }
 
+  /* Responsive: empiler label et select proprement sur petits écrans */
+  @media (max-width: 520px) {
+    .image-comparison .controls label { flex-direction: column; gap: 6px; }
+  }
+
   .image-comparison .grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width:100%; align-items: start; }
-  @media (max-width: 980px) { .image-comparison .grid { grid-template-columns: repeat(2, 1fr); } }
+  /* Large → 4 colonnes; Medium → 2 colonnes; Mobile → 1 colonne */
+  @media (max-width: 1100px) { .image-comparison .grid { grid-template-columns: repeat(2, 1fr); } }
+  @media (max-width: 680px) { .image-comparison .grid { grid-template-columns: 1fr; } }
 
   .image-comparison .card { position: relative; border:1px solid var(--border-color); border-radius:10px; overflow:hidden; background: var(--surface-bg); display:flex; flex-direction:column; }
   .image-comparison .card .media { position: relative; width:100%; height: 200px; background: var(--surface-2, var(--surface-bg)); display:block; }

app/src/content/embeds/d3-pie.html

@@ -51,7 +51,7 @@
       } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
 
       // SVG scaffolding
-      const svg = d3.select(container).append('svg').attr('width','100%').style('display','block');
+      const svg = d3.select(container).append('svg').attr('width','100%').style('display','block').attr('preserveAspectRatio','xMidYMin meet');
       const gRoot = svg.append('g');
       const gLegend = gRoot.append('foreignObject').attr('class','legend');
       const gPlots = gRoot.append('g').attr('class','plots');
@@ -89,52 +89,91 @@
       }));
 
       // Layout
-      let width=800, height=450; const margin = { top: 0, right: 24, bottom: 32, left: 24 };
-      const CAPTION_GAP = 28;   // espace entre titre et donut (augmenté)
-      const LEGEND_GAP = 8;     // espace entre donut et légende (réduit)
+      let width=800; const margin = { top: 8, right: 24, bottom: 0, left: 24 };
+      const CAPTION_GAP = 24;   // espace entre titre et donut
+      const GAP_X = 20;         // espace entre colonnes
+      const GAP_Y = 12;         // espace entre lignes
+      const LEGEND_HEIGHT = 44; // hauteur de la légende
+      const TOP_OFFSET = 4;     // décalage vertical supplémentaire pour aérer le haut
       const updateSize = () => {
         width = container.clientWidth || 800;
-        height = Math.max(260, Math.round(width/3.4));
-        svg.attr('width', width).attr('height', height);
+        svg.attr('width', width);
         gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
-        return { innerWidth: width - margin.left - margin.right, innerHeight: height - margin.top - margin.bottom };
+        return { innerWidth: width - margin.left - margin.right };
       };
 
       function renderLegend(categories, colorOf, innerWidth, legendY){
-        const legendHeight = 60;
+        const legendHeight = LEGEND_HEIGHT;
         gLegend.attr('x', 0).attr('y', legendY).attr('width', innerWidth).attr('height', legendHeight);
         const root = gLegend.selectAll('div').data([0]).join('xhtml:div');
+        root
+          .style('height', legendHeight + 'px')
+          .style('display', 'flex')
+          .style('align-items', 'center')
+          .style('justify-content', 'center');
         root.html(`<div class="items">${categories.map(c => `<div class="item"><span class="swatch" style="background:${colorOf(c)}"></span><span style="font-weight:500">${c}</span></div>`).join('')}</div>`);
       }
 
       function drawPies(rows){
-        const { innerWidth, innerHeight } = updateSize();
+        const { innerWidth } = updateSize();
 
         // Catégories (triées) + échelle de couleurs harmonisée avec banner.html
         const categories = Array.from(new Set(rows.map(r => r.eagle_cathegory || 'Unknown'))).sort();
         const color = d3.scaleOrdinal().domain(categories).range(d3.schemeTableau10);
         const colorOf = (cat) => color(cat || 'Unknown');
 
-        // Legend will be positioned after radius is known
-
         // Clear plots
         gPlots.selectAll('*').remove();
 
-        const gapX = 20;
-        const cols = 4;
-        const pieAreaWidth = innerWidth;
-        const cellWidth = (pieAreaWidth - gapX * (cols - 1)) / cols;
-        const cellHeight = innerHeight - 6; // room for captions
-        const radius = Math.max(30, Math.min(cellWidth, cellHeight) * 0.42);
-        const innerR = Math.round(radius * 0.28); // donut, trou modéré
+        // Colonnes responsives: tenter 4 colonnes si possible, sinon descendre à 3/2/1
+        const selectCols = () => {
+          const MIN_RADIUS = 80; // garantir lisibilité
+          const allowed = [4, 2, 1]; // seulement 4 / 2 / 1 colonnes
+          // 1) essayer avec contrainte de rayon minimal
+          for (const c of allowed) {
+            const cw = (innerWidth - GAP_X * (c - 1)) / c;
+            const r = Math.max(30, Math.min(cw * 0.42, 120));
+            const gw = c * (r * 2) + (c - 1) * GAP_X;
+            if (gw <= innerWidth && r >= MIN_RADIUS) {
+              return { c, r };
+            }
+          }
+          // 2) sinon, première config qui tient (même si plus petit rayon)
+          for (const c of allowed) {
+            const cw = (innerWidth - GAP_X * (c - 1)) / c;
+            const r = Math.max(30, Math.min(cw * 0.42, 120));
+            const gw = c * (r * 2) + (c - 1) * GAP_X;
+            if (gw <= innerWidth) {
+              return { c, r };
+            }
+          }
+          // 3) fallback très petit écran
+          const r1 = Math.max(30, Math.min(innerWidth * 0.42, 120));
+          return { c: 1, r: r1 };
+        };
+        const { c: cols, r: radius } = selectCols();
+        const rowsCount = Math.ceil(METRICS.length / cols);
+        const innerR = Math.round(radius * 0.28);
+        // Calculer un espacement effectif pour occuper toute la largeur disponible
+        const baseGap = GAP_X;
+        const effectiveGapX = cols > 1
+          ? Math.max(baseGap, Math.floor((innerWidth - cols * (radius * 2)) / (cols - 1)))
+          : 0;
+        // largeur réelle de la grille avec l'espacement effectif
+        const gridWidth = cols * (radius * 2) + (cols - 1) * effectiveGapX;
+        const xOffset = Math.max(0, Math.floor((innerWidth - gridWidth) / 2));
+        gPlots.attr('transform', `translate(${xOffset},${TOP_OFFSET})`);
+        const perRowHeight = Math.ceil(radius * 2 + CAPTION_GAP + 20); // donut + caption + marge
+        const plotsHeight = rowsCount * perRowHeight + (rowsCount - 1) * GAP_Y;
 
         const pie = d3.pie().sort(null).value(d => d.value).padAngle(0.02);
         const arc = d3.arc().innerRadius(innerR).outerRadius(radius).cornerRadius(3);
         const arcLabel = d3.arc().innerRadius((innerR + radius) / 2).outerRadius((innerR + radius) / 2);
 
-        // Now that radius is known, position legend just beneath donuts
-        const tempCy = innerHeight / 2;
-        const legendY = tempCy + radius + (CAPTION_GAP * 2);
+        // Positionner la légende sous les graphiques
+        const legendY = TOP_OFFSET + plotsHeight + 4;
+        // Légende centrée globalement (pleine largeur du conteneur)
+        gLegend.attr('x', 0).attr('width', innerWidth);
         renderLegend(categories, colorOf, innerWidth, legendY);
 
         const captions = new Map(METRICS.map(m => [m.key, `${m.title}`]));
@@ -146,9 +185,10 @@
           const values = categories.map(c => ({ category: c, value: totals.get(c) || 0 }));
           const totalSum = d3.sum(values, d => d.value);
 
-          const col = idx; // 0..3
-          const cx = col * (cellWidth + gapX) + cellWidth / 2;
-          const cy = innerHeight / 2;
+          const rowIdx = Math.floor(idx / cols);
+          const colIdx = idx % cols;
+          const cx = colIdx * ((radius * 2) + effectiveGapX) + radius;
+          const cy = TOP_OFFSET + rowIdx * (perRowHeight + GAP_Y) + CAPTION_GAP + radius;
 
           const gCell = gPlots.append('g').attr('transform', `translate(${cx},${cy})`);
 
@@ -187,9 +227,13 @@
           gCell.append('text')
             .attr('class','caption')
             .attr('text-anchor','middle')
-            .attr('y', -(radius + CAPTION_GAP))
+            .attr('y', -(radius + (CAPTION_GAP - 6)))
             .text(captions.get(metric.key));
         });
+
+        // Définir la hauteur totale du SVG après avoir placé les éléments
+        const totalHeight = Math.ceil(margin.top + TOP_OFFSET + plotsHeight + 4 + LEGEND_HEIGHT + margin.bottom);
+        svg.attr('height', totalHeight);
       }
 
       async function init(){