Merge branch 'feature/166-tdb-parent-coquille-bandeau' into develop (#166)

frontend/lib/screens/home/parent_screen/ParentDashboardScreen.dart

@@ -1,41 +1,26 @@
 import 'package:flutter/material.dart';
-import 'package:p_tits_pas/controllers/parent_dashboard_controller.dart';
 import 'package:p_tits_pas/models/user.dart';
 import 'package:p_tits_pas/services/auth_service.dart';
-import 'package:p_tits_pas/services/dashboardService.dart';
+import 'package:p_tits_pas/widgets/quotidien/quotidien_shell.dart';
-import 'package:p_tits_pas/widgets/app_footer.dart';
+import 'package:p_tits_pas/widgets/quotidien/quotidien_theme.dart';
-import 'package:p_tits_pas/widgets/dashbord_parent/children_sidebar.dart';
-import 'package:p_tits_pas/widgets/dashbord_parent/wid_dashbord.dart';
-import 'package:p_tits_pas/widgets/dashboard/dashboard_bandeau.dart';
-import 'package:p_tits_pas/widgets/main_content_area.dart';
-import 'package:p_tits_pas/widgets/messaging_sidebar.dart';
-import 'package:provider/provider.dart';
 
+/// Tableau de bord parent — coquille 3 colonnes quotidien (#166).
+/// Métier cartes / blog / messagerie : tickets C/D/E.
 class ParentDashboardScreen extends StatefulWidget {
-  const ParentDashboardScreen({Key? key}) : super(key: key);
+  const ParentDashboardScreen({super.key});
 
   @override
   State<ParentDashboardScreen> createState() => _ParentDashboardScreenState();
 }
 
 class _ParentDashboardScreenState extends State<ParentDashboardScreen> {
-  int selectedIndex = 0;
+  QuotidienNavSection _section = QuotidienNavSection.liaison;
   AppUser? _user;
 
-  void onTabChange(int index) {
-    setState(() {
-      selectedIndex = index;
-    });
-  }
-
   @override
   void initState() {
     super.initState();
     _loadUser();
-    // Initialiser les données du dashboard
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      context.read<ParentDashboardController>().initDashboard();
-    });
   }
 
   Future<void> _loadUser() async {
@@ -43,221 +28,55 @@ class _ParentDashboardScreenState extends State<ParentDashboardScreen> {
     if (mounted) setState(() => _user = user);
   }
 
-  Widget _getBody() {
+  String get _displayName {
-    switch (selectedIndex) {
+    final n = _user?.fullName.trim() ?? '';
-      case 0:
+    if (n.isNotEmpty) return n;
-        return Dashbord_body();
+    final email = _user?.email.trim() ?? '';
-      case 1:
+    if (email.isNotEmpty) return email.split('@').first;
-        return const Center(child: Text("🔍 Trouver une nounou"));
+    return 'Parent';
-      case 2:
+  }
-        return const Center(child: Text("⚙️ Paramètres"));
+
-      default:
+  void _soon(String label) {
-        return const Center(child: Text("Page non trouvée"));
+    ScaffoldMessenger.of(context).showSnackBar(
-    }
+      SnackBar(content: Text('$label — à venir')),
+    );
   }
 
   @override
   Widget build(BuildContext context) {
-    return ChangeNotifierProvider(
+    return QuotidienShell(
-      create: (context) => ParentDashboardController(DashboardService())..initDashboard(),
+      selectedSection: _section,
-      child: Scaffold(
+      onSectionSelected: (s) => setState(() => _section = s),
-        appBar: PreferredSize(
+      userDisplayName: _displayName,
-          preferredSize: const Size.fromHeight(60.0),
+      userEmail: _user?.email,
-          child: DashboardBandeau(
+      onProfileTap: () => _soon('Profil'),
-            tabItems: const [
+      onSearchAmTap: () => _soon('Recherche AM'),
-              DashboardTabItem(label: 'Mon tableau de bord'),
+      onSettingsTap: () => _soon('Paramètres'),
-              DashboardTabItem(label: 'Trouver une nounou'),
+      leftColumn: const QuotidienColumnPlaceholder(
-              DashboardTabItem(label: 'Paramètres'),
+        title: 'Cartes',
-            ],
+        subtitle:
-            selectedTabIndex: selectedIndex,
+            'Couple enfant–nounou et flux de cartes\n(à brancher — tickets #167 / #173).',
-            onTabSelected: onTabChange,
+        icon: Icons.style_outlined,
-            userDisplayName: _user?.fullName.isNotEmpty == true
-                ? _user!.fullName
-                : 'Parent',
-            userEmail: _user?.email,
-            userRole: _user?.role,
-            onProfileTap: () {
-              ScaffoldMessenger.of(context).showSnackBar(
-                const SnackBar(
-                    content: Text('Modification du profil – à venir')),
-              );
-            },
-            onSettingsTap: () {
-              ScaffoldMessenger.of(context).showSnackBar(
-                const SnackBar(content: Text('Paramètres – à venir')),
-              );
-            },
-            onLogout: () {},
-            showLogoutConfirmation: true,
-          ),
-        ),
-      body: Column(
-        children: [
-          Expanded(child: _getBody()),
-          const AppFooter(),
-        ],
       ),
-    ),
+      centerColumn: const QuotidienColumnPlaceholder(
-    );
+        title: 'Blog',
-  }
+        subtitle:
-
+            'Fil du quotidien (affichage par défaut)\n(à brancher — ticket #178).',
-  Widget _buildResponsiveBody(BuildContext context, ParentDashboardController controller) {
+        icon: Icons.auto_stories_outlined,
-    return LayoutBuilder(
+      ),
-      builder: (context, constraints) {
+      rightColumn: const QuotidienColumnPlaceholder(
-        if (constraints.maxWidth < 768) {
+        title: 'Messagerie',
-          // Layout mobile : colonnes empilées
+        subtitle:
-          return _buildMobileLayout(controller);
+            'Mess. AM · Mess. RPE\n(à brancher — ticket #184).',
-        } else if (constraints.maxWidth < 1024) {
+        icon: Icons.chat_bubble_outline,
-          // Layout tablette : 2 colonnes
+      ),
-          return _buildTabletLayout(controller);
+      agendaBody: const QuotidienStubPage(
-        } else {
+        title: 'Agenda',
-          // Layout desktop : 3 colonnes
+        message: 'Agenda — contenu à venir (stub #187).',
-          return _buildDesktopLayout(controller);
+      ),
-        }
+      contratBody: const QuotidienStubPage(
-      },
+        title: 'Contrat',
-    );
+        message: 'Contrat — contenu à venir (stub #187).',
-  }
-
-  Widget _buildDesktopLayout(ParentDashboardController controller) {
-    return Row(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        // Sidebar gauche - Enfants
-        SizedBox(
-          width: 280,
-          child: ChildrenSidebar(
-            children: controller.children,
-            selectedChildId: controller.selectedChildId,
-            onChildSelected: controller.selectChild,
-            onAddChild: controller.showAddChildModal,
-          ),
-        ),
-        
-        // Contenu central
-        Expanded(
-          flex: 2,
-          child: MainContentArea(
-            selectedChild: controller.selectedChild,
-            selectedAssistant: controller.selectedAssistant,
-            events: controller.upcomingEvents,
-            contracts: controller.contracts,
-          ),
-        ),
-        
-        // Sidebar droite - Messagerie
-        SizedBox(
-          width: 320,
-          child: MessagingSidebar(
-            conversations: controller.conversations,
-            notifications: controller.notifications,
-          ),
-        ),
-      ],
-    );
-  }
-
-  Widget _buildTabletLayout(ParentDashboardController controller) {
-    return Row(
-      children: [
-        // Sidebar enfants plus étroite
-        SizedBox(
-          width: 240,
-          child: ChildrenSidebar(
-            children: controller.children,
-            selectedChildId: controller.selectedChildId,
-            onChildSelected: controller.selectChild,
-            onAddChild: controller.showAddChildModal,
-            isCompact: true,
-          ),
-        ),
-        
-        // Contenu principal avec messagerie intégrée
-        Expanded(
-          child: Column(
-            children: [
-              Expanded(
-                flex: 2,
-                child: MainContentArea(
-                  selectedChild: controller.selectedChild,
-                  selectedAssistant: controller.selectedAssistant,
-                  events: controller.upcomingEvents,
-                  contracts: controller.contracts,
-                ),
-              ),
-              SizedBox(
-                height: 200,
-                child: MessagingSidebar(
-                  conversations: controller.conversations,
-                  notifications: controller.notifications,
-                  isCompact: true,
-                ),
-              ),
-            ],
-          ),
-        ),
-      ],
-    );
-  }
-
-  Widget _buildMobileLayout(ParentDashboardController controller) {
-    return DefaultTabController(
-      length: 4,
-      child: Column(
-        children: [
-          // Navigation par onglets sur mobile
-          Container(
-            color: Theme.of(context).primaryColor.withOpacity(0.1),
-            child: const TabBar(
-              isScrollable: true,
-              tabs: [
-                Tab(text: 'Enfants', icon: Icon(Icons.child_care)),
-                Tab(text: 'Planning', icon: Icon(Icons.calendar_month)),
-                Tab(text: 'Contrats', icon: Icon(Icons.description)),
-                Tab(text: 'Messages', icon: Icon(Icons.message)),
-              ],
-            ),
-          ),
-          
-          Expanded(
-            child: TabBarView(
-              children: [
-                // Onglet Enfants
-                ChildrenSidebar(
-                  children: controller.children,
-                  selectedChildId: controller.selectedChildId,
-                  onChildSelected: controller.selectChild,
-                  onAddChild: controller.showAddChildModal,
-                  isMobile: true,
-                ),
-                
-                // Onglet Planning
-                MainContentArea(
-                  selectedChild: controller.selectedChild,
-                  selectedAssistant: controller.selectedAssistant,
-                  events: controller.upcomingEvents,
-                  contracts: controller.contracts,
-                  showOnlyCalendar: true,
-                ),
-                
-                // Onglet Contrats
-                MainContentArea(
-                  selectedChild: controller.selectedChild,
-                  selectedAssistant: controller.selectedAssistant,
-                  events: controller.upcomingEvents,
-                  contracts: controller.contracts,
-                  showOnlyContracts: true,
-                ),
-                
-                // Onglet Messages
-                MessagingSidebar(
-                  conversations: controller.conversations,
-                  notifications: controller.notifications,
-                  isMobile: true,
-                ),
-              ],
-            ),
-          ),
-        ],
       ),
     );
   }

frontend/lib/widgets/app_footer.dart

@@ -5,7 +5,11 @@ import 'package:p_tits_pas/models/m_dashbord/child_model.dart';
 import 'package:p_tits_pas/services/bug_report_service.dart';
 
 class AppFooter extends StatelessWidget {
-  const AppFooter({Key? key}) : super(key: key);
+  /// Ligne grise droite au-dessus du footer. À désactiver quand l'écran
+  /// fournit déjà son propre séparateur (ex. trait crayon du quotidien).
+  final bool showTopBorder;
+
+  const AppFooter({Key? key, this.showTopBorder = true}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -13,9 +17,9 @@ class AppFooter extends StatelessWidget {
       padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
       decoration: BoxDecoration(
         // color: Colors.white,
-        border: Border(
+        border: showTopBorder
-          top: BorderSide(color: Colors.grey.shade300),
+            ? Border(top: BorderSide(color: Colors.grey.shade300))
-        ),
+            : null,
       ),
       child: LayoutBuilder(
         builder: (context, constraints) {

frontend/lib/widgets/dashbord_parent/ChildrenSidebarwidget.dart

@@ -1,58 +0,0 @@
-import 'package:flutter/material.dart';
-
-class Childrensidebarwidget extends StatelessWidget{
-  final void Function(String childId) onChildSelected;
-
-  const Childrensidebarwidget({
-    Key? key,
-    required this.onChildSelected,
-  }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    final children = [
-      {'id': '1', 'name': 'Léna', 'photo': null, 'status': 'Actif'},
-      {'id': '2', 'name': 'Noé', 'photo': null, 'status': 'Inactif'},
-    ];
-
-    return Container(
-      color: const Color(0xFFF7F7F7),
-      padding: const EdgeInsets.all(16),
-      child: Column(
-        children: [
-          // Avatar parent + bouton
-          Row(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            children: [
-              const CircleAvatar(radius: 24, child: Icon(Icons.person)),
-              IconButton(
-                icon: const Icon(Icons.add),
-                onPressed: () {
-                  // Naviguer vers ajout d'enfant
-                },
-              )
-            ],
-          ),
-          const SizedBox(height: 16),
-          const Text("Mes enfants", style: TextStyle(fontWeight: FontWeight.bold)),
-
-          const SizedBox(height: 16),
-          // Liste des enfants
-          ...children.map((child) {
-            return GestureDetector(
-              onTap: () => onChildSelected(child['id']!),
-              child: Card(
-                color: child['status'] == 'Actif' ? Colors.teal.shade50 : Colors.white,
-                child: ListTile(
-                  leading: const CircleAvatar(child: Icon(Icons.child_care)),
-                  title: Text(child['name']!),
-                  subtitle: Text(child['status']!),
-                ),
-              ),
-            );
-          }).toList()
-        ],
-      ),
-    );
-  }
-}

frontend/lib/widgets/dashbord_parent/app_layout.dart

@@ -1,28 +0,0 @@
-import 'package:flutter/material.dart';
-
-class AppLayout extends StatelessWidget {
-  final PreferredSizeWidget appBar;
-  final Widget body;
-  final Widget? footer;
-
-  const AppLayout({
-    Key? key,
-    required this.appBar,
-    required this.body,
-    this.footer,
-  }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      backgroundColor: const Color(0xFFF5F7FA),
-      appBar: appBar,
-      body: Column(
-        children: [
-          Expanded(child: body),
-          if (footer != null) footer!,
-        ],
-      ),
-    );
-  }
-}

frontend/lib/widgets/dashbord_parent/children_sidebar.dart

@@ -1,203 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:p_tits_pas/models/m_dashbord/child_model.dart';
-
-class ChildrenSidebar extends StatelessWidget {
-  final List<ChildModel> children;
-  final String? selectedChildId;
-  final Function(String) onChildSelected;
-  final VoidCallback onAddChild;
-  final bool isCompact;
-  final bool isMobile;
-
-  const ChildrenSidebar({
-    Key? key,
-    required this.children,
-    this.selectedChildId,
-    required this.onChildSelected,
-    required this.onAddChild,
-    this.isCompact = false,
-    this.isMobile = false,
-  }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      padding: EdgeInsets.all(isMobile ? 16 : 24),
-      color: Colors.white,
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          _buildHeader(context),
-          const SizedBox(height: 20),
-          _buildAddChildButton(context),
-          const SizedBox(height: 16),
-          Expanded(child: _buildChildrenList()),
-        ],
-      ),
-    );
-  }
-
-  Widget _buildHeader(BuildContext context) {
-    return Row(
-      children: [
-        // UserAvatar(
-        //   size: isCompact ? 40 : 60,
-        //   name: 'Emma Dupont', // TODO: Récupérer depuis le contexte utilisateur
-        // ),
-        if (!isCompact) ...[
-          const SizedBox(width: 12),
-          Expanded(
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: const [
-                Text(
-                  'Emma Dupont',
-                  style: TextStyle(
-                    fontSize: 16,
-                    fontWeight: FontWeight.w600,
-                  ),
-                ),
-                Icon(Icons.keyboard_arrow_down),
-              ],
-            ),
-          ),
-        ],
-      ],
-    );
-  }
-
-  Widget _buildAddChildButton(BuildContext context) {
-    return SizedBox(
-      width: double.infinity,
-      child: OutlinedButton.icon(
-        onPressed: onAddChild,
-        icon: const Icon(Icons.add),
-        label: Text(isCompact ? 'Ajouter' : 'Ajouter un enfant'),
-        style: OutlinedButton.styleFrom(
-          padding: EdgeInsets.symmetric(
-            horizontal: 16,
-            vertical: isCompact ? 8 : 12,
-          ),
-          shape: RoundedRectangleBorder(
-            borderRadius: BorderRadius.circular(8),
-          ),
-        ),
-      ),
-    );
-  }
-
-  Widget _buildChildrenList() {
-    if (children.isEmpty) {
-      return const Center(
-        child: Text(
-          'Aucun enfant ajouté',
-          style: TextStyle(
-            color: Colors.grey,
-            fontSize: 14,
-          ),
-        ),
-      );
-    }
-
-    return ListView.separated(
-      itemCount: children.length,
-      separatorBuilder: (context, index) => const SizedBox(height: 12),
-      itemBuilder: (context, index) {
-        final child = children[index];
-        final isSelected = child.id == selectedChildId;
-        
-        return _buildChildCard(context, child, isSelected);
-      },
-    );
-  }
-
-  Widget _buildChildCard(BuildContext context, ChildModel child, bool isSelected) {
-    return InkWell(
-      onTap: () => onChildSelected(child.id),
-      borderRadius: BorderRadius.circular(12),
-      child: Container(
-        padding: const EdgeInsets.all(16),
-        decoration: BoxDecoration(
-          color: isSelected ? const Color(0xFF9CC5C0).withOpacity(0.1) : Colors.transparent,
-          borderRadius: BorderRadius.circular(12),
-          border: Border.all(
-            color: isSelected ? const Color(0xFF9CC5C0) : Colors.grey.shade300,
-            width: isSelected ? 2 : 1,
-          ),
-        ),
-        child: Row(
-          children: [
-            // UserAvatar(
-            // //   size: isCompact ? 32 : 40,
-            // //   name: child.fullName,
-            // //   imageUrl: child.photoUrl,
-            // ),
-            if (!isCompact) ...[
-              const SizedBox(width: 12),
-              Expanded(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text(
-                      child.firstName,
-                      style: TextStyle(
-                        fontSize: 14,
-                        fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
-                      ),
-                    ),
-                    const SizedBox(height: 4),
-                    _buildChildStatus(child.status),
-                  ],
-                ),
-              ),
-            ],
-          ],
-        ),
-      ),
-    );
-  }
-
-  Widget _buildChildStatus(ChildStatus status) {
-    String label;
-    Color color;
-
-    switch (status) {
-      case ChildStatus.withAssistant:
-        label = 'En garde';
-        color = Colors.green;
-        break;
-      case ChildStatus.available:
-        label = 'Disponible';
-        color = Colors.blue;
-        break;
-      case ChildStatus.onHoliday:
-        label = 'En vacances';
-        color = Colors.orange;
-        break;
-      case ChildStatus.sick:
-        label = 'Malade';
-        color = Colors.red;
-        break;
-      case ChildStatus.searching:
-        label = 'Recherche AM';
-        color = Colors.purple;
-        break;
-    }
-
-    return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
-      decoration: BoxDecoration(
-        color: color.withOpacity(0.1),
-        borderRadius: BorderRadius.circular(12),
-      ),
-      child: Text(
-        label,
-        style: TextStyle(
-          fontSize: 11,
-          color: color,
-          fontWeight: FontWeight.w500,
-        ),
-      ),
-    );
-  }
-}

frontend/lib/widgets/dashbord_parent/wid_dashbord.dart

@@ -1,31 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:p_tits_pas/widgets/dashbord_parent/ChildrenSidebarwidget.dart';
-import 'package:p_tits_pas/widgets/dashbord_parent/children_sidebar.dart';
-import 'package:p_tits_pas/widgets/dashbord_parent/wid_mainContentArea.dart';
-import 'package:p_tits_pas/widgets/messaging_sidebar.dart';
-
-Widget Dashbord_body() {
-  return Row(
-    crossAxisAlignment: CrossAxisAlignment.stretch,
-    children: [
-      // 1️⃣ Colonne de gauche : enfants
-      SizedBox(
-        width: 250,
-        child: Childrensidebarwidget(
-          onChildSelected: (childId) {
-            // Met à jour l'enfant sélectionné
-            // Tu peux stocker cet ID dans un state `selectedChildId`
-          },
-        ),
-      ),
-
-      Expanded(
-        flex: 2,
-        child: WMainContentArea(
-          // Passe l’enfant sélectionné si besoin
-        ),
-      ),
-
-    ],
-  );
-}

frontend/lib/widgets/dashbord_parent/wid_mainContentArea.dart

@@ -1,94 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:p_tits_pas/widgets/messaging_sidebar.dart';
-
-class WMainContentArea extends StatelessWidget {
-  const WMainContentArea({Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      padding: const EdgeInsets.all(16),
-      color: Colors.white,
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.stretch,
-        children: [
-          // 🔷 Informations assistante maternelle (ligne complète)
-          Card(
-            margin: const EdgeInsets.only(bottom: 16),
-            child: Padding(
-              padding: const EdgeInsets.all(16),
-              child: Row(
-                children: [
-                  const CircleAvatar(
-                    radius: 30,
-                    backgroundImage: AssetImage("assets/images/am_photo.jpg"), // à adapter
-                  ),
-                  const SizedBox(width: 16),
-                  Expanded(
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: const [
-                        Text("Julie Dupont", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
-                        SizedBox(height: 4),
-                        Text("Taux horaire : 10€/h"),
-                        Text("Frais journaliers : 5€"),
-                      ],
-                    ),
-                  ),
-                  ElevatedButton(
-                    onPressed: () {
-                      // Ouvrir le contrat
-                    },
-                    child: const Text("Voir le contrat"),
-                  )
-                ],
-              ),
-            ),
-          ),
-
-          // 🔷 Deux colonnes : planning + messagerie
-          Expanded(
-            child: Row(
-              children: [
-                // 📆 Planning de garde
-                Expanded(
-                  flex: 2,
-                  child: Card(
-                    child: Padding(
-                      padding: const EdgeInsets.all(16),
-                      child: Column(
-                        crossAxisAlignment: CrossAxisAlignment.start,
-                        children: const [
-                          Text("Planning de garde", style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
-                          SizedBox(height: 12),
-                          Expanded(
-                            child: Center(
-                              child: Text("Composant calendrier à intégrer ici"),
-                            ),
-                          )
-                        ],
-                      ),
-                    ),
-                  ),
-                ),
-
-                const SizedBox(width: 16),
-
-                // 💬 Messagerie
-                Expanded(
-                  flex: 1,
-                  child: MessagingSidebar(
-                    conversations: [],
-                    notifications: [],
-                    isCompact: false,
-                    isMobile: false,
-                  ),
-                ),
-              ],
-            ),
-          )
-        ],
-      ),
-    );
-  }
-}

frontend/lib/widgets/image_button.dart

@@ -10,6 +10,14 @@ class ImageButton extends StatelessWidget {
   final VoidCallback onPressed;
   final double fontSize; // Ajout pour la flexibilité
 
+  /// Forme utilisée pour le focus / hover / splash. Les fonds « dessinés »
+  /// sont des pastilles : le stadium suit leur contour au lieu d'un rectangle.
+  final OutlinedBorder shape;
+
+  /// Opacité du fond seul (le texte reste net) : permet un état « inactif »
+  /// plus clair sans changer d'asset.
+  final double bgOpacity;
+
   const ImageButton({
     super.key,
     required this.bg,
@@ -19,6 +27,8 @@ class ImageButton extends StatelessWidget {
     required this.textColor,
     required this.onPressed,
     this.fontSize = 16, // Valeur par défaut
+    this.shape = const StadiumBorder(),
+    this.bgOpacity = 1.0,
   });
 
   @override
@@ -36,14 +46,16 @@ class ImageButton extends StatelessWidget {
             style: TextButton.styleFrom(
               padding: EdgeInsets.zero,
               tapTargetSize: MaterialTapTargetSize.shrinkWrap,
-              shape:
+              shape: shape,
-                  const RoundedRectangleBorder(borderRadius: BorderRadius.zero),
             ),
             child: Ink(
+              // Pas de découpe du PNG : le trait « dessiné » déborde un peu du
+              // stadium, on ne rogne que le focus / hover / splash.
               decoration: BoxDecoration(
                 image: DecorationImage(
                   image: AssetImage(bg),
                   fit: BoxFit.fill,
+                  opacity: bgOpacity,
                 ),
               ),
               child: Center(

frontend/lib/widgets/quotidien/quotidien_bandeau.dart

@@ -0,0 +1,282 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:p_tits_pas/services/auth_service.dart';
+import 'package:p_tits_pas/widgets/image_button.dart';
+import 'package:p_tits_pas/widgets/quotidien/quotidien_theme.dart';
+
+/// Bandeau quotidien pastel : logo · pastilles Cahier de liaison / Agenda /
+/// Contrat · menu user.
+/// Réutilisable parent (#166) et AM (#169).
+class QuotidienBandeau extends StatelessWidget {
+  final QuotidienNavSection selectedSection;
+  final ValueChanged<QuotidienNavSection> onSectionSelected;
+  final String userDisplayName;
+  final String? userEmail;
+  final VoidCallback? onProfileTap;
+  final VoidCallback? onSearchAmTap;
+  final VoidCallback? onSettingsTap;
+  final VoidCallback? onLogout;
+
+  const QuotidienBandeau({
+    super.key,
+    required this.selectedSection,
+    required this.onSectionSelected,
+    required this.userDisplayName,
+    this.userEmail,
+    this.onProfileTap,
+    this.onSearchAmTap,
+    this.onSettingsTap,
+    this.onLogout,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(16, 12, 16, 8),
+      child: Row(
+        children: [
+          Image.asset(
+            QuotidienTheme.logoAsset,
+            height: 44,
+            fit: BoxFit.contain,
+          ),
+          const Spacer(),
+          _NavPills(
+            selected: selectedSection,
+            onSelected: onSectionSelected,
+          ),
+          const Spacer(),
+          _UserMenu(
+            displayName: userDisplayName,
+            email: userEmail,
+            onProfileTap: onProfileTap,
+            onSearchAmTap: onSearchAmTap,
+            onSettingsTap: onSettingsTap,
+            onLogout: onLogout,
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _NavPills extends StatelessWidget {
+  final QuotidienNavSection selected;
+  final ValueChanged<QuotidienNavSection> onSelected;
+
+  const _NavPills({
+    required this.selected,
+    required this.onSelected,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        _pill(
+          label: 'Cahier de liaison',
+          section: QuotidienNavSection.liaison,
+        ),
+        const SizedBox(width: 10),
+        _pill(
+          label: 'Agenda',
+          section: QuotidienNavSection.agenda,
+        ),
+        const SizedBox(width: 10),
+        _pill(
+          label: 'Contrat',
+          section: QuotidienNavSection.contrat,
+        ),
+      ],
+    );
+  }
+
+  Widget _pill({
+    required String label,
+    required QuotidienNavSection section,
+  }) {
+    final active = selected == section;
+    // Même famille que l’inscription : fonds « dessinés » (pas Material).
+    // Les deux pastilles ont la même silhouette (ratio ~4:1) : la largeur
+    // est dérivée de la hauteur pour ne jamais déformer le PNG.
+    // Chaque section garde sa couleur ; l'inactive est juste plus claire.
+    return ImageButton(
+      bg: QuotidienTheme.pillAssetFor(section),
+      bgOpacity: active ? 1.0 : QuotidienTheme.pillInactiveOpacity,
+      width: _pillHeight * QuotidienTheme.pillAspectRatio,
+      height: _pillHeight,
+      text: label,
+      textColor: QuotidienTheme.ink,
+      fontSize: 14,
+      onPressed: () => onSelected(section),
+    );
+  }
+
+  static const double _pillHeight = 46;
+}
+
+class _UserMenu extends StatelessWidget {
+  final String displayName;
+  final String? email;
+  final VoidCallback? onProfileTap;
+  final VoidCallback? onSearchAmTap;
+  final VoidCallback? onSettingsTap;
+  final VoidCallback? onLogout;
+
+  const _UserMenu({
+    required this.displayName,
+    this.email,
+    this.onProfileTap,
+    this.onSearchAmTap,
+    this.onSettingsTap,
+    this.onLogout,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final shortName = displayName.trim().isEmpty ? 'Compte' : displayName.trim();
+    const double pillHeight = 46;
+    const double pillWidth = pillHeight * QuotidienTheme.pillAspectRatio;
+    return PopupMenuButton<String>(
+      tooltip: 'Menu utilisateur',
+      offset: const Offset(0, pillHeight + 4),
+      color: QuotidienTheme.ivory,
+      elevation: 3,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(16),
+        side: BorderSide(color: QuotidienTheme.lavender.withOpacity(0.6)),
+      ),
+      onSelected: (value) async {
+        switch (value) {
+          case 'profile':
+            onProfileTap?.call();
+            break;
+          case 'search_am':
+            onSearchAmTap?.call();
+            break;
+          case 'settings':
+            onSettingsTap?.call();
+            break;
+          case 'logout':
+            await _confirmLogout(context);
+            break;
+        }
+      },
+      itemBuilder: (context) => [
+        if (email != null && email!.trim().isNotEmpty)
+          PopupMenuItem(
+            enabled: false,
+            child: Text(
+              email!,
+              style: TextStyle(color: QuotidienTheme.muted, fontSize: 12),
+            ),
+          ),
+        const PopupMenuDivider(),
+        const PopupMenuItem(
+          value: 'profile',
+          child: ListTile(
+            dense: true,
+            contentPadding: EdgeInsets.zero,
+            leading: Icon(Icons.person_outline, size: 20),
+            title: Text('Profil'),
+          ),
+        ),
+        const PopupMenuItem(
+          value: 'search_am',
+          child: ListTile(
+            dense: true,
+            contentPadding: EdgeInsets.zero,
+            leading: Icon(Icons.search, size: 20),
+            title: Text('Recherche AM'),
+          ),
+        ),
+        const PopupMenuItem(
+          value: 'settings',
+          child: ListTile(
+            dense: true,
+            contentPadding: EdgeInsets.zero,
+            leading: Icon(Icons.settings_outlined, size: 20),
+            title: Text('Paramètres'),
+          ),
+        ),
+        const PopupMenuDivider(),
+        const PopupMenuItem(
+          value: 'logout',
+          child: ListTile(
+            dense: true,
+            contentPadding: EdgeInsets.zero,
+            leading: Icon(Icons.logout, size: 20),
+            title: Text('Déconnexion'),
+          ),
+        ),
+      ],
+      // Même pastille « dessinée » que la nav, teinte violet pastel charte.
+      child: Container(
+        width: pillWidth,
+        height: pillHeight,
+        padding: const EdgeInsets.symmetric(horizontal: 14),
+        decoration: const BoxDecoration(
+          image: DecorationImage(
+            image: AssetImage(QuotidienTheme.pillLavenderAsset),
+            fit: BoxFit.fill,
+          ),
+        ),
+        child: Row(
+          children: [
+            const Icon(
+              Icons.person_outline,
+              size: 20,
+              color: QuotidienTheme.ink,
+            ),
+            const SizedBox(width: 6),
+            Expanded(
+              child: Text(
+                shortName,
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                style: GoogleFonts.merienda(
+                  fontSize: 13,
+                  fontWeight: FontWeight.bold,
+                  color: QuotidienTheme.ink,
+                ),
+              ),
+            ),
+            const Icon(
+              Icons.keyboard_arrow_down,
+              size: 18,
+              color: QuotidienTheme.ink,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Future<void> _confirmLogout(BuildContext context) async {
+    final ok = await showDialog<bool>(
+      context: context,
+      builder: (ctx) => AlertDialog(
+        title: const Text('Déconnexion'),
+        content: const Text('Voulez-vous vraiment vous déconnecter ?'),
+        actions: [
+          TextButton(
+            onPressed: () => Navigator.of(ctx).pop(false),
+            child: const Text('Annuler'),
+          ),
+          TextButton(
+            onPressed: () => Navigator.of(ctx).pop(true),
+            child: const Text('Déconnexion'),
+          ),
+        ],
+      ),
+    );
+    if (ok != true) return;
+    onLogout?.call();
+    await AuthService.logout();
+    if (context.mounted) {
+      context.go('/login');
+    }
+  }
+}

frontend/lib/widgets/quotidien/quotidien_shell.dart

@@ -0,0 +1,320 @@
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:p_tits_pas/widgets/app_footer.dart';
+import 'package:p_tits_pas/widgets/quotidien/quotidien_bandeau.dart';
+import 'package:p_tits_pas/widgets/quotidien/quotidien_theme.dart';
+
+/// Coquille « Cahier de liaison » quotidien 3 colonnes + bandeau (#166).
+/// L’AM (#169) réutilise ce widget en injectant ses slots.
+class QuotidienShell extends StatelessWidget {
+  final QuotidienNavSection selectedSection;
+  final ValueChanged<QuotidienNavSection> onSectionSelected;
+  final String userDisplayName;
+  final String? userEmail;
+  final VoidCallback? onProfileTap;
+  final VoidCallback? onSearchAmTap;
+  final VoidCallback? onSettingsTap;
+  final VoidCallback? onLogout;
+
+  /// Colonne gauche (couple + cartes + actions).
+  final Widget leftColumn;
+
+  /// Colonne milieu (blog).
+  final Widget centerColumn;
+
+  /// Colonne droite (messagerie).
+  final Widget rightColumn;
+
+  /// Corps affiché hors Cahier de liaison (Agenda / Contrat stubs).
+  final Widget? agendaBody;
+  final Widget? contratBody;
+
+  const QuotidienShell({
+    super.key,
+    required this.selectedSection,
+    required this.onSectionSelected,
+    required this.userDisplayName,
+    required this.leftColumn,
+    required this.centerColumn,
+    required this.rightColumn,
+    this.userEmail,
+    this.onProfileTap,
+    this.onSearchAmTap,
+    this.onSettingsTap,
+    this.onLogout,
+    this.agendaBody,
+    this.contratBody,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: QuotidienTheme.ivory,
+      body: Container(
+        decoration: QuotidienTheme.paperBackground(),
+        child: Column(
+          children: [
+            QuotidienBandeau(
+              selectedSection: selectedSection,
+              onSectionSelected: onSectionSelected,
+              userDisplayName: userDisplayName,
+              userEmail: userEmail,
+              onProfileTap: onProfileTap,
+              onSearchAmTap: onSearchAmTap,
+              onSettingsTap: onSettingsTap,
+              onLogout: onLogout,
+            ),
+            const QuotidienPencilDivider(),
+            Expanded(child: _bodyForSection(context)),
+            const QuotidienPencilDivider(),
+            const AppFooter(showTopBorder: false),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _bodyForSection(BuildContext context) {
+    switch (selectedSection) {
+      case QuotidienNavSection.liaison:
+        return _ThreeColumns(
+          left: leftColumn,
+          center: centerColumn,
+          right: rightColumn,
+        );
+      case QuotidienNavSection.agenda:
+        return agendaBody ??
+            const QuotidienStubPage(
+              title: 'Agenda',
+              message: 'Page Agenda — à venir.',
+            );
+      case QuotidienNavSection.contrat:
+        return contratBody ??
+            const QuotidienStubPage(
+              title: 'Contrat',
+              message: 'Page Contrat — à venir.',
+            );
+    }
+  }
+}
+
+/// Trait « crayon gris » dessiné à la main : sépare bandeau / corps / footer
+/// (horizontal) et les 3 colonnes (vertical). Le PNG (2400×28) est étiré dans
+/// le sens du trait seulement : sur un trait, c'est invisible.
+class QuotidienPencilDivider extends StatelessWidget {
+  final Axis axis;
+
+  /// Épaisseur de la zone du trait (hauteur si horizontal, largeur sinon).
+  final double thickness;
+  final EdgeInsets padding;
+
+  const QuotidienPencilDivider({
+    super.key,
+    this.axis = Axis.horizontal,
+    this.thickness = 14,
+    this.padding = const EdgeInsets.symmetric(horizontal: 24),
+  });
+
+  const QuotidienPencilDivider.vertical({
+    super.key,
+    this.thickness = 14,
+    this.padding = const EdgeInsets.symmetric(vertical: 16),
+  }) : axis = Axis.vertical;
+
+  @override
+  Widget build(BuildContext context) {
+    final horizontal = axis == Axis.horizontal;
+    return Padding(
+      padding: padding,
+      child: SizedBox(
+        width: horizontal ? double.infinity : thickness,
+        height: horizontal ? thickness : double.infinity,
+        child: Image.asset(
+          horizontal
+              ? QuotidienTheme.pencilLineAsset
+              : QuotidienTheme.pencilLineVerticalAsset,
+          fit: BoxFit.fill,
+          filterQuality: FilterQuality.medium,
+        ),
+      ),
+    );
+  }
+}
+
+class _ThreeColumns extends StatelessWidget {
+  final Widget left;
+  final Widget center;
+  final Widget right;
+
+  const _ThreeColumns({
+    required this.left,
+    required this.center,
+    required this.right,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final wide = constraints.maxWidth >= 900;
+        if (!wide) {
+          // Socle mobile temporaire (#188 = swipe dédié) : pile verticale.
+          return ListView(
+            padding: const EdgeInsets.fromLTRB(12, 4, 12, 12),
+            children: [
+              _ColumnPanel(child: left),
+              const QuotidienPencilDivider(
+                padding: EdgeInsets.symmetric(horizontal: 32, vertical: 4),
+              ),
+              _ColumnPanel(child: center),
+              const QuotidienPencilDivider(
+                padding: EdgeInsets.symmetric(horizontal: 32, vertical: 4),
+              ),
+              _ColumnPanel(child: right),
+            ],
+          );
+        }
+        return Padding(
+          padding: const EdgeInsets.fromLTRB(16, 4, 16, 12),
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              Expanded(child: _ColumnPanel(child: left)),
+              const QuotidienPencilDivider.vertical(),
+              Expanded(child: _ColumnPanel(child: center)),
+              const QuotidienPencilDivider.vertical(),
+              Expanded(child: _ColumnPanel(child: right)),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}
+
+/// Panneau colonne (carte pastel semi-transparente).
+class _ColumnPanel extends StatelessWidget {
+  final Widget child;
+
+  const _ColumnPanel({required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      // Pas de bordure Material : la séparation est assurée par les traits
+      // crayon, on garde juste un léger fond.
+      decoration: BoxDecoration(
+        color: QuotidienTheme.columnCardFill.withOpacity(0.82),
+        borderRadius: BorderRadius.circular(16),
+      ),
+      clipBehavior: Clip.antiAlias,
+      child: child,
+    );
+  }
+}
+
+/// Placeholder de colonne métier (branchable par tickets C/D/E).
+class QuotidienColumnPlaceholder extends StatelessWidget {
+  final String title;
+  final String subtitle;
+  final IconData icon;
+
+  const QuotidienColumnPlaceholder({
+    super.key,
+    required this.title,
+    required this.subtitle,
+    required this.icon,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(20),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          Row(
+            children: [
+              Icon(icon, color: QuotidienTheme.lavender, size: 22),
+              const SizedBox(width: 8),
+              Text(
+                title,
+                style: GoogleFonts.merienda(
+                  fontSize: 18,
+                  fontWeight: FontWeight.w600,
+                  color: QuotidienTheme.ink,
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: 12),
+          Expanded(
+            child: Center(
+              child: Text(
+                subtitle,
+                textAlign: TextAlign.center,
+                style: GoogleFonts.merriweather(
+                  fontSize: 13,
+                  color: QuotidienTheme.muted,
+                  height: 1.4,
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+/// Stub pleine page (Agenda / Contrat) — contenu riche hors #166.
+class QuotidienStubPage extends StatelessWidget {
+  final String title;
+  final String message;
+
+  const QuotidienStubPage({
+    super.key,
+    required this.title,
+    required this.message,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: ConstrainedBox(
+        constraints: const BoxConstraints(maxWidth: 420),
+        child: Container(
+          margin: const EdgeInsets.all(24),
+          padding: const EdgeInsets.symmetric(horizontal: 28, vertical: 32),
+          decoration: BoxDecoration(
+            color: Colors.white.withOpacity(0.85),
+            borderRadius: BorderRadius.circular(16),
+            border: Border.all(color: Colors.grey.shade300),
+          ),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Text(
+                title,
+                style: GoogleFonts.merienda(
+                  fontSize: 22,
+                  fontWeight: FontWeight.w600,
+                  color: QuotidienTheme.ink,
+                ),
+              ),
+              const SizedBox(height: 12),
+              Text(
+                message,
+                textAlign: TextAlign.center,
+                style: GoogleFonts.merriweather(
+                  fontSize: 14,
+                  color: QuotidienTheme.muted,
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

frontend/lib/widgets/quotidien/quotidien_theme.dart

@@ -0,0 +1,67 @@
+import 'package:flutter/material.dart';
+
+/// Couleurs / tokens du quotidien parent–AM (#166) — lignée papier / pastel.
+/// Pas le violet Material du dashboard staff.
+abstract final class QuotidienTheme {
+  static const Color ink = Color(0xFF2F2F2F);
+  static const Color ivory = Color(0xFFFFFEF9);
+  static const Color turquoise = Color(0xFF8AD0C8);
+  static const Color lavender = Color(0xFFC6A3D8);
+  static const Color coral = Color(0xFFF4A28C);
+  static const Color softGreenPill = Color(0xFFB8D9A8);
+  static const Color columnCardFill = Color(0xFFF7F3EA);
+  static const Color muted = Color(0xFF6B6B6B);
+
+  static const String paperAsset = 'assets/images/paper2.png';
+  static const String logoAsset = 'assets/images/logo.png';
+
+  /// Pastilles « dessinées » du bandeau : même silhouette (1190×299), une
+  /// couleur charte par section ; l'inactive est la même, plus transparente.
+  static const double pillInactiveOpacity = 0.45;
+  static const String pillIvoryAsset = 'assets/images/bg_ivoire_pill.png';
+  static const String pillYellowAsset = 'assets/images/bg_yellow_pill.png';
+  static const String pillPeachAsset = 'assets/images/bg_peach_pill.png';
+  static const String pillTurquoiseAsset =
+      'assets/images/bg_turquoise_pill.png';
+  static const String pillLavenderAsset =
+      'assets/images/bg_lavender_pill.png';
+
+  /// Trait crayon gris (2400×28, transparent) : séparateurs bandeau / corps /
+  /// footer. Version verticale (28×2400) entre les colonnes.
+  static const String pencilLineAsset = 'assets/images/pencil_line_grey.png';
+  static const String pencilLineVerticalAsset =
+      'assets/images/pencil_line_grey_v.png';
+
+  static String pillAssetFor(QuotidienNavSection section) {
+    switch (section) {
+      case QuotidienNavSection.liaison:
+        return pillYellowAsset;
+      case QuotidienNavSection.agenda:
+        return pillPeachAsset;
+      case QuotidienNavSection.contrat:
+        return pillTurquoiseAsset;
+    }
+  }
+
+  /// Largeur / hauteur des PNG de pastille, à respecter pour ne pas déformer.
+  static const double pillAspectRatio = 1190 / 298;
+
+  static BoxDecoration paperBackground() {
+    return const BoxDecoration(
+      image: DecorationImage(
+        image: AssetImage(paperAsset),
+        fit: BoxFit.cover,
+        repeat: ImageRepeat.repeat,
+      ),
+    );
+  }
+
+}
+
+/// Sections du bandeau quotidien (Cahier de liaison / Agenda / Contrat).
+/// `liaison` = le hub « Cahier de liaison » (cartes · blog · messagerie).
+enum QuotidienNavSection {
+  liaison,
+  agenda,
+  contrat,
+}