Refactor layout and styling: update HTML structure and apply Bootstrap for improved responsiveness

.postcssrc.json

@@ -1,5 +0,0 @@
-{
-  "plugins": {
-    "@tailwindcss/postcss": {}
-  }
-}

angular.json

@@ -32,7 +32,7 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kB",
+                  "maximumWarning": "700kB",
                   "maximumError": "1MB"
                 },
                 {

package-lock.json

@@ -14,6 +14,7 @@
         "@angular/forms": "^21.2.0",
         "@angular/platform-browser": "^21.2.0",
         "@angular/router": "^21.2.0",
+        "bootstrap": "^5.3.3",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0"
       },
@@ -21,11 +22,8 @@
         "@angular/build": "^21.2.0",
         "@angular/cli": "^21.2.0",
         "@angular/compiler-cli": "^21.2.0",
-        "@tailwindcss/postcss": "^4.1.12",
         "jsdom": "^28.0.0",
-        "postcss": "^8.5.3",
         "prettier": "^3.8.1",
-        "tailwindcss": "^4.1.12",
         "typescript": "~5.9.2",
         "vitest": "^4.0.8"
       }
@@ -246,19 +244,6 @@
         "node": ">= 14.0.0"
       }
     },
-    "node_modules/@alloc/quick-lru": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
-      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -1130,6 +1115,7 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "@emnapi/wasi-threads": "1.2.1",
         "tslib": "^2.4.0"
@@ -1142,6 +1128,7 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -1153,6 +1140,7 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -3189,6 +3177,17 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rolldown/binding-android-arm64": {
       "version": "1.0.0-rc.4",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.4.tgz",
@@ -3870,277 +3869,6 @@
       "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
       "license": "MIT"
     },
-    "node_modules/@tailwindcss/node": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.0.tgz",
-      "integrity": "sha512-aFb4gUhFOgdh9AXo4IzBEOzBkkAxm9VigwDJnMIYv3lcfXCJVesNfbEaBl4BNgVRyid92AmdviqwBUBRKSeY3g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/remapping": "^2.3.5",
-        "enhanced-resolve": "^5.21.0",
-        "jiti": "^2.6.1",
-        "lightningcss": "1.32.0",
-        "magic-string": "^0.30.21",
-        "source-map-js": "^1.2.1",
-        "tailwindcss": "4.3.0"
-      }
-    },
-    "node_modules/@tailwindcss/oxide": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.0.tgz",
-      "integrity": "sha512-F7HZGBeN9I0/AuuJS5PwcD8xayx5ri5GhjYUDBEVYUkexyA/giwbDNjRVrxSezE3T250OU2K/wp/ltWx3UOefg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 20"
-      },
-      "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.3.0",
-        "@tailwindcss/oxide-darwin-arm64": "4.3.0",
-        "@tailwindcss/oxide-darwin-x64": "4.3.0",
-        "@tailwindcss/oxide-freebsd-x64": "4.3.0",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.0",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.3.0",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.3.0",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.3.0",
-        "@tailwindcss/oxide-linux-x64-musl": "4.3.0",
-        "@tailwindcss/oxide-wasm32-wasi": "4.3.0",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.3.0",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.3.0"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.0.tgz",
-      "integrity": "sha512-TJPiq67tKlLuObP6RkwvVGDoxCMBVtDgKkLfa/uyj7/FyxvQwHS+UOnVrXXgbEsfUaMgiVvC4KbJnRr26ho4Ng==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.0.tgz",
-      "integrity": "sha512-oMN/WZRb+SO37BmUElEgeEWuU8E/HXRkiODxJxLe1UTHVXLrdVSgfaJV7pSlhRGMSOiXLuxTIjfsF3wYvz8cgQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.0.tgz",
-      "integrity": "sha512-N6CUmu4a6bKVADfw77p+iw6Yd9Q3OBhe0veaDX+QazfuVYlQsHfDgxBrsjQ/IW+zywL8mTrNd0SdJT/zgtvMdA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.0.tgz",
-      "integrity": "sha512-zDL5hBkQdH5C6MpqbK3gQAgP80tsMwSI26vjOzjJtNCMUo0lFgOItzHKBIupOZNQxt3ouPH7RPhvNhiTfCe5CQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.0.tgz",
-      "integrity": "sha512-R06HdNi7A7OEoMsf6d4tjZ71RCWnZQPHj2mnotSFURjNLdBC+cIgXQ7l81CqeoiQftjf6OOblxXMInMgN2VzMA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.0.tgz",
-      "integrity": "sha512-qTJHELX8jetjhRQHCLilkVLmybpzNQAtaI/gaoVoidn/ufbNDbAo8KlK2J+yPoc8wQxvDxCmh/5lr8nC1+lTbg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.0.tgz",
-      "integrity": "sha512-Z6sukiQsngnWO+l39X4pPbiWT81IC+PLKF+PHxIlyZbGNb9MODfYlXEVlFvej5BOZInWX01kVyzeLvHsXhfczQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.0.tgz",
-      "integrity": "sha512-DRNdQRpSGzRGfARVuVkxvM8Q12nh19l4BF/G7zGA1oe+9wcC6saFBHTISrpIcKzhiXtSrlSrluCfvMuledoCTQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.0.tgz",
-      "integrity": "sha512-Z0IADbDo8bh6I7h2IQMx601AdXBLfFpEdUotft86evd/8ZPflZe9COPO8Q1vw+pfLWIUo9zN/JGZvwuAJqduqg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.0.tgz",
-      "integrity": "sha512-HNZGOUxEmElksYR7S6sC5jTeNGpobAsy9u7Gu0AskJ8/20FR9GqebUyB+HBcU/ax6BHuiuJi+Oda4B+YX6H1yA==",
-      "bundleDependencies": [
-        "@napi-rs/wasm-runtime",
-        "@emnapi/core",
-        "@emnapi/runtime",
-        "@tybys/wasm-util",
-        "@emnapi/wasi-threads",
-        "tslib"
-      ],
-      "cpu": [
-        "wasm32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/core": "^1.10.0",
-        "@emnapi/runtime": "^1.10.0",
-        "@emnapi/wasi-threads": "^1.2.1",
-        "@napi-rs/wasm-runtime": "^1.1.4",
-        "@tybys/wasm-util": "^0.10.1",
-        "tslib": "^2.8.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.0.tgz",
-      "integrity": "sha512-Pe+RPVTi1T+qymuuRpcdvwSVZjnll/f7n8gBxMMh3xLTctMDKqpdfGimbMyioqtLhUYZxdJ9wGNhV7MKHvgZsQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.0.tgz",
-      "integrity": "sha512-Mvrf2kXW/yeW/OTezZlCGOirXRcUuLIBx/5Y12BaPM7wJoryG6dfS/NJL8aBPqtTEx/Vm4T4vKzFUcKDT+TKUA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 20"
-      }
-    },
-    "node_modules/@tailwindcss/postcss": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.3.0.tgz",
-      "integrity": "sha512-Jm05Tjx+9yCLGv5qw1c+84Psds8MnyrEQYCB+FFk2lgGiUjlRqdxke4mVTuYrj2xnVZqKim2Apr5ySuQRYAw/w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "@tailwindcss/node": "4.3.0",
-        "@tailwindcss/oxide": "4.3.0",
-        "postcss": "^8.5.10",
-        "tailwindcss": "4.3.0"
-      }
-    },
     "node_modules/@tufjs/canonical-json": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tufjs/canonical-json/-/canonical-json-2.0.0.tgz",
@@ -4574,6 +4302,25 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "5.0.6",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.6.tgz",
@@ -5121,6 +4868,7 @@
       "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
       "dev": true,
       "license": "Apache-2.0",
+      "optional": true,
       "engines": {
         "node": ">=8"
       }
@@ -5230,20 +4978,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/enhanced-resolve": {
-      "version": "5.22.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.22.0.tgz",
-      "integrity": "sha512-xYcDWrpELkFzz9SpZ3PlI6Eu6eD93Yf0WLDRxikGhWJ3MAir2SNZTIVCVZqZ/NUyx8AdMc2gT9C0gPiw18kG+A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.3.3"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -6105,16 +5839,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/jiti": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
-      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "jiti": "lib/jiti-cli.mjs"
-      }
-    },
     "node_modules/jose": {
       "version": "6.2.3",
       "resolved": "https://registry.npmjs.org/jose/-/jose-6.2.3.tgz",
@@ -6240,267 +5964,6 @@
       ],
       "license": "MIT"
     },
-    "node_modules/lightningcss": {
-      "version": "1.32.0",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
-      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
-      "dev": true,
-      "license": "MPL-2.0",
-      "dependencies": {
-        "detect-libc": "^2.0.3"
-      },
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      },
-      "optionalDependencies": {
-        "lightningcss-android-arm64": "1.32.0",
-        "lightningcss-darwin-arm64": "1.32.0",
-        "lightningcss-darwin-x64": "1.32.0",
-        "lightningcss-freebsd-x64": "1.32.0",
-        "lightningcss-linux-arm-gnueabihf": "1.32.0",
-        "lightningcss-linux-arm64-gnu": "1.32.0",
-        "lightningcss-linux-arm64-musl": "1.32.0",
-        "lightningcss-linux-x64-gnu": "1.32.0",
-        "lightningcss-linux-x64-musl": "1.32.0",
-        "lightningcss-win32-arm64-msvc": "1.32.0",
-        "lightningcss-win32-x64-msvc": "1.32.0"
-      }
-    },
-    "node_modules/lightningcss-android-arm64": {
-      "version": "1.32.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
-      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.32.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
-      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-darwin-x64": {
-      "version": "1.32.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
-      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.32.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
-      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.32.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
-      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.32.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
-      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.32.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
-      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.32.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
-      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.32.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
-      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.32.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
-      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.32.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
-      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
     "node_modules/listr2": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/listr2/-/listr2-9.0.5.tgz",
@@ -8413,27 +7876,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/tailwindcss": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.0.tgz",
-      "integrity": "sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/tapable": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
-      "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
     "node_modules/tar": {
       "version": "7.5.15",
       "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.15.tgz",

package.json

@@ -17,6 +17,7 @@
     "@angular/forms": "^21.2.0",
     "@angular/platform-browser": "^21.2.0",
     "@angular/router": "^21.2.0",
+    "bootstrap": "^5.3.3",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"
   },
@@ -24,11 +25,8 @@
     "@angular/build": "^21.2.0",
     "@angular/cli": "^21.2.0",
     "@angular/compiler-cli": "^21.2.0",
-    "@tailwindcss/postcss": "^4.1.12",
     "jsdom": "^28.0.0",
-    "postcss": "^8.5.3",
     "prettier": "^3.8.1",
-    "tailwindcss": "^4.1.12",
     "typescript": "~5.9.2",
     "vitest": "^4.0.8"
   }

src/app/app.css

@@ -1,25 +1,7 @@
 :host {
   display: block;
   min-height: 100vh;
-  font-family: Arial, sans-serif;
+  color: #212529;
-  background-color: #f6f8fb;
-  color: #1f2937;
-}
-
-.layout {
-  display: grid;
-  grid-template-columns: 240px 1fr;
-  min-height: 100vh;
-}
-
-.content {
-  padding: 2rem;
-}
-
-@media (max-width: 768px) {
-  .layout {
-    grid-template-columns: 1fr;
-  }
 }
 
 

src/app/app.html

@@ -1,8 +1,12 @@
-<main class="layout">
+<main class="container-fluid min-vh-100">
-  <app-menu />
+  <div class="row min-vh-100">
+    <aside class="col-12 col-md-3 col-lg-2 p-0">
+      <app-menu />
+    </aside>
 
-  <section class="content" aria-live="polite">
+    <section class="col-12 col-md-9 col-lg-10 p-4" aria-live="polite">
-    <router-outlet />
+      <router-outlet />
-  </section>
+    </section>
+  </div>
 </main>
 

src/app/home/home.css

@@ -2,35 +2,3 @@
   display: block;
 }
 
-.page-header h1 {
-  margin: 0;
-  font-size: 2rem;
-}
-
-.page-header p {
-  margin: 0.5rem 0 1.5rem;
-  color: #4b5563;
-}
-
-.cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 1rem;
-}
-
-.card {
-  border-radius: 0.75rem;
-  padding: 1rem;
-  background-color: #ffffff;
-  border: 1px solid #e5e7eb;
-}
-
-.card h2 {
-  margin: 0 0 0.5rem;
-  font-size: 1rem;
-}
-
-.card p {
-  margin: 0;
-  color: #4b5563;
-}

src/app/home/home.html

@@ -1,21 +1,33 @@
-<header class="page-header">
+<div class="mb-4">
-  <h1>Accueil</h1>
+  <h1 class="h2 mb-2">Accueil</h1>
-  <p>Bienvenue sur Bonsai Webapp.</p>
+  <p class="text-secondary mb-0">Bienvenue sur Bonsai Webapp.</p>
-</header>
+</div>
 
-<section class="cards">
+<div class="row g-3">
-  <article class="card">
+  <div class="col-12 col-md-4">
-    <h2>Statistiques</h2>
+    <div class="card h-100 shadow-sm">
-    <p>Resume rapide des activites recentes.</p>
+      <div class="card-body">
-  </article>
+        <h2 class="h5 card-title">Statistiques</h2>
+        <p class="card-text text-secondary mb-0">Resume rapide des activites recentes.</p>
+      </div>
+    </div>
+  </div>
 
-  <article class="card">
+  <div class="col-12 col-md-4">
-    <h2>Notifications</h2>
+    <div class="card h-100 shadow-sm">
-    <p>Consultez les dernieres mises a jour de l'equipe.</p>
+      <div class="card-body">
-  </article>
+        <h2 class="h5 card-title">Notifications</h2>
+        <p class="card-text text-secondary mb-0">Consultez les dernieres mises a jour de l'equipe.</p>
+      </div>
+    </div>
+  </div>
 
-  <article class="card">
+  <div class="col-12 col-md-4">
-    <h2>Taches en cours</h2>
+    <div class="card h-100 shadow-sm">
-    <p>Suivi des priorites de la semaine.</p>
+      <div class="card-body">
-  </article>
+        <h2 class="h5 card-title">Taches en cours</h2>
-</section>
+        <p class="card-text text-secondary mb-0">Suivi des priorites de la semaine.</p>
+      </div>
+    </div>
+  </div>
+</div>

src/app/issues/issue-detail/issue-detail.html

@@ -1,13 +1,13 @@
-<header class="page-header">
+<header class="page-header mb-4">
   <div>
     <h1>Detail de l'issue</h1>
     <p>Informations de creation et de suivi de l'issue.</p>
   </div>
-  <div class="header-meta">
+  <div class="header-meta d-flex align-items-start gap-3 flex-wrap justify-content-end">
-    <div class="status-inline">
+    <div class="status-inline d-flex align-items-center gap-2 bg-white border rounded-3 px-3 py-2 shadow-sm">
       <span class="status-label">Status</span>
       <select
-        class="status-select"
+        class="status-select form-select form-select-sm w-auto"
         [ngModel]="issue.status"
         (ngModelChange)="updateStatus($event)"
       >
@@ -17,13 +17,13 @@
       </select>
     </div>
 
-    <div class="header-actions">
+    <div class="header-actions d-flex gap-2 flex-wrap justify-content-end">
       <div class="more-wrapper">
-        <button type="button" class="more-button" (click)="toggleMoreMenu()">More ▾</button>
+        <button type="button" class="more-button btn btn-outline-secondary btn-sm dropdown-toggle" (click)="toggleMoreMenu()">More</button>
 
         @if (moreMenuOpen) {
-          <div class="more-menu">
+          <div class="more-menu dropdown-menu show position-absolute end-0 mt-2 p-1 shadow">
-            <button type="button" class="more-menu-item delete-action" (click)="deleteIssue()">
+            <button type="button" class="more-menu-item delete-action dropdown-item text-danger" (click)="deleteIssue()">
               Supprimer
             </button>
           </div>
@@ -33,8 +33,8 @@
   </div>
 </header>
 
-<section class="detail-card" aria-label="Informations de l'issue">
+<section class="detail-card card shadow-sm" aria-label="Informations de l'issue">
-  <table>
+  <table class="table table-borderless align-middle mb-0">
     <tbody>
       <tr>
         <th>ID</th>
@@ -43,13 +43,13 @@
       <tr>
         <th>Nom</th>
         <td>
-          <input type="text" [(ngModel)]="issue.name" (blur)="saveIssue()" />
+          <input class="form-control form-control-sm" type="text" [(ngModel)]="issue.name" (blur)="saveIssue()" />
         </td>
       </tr>
       <tr>
         <th>Type</th>
         <td>
-          <select [(ngModel)]="issueTypeValue" (change)="saveIssue()">
+          <select class="form-select form-select-sm" [(ngModel)]="issueTypeValue" (change)="saveIssue()">
             @for (type of typeOptions; track type) {
               <option [value]="type">{{ type }}</option>
             }
@@ -60,7 +60,7 @@
         <tr>
           <th>Epic</th>
           <td>
-            <select [(ngModel)]="issue.epic" (change)="saveIssue()">
+            <select class="form-select form-select-sm" [(ngModel)]="issue.epic" (change)="saveIssue()">
               <option value="">-</option>
               @for (epicIssue of epicIssues; track epicIssue.id) {
                 <option [value]="epicIssue.name">{{ epicIssue.name }}</option>
@@ -72,7 +72,7 @@
       <tr>
         <th>Depend de</th>
         <td>
-          <select multiple [(ngModel)]="dependencyIds" class="dependency-multiselect" (change)="saveIssue()">
+          <select multiple class="dependency-multiselect form-select form-select-sm" [(ngModel)]="dependencyIds" (change)="saveIssue()">
             @for (candidate of dependencyCandidates; track candidate.id) {
               <option [ngValue]="candidate.id">
                 #{{ candidate.id }} - {{ candidate.name || 'Sans nom' }}
@@ -84,31 +84,31 @@
       <tr>
         <th>Assignee</th>
         <td>
-          <input type="text" [(ngModel)]="issue.assignee" (blur)="saveIssue()" />
+          <input class="form-control form-control-sm" type="text" [(ngModel)]="issue.assignee" (blur)="saveIssue()" />
         </td>
       </tr>
       <tr>
         <th>Date d'echeance</th>
         <td>
-          <input type="date" [(ngModel)]="issue.dueDate" (blur)="saveIssue()" />
+          <input class="form-control form-control-sm" type="date" [(ngModel)]="issue.dueDate" (blur)="saveIssue()" />
         </td>
       </tr>
       <tr>
         <th>Temps estimé</th>
         <td>
-          <input type="number" min="0" step="0.5" [(ngModel)]="estimatedTimeValue" (blur)="saveIssue()" />
+          <input class="form-control form-control-sm" type="number" min="0" step="0.5" [(ngModel)]="estimatedTimeValue" (blur)="saveIssue()" />
         </td>
       </tr>
       <tr>
         <th>Description</th>
         <td>
-          <textarea rows="4" [(ngModel)]="issue.description" (blur)="saveIssue()"></textarea>
+          <textarea class="form-control form-control-sm" rows="4" [(ngModel)]="issue.description" (blur)="saveIssue()"></textarea>
         </td>
       </tr>
       <tr>
         <th>Priorite</th>
         <td>
-          <select [(ngModel)]="issue.priority" (change)="saveIssue()">
+          <select class="form-select form-select-sm" [(ngModel)]="issue.priority" (change)="saveIssue()">
             <option value="Basse">Basse</option>
             <option value="Moyenne">Moyenne</option>
             <option value="Haute">Haute</option>
@@ -118,7 +118,7 @@
       <tr>
         <th>Progression</th>
         <td>
-          <input type="number" min="0" max="100" [(ngModel)]="issue.progress" (blur)="saveIssue()" />
+          <input class="form-control form-control-sm" type="number" min="0" max="100" [(ngModel)]="issue.progress" (blur)="saveIssue()" />
         </td>
       </tr>
     </tbody>
@@ -126,23 +126,25 @@
 </section>
 
 @if (isEpicIssue) {
-  <section class="epic-issues-card" aria-label="Issues composant cet epic">
+  <section class="epic-issues-card card shadow-sm mt-4" aria-label="Issues composant cet epic">
-    <div class="epic-issues-header">
+    <div class="epic-issues-header card-header d-flex align-items-center justify-content-between">
-      <h2>Issues composant cet Epic</h2>
+      <h2 class="h5 mb-0">Issues composant cet Epic</h2>
-      <span>{{ composedIssues.length }}</span>
+      <span class="badge text-bg-primary">{{ composedIssues.length }}</span>
     </div>
 
     @if (composedIssues.length === 0) {
-      <p class="epic-empty">Aucune issue ne compose encore cet Epic.</p>
+      <div class="card-body">
+        <p class="epic-empty mb-0 text-secondary">Aucune issue ne compose encore cet Epic.</p>
+      </div>
     } @else {
-      <ul class="epic-issues-list">
+      <ul class="epic-issues-list list-group list-group-flush">
         @for (composedIssue of composedIssues; track composedIssue.id) {
-          <li class="epic-issue-item">
+          <li class="epic-issue-item list-group-item d-flex justify-content-between align-items-start gap-3">
-            <div>
+            <div class="grow">
               <strong>#{{ composedIssue.id }} - {{ composedIssue.name || 'Sans nom' }}</strong>
-              <p>{{ composedIssue.type }} · {{ composedIssue.status }}</p>
+              <p class="mb-0 text-secondary">{{ composedIssue.type }} · {{ composedIssue.status }}</p>
             </div>
-            <span>{{ composedIssue.assignee || 'Non assigné' }}</span>
+            <span class="text-secondary fw-semibold text-nowrap">{{ composedIssue.assignee || 'Non assigné' }}</span>
           </li>
         }
       </ul>

src/app/issues/issues.css

@@ -2,68 +2,6 @@
   display: block;
 }
 
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 1rem;
-}
-
-.page-header h1 {
-  margin: 0;
-  font-size: 2rem;
-}
-
-.page-header p {
-  margin: 0.5rem 0 1.5rem;
-  color: #4b5563;
-}
-
-.create-button {
-  border: none;
-  border-radius: 0.5rem;
-  background-color: #2563eb;
-  color: #ffffff;
-  padding: 0.65rem 1rem;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.create-button:hover {
-  background-color: #1d4ed8;
-}
-
-.table-wrapper {
-  background-color: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.75rem;
-  overflow-x: auto;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-th,
-td {
-  padding: 0.85rem 1rem;
-  text-align: left;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-th {
-  font-size: 0.85rem;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  color: #6b7280;
-  background-color: #f9fafb;
-}
-
-tbody tr:last-child td {
-  border-bottom: none;
-}
-
 .clickable-row {
   cursor: pointer;
 }
@@ -77,9 +15,4 @@ tbody tr:last-child td {
   outline-offset: -2px;
 }
 
-@media (max-width: 768px) {
-  .page-header {
-    flex-direction: column;
-  }
-}
 

src/app/issues/issues.html

@@ -1,39 +1,39 @@
-<header class="page-header">
+<div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3 mb-4">
   <div>
-    <h1>Issues</h1>
+    <h1 class="h2 mb-2">Issues</h1>
-    <p>Suivi des tickets et anomalies du projet.</p>
+    <p class="text-secondary mb-0">Suivi des tickets et anomalies du projet.</p>
   </div>
-  <button type="button" class="create-button" (click)="createIssue()">
+  <button type="button" class="btn btn-primary" (click)="createIssue()">Creer</button>
-    Creer
+</div>
-  </button>
-</header>
 
-<section class="table-wrapper" aria-label="Tableau des issues">
+<div class="card shadow-sm">
-  <table>
+  <div class="table-responsive">
-    <thead>
+    <table class="table table-hover align-middle mb-0">
-      <tr>
+      <thead class="table-light">
-        <th>Titre</th>
+        <tr>
-        <th>Type</th>
+          <th>Titre</th>
-        <th>Priorite</th>
+          <th>Type</th>
-        <th>Statut</th>
+          <th>Priorite</th>
-        <th>Assignee</th>
+          <th>Statut</th>
-      </tr>
+          <th>Assignee</th>
-    </thead>
-    <tbody>
-      @for (issue of issues(); track issue.id) {
-        <tr
-          class="clickable-row"
-          tabindex="0"
-          (click)="openIssue(issue.id)"
-          (keydown.enter)="openIssue(issue.id)"
-        >
-          <td>{{ issue.name }}</td>
-          <td>{{ issue.type }}</td>
-          <td>{{ issue.priority }}</td>
-          <td>{{ issue.status }}</td>
-          <td>{{ issue.assignee }}</td>
         </tr>
-      }
+      </thead>
-    </tbody>
+      <tbody>
-  </table>
+        @for (issue of issues(); track issue.id) {
-</section>
+          <tr
+            class="clickable-row"
+            tabindex="0"
+            (click)="openIssue(issue.id)"
+            (keydown.enter)="openIssue(issue.id)"
+          >
+            <td>{{ issue.name }}</td>
+            <td><span class="badge text-bg-secondary">{{ issue.type }}</span></td>
+            <td>{{ issue.priority }}</td>
+            <td>{{ issue.status }}</td>
+            <td>{{ issue.assignee }}</td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  </div>
+</div>

src/app/issues/issues.store.ts

@@ -88,25 +88,6 @@ export class IssuesStore {
     return ids.length > 0 ? Math.max(...ids) + 1 : 1;
   }
 
-  createDraftIssue(): IssueEntity {
-    const draftIssue: IssueEntity = this.normalizeIssue({
-      id: this.getNextId(),
-      type: 'Story',
-      assignee: '',
-      epic: '',
-      name: '',
-      dueDate: '',
-      description: '',
-      estimatedTime: null,
-      dependsOnIds: [],
-      priority: 'Moyenne',
-      status: 'draft',
-      progress: 0,
-    });
-
-    this.upsert(draftIssue);
-    return draftIssue;
-  }
 
   upsert(issue: IssueEntity): void {
     const normalizedIssue = this.normalizeIssue(issue);

src/app/menu/menu.css

@@ -3,50 +3,4 @@
   height: 100%;
 }
 
-.sidebar {
-  background-color: #111827;
-  color: #f9fafb;
-  padding: 1.5rem 1rem;
-  min-height: 100vh;
-}
-
-.sidebar-title {
-  margin: 0 0 1rem;
-  font-size: 1.1rem;
-}
-
-.menu-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: grid;
-  gap: 0.5rem;
-}
-
-.menu-item {
-  display: block;
-  width: 100%;
-  border-radius: 0.5rem;
-  padding: 0.65rem 0.75rem;
-  text-align: left;
-  color: inherit;
-  background: transparent;
-  text-decoration: none;
-  transition: background-color 0.2s ease;
-}
-
-.menu-item:hover {
-  background-color: #1f2937;
-}
-
-.menu-item.active {
-  background-color: #2563eb;
-  font-weight: 600;
-}
-
-@media (max-width: 768px) {
-  .sidebar {
-    padding: 1rem;
-  }
-}
 

src/app/menu/menu.html

@@ -1,19 +1,24 @@
-<aside class="sidebar" aria-label="Menu principal">
+<aside class="bg-dark text-white min-vh-100 p-3" aria-label="Menu principal">
+  <div class="d-flex flex-column gap-3">
+    <div>
+      <h2 class="h5 mb-0">Menu</h2>
+    </div>
 
-  <nav>
+    <nav>
-    <ul class="menu-list">
+      <ul class="nav nav-pills flex-column gap-2">
-      @for (item of menuItems; track item.path) {
+        @for (item of menuItems; track item.path) {
-        <li>
+          <li class="nav-item">
-          <a
+            <a
-            class="menu-item"
+              class="nav-link text-white"
-            [routerLink]="item.path"
+              [routerLink]="item.path"
-            routerLinkActive="active"
+              routerLinkActive="active bg-primary"
-            [routerLinkActiveOptions]="{ exact: true }"
+              [routerLinkActiveOptions]="{ exact: true }"
-          >
+            >
-            {{ item.label }}
+              {{ item.label }}
-          </a>
+            </a>
-        </li>
+          </li>
-      }
+        }
-    </ul>
+      </ul>
-  </nav>
+    </nav>
+  </div>
 </aside>

src/app/projects/projects.css

@@ -2,70 +2,3 @@
   display: block;
 }
 
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 1rem;
-}
-
-.page-header h1 {
-  margin: 0;
-  font-size: 2rem;
-}
-
-.page-header p {
-  margin: 0.5rem 0 1.5rem;
-  color: #4b5563;
-}
-
-.create-button {
-  border: none;
-  border-radius: 0.5rem;
-  background-color: #2563eb;
-  color: #ffffff;
-  padding: 0.65rem 1rem;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.create-button:hover {
-  background-color: #1d4ed8;
-}
-
-.table-wrapper {
-  background-color: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.75rem;
-  overflow-x: auto;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-th,
-td {
-  padding: 0.85rem 1rem;
-  text-align: left;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-th {
-  font-size: 0.85rem;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  color: #6b7280;
-  background-color: #f9fafb;
-}
-
-tbody tr:last-child td {
-  border-bottom: none;
-}
-
-@media (max-width: 768px) {
-  .page-header {
-    flex-direction: column;
-  }
-}

src/app/projects/projects.html

@@ -1,32 +1,34 @@
-<header class="page-header">
+<div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3 mb-4">
   <div>
-    <h1>Projets</h1>
+    <h1 class="h2 mb-2">Projets</h1>
-    <p>Vue d'ensemble des projets actifs.</p>
+    <p class="text-secondary mb-0">Vue d'ensemble des projets actifs.</p>
   </div>
-  <button type="button" class="create-button" (click)="createProject()">
+  <button type="button" class="btn btn-primary" (click)="createProject()">
     Nouveau projet
   </button>
-</header>
+</div>
 
-<section class="table-wrapper" aria-label="Tableau des projets">
+<div class="card shadow-sm">
-  <table>
+  <div class="table-responsive">
-    <thead>
+    <table class="table table-hover align-middle mb-0">
-      <tr>
+      <thead class="table-light">
-        <th>Nom</th>
-        <th>Responsable</th>
-        <th>Statut</th>
-        <th>Progression</th>
-      </tr>
-    </thead>
-    <tbody>
-      @for (project of projects(); track project.id) {
         <tr>
-          <td>{{ project.name }}</td>
+          <th>Nom</th>
-          <td>{{ project.owner }}</td>
+          <th>Responsable</th>
-          <td>{{ project.status }}</td>
+          <th>Statut</th>
-          <td>{{ project.progress }}%</td>
+          <th>Progression</th>
         </tr>
-      }
+      </thead>
-    </tbody>
+      <tbody>
-  </table>
+        @for (project of projects(); track project.id) {
-</section>
+          <tr>
+            <td>{{ project.name }}</td>
+            <td>{{ project.owner }}</td>
+            <td>{{ project.status }}</td>
+            <td>{{ project.progress }}%</td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  </div>
+</div>

src/styles.css

@@ -1,3 +1,11 @@
-/* You can add global styles to this file, and also import other style files */
+@import 'bootstrap/dist/css/bootstrap.min.css';
 
-@import 'tailwindcss';
+html,
+body {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  background-color: #f8f9fa;
+}