fix: (forgot to say that the layout in enhanced in last commit) + fix du prettier

front/MyINPulse-front/src/components/HeaderComponent.vue

@@ -1,11 +1,15 @@
 <template>
     <header>
         <a
-          href="https://www.bordeaux-inp.fr/fr/lincubateur-bordeaux-inpulse"
+            href="https://www.bordeaux-inp.fr/fr/lincubateur-bordeaux-inpulse"
-          target="_blank"
+            target="_blank"
-          rel="noopener"
+            rel="noopener"
         >
-          <img src="./icons/logo inpulse.png" alt="INPulse Logo" class="logo" />
+            <img
+                src="./icons/logo inpulse.png"
+                alt="INPulse Logo"
+                class="logo"
+            />
         </a>
     </header>
 </template>

front/MyINPulse-front/src/components/canvas/CanvasItem.vue

@@ -5,68 +5,82 @@
         <div class="tooltip-explain">{{ description }}</div>
 
         <template v-if="expanded">
-              <div class="explain">
+            <div class="explain">
                 <p>
                     {{ description }}
                 </p>
-              </div>
+            </div>
         </template>
 
         <div class="description-wrapper custom-flow">
             <div
                 v-for="(desc, index) in currentDescriptions"
                 :key="index"
-                :class="['section-bloc', index % 2 === 0 ? 'from-left' : 'from-right']"
+                :class="[
+                    'section-bloc',
+                    index % 2 === 0 ? 'from-left' : 'from-right',
+                ]"
                 class="section-bloc"
             >
-              <!-- ADMIN -------------------------------------------------------------------------------------------->
+                <!-- ADMIN -------------------------------------------------------------------------------------------->
 
-              <template v-if="IS_ADMIN">
+                <template v-if="IS_ADMIN">
-                  <div class="description">
+                    <div class="description">
-                      <p class="m-0">{{ desc }}</p>
+                        <p class="m-0">{{ desc }}</p>
-                  </div>
-              </template>
-
-              <!-- ENTREP ------------------------------------------------------------------------------------------->
-
-              <template v-if="!IS_ADMIN">
-                  <!-- Mode affichage -->
-                  <template v-if="!isEditing[index]">
-                      <div class="description">
-                          <p class="m-0">{{ desc }}</p>
-                      </div>
-                      <div class="button-container">
-                          <button
-                              v-if="expanded"
-                              class="edit-button"
-                              @click.stop="startEditing(index)"
-                          >
-                              Éditer
-                          </button>
-                      </div>
-                  </template>
-
-                  <!-- Mode édition -->
-                  <template v-else>
-                    <div class="edit-row">
-                        <textarea
-                            v-model="editedDescriptions[index]"
-                            class="edit-input"
-                        ></textarea>
-                        <div class="button-container">
-                            <button class="save-button" @click.stop="saveEdit(index)">Enregistrer</button>
-                            <button class="cancel-button" @click.stop="cancelEdit(index)">Annuler</button>
-                        </div>
                     </div>
-                  </template>
+                </template>
-              </template>
+
-          </div>
+                <!-- ENTREP ------------------------------------------------------------------------------------------->
-          <!---------------------------------------------------------------------------------------------------->
+
-          <template v-if="expanded">
+                <template v-if="!IS_ADMIN">
-              <div class="canvas-exit-hint">
+                    <!-- Mode affichage -->
-                Cliquez n'importe où pour quitter le canvas (terminez d'abord vos modifications)
+                    <template v-if="!isEditing[index]">
-              </div>
+                        <div class="description">
-          </template>
+                            <p class="m-0">{{ desc }}</p>
+                        </div>
+                        <div class="button-container">
+                            <button
+                                v-if="expanded"
+                                class="edit-button"
+                                @click.stop="startEditing(index)"
+                            >
+                                Éditer
+                            </button>
+                        </div>
+                    </template>
+
+                    <!-- Mode édition -->
+                    <template v-else>
+                        <div class="edit-row">
+                            <textarea
+                                v-model="editedDescriptions[index]"
+                                class="edit-input"
+                            ></textarea>
+                            <div class="button-container">
+                                <button
+                                    class="save-button"
+                                    @click.stop="saveEdit(index)"
+                                >
+                                    Enregistrer
+                                </button>
+                                <button
+                                    class="cancel-button"
+                                    @click.stop="cancelEdit(index)"
+                                >
+                                    Annuler
+                                </button>
+                            </div>
+                        </div>
+                    </template>
+                </template>
+            </div>
+            <!---------------------------------------------------------------------------------------------------->
+            <template v-if="expanded">
+                <div class="canvas-exit-hint">
+                    Cliquez n'importe où pour quitter le canvas (terminez
+                    d'abord vos modifications)
+                </div>
+            </template>
         </div>
     </div>
 </template>
@@ -175,17 +189,17 @@ const mockFetch = async (projectId: number, title: number, date: string) => {
             "Les clients ont du mal à trouver des produits écoresponsables abordables.",
             "Le processus d'achat en ligne est trop complexe.",
             "Manque de transparence sur l’origine des produits.",
-            "Peu d’alternatives locales et durables sur le marché."
+            "Peu d’alternatives locales et durables sur le marché.",
         ],
         2: [
             "Jeunes urbains engagés dans la cause écologique.",
             "Familles à revenu moyen voulant consommer responsable.",
-            "Entreprises soucieuses de leur empreinte carbone."
+            "Entreprises soucieuses de leur empreinte carbone.",
         ],
         3: [
             "Une plateforme centralisée avec des produits écologiques certifiés.",
             "Un service client humain et réactif.",
-            "Livraison éco-responsable avec suivi."
+            "Livraison éco-responsable avec suivi.",
         ],
         4: [
             "Application intuitive avec suggestions personnalisées.",
@@ -198,22 +212,22 @@ const mockFetch = async (projectId: number, title: number, date: string) => {
         6: [
             "Canaux digitaux : réseaux sociaux, SEO.",
             "Partenariats avec influenceurs écoresponsables.",
-            "Boutique physique en pop-up stores."
+            "Boutique physique en pop-up stores.",
         ],
         7: [
             "Taux de rétention client mensuel.",
-            "Taux de satisfaction utilisateur (NPS)."
+            "Taux de satisfaction utilisateur (NPS).",
         ],
         8: [
             "Coût du développement logiciel initial.",
             "Campagnes publicitaires et communication.",
-            "Frais logistiques (emballages, transport)."
+            "Frais logistiques (emballages, transport).",
         ],
         9: [
             "Ventes directes sur la plateforme.",
             "Abonnement mensuel premium pour livraison gratuite.",
-            "Revenus via partenariats de marque."
+            "Revenus via partenariats de marque.",
-        ]
+        ],
     };
 
     // On extrait les descriptions pour la section demandée
@@ -227,8 +241,6 @@ const mockFetch = async (projectId: number, title: number, date: string) => {
     });
 };
 
-
-
 // Utilisation du mock dans handleClick pour tester sans serveur
 const handleClick = async () => {
     if (!expanded.value) {
@@ -309,20 +321,6 @@ const cancelEdit = (index: number) => {
     editedDescriptions.value[index] = currentDescriptions.value[index];
     isEditing.value[index] = false;
 };
-
-const randomStyle = () => {
-    const offsetX = Math.floor(Math.random() * 20) - 10; // entre -10 et +10px
-    const offsetY = Math.floor(Math.random() * 20) - 10;
-    return {
-        transform: `translate(${offsetX}px, ${offsetY}px)`,
-        transition: 'transform 0.3s ease',
-    };
-};
-
-const styleClasses = ['float-up', 'float-left', 'float-right', 'wiggle', 'tilt'];
-const getRandomClass = () => {
-    return styleClasses[Math.floor(Math.random() * styleClasses.length)];
-};
 </script>
 
 <style scoped>
@@ -424,7 +422,6 @@ const getRandomClass = () => {
     overflow: hidden;
 }
 
-
 .button-container {
     display: block;
     margin-top: 20px;
@@ -445,14 +442,13 @@ const getRandomClass = () => {
     cursor: default;
 
     max-width: 100%;
-    width: fit-content;     
+    width: fit-content;
     overflow-wrap: break-word;
     box-sizing: border-box;
 
     min-width: 120px;
 }
 
-
 .editing-section-bloc {
     width: 100%;
     justify-content: center;
@@ -546,7 +542,6 @@ const getRandomClass = () => {
     box-sizing: border-box;
 }
 
-
 .custom-flow {
     display: flex;
     flex-wrap: wrap;
@@ -560,20 +555,29 @@ const getRandomClass = () => {
     overflow-x: hidden;
 }
 
-
 .container {
-  display: grid;
+    display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-  grid-auto-rows: min-content;
+    grid-auto-rows: min-content;
-  grid-auto-flow: dense;
+    grid-auto-flow: dense;
-  gap: 1rem;
+    gap: 1rem;
 }
 
-.float-up { transform: translateY(-10px); }
+.float-up {
-.float-left { transform: translateX(-10px); }
+    transform: translateY(-10px);
-.float-right { transform: translateX(10px); }
+}
-.wiggle { transform: rotate(1deg); }
+.float-left {
-.tilt { transform: rotate(-1deg); }
+    transform: translateX(-10px);
+}
+.float-right {
+    transform: translateX(10px);
+}
+.wiggle {
+    transform: rotate(1deg);
+}
+.tilt {
+    transform: rotate(-1deg);
+}
 
 .from-left {
     align-self: flex-start;
@@ -595,10 +599,10 @@ const getRandomClass = () => {
 
 .explain {
     font-size: 16px;
-    color: #444; /* gris doux pour le texte */
+    color: #444;
-    background-color: #f9f9f9; /* fond léger pour contraster */
+    background-color: #f9f9f9;
     padding: 7px;
-    border-left: 4px solid #0d6efd; /* petite bande à gauche type "info" */
+    border-left: 4px solid #0d6efd;
     border-right: 4px solid #0d6efd;
     border-radius: 6px;
     margin-bottom: 20px;
@@ -606,6 +610,4 @@ const getRandomClass = () => {
     line-height: 1.6;
     font-family: "Segoe UI", sans-serif;
 }
-
-
 </style>

front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue

@@ -1,15 +1,17 @@
 <template>
     <header class="header">
         <a
-          href="https://www.bordeaux-inp.fr/fr/lincubateur-bordeaux-inpulse"
+            href="https://www.bordeaux-inp.fr/fr/lincubateur-bordeaux-inpulse"
-          target="_blank"
+            target="_blank"
-          rel="noopener"
+            rel="noopener"
         >
-          <img src="../icons/logo inpulse.png" alt="INPulse Logo" class="logo" />
+            <img
+                src="../icons/logo inpulse.png"
+                alt="INPulse Logo"
+                class="logo"
+            />
         </a>
 
-
-
         <div class="header-actions">
             <div ref="dropdownRef" class="dropdown-wrapper">
                 <button class="contact-button" @click.stop="toggleDropdown">

front/MyINPulse-front/src/components/canvas/LeanCanvas.vue

@@ -117,19 +117,18 @@ onMounted(() => {
     gap: 12px;
     padding: 30px;
     position: relative;
-    height: auto;             /* autorise la hauteur à s'ajuster selon le contenu */
+    height: auto; /* autorise la hauteur à s'ajuster selon le contenu */
-    max-height: none;         /* enlève la limite de hauteur */
+    max-height: none; /* enlève la limite de hauteur */
     box-sizing: border-box;
-    overflow: visible;        /* autorise le débordement visible */
+    overflow: visible; /* autorise le débordement visible */
 }
 
 @media (max-width: 768px) {
-  .canvas {
+    .canvas {
-    grid-template-columns: repeat(1, 1fr);
+        grid-template-columns: repeat(1, 1fr);
-  }
+    }
 }
 
-
 .Probleme {
     grid-column: 1 / 3;
     grid-row: 1 / 5;
@@ -200,5 +199,4 @@ onMounted(() => {
 .Revenus {
     background-color: #c8e6c9;
 }
-
 </style>

front/MyINPulse-front/src/views/CanvasView.vue

@@ -1,5 +1,4 @@
 <template>
-    
     <div>
         <header>
             <HeaderCanvas :project-id="1" />
@@ -25,7 +24,8 @@
                 <a href="tel:{{ admin.phoneNumber }}">{{
                     admin.phoneNumber
                 }}</a>
-            </p>    <div class="main"></div>
+            </p>
+            <div class="main"></div>
         </div>
     </div>
 </template>
@@ -139,11 +139,11 @@ onMounted(() => {
 }
 
 .canvas-help-text {
-  margin-top: 20px;   
+    margin-top: 20px;
-  margin-bottom: -10px;
+    margin-bottom: -10px;
 }
 
 div:last-child {
-  margin-bottom: 60px;
+    margin-bottom: 60px;
 }
 </style>