Admin: onglet Infos systeme (reseau, RAM, disque, temp, camera)

- Endpoint /api/systeme/info : IPs par interface, hostname, uptime,
  disque, RAM, temperature CPU, version Python, statut camera
- Onglet Infos dans le backoffice avec affichage visuel (barres, couleurs)
- Bouton Actualiser pour rafraichir les donnees en temps reel

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/css/style.css

@@ -780,6 +780,82 @@ html, body {
   display: flex;
 }
 
+/* Infos systeme */
+.infos-systeme-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+
+.infos-systeme-contenu {
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+}
+
+.infos-section {
+  background: rgba(255,255,255,0.05);
+  border-radius: 0.8rem;
+  padding: 1rem 1.2rem;
+}
+
+.infos-section h4 {
+  margin: 0 0 0.8rem 0;
+  font-size: 1rem;
+  opacity: 0.7;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.infos-ligne {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.35rem 0;
+  border-bottom: 1px solid rgba(255,255,255,0.07);
+  font-size: 1.05rem;
+}
+
+.infos-ligne:last-child {
+  border-bottom: none;
+}
+
+.infos-ligne span {
+  opacity: 0.65;
+}
+
+.infos-ip {
+  font-family: monospace;
+  font-size: 1.1rem;
+  letter-spacing: 0.03em;
+}
+
+.infos-barre-fond {
+  margin-top: 0.6rem;
+  background: rgba(255,255,255,0.1);
+  border-radius: 4px;
+  height: 6px;
+  overflow: hidden;
+}
+
+.infos-barre {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.4s ease;
+}
+
+.infos-chargement, .infos-erreur {
+  opacity: 0.5;
+  text-align: center;
+  padding: 2rem;
+}
+
+.btn-petit {
+  font-size: 0.9rem;
+  padding: 0.4rem 1rem;
+}
+
 /* Toggles */
 .toggle-groupe {
   display: flex;