Actualiser style.css

style.css

@@ -3,55 +3,47 @@
 =========================== */
 body {
     font-family: Arial, sans-serif;
-    margin: 20px;
-    background-color: #f0f0f0;
-}
-
-/* ===========================
-   NAVBAR RECTANGLE
-=========================== */
-nav {
-    background-color: #2c3e50;   /* fond rectangle */
-    padding: 15px 30px;
-    border-radius: 10px;         /* coins arrondis */
-    box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* effet profondeur */
-    margin-bottom: 20px;
-}
-
-/* Menu horizontal */
-nav ul {
-    list-style: none;
-    display: flex;
-    justify-content: center;     /* centre les éléments */
-    gap: 40px;                   /* espace entre les boutons */
+    background-color: #1E1E1E; /* fond sombre du site */
+    color: #F0F0F0;            /* texte clair par défaut */
     margin: 0;
     padding: 0;
 }
 
-/* Liens */
-nav ul li a {
+/* ===========================
+   NAVBAR
+=========================== */
+nav {
+    background-color: #FFFFFF; /* fond blanc pour nav */
+    padding: 10px 20px;
+    display: flex;
+    gap: 10px;
+}
+
+nav a {
+    color: #000000; /* texte noir */
     text-decoration: none;
-    color: #ecf0f1;              /* texte clair */
-    font-weight: bold;
-    padding: 10px 15px;
+    padding: 8px 12px;
     border-radius: 5px;
+    font-weight: bold;
     transition: all 0.3s;
 }
 
-/* Hover */
-nav ul li a:hover {
-    background-color: #ecf0f1;
-    color: #2c3e50;
+nav a:hover {
+    background-color: #E0E0E0; /* hover léger */
 }
 
-/* Bouton rouge optionnel */
-nav ul li a.btn-red {
-    background-color: #e74c3c;
-    color: white;
+/* ===========================
+   FOOTER
+=========================== */
+footer {
+    background-color: #2A2A2A; /* sombre */
+    color: #FFFFFF;
+    text-align: center;
+    padding: 10px 0;
 }
 
-nav ul li a.btn-red:hover {
-    background-color: #c0392b;
+footer hr {
+    border: 1px solid #555;
 }
 
 /* ===========================
@@ -60,87 +52,53 @@ nav ul li a.btn-red:hover {
 .dashboard {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    gap: 15px;
+    gap: 20px;
+    margin: 20px;
 }
 
-/* ===========================
-   WIDGETS
-=========================== */
 .widget {
     padding: 20px;
     border-radius: 10px;
     text-align: center;
     box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-    background-color: white;
+    font-size: 16px;
+    background-color: #2A2A2A; /* gris foncé */
+    color: #FFFFFF;
 }
 
-/* Couleurs spécifiques */
-.climat { background-color: #ADD8E6; }
-.securite { background-color: #D3D3D3; }
-.energie { background-color: #FFFACD; }
-.lumiere { background-color: #F5F5DC; }
+/* Couleurs spécifiques pour widgets */
+.widget.climat { background-color: #ADD8E6; color: #000000; }
+.widget.securite { background-color: #D3D3D3; color: #000000; }
+.widget.energie { background-color: #FFFACD; color: #000000; }
+.widget.lumiere { background-color: #F5F5DC; color: #000000; }
+.widget.graphiques { background-color: #FFFFFF; color: #000000; grid-column: span 4; padding: 40px; }
+.widget.alertes { background-color: #FFC0CB; color: #000000; grid-column: span 4; padding: 20px; }
 
-/* Grands blocs */
-.graphiques { grid-column: span 4; background-color: white; }
-.alertes { grid-column: span 4; background-color: #FFC0CB; }
-
-/* ===========================
-   ICONES
-=========================== */
 .icone {
     font-size: 30px;
     display: block;
     margin-bottom: 10px;
 }
 
-/* ===========================
-   ALERTES
-=========================== */
-.alert {
-    border: 3px solid red;
-    color: red;
-}
-
-/* ===========================
-   FORMULAIRE LOGIN
-=========================== */
-.form-box {
-    width: 300px;
-    margin: 50px auto;
-    padding: 20px;
-    background-color: white;
-    border-radius: 10px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
-    text-align: center;
-}
-
-.form-box h2 {
-    margin-bottom: 15px;
-}
-
-/* cacher labels si tu veux */
-.form-box label {
-    display: none;
-}
-
-.form-box input {
-    width: 90%;
-    padding: 10px;
-    margin: 10px 0;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-}
-
-.form-box button {
-    width: 100%;
-    padding: 10px;
-    background-color: #2c3e50;
-    color: white;
-    border: none;
-    border-radius: 5px;
+/* Hover dynamique sur les widgets */
+.widget:hover {
+    filter: brightness(1.1);
     cursor: pointer;
 }
 
-.form-box button:hover {
-    background-color: #34495e;
+/* Alertes */
+.alert {
+    border: 3px solid red;
+}
+
+/* Canvas graphique */
+canvas {
+    background-color: #FFFFFF;
+    border-radius: 10px;
+}
+
+/* Titres H1 / H2 */
+h1, h2 {
+    color: #FFFFFF;
+    margin-left: 20px;
 }