From 350330b4fb590b71fbdc08070fe30548b086942a Mon Sep 17 00:00:00 2001
From: rubisalpha <rubisalpha@noreply.localhost>
Date: Wed, 8 Apr 2026 07:49:15 +0000
Subject: [PATCH] Actualiser style.css

---
 style.css | 422 ++++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 332 insertions(+), 90 deletions(-)

diff --git a/style.css b/style.css
index 30d44bd..a5fae98 100644
--- a/style.css
+++ b/style.css
@@ -1,155 +1,288 @@
 /* ===========================
    GLOBAL
 =========================== */
-body {
-    font-family: Arial, sans-serif;
-    margin: 20px;
-    background-color: #1e1e1e; /* fond sombre pour tout le site */
-    color: #f0f0f0;           /* texte clair */
-}
-
-/* ===========================
-   NAVBAR RECTANGLE
-=========================== */
-nav {
-    background-color: #2c3e50;   /* fond rectangle */
-    padding: 15px 30px;
-    border-radius: 10px;         
-    box-shadow: 0 2px 10px rgba(0,0,0,0.2); 
-    margin-bottom: 20px;
-}
-
-/* Menu horizontal */
-nav ul {
-    list-style: none;
-    display: flex;
-    justify-content: center;     
-    gap: 40px;                  
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #1e1e1e;
+    color: #f0f0f0;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+/* ===========================
+   NAVBAR
+=========================== */
+nav {
+    background-color: #1a2332;
+    padding: 0 30px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0;
+}
+
+.nav-logo {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: #fff;
+    font-size: 1.2em;
+    font-weight: bold;
+}
+
+.nav-logo span {
+    font-size: 1.5em;
+}
+
+nav ul {
+    list-style: none;
+    display: flex;
+    gap: 20px;
     margin: 0;
     padding: 0;
 }
 
-/* Liens */
 nav ul li a {
     text-decoration: none;
-    color: #ecf0f1;              
-    font-weight: bold;
-    padding: 10px 15px;
+    color: #ccd6e0;
+    font-size: 0.95em;
+    padding: 5px 10px;
     border-radius: 5px;
     transition: all 0.3s;
 }
 
-/* Hover */
 nav ul li a:hover {
-    background-color: #ecf0f1;
-    color: #2c3e50;
+    color: #fff;
+    background-color: rgba(255,255,255,0.1);
 }
 
-/* Bouton rouge optionnel */
 nav ul li a.btn-red {
+    color: #e74c3c;
+}
+
+nav ul li a.btn-red:hover {
     background-color: #e74c3c;
     color: white;
 }
 
-nav ul li a.btn-red:hover {
-    background-color: #c0392b;
+/* ===========================
+   PAGE ACCUEIL
+=========================== */
+.hero {
+    text-align: center;
+    padding: 80px 20px 50px;
 }
 
-/* ===========================
-   DASHBOARD
-=========================== */
-.dashboard {
+.hero h2 {
+    font-size: 2em;
+    font-weight: bold;
+    color: #f0f0f0;
+    margin-bottom: 15px;
+}
+
+.hero p {
+    color: #aaa;
+    font-size: 1em;
+    margin-bottom: 25px;
+    line-height: 1.6;
+}
+
+.btn-primary {
+    display: inline-block;
+    background-color: #3bc4e8;
+    color: white;
+    padding: 12px 30px;
+    border-radius: 25px;
+    text-decoration: none;
+    font-weight: bold;
+    transition: background-color 0.3s;
+}
+
+.btn-primary:hover {
+    background-color: #2aafd0;
+}
+
+.cards-home {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    gap: 15px;
+    gap: 20px;
+    max-width: 1000px;
+    margin: 40px auto;
+    padding: 0 20px;
 }
 
-/* ===========================
-   WIDGETS
-=========================== */
-.widget {
-    padding: 20px;
-    border-radius: 10px;
+.card-home {
+    background-color: #2c3e50;
+    border-radius: 12px;
+    padding: 30px 20px;
     text-align: center;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-    background-color: #2c3e50; /* widget sombre */
-    color: #fff;               /* texte clair */
+    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
 }
 
-/* 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: #2c3e50; }
-.alertes { grid-column: span 4; background-color: #c0392b; color: #fff; }
-
-/* ===========================
-   ICONES
-=========================== */
-.icone {
-    font-size: 30px;
+.card-home .icone {
+    font-size: 2em;
     display: block;
-    margin-bottom: 10px;
+    margin-bottom: 12px;
+}
+
+.card-home h3 {
+    font-size: 1em;
+    font-weight: bold;
+    margin-bottom: 8px;
+    color: #f0f0f0;
+}
+
+.card-home p {
+    font-size: 0.85em;
+    color: #aaa;
+    line-height: 1.5;
 }
 
 /* ===========================
-   ALERTES
+   FOOTER
 =========================== */
-.alert {
-    border: 3px solid red;
-    color: red;
+footer {
+    border-top: 1px solid #333;
+    padding: 15px 30px;
+    text-align: left;
+    font-size: 0.85em;
+    color: #888;
+    background-color: #1e1e1e;
+}
+
+footer hr {
+    display: none;
 }
 
 /* ===========================
    FORMULAIRE LOGIN / REGISTER
 =========================== */
 .form-box {
-    width: 300px;
-    margin: 50px auto;
-    padding: 20px;
+    width: 360px;
+    margin: 60px auto;
+    padding: 30px;
     background-color: #2c3e50;
-    border-radius: 10px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
     text-align: center;
-    color: #fff;
+    color: #f0f0f0;
 }
 
 .form-box h2 {
-    margin-bottom: 15px;
+    margin-bottom: 25px;
+    font-size: 1.3em;
+    color: #f0f0f0;
 }
 
-/* cacher labels mais accessibles */
-.form-box label {
-    display: none;
+.form-box label.field-label {
+    display: block;
+    text-align: left;
+    font-size: 0.85em;
+    font-weight: bold;
+    color: #ccc;
+    margin-bottom: 5px;
+    margin-top: 15px;
 }
 
 .form-box input {
-    width: 90%;
-    padding: 10px;
-    margin: 10px 0;
-    border: 1px solid #ccc;
-    border-radius: 5px;
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid #444;
+    border-radius: 8px;
+    font-size: 0.95em;
+    color: #f0f0f0;
+    background-color: #1e1e1e;
+    transition: border 0.3s;
 }
 
-.form-box button {
+.form-box input:focus {
+    outline: none;
+    border-color: #3bc4e8;
+}
+
+.form-box input::placeholder {
+    color: #666;
+}
+
+.password-wrapper {
+    position: relative;
+}
+
+.password-wrapper input {
+    padding-right: 40px;
+}
+
+.toggle-password {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    font-size: 1em;
+    color: #888;
+    background: none;
+    border: none;
+}
+
+.form-box button[type="submit"] {
     width: 100%;
-    padding: 10px;
-    background-color: #34495e;
+    padding: 12px;
+    background-color: #3bc4e8;
     color: white;
     border: none;
-    border-radius: 5px;
+    border-radius: 25px;
     cursor: pointer;
+    font-size: 1em;
+    font-weight: bold;
+    margin-top: 20px;
+    transition: background-color 0.3s;
 }
 
-.form-box button:hover {
-    background-color: #1abc9c;
+.form-box button[type="submit"]:hover {
+    background-color: #2aafd0;
+}
+
+.form-error {
+    color: #e74c3c;
+    font-size: 0.88em;
+    margin-bottom: 10px;
+}
+
+.form-success {
+    color: #2ecc71;
+    font-size: 0.88em;
+    margin-bottom: 10px;
+}
+
+.form-link {
+    margin-top: 15px;
+    font-size: 0.88em;
+    color: #aaa;
+}
+
+.form-link a {
+    color: #3bc4e8;
+    text-decoration: none;
+}
+
+.form-link a:hover {
+    text-decoration: underline;
 }
 
 /* ===========================
-   ACCESSIBILITÉ LABELS
+   ACCESSIBILITÉ
 =========================== */
 .sr-only {
     position: absolute;
@@ -160,4 +293,113 @@ nav ul li a.btn-red:hover {
     overflow: hidden;
     clip: rect(0,0,0,0);
     border: 0;
+}
+
+/* ===========================
+   DASHBOARD
+=========================== */
+.dashboard-header {
+    padding: 30px 30px 10px;
+}
+
+.dashboard-header h2 {
+    color: #f0f0f0;
+    font-size: 1.5em;
+}
+
+.dashboard-header p {
+    color: #aaa;
+    font-size: 0.95em;
+}
+
+.dashboard {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 15px;
+    padding: 20px 30px;
+}
+
+/* ===========================
+   WIDGETS
+=========================== */
+.widget {
+    padding: 20px;
+    border-radius: 12px;
+    text-align: center;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+    background-color: #2c3e50;
+    color: #f0f0f0;
+}
+
+.widget strong {
+    display: block;
+    margin-bottom: 8px;
+    color: #f0f0f0;
+}
+
+.widget p {
+    font-size: 0.9em;
+    color: #ccc;
+}
+
+.climat    { background-color: #34495e; }
+.securite  { background-color: #7f8c8d; }
+.energie   { background-color: #f39c12; }
+.lumiere   { background-color: #8e44ad; }
+
+.graphiques {
+    grid-column: span 4;
+    background-color: #2c3e50;
+}
+
+.alertes {
+    grid-column: span 4;
+    background-color: #c0392b;
+    color: #fff;
+}
+
+/* ===========================
+   ICONES
+=========================== */
+.icone {
+    font-size: 2em;
+    display: block;
+    margin-bottom: 10px;
+}
+
+/* ===========================
+   ALERTE ACTIVE
+=========================== */
+.alert {
+    border: 2px solid #e74c3c;
+}
+
+/* ===========================
+   LOGS / ADMIN
+=========================== */
+.logs-container {
+    padding: 20px 30px;
+    background-color: #2c3e50;
+    margin: 20px 30px;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+    color: #f0f0f0;
+}
+
+.logs-container h3 {
+    color: #f0f0f0;
+    margin-bottom: 10px;
+    margin-top: 20px;
+}
+
+.logs-container ul {
+    list-style: none;
+    padding: 0;
+}
+
+.logs-container ul li {
+    padding: 8px 0;
+    border-bottom: 1px solid #3d5166;
+    font-size: 0.9em;
+    color: #ccc;
 }
\ No newline at end of file