feat: add global styles and reusable glassmorphism component modules

.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm run:*)"
+    ]
+  }
+}

app/admin/login/page.tsx

@@ -3,7 +3,7 @@
 import React, { useState } from 'react';
 import { GlassCard } from '@/components/GlassCard';
 import { loginAdmin } from '@/app/actions/admin';
-import { Lock } from 'lucide-react';
+import { Lock, AlertCircle, ArrowRight } from 'lucide-react';
 
 export default function AdminLoginPage() {
   const [error, setError] = useState<string | null>(null);
@@ -24,73 +24,177 @@ export default function AdminLoginPage() {
   };
 
   return (
-    <div style={{
+    <div
+      style={{
         minHeight: '100vh',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-      padding: '2rem',
+        padding: 'max(2rem, 4vw)',
-    }}>
+      }}
-      <div style={{ width: '100%', maxWidth: '380px' }}>
+    >
+      <style>{`
+        @keyframes slideUp {
+          from { opacity: 0; transform: translateY(20px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes bounce {
+          0%, 100% { transform: scale(1); }
+          50% { transform: scale(1.05); }
+        }
+        .login-container {
+          animation: slideUp 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
+        }
+        .logo-box {
+          animation: bounce 2s ease-in-out infinite;
+        }
+        .login-btn {
+          padding: 0.9rem 1.6rem;
+          background: var(--fg);
+          color: var(--bg-color);
+          border: none;
+          border-radius: 12px;
+          font-weight: 700;
+          font-size: 0.95rem;
+          cursor: pointer;
+          transition: all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+          will-change: transform, box-shadow;
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.6rem;
+        }
+        .login-btn:hover:not(:disabled) {
+          transform: translateY(-2px);
+          box-shadow: 0 16px 40px rgba(255, 255, 255, 0.2);
+        }
+        .login-btn:active:not(:disabled) {
+          transform: scale(0.98);
+        }
+        .login-btn:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+        .error-alert {
+          display: flex;
+          align-items: flex-start;
+          gap: 0.75rem;
+          padding: 0.9rem 1rem;
+          background: var(--error-bg);
+          border: 1.5px solid var(--error);
+          border-radius: 12px;
+          color: var(--error);
+          font-size: 0.85rem;
+          animation: slideUp 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+        }
+      `}</style>
 
+      <div className="login-container" style={{ width: '100%', maxWidth: '420px' }}>
         {/* Logo */}
-        <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
+        <div style={{ textAlign: 'center', marginBottom: '3rem' }}>
-          <div style={{
+          <div
-            width: '60px',
+            className="logo-box"
-            height: '60px',
+            style={{
-            borderRadius: '18px',
+              width: 'clamp(60px, 12vw, 80px)',
+              height: 'clamp(60px, 12vw, 80px)',
+              borderRadius: '20px',
               background: 'var(--card-bg)',
-            border: '1px solid var(--card-border)',
+              border: '1.5px solid var(--card-border)',
               backdropFilter: 'blur(16px)',
+              WebkitBackdropFilter: 'blur(16px)',
               display: 'inline-flex',
               alignItems: 'center',
               justifyContent: 'center',
-            marginBottom: '1rem',
+              marginBottom: '1.5rem',
               boxShadow: 'var(--card-shadow)',
-          }}>
+            }}
-            <Lock size={26} color="var(--fg)" />
+          >
+            <Lock size={32} color="var(--accent-primary)" strokeWidth={1.5} />
           </div>
-          <h1 style={{ fontSize: '1.6rem', fontWeight: 700, letterSpacing: '-0.03em', color: 'var(--fg)' }}>
+          <h1
+            style={{
+              fontSize: 'clamp(1.6rem, 4vw, 2rem)',
+              fontWeight: 800,
+              letterSpacing: '-0.03em',
+              color: 'var(--fg)',
+              marginBottom: '0.5rem',
+            }}
+          >
             Administration
           </h1>
-          <p style={{ color: 'var(--fg-secondary)', fontSize: '0.88rem', marginTop: '0.4rem' }}>
+          <p
+            style={{
+              color: 'var(--fg-secondary)',
+              fontSize: 'clamp(0.85rem, 2vw, 0.95rem)',
+              fontWeight: 500,
+              letterSpacing: '0.01em',
+            }}
+          >
             Accès restreint aux administrateurs
           </p>
         </div>
 
-        <GlassCard style={{ padding: '2rem' }}>
+        <GlassCard
-          <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.2rem' }}>
+          style={{
-            <div>
+            padding: 'clamp(1.5rem, 3vw, 2.5rem)',
-              <label style={{ display: 'block', fontSize: '0.82rem', fontWeight: 600, color: 'var(--fg-secondary)', marginBottom: '0.5rem' }}>
+          }}
+        >
+          <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+            {/* Password Input */}
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              <label
+                style={{
+                  display: 'block',
+                  fontSize: '0.8rem',
+                  fontWeight: 700,
+                  color: 'var(--fg-muted)',
+                  marginBottom: '0.6rem',
+                  letterSpacing: '0.05em',
+                  textTransform: 'uppercase',
+                }}
+              >
                 Mot de passe
               </label>
-              <input name="password" type="password" required placeholder="••••••••" style={{ background: 'var(--card-bg)', color: 'var(--fg)' }} />
+              <input
+                name="password"
+                type="password"
+                required
+                placeholder="Entrez votre mot de passe"
+                autoFocus
+                style={{
+                  fontSize: '0.95rem',
+                }}
+              />
             </div>
 
+            {/* Error Alert */}
             {error && (
-              <p style={{ color: 'var(--error)', fontSize: '0.85rem', textAlign: 'center', background: 'var(--card-hover-bg)', padding: '0.6rem', borderRadius: '8px' }}>
+              <div className="error-alert">
-                {error}
+                <AlertCircle size={18} strokeWidth={2} style={{ flexShrink: 0, marginTop: '0.1rem' }} />
-              </p>
+                <span>{error}</span>
+              </div>
             )}
 
-            <button type="submit" disabled={loading} className="btn-primary" style={{
+            {/* Submit Button */}
-              marginTop: '0.4rem',
+            <button type="submit" disabled={loading} className="login-btn" style={{ marginTop: '0.5rem' }}>
-              width: '100%',
+              {loading ? (
-              background: 'var(--fg)',
+                <>
-              color: 'var(--bg-color)',
+                  <span style={{ animation: 'pulse 1s ease-in-out infinite' }}>…</span> Connexion en cours
-              padding: '0.85rem',
+                </>
-              borderRadius: '12px',
+              ) : (
-              fontWeight: 600,
+                <>
-              fontSize: '0.95rem',
+                  Se connecter <ArrowRight size={16} strokeWidth={2} />
-              cursor: 'pointer',
+                </>
-              border: 'none',
+              )}
-              transition: 'opacity 200ms',
-              opacity: loading ? 0.6 : 1
-            }}>
-              {loading ? 'Connexion...' : 'Se connecter →'}
             </button>
           </form>
         </GlassCard>
+
+        {/* Footer hint */}
+        <p style={{ textAlign: 'center', fontSize: '0.75rem', color: 'var(--fg-dim)', marginTop: '2rem' }}>
+          Utilisez le mot de passe configuré lors de l'installation
+        </p>
       </div>
     </div>
   );

app/admin/page.tsx

@@ -22,76 +22,178 @@ export default async function AdminPage() {
   const appTitle = titleConfig?.value || 'Menu Application';
 
   return (
-    <div style={{ minHeight: '100vh', padding: '1.5rem 2rem', maxWidth: '860px', margin: '0 auto' }}>
+    <div style={{
+      minHeight: '100vh',
+      background: 'var(--bg-color)',
+      padding: 'max(1.5rem, 2vw) max(2rem, 3vw)',
+    }}>
+      <style>{`
+        @keyframes slideDown {
+          from { opacity: 0; transform: translateY(-8px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes fadeInUp {
+          from { opacity: 0; transform: translateY(12px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+        .admin-header {
+          animation: slideDown 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
+        }
+        .admin-content {
+          animation: fadeInUp 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 100ms both;
+        }
+        .header-btn {
+          background: var(--card-bg);
+          backdrop-filter: blur(16px);
+          -webkit-backdrop-filter: blur(16px);
+          border: 1.5px solid var(--card-border);
+          border-radius: 50%;
+          width: 40px;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+          will-change: transform, background, border-color;
+        }
+        .header-btn:hover {
+          background: var(--card-hover-bg);
+          border-color: var(--accent-primary);
+          transform: translateY(-2px);
+          box-shadow: 0 8px 20px rgba(0, 212, 255, 0.15);
+        }
+        .header-btn:active {
+          transform: scale(0.95);
+        }
+        .logout-btn {
+          padding: 0.6rem 1.2rem;
+          background: var(--accent-btn-bg);
+          backdrop-filter: blur(12px);
+          -webkit-backdrop-filter: blur(12px);
+          border: 1.5px solid var(--card-border);
+          border-radius: 10px;
+          color: var(--fg-secondary);
+          font-size: 0.85rem;
+          font-weight: 600;
+          display: flex;
+          align-items: center;
+          gap: '0.5rem';
+          cursor: pointer;
+          transition: all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+          will-change: transform, background, border-color;
+        }
+        .logout-btn:hover {
+          background: var(--error);
+          border-color: var(--error);
+          color: white;
+          transform: translateY(-2px);
+          box-shadow: 0 8px 20px rgba(255, 69, 58, 0.25);
+        }
+        .logout-btn:active {
+          transform: scale(0.95);
+        }
+      `}</style>
 
       {/* Header */}
-      <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2.5rem' }}>
+      <header className="admin-header" style={{
-        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+        display: 'flex',
-          <Link href="/" className="back-btn" style={{
+        justifyContent: 'space-between',
-            background: 'var(--card-bg)',
+        alignItems: 'center',
-            backdropFilter: 'blur(16px)',
+        marginBottom: '3rem',
-            border: '1px solid var(--card-border)',
+        maxWidth: '900px',
-            borderRadius: '50%',
+        margin: '0 auto 3rem',
-            width: '36px', height: '36px',
-            display: 'flex', alignItems: 'center', justifyContent: 'center',
-            transition: 'all 200ms ease'
       }}>
-            <ArrowLeft size={15} color="var(--fg-secondary)" />
+        <div style={{ display: 'flex', alignItems: 'center', gap: '1.2rem' }}>
+          <Link href="/" className="header-btn">
+            <ArrowLeft size={16} color="var(--fg-secondary)" strokeWidth={1.8} />
           </Link>
-          <style>{`
-            .back-btn:hover { background: var(--card-hover-bg) !important; border-color: var(--card-hover-border) !important; }
-            .logout-btn:hover { background: var(--card-hover-bg) !important; color: var(--fg) !important; }
-          `}</style>
           <div>
-            <h1 style={{ fontSize: '1.4rem', fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--fg)' }}>
+            <h1 style={{
+              fontSize: 'clamp(1.4rem, 3vw, 1.8rem)',
+              fontWeight: 800,
+              letterSpacing: '-0.02em',
+              color: 'var(--fg)',
+              marginBottom: '0.3rem',
+            }}>
               Administration
             </h1>
-            <p style={{ fontSize: '0.8rem', color: 'var(--fg-muted)', marginTop: '0.1rem' }}>
+            <p style={{
+              fontSize: '0.85rem',
+              color: 'var(--fg-secondary)',
+              fontWeight: 500,
+              letterSpacing: '0.01em',
+            }}>
               {buttons.length} application{buttons.length !== 1 ? 's' : ''} configurée{buttons.length !== 1 ? 's' : ''}
             </p>
           </div>
         </div>
 
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.8rem' }}>
           <ThemeToggle />
           <form action={logoutAdmin}>
-            <button type="submit" className="logout-btn" style={{
+            <button type="submit" className="logout-btn">
-              background: 'var(--accent-btn-bg)',
+              <LogOut size={14} strokeWidth={2} /> Déconnexion
-              backdropFilter: 'blur(12px)',
-              border: '1px solid var(--card-border)',
-              borderRadius: '50px',
-              padding: '0.45rem 0.9rem',
-              color: 'var(--fg-secondary)',
-              fontSize: '0.82rem',
-              fontWeight: 500,
-              display: 'flex', alignItems: 'center', gap: '0.4rem',
-              cursor: 'pointer',
-              transition: 'all 200ms ease',
-            }}>
-              <LogOut size={13} /> Déconnexion
             </button>
           </form>
         </div>
       </header>
 
+      <div className="admin-content" style={{
+        maxWidth: '900px',
+        margin: '0 auto',
+      }}>
         {/* Edit Title Form */}
         <EditTitleForm currentTitle={appTitle} />
 
         {/* Add form */}
         <AddButtonForm />
 
-      {/* Button list */}
+        {/* Button list section */}
         {buttons.length === 0 ? (
-        <div style={{ textAlign: 'center', padding: '4rem', color: 'var(--fg-muted)', fontSize: '0.95rem' }}>
+          <div style={{
-          Aucun bouton configuré.
+            textAlign: 'center',
+            padding: '3rem 2rem',
+            color: 'var(--fg-muted)',
+            fontSize: '0.95rem',
+          }}>
+            <div style={{
+              fontSize: '2.5rem',
+              marginBottom: '1rem',
+              opacity: 0.6,
+            }}>∅</div>
+            <p style={{
+              fontWeight: 600,
+              color: 'var(--fg-secondary)',
+              marginBottom: '0.5rem',
+            }}>
+              Aucune application configurée
+            </p>
+            <p style={{ fontSize: '0.9rem' }}>
+              Commencez par ajouter une application ci-dessus.
+            </p>
           </div>
         ) : (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
+          <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.75rem',
+          }}>
+            <div style={{
+              fontSize: '0.75rem',
+              fontWeight: 700,
+              color: 'var(--fg-muted)',
+              letterSpacing: '0.08em',
+              padding: '0 1.2rem 0.5rem',
+              textTransform: 'uppercase',
+            }}>
+              Applications
+            </div>
             {(buttons as any[]).map((btn) => (
               <AdminButtonRow key={btn.id} button={btn} />
             ))}
           </div>
         )}
       </div>
+    </div>
   );
 }

app/globals.css

@@ -1,52 +1,112 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 
 :root {
   --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+
+  /* Animation Easing */
+  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
   --ease-elastic: cubic-bezier(0.4, 0, 0.2, 1);
 
-  /* DARK THEME (Obsidian with subtle violet glow) */
+  /* Spacing Scale */
-  --bg-color: #050505;
+  --space-xs: 0.25rem;
-  --fg: #ffffff;
+  --space-sm: 0.5rem;
-  --fg-secondary: rgba(255, 255, 255, 0.6);
+  --space-md: 1rem;
-  --fg-muted: rgba(255, 255, 255, 0.4);
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  --space-2xl: 3rem;
 
-  --card-bg: rgba(255, 255, 255, 0.04);
+  /* DARK THEME (Premium Obsidian) */
+  --bg-color: #0a0a0a;
+  --bg-secondary: #111111;
+  --fg: #ffffff;
+  --fg-secondary: rgba(255, 255, 255, 0.65);
+  --fg-muted: rgba(255, 255, 255, 0.45);
+  --fg-dim: rgba(255, 255, 255, 0.25);
+
+  --card-bg: rgba(255, 255, 255, 0.05);
   --card-border: rgba(255, 255, 255, 0.08);
   --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
-  --card-hover-bg: rgba(255, 255, 255, 0.08);
+  --card-hover-bg: rgba(255, 255, 255, 0.1);
   --card-hover-border: rgba(255, 255, 255, 0.15);
 
   --accent-btn-bg: rgba(255, 255, 255, 0.12);
-  --accent-btn-hover: rgba(255, 255, 255, 0.2);
+  --accent-btn-hover: rgba(255, 255, 255, 0.18);
+
+  /* Accent Colors */
+  --accent-primary: #00d4ff;
+  --accent-secondary: #7c3aed;
+  --accent-tertiary: #ec4899;
 
   --error: #ff453a;
+  --error-bg: rgba(255, 69, 58, 0.1);
   --success: #32d74b;
-
+  --success-bg: rgba(50, 215, 75, 0.1);
-  --glow-1: rgba(140, 50, 255, 0.15);
+  --warning: #ff9500;
-  --glow-2: rgba(50, 140, 255, 0.15);
+  --warning-bg: rgba(255, 149, 0, 0.1);
-}
-
-[data-theme='light'] {
-  /* LIGHT THEME (Apple Pearl) */
-  --bg-color: #f5f5f7;
-  --fg: #1d1d1f;
-  --fg-secondary: rgba(29, 29, 31, 0.65);
-  --fg-muted: rgba(29, 29, 31, 0.45);
-
-  --card-bg: rgba(255, 255, 255, 0.6);
-  --card-border: rgba(0, 0, 0, 0.05);
-  --card-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
-  --card-hover-bg: rgba(255, 255, 255, 0.9);
-  --card-hover-border: rgba(0, 0, 0, 0.1);
-
-  --accent-btn-bg: rgba(0, 0, 0, 0.06);
-  --accent-btn-hover: rgba(0, 0, 0, 0.12);
-
-  --error: #ff3b30;
-  --success: #34c759;
 
   --glow-1: rgba(140, 50, 255, 0.2);
   --glow-2: rgba(50, 140, 255, 0.2);
+  --glow-3: rgba(0, 212, 255, 0.15);
+}
+
+[data-theme='light'] {
+  /* LIGHT THEME (Modern Clean) */
+  --bg-color: #fafbfc;
+  --bg-secondary: #f0f1f3;
+  --fg: #0f0f12;
+  --fg-secondary: rgba(15, 15, 18, 0.7);
+  --fg-muted: rgba(15, 15, 18, 0.5);
+  --fg-dim: rgba(15, 15, 18, 0.3);
+
+  --card-bg: rgba(255, 255, 255, 0.7);
+  --card-border: rgba(0, 0, 0, 0.06);
+  --card-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
+  --card-hover-bg: rgba(255, 255, 255, 0.95);
+  --card-hover-border: rgba(0, 0, 0, 0.12);
+
+  --accent-btn-bg: rgba(0, 0, 0, 0.07);
+  --accent-btn-hover: rgba(0, 0, 0, 0.14);
+
+  --accent-primary: #0080cc;
+  --accent-secondary: #8e44ad;
+  --accent-tertiary: #e74c8c;
+
+  --error: #ff3b30;
+  --error-bg: rgba(255, 59, 48, 0.08);
+  --success: #34c759;
+  --success-bg: rgba(52, 199, 89, 0.08);
+  --warning: #ff9500;
+  --warning-bg: rgba(255, 149, 0, 0.08);
+
+  --glow-1: rgba(140, 50, 255, 0.15);
+  --glow-2: rgba(50, 140, 255, 0.15);
+  --glow-3: rgba(0, 128, 204, 0.1);
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slideInLeft {
+  from { opacity: 0; transform: translateX(-10px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@keyframes shimmer {
+  0% { background-position: -1000px 0; }
+  100% { background-position: 1000px 0; }
 }
 
 *, *::before, *::after {
@@ -67,11 +127,11 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-x: hidden;
-  transition: background-color 300ms ease, color 300ms ease;
+  transition: background-color 400ms ease, color 400ms ease;
   position: relative;
 }
 
-/* Premium Ambient Glow Orbs */
+/* Premium Ambient Glow Orbs - Enhanced */
 body::before, body::after {
   content: '';
   position: fixed;
@@ -82,8 +142,8 @@ body::before, body::after {
   -webkit-filter: blur(180px);
   z-index: -1;
   pointer-events: none;
-  opacity: 0.85;
+  opacity: 0.6;
-  transition: background 300ms ease;
+  transition: background 400ms ease;
 }
 
 body::before {
@@ -98,43 +158,86 @@ body::after {
   background: var(--glow-2);
 }
 
-a { text-decoration: none; color: inherit; }
+a {
-button { cursor: pointer; border: none; outline: none; font-family: var(--font); }
+  text-decoration: none;
+  color: inherit;
+  transition: color 250ms var(--ease-smooth);
+}
 
-/* Scrollbar */
+button {
-::-webkit-scrollbar { width: 8px; }
+  cursor: pointer;
-::-webkit-scrollbar-track { background: transparent; }
+  border: none;
-::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 10px; }
+  outline: none;
-::-webkit-scrollbar-thumb:hover { background: var(--fg-muted); }
+  font-family: var(--font);
+  font-weight: 600;
+  transition: all 250ms var(--ease-smooth);
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Scrollbar - Refined */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--card-border);
+  border-radius: 10px;
+  transition: background 250ms ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--fg-muted);
+}
 
 /* Premium Input Styles */
 input[type="text"],
 input[type="password"],
 input[type="url"],
-input[type="email"] {
+input[type="email"],
+textarea,
+select {
   width: 100%;
-  padding: 0.85rem 1.1rem;
+  padding: 0.9rem 1.1rem;
   background: var(--card-bg);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
-  border: 1px solid var(--card-border);
+  border: 1.5px solid var(--card-border);
   border-radius: 12px;
   color: var(--fg);
   font-family: var(--font);
   font-size: 0.95rem;
   font-weight: 500;
   outline: none;
-  transition: all 250ms ease;
+  transition: all 280ms var(--ease-smooth);
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
 }
 
-input:focus {
+input:hover:not(:focus),
-  border-color: var(--fg-muted);
+textarea:hover:not(:focus),
+select:hover:not(:focus) {
+  border-color: var(--card-hover-border);
   background: var(--card-hover-bg);
-  box-shadow: 0 0 0 3px rgba(140, 50, 255, 0.15), inset 0 2px 4px rgba(0,0,0,0.02);
 }
 
-input::placeholder {
+input:focus,
+textarea:focus,
+select:focus {
+  border-color: var(--accent-primary);
+  background: var(--card-hover-bg);
+  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.02);
+}
+
+input::placeholder,
+textarea::placeholder {
   color: var(--fg-muted);
   font-weight: 400;
 }

app/page.module.css

@@ -1,142 +1 @@
-.page {
+/* Legacy styles - not in use. See globals.css and inline styles in app/page.tsx */
-  --background: #fafafa;
-  --foreground: #fff;
-
-  --text-primary: #000;
-  --text-secondary: #666;
-
-  --button-primary-hover: #383838;
-  --button-secondary-hover: #f2f2f2;
-  --button-secondary-border: #ebebeb;
-
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--font-geist-sans);
-  background-color: var(--background);
-}
-
-.main {
-  display: flex;
-  flex: 1;
-  width: 100%;
-  max-width: 800px;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: space-between;
-  background-color: var(--foreground);
-  padding: 120px 60px;
-}
-
-.intro {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  text-align: left;
-  gap: 24px;
-}
-
-.intro h1 {
-  max-width: 320px;
-  font-size: 40px;
-  font-weight: 600;
-  line-height: 48px;
-  letter-spacing: -2.4px;
-  text-wrap: balance;
-  color: var(--text-primary);
-}
-
-.intro p {
-  max-width: 440px;
-  font-size: 18px;
-  line-height: 32px;
-  text-wrap: balance;
-  color: var(--text-secondary);
-}
-
-.intro a {
-  font-weight: 500;
-  color: var(--text-primary);
-}
-
-.ctas {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  max-width: 440px;
-  gap: 16px;
-  font-size: 14px;
-}
-
-.ctas a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 40px;
-  padding: 0 16px;
-  border-radius: 128px;
-  border: 1px solid transparent;
-  transition: 0.2s;
-  cursor: pointer;
-  width: fit-content;
-  font-weight: 500;
-}
-
-a.primary {
-  background: var(--text-primary);
-  color: var(--background);
-  gap: 8px;
-}
-
-a.secondary {
-  border-color: var(--button-secondary-border);
-}
-
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  a.primary:hover {
-    background: var(--button-primary-hover);
-    border-color: transparent;
-  }
-
-  a.secondary:hover {
-    background: var(--button-secondary-hover);
-    border-color: transparent;
-  }
-}
-
-@media (max-width: 600px) {
-  .main {
-    padding: 48px 24px;
-  }
-
-  .intro {
-    gap: 16px;
-  }
-
-  .intro h1 {
-    font-size: 32px;
-    line-height: 40px;
-    letter-spacing: -1.92px;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .logo {
-    filter: invert();
-  }
-
-  .page {
-    --background: #000;
-    --foreground: #000;
-
-    --text-primary: #ededed;
-    --text-secondary: #999;
-
-    --button-primary-hover: #ccc;
-    --button-secondary-hover: #1a1a1a;
-    --button-secondary-border: #1a1a1a;
-  }
-}

app/page.tsx

@@ -21,34 +21,90 @@ export default async function Home() {
 
   return (
     <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
-
-      {/* Top controls */}
-      <header style={{
-        display: 'flex',
-        justifyContent: 'flex-end',
-        alignItems: 'center',
-        padding: '1.5rem 2rem',
-        gap: '0.6rem',
-      }}>
-        <Link href="/admin" aria-label="Administration" className="settings-btn" style={{
-          background: 'var(--card-bg)',
-          backdropFilter: 'blur(16px)',
-          WebkitBackdropFilter: 'blur(16px)',
-          border: '1px solid var(--card-border)',
-          borderRadius: '50%',
-          width: '36px', height: '36px',
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
-          transition: 'all 200ms ease'
-        }}>
-          <Settings size={15} color="var(--fg-secondary)" />
-        </Link>
       <style>{`
-          .settings-btn:hover {
+        @keyframes slideDown {
-            background: var(--card-hover-bg) !important;
+          from { opacity: 0; transform: translateY(-8px); }
-            border-color: var(--card-hover-border) !important;
+          to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes fadeInScale {
+          from { opacity: 0; transform: scale(0.98); }
+          to { opacity: 1; transform: scale(1); }
+        }
+        .header-btn {
+          background: var(--card-bg);
+          backdrop-filter: blur(16px);
+          -webkit-backdrop-filter: blur(16px);
+          border: 1.5px solid var(--card-border);
+          border-radius: 50%;
+          width: 40px;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+          will-change: transform, background, border-color;
+        }
+        .header-btn:hover {
+          background: var(--card-hover-bg);
+          border-color: var(--accent-primary);
+          transform: translateY(-2px);
+          box-shadow: 0 8px 20px rgba(0, 212, 255, 0.15);
+        }
+        .header-btn:active {
+          transform: scale(0.95);
+        }
+        .page-header {
+          animation: slideDown 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
+        }
+        .page-title {
+          animation: fadeInScale 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 100ms both;
+        }
+        .page-subtitle {
+          animation: fadeInScale 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;
+        }
+        .empty-state {
+          animation: fadeInScale 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;
+        }
+        .config-btn {
+          padding: 0.75rem 1.6rem;
+          background: var(--accent-primary);
+          border: 1.5px solid var(--accent-primary);
+          border-radius: 12px;
+          color: #000;
+          font-weight: 700;
+          font-size: 0.9rem;
+          cursor: pointer;
+          transition: all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+          will-change: transform, box-shadow;
+        }
+        .config-btn:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 12px 30px rgba(0, 212, 255, 0.3);
+          background: #00e5ff;
+        }
+        .config-btn:active {
+          transform: scale(0.98);
+        }
+        .buttons-grid {
+          animation: fadeInScale 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;
         }
       `}</style>
+
+      {/* Top controls */}
+      <header className="page-header" style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: 'max(1.5rem, 2vw) max(2rem, 4vw)',
+        gap: '0.8rem',
+      }}>
+        <div></div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.8rem' }}>
+          <Link href="/admin" aria-label="Administration" className="header-btn">
+            <Settings size={16} color="var(--fg-secondary)" strokeWidth={1.8} />
+          </Link>
           <ThemeToggle />
+        </div>
       </header>
 
       {/* Center content */}
@@ -58,56 +114,73 @@ export default async function Home() {
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
-        padding: '2rem',
+        padding: 'max(2rem, 4vw)',
-        gap: '3rem',
+        gap: '2.5rem',
       }}>
         {/* Title */}
-        <div style={{ textAlign: 'center' }}>
+        <div style={{ textAlign: 'center', maxWidth: '600px' }}>
-          <h1 style={{
+          <h1 className="page-title" style={{
-            fontSize: 'clamp(1.8rem, 4vw, 2.8rem)',
+            fontSize: 'clamp(2rem, 5vw, 3.2rem)',
             fontWeight: 800,
             letterSpacing: '-0.04em',
             color: 'var(--fg)',
+            lineHeight: 1.2,
+            marginBottom: '0.8rem',
           }}>
             {appTitle}
           </h1>
           {buttons.length > 0 && (
-            <p style={{ color: 'var(--fg-muted)', fontSize: '0.9rem', marginTop: '0.4rem', fontWeight: 500 }}>
+            <p className="page-subtitle" style={{
+              color: 'var(--fg-secondary)',
+              fontSize: 'clamp(0.85rem, 2vw, 1rem)',
+              fontWeight: 500,
+              letterSpacing: '0.01em',
+            }}>
               {buttons.length} application{buttons.length > 1 ? 's' : ''} disponible{buttons.length > 1 ? 's' : ''}
             </p>
           )}
         </div>
 
-        {/* Grid */}
+        {/* Grid or Empty State */}
         {buttons.length === 0 ? (
-          <div style={{ textAlign: 'center', color: 'var(--fg-muted)' }}>
+          <div className="empty-state" style={{
-            <div style={{ fontSize: '3rem', marginBottom: '1rem' }}>🔗</div>
+            textAlign: 'center',
-            <p style={{ fontWeight: 600, fontSize: '1.05rem', color: 'var(--fg)', marginBottom: '0.5rem' }}>
+            color: 'var(--fg-muted)',
+            padding: '2rem',
+          }}>
+            <div style={{
+              fontSize: 'clamp(2.5rem, 8vw, 4rem)',
+              marginBottom: '1.5rem',
+              opacity: 0.7,
+            }}>🔗</div>
+            <p style={{
+              fontWeight: 700,
+              fontSize: 'clamp(1rem, 2vw, 1.2rem)',
+              color: 'var(--fg)',
+              marginBottom: '0.8rem',
+            }}>
               Aucune application
             </p>
-            <p style={{ fontSize: '0.88rem', marginBottom: '1.75rem' }}>
+            <p style={{
+              fontSize: 'clamp(0.85rem, 1.5vw, 0.95rem)',
+              marginBottom: '2rem',
+              color: 'var(--fg-muted)',
+            }}>
               Ajoutez vos raccourcis depuis l'administration.
             </p>
-            <Link href="/admin" style={{
+            <Link href="/admin" className="config-btn">
-              padding: '0.65rem 1.4rem',
-              background: 'var(--card-bg)',
-              border: '1px solid var(--card-border)',
-              borderRadius: '50px',
-              color: 'var(--fg)',
-              fontWeight: 600,
-              fontSize: '0.88rem',
-              backdropFilter: 'blur(12px)',
-            }}>
               Configurer →
             </Link>
           </div>
         ) : (
-          <div style={{
+          <div className="buttons-grid" style={{
-            display: 'flex',
+            display: 'grid',
-            flexWrap: 'wrap',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
-            gap: '1.25rem',
+            gap: 'clamp(1rem, 3vw, 1.5rem)',
             justifyContent: 'center',
-            maxWidth: '960px',
+            maxWidth: '1000px',
+            width: '100%',
+            padding: '0 1rem',
           }}>
             {(buttons as any[]).map((btn) => (
               <MenuButton key={btn.id} name={btn.name} url={btn.url} icon={btn.icon} />

components/AddButtonForm.tsx

@@ -4,16 +4,18 @@ import React, { useState } from 'react';
 import { addButton } from '@/app/actions/admin';
 import { IconPicker } from '@/components/IconPicker';
 import { serializeIcon } from '@/lib/lucideIcons';
-import { PlusCircle } from 'lucide-react';
+import { PlusCircle, Check } from 'lucide-react';
 
 export function AddButtonForm() {
   const [iconName, setIconName] = useState('Globe');
   const [iconColor, setIconColor] = useState('#22d3ee');
   const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setLoading(true);
+    setSuccess(false);
     const formData = new FormData(e.currentTarget);
     formData.set('icon', serializeIcon(iconName, iconColor));
     try {
@@ -21,6 +23,8 @@ export function AddButtonForm() {
       (e.target as HTMLFormElement).reset();
       setIconName('Globe');
       setIconColor('#22d3ee');
+      setSuccess(true);
+      setTimeout(() => setSuccess(false), 2000);
     } finally {
       setLoading(false);
     }
@@ -33,29 +37,90 @@ export function AddButtonForm() {
       background: 'var(--card-bg)',
       backdropFilter: 'blur(24px)',
       WebkitBackdropFilter: 'blur(24px)',
-      border: '1px solid var(--card-border)',
+      border: '1.5px solid var(--card-border)',
       borderRadius: '20px',
-      padding: '1.75rem',
+      padding: 'clamp(1.5rem, 3vw, 2rem)',
-      marginBottom: '2rem',
+      marginBottom: 'clamp(1.5rem, 3vw, 2.5rem)',
+      transition: 'all 300ms ease',
+      animation: 'fadeInUp 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 150ms both',
     }}>
+      <style>{`
+        @keyframes fadeInUp {
+          from { opacity: 0; transform: translateY(12px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes successPulse {
+          0% { transform: scale(1); }
+          50% { transform: scale(1.05); }
+          100% { transform: scale(1); }
+        }
+        .add-btn {
+          padding: 0.8rem 1.4rem;
+          background: var(--success);
+          border: 1.5px solid var(--success);
+          color: #fff;
+          border-radius: 12px;
+          font-weight: 700;
+          font-size: 0.9rem;
+          cursor: pointer;
+          whiteSpace: nowrap;
+          flex-shrink: 0;
+          transition: all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+          will-change: transform, box-shadow;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        .add-btn:hover:not(:disabled) {
+          transform: translateY(-2px);
+          box-shadow: 0 12px 30px rgba(50, 215, 75, 0.3);
+          background: #38e55f;
+        }
+        .add-btn:active:not(:disabled) {
+          transform: scale(0.98);
+        }
+        .add-btn:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+        .add-btn.success {
+          animation: successPulse 400ms ease;
+          background: var(--success);
+        }
+      `}</style>
+
       <h2 style={{
-        fontSize: '0.78rem',
+        fontSize: 'clamp(0.75rem, 1.5vw, 0.8rem)',
-        fontWeight: 700,
+        fontWeight: 800,
         color: 'var(--fg-muted)',
-        marginBottom: '1.25rem',
+        marginBottom: 'clamp(1rem, 2vw, 1.5rem)',
-        letterSpacing: '0.08em',
+        letterSpacing: '0.09em',
         display: 'flex',
         alignItems: 'center',
-        gap: '0.5rem',
+        gap: '0.6rem',
+        textTransform: 'uppercase',
       }}>
-        <PlusCircle size={14} /> AJOUTER UNE APPLICATION
+        <PlusCircle size={14} strokeWidth={2} /> Ajouter une application
       </h2>
 
-      <form onSubmit={handleSubmit} style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', alignItems: 'flex-end' }}>
+      <form onSubmit={handleSubmit} style={{
+        display: 'grid',
+        gridTemplateColumns: 'auto 1fr 2fr auto',
+        gap: 'clamp(0.75rem, 2vw, 1rem)',
+        alignItems: 'flex-end',
+      }}>
         {/* Icon picker */}
-        <div>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
-          <label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'var(--fg-muted)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
+          <label style={{
-            ICÔNE
+            display: 'block',
+            fontSize: '0.75rem',
+            fontWeight: 700,
+            color: 'var(--fg-muted)',
+            marginBottom: '0.6rem',
+            letterSpacing: '0.06em',
+            textTransform: 'uppercase',
+          }}>
+            Icône
           </label>
           <IconPicker
             iconName={iconName}
@@ -66,46 +131,81 @@ export function AddButtonForm() {
         </div>
 
         {/* Name */}
-        <div style={{ flex: '1 1 140px' }}>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
-          <label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'var(--fg-muted)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
+          <label style={{
-            NOM
+            display: 'block',
+            fontSize: '0.75rem',
+            fontWeight: 700,
+            color: 'var(--fg-muted)',
+            marginBottom: '0.6rem',
+            letterSpacing: '0.06em',
+            textTransform: 'uppercase',
+          }}>
+            Nom
           </label>
-          <input name="name" type="text" placeholder="Ex: Slack, Notion…" required />
+          <input
+            name="name"
+            type="text"
+            placeholder="Ex: Slack, Notion, Figma…"
+            required
+            style={{ fontSize: '0.92rem' }}
+          />
         </div>
 
         {/* URL */}
-        <div style={{ flex: '2 1 240px' }}>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
-          <label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'var(--fg-muted)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
+          <label style={{
+            display: 'block',
+            fontSize: '0.75rem',
+            fontWeight: 700,
+            color: 'var(--fg-muted)',
+            marginBottom: '0.6rem',
+            letterSpacing: '0.06em',
+            textTransform: 'uppercase',
+          }}>
             URL
           </label>
-          <input name="url" type="url" placeholder="https://…" required />
+          <input
+            name="url"
+            type="url"
+            placeholder="https://app.example.com"
+            required
+            style={{ fontSize: '0.92rem' }}
+          />
         </div>
 
+        {/* Submit Button */}
         <button
-          className="add-btn"
+          className={`add-btn ${success ? 'success' : ''}`}
           type="submit"
           disabled={loading}
-          style={{
-            background: 'var(--accent-btn-hover)',
-            border: '1px solid var(--card-border)',
-            color: 'var(--fg)',
-            padding: '0.78rem 1.25rem',
-            borderRadius: '12px',
-            fontWeight: 600,
-            fontSize: '0.88rem',
-            cursor: 'pointer',
-            whiteSpace: 'nowrap',
-            flexShrink: 0,
-            transition: 'all 200ms ease',
-            opacity: loading ? 0.6 : 1,
-          }}
         >
-          {loading ? '…' : 'Ajouter →'}
+          {loading ? (
+            <span>…</span>
+          ) : success ? (
+            <>
+              <Check size={16} strokeWidth={2} /> Ajouté
+            </>
+          ) : (
+            <>
+              <PlusCircle size={16} strokeWidth={2} /> Ajouter
+            </>
+          )}
         </button>
-        <style>{`
-          .add-btn:hover { background: var(--success) !important; border-color: transparent !important; color: #fff !important; }
-        `}</style>
       </form>
+
+      {/* Responsive */}
+      <style>{`
+        @media (max-width: 768px) {
+          form {
+            grid-template-columns: auto 1fr !important;
+          }
+          .add-btn {
+            grid-column: 1 / -1;
+            justify-content: center;
+          }
+        }
+      `}</style>
     </div>
   );
 }

components/AdminButtonRow.tsx

@@ -18,6 +18,7 @@ interface AdminButtonRowProps {
 export function AdminButtonRow({ button }: AdminButtonRowProps) {
   const [isEditing, setIsEditing] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [deleteConfirm, setDeleteConfirm] = useState(false);
 
   const parsed = parseIcon(button.icon);
   const [iconName, setIconName] = useState(parsed.name);
@@ -59,35 +60,89 @@ export function AdminButtonRow({ button }: AdminButtonRowProps) {
         zIndex: 40,
         background: 'var(--card-bg)',
         backdropFilter: 'blur(20px)',
-        border: '1px solid var(--card-hover-border)',
+        WebkitBackdropFilter: 'blur(20px)',
+        border: '1.5px solid var(--accent-primary)',
         borderRadius: '16px',
-        padding: '1rem 1.25rem',
+        padding: 'clamp(1rem, 2vw, 1.25rem)',
-        display: 'flex',
+        display: 'grid',
-        flexWrap: 'wrap',
+        gridTemplateColumns: 'auto 1fr 2fr auto',
         gap: '0.8rem',
-        alignItems: 'center',
+        alignItems: 'flex-end',
-        boxShadow: '0 8px 30px rgba(0,0,0,0.1)',
+        boxShadow: '0 8px 30px rgba(0, 212, 255, 0.15)',
+        animation: 'fadeInScale 300ms cubic-bezier(0.34, 1.56, 0.64, 1)',
       }}>
-         <IconPicker iconName={iconName} color={iconColor} onIconChange={setIconName} onColorChange={setIconColor} />
+        <style>{`
+          @keyframes fadeInScale {
+            from { opacity: 0; transform: scale(0.98); }
+            to { opacity: 1; transform: scale(1); }
+          }
+          .edit-btn, .delete-edit-btn {
+            padding: 0.6rem;
+            background: var(--card-bg);
+            border: 1.5px solid var(--card-border);
+            color: var(--fg-secondary);
+            border-radius: '10px';
+            cursor: pointer;
+            transition: all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            will-change: transform, background, border-color;
+          }
+          .edit-btn:hover {
+            background: var(--card-hover-bg);
+            border-color: var(--fg-secondary);
+            color: var(--fg);
+            transform: translateY(-2px);
+          }
+          .delete-edit-btn {
+            background: var(--success);
+            border-color: var(--success);
+            color: #fff;
+          }
+          .delete-edit-btn:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 20px rgba(50, 215, 75, 0.25);
+          }
+        `}</style>
 
-         <div style={{ flex: '1 1 120px' }}>
+        <IconPicker
-            <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Nom" required style={{ padding: '0.6rem 0.8rem' }} />
+          iconName={iconName}
-         </div>
+          color={iconColor}
+          onIconChange={setIconName}
+          onColorChange={setIconColor}
+        />
 
-         <div style={{ flex: '2 1 200px' }}>
+        <input
-            <input type="url" value={url} onChange={(e) => setUrl(e.target.value)} placeholder="https://..." required style={{ padding: '0.6rem 0.8rem' }} />
+          type="text"
-         </div>
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="Nom"
+          required
+        />
 
-         <div style={{ display: 'flex', gap: '0.5rem', marginLeft: 'auto' }}>
+        <input
-            <button onClick={handleCancel} disabled={loading} style={{
+          type="url"
-              background: 'var(--card-bg)', border: '1px solid var(--card-border)', color: 'var(--fg-secondary)', borderRadius: '10px', padding: '0.5rem', transition: 'background 200ms'
+          value={url}
-            }} onMouseEnter={(e) => e.currentTarget.style.background = 'var(--card-hover-bg)'} onMouseLeave={(e) => e.currentTarget.style.background = 'var(--card-bg)'}>
+          onChange={(e) => setUrl(e.target.value)}
-              <X size={18} />
+          placeholder="https://..."
+          required
+        />
+
+        <div style={{ display: 'flex', gap: '0.5rem', justifySelf: 'end' }}>
+          <button
+            onClick={handleCancel}
+            disabled={loading}
+            className="edit-btn"
+            title="Annuler"
+          >
+            <X size={18} strokeWidth={2} />
           </button>
-            <button onClick={handleSave} disabled={loading} style={{
+          <button
-              background: 'var(--success)', border: 'none', color: '#fff', borderRadius: '10px', padding: '0.5rem', cursor: 'pointer', transition: 'opacity 200ms', opacity: loading ? 0.6 : 1
+            onClick={handleSave}
-            }}>
+            disabled={loading}
-              <Check size={18} />
+            className="delete-edit-btn"
+            style={{ opacity: loading ? 0.6 : 1 }}
+            title="Enregistrer"
+          >
+            <Check size={18} strokeWidth={2} />
           </button>
         </div>
       </div>
@@ -95,67 +150,131 @@ export function AdminButtonRow({ button }: AdminButtonRowProps) {
   }
 
   return (
-    <div style={{
+    <div
+      style={{
         background: 'var(--card-bg)',
         backdropFilter: 'blur(20px)',
-      border: '1px solid var(--card-border)',
+        WebkitBackdropFilter: 'blur(20px)',
+        border: '1.5px solid var(--card-border)',
         borderRadius: '16px',
-      padding: '0.85rem 1.2rem',
+        padding: 'clamp(0.85rem, 2vw, 1.2rem)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
-      gap: '1rem',
+        gap: 'clamp(0.8rem, 2vw, 1.2rem)',
-      transition: 'all 200ms ease',
+        transition: 'all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+        will-change: 'transform, background, border-color',
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.background = 'var(--card-hover-bg)';
+        e.currentTarget.style.borderColor = 'var(--accent-primary)';
+        e.currentTarget.style.transform = 'translateX(4px)';
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.background = 'var(--card-bg)';
+        e.currentTarget.style.borderColor = 'var(--card-border)';
+        e.currentTarget.style.transform = 'translateX(0)';
       }}
-    onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--card-hover-bg)'; e.currentTarget.style.borderColor = 'var(--card-hover-border)'; }}
-    onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--card-bg)'; e.currentTarget.style.borderColor = 'var(--card-border)'; }}
     >
-      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', minWidth: 0 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 'clamp(0.8rem, 2vw, 1rem)', minWidth: 0, flex: 1 }}>
-        <div style={{
+        <div
-          width: '42px', height: '42px',
+          style={{
+            width: '44px',
+            height: '44px',
             borderRadius: '12px',
             background: 'var(--accent-btn-bg)',
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
             flexShrink: 0,
-        }}>
+            transition: 'all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+          }}
+        >
           <IconComponent size={22} color={parsed.color} strokeWidth={1.7} />
         </div>
-        <div style={{ minWidth: 0 }}>
+        <div style={{ minWidth: 0, flex: 1 }}>
-          <div style={{ fontWeight: 600, fontSize: '0.92rem', color: 'var(--fg)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+          <div
+            style={{
+              fontWeight: 700,
+              fontSize: 'clamp(0.85rem, 2vw, 0.95rem)',
+              color: 'var(--fg)',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            }}
+          >
             {button.name}
           </div>
-          <div style={{ fontSize: '0.8rem', color: 'var(--fg-secondary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: '380px' }}>
+          <div
+            style={{
+              fontSize: 'clamp(0.75rem, 1.5vw, 0.85rem)',
+              color: 'var(--fg-secondary)',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              maxWidth: '100%',
+              marginTop: '0.2rem',
+            }}
+          >
             {button.url}
           </div>
         </div>
       </div>
 
       <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', flexShrink: 0 }}>
-        <button onClick={() => setIsEditing(true)} style={{
+        <button
+          onClick={() => setIsEditing(true)}
+          style={{
             background: 'transparent',
             color: 'var(--fg-muted)',
-          padding: '0.45rem',
+            padding: '0.5rem',
             borderRadius: '8px',
-          transition: 'all 200ms',
+            border: '1.5px solid transparent',
+            transition: 'all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+            will-change: 'color, border-color, background',
+            cursor: 'pointer',
           }}
-          onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--fg)')}
+          onMouseEnter={(e) => {
-          onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--fg-muted)')}
+            e.currentTarget.style.color = 'var(--fg)';
+            e.currentTarget.style.borderColor = 'var(--accent-primary)';
+            e.currentTarget.style.background = 'rgba(0, 212, 255, 0.1)';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = 'var(--fg-muted)';
+            e.currentTarget.style.borderColor = 'transparent';
+            e.currentTarget.style.background = 'transparent';
+          }}
+          title="Éditer"
         >
-          <Edit2 size={16} />
+          <Edit2 size={16} strokeWidth={1.8} />
         </button>
 
         <form action={async () => { await deleteButton(button.id); }}>
-          <button type="submit" style={{
+          <button
+            type="submit"
+            style={{
               background: 'transparent',
               color: 'var(--fg-muted)',
-            padding: '0.45rem',
+              padding: '0.5rem',
               borderRadius: '8px',
-            transition: 'all 200ms',
+              border: '1.5px solid transparent',
+              transition: 'all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+              will-change: 'color, border-color, background',
+              cursor: 'pointer',
             }}
-            onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--error)')}
+            onMouseEnter={(e) => {
-            onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--fg-muted)')}
+              e.currentTarget.style.color = 'var(--error)';
+              e.currentTarget.style.borderColor = 'var(--error)';
+              e.currentTarget.style.background = 'rgba(255, 69, 58, 0.1)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.color = 'var(--fg-muted)';
+              e.currentTarget.style.borderColor = 'transparent';
+              e.currentTarget.style.background = 'transparent';
+            }}
+            title="Supprimer"
           >
-            <Trash2 size={16} />
+            <Trash2 size={16} strokeWidth={1.8} />
           </button>
         </form>
       </div>

components/EditTitleForm.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 import { updateAppTitle } from '@/app/actions/admin';
-import { Type } from 'lucide-react';
+import { Type, Check } from 'lucide-react';
 
 interface EditTitleFormProps {
   currentTitle: string;
@@ -10,75 +10,138 @@ interface EditTitleFormProps {
 
 export function EditTitleForm({ currentTitle }: EditTitleFormProps) {
   const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setLoading(true);
+    setSuccess(false);
     const formData = new FormData(e.currentTarget);
     try {
       await updateAppTitle(formData);
+      setSuccess(true);
+      setTimeout(() => setSuccess(false), 2000);
     } finally {
       setLoading(false);
     }
   };
 
   return (
-    <div style={{
+    <div
+      style={{
         position: 'relative',
         zIndex: 45,
         background: 'var(--card-bg)',
         backdropFilter: 'blur(24px)',
         WebkitBackdropFilter: 'blur(24px)',
-      border: '1px solid var(--card-border)',
+        border: '1.5px solid var(--card-border)',
         borderRadius: '20px',
-      padding: '1.75rem',
+        padding: 'clamp(1.5rem, 3vw, 2rem)',
-      marginBottom: '2rem',
+        marginBottom: 'clamp(1.5rem, 3vw, 2rem)',
-    }}>
+        transition: 'all 300ms ease',
-      <h2 style={{
+        animation: 'fadeInUp 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 100ms both',
-        fontSize: '0.78rem',
-        fontWeight: 700,
-        color: 'var(--fg-muted)',
-        marginBottom: '1.25rem',
-        letterSpacing: '0.08em',
-        display: 'flex',
-        alignItems: 'center',
-        gap: '0.5rem',
-      }}>
-        <Type size={14} /> TITRE DE L'APPLICATION
-      </h2>
-
-      <form onSubmit={handleSubmit} style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', alignItems: 'flex-end' }}>
-        <div style={{ flex: '1 1 200px' }}>
-          <label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'var(--fg-muted)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
-            TITRE AFFICHÉ
-          </label>
-          <input name="title" type="text" defaultValue={currentTitle} required />
-        </div>
-
-        <button
-          className="save-title-btn"
-          type="submit"
-          disabled={loading}
-          style={{
-            background: 'var(--accent-btn-hover)',
-            border: '1px solid var(--card-border)',
-            color: 'var(--fg)',
-            padding: '0.78rem 1.25rem',
-            borderRadius: '12px',
-            fontWeight: 600,
-            fontSize: '0.88rem',
-            cursor: 'pointer',
-            whiteSpace: 'nowrap',
-            flexShrink: 0,
-            transition: 'all 200ms ease',
-            opacity: loading ? 0.6 : 1,
       }}
     >
-          {loading ? '…' : 'Enregistrer'}
-        </button>
       <style>{`
-          .save-title-btn:hover { background: var(--success) !important; border-color: transparent !important; color: #fff !important; }
+        @keyframes fadeInUp {
+          from { opacity: 0; transform: translateY(12px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes successPulse {
+          0% { transform: scale(1); }
+          50% { transform: scale(1.05); }
+          100% { transform: scale(1); }
+        }
+        .save-title-btn {
+          padding: 0.8rem 1.4rem;
+          background: var(--success);
+          border: 1.5px solid var(--success);
+          color: #fff;
+          border-radius: 12px;
+          font-weight: 700;
+          font-size: 0.9rem;
+          cursor: pointer;
+          white-space: nowrap;
+          flex-shrink: 0;
+          transition: all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+          will-change: transform, box-shadow;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        .save-title-btn:hover:not(:disabled) {
+          transform: translateY(-2px);
+          box-shadow: 0 12px 30px rgba(50, 215, 75, 0.3);
+          background: #38e55f;
+        }
+        .save-title-btn:active:not(:disabled) {
+          transform: scale(0.98);
+        }
+        .save-title-btn:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+        .save-title-btn.success {
+          animation: successPulse 400ms ease;
+          background: var(--success);
+        }
       `}</style>
+
+      <h2
+        style={{
+          fontSize: 'clamp(0.75rem, 1.5vw, 0.8rem)',
+          fontWeight: 800,
+          color: 'var(--fg-muted)',
+          marginBottom: 'clamp(1rem, 2vw, 1.25rem)',
+          letterSpacing: '0.09em',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.6rem',
+          textTransform: 'uppercase',
+        }}
+      >
+        <Type size={14} strokeWidth={2} /> Titre de l'application
+      </h2>
+
+      <form
+        onSubmit={handleSubmit}
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '1fr auto',
+          gap: 'clamp(0.75rem, 2vw, 1rem)',
+          alignItems: 'flex-end',
+        }}
+      >
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <label
+            style={{
+              display: 'block',
+              fontSize: '0.75rem',
+              fontWeight: 700,
+              color: 'var(--fg-muted)',
+              marginBottom: '0.6rem',
+              letterSpacing: '0.06em',
+              textTransform: 'uppercase',
+            }}
+          >
+            Titre affiché
+          </label>
+          <input name="title" type="text" defaultValue={currentTitle} required style={{ fontSize: '0.95rem' }} />
+        </div>
+
+        <button className={`save-title-btn ${success ? 'success' : ''}`} type="submit" disabled={loading}>
+          {loading ? (
+            <span>…</span>
+          ) : success ? (
+            <>
+              <Check size={16} strokeWidth={2} /> Enregistré
+            </>
+          ) : (
+            <>
+              <Check size={16} strokeWidth={2} /> Enregistrer
+            </>
+          )}
+        </button>
       </form>
     </div>
   );

components/GlassCard.module.css

@@ -1,21 +1,54 @@
+@keyframes cardEntry {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .card {
   background: var(--card-bg);
   backdrop-filter: blur(28px) saturate(1.8);
   -webkit-backdrop-filter: blur(28px) saturate(1.8);
-  border: 1px solid var(--card-border);
+  border: 1.5px solid var(--card-border);
   box-shadow: var(--card-shadow);
   border-radius: 20px;
-  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  animation: cardEntry 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  will-change: transform, background, border-color;
+}
+
+.card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent);
+  opacity: 0;
+  transition: opacity 300ms ease;
+  pointer-events: none;
+  border-radius: 20px;
+}
+
+.hoverable {
+  cursor: pointer;
+  position: relative;
 }
 
 .hoverable:hover {
   background: var(--card-hover-bg);
-  border-color: var(--card-hover-border);
+  border-color: var(--accent-primary);
-  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 16px 40px rgba(0, 212, 255, 0.15);
-  transform: translateY(-4px);
+  transform: translateY(-6px);
+}
+
+.hoverable:hover::before {
+  opacity: 1;
 }
 
 .hoverable:active {
   transform: translateY(-2px);
-  transition-duration: 80ms;
+  transition-duration: 100ms;
 }

components/MenuButton.module.css

@@ -1,3 +1,14 @@
+@keyframes menuButtonEntry {
+  from {
+    opacity: 0;
+    transform: translateY(20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
 .menuButton {
   display: flex;
   flex-direction: column;
@@ -13,19 +24,36 @@
   background: var(--card-bg);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
-  border: 1px solid var(--card-border);
+  border: 1.5px solid var(--card-border);
   box-shadow: var(--card-shadow);
-  border-radius: 28px; /* Apple squircle-like */
+  border-radius: 24px;
-  transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
+  transition: all 320ms cubic-bezier(0.25, 1, 0.5, 1);
   position: relative;
   overflow: hidden;
+  animation: menuButtonEntry 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  will-change: transform, background, border-color;
+}
+
+.menuButton::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
+  opacity: 0;
+  transition: opacity 300ms ease;
+  pointer-events: none;
+  border-radius: 24px;
+}
+
+.menuButton:hover::before {
+  opacity: 1;
 }
 
 .menuButton:hover {
   background: var(--card-hover-bg);
-  border-color: var(--card-hover-border);
+  border-color: var(--accent-primary);
-  transform: translateY(-4px) scale(1.02);
+  transform: translateY(-6px) scale(1.03);
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 16px 40px rgba(0, 212, 255, 0.15);
 }
 
 .menuButton:active {
@@ -35,32 +63,75 @@
 
 /* Icon Container */
 .faviconWrapper {
-  width: 54px;
+  width: 56px;
-  height: 54px;
+  height: 56px;
-  border-radius: 14px;
+  border-radius: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--accent-btn-bg);
-  box-shadow: inset 0 2px 4px rgba(255,255,255,0.05);
+  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.08);
-  transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
+  transition: all 320ms cubic-bezier(0.25, 1, 0.5, 1);
+  position: relative;
 }
 
 .menuButton:hover .faviconWrapper {
-  transform: scale(1.08);
+  transform: scale(1.12) rotate(-2deg);
   background: var(--accent-btn-hover);
+  box-shadow: 0 8px 20px rgba(0, 212, 255, 0.2);
 }
 
 /* Label */
 .label {
   font-size: 0.85rem;
-  font-weight: 600;
+  font-weight: 700;
   text-align: center;
   letter-spacing: -0.01em;
   color: var(--fg);
-  max-width: 125px;
+  max-width: 130px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
+  transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.menuButton:hover .label {
+  transform: scale(1.05);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .menuButton {
+    width: 140px;
+    height: 140px;
+    padding: 1.25rem 0.75rem;
+    gap: 0.9rem;
+  }
+
+  .faviconWrapper {
+    width: 50px;
+    height: 50px;
+  }
+
+  .label {
+    font-size: 0.8rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .menuButton {
+    width: 120px;
+    height: 120px;
+    padding: 1rem 0.5rem;
+    gap: 0.7rem;
+  }
+
+  .faviconWrapper {
+    width: 44px;
+    height: 44px;
+  }
+
+  .label {
+    font-size: 0.75rem;
+  }
 }

components/ThemeToggle.tsx

@@ -10,7 +10,7 @@ export function ThemeToggle() {
 
   React.useEffect(() => setMounted(true), []);
 
-  if (!mounted) return <div style={{ width: '38px', height: '38px' }} />;
+  if (!mounted) return <div style={{ width: '40px', height: '40px' }} />;
 
   return (
     <button
@@ -20,22 +20,39 @@ export function ThemeToggle() {
         background: 'var(--card-bg)',
         backdropFilter: 'blur(16px)',
         WebkitBackdropFilter: 'blur(16px)',
-        border: '1px solid var(--card-border)',
+        border: '1.5px solid var(--card-border)',
         borderRadius: '50%',
-        width: '38px',
+        width: '40px',
-        height: '38px',
+        height: '40px',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         cursor: 'pointer',
-        transition: 'all 260ms ease',
+        transition: 'all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+        will: 'transform, background, border-color',
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.background = 'var(--card-hover-bg)';
+        e.currentTarget.style.borderColor = 'var(--accent-primary)';
+        e.currentTarget.style.transform = 'translateY(-2px)';
+        e.currentTarget.style.boxShadow = '0 8px 20px rgba(0, 212, 255, 0.15)';
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.background = 'var(--card-bg)';
+        e.currentTarget.style.borderColor = 'var(--card-border)';
+        e.currentTarget.style.transform = 'translateY(0)';
+        e.currentTarget.style.boxShadow = 'none';
+      }}
+      onMouseDown={(e) => {
+        e.currentTarget.style.transform = 'scale(0.95)';
+      }}
+      onMouseUp={(e) => {
+        e.currentTarget.style.transform = 'translateY(-2px)';
       }}
-      onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--card-hover-bg)'; e.currentTarget.style.borderColor = 'var(--card-hover-border)'; }}
-      onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--card-bg)'; e.currentTarget.style.borderColor = 'var(--card-border)'; }}
     >
       {theme === 'dark'
-        ? <Sun size={15} color="var(--fg-secondary)" />
+        ? <Sun size={16} color="var(--accent-primary)" strokeWidth={1.8} style={{ transition: 'transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94)' }} />
-        : <Moon size={15} color="var(--fg-secondary)" />
+        : <Moon size={16} color="var(--accent-primary)" strokeWidth={1.8} style={{ transition: 'transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94)' }} />
       }
     </button>
   );