diff --git a/src/shared/components/ColorPicker.client.js b/src/shared/components/ColorPicker.client.js
index ff895ce..9f6aca4 100644
--- a/src/shared/components/ColorPicker.client.js
+++ b/src/shared/components/ColorPicker.client.js
@@ -2,9 +2,9 @@
 
 import { useState, useRef, useEffect } from 'react';
 
-const ROW1 = ['#0d9488', '#16a34a', '#0284c7', '#2563eb', '#4f46e5', '#7c3aed', '#9333ea', '#c026d3', '#db2777', '#e11d48'];
-const ROW2 = ['#0f766e', '#15803d', '#0369a1', '#1d4ed8', '#4338ca', '#6d28d9', '#7e22ce', '#a21caf', '#be185d', '#be123c'];
-const ROW3 = ['#b45309', '#c2410c', '#b91c1c', '#92400e', '#4d7c0f', '#047857', '#155e75', '#1e3a8a', '#312e81', '#581c87'];
+const ROW1 = ['#4489ed', '#2a9db0', '#43b53c', '#5e7b4e', '#f5c211', '#f7581f', '#ff2b2b', '#ff2e63', '#f540ed', '#b34ce9', '#818faf', '#c0bfbc'];
+const ROW2 = ['#2657cf', '#24687a', '#287124', '#384d2f', '#c68408', '#c0280e', '#ca0505', '#ce0245', '#b417a7', '#8021aa', '#4e5b7e', '#75746f'];
+const ROW3 = ['#233f85', '#234856', '#1e4a1d', '#263321', '#834a10', '#7b1e13', '#8d0f0f', '#93083e', '#78176c', '#5b1d72', '#373f55', '#282725'];
 const PRESET_COLORS = [...ROW1, ...ROW2, ...ROW3];
 
 const isValidHex = (hex) => /^#[0-9a-fA-F]{6}$/.test(hex);
@@ -75,9 +75,9 @@ const ColorPicker = ({
                 <p className="text-xs text-neutral-500 dark:text-neutral-400">{description}</p>
             )}
 
-            <div className="flex items-start gap-3">
+            <div className="flex flex-wrap items-start gap-3">
                 {/* Left: big custom swatch + hex input */}
-                <div className="flex flex-col gap-2 w-20 flex-shrink-0">
+                <div className="flex flex-col gap-2 w-14 flex-shrink-0">
                     <button
                         type="button"
                         title="Couleur personnalisée"