Actualiser style.css

style.css

@@ -1,15 +1,20 @@
-/* GLOBAL */
+/* ===========================
+   GLOBAL
+=========================== */
 body {
     font-family: Arial, sans-serif;
     margin: 20px;
     background-color: #f0f0f0;
 }
 
-/* NAVIGATION */
+/* ===========================
+   NAVIGATION GÉNÉRAL
+=========================== */
 nav {
     margin-bottom: 20px;
 }
 
+/* Anciennes règles (pour compatibilité) */
 nav a {
     margin-right: 15px;
     text-decoration: none;
@@ -21,14 +26,60 @@ nav a:hover {
     color: #007BFF;
 }
 
-/* DASHBOARD */
+/* ===========================
+   MENU HORIZONTAL MODERNE
+=========================== */
+.menu {
+    list-style: none;             /* enlève les puces */
+    display: flex;                 /* items horizontalement */
+    background-color: #2c3e50;    /* fond sombre */
+    padding: 10px 20px;
+    margin: 0;
+    border-radius: 8px;           /* coins arrondis */
+}
+
+/* Espacement entre boutons */
+.menu li {
+    margin-right: 20px;
+}
+
+/* Liens du menu */
+.menu li a {
+    text-decoration: none;
+    color: #ecf0f1;               /* texte clair */
+    font-weight: bold;
+    padding: 8px 12px;
+    border-radius: 5px;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+/* Effet hover */
+.menu li a:hover {
+    background-color: #ecf0f1;
+    color: #2c3e50;
+}
+
+/* Exemple de bouton rouge dans le menu si besoin */
+.menu li a.btn-red {
+    background-color: #e74c3c; /* rouge */
+    color: white;
+}
+.menu li a.btn-red:hover {
+    background-color: #c0392b;
+}
+
+/* ===========================
+   DASHBOARD
+=========================== */
 .dashboard {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 15px;
 }
 
-/* WIDGETS */
+/* ===========================
+   WIDGETS
+=========================== */
 .widget {
     padding: 20px;
     border-radius: 10px;
@@ -37,22 +88,37 @@ nav a:hover {
     background-color: white;
 }
 
-/* couleurs spécifiques */
+/* Couleurs spécifiques */
 .climat { background-color: #ADD8E6; }
 .securite { background-color: #D3D3D3; }
 .energie { background-color: #FFFACD; }
 .lumiere { background-color: #F5F5DC; }
 
+/* Grille widgets spéciaux */
 .graphiques { grid-column: span 4; background-color: white; }
 .alertes { grid-column: span 4; background-color: #FFC0CB; }
 
-/* icones */
+/* ===========================
+   ICONES
+=========================== */
 .icone {
     font-size: 30px;
     display: block;
     margin-bottom: 10px;
 }
 
+/* ===========================
+   ALERTES
+=========================== */
+.alert {
+    border: 3px solid red;
+    color: red;   /* texte rouge */
+}
+    font-size: 30px;
+    display: block;
+    margin-bottom: 10px;
+}
+
 /* alerte rouge */
 .alert {
     border: 3px solid red;