suppresion de local database

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

@@ -112,16 +112,24 @@ onMounted(() => {
 
 .canvas {
     display: grid;
-    grid-template-columns: repeat(10, 1fr);
-    grid-template-rows: repeat(6, 1fr);
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+    grid-auto-rows: min-content;
     gap: 12px;
     padding: 30px;
-    /*background-color: #f8f9fa;*/
     position: relative;
-    height: 90vh;
-    overflow: auto;
+    height: auto;             /* autorise la hauteur à s'ajuster selon le contenu */
+    max-height: none;         /* enlève la limite de hauteur */
+    box-sizing: border-box;
+    overflow: visible;        /* autorise le débordement visible */
 }
 
+@media (max-width: 768px) {
+  .canvas {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+
 .Probleme {
     grid-column: 1 / 3;
     grid-row: 1 / 5;
@@ -164,4 +172,33 @@ onMounted(() => {
     border: 1px solid #dee2e6;
     border-radius: 0.5rem;
 }
+
+.Probleme {
+    background-color: #ffdddd;
+}
+.Segments {
+    background-color: #ddffdd;
+}
+.Valeur {
+    background-color: #ddddff;
+}
+.Solution {
+    background-color: #fff0b3;
+}
+.Avantage {
+    background-color: #d1c4e9;
+}
+.Canaux {
+    background-color: #b2ebf2;
+}
+.Indicateurs {
+    background-color: #ffe082;
+}
+.Couts {
+    background-color: #ffcdd2;
+}
+.Revenus {
+    background-color: #c8e6c9;
+}
+
 </style>