diff --git a/style.css b/style.css index f667cbd..30d44bd 100644 --- a/style.css +++ b/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; } \ No newline at end of file