From 96b598c6f4c4b13f691e80792c3c40f6a8368a54 Mon Sep 17 00:00:00 2001
From: Sam DEPARDIEU <samdepardieu@hotmail.com>
Date: Wed, 8 Jul 2026 22:12:33 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20formulaire=20de=20suggestions=20optimis?=
 =?UTF-8?q?=C3=A9=20pour=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ré-appliqué sur la version avec suivi des suggestions du coéquipier.
- create.blade.php mobile-first : espacements/typo adaptatifs, champs en
  text-base (évite le zoom iOS), boutons empilés pleine largeur, compteur
  de caractères sur la description.
- header : bouton "Proposer une amélioration" accessible sur mobile
  (icône seule < sm) ; lien "Mes suggestions" conservé.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 resources/views/layout/header.blade.php      |  7 ++-
 resources/views/suggestions/create.blade.php | 50 +++++++++++++-------
 2 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/resources/views/layout/header.blade.php b/resources/views/layout/header.blade.php
index 27d10fe..4646e28 100644
--- a/resources/views/layout/header.blade.php
+++ b/resources/views/layout/header.blade.php
@@ -27,8 +27,11 @@
                 📱 Télécharger l'app
             </a>
             @auth
-                <a href="{{ route('suggestions.create') }}" class="hidden sm:inline-flex items-center px-4 py-2.5 text-sm font-bold text-niagara border-2 border-niagara rounded-lg hover:bg-niagara hover:text-white transition-smooth duration-200">
-                    💡 Proposer une amélioration
+                <a href="{{ route('suggestions.create') }}"
+                    title="Proposer une amélioration"
+                    aria-label="Proposer une amélioration"
+                    class="inline-flex items-center px-3 sm:px-4 py-2.5 text-sm font-bold text-niagara border-2 border-niagara rounded-lg hover:bg-niagara hover:text-white transition-smooth duration-200">
+                    💡<span class="hidden sm:inline">&nbsp;Proposer une amélioration</span>
                 </a>
                 <div class="relative group">
                     <button class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-100 transition-smooth duration-200">
diff --git a/resources/views/suggestions/create.blade.php b/resources/views/suggestions/create.blade.php
index 328ce7a..3193fe1 100644
--- a/resources/views/suggestions/create.blade.php
+++ b/resources/views/suggestions/create.blade.php
@@ -3,12 +3,12 @@
 @section('title', 'Proposer une amélioration - (RE)Sources Relationnelles')
 
 @section('content')
-    <section class="container mx-auto px-4 py-12">
+    <section class="container mx-auto px-4 py-8 sm:py-12">
         <div class="max-w-2xl mx-auto">
             <!-- En-tête -->
-            <div class="mb-8">
-                <h1 class="text-4xl font-bold text-gray-900 mb-2">💡 Proposer une amélioration</h1>
-                <p class="text-gray-600">
+            <div class="mb-6 sm:mb-8">
+                <h1 class="text-2xl sm:text-4xl font-bold text-gray-900 mb-2">💡 Proposer une amélioration</h1>
+                <p class="text-sm sm:text-base text-gray-600">
                     Une idée, une correction, un ajout ? Votre suggestion est directement transmise à
                     l'équipe sous forme de ticket. Merci de votre contribution !
                 </p>
@@ -17,7 +17,7 @@
             <!-- Message de succès -->
             @if (session('success'))
                 <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg">
-                    <p class="text-green-700 font-semibold">✅ {{ session('success') }}</p>
+                    <p class="text-green-700 font-semibold text-sm sm:text-base">✅ {{ session('success') }}</p>
                 </div>
             @endif
 
@@ -30,8 +30,8 @@
                 </div>
             @endif
 
-            <div class="bg-white rounded-xl border border-gray-200 p-8">
-                <form action="{{ route('suggestions.store') }}" method="POST" class="space-y-6">
+            <div class="bg-white rounded-xl border border-gray-200 p-5 sm:p-8">
+                <form action="{{ route('suggestions.store') }}" method="POST" class="space-y-5 sm:space-y-6">
                     @csrf
 
                     <!-- Type de demande -->
@@ -41,10 +41,10 @@
                             id="type"
                             name="type"
                             required
-                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none @error('type') border-red-500 @enderror">
+                            class="w-full px-4 py-3 text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none @error('type') border-red-500 @enderror">
                             @php($typeChoisi = old('type'))
                             <option value="Modification" @selected($typeChoisi === 'Modification')>✏️ Modification d'un contenu existant</option>
-                            <option value="Ajout" @selected($typeChoisi === 'Ajout')>➕ Ajout d'un nouveau contenu / fonctionnalité</option>
+                            <option value="Ajout" @selected($typeChoisi === 'Ajout')>➕ Ajout d'un contenu / fonctionnalité</option>
                             <option value="Correction" @selected($typeChoisi === 'Correction')>🐛 Correction d'une erreur / d'un bug</option>
                         </select>
                         @error('type')
@@ -64,7 +64,7 @@
                             maxlength="120"
                             value="{{ old('titre') }}"
                             placeholder="Résumez votre suggestion en une phrase"
-                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none @error('titre') border-red-500 @enderror">
+                            class="w-full px-4 py-3 text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none @error('titre') border-red-500 @enderror">
                         @error('titre')
                             <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                         @enderror
@@ -72,27 +72,30 @@
 
                     <!-- Description -->
                     <div>
-                        <label for="description" class="block text-sm font-bold mb-2 text-gray-700">Description détaillée</label>
+                        <div class="flex items-baseline justify-between mb-2">
+                            <label for="description" class="block text-sm font-bold text-gray-700">Description détaillée</label>
+                            <span id="desc-count" class="text-xs text-gray-400 tabular-nums">0 / 5000</span>
+                        </div>
                         <textarea
                             id="description"
                             name="description"
                             required
                             minlength="10"
                             maxlength="5000"
-                            rows="8"
+                            rows="6"
                             placeholder="Décrivez précisément votre proposition : quoi, où, pourquoi…"
-                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none @error('description') border-red-500 @enderror">{{ old('description') }}</textarea>
+                            class="w-full px-4 py-3 text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none @error('description') border-red-500 @enderror">{{ old('description') }}</textarea>
                         @error('description')
                             <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                         @enderror
                     </div>
 
-                    <!-- Boutons -->
-                    <div class="flex gap-4 pt-2">
-                        <button type="submit" class="px-8 py-3 gradient-niagara text-white font-bold rounded-lg hover:shadow-lg transition-smooth duration-200">
+                    <!-- Boutons : empilés pleine largeur sur mobile, en ligne sur desktop -->
+                    <div class="flex flex-col sm:flex-row gap-3 pt-2">
+                        <button type="submit" class="w-full sm:w-auto px-8 py-3 gradient-niagara text-white font-bold rounded-lg hover:shadow-lg transition-smooth duration-200 text-center">
                             📨 Envoyer ma suggestion
                         </button>
-                        <a href="{{ route('home') }}" class="px-8 py-3 bg-gray-200 text-gray-900 font-bold rounded-lg hover:bg-gray-300 transition-smooth duration-200">
+                        <a href="{{ route('home') }}" class="w-full sm:w-auto px-8 py-3 bg-gray-200 text-gray-900 font-bold rounded-lg hover:bg-gray-300 transition-smooth duration-200 text-center">
                             Annuler
                         </a>
                     </div>
@@ -105,3 +108,16 @@
         </div>
     </section>
 @endsection
+
+@push('scripts')
+    <script>
+        (function () {
+            const ta = document.getElementById('description');
+            const compteur = document.getElementById('desc-count');
+            if (!ta || !compteur) return;
+            const maj = () => { compteur.textContent = ta.value.length + ' / 5000'; };
+            ta.addEventListener('input', maj);
+            maj();
+        })();
+    </script>
+@endpush