From bb2b789d3f714dc5b4781b8d8f6a31a7297f90be Mon Sep 17 00:00:00 2001
From: Guillaume <stage1@echoes.solutions>
Date: Thu, 18 Jun 2026 15:09:14 +0200
Subject: [PATCH] simulateur de devis

---
 pages/css/style_services.css |  5 +++--
 pages/services.html          | 15 +++++++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/pages/css/style_services.css b/pages/css/style_services.css
index 9e54867..ecba3d3 100644
--- a/pages/css/style_services.css
+++ b/pages/css/style_services.css
@@ -200,8 +200,9 @@ p {
     justify-content: center;
 }
 #msg {
-    resize: none;
-    width: 200px;
+    resize: horizontal;
+    min-width: 50px;
+    max-width: 300px;
 }
 .btn_icone {
     display: inline-flex;
diff --git a/pages/services.html b/pages/services.html
index 26b2679..54c9e92 100644
--- a/pages/services.html
+++ b/pages/services.html
@@ -13,7 +13,7 @@
             <div id="buttons">
                 <a href="../pages/contact.html"><button class="styled">contact</button></a>
                 <a href="../pages/services.html"><button class="x_to_x">services</button></a>
-                <a href="../index.html"><button class="retour btn_icone"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-undo2-icon lucide-undo-2"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"/></svg>retour</button></>
+                <a href="../index.html"><button class="retour btn_icone"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-undo2-icon lucide-undo-2"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"/></svg>retour</button></a>
             </div>
         </div>
         <div class="padding_left">
@@ -48,6 +48,15 @@
             </tr>
         </table>
         </div>
+        <section class="simulateur">
+            <h2>Estimez votre devis</h2>
+            <p>Nombre de véhicules dans votre flotte :</p>
+            <button id="moins" type="button">−</button>
+            <span id="nb_vehicules">1</span>
+            <button id="plus" type="button">+</button>
+            <p>Total géolocalisation : <strong id="géolocalisation">30</strong> €/mois</p>
+            <p>Total consommation : <strong id="consommation">15</strong> €/mois</p>
+        </section>
         <div class="center">
         <div class="formulaire">
         <form action="" method="post">
@@ -63,7 +72,8 @@
             </li>
             <li>
               <label for="msg">Message&nbsp;:</label>
-              <textarea id="msg" placeholder="Je pense qu'il faudrait..." name="user_message"></textarea>
+              <textarea id="msg" placeholder="Je pense qu'il faudrait..." name="user_message"
+                  row="6" cols="40" maxlength="500"></textarea>
             </li>
             <div id="boutton_formulaire">
               <button type="submit"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send-icon lucide-send"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg>Envoyer le message</button>
@@ -75,5 +85,6 @@
         <footer class="footer">
             stagiaires rpz echoes
         </footer>
+        <script src="css/devis.js"></script>
     </body>
 </html>