feat: Creating the base of application

frontend/css/styles.css

@@ -0,0 +1,69 @@
+@charset "UTF-8";
+
+/* ==========================================================================
+   KétaPK Web - Custom Styles & Adjustments
+   ========================================================================== */
+
+/* 1. Suppression des flèches/spinners par défaut sur les inputs de type number */
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+/* 2. Personnalisation de la barre de défilement pour la grille temporelle */
+#timelineGrid::-webkit-scrollbar {
+  height: 8px;
+}
+
+#timelineGrid::-webkit-scrollbar-track {
+  background: rgba(15, 23, 42, 0.6);
+  border-radius: 9999px;
+}
+
+#timelineGrid::-webkit-scrollbar-thumb {
+  background: rgba(51, 65, 85, 0.8);
+  border-radius: 9999px;
+  border: 2px solid rgba(15, 23, 42, 0.6);
+}
+
+#timelineGrid::-webkit-scrollbar-thumb:hover {
+  background: rgba(100, 116, 139, 1);
+}
+
+/* 3. Styles d'animation douces pour les fenêtres modales */
+#modalCalc {
+  transition: opacity 0.2s ease-in-out;
+}
+
+#modalCalc.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+#modalCalc:not(.hidden) {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* 4. Effets au survol des cellules de la timeline */
+#timelineGrid > div {
+  min-width: 80px;
+  transition: border-color 0.15s ease, transform 0.15s ease;
+}
+
+#timelineGrid > div:focus-within {
+  border-color: rgba(245, 158, 11, 0.8);
+  box-shadow: 0 0 10px rgba(245, 158, 11, 0.15);
+}
+
+/* 5. Optimisations Responsive (écrans verticaux et smartphones) */
+@media (max-width: 640px) {
+  #pkChart {
+    min-height: 280px;
+  }
+}