From 1e21fe25f37ace649cfb63e7801e0d4095596b6f Mon Sep 17 00:00:00 2001
From: Julien Martin <julien.martin@ptits-pas.fr>
Date: Sat, 28 Mar 2026 18:15:02 +0100
Subject: [PATCH] =?UTF-8?q?fix(front):=20genre=20enfant=20=E2=80=94=20past?=
 =?UTF-8?q?illes=20au=20lieu=20du=20dropdown=20sur=20fond=20beige?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Le commit cd2bf63 ajoutait un Dropdown dans un bloc bg_beige, lourd sur
les cartes aquarellées. Remplacement par trois choix tactiles discrets
(Garçon / Fille / Autre), espacements alignés sur prénom/nom.

Made-with: Cursor
---
 frontend/lib/widgets/child_card_widget.dart | 103 ++++++++++++++------
 1 file changed, 71 insertions(+), 32 deletions(-)

diff --git a/frontend/lib/widgets/child_card_widget.dart b/frontend/lib/widgets/child_card_widget.dart
index 2966665..ec30507 100644
--- a/frontend/lib/widgets/child_card_widget.dart
+++ b/frontend/lib/widgets/child_card_widget.dart
@@ -192,9 +192,9 @@ class _ChildCardWidgetState extends State<ChildCardWidget> {
                 controller: _lastNameController,
                 hint: 'Nom de l\'enfant',
               ),
-              SizedBox(height: 8.0 * scaleFactor),
+              SizedBox(height: 5.0 * scaleFactor),
               _buildGenreField(context, config, scaleFactor),
-              SizedBox(height: 8.0 * scaleFactor),
+              SizedBox(height: 5.0 * scaleFactor),
               _buildField(
                 config: config,
                 scaleFactor: scaleFactor,
@@ -586,51 +586,90 @@ class _ChildCardWidgetState extends State<ChildCardWidget> {
         value: _genreDisplayLabel(widget.childData.genre),
       );
     }
+    final fs = config.isMobile ? 13.0 : 16.0 * scaleFactor.clamp(0.85, 1.15);
+    final padH = config.isMobile ? 10.0 : 14.0 * scaleFactor;
+    final padV = config.isMobile ? 6.0 : 8.0;
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         Text(
           'Genre *',
           style: GoogleFonts.merienda(
-            fontSize: config.isMobile ? 12.0 : 18.0 * scaleFactor,
-            fontWeight: FontWeight.w600,
+            fontSize: config.isMobile ? 12.0 : 18.0,
+            color: Colors.black87,
+            fontWeight: FontWeight.w500,
           ),
         ),
-        SizedBox(height: 4.0 * scaleFactor),
-        Container(
-          width: double.infinity,
-          padding: EdgeInsets.symmetric(horizontal: 14.0 * scaleFactor, vertical: 4.0),
-          decoration: BoxDecoration(
-            image: const DecorationImage(
-              image: AssetImage('assets/images/bg_beige.png'),
-              fit: BoxFit.fill,
+        SizedBox(height: 6),
+        Wrap(
+          spacing: 8,
+          runSpacing: 8,
+          children: [
+            _genreChip(
+              value: 'H',
+              caption: 'Garçon',
+              fontSize: fs,
+              padH: padH,
+              padV: padV,
             ),
-            borderRadius: BorderRadius.circular(8 * scaleFactor),
-          ),
-          child: DropdownButtonHideUnderline(
-            child: DropdownButton<String>(
-              isExpanded: true,
-              value: widget.childData.genre.isEmpty ? null : widget.childData.genre,
-              hint: Text('Choisir', style: GoogleFonts.merienda(fontSize: config.isMobile ? 13.0 : 16.0)),
-              style: GoogleFonts.merienda(fontSize: config.isMobile ? 13.0 : 16.0, color: Colors.black87),
-              items: [
-                DropdownMenuItem(value: 'H', child: Text('Garçon', style: GoogleFonts.merienda())),
-                DropdownMenuItem(value: 'F', child: Text('Fille', style: GoogleFonts.merienda())),
-                DropdownMenuItem(
-                  value: 'Autre',
-                  child: Text('Autre / ne souhaite pas préciser', style: GoogleFonts.merienda()),
-                ),
-              ],
-              onChanged: (v) {
-                if (v != null) widget.onGenreChanged(v);
-              },
+            _genreChip(
+              value: 'F',
+              caption: 'Fille',
+              fontSize: fs,
+              padH: padH,
+              padV: padV,
             ),
-          ),
+            _genreChip(
+              value: 'Autre',
+              caption: 'Autre',
+              fontSize: fs,
+              padH: padH,
+              padV: padV,
+            ),
+          ],
         ),
       ],
     );
   }
 
+  Widget _genreChip({
+    required String value,
+    required String caption,
+    required double fontSize,
+    required double padH,
+    required double padV,
+  }) {
+    final selected = widget.childData.genre == value;
+    const accent = Color(0xFF2D6A4F);
+    return Material(
+      color: Colors.transparent,
+      child: InkWell(
+        onTap: () => widget.onGenreChanged(value),
+        borderRadius: BorderRadius.circular(12),
+        child: AnimatedContainer(
+          duration: const Duration(milliseconds: 150),
+          padding: EdgeInsets.symmetric(horizontal: padH, vertical: padV),
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(12),
+            border: Border.all(
+              color: selected ? accent : Colors.black.withValues(alpha: 0.28),
+              width: selected ? 2 : 1,
+            ),
+            color: selected ? accent.withValues(alpha: 0.12) : Colors.white.withValues(alpha: 0.35),
+          ),
+          child: Text(
+            caption,
+            style: GoogleFonts.merienda(
+              fontSize: fontSize,
+              color: Colors.black87,
+              fontWeight: selected ? FontWeight.w700 : FontWeight.w500,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
   Widget _buildField({
     required DisplayConfig config,
     required double scaleFactor,