diff --git a/banquise-website/app/globals.css b/banquise-website/app/globals.css
index 19331e7..5b69cd9 100644
--- a/banquise-website/app/globals.css
+++ b/banquise-website/app/globals.css
@@ -1,6 +1,23 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+/* Configuration Tailwind v4 via CSS custom properties */
+@layer base {
+  :root {
+    --font-heading: 'Dela Gothic One', sans-serif;
+    --font-body: 'Roboto', sans-serif;
+    
+    /* Couleurs personnalisées La Banquise */
+    --color-banquise-blue: 64, 180, 255; /* RGB for reuse in rgba() */
+    --color-banquise-blue-hex: #40B4FF;
+    --color-banquise-blue-dark: 31, 93, 137;
+    --color-banquise-blue-dark-hex: #1F5D89;
+    --color-banquise-blue-light: 105, 183, 226;
+    --color-banquise-blue-light-hex: #69B7E2;
+    --color-banquise-blue-lightest: 165, 240, 255;
+    --color-banquise-blue-lightest-hex: #A5F0FF;
+    --color-banquise-gray: #F6F6F6;
+  }
+}
 
 /* Variables CSS pour les polices et couleurs personnalisées */
 :root {
diff --git a/banquise-website/app/layout.tsx b/banquise-website/app/layout.tsx
index 8e5a27a..6f123f9 100644
--- a/banquise-website/app/layout.tsx
+++ b/banquise-website/app/layout.tsx
@@ -1,4 +1,4 @@
-import './globals-test.css'
+import './globals.css'
 import type { ReactNode } from 'react'
 
 export const metadata = {
diff --git a/banquise-website/app/test-tailwind/page.tsx b/banquise-website/app/test-tailwind/page.tsx
new file mode 100644
index 0000000..3eefa31
--- /dev/null
+++ b/banquise-website/app/test-tailwind/page.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+export default function TestTailwind() {
+  return (
+    <div className="min-h-screen bg-gray-100 p-8">
+      <div className="max-w-2xl mx-auto">
+        <h1 className="text-4xl font-bold text-blue-600 mb-8">Test Tailwind CSS v4</h1>
+        
+        <div className="space-y-6">
+          {/* Test des couleurs de base */}
+          <div className="bg-white p-6 rounded-lg shadow-lg">
+            <h2 className="text-2xl font-semibold mb-4">Couleurs de base</h2>
+            <div className="grid grid-cols-4 gap-4">
+              <div className="h-16 bg-red-500 rounded flex items-center justify-center text-white">Red</div>
+              <div className="h-16 bg-blue-500 rounded flex items-center justify-center text-white">Blue</div>
+              <div className="h-16 bg-green-500 rounded flex items-center justify-center text-white">Green</div>
+              <div className="h-16 bg-yellow-500 rounded flex items-center justify-center text-black">Yellow</div>
+            </div>
+          </div>
+
+          {/* Test des espacements */}
+          <div className="bg-white p-6 rounded-lg shadow-lg">
+            <h2 className="text-2xl font-semibold mb-4">Espacements</h2>
+            <div className="space-y-2">
+              <div className="p-2 bg-gray-200">p-2</div>
+              <div className="p-4 bg-gray-300">p-4</div>
+              <div className="p-6 bg-gray-400">p-6</div>
+            </div>
+          </div>
+
+          {/* Test des couleurs personnalisées */}
+          <div className="bg-white p-6 rounded-lg shadow-lg">
+            <h2 className="text-2xl font-semibold mb-4">Couleurs personnalisées Banquise</h2>
+            <div className="space-y-2">
+              <div className="text-banquise-blue p-2">Texte banquise-blue</div>
+              <div className="bg-banquise-blue text-white p-2 rounded">Background banquise-blue</div>
+              <div className="text-banquise-blue-dark p-2">Texte banquise-blue-dark</div>
+              <div className="bg-banquise-blue-dark text-white p-2 rounded">Background banquise-blue-dark</div>
+            </div>
+          </div>
+
+          {/* Test des animations */}
+          <div className="bg-white p-6 rounded-lg shadow-lg">
+            <h2 className="text-2xl font-semibold mb-4">Animations</h2>
+            <div className="space-y-4">
+              <div className="animate-pulse bg-blue-200 p-4 rounded">Pulse animation</div>
+              <div className="animate-bounce bg-green-200 p-4 rounded inline-block">Bounce animation</div>
+              <div className="animate-gentle-float bg-yellow-200 p-4 rounded inline-block">Custom gentle float</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/banquise-website/postcss.config.js b/banquise-website/postcss.config.js
index 297ae46..fb8e0e3 100644
--- a/banquise-website/postcss.config.js
+++ b/banquise-website/postcss.config.js
@@ -1,17 +1,7 @@
-module.exports = {module.exports = {module.exports = {
-
+export default {
   plugins: {
-
-    tailwindcss: {},  plugins: [  plugins: {
-
+    '@tailwindcss/postcss': {},
     autoprefixer: {},
-
-  },    'tailwindcss',    '@tailwindcss/postcss': {},
-
+  },
 }
-    'autoprefixer',    autoprefixer: {},
-
-  ],  },
-
-}};
 
diff --git a/banquise-website/tailwind.config.js b/banquise-website/tailwind.config.js
deleted file mode 100644
index acf17cd..0000000
--- a/banquise-website/tailwind.config.js
+++ /dev/null
@@ -1,134 +0,0 @@
-export default {/** @type {import('tailwindcss').Config} *//** @type {import('tailwindcss').Config} *//** @type {import('tailwindcss').Config} */
-
-  content: [
-
-    './app/**/*.{js,ts,jsx,tsx}',module.exports = {
-
-    './components/**/*.{js,ts,jsx,tsx}',
-
-    './lib/**/*.{js,ts,jsx,tsx}',  content: [module.exports = {export default {
-
-  ],
-
-}    './app/**/*.{js,ts,jsx,tsx,mdx}',
-
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',  content: [  content: [
-
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-
-    './lib/**/*.{js,ts,jsx,tsx,mdx}',    './app/**/*.{js,ts,jsx,tsx,mdx}',    './app/**/*.{ts,tsx,js,jsx}',
-
-  ],
-
-  theme: {    './pages/**/*.{js,ts,jsx,tsx,mdx}',    './components/**/*.{ts,tsx,js,jsx}',
-
-    extend: {
-
-      fontFamily: {    './components/**/*.{js,ts,jsx,tsx,mdx}',    './lib/**/*.{ts,tsx,js,jsx}',
-
-        heading: ['var(--font-heading)'],
-
-        body: ['var(--font-body)'],     './pages/**/*.{ts,tsx,js,jsx}',
-
-      },
-
-      colors: {    // Or if using `src` directory:    './src/**/*.{ts,tsx,js,jsx}',
-
-        banquise: {
-
-          blue: '#40B4FF',    './src/**/*.{js,ts,jsx,tsx,mdx}',    './public/index.html',
-
-          'blue-dark': '#1F5D89',
-
-          'blue-light': '#69B7E2',  ],  ],
-
-          'blue-lightest': '#A5F0FF',
-
-          gray: '#F6F6F6',  theme: {  theme: {
-
-        },
-
-      },    extend: {},    extend: {
-
-      keyframes: {
-
-        float: {  },      fontFamily: {
-
-          '0%, 100%': { transform: 'translateY(0)' },
-
-          '50%': { transform: 'translateY(-10px)' },  plugins: [],        heading: ['var(--font-heading)'],
-
-        },
-
-        'bubble-float-1': {}        body: ['var(--font-body)'],
-
-          '0%, 100%': { transform: 'translateY(0) translateX(0)' },      },
-
-          '33%': { transform: 'translateY(-15px) translateX(5px)' },      colors: {
-
-          '66%': { transform: 'translateY(-8px) translateX(-3px)' },        banquise: {
-
-        },          blue: '#40B4FF',
-
-        'ocean-shimmer': {          'blue-dark': '#1F5D89',
-
-          '0%, 100%': { opacity: '0.3', transform: 'scale(1)' },          'blue-light': '#69B7E2',
-
-          '50%': { opacity: '0.6', transform: 'scale(1.05)' },          'blue-lightest': '#A5F0FF',
-
-        },          gray: '#F6F6F6',
-
-        'gentle-float': {        },
-
-          '0%, 100%': { transform: 'translateY(0) rotate(0deg)' },      },
-
-          '50%': { transform: 'translateY(-15px) rotate(1deg)' },      keyframes: {
-
-        },        float: {
-
-        slideUp: {          '0%, 100%': { transform: 'translateY(0)' },
-
-          '0%': { opacity: '0', transform: 'translateY(10px)' },          '50%': { transform: 'translateY(-10px)' },
-
-          '100%': { opacity: '1', transform: 'translateY(0)' },        },
-
-        },        'bubble-float-1': {
-
-      },          '0%, 100%': { transform: 'translateY(0) translateX(0)' },
-
-      animation: {          '33%': { transform: 'translateY(-15px) translateX(5px)' },
-
-        float: 'float 3s ease-in-out infinite',          '66%': { transform: 'translateY(-8px) translateX(-3px)' },
-
-        'bubble-1': 'bubble-float-1 4s ease-in-out infinite',        },
-
-        'ocean-shimmer': 'ocean-shimmer 2s ease-in-out infinite',        'ocean-shimmer': {
-
-        'gentle-float': 'gentle-float 6s ease-in-out infinite',          '0%, 100%': { opacity: '0.3', transform: 'scale(1)' },
-
-        slideUp: 'slideUp 0.3s ease-out',          '50%': { opacity: '0.6', transform: 'scale(1.05)' },
-
-      },        },
-
-    },        'gentle-float': {
-
-  },          '0%, 100%': { transform: 'translateY(0) rotate(0deg)' },
-
-  plugins: [],          '50%': { transform: 'translateY(-15px) rotate(1deg)' },
-
-}        },
-        slideUp: {
-          '0%': { opacity: '0', transform: 'translateY(10px)' },
-          '100%': { opacity: '1', transform: 'translateY(0)' },
-        },
-      },
-      animation: {
-        float: 'float 3s ease-in-out infinite',
-        'bubble-1': 'bubble-float-1 4s ease-in-out infinite',
-        'ocean-shimmer': 'ocean-shimmer 2s ease-in-out infinite',
-        'gentle-float': 'gentle-float 6s ease-in-out infinite',
-        slideUp: 'slideUp 0.3s ease-out',
-      },
-    },
-  },
-};