refactor(system): extract system_page sub-widgets into separate files (<150 lines)

Move SystemHeader, SectionTitle, StatsGrid/StatItem and PalettePicker into
widgets/system/. system_page.dart 260 -> 80 lines.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

lib/presentation/widgets/system/palette_picker.dart

@@ -0,0 +1,72 @@
+import 'package:flutter/material.dart';
+import '../../providers/theme_provider.dart';
+
+/// Sélecteur de palette de couleurs de l'application.
+class PalettePicker extends StatelessWidget {
+  final int selectedIndex;
+  final void Function(int) onSelect;
+  const PalettePicker({super.key, required this.selectedIndex, required this.onSelect});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: List.generate(appPalettes.length, (i) {
+        final p = appPalettes[i];
+        final isSelected = i == selectedIndex;
+        return GestureDetector(
+          onTap: () => onSelect(i),
+          child: AnimatedContainer(
+            duration: const Duration(milliseconds: 200),
+            margin: const EdgeInsets.only(bottom: 10),
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+            decoration: BoxDecoration(
+              color: isSelected ? p.primary : Colors.white,
+              borderRadius: BorderRadius.circular(12),
+              border: Border.all(
+                color: isSelected ? p.primary : Colors.grey.shade300,
+                width: isSelected ? 3 : 1.5,
+              ),
+              boxShadow: isSelected
+                  ? [BoxShadow(color: p.primary.withAlpha(80), blurRadius: 8, offset: const Offset(0, 3))]
+                  : [],
+            ),
+            child: Row(
+              children: [
+                Container(
+                  width: 32,
+                  height: 32,
+                  decoration: BoxDecoration(
+                    color: p.primary,
+                    shape: BoxShape.circle,
+                    border: Border.all(color: Colors.white, width: 2),
+                  ),
+                ),
+                const SizedBox(width: 8),
+                Container(
+                  width: 20,
+                  height: 20,
+                  decoration: BoxDecoration(
+                    color: p.surface,
+                    shape: BoxShape.circle,
+                    border: Border.all(color: Colors.white, width: 1.5),
+                  ),
+                ),
+                const SizedBox(width: 16),
+                Text(
+                  p.name,
+                  style: TextStyle(
+                    fontSize: 16,
+                    fontWeight: FontWeight.w600,
+                    color: isSelected ? Colors.white : Colors.black87,
+                  ),
+                ),
+                const Spacer(),
+                if (isSelected) const Icon(Icons.check_circle, color: Colors.white, size: 22),
+              ],
+            ),
+          ),
+        );
+      }),
+    );
+  }
+}

lib/presentation/widgets/system/section_title.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+
+/// Titre de section avec une barre verticale colorée à gauche.
+class SectionTitle extends StatelessWidget {
+  final String text;
+  final Color color;
+  const SectionTitle({super.key, required this.text, required this.color});
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        Container(width: 4, height: 20, color: color),
+        const SizedBox(width: 8),
+        Text(
+          text,
+          style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: color, letterSpacing: 2),
+        ),
+      ],
+    );
+  }
+}

lib/presentation/widgets/system/system_header.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+
+/// En-tête de la page Système.
+class SystemHeader extends StatelessWidget {
+  final Color primaryColor;
+  const SystemHeader({super.key, required this.primaryColor});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.infinity,
+      padding: const EdgeInsets.symmetric(vertical: 16),
+      decoration: BoxDecoration(
+        color: primaryColor,
+        border: Border(bottom: BorderSide(color: primaryColor.withAlpha(180), width: 3)),
+      ),
+      child: const Text(
+        'SYSTÈME',
+        textAlign: TextAlign.center,
+        style: TextStyle(color: Colors.white, fontSize: 28, fontWeight: FontWeight.bold, letterSpacing: 4),
+      ),
+    );
+  }
+}

lib/presentation/widgets/system/system_stats.dart

@@ -0,0 +1,63 @@
+import 'package:flutter/material.dart';
+
+/// Donnée d'une statistique affichée dans la grille.
+class StatItem {
+  final String label;
+  final String value;
+  final IconData icon;
+  const StatItem({required this.label, required this.value, required this.icon});
+}
+
+/// Grille 2 colonnes de cartes de statistiques.
+class StatsGrid extends StatelessWidget {
+  final Color primaryColor;
+  final List<StatItem> items;
+  const StatsGrid({super.key, required this.primaryColor, required this.items});
+
+  @override
+  Widget build(BuildContext context) {
+    return GridView.count(
+      crossAxisCount: 2,
+      shrinkWrap: true,
+      physics: const NeverScrollableScrollPhysics(),
+      crossAxisSpacing: 12,
+      mainAxisSpacing: 12,
+      childAspectRatio: 1.4,
+      children: items.map((item) => _StatCard(item: item, color: primaryColor)).toList(),
+    );
+  }
+}
+
+class _StatCard extends StatelessWidget {
+  final StatItem item;
+  final Color color;
+  const _StatCard({required this.item, required this.color});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(12),
+        border: Border.all(color: color.withAlpha(80), width: 2),
+        boxShadow: [
+          BoxShadow(color: Colors.black.withAlpha(25), blurRadius: 4, offset: const Offset(0, 2)),
+        ],
+      ),
+      padding: const EdgeInsets.all(12),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Icon(item.icon, color: color, size: 28),
+          const SizedBox(height: 6),
+          Text(item.value, style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: color)),
+          Text(
+            item.label,
+            textAlign: TextAlign.center,
+            style: const TextStyle(fontSize: 12, color: Colors.black54),
+          ),
+        ],
+      ),
+    );
+  }
+}