Apply Finlio cream/terracotta design system

Re-theme dashboard, suivi, plan, and flux pages plus nav from the
claude.ai/design import: warm cream/terracotta/olive palette, pill
nav/buttons/inputs, Caprasimo display font for headings. Dark mode
variant derived to hold the existing WCAG AA contrast ratios since
the import only specified light.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

resources/views/components/nav-link.blade.php

@@ -2,8 +2,8 @@
 
 @php
 $classes = ($active ?? false)
-            ? 'inline-flex items-center px-1 pt-1 border-b-2 border-brand text-sm font-medium leading-5 text-text focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition duration-150 ease-in-out'
-            : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-text-muted hover:text-text hover:border-border-strong focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition duration-150 ease-in-out';
+            ? 'inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold leading-5 text-brand bg-surface-alt focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition duration-150 ease-in-out'
+            : 'inline-flex items-center px-4 py-2 rounded-full text-sm font-medium leading-5 text-text-muted hover:bg-surface-alt hover:text-text focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition duration-150 ease-in-out';
 @endphp
 
 <a {{ $attributes->merge(['class' => $classes]) }}>

resources/views/components/primary-button.blade.php

@@ -1,3 +1,3 @@
-<button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition ease-in-out duration-150']) }}>
+<button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-5 py-2.5 bg-brand border border-transparent rounded-full font-bold text-sm text-surface hover:bg-brand-emphasis focus:bg-brand-emphasis active:bg-brand-emphasis focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition ease-in-out duration-150']) }}>
     {{ $slot }}
 </button>

resources/views/components/secondary-button.blade.php

@@ -1,3 +1,3 @@
-<button {{ $attributes->merge(['type' => 'button', 'class' => 'inline-flex items-center px-4 py-2 bg-surface border border-border-strong rounded-md font-semibold text-xs text-text-muted uppercase tracking-widest shadow-sm hover:bg-surface-alt focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface disabled:opacity-25 transition ease-in-out duration-150']) }}>
+<button {{ $attributes->merge(['type' => 'button', 'class' => 'inline-flex items-center px-5 py-2.5 bg-surface border border-border-strong rounded-full font-semibold text-sm text-text-muted hover:bg-surface-alt focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface disabled:opacity-25 transition ease-in-out duration-150']) }}>
     {{ $slot }}
 </button>

resources/views/components/text-input.blade.php

@@ -1,3 +1,3 @@
 @props(['disabled' => false])
 
-<input @disabled($disabled) {{ $attributes->merge(['class' => 'bg-surface border-border-strong text-text focus:border-brand focus:ring-brand rounded-md shadow-sm']) }}>
+<input @disabled($disabled) {{ $attributes->merge(['class' => 'bg-surface-alt border-border-strong text-text focus:border-brand focus:ring-brand rounded-full shadow-sm']) }}>

resources/views/layouts/app.blade.php

@@ -11,19 +11,23 @@
 
         <!-- Fonts -->
         <link rel="preconnect" href="https://fonts.bunny.net">
-        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
+        <link href="https://fonts.bunny.net/css?family=figtree:400,600,700,800&display=swap" rel="stylesheet" />
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link href="https://fonts.googleapis.com/css2?family=Caprasimo&display=swap" rel="stylesheet" />
 
         <!-- Scripts -->
         @vite(['resources/css/app.css', 'resources/js/app.js'])
     </head>
     <body class="font-sans antialiased bg-surface-alt text-text">
-        <div class="min-h-screen bg-surface-alt">
-            <livewire:layout.navigation />
+        <div class="min-h-screen bg-surface-alt pb-12">
+            <div class="px-4 pt-4 sm:px-6 lg:px-8">
+                <livewire:layout.navigation />
+            </div>
 
             <!-- Page Heading -->
             @if (isset($header))
-                <header class="bg-surface shadow">
-                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+                <header class="bg-surface shadow rounded-2xl max-w-7xl mx-auto mt-4">
+                    <div class="py-6 px-4 sm:px-6 lg:px-8">
                         {{ $header }}
                     </div>
                 </header>

resources/views/livewire/dashboard/index.blade.php

@@ -1,18 +1,18 @@
 <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 space-y-6">
     <div class="flex flex-wrap items-center justify-between gap-4">
-        <h1 class="text-xl font-semibold text-text">Tableau de bord</h1>
-        <div class="flex items-center gap-3">
+        <h1 class="text-3xl font-display text-text">Tableau de bord</h1>
+        <div class="flex items-center gap-2">
             <div>
-                <label for="dashboard-year" class="text-xs text-text-muted">Année</label>
-                <select id="dashboard-year" wire:model.live="year" class="block rounded-md bg-surface border-border-strong text-text text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
+                <label for="dashboard-year" class="sr-only">Année</label>
+                <select id="dashboard-year" wire:model.live="year" class="block rounded-full bg-surface border-border-strong text-text text-sm px-4 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
                     @foreach (range($year - 3, $year + 3) as $y)
                         <option value="{{ $y }}">{{ $y }}</option>
                     @endforeach
                 </select>
             </div>
             <div>
-                <label for="dashboard-period" class="text-xs text-text-muted">Période</label>
-                <select id="dashboard-period" wire:model.live="period" class="block rounded-md bg-surface border-border-strong text-text text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
+                <label for="dashboard-period" class="sr-only">Période</label>
+                <select id="dashboard-period" wire:model.live="period" class="block rounded-full bg-surface border-border-strong text-text text-sm px-4 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
                     <option value="year">Année complète</option>
                     @foreach (['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'] as $i => $label)
                         <option value="{{ $i + 1 }}">{{ $label }}</option>
@@ -22,9 +22,9 @@
         </div>
     </div>
 
-    <div class="bg-surface shadow rounded-lg p-4 max-w-xs">
-        <p class="text-xs text-text-muted">Reste à dépenser</p>
-        <p class="mt-1 text-lg font-semibold text-negative">{{ number_format($sections['depense']['totals']['reste'], 2, ',', ' ') }} €</p>
+    <div class="bg-surface shadow rounded-3xl px-6 py-5 inline-flex flex-col gap-1">
+        <p class="text-xs text-text-muted uppercase tracking-wide">Reste à dépenser</p>
+        <p class="font-display text-2xl text-negative">{{ number_format($sections['depense']['totals']['reste'], 2, ',', ' ') }} €</p>
     </div>
 
     @php
@@ -44,16 +44,16 @@
     @endphp
 
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <div class="bg-surface shadow rounded-lg overflow-hidden">
-            <div class="px-4 py-2 bg-text">
-                <h2 class="text-surface font-semibold text-sm">Analyse</h2>
+        <div class="bg-surface shadow rounded-3xl overflow-hidden">
+            <div class="px-5 pt-4 pb-1">
+                <h2 class="font-semibold text-base text-text">Analyse</h2>
             </div>
             <div class="divide-y divide-border">
                 @foreach ($types as $type)
                     @php $section = $sections[$type->value]; @endphp
-                    <div>
-                        <div class="{{ $colors[$type->value]['bg'] }} px-4 py-1.5">
-                            <h3 class="text-white text-sm font-medium">{{ $type->label() }}</h3>
+                    <div class="px-5 pb-5">
+                        <div class="{{ $colors[$type->value]['bg'] }} px-4 py-2 rounded-2xl mb-2">
+                            <h3 class="text-white text-sm font-bold">{{ $type->label() }}</h3>
                         </div>
                         <div class="overflow-x-auto">
                             <table class="min-w-full text-sm">
@@ -110,8 +110,8 @@
         <div class="space-y-6">
             @foreach ($types as $type)
                 @php $top = $chartData[$type->value]; @endphp
-                <div class="bg-surface shadow rounded-lg p-4">
-                    <h3 class="text-sm font-medium mb-2 text-text">Catégorie de <span class="{{ $type->value === 'revenu' ? 'text-positive' : ($type->value === 'depense' ? 'text-negative' : 'text-info') }}">{{ Str::lower($type->label()) }}</span> (suivis)</h3>
+                <div class="bg-surface shadow rounded-3xl p-5">
+                    <h3 class="text-sm font-semibold mb-4 text-text">Catégorie de <span class="{{ $type->value === 'revenu' ? 'text-positive' : ($type->value === 'depense' ? 'text-negative' : 'text-info') }}">{{ Str::lower($type->label()) }}</span> (suivis)</h3>
 
                     @if ($top['labels']->isEmpty())
                         <p class="text-xs text-text-muted py-8 text-center">Aucun montant suivi.</p>

resources/views/livewire/layout/navigation.blade.php

@@ -16,20 +16,23 @@ new class extends Component
     }
 }; ?>
 
-<nav x-data="{ open: false }" class="bg-surface border-b border-border">
+<nav x-data="{ open: false }" class="bg-surface rounded-full shadow-sm">
     <!-- Primary Navigation Menu -->
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="flex justify-between h-16">
-            <div class="flex">
+    <div class="px-2.5 py-2">
+        <div class="flex justify-between items-center">
+            <div class="flex items-center">
                 <!-- Logo -->
-                <div class="shrink-0 flex items-center">
-                    <a href="{{ route('dashboard') }}" wire:navigate aria-label="{{ config('app.name', 'Laravel') }} — Tableau de bord" class="rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface">
-                        <x-application-logo class="block h-9 w-auto text-text" />
+                <div class="shrink-0 flex items-center gap-2.5 mr-2">
+                    <a href="{{ route('dashboard') }}" wire:navigate aria-label="{{ config('app.name', 'Laravel') }} — Tableau de bord" class="flex items-center gap-2.5 rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface">
+                        <span class="w-9 h-9 rounded-full bg-brand flex items-center justify-center shrink-0">
+                            <x-application-logo class="block h-5 w-auto text-surface" />
+                        </span>
+                        <span class="hidden sm:inline font-display text-lg text-text">{{ config('app.name', 'SuiviCPT') }}</span>
                     </a>
                 </div>
 
                 <!-- Navigation Links -->
-                <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
+                <div class="hidden sm:flex sm:items-center sm:gap-1">
                     <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" wire:navigate>
                         {{ __('Tableau de bord') }}
                     </x-nav-link>
@@ -57,14 +60,11 @@ new class extends Component
 
                 <x-dropdown align="right" width="48">
                     <x-slot name="trigger">
-                        <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-text-muted bg-surface hover:text-text focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition ease-in-out duration-150">
+                        <button class="inline-flex items-center gap-2 pl-1 pr-3 py-1 rounded-full text-sm leading-4 font-medium text-text hover:bg-surface-alt focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition ease-in-out duration-150">
+                            <span class="w-8 h-8 rounded-full bg-positive-fill text-surface flex items-center justify-center text-xs font-bold shrink-0">{{ Str::of(auth()->user()->name)->explode(' ')->map(fn ($p) => mb_substr($p, 0, 1))->take(2)->implode('') }}</span>
                             <div x-data="{{ json_encode(['name' => auth()->user()->name]) }}" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
 
-                            <div class="ms-1">
-                                <svg class="fill-current h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-                                </svg>
-                            </div>
+                            <div class="text-text-muted text-[10px]">⌄</div>
                         </button>
                     </x-slot>
 
@@ -117,7 +117,7 @@ new class extends Component
     </div>
 
     <!-- Responsive Navigation Menu -->
-    <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
+    <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden mt-2 bg-surface rounded-3xl shadow-sm px-2">
         <div class="pt-2 pb-3 space-y-1">
             <x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" wire:navigate>
                 {{ __('Tableau de bord') }}

resources/views/livewire/plan/index.blade.php

@@ -1,10 +1,10 @@
 <div class="max-w-[1600px] mx-auto py-6 px-4 sm:px-6 space-y-6">
     <div class="flex items-center justify-between">
-        <h1 class="text-xl font-semibold text-text">Plan</h1>
-        <div class="flex items-center gap-2">
-            <button wire:click="setYear({{ $year - 1 }})" aria-label="Année précédente" class="px-2 py-1 text-sm rounded-md border border-border-strong text-text focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">&lsaquo;</button>
-            <span class="text-sm font-medium text-text-muted w-16 text-center">{{ $year }}</span>
-            <button wire:click="setYear({{ $year + 1 }})" aria-label="Année suivante" class="px-2 py-1 text-sm rounded-md border border-border-strong text-text focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">&rsaquo;</button>
+        <h1 class="text-3xl font-display text-text">Plan</h1>
+        <div class="flex items-center gap-3 bg-surface shadow rounded-full px-2 py-1.5">
+            <button wire:click="setYear({{ $year - 1 }})" aria-label="Année précédente" class="w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">&lsaquo;</button>
+            <span class="text-sm font-bold text-text w-12 text-center">{{ $year }}</span>
+            <button wire:click="setYear({{ $year + 1 }})" aria-label="Année suivante" class="w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">&rsaquo;</button>
         </div>
     </div>
 
@@ -18,9 +18,9 @@
 
     @foreach ($types as $type)
         @php $section = $sections[$type->value]; @endphp
-        <div class="bg-surface shadow rounded-lg overflow-hidden">
-            <div class="{{ $colors[$type->value]['bg'] }} px-4 py-2">
-                <h2 class="text-white font-semibold">{{ $type->label() }}</h2>
+        <div class="bg-surface shadow rounded-3xl overflow-hidden">
+            <div class="{{ $colors[$type->value]['bg'] }} px-5 py-2.5">
+                <h2 class="text-white font-bold">{{ $type->label() }}</h2>
             </div>
 
             <div class="p-2">

resources/views/livewire/sankey/index.blade.php

@@ -1,18 +1,18 @@
 <div class="max-w-5xl mx-auto py-6 px-4 sm:px-6 space-y-6">
     <div class="flex flex-wrap items-center justify-between gap-4">
-        <h1 class="text-xl font-semibold text-text">Répartition des flux</h1>
-        <div class="flex items-center gap-3">
+        <h1 class="text-3xl font-display text-text">Répartition des flux</h1>
+        <div class="flex items-center gap-2">
             <div>
-                <label for="sankey-year" class="text-xs text-text-muted">Année</label>
-                <select id="sankey-year" wire:model.live="year" class="block rounded-md bg-surface border-border-strong text-text text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
+                <label for="sankey-year" class="sr-only">Année</label>
+                <select id="sankey-year" wire:model.live="year" class="block rounded-full bg-surface border-border-strong text-text text-sm px-4 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
                     @foreach (range($year - 3, $year + 3) as $y)
                         <option value="{{ $y }}">{{ $y }}</option>
                     @endforeach
                 </select>
             </div>
             <div>
-                <label for="sankey-period" class="text-xs text-text-muted">Période</label>
-                <select id="sankey-period" wire:model.live="period" class="block rounded-md bg-surface border-border-strong text-text text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
+                <label for="sankey-period" class="sr-only">Période</label>
+                <select id="sankey-period" wire:model.live="period" class="block rounded-full bg-surface border-border-strong text-text text-sm px-4 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
                     <option value="year">Année complète</option>
                     @foreach (['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'] as $i => $label)
                         <option value="{{ $i + 1 }}">{{ $label }}</option>
@@ -22,7 +22,7 @@
         </div>
     </div>
 
-    <div class="bg-surface shadow rounded-lg p-4">
+    <div class="bg-surface shadow rounded-3xl p-6">
         @if (! $hasData)
             <p class="text-sm text-text-muted py-12 text-center">Aucun revenu suivi sur cette période.</p>
         @else

resources/views/livewire/suivi/index.blade.php

@@ -6,7 +6,7 @@
         x-on:transaction-added.window="message = 'Opération ajoutée'; toast = true; setTimeout(() => toast = false, 2000)"
         x-on:transaction-updated.window="message = 'Opération modifiée'; toast = true; setTimeout(() => toast = false, 2000)"
     >
-        <h1 id="mobile-form-top" class="text-xl font-semibold text-text">{{ $editingTransactionId ? 'Modifier l\'opération' : 'Nouvelle opération' }}</h1>
+        <h1 id="mobile-form-top" class="text-2xl font-display text-text">{{ $editingTransactionId ? 'Modifier l\'opération' : 'Nouvelle opération' }}</h1>
 
         @if ($pendingRecurrences->isNotEmpty())
             <div class="space-y-3">
@@ -186,7 +186,7 @@
                 <p class="text-sm font-medium text-text-muted mb-2">Dernières opérations</p>
                 <ul class="space-y-2">
                     @foreach ($recentTransactions as $transaction)
-                        <li class="bg-surface border border-border rounded-lg px-3 py-2 flex items-center justify-between gap-2" wire:key="recent-{{ $transaction->id }}">
+                        <li class="bg-surface border border-border rounded-2xl px-4 py-3 flex items-center justify-between gap-2" wire:key="recent-{{ $transaction->id }}">
                             <div class="min-w-0">
                                 <p class="text-sm text-text truncate">
                                     {{ $transaction->category->name }}
@@ -219,37 +219,37 @@
 
     {{-- Desktop / tablet: full table view --}}
     <div class="hidden sm:block max-w-6xl mx-auto py-6 px-4 sm:px-6 space-y-6">
-        <h1 class="text-xl font-semibold text-text">Suivi</h1>
+        <h1 class="text-3xl font-display text-text">Suivi</h1>
 
         <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
-            <div class="bg-surface shadow rounded-lg p-4">
+            <div class="bg-surface shadow rounded-2xl p-5">
                 <p class="text-xs text-text-muted">Date du jour</p>
-                <p class="mt-1 text-lg font-semibold text-text">{{ now()->translatedFormat('d M Y') }}</p>
+                <p class="mt-1 text-lg font-bold text-text">{{ now()->translatedFormat('d M Y') }}</p>
             </div>
-            <div class="bg-surface shadow rounded-lg p-4">
+            <div class="bg-surface shadow rounded-2xl p-5">
                 <p class="text-xs text-text-muted">Dernier enreg.</p>
-                <p class="mt-1 text-lg font-semibold text-brand">{{ $lastEntry?->date?->translatedFormat('d M Y') ?? '—' }}</p>
+                <p class="mt-1 text-lg font-bold text-brand">{{ $lastEntry?->date?->translatedFormat('d M Y') ?? '—' }}</p>
             </div>
-            <div class="bg-surface shadow rounded-lg p-4">
+            <div class="bg-surface shadow rounded-2xl p-5">
                 <p class="text-xs text-text-muted">Nbr enreg.</p>
-                <p class="mt-1 text-lg font-semibold text-brand">{{ $nbrTotal }}</p>
+                <p class="mt-1 text-lg font-bold text-brand">{{ $nbrTotal }}</p>
                 <p class="text-xs text-text-muted">{{ $nbrThisYear }} cette année</p>
             </div>
-            <div class="bg-surface shadow rounded-lg p-4">
+            <div class="bg-surface shadow rounded-2xl p-5">
                 <p class="text-xs text-text-muted">Affectation</p>
-                <p class="mt-1 text-lg font-semibold text-text">{{ number_format($unaffected, 2, ',', ' ') }} €</p>
+                <p class="mt-1 text-lg font-bold text-text">{{ number_format($unaffected, 2, ',', ' ') }} €</p>
                 <p class="text-xs text-text-muted">revenus restent à affecter</p>
             </div>
         </div>
 
         @if ($paidBySummary->isNotEmpty())
-            <div class="bg-surface shadow rounded-lg p-4">
+            <div class="bg-surface shadow rounded-2xl p-5">
                 <p class="text-xs text-text-muted mb-2">Dépenses ce mois-ci, par personne</p>
-                <div class="flex flex-wrap gap-4">
+                <div class="flex flex-wrap gap-8">
                     @foreach ($paidBySummary as $entry)
                         <div>
                             <p class="text-xs text-text-muted">{{ $entry['label'] }}</p>
-                            <p class="text-sm font-semibold text-negative">{{ number_format($entry['total'], 2, ',', ' ') }} €</p>
+                            <p class="text-base font-bold text-text">{{ number_format($entry['total'], 2, ',', ' ') }} €</p>
                         </div>
                     @endforeach
                 </div>
@@ -257,9 +257,9 @@
         @endif
 
         @if ($pendingRecurrences->isNotEmpty())
-            <div class="bg-surface shadow rounded-lg overflow-hidden">
-                <div class="px-4 py-2 bg-brand">
-                    <h2 class="text-white font-semibold text-sm">À confirmer ce mois-ci</h2>
+            <div class="bg-surface shadow rounded-2xl overflow-hidden">
+                <div class="px-5 py-3 bg-positive-fill">
+                    <h2 class="text-white font-bold text-sm">À confirmer ce mois-ci</h2>
                 </div>
                 <ul class="divide-y divide-border">
                     @foreach ($pendingRecurrences as $recurring)
@@ -300,8 +300,8 @@
             </div>
         @endif
 
-        <div class="bg-surface shadow rounded-lg p-4">
-            <p class="text-sm font-medium text-text-muted mb-3">{{ $editingTransactionId ? 'Modifier l\'opération' : 'Nouvelle opération' }}</p>
+        <div class="bg-surface shadow rounded-3xl p-5">
+            <p class="text-base font-semibold text-text mb-4">{{ $editingTransactionId ? 'Modifier l\'opération' : 'Nouvelle opération' }}</p>
             <form wire:submit="addTransaction" class="grid grid-cols-1 sm:grid-cols-6 gap-3 items-end">
                 <div>
                     <x-input-label for="date" value="Date" />
@@ -309,7 +309,7 @@
                 </div>
                 <div>
                     <x-input-label for="categoryId" value="Catégorie" />
-                    <select wire:model="categoryId" id="categoryId" class="block mt-1 w-full rounded-md bg-surface border-border-strong text-text text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
+                    <select wire:model="categoryId" id="categoryId" class="block mt-1 w-full rounded-full bg-surface-alt border-border-strong text-text text-sm px-4 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
                         <option value="">—</option>
                         @foreach ($categories as $category)
                             <option value="{{ $category->id }}">{{ $category->type->label() }} — {{ $category->name }}</option>
@@ -332,7 +332,7 @@
                 </div>
                 <div>
                     <x-input-label for="paidByUserId" value="Payé par" />
-                    <select wire:model="paidByUserId" id="paidByUserId" class="block mt-1 w-full rounded-md bg-surface border-border-strong text-text text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
+                    <select wire:model="paidByUserId" id="paidByUserId" class="block mt-1 w-full rounded-full bg-surface-alt border-border-strong text-text text-sm px-4 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
                         <option value="">Commun</option>
                         @foreach ($members as $member)
                             <option value="{{ $member->id }}">{{ $member->name }}</option>
@@ -359,9 +359,9 @@
             $amountPrefix = fn ($t) => $t->category->type->value === 'depense' ? '−' : '+';
         @endphp
 
-        <div class="flex items-center gap-2">
+        <div class="flex items-center justify-end gap-2">
             <label for="filterPaidBy" class="text-xs text-text-muted">Payé par</label>
-            <select wire:model.live="filterPaidBy" id="filterPaidBy" class="rounded-md bg-surface border-border-strong text-text text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
+            <select wire:model.live="filterPaidBy" id="filterPaidBy" class="rounded-full bg-surface border-border-strong text-text text-sm px-4 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
                 <option value="">Tout le monde</option>
                 <option value="common">Commun</option>
                 @foreach ($members as $member)
@@ -370,7 +370,7 @@
             </select>
         </div>
 
-        <div class="bg-surface shadow rounded-lg overflow-hidden">
+        <div class="bg-surface shadow rounded-3xl overflow-hidden">
             <div class="overflow-x-auto">
                 <table class="min-w-full text-sm">
                     <caption class="sr-only">Historique des transactions du foyer</caption>
@@ -391,7 +391,7 @@
                         @forelse ($transactions as $transaction)
                             <tr class="border-t border-border/60">
                                 <td class="px-4 py-2 whitespace-nowrap text-text">{{ $transaction->date->translatedFormat('d M Y') }}</td>
-                                <td class="px-4 py-2 text-text">{{ $transaction->category->type->label() }}</td>
+                                <td class="px-4 py-2"><span class="bg-negative-surface text-negative text-xs px-2.5 py-1 rounded-full">{{ $transaction->category->type->label() }}</span></td>
                                 <td class="px-4 py-2 text-text">{{ $transaction->category->name }}</td>
                                 <td class="px-4 py-2 text-right font-medium {{ $amountColor($transaction) }}">
                                     {{ $amountPrefix($transaction) }}{{ number_format($transaction->amount, 2, ',', ' ') }} €