feat: add global styles and reusable glassmorphism component modules

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',
-      marginBottom: '2rem',
+      padding: 'clamp(1.5rem, 3vw, 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',
-        fontWeight: 700,
+        fontSize: 'clamp(0.75rem, 1.5vw, 0.8rem)',
+        fontWeight: 800,
         color: 'var(--fg-muted)',
-        marginBottom: '1.25rem',
-        letterSpacing: '0.08em',
+        marginBottom: 'clamp(1rem, 2vw, 1.5rem)',
+        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>
-          <label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'var(--fg-muted)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
-            ICÔNE
+        <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',
+          }}>
+            Icône
           </label>
           <IconPicker
             iconName={iconName}
@@ -66,46 +131,81 @@ export function AddButtonForm() {
         </div>
 
         {/* Name */}
-        <div style={{ flex: '1 1 140px' }}>
-          <label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'var(--fg-muted)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
-            NOM
+        <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',
+          }}>
+            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' }}>
-          <label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'var(--fg-muted)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
+        <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',
+          }}>
             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,7 +18,8 @@ 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);
   const [iconColor, setIconColor] = useState(parsed.color);
@@ -35,7 +36,7 @@ export function AdminButtonRow({ button }: AdminButtonRowProps) {
     formData.set('name', name);
     formData.set('url', url);
     formData.set('icon', serializeIcon(iconName, iconColor));
-    
+
     try {
       await updateButton(formData);
       setIsEditing(false);
@@ -59,103 +60,221 @@ 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',
-        display: 'flex',
-        flexWrap: 'wrap',
+        padding: 'clamp(1rem, 2vw, 1.25rem)',
+        display: 'grid',
+        gridTemplateColumns: 'auto 1fr 2fr auto',
         gap: '0.8rem',
-        alignItems: 'center',
-        boxShadow: '0 8px 30px rgba(0,0,0,0.1)',
+        alignItems: 'flex-end',
+        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} />
-         
-         <div style={{ flex: '1 1 120px' }}>
-            <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Nom" required style={{ padding: '0.6rem 0.8rem' }} />
-         </div>
-         
-         <div style={{ flex: '2 1 200px' }}>
-            <input type="url" value={url} onChange={(e) => setUrl(e.target.value)} placeholder="https://..." required style={{ padding: '0.6rem 0.8rem' }} />
-         </div>
+        <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={{ display: 'flex', gap: '0.5rem', marginLeft: 'auto' }}>
-            <button onClick={handleCancel} disabled={loading} style={{
-              background: 'var(--card-bg)', border: '1px solid var(--card-border)', color: 'var(--fg-secondary)', borderRadius: '10px', padding: '0.5rem', transition: 'background 200ms'
-            }} onMouseEnter={(e) => e.currentTarget.style.background = 'var(--card-hover-bg)'} onMouseLeave={(e) => e.currentTarget.style.background = 'var(--card-bg)'}>
-              <X size={18} />
-            </button>
-            <button onClick={handleSave} disabled={loading} style={{
-              background: 'var(--success)', border: 'none', color: '#fff', borderRadius: '10px', padding: '0.5rem', cursor: 'pointer', transition: 'opacity 200ms', opacity: loading ? 0.6 : 1
-            }}>
-              <Check size={18} />
-            </button>
-         </div>
+        <IconPicker
+          iconName={iconName}
+          color={iconColor}
+          onIconChange={setIconName}
+          onColorChange={setIconColor}
+        />
+
+        <input
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="Nom"
+          required
+        />
+
+        <input
+          type="url"
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+          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}
+            className="delete-edit-btn"
+            style={{ opacity: loading ? 0.6 : 1 }}
+            title="Enregistrer"
+          >
+            <Check size={18} strokeWidth={2} />
+          </button>
+        </div>
       </div>
     );
   }
 
   return (
-    <div style={{
-      background: 'var(--card-bg)',
-      backdropFilter: 'blur(20px)',
-      border: '1px solid var(--card-border)',
-      borderRadius: '16px',
-      padding: '0.85rem 1.2rem',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      gap: '1rem',
-      transition: 'all 200ms ease',
-    }}
-    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={{
+        background: 'var(--card-bg)',
+        backdropFilter: 'blur(20px)',
+        WebkitBackdropFilter: 'blur(20px)',
+        border: '1.5px solid var(--card-border)',
+        borderRadius: '16px',
+        padding: 'clamp(0.85rem, 2vw, 1.2rem)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 'clamp(0.8rem, 2vw, 1.2rem)',
+        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)';
+      }}
     >
-      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', minWidth: 0 }}>
-        <div style={{
-          width: '42px', height: '42px',
-          borderRadius: '12px',
-          background: 'var(--accent-btn-bg)',
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
-          flexShrink: 0,
-        }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 'clamp(0.8rem, 2vw, 1rem)', minWidth: 0, flex: 1 }}>
+        <div
+          style={{
+            width: '44px',
+            height: '44px',
+            borderRadius: '12px',
+            background: 'var(--accent-btn-bg)',
+            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={{ fontWeight: 600, fontSize: '0.92rem', color: 'var(--fg)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+        <div style={{ minWidth: 0, flex: 1 }}>
+          <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={{
-          background: 'transparent',
-          color: 'var(--fg-muted)',
-          padding: '0.45rem',
-          borderRadius: '8px',
-          transition: 'all 200ms',
-        }}
-          onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--fg)')}
-          onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--fg-muted)')}
-        >
-          <Edit2 size={16} />
-        </button>
-        
-        <form action={async () => { await deleteButton(button.id); }}>
-          <button type="submit" 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(--error)')}
-            onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--fg-muted)')}
+          onMouseEnter={(e) => {
+            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} strokeWidth={1.8} />
+        </button>
+
+        <form action={async () => { await deleteButton(button.id); }}>
+          <button
+            type="submit"
+            style={{
+              background: 'transparent',
+              color: 'var(--fg-muted)',
+              padding: '0.5rem',
+              borderRadius: '8px',
+              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)';
+              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={{
-      position: 'relative',
-      zIndex: 45,
-      background: 'var(--card-bg)',
-      backdropFilter: 'blur(24px)',
-      WebkitBackdropFilter: 'blur(24px)',
-      border: '1px solid var(--card-border)',
-      borderRadius: '20px',
-      padding: '1.75rem',
-      marginBottom: '2rem',
-    }}>
-      <h2 style={{
-        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
+    <div
+      style={{
+        position: 'relative',
+        zIndex: 45,
+        background: 'var(--card-bg)',
+        backdropFilter: 'blur(24px)',
+        WebkitBackdropFilter: 'blur(24px)',
+        border: '1.5px solid var(--card-border)',
+        borderRadius: '20px',
+        padding: 'clamp(1.5rem, 3vw, 2rem)',
+        marginBottom: 'clamp(1.5rem, 3vw, 2rem)',
+        transition: 'all 300ms ease',
+        animation: 'fadeInUp 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 100ms 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); }
+        }
+        .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: '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É
+      <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 />
+          <input name="title" type="text" defaultValue={currentTitle} required style={{ fontSize: '0.95rem' }} />
         </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 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>
-        <style>{`
-          .save-title-btn:hover { background: var(--success) !important; border-color: transparent !important; color: #fff !important; }
-        `}</style>
       </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);
-  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
-  transform: translateY(-4px);
+  border-color: var(--accent-primary);
+  box-shadow: 0 16px 40px rgba(0, 212, 255, 0.15);
+  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 */
-  transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
+  border-radius: 24px;
+  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);
-  transform: translateY(-4px) scale(1.02);
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
+  border-color: var(--accent-primary);
+  transform: translateY(-6px) scale(1.03);
+  box-shadow: 0 16px 40px rgba(0, 212, 255, 0.15);
 }
 
 .menuButton:active {
@@ -35,32 +63,75 @@
 
 /* Icon Container */
 .faviconWrapper {
-  width: 54px;
-  height: 54px;
-  border-radius: 14px;
+  width: 56px;
+  height: 56px;
+  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);
-  transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
+  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.08);
+  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',
-        height: '38px',
+        width: '40px',
+        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)" />
-        : <Moon 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={16} color="var(--accent-primary)" strokeWidth={1.8} style={{ transition: 'transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94)' }} />
       }
     </button>
   );