Actualiser style.css

style.css

@@ -52,6 +52,7 @@ nav ul {
     gap: 20px;
     margin: 0;
     padding: 0;
+    align-items: center;
 }
 
 nav ul li a {
@@ -77,6 +78,21 @@ nav ul li a.btn-red:hover {
     color: white;
 }
 
+#toggle-theme {
+    background: none;
+    border: 1px solid #ccd6e0;
+    color: #ccd6e0;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 0.95em;
+    transition: all 0.3s;
+}
+
+#toggle-theme:hover {
+    background-color: rgba(255,255,255,0.1);
+}
+
 /* ===========================
    PAGE ACCUEIL
 =========================== */
@@ -403,4 +419,113 @@ footer hr {
     border-bottom: 1px solid #3d5166;
     font-size: 0.9em;
     color: #ccc;
+}
+
+/* ===========================
+   MODE CLAIR
+=========================== */
+body.light-mode {
+    background-color: #f0f2f5;
+    color: #333;
+}
+
+body.light-mode nav {
+    background-color: #1a2332;
+}
+
+body.light-mode .card-home {
+    background-color: #fff;
+    color: #333;
+}
+
+body.light-mode .card-home h3 {
+    color: #1a2332;
+}
+
+body.light-mode .card-home p {
+    color: #888;
+}
+
+body.light-mode .hero h2 {
+    color: #1a2332;
+}
+
+body.light-mode .hero p {
+    color: #666;
+}
+
+body.light-mode .form-box {
+    background-color: #fff;
+    color: #333;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+}
+
+body.light-mode .form-box h2 {
+    color: #1a2332;
+}
+
+body.light-mode .form-box label.field-label {
+    color: #555;
+}
+
+body.light-mode .form-box input {
+    background-color: #f0f2f5;
+    color: #333;
+    border-color: #ddd;
+}
+
+body.light-mode .form-box input::placeholder {
+    color: #bbb;
+}
+
+body.light-mode .widget {
+    background-color: #fff;
+    color: #333;
+}
+
+body.light-mode .widget strong {
+    color: #1a2332;
+}
+
+body.light-mode .widget p {
+    color: #555;
+}
+
+body.light-mode .climat    { background-color: #e8f4fd; }
+body.light-mode .securite  { background-color: #f0f0f0; }
+body.light-mode .energie   { background-color: #fff8e1; }
+body.light-mode .lumiere   { background-color: #f3e8ff; }
+
+body.light-mode .graphiques {
+    background-color: #fff;
+}
+
+body.light-mode .alertes {
+    background-color: #fdecea;
+    color: #c0392b;
+}
+
+body.light-mode .logs-container {
+    background-color: #fff;
+    color: #333;
+}
+
+body.light-mode .logs-container h3 {
+    color: #1a2332;
+}
+
+body.light-mode .logs-container ul li {
+    color: #555;
+    border-bottom: 1px solid #eee;
+}
+
+body.light-mode footer {
+    background-color: #f0f2f5;
+    border-top: 1px solid #ddd;
+    color: #888;
+}
+
+body.light-mode #toggle-theme {
+    border-color: #ccd6e0;
+    color: #ccd6e0;
 }