Actualiser style.css

style.css

@@ -4,8 +4,8 @@
 body {
     font-family: Arial, sans-serif;
     margin: 20px;
-    background-color: #1c1c1c; /* fond noir sombre */
-    color: #ecf0f1; /* texte clair pour contraste */
+    background-color: #1e1e1e; /* fond sombre pour tout le site */
+    color: #f0f0f0;           /* texte clair */
 }
 
 /* ===========================
@@ -14,8 +14,8 @@ body {
 nav {
     background-color: #2c3e50;   /* fond rectangle */
     padding: 15px 30px;
-    border-radius: 10px;         /* coins arrondis */
-    box-shadow: 0 2px 10px rgba(0,0,0,0.4); /* effet profondeur */
+    border-radius: 10px;         
+    box-shadow: 0 2px 10px rgba(0,0,0,0.2); 
     margin-bottom: 20px;
 }
 
@@ -23,8 +23,8 @@ nav {
 nav ul {
     list-style: none;
     display: flex;
-    justify-content: center;     /* centre les éléments */
-    gap: 40px;                   /* espace entre les boutons */
+    justify-content: center;     
+    gap: 40px;                  
     margin: 0;
     padding: 0;
 }
@@ -32,7 +32,7 @@ nav ul {
 /* Liens */
 nav ul li a {
     text-decoration: none;
-    color: #ecf0f1;              /* texte clair */
+    color: #ecf0f1;              
     font-weight: bold;
     padding: 10px 15px;
     border-radius: 5px;
@@ -71,26 +71,20 @@ nav ul li a.btn-red:hover {
     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;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    background-color: #2c3e50; /* widget sombre */
+    color: #fff;               /* texte clair */
 }
 
-/* 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 */
+/* Couleurs spécifiques */
+.climat { background-color: #34495e; }
+.securite { background-color: #7f8c8d; }
+.energie { background-color: #f39c12; }
+.lumiere { background-color: #8e44ad; }
 
 /* Grands blocs */
-.graphiques { grid-column: span 4; background-color: #34495e; }
-.alertes { grid-column: span 4; background-color: #e74c3c; color: white; }
+.graphiques { grid-column: span 4; background-color: #2c3e50; }
+.alertes { grid-column: span 4; background-color: #c0392b; color: #fff; }
 
 /* ===========================
    ICONES
@@ -110,7 +104,7 @@ nav ul li a.btn-red:hover {
 }
 
 /* ===========================
-   FORMULAIRE LOGIN
+   FORMULAIRE LOGIN / REGISTER
 =========================== */
 .form-box {
     width: 300px;
@@ -118,33 +112,32 @@ nav ul li a.btn-red:hover {
     padding: 20px;
     background-color: #2c3e50;
     border-radius: 10px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
+    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
     text-align: center;
-    color: #ecf0f1;
+    color: #fff;
 }
 
 .form-box h2 {
     margin-bottom: 15px;
 }
 
+/* cacher labels mais accessibles */
 .form-box label {
-    display: none; /* optionnel */
+    display: none;
 }
 
 .form-box input {
     width: 90%;
     padding: 10px;
     margin: 10px 0;
-    border: 1px solid #7f8c8d;
+    border: 1px solid #ccc;
     border-radius: 5px;
-    background-color: #34495e;
-    color: #ecf0f1;
 }
 
 .form-box button {
     width: 100%;
     padding: 10px;
-    background-color: #e67e22;
+    background-color: #34495e;
     color: white;
     border: none;
     border-radius: 5px;
@@ -152,5 +145,19 @@ nav ul li a.btn-red:hover {
 }
 
 .form-box button:hover {
-    background-color: #d35400;
+    background-color: #1abc9c;
+}
+
+/* ===========================
+   ACCESSIBILITÉ LABELS
+=========================== */
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    border: 0;
 }