Upload files to "/"

style.css

@@ -0,0 +1,131 @@
+*{
+    padding: 0;
+    margin: 0;
+}
+
+.grid-container {
+    display: grid;                   /* active le mode grid */
+    grid-template-columns: 1fr 2fr 2fr ;
+    grid-template-rows: 1fr 3fr 1fr;
+    gap: 10px;        
+    padding: 10px;
+    background: #eee;
+    height: 100vh;
+
+}
+
+.grid-item {
+    color: white;
+}
+
+#large{
+   grid-column: span 2; 
+}
+
+#long{
+    grid-row: span 3;
+    overflow-y: auto;  
+    overflow-x: hidden;
+    box-sizing: border-box;
+}
+
+.camembert{
+    width: 200px;
+    aspect-ratio: 1/1;
+    border-radius: 50%;
+    background: conic-gradient( /*donné par chat GPT*/
+            #4caf50 0% 40%,   /* 40% vert */
+        #ff9800 40% 70%,  /* 30% orange */
+    #2196f3 70% 100%  /* 30% bleu */
+    );
+}
+
+.titreA{
+    position: absolute;
+    left: 50%;
+    top: 5%;
+    transform: translateX(-50%);
+    
+}
+
+#cam{
+    position: relative;
+    display: flex;
+    justify-content: center; 
+    align-items: center; 
+}
+
+.legendes{
+        display: flex;
+    align-items: center;
+    position: relative;
+    justify-content: space-between;
+}
+
+.legende{
+        display: flex;
+    align-items: center;
+    position: relative;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.hist{
+    position: relative;
+}
+
+.histogram {
+    position: absolute;
+    top: 20%;
+    width: 80%;
+    display: flex;
+    align-items: flex-end;
+    gap: 3%;            
+    height: 200px;
+    padding: 10px;
+}
+
+.bar {
+  width: 10%;
+  background: steelblue;
+  color: white;
+  text-align: center;
+}
+
+.couleur{
+    width: 10%;
+    aspect-ratio: 1/1;
+}
+
+.ame{
+        display: flex;
+    align-items: center;
+    position: relative;
+    justify-content: space-between;
+    gap: 20px;
+    font-size: 1.5vw;
+}
+
+.ameliorations{
+    background-color: #747474;
+}
+
+@media screen and (max-width: 800px) {
+    .grid-container {
+        grid-template-columns: 1fr; 
+        grid-template-rows: 2fr 3fr 3fr 3fr 2fr 2fr;
+        height: 200vh;
+    }
+    #large{
+        grid-column: span 1; 
+    }
+
+    #long{
+        grid-row: span 1;
+    }
+
+    .titreA{
+        top: auto;
+}
+
+}