✨ feat(templates/order): Adapte l'affichage des formules pour une meilleure expérience mobile.

src/Controller/Order/HomeController.php

@@ -328,8 +328,9 @@ class HomeController extends AbstractController
             'id' => 4,
             'name' => 'ESY-PREMIUM',
             'audience' => 'La formule royale',
-            'price' => '3139,00',
+            'price' => 3139.00,
             'period' => ' €',
+            'priceUp' => 0,
             'commitment' => 'soit 8,60 €/jour pendant 1 an',
             'color' => 'purple',
             'highlight' => false,
@@ -439,10 +440,19 @@ class HomeController extends AbstractController
     #[Route('/commande', name: 'commande')]
     public function index(): Response
     {
+        $list = [];
+        foreach (self::formulesList as $formule) {
+            $formule['ndd'] = 0;
+            foreach ($formule['features'] as $feature) {
+                $formule['ndd'] = $formule['ndd'] + count($feature);
+            }
+            $list[] = $formule;
+        }
+
 
         return $this->render('order/display.twig', [
             'formules' => self::formules,
-            'listFormules' => self::formulesList,
+            'listFormules' => $list
         ]);
     }
 

templates/order/display.twig

@@ -1,64 +1,75 @@
 {% extends 'order/base.twig' %}
 
 {% block content %}
-<section class="py-12">
-    <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
-        <h1 class="section-title text-3xl sm:text-4xl text-center mb-12 text-gray-900">
-            Choisissez la formule qui vous convient
-        </h1>
-    </div>
+    <section class="py-12">
+        <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
+            <h1 class="section-title text-3xl sm:text-4xl text-center mb-8 text-gray-900">
+                Choisissez la formule
+            </h1>
+        </div>
 
-    <div class="grid grid-cols-1 gap-8 lg:grid-cols-2 xl:grid-cols-4">
-        {% for key,formule in listFormules %}
-            <div id="formule-{{ key }}"
-                 class="card flex flex-col p-6 transition duration-300 transform hover:scale-[1.02]
+        {# La grille reste en 1 colonne (mobile-first) et utilise des cartes simplifiées #}
+        <div class="grid grid-cols-1 gap-6 max-w-lg mx-auto px-4 sm:px-0 lg:max-w-screen-2xl lg:grid-cols-2 xl:grid-cols-4">
+            {% for key,formule in listFormules %}
+                <div id="formule-{{ key }}" style="height: fit-content"
+                     class="card flex flex-col p-4 transition duration-300
                         {% if formule.highlight is defined and formule.highlight %}
-                            border-4 border-{{ formule.color }}-600 shadow-xl
+                            border-4 border-{{ formule.color }}-600 shadow-xl bg-{{ formule.color }}-50
                         {% else %}
-                            border border-gray-200
-                        {% endif %}">
+                            border border-gray-200 bg-white
+                        {% endif %} rounded-lg">
 
-                <div class="mb-6">
-                    <h2 class="text-3xl font-extrabold text-gray-900 mb-1">{{ formule.name }}</h2>
-                    <p class="text-sm font-semibold text-{{ formule.color }}-600 mb-4">{{ formule.audience }}</p>
+                    {# EN-TÊTE SIMPLIFIÉ (Toujours visible) #}
+                    <div class="mb-4">
+                        <h2 class="text-2xl font-bold text-gray-900 mb-1">{{ formule.name }}</h2>
+                        <p class="text-sm font-semibold text-{{ formule.color }}-600">{{ formule.audience }}</p>
 
-                    <p class="text-4xl font-extrabold text-gray-900 mb-2">
-                        <span class="text-5xl font-extrabold text-{{ formule.color }}-600">{{ formule.price }}</span>
-                        <span class="text-xl font-medium text-gray-500">{{ formule.period }}</span>
-                    </p>
-                    <p class="text-xs text-gray-500 mb-6 font-medium">{{ formule.commitment }}</p>
-                    {% if formule.priceUp is defined %}
-                        <p class="text-xm text-black-800 mb-6 font-bold">Frais de mise service {{ formule.priceUp }} €</p>
-                    {% else %}
-                        <p class="text-xm text-black-800 mb-6 font-bold">Pas de frais de mise en service</p>
+                        <p class="text-3xl font-extrabold text-gray-900 mt-2">
+                            <span class="text-4xl font-extrabold text-{{ formule.color }}-600">{{ formule.price }}</span>
+                            <span class="text-lg font-medium text-gray-500">{{ formule.period }}</span>
+                        </p>
+                        <p class="text-xs text-gray-500 font-medium">{{ formule.commitment }}</p>
+                        {% if formule.priceUp is defined and formule.priceUp != 0 %}
+                            <p class="text-sm text-gray-800 mt-2 font-bold">Frais de mise service {{ formule.priceUp }} €</p>
+                        {% else %}
+                            <p class="text-sm text-gray-800 mt-2 font-bold">Pas de frais de mise en service</p>
+                        {% endif %}
+                    </div>
 
-                    {% endif %}
-                </div>
+                    {# DÉTAILS MASQUÉS (Affichage conditionnel via l'élément <details>) #}
+                    <details class="mb-4 flex-grow">
+                        <summary class="text-sm font-semibold text-{{ formule.color }}-600 cursor-pointer list-none flex justify-between items-center py-1 border-t border-gray-200 mt-2">
+                            <span>Voir les {{ (formule.ndd) }} fonctionnalités</span>
+                            <span class="ml-2">▼</span>
+                        </summary>
 
-                <div class="flex-grow space-y-4 mb-8">
-                    {% for category, items in formule.features %}
-                        <h3 class="text-lg font-bold text-gray-800 border-b border-gray-200 pb-1 mt-6">{{ category }}</h3>
-                        <ul class="text-sm space-y-2 text-gray-600">
-                            {% for item in items %}
-                                <li class="flex items-start">
-                                    <span class="text-{{ formule.color }}-500 mr-2 text-base">✔</span>
-                                    <span class="flex-1">{{ item }}</span>
-                                </li>
+                        <div class="space-y-3 pt-3">
+                            {% for category, items in formule.features %}
+                                <h3 class="text-base font-bold text-gray-800 border-b border-gray-100 pb-1">{{ category }}</h3>
+                                <ul class="text-sm space-y-1 text-gray-600">
+                                    {% for item in items %}
+                                        <li class="flex items-start">
+                                            <span class="text-{{ formule.color }}-500 mr-2 text-base">✔</span>
+                                            <span class="flex-1">{{ item }}</span>
+                                        </li>
+                                    {% endfor %}
+                                </ul>
                             {% endfor %}
-                        </ul>
-                    {% endfor %}
-                </div>
+                        </div>
+                    </details>
 
-                <button
-                    onclick="selectFormule({{ key }})"
-                    class="mt-auto w-full py-3 px-6 rounded-lg text-white font-semibold shadow-md
+
+                    {# BOUTON D'ACTION (Toujours visible) #}
+                    <button
+                        onclick="selectFormule({{ key }})"
+                        class="mt-auto w-full py-3 px-6 rounded-lg text-white font-semibold shadow-md
                            bg-{{ formule.color }}-600 hover:bg-{{ formule.color }}-700 focus:outline-none focus:ring-4 focus:ring-{{ formule.color }}-300 transition duration-150">
-                    Commander
-                </button>
-            </div>
-        {% endfor %}
-    </div>
-</section>
+                        Commander cette formule
+                    </button>
+                </div>
+            {% endfor %}
+        </div>
+    </section>
 
     <script>
         function selectFormule(formuleId) {
@@ -76,7 +87,7 @@
             }
 
             // TODO: Mettre en place ici la logique de redirection ou d'envoi de l'ID au panier/processus de commande
-            Exemple: window.location.href = "{{ path('commande_process') }}?formule=" + formuleId;
+            window.location.href = "{{ path('commande_process') }}?formule=" + formuleId;
         }
     </script>
 {% endblock %}

templates/order/process.twig

@@ -52,7 +52,7 @@
                                 <div class="border-r border-gray-100 md:pr-6">
                                     <p class="text-base font-medium text-gray-500 mb-1">Tarif mensuel</p>
                                     <p class="text-5xl font-extrabold text-gray-900">
-                                    <span class="text-6xl font-extrabold text-{{ currentFormule.color }}-600">
+                                    <span class="text-3xl font-extrabold text-{{ currentFormule.color }}-600">
                                         {{ currentFormule.price | number_format(2, ',', ' ') }}
                                     </span>
                                         <span class="text-xl font-medium text-gray-500">{{ currentFormule.period }}</span>
@@ -160,7 +160,11 @@
                                 <div class="flex justify-between items-center mb-2">
                                     <span class="font-semibold text-lg text-gray-900">{{ currentFormule.name }}</span>
                                     <span class="font-bold text-lg text-{{ currentFormule.color }}-600">
-                    {{ currentFormule.price | number_format(2, ',', ' ') }} € / mois
+                                        {% if currentFormule.id == 4  %}
+                                            {{ currentFormule.price | number_format(2, ',', ' ') }} €
+                                        {% else %}
+                                            {{ currentFormule.price | number_format(2, ',', ' ') }} € / mois
+                                        {% endif %}
                 </span>
                                 </div>
 
@@ -200,12 +204,17 @@
                     </span>
                                     </div>
                                     <p class="text-xs text-indigo-600 text-right mt-1">
-                                        (1er mois + Frais de mise en service + Options Annuelles)
+                                        {% if currentFormule.id == 4  %}
+                                            (Prix + Options Annuelles)
+                                        {% else %}
+                                            (1er mois + Frais de mise en service + Options Annuelles)
+                                        {% endif %}
                                     </p>
                                 </div>
 
                                 <h4 class="font-bold text-gray-700 mb-3 text-lg">Synthèse des frais récurrents :</h4>
 
+                                {% if currentFormule.id != 4  %}
                                 {# Total Mensuel Estimé #}
                                 <div class="flex justify-between items-center mb-2">
                                     <span class="text-lg font-bold text-gray-700">TOTAL HT / mois</span>
@@ -213,6 +222,7 @@
                     {{ currentFormule.price | number_format(2, ',', ' ') }} €
                 </span>
                                 </div>
+                                {% endif %}
 
                                 {# Frais Annuels (Options) #}
                                 <div class="flex justify-between items-center mb-4">
@@ -326,7 +336,7 @@
                             currentInitialTotal += parseFloat(optionPriceTotal); // AJOUT : L'option annuelle est facturée immédiatement
                             displayPeriod = '/ an';
                             priceText = formatPrice(optionPriceTotal) + displayPeriod;
-                        } else {
+                        %} else {
                             currentMonthlyTotal += optionPriceTotal;
                             displayPeriod = '/ mois';
 
@@ -343,7 +353,7 @@
                             <span class="font-medium text-right text-gray-800 whitespace-nowrap">+${priceText}</span>
                         </li>
                     `;
-                    }
+                    %}
                 });
 
                 // Mise à jour de l'affichage
@@ -456,7 +466,7 @@
                     }
 
                 } catch (error) {
-                    console.error('Erreur lors de la vérification du domaine:', error);
+                    removeLoadingMessage(inputElement)
                     displayErrorMessage(inputElement, 'Erreur de connexion. Veuillez réessayer.');
                     return false;
                 } finally {