Actualiser style.css

style.css

@@ -1,53 +1,156 @@
 /* ===========================
-   NAVBAR - THEME ADMIN
+   GLOBAL
+=========================== */
+body {
+    font-family: Arial, sans-serif;
+    margin: 20px;
+    background-color: #1c1c1c; /* fond noir sombre */
+    color: #ecf0f1; /* texte clair pour contraste */
+}
+
+/* ===========================
+   NAVBAR RECTANGLE
 =========================== */
 nav {
-    background-color: #1a1a1a;   /* fond sombre pour tout le site */
+    background-color: #2c3e50;   /* fond rectangle */
     padding: 15px 30px;
-    border-radius: 10px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+    border-radius: 10px;         /* coins arrondis */
+    box-shadow: 0 2px 10px rgba(0,0,0,0.4); /* effet profondeur */
     margin-bottom: 20px;
 }
 
+/* Menu horizontal */
 nav ul {
     list-style: none;
     display: flex;
-    justify-content: center;
-    gap: 30px;
+    justify-content: center;     /* centre les éléments */
+    gap: 40px;                   /* espace entre les boutons */
     margin: 0;
     padding: 0;
 }
 
+/* Liens */
 nav ul li a {
     text-decoration: none;
-    color: #ffffff;  /* texte clair */
+    color: #ecf0f1;              /* texte clair */
     font-weight: bold;
     padding: 10px 15px;
     border-radius: 5px;
     transition: all 0.3s;
 }
 
+/* Hover */
 nav ul li a:hover {
-    background-color: #ffffff;
-    color: #1a1a1a;
+    background-color: #ecf0f1;
+    color: #2c3e50;
 }
 
+/* Bouton rouge optionnel */
 nav ul li a.btn-red {
     background-color: #e74c3c;
-    color: #fff;
+    color: white;
 }
 
 nav ul li a.btn-red:hover {
     background-color: #c0392b;
 }
 
-/* Style spécifique pour onglet Admin Login */
-nav ul li a.btn-admin {
-    background-color: #8e44ad; /* violet admin */
-    color: white;
+/* ===========================
+   DASHBOARD
+=========================== */
+.dashboard {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 15px;
 }
 
-nav ul li a.btn-admin:hover {
-    background-color: #6c3483;
-    color: #fff;
+/* ===========================
+   WIDGETS
+=========================== */
+.widget {
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
+    background-color: #2c3e50; /* fond sombre pour widget */
+    color: #ecf0f1; /* texte clair */
+    transition: all 0.3s;
+}
+
+/* Hover des widgets */
+.widget:hover {
+    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
+}
+
+/* Couleurs spécifiques pour chaque type de widget */
+.climat { background-color: #2980b9; }    /* bleu sombre */
+.securite { background-color: #7f8c8d; }  /* gris sombre */
+.energie { background-color: #f39c12; }   /* orange */
+.lumiere { background-color: #f1c40f; }   /* jaune vif */
+
+/* Grands blocs */
+.graphiques { grid-column: span 4; background-color: #34495e; }
+.alertes { grid-column: span 4; background-color: #e74c3c; color: white; }
+
+/* ===========================
+   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: #2c3e50;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
+    text-align: center;
+    color: #ecf0f1;
+}
+
+.form-box h2 {
+    margin-bottom: 15px;
+}
+
+.form-box label {
+    display: none; /* optionnel */
+}
+
+.form-box input {
+    width: 90%;
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #7f8c8d;
+    border-radius: 5px;
+    background-color: #34495e;
+    color: #ecf0f1;
+}
+
+.form-box button {
+    width: 100%;
+    padding: 10px;
+    background-color: #e67e22;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.form-box button:hover {
+    background-color: #d35400;
 }