add

static/style.css

@@ -541,4 +541,152 @@ box-shadow: 0 5px 15px rgba(0,0,0,0.2);
 }
 .summary-action-btn:hover {
     background-color:white;
+}
+
+
+
+.translate{
+    background-color:white;
+    color: black;
+    border-radius: 5px;
+    border: none;
+    font-size: 20px;
+    width: 200px;
+    height: 40px;
+    border: 2px solid black;
+}
+.translate:hover {
+    transform: translateX(8px);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+    }
+.result{
+    text-align: center;
+}
+.results-containe{
+    background: white;
+    border-radius: 12px;
+    padding: 2rem;
+    margin-top: 50px; 
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    height: 230px;
+}
+.visualiser{
+    background-color:white;
+    color: black;
+    border-radius: 5px;
+    border: 2px solid black;
+    font-size: 20px;
+    width: 200px;
+    height: 40px;
+}
+.visualiser:hover {
+    transform: translateX(8px);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+    }
+    .summary-action-btn:hover {
+        transform: translateX(8px);
+        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+        }
+
+.question-btn:hover {
+    transform: translateX(8px);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+    } 
+
+
+
+
+/* Anciens IDs */
+#resultImage → #graphResultImage
+#placeholderText → #graphPlaceholderText
+#uploadForm → #graphUploadForm
+#fileInput → #graphFileInput
+#graphType → #graphTypeSelect
+
+/* Nouveaux styles avec les IDs modifiés */
+#graphResultImage {
+    max-width: 100%;
+    max-height: 450px;
+    display: none; /* Reste caché par défaut */
+    margin: 0 auto;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+#graphPlaceholderText {
+    margin: 20px 0;
+    font-size: 1.3rem;
+    color: #666;
+    text-align: center;
+}
+
+#graphUploadForm {
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+#graphFileInput {
+    opacity: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    cursor: pointer;
+}
+
+#graphTypeSelect {
+    padding: 12px 15px;
+    border-radius: 8px;
+    border: 2px solid #ddd;
+    font-size: 16px;
+    width: 250px;
+    background: white;
+    cursor: pointer;
+}
+
+/* Zones de résultats modifiées */
+/* Empêche tout rechargement involontaire */
+body, html {
+    overscroll-behavior: contain;
+}
+
+.graph-result-img {
+    display: none;
+    max-width: 100%;
+    max-height: 70vh;
+    margin: 20px auto;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+}
+
+.graph-results-container {
+    background: white;
+    border-radius: 12px;
+    padding: 2rem;
+    margin: 30px auto;
+    min-height: 60vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.graph-generate-btn {
+    padding: 12px 25px;
+    background: white;
+    color: black;
+    border: 2px solid black;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.graph-generate-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
+.graph-generate-btn:active {
+    transform: translateY(0);
 }